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 :
Halamannya nampak masih kosong, karena kita memang belum menambahkan elemen apapun kedalam halaman tersebut. Sekarang mari kita coba tambahkan image kedalam halaman tersebut dengan menambahkan elemen <img> didalam elemen <body> sbb:
<body>
<img src="hutan.jpg">
</body>
Sekarang kita refresh halaman web kita, maka image hutan.jpg akan di embed ke dalam halaman web kita seperti ini:
Jika karena suatu hal, image yang kita embed tidak bisa di tampilkan di halaman web. Karena ada kesalahan menulis url nya mungkin. Misalnya ada kesalahan penulisan nama filenya seperti ini "utan.jpg. Maka saat halaman dibuka akan nampak seperti ini :
Image tidak akan bisa di load dan nampak ada icon image pecah di kiri atas. Agar lebih informatif, kita bisa menambahkan teks yang akan muncul jika image gagal di load ke halaman web kita, yaitu dengan menambahkan attribute alt seperti ini :
<body>
<img src="hutan.jpg" alt="ups... gambar rusak">
</body>
Refresh halaman web kita, maka hasilnya akan seperti ini:
Kita lihat selain icon image pecah juga ada keterangan "ups...gambar rusak". Menurut saya ini akan lebih informatif.
Kalau kita lihat, image yang berhasil di load kedalam halaman HTML kita ukurannya masih terlalu besar, dalam artian tidak proprsional. Agar lebih proporsional, kita bisa menambahkan attribute lainnya yaitu width atau height. Misal kita kasih width nya 70% seperti ini :
<body>
<img src="hutan.jpg" alt="ups... gambar rusak" width="70%">
</body>
Setelah di refresh, maka image akan di tampilkan dengan lebar 70% dari total lebar halaman dengan height nya menyesuaikan secara proporsional seperti ini :
Referensi : w3schools.com
| Prev. Chapter | Next Chapter |
|---|---|
| Elemen Warna HTML |
Tidak ada komentar:
Posting Komentar