Setelah anda mengetahui Heading  di  HTML. Selanjutnya saya akan mengajak anda untuk mempelajari cara memuat/menampilkan sebuah gambar.

Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>. Lalu dimana kita meletakkan gambar tersebut? Di dalam tag <img> atau dimanakah?

Setiap tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut.

Pada tag <img> kita akan menggunakan atribut src untuk menyimpan lokasi gambar contohnya seperti berikut ini :

 

Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti :

 

Untuk mengetahui bagaimana dari cara kerja sebuah tag html anda bisa ketikan script di bawah ini :

 

 

Note : jika gambar tidak muncul, anda harus menyimpan gambar tersebut dalam satu folder dengan file html nya.

Anda juga bisa melakukan teknik seperti ini gambarnya di dalam folder lagi

Maka anda cukup memanggilnya dengan <img src=”images/logo.png”>

lihat script dibawah ini :

 

 

Maka anda akan menghasilkan seperti ini

Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga harus menyertakan atribut alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang.

<img src=”logo.png” alt=”Ini adalah teks alternatif”/>

Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk menentukan lebar dan tinggi dari gambar tersebut. Memang hal ini tidak perlu dilakukan karena gambar secara otomatis akan terload dengan ukuran sebenarnya, namun hal ini sangat dianjurkan untuk mempercepat proses pemuatan gambar.

Dengan penambahan atribut alt, ketika gambar yang dimaksud hilang/tidak/gagal termuat maka akan muncul sebuah icon broken file, dan isi dari atribut alt akan ditampilkan disana.