Belajar Koding html Bagian 11: Membuat / Memanggil Images
.png)
HTML Image
adalah tag HTML yang digunakan untuk menambahkan gambar ke dalam halaman
web. Tag ini tidak memerlukan tag penutup.
Sintaks HTML Image
- Sintaks dasar
HTML Image adalah <img src ="URL_gambar">.
- "URL_gambar" adalah
alamat tempat gambar tersebut disimpan.
- Tag <img> memiliki dua
atribut penting, yaitu src dan alt.
- Atribut src menunjukkan lokasi
atau URL gambar yang akan ditampilkan.
- Atribut alt
adalah penjelasan berupa text tentang gambar yang ditampilkan.
Untuk
menampilkan gambar di halaman web menggunakan HTML, Anda dapat menggunakan
elemen <img>. Elemen ini memiliki beberapa
atribut penting yang perlu diperhatikan:
- src (source): Menentukan lokasi atau URL
gambar yang akan ditampilkan.
- alt (alternate text): Memberikan deskripsi teks
alternatif jika gambar tidak dapat ditampilkan.
- width dan height: Mengatur lebar dan tinggi
gambar dalam piksel atau persentase.
Contoh
Penggunaan Dasar:
<img
src="gambar-contoh.jpg" alt="Deskripsi gambar" width="500"
height="300">
Dalam
contoh di atas, gambar "gambar-contoh.jpg" akan ditampilkan dengan
lebar 500 piksel dan tinggi 300 piksel. Jika gambar tidak dapat dimuat, teks
"Deskripsi gambar" akan ditampilkan sebagai penggantinya.
Langkah-langkah Menambahkan Gambar ke HTML:
- Pilih
Gambar dengan Format yang Sesuai: Pastikan gambar yang Anda gunakan memiliki format
yang didukung oleh browser, seperti JPEG (.jpg),
PNG (.png), GIF (.gif), atau SVG (.svg).
- Simpan
Gambar di Lokasi yang Tepat: Simpan gambar di direktori yang sesuai dengan
struktur proyek Anda. Misalnya, jika Anda memiliki folder bernama images untuk menyimpan gambar,
pastikan gambar berada di dalam folder tersebut.
- Gunakan
Tag <img> dengan Atribut yang Tepat: Tulis elemen <img> dengan atribut src yang mengarah ke lokasi gambar,
dan tambahkan atribut alt untuk deskripsi alternatif.
Contoh:
<!DOCTYPE
html>
<html
lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Menampilkan Gambar</title>
</head>
<body>
<h1>Gambar Contoh</h1>
<img src="file/gambar.jpg"
alt="Gambar pemandangan alam" width="600" height="400">
</body>
</html>
 |
| Tampilan Hasil (Output) Menampilkan Gambar / Images |
Dalam
contoh ini, gambar "gambar-contoh.jpg" yang berada di folder images
akan ditampilkan dengan lebar 600 piksel dan tinggi 400 piksel.
Catatan Penting:
- Teks
Alternatif (alt): Selalu sertakan atribut alt untuk meningkatkan
aksesibilitas dan SEO. Teks ini akan ditampilkan jika gambar gagal dimuat
dan membantu mesin pencari memahami konten gambar.
- Ukuran
Gambar:
Anda dapat mengatur ukuran gambar menggunakan atribut width dan height, atau melalui CSS untuk
kontrol yang lebih fleksibel.
- Lokasi
Gambar:
Pastikan path yang Anda gunakan pada atribut src sesuai dengan lokasi
sebenarnya dari gambar dalam struktur direktori Anda.
Untuk
panduan lebih lanjut, Anda dapat merujuk ke sumber berikut:
0 Response to "Belajar Koding html Bagian 11: Membuat / Memanggil Images"
Post a Comment