1. Pengertian Gambar dalam HTML

Gambar digunakan untuk:

Memperjelas informasi
Menarik perhatian pengguna
Membuat tampilan website lebih profesional

Tag yang digunakan:

<img src="gambar.jpg" alt="deskripsi gambar">

2. Struktur Tag `<img>`

<img src="lokasi_gambar" alt="deskripsi">

Penjelasan:

Atribut	Fungsi
src	lokasi file gambar
alt	deskripsi gambar
width	lebar
height	tinggi

3. Contoh Dasar

<img src="gambar.jpg" alt="Pemandangan">

4. Atribut Penting pada Gambar

4.1 Alt (WAJIB di industri)

<img src="logo.png" alt="Logo Sekolah">

Fungsi:

SEO
Accessibility (screen reader)
Jika gambar gagal load

4.2 Width & Height

<img src="foto.jpg" width="200">

4.3 Style (CSS)

<img src="foto.jpg" style="border-radius:10px;">

5. FORMAT GAMBAR YANG DIDUKUNG

Format	Kegunaan
JPG	foto
PNG	transparan
GIF	animasi
SVG	vector

6. FOLDER ASSETS (WAJIB INDUSTRI 🔥)

6.1 Pengertian

Assets adalah folder untuk menyimpan:

Gambar
CSS
JavaScript

6.2 Struktur Folder Standar

project/
│
├── index.html
├── profil.html
│
├── assets/
│   ├── img/
│   │   ├── logo.png
│   │   ├── banner.jpg
│   │
│   ├── css/
│   └── js/

6.3 Kenapa Harus Pakai Assets?

✔ Rapi
✔ Mudah dikelola
✔ Standar industri
✔ Siap dikembangkan ke framework

7. MENGAMBIL GAMBAR DARI FOLDER

7.1 Contoh

<img src="assets/img/logo.png" alt="Logo">

7.2 Jika dari folder berbeda

<img src="../assets/img/logo.png">

👉 .. = naik folder

8. STUDI KASUS UTAMA (WEBSITE REAL 🔥)

🎯 Kasus: Website Sekolah

Struktur:

sekolah/
├── index.html
├── profil.html
│
├── assets/
│   └── img/
│       ├── sekolah.jpg
│       ├── siswa.jpg
│       ├── logo.png

8.1 index.html

<h1>SMK Teknologi</h1>

<img src="assets/img/logo.png" alt="Logo Sekolah" width="100">

<p>Selamat datang di website sekolah.</p>

<img src="assets/img/sekolah.jpg" alt="Gedung Sekolah" width="400">

8.2 profil.html

<h1>Profil Sekolah</h1>

<a href="index.html">Kembali</a>

<img src="assets/img/siswa.jpg" alt="Siswa belajar" width="400">

<p>Sekolah berbasis teknologi modern.</p>

👉 Ini sudah website real sederhana + gambar nyata

9. GAMBAR SEBAGAI LINK

Contoh:

<a href="profil.html">
    <img src="assets/img/logo.png" alt="Logo">
</a>

👉 Klik gambar → pindah halaman

10. BEST PRACTICE INDUSTRI

✔ Gunakan folder assets

✔ Gunakan nama file jelas

logo-sekolah.png

✔ Gunakan alt yang deskriptif

❌ Salah:

alt="gambar"

✔ Benar:

alt="Gedung SMK Teknologi"

✔ Optimasi ukuran gambar

👉 Jangan upload gambar 5MB

11. KESALAHAN UMUM SISWA

❌ Gambar tidak muncul

Penyebab:

Salah path
Nama file salah
Huruf besar/kecil beda

❌ Tidak pakai alt

❌ File berantakan (tidak pakai folder)

12. DEBUGGING GAMBAR

Jika gambar tidak tampil:

Cek path
Cek folder
Cek nama file
Inspect → lihat error

13. LATIHAN SISWA

Latihan 1

Tampilkan 3 gambar dari folder

Latihan 2

Buat gambar sebagai link

Latihan 3

Gunakan alt + width

14. MINI PROJECT

🎯 “WEBSITE PROFIL SEKOLAH REAL”

Fitur:

Navbar
Gambar logo
Banner sekolah
Halaman profil
Semua gambar dari folder assets

15. KESIMPULAN

Gambar + assets adalah kunci untuk:

Website terlihat profesional
Struktur project rapi
Siap ke level berikutnya (CSS, framework)

Tag utama:

<img src="" alt="">