Cara Menampilkan Gambar di HTML

Halo semua! Kalian ingin tahu cara menampilkan gambar di HTML? Nah, kesempatan ini kodeviolet.com akan membahas tentang "Cara Menampilkan Gambar di HTML" dengan langkah-langkah yang mudah dipahami, bahkan untuk pemula sekalipun.

Pengertian Dasar Tag <img>

Untuk menampilkan gambar di halaman HTML, kita menggunakan tag <img>. Tag ini bersifat self-closing, artinya tidak memerlukan tag penutup. Berikut struktur dasarnya:

<img src="alamat-gambar" alt="deskripsi gambar">

Penjelasan Atribut:

Atribut	Fungsi
src	Sumber atau URL gambar yang ingin ditampilkan
alt	Teks alternatif jika gambar gagal dimuat (juga membantu SEO dan aksesibilitas)
width	Lebar gambar (dalam piksel atau persentase)
height	Tinggi gambar (dalam piksel atau persentase)

Cara Menampilkan Gambar dari Folder Lokal

Jika kalian memiliki gambar yang tersimpan di dalam folder proyek HTML, pastikan struktur foldernya seperti ini:

proyek-html/
├── index.html
└── gambar/
    └── foto.jpg

Lalu, gunakan tag berikut di index.html:

<img src="gambar/foto.jpg" alt="Foto dari folder lokal">

Cara Menampilkan Gambar dari URL

Kalian juga bisa menampilkan gambar langsung dari internet. Contohnya:

<img src="https://example.com/gambar.jpg" alt="Contoh Gambar dari Internet">

Menyesuaikan Ukuran Gambar

Untuk mengatur ukuran gambar, bisa menggunakan atribut width dan height:

<img src="gambar/foto.jpg" alt="Foto Ukuran Disesuaikan" width="300" height="200">

Atau menggunakan CSS agar lebih fleksibel:

<img src="gambar/foto.jpg" alt="Foto dengan CSS" style="width: 50%; height: auto;">

Tips Tambahan

• Gunakan format gambar umum seperti .jpg, .png, atau .webp
• Gunakan gambar dengan ukuran file kecil agar website tidak lambat
• Pastikan gambar memiliki alt untuk aksesibilitas dan SEO

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara menampilkan gambar di HTML. Semoga kalian bisa lebih paham dan bisa langsung mempraktikkannya di proyek HTML kalian. Sampai jumpa di artikel selanjutnya!