Tutorial Belajar HTML Part 9 - Menyisipkan Gambar dalam HTML: Menampilkan Grafik pada Halaman Web
Menyisipkan Gambar dalam HTML: Menampilkan Grafik pada Halaman Web
Salah satu elemen kunci dalam memperkaya konten halaman web adalah menyisipkan gambar. Dalam HTML, tag <img> digunakan untuk menampilkan grafik atau gambar dalam halaman web.
Cara Menyisipkan Gambar dengan Tag <img>
Tag <img> digunakan untuk menampilkan gambar dan membutuhkan atribut src yang menunjukkan lokasi atau URL gambar yang akan ditampilkan. Selain itu, atribut alt direkomendasikan untuk memberikan deskripsi singkat tentang gambar untuk aksesibilitas dan keperluan SEO.
Contoh Sederhana:
<img src="lokasi-gambar.jpg" alt="Deskripsi Gambar">
Atribut Utama pada Tag <img>
'src'
Atribut ini merupakan URL atau lokasi dari gambar yang akan ditampilkan.
'alt'
Atribut ini menyediakan deskripsi singkat dari gambar, biasanya akan muncul jika gambar gagal dimuat atau untuk keperluan aksesibilitas.
Menentukan Lokasi Gambar
Lokasi gambar bisa berada di berbagai tempat, misalnya:
-
Situs Web Eksternal: Gunakan URL dari situs web lain.
-
Lokal (Pada Server yang Sama): Tentukan jalur relatif atau absolut menuju gambar jika berada di server yang sama dengan halaman web Anda.
Format Gambar yang Didukung
HTML mendukung berbagai format gambar seperti JPEG, PNG, GIF, SVG, dan lainnya. Namun, pastikan untuk memilih format yang tepat untuk mempertahankan kualitas gambar dan kebutuhan tampilan.
Ukuran dan Resolusi Gambar
Anda dapat mengontrol ukuran gambar menggunakan CSS atau atribut width dan height pada tag <img>. Selain itu, perhatikan ukuran file dan resolusi untuk memastikan gambar tidak memperlambat waktu pemuatan halaman.
Kesimpulan
Menyisipkan gambar dalam halaman web menggunakan tag <img> adalah cara yang efektif untuk memperkaya konten visual. Pastikan untuk memberikan deskripsi yang sesuai dengan atribut alt untuk keperluan aksesibilitas dan SEO. Eksperimenlah dengan pengaturan ukuran, format, dan tata letak gambar untuk mencapai tampilan yang sesuai dengan kebutuhan desain dan konten halaman web Anda.
