Cara Menyisipkan Gambar dengan HTML
HTML menyediakan tag khusus untuk menyisipkan gambar ke dalam halaman web. Tag tersebut adalah <img>. Tag ini merupakan tag kosong, artinya tidak memiliki konten di dalamnya, melainkan atribut yang menentukan bagaimana gambar ditampilkan. Berikut adalah penjelasan detailnya:
Atribut Utama Tag <img>
-
src: Atribut ini harus diisi dengan alamat URL gambar yang ingin disisipkan. Alamat ini bisa berupa alamat lokal di dalam folder proyek, atau alamat web dari server lain. Contoh:
-
alt: Atribut ini harus diisi dengan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat. Teks ini juga digunakan oleh pembaca layar untuk membantu pengguna dengan disabilitas visual memahami konten gambar. Contoh:
Atribut Tambahan
-
widthdanheight: Atribut ini digunakan untuk menentukan lebar dan tinggi gambar dalam piksel. Jika tidak diisi, gambar akan ditampilkan dengan ukuran aslinya.
-
title: Atribut ini digunakan untuk menentukan teks tooltip yang akan ditampilkan saat kursor mouse di atas gambar.
-
border: Atribut ini digunakan untuk menentukan ketebalan border gambar dalam piksel.
Contoh Penggunaan
Contoh Menyisipkan Gambar
Judul Halaman
Ini adalah paragraf teks.
Tips
- Pastikan gambar yang ingin Anda sisipkan memiliki format yang didukung oleh browser, seperti JPG, PNG, GIF, atau SVG.
- Gunakan ukuran gambar yang sesuai dengan lebar dan tinggi halaman web agar tidak menyebabkan halaman web menjadi terlalu besar.
- Selalu gunakan atribut
altuntuk memberikan teks alternatif yang deskriptif agar halaman web Anda dapat diakses oleh pengguna dengan disabilitas visual.
Kesimpulan
Menyisipkan gambar dengan HTML sangat mudah dengan menggunakan tag <img> dan atribut-atributnya. Dengan memahami cara kerja tag ini, Anda dapat menambahkan gambar ke dalam halaman web Anda dengan mudah dan efisien.