dasar html (8) : Menampilkan Gambar di Dokumen HTML

Untuk menampilkan gambar pada sebuah dokumen html digunakan tag image <img> dengan atribut src untuk merujuk dimana file penyimpanan imagenya.

tag <img> merupakan tag tunggal dimana tag ini adalah tag special tanpa penutup tag </img>

contoh:

<html>
<body>
<img src="http://adhit.net/wp-content/uploads/2012/10/ZfOM4e35469f8f1c6.jpg" />
</body>
</html>

Atribut yang ada pada tag img:

ALT

Atribut alt (alternative) digunakan sebagai teks alternatif jika gambar yang di maksud tidak bisa di tampilkan karena beberapa alasan seperti koneksi yang lambat, error pada atribut scr, dan lainnya.

<html>
<body>
<img src="http://adhit.net/wp-content/uploads/2012/10/ZfOM4e35469f8f1c6.jpg" alt="hace blogger" />
</body>
</html>

 

Pada contoh diatas, apabila gambar nggak muncul, maka akan digantikan dengan text yang ada di alt, yaitu hace blogger

MENGATUR TINGGI DAN LEBAR GAMBAR

Mengatur tinggi gambar dapat menggunakan atribut heigh dan untuk mengatur lebar dengan atribut width

<html>
<body>
<img src="http://adhit.net/wp-content/uploads/2012/10/ZfOM4e35469f8f1c6.jpg"" alt="blogger jogja" width="200px" height="100px"/>
</body>
</html>

POSISI GAMBAR:

misal letak file gambar:

c:contohgambardiluar.jpg
c:contohhtmldokumenhtmlku.html
c:contohhtmlgambarsejajar.jpg
c:contohhtmlimggambardidalam.jpg

UNtuk menampilkan gambar di setiap posisi folder ada caranya sendiri-sendiri, biar lebih jelasnya ketiklah contoh dibawah dan perhatikan hasilnya:

<html>
<body>
tampilkan image sejajar dengan dokumen html <img src="gambarsejajar.jpg">
tampilkan image diluar folder dokumen html <img src="../gambardiluar.jpg">
tampilkan image didalam folder img  <img src="img/gambardidalam.jpg">
</body>
</html>

NOTE:

pada generasi html 4 , XHTML dan generasi kedepannya, penulisan ta image tanpa penutup adalah merupakan sauatu kesalahan. sebagai solusinya tag img tetap diberikan tag penutup namun langsung pada tag nya menjadi bentuknya <img />

Untuk menampilkan gambar pada sebuah dokumen html digunakan tag image <img> dengan atribut src untuk merujuk dimana file penyimpanan imagenya.

Leave a Reply

Your email address will not be published. Required fields are marked *