loading...

HTML Dasar: Image

Berbicara tentang Image pada HTML, tentu ini berkenaan dengan menampilkan sebuah gambar. Pertama kita harus persiapkan gambar yang mau ditampilkan (.jpg/png) yang disimpan pada lokasi tertentu. Sumber lokasi dibedakan menjadi dua yaitu internal dan eksternal. Image atau tag <img> pada HTML secara default tidak memiliki pasangan/ tag akhir. Penasaran, let's code!

<!-- Internal resource -->
<img src="gambar.png">

<!-- External resource -->
<img src="https://www.google.com/images/srpr/logo11w.png"

Selain atribut src, pada image juga memiliki atribut pendukung lainnya. Atribut yang bisa kita coba: src, alt, title, width, height. Src (source) untuk memanggil-menampilkan, alt (alternate) untuk memberi alternatif teks ketika gambar gagal atau pending ditampikan, title yaitu untuk memberi judul pada gambar ketika kursor diarahkan/hover, width (lebar) dan height (tinggi) untuk sebuah gambar dalam ukuran px maupun %.

<!-- Internal resource -->
<img src="folder/gambar.png" alt="Contoh internal" width="20%">

<!-- External resource -->
<img src="https://www.google.com/images/srpr/logo11w.png" alt="Contoh eksternal" title="Penjelaskan tentang gambar" width="300px" height="150px">

Sebagai catatan: ingat penggunaan width dan height harus sesuaikan dengan ukuran gambar agar tampilan tidak stretch. Sebagai pembelajaran lebih lanjut image bisa dikombinasikan dengan hyperlink. Jadi jangan ragu untuk mencoba segala hal tentang tag di HTML. Selamat belajar, tetap semangat! ;-)


0 Comments

Leave a comment