Salah satu elemen yang ada didalam dokumen html, adalah elemen<img>. Elemen ini berguna untuk memuat gambar atau image didalam halaman HTML kita. Ini akan meningkatkan desain dan tampilan halaman web kita.
Yang harus kita siapkan dalam tutorial kali ini adalah buat sebuah dokumen HTML sbb:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images Page</title>
</head>
<body>
</body>
</html>
Save file tersebut dengan nama index.html.
Selanjutnya siapkan file gambar (image) dan simpan didalam folder yang sama dengan file index.html tadi. Misalnya saya memiliki 3 buah file gambar dengan nama hutan.jpg, cabin.jpg, api-unggun.jpg.
Setelah kita siapkan semuanya, kini saat nya kita berkenalan dengan elemen image dengan tag <img>. Tag <img> ini digunakan untuk menyematkan (embed) image kedalam halaman web, temasuk kedalam kategori Empty Element jadi hanya berisi attribute saja, tidak memiliki end tag atau tag penutup.
Syntax dasarnya sbb:
<img src="url" alt="alternatetext">
srcmenunjukkan path dari image yang akan kita embed.altadalah teks alternatif yang akan di tampilkan jika file image tidak bisa di tampilkan ke halaman web.
Attribute yang wajib ada dalam elemen <img> ini adalah attribute src, karena attribute ini lah yang akan membuat sebuah link terhadap image yang kita simpan di server.
Mudahnya begini, misalnya kita akan menyematkan image hutan.jpg kedalam halaman web kita. Oya.., sebelumnya mari kita coba buka terlebih dahulu halaman web yang sudah kita buat yaitu index.html. Saat dibuka, penampakan halaman web kita akan seperti ini :
