Untuk menambahkan gambar pada halaman HTML, Anda dapat menggunakan elemen `<img>` (tag gambar). Berikut adalah contoh penggunaannya:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Gambar HTML</title>
</head>
<body>
<!-- Menambahkan gambar dengan atribut src -->
<img src="lokasi-gambar/gambar-anda.jpg" alt="Deskripsi gambar">
</body>
</html>
```
Dalam contoh di atas:
- `<img>` adalah tag untuk menampilkan gambar.
- Atribut `src` digunakan untuk menentukan lokasi (URL atau path lokal) dari gambar.
- Atribut `alt` adalah teks alternatif yang akan muncul jika gambar tidak dapat dimuat atau untuk aksesibilitas.
Pastikan untuk mengganti nilai atribut `src` dengan lokasi gambar yang benar, baik itu berupa URL gambar di internet atau path lokal di sistem file Anda.
Contoh untuk gambar dari internet:
```html
<img src="https://example.com/gambar.jpg" alt="Deskripsi gambar">
```
Contoh untuk gambar lokal:
```html
<img src="gambar-lokal/gambar-anda.jpg" alt="Deskripsi gambar">
```
Jika gambar Anda berada dalam folder yang sama dengan file HTML, Anda hanya perlu mencantumkan nama file gambar seperti contoh di atas.
Sure, mari kita artikan setiap bagian dari kode HTML yang Anda berikan:
1. `<!DOCTYPE html>`: Ini adalah deklarasi tipe dokumen (Document Type Declaration) dan memberi tahu browser bahwa halaman web ini menggunakan HTML versi 5.
2. `<html lang="en">`: Tag `<html>` menandai awal dan akhir dari dokumen HTML. Atribut `lang="en"` menentukan bahwa bahasa yang digunakan dalam halaman web ini adalah bahasa Inggris (English).
3. `<head>`: Bagian ini berisi informasi metadata tentang dokumen HTML, seperti karakter set yang digunakan, viewport untuk responsifitas, dan judul halaman.
- `<meta charset="UTF-8">`: Menentukan bahwa karakter set yang digunakan adalah UTF-8, yang mendukung sebagian besar karakter dunia.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Mendefinisikan viewport untuk perangkat seluler. Ini penting untuk membuat halaman web responsif.
- `<title>Contoh Gambar HTML</title>`: Menetapkan judul untuk halaman web yang akan ditampilkan di bilah judul atau tab browser.
4. `<body>`: Bagian ini berisi konten aktual dari halaman web yang akan ditampilkan kepada pengguna.
- `<img src="lokasi-gambar/gambar-anda.jpg" alt="Deskripsi gambar">`: Menambahkan gambar ke halaman dengan menggunakan tag `<img>`. Atribut `src` menentukan lokasi gambar, dan atribut `alt` memberikan deskripsi alternatif untuk gambar (digunakan jika gambar tidak dapat dimuat atau untuk aksesibilitas).
Jadi, secara keseluruhan, kode HTML ini adalah kerangka dasar dari halaman web yang menampilkan gambar dengan judul "Contoh Gambar HTML" dan menggunakan deklarasi tipe dokumen HTML5.
`<img src="lokasi-gambar/gambar-anda.jpg" alt="Deskripsi gambar">` adalah elemen HTML yang menampilkan gambar di halaman web. Di sini, beberapa atribut digunakan:
- `src`: Atribut ini menunjukkan sumber atau lokasi gambar. Dalam contoh ini, gambar diharapkan berada di dalam folder atau jalur `lokasi-gambar` dan diberi nama `gambar-anda.jpg`. Lokasi ini bisa berupa URL (jika gambar di-host secara online) atau path lokal (jika gambar berada di sistem file lokal).
- `alt`: Atribut ini memberikan teks deskripsi alternatif untuk gambar. Deskripsi ini akan ditampilkan jika gambar tidak dapat dimuat atau untuk membantu pengguna dengan pembaca layar (untuk aksesibilitas). Dalam contoh ini, deskripsi gambar disetel sebagai "Deskripsi gambar", tetapi Anda seharusnya menggantinya dengan deskripsi yang sesuai dengan konten gambar tersebut.
Sebagai contoh, jika gambar berada di folder yang sama dengan file HTML, dan gambar tersebut memiliki nama "contoh-gambar.jpg", maka Anda dapat menggantinya seperti ini:
```html
<img src="contoh-gambar.jpg" alt="Deskripsi gambar">
```
Pastikan bahwa path atau URL yang Anda berikan pada atribut `src` sesuai dengan lokasi sebenarnya dari gambar dan pastikan gambar tersebut dapat diakses oleh browser.