Gambar dalam HTML

Dalam HTML kita bisa menambahkan gambar berupa format bmp, jpg, png dan gif. Untuk menambahkan gambar, kita menggunakan tag <img>. Tag <img> termasuk tag yang berdiri sendiri sehingga tidak perlu tag penutup. Tag <img> satu atribut wajib yaitu "src". Format gambar yang bisa digunakan untuk tag <img> adalah JPEG / JPG, GIF, PNG, dan BITMAP / BMP. Gambar yang ada dalam nilai atribut "src" harus ada di folder yang sama dengan file html, kecuali jika nama foldernya disebutkan.

Gambar yang digunakan harus punya nama sesuai nilai dari atribut src. Jika kalian menggunakan gambar bertipe jpeg, ekstensinya bisa "jpg" atau "jpeg". Gambar harus diletakkan di folder yang sama dengan file yang berisi kode HTML-nya jika nama gambar disebutkan tanpa nama folder.


Contoh kode HTML-nya bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <h2>Gambarku</h2>
    <img src="gambarku.jpeg" alt= "gambarku tidak ada"/>
</BODY>
</HTML>


Atribut Alt

Selain atribut src, pada contoh di atas ada atribut alt yang digunakan untuk menampilkan tulisan jika gambar tidak ditemukan. Jika gambar tidak ada, nilai atribut "alt" akan ditampilkan untuk menggantikan gambarnya.


Panjang dan Lebar Gambar

Kalian bisa menentukan panjang dan lebar gambar dengan atribut width dan height. Jika panjang dan lebarnya tidak ditentukan, maka gambar akan ditampilkan sesuai ukuran aslinya. Jika kita ingin menentukan ukuran gambar agar sesuai keinginan kita, maka kita bisa menggunakan atribut width (lebar) dan height (tinggi).
<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <h2>Gambarku</h2>
    <img src="gambarku.jpg" width="50px" height="auto" />
    <BR /><BR />
    <img src="gambarku.jpg" width="25%" height="auto" />
</BODY>
</HTML>

Satuan yang umum digunakan untuk panjang dan lebar gambar adalah persen (%) dan pixel (px). Jika kalian tidak menggunakan satuan setelah angka, maka satuan default-nya adalah pixel. Selain itu kalian bisa juga menggunakan cm, mm, dan sejenisnya.