Advan – Ketika kamu sedang membangun sebuah halaman web, salah satu elemen penting yang tidak boleh kamu lupakan adalah gambar. Bagaimana cara menambahkan gambar di HTML dengan tepat? Gambar bukan hanya mempercantik tampilan, tetapi juga membantu menyampaikan pesan lebih jelas kepada pengunjung. Dalam artikel ini, kita akan membahas langkah-langkah sederhana untuk menyisipkan gambar ke dalam kode HTML. Yuk, simak penjelasannya!
Sebelum kita mulai, pastikan kamu sudah menyiapkan gambar yang ingin kamu gunakan. Baik itu gambar produk, ilustrasi, atau foto pribadi, semua bisa ditambahkan ke dalam HTML. Jika kamu menggunakan Notebook Advan Workpro, kamu bisa dengan mudah mengedit HTML dan menambahkan gambar tanpa masalah. Nah, langsung saja kita bahas bagaimana cara menambahkan gambar di HTML dengan tepat.
1. Memahami Tag `<img>`
Tag HTML yang digunakan untuk menambahkan gambar adalah `<img>`. Tag ini cukup sederhana, tapi sangat powerful! Sebuah tag `<img>` biasanya memiliki atribut yang perlu kamu ketahui. Yang paling penting adalah atribut `src` yang berfungsi untuk menentukan sumber gambar, serta atribut `alt` yang memberikan deskripsi alternatif untuk gambar. Deskripsi ini sangat penting untuk aksesibilitas dan SEO.
Berikut adalah contoh dasar penulisan tag `<img>`:
“`html
<img src=”url-gambar.jpg” alt=”Deskripsi Gambar”>
“`
Pastikan untuk mengganti `url-gambar.jpg` dengan URL atau path gambar yang ingin kamu tampilkan. Jika kamu menyimpan gambar di folder yang sama dengan file HTML, kamu hanya perlu menuliskan nama file gambar tersebut. Misalnya, jika kamu punya gambar bernama `produk.jpg`, kamu bisa menulisnya seperti ini:
“`html
<img src=”produk.jpg” alt=”Gambar Produk”>
“`
2. Menambahkan Gambar ke dalam Halaman Web
Setelah kamu memahami dasar-dasar tag `<img>`, saatnya untuk menambahkan gambar ke dalam halaman webmu. Cukup letakkan tag `<img>` di lokasi yang diinginkan dalam file HTML. Gambar dapat diletakkan di dalam elemen lain seperti `<div>` atau `<section>` untuk pengaturan yang lebih baik.
Contoh kode HTML yang menampilkan gambar di dalam sebuah div:
“`html
<div>
<h2>Produk Terbaru</h2>
<img src=”produk.jpg” alt=”Gambar Produk”>
<p>Ini adalah produk terbaru kami yang sangat direkomendasikan!</p>
</div>
“`
Jika kamu ingin menambahkan beberapa gambar, kamu cukup menduplikasi tag `<img>` dan mengubah atribut `src` serta `alt` sesuai dengan gambar yang ingin ditampilkan. Misalnya:
“`html
<div>
<h2>Galeri Gambar</h2>
<img src=”gambar1.jpg” alt=”Gambar Pertama”>
<img src=”gambar2.jpg” alt=”Gambar Kedua”>
</div>
“`
Baca Juga: Apa Fungsi Tag Meta dalam HTML untuk SEO?
3. Mengatur Ukuran dan Gaya Gambar
Untuk membuat tampilan gambar lebih menarik, kamu juga bisa mengatur ukuran dan gaya gambar dengan menggunakan CSS. Misalnya, jika kamu ingin mengatur lebar gambar agar responsif, kamu bisa menggunakan kode CSS berikut:
“`css
img {
width: 100%;
height: auto;
}
“`
Dengan menambahkan CSS di atas ke dalam file stylesheet, semua gambar yang ada di halaman akan memiliki lebar 100% dari kontainer, dan tinggi akan disesuaikan secara otomatis. Ini sangat membantu untuk menjaga tampilan agar tetap proporsional.
Sekarang kamu sudah tahu bagaimana cara menambahkan gambar di HTML dengan tepat. Dengan mengikuti langkah-langkah di atas, kamu bisa membuat halaman web yang lebih menarik dan informatif. Jangan lupa untuk selalu memberikan atribut `alt` pada gambar agar dapat diakses dengan baik.
Jika kamu sedang mencari perangkat yang dapat membantumu dalam coding dan pengembangan web, pertimbangkan untuk membeli Notebook Advan Workpro. Dengan spesifikasi yang mumpuni, laptop ini akan memudahkan kamu dalam mengerjakan proyek-proyekmu. Kunjungi [link ini] untuk membeli dan tingkatkan produktivitasmu!
Dengan pengetahuan ini, semoga kamu dapat lebih percaya diri dalam menambahkan gambar di halaman webmu. Selamat mencoba!***
Editor: Andik Chefasa