Untuk menambahkan gambar ke dalam halaman HTML, kita dapat menggunakan elemen <img>. Elemen ini digunakan khusus untuk menyisipkan gambar ke dalam dokumen HTML. Nah berikut langkah-langkahnya:
Struktur HTML untuk menambahkan gambar:
<img src="path/gambar.jpg" alt="Deskripsi Gambar">Tau gak atribut apa yang dipakai?🤔 Yuk simak penjelasannya.
- src: (Source) menentukan lokasi file gambar. Ini bisa berupa:
- URL absolut: Contoh, https://example.com/image.jpg.
- URL relatif: Contoh, images/pic.jpg (file gambar berada di folder bernama "images").
- alt: (Alternative Text) memberikan deskripsi gambar yang akan muncul jika gambar tidak dapat ditampilkan. Ini juga membantu meningkatkan aksesibilitas.
Dibawah ini contoh penggunaanya mari simak dengan baik ya😉.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar</title>
</head>
<body>
<h1>Gambar Kue</h1>
<img src="asset/Gambar kue/doraemon.jpg" alt="Gambar Kue Doraemon">
</body>
</html>Alur Latihan dalam penggunaannya adalah:
- Membuka VSCode.
- Membuat dokumen HTML pada VSCode.
- Mnyiapkan gambar lalu buat folder (misal: buat folder "asset", didalam folder asset buat folder "Gambar kue", setelah itu masukan gambar pada folder tersebut dalam format .jpg/ .png).
- Menambahkan elemen gambar.
- Menjalankan dokumen HTML pada browser.
Hasilnya:
Saat halaman dibuka, gambar yang berada di alamat folder "asset/Gambar kue/doraemon.jpg" akan ditampilkan di browser seperti contoh diatas. Pastikan URL gambar dapat diakses dan tidak dilindungi oleh izin khusus.
Jika URL tidak valid atau gambar dihapus, browser akan menampilkan deskripsi dari atribut alt. Semoga berhasil😉.
