Image Html Dasar

Halo teman-teman pada kesempatan ini saya akan sharing tentang html dasar yang telah saya pelajari yaitu Image Html Dasar merupakan tag HTML digunakan untuk menyisipkan suatu gambar ke dalam suatu halaman HTML. HTML element tag <img> berfungsi sebagai kontainer bagi suatu sumber daya gambar yang merujuk pada suatu URL dengan isi data file gambar. Lansung saja kita bahas materinya.

1. Internal Resource

• Sintaks: <img src="...">

Buat html seperti biasa lalu tambahkan sintaks untuk menambahkan gambar seperti dibawah dan jangan lupa untuk gambar itu menjadi satu dengan folder html yang kita ingin berikan gambar.

Lalu buka file html yang sudah kita masukan sintak image di browser kalian.

        2. External Resource

• Sintaks: <img src="...">

Bukalah website yang memiliki gambar lalu kalian "copy image address". Ada beberapa hal yang perlu diperhatikan saat kalian menggunakan link image website lain:

- Bandwitdh gambar yang kalian pakai itu adalah bandwitdh dari website yang kalian copy image addressnya.

- Gambar yang kalian pakai belum tentu bebas pakai, bisa saja kalian kena copyright.

- Pada saat sever dari image yang kalian copy dari website lain belum tentu juga server selalu standby bisa saja server yang mereka miliki sedang down atau maintenance, jadi image yang tampil pada website kalian tidak ada.

Itu baru penggunaan metode dalam image dan sekarang kita bahas apa saja atribut yang ada di sintaks <img src="...">

        3. Atribut Alt

Alt ini berguna untuk melakukan alternatif teks pada gambar yang kita. Buatlah seakan-akan kalian memiliki gambar yang corrupt atau salah format seperti dibawah untuk melakukan test terhadap sintaks yang ingin kita coba.

• Sintaks: alt="..."

           4. Atribut Width

• Sintaks: width="..."

width ini digunakan untuk melebarkan gambar yang sudah default sebelumnya

        5. Atribut Title

• Sintaks: title="..."

Title ini berguna untuk melabeli gambar dengan nama tertentu. Caranya kalian diamkan kursor saja beberapa saat pada gambar website lalu akan muncul label nama pada gambar.

        6. Atribut Height

• Sintaks: height="..."

Height ini digunakan untuk memperpanjang gambar pada halaman website kalian

Dari penjelasan sebelumnya Width dan Height, ternyata memiliki format px dan persen, tentu saja ini akan sangat berpengaruh pada saat pembuatan suatu website, kalau format px itu sudah ada pada penjelasan sebelumnya Jadi format px itu hanya angka saja yang kita ketikan dan persen harus memiliki lambang persen(%) setelah angka yang kita ketikan, kalau menggunakan persen ukuran gambar akan menyesuaikan ukuran browser kalian.

        7. Hyperlink + Gambar

• Sintaks: <a href="https://www.facebook.com/Akhmal.Faidillah"><img src="kucingoren.jpg" alt="Kucing Oren" width="25%" title="Gambar Kucing Lucu"></a>

Pertama kalian copy link website atau sosial media yang kalian ingin tuju, setelah itu kalian diamkan klik pada gambar website kalian lalu gambar tersebut akan mendirect ke link yang ingin dituju.