Menampilkan Gambar dengan HTML
Element HTML untuk menampikan gambar di dokument html yakni element dengan tag <img>.
Tag <img> memiliki atribut wajib yaitu atribut src yang digunakan untuk memanggil file gambar agar tampil di dokument html atau web.
Contoh menampilkan gambar di html dengan tag <img> sebagai berikut:
Contoh penggunaan tag <img> di HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsL59b2kctmmwUdlAdEKcAuvo5M37NHzAIwb42eW5l2heeHzJ55LipYoBQoFfhc_IrjkM20OnyyWIA2Jjp51SlZ0Qu9ilVauGXK38bzPazNjbaQaJ5YEGLNqlkWmwR_meeoaLjQnXMAG4/s1600/zen.jpg" />
</body>
</html>
Atribut src di tag <img>
Atribut scr di tag <img> sistem kerjanya sama seperti atribut href di tag link, yakni memanggil file tertentu. bedanya, atribut ini di gunakan untuk memanggil file dan menampilkannya tampa harus menunggu even dari pengguna, dan Atribut ini adalah atribut wajib yang harus selalau ada di dalam tag <img>.
Atribut src adalah singkatan dari source, atribut yang mendefinisikan alamat dari gambar yang akan ditampilkan. Alamat di atribut src bisa relatif atau absolute seperti yang sudah kita bahas sebelumnya di element link.
Atribut width dan height di tag <img>
Atribut eidth=".." dan height=".." berfungsi untuk menentukan lebar dan tinggi gambar saat di tampilkan.
Contoh penggunaan atribut Width dan Height sebagai berikut:
Contoh pengunaan atribut Width dan Height di tag <img>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsL59b2kctmmwUdlAdEKcAuvo5M37NHzAIwb42eW5l2heeHzJ55LipYoBQoFfhc_IrjkM20OnyyWIA2Jjp51SlZ0Qu9ilVauGXK38bzPazNjbaQaJ5YEGLNqlkWmwR_meeoaLjQnXMAG4/s1600/zen.jpg" width="50" height="50"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsL59b2kctmmwUdlAdEKcAuvo5M37NHzAIwb42eW5l2heeHzJ55LipYoBQoFfhc_IrjkM20OnyyWIA2Jjp51SlZ0Qu9ilVauGXK38bzPazNjbaQaJ5YEGLNqlkWmwR_meeoaLjQnXMAG4/s1600/zen.jpg" width="100" height="100"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsL59b2kctmmwUdlAdEKcAuvo5M37NHzAIwb42eW5l2heeHzJ55LipYoBQoFfhc_IrjkM20OnyyWIA2Jjp51SlZ0Qu9ilVauGXK38bzPazNjbaQaJ5YEGLNqlkWmwR_meeoaLjQnXMAG4/s1600/zen.jpg" width="150" height="150"/>
</body>
</html>
Atribut alt di tag <img>
Atribut alt="..." singkatan dari alternative description yang berfungsi sebagai deskripsi untuk gambar ketika gambar gagal di tampikan oleh web browser.
Contoh penggunaan atribut alt srbagai berikut:
Contoh penggunaan atribut alt di tag <img>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="http://xxxx.jpg" width="100" height="100" alt="fotoku"/>
</body>
</html>
Preview
Contoh di atas sama memang senaja menulis alamat gambar yang salah, maka deskripsi di atribut alt="fotoku" akan di tampilkan karena file gambar tidak di buat oleh browser.