Tambah Gambar ke Website dengan Gambar Self-Closing
Menambahkan gambar ke website itu gampang banget, lho! Kamu bisa pakai tag <img>
, yang merupakan tag self-closing dalam HTML. Artinya, tag ini nggak perlu penutup seperti tag lainnya.
Cara Menambahkan Gambar dengan Tag <img>
Berikut langkah-langkahnya:
- Atribut Penting:
src
: Menentukan sumber atau lokasi gambar. Kamu bisa menggunakan URL absolut (misalnya,https://contoh.com/gambar.jpg
) atau URL relatif jika gambar ada di direktori yang sama dengan file HTML kamu (misalnya,gambar.jpg
).alt
: Memberikan teks alternatif yang akan ditampilkan jika gambar gagal dimuat. Ini juga membantu aksesibilitas bagi pengguna dengan keterbatasan penglihatan.
Menyesuaikan Ukuran Gambar: Kamu bisa mengatur lebar dan tinggi gambar dengan atribut width
dan height
. Nilainya dalam piksel.
<img src="images/logo.png" alt="Logo Perusahaan" width="200" height="100">
Atau, kamu bisa menggunakan CSS untuk kontrol yang lebih fleksibel:
<img src="images/logo.png" alt="Logo Perusahaan" style="width:200px; height:100px;">
Contoh Penggunaan:
<img src="https://contoh.com/logo.png" alt="Logo Perusahaan">
Jika gambar logo.png
ada di folder images
yang berada di direktori yang sama dengan file HTML, kamu bisa menuliskannya seperti ini:
<img src="images/logo.png" alt="Logo Perusahaan">
Gunakan Tag <img>
: Tag ini digunakan untuk menampilkan gambar di halaman web. Karena sifatnya self-closing, kamu cukup menuliskannya seperti ini:
<img src="URL_gambar" alt="Deskripsi gambar">
Tips Tambahan:
- Pastikan Path Benar: Pastikan path yang kamu tulis di atribut
src
sesuai dengan lokasi gambar sebenarnya, agar gambar bisa ditampilkan dengan benar. - Gunakan Teks Alternatif yang Deskriptif: Teks di atribut
alt
sebaiknya mendeskripsikan gambar dengan jelas, untuk meningkatkan aksesibilitas dan SEO. - Optimalkan Ukuran File Gambar: Agar halaman web kamu lebih cepat dimuat, gunakan gambar dengan ukuran file yang optimal tanpa mengorbankan kualitas.
Dengan memahami cara kerja tag <img>
yang bersifat self-closing, kamu bisa menambahkan gambar ke website dengan mudah dan efisien. Selamat mencoba!