Hai, pembaca setia blog ini!
Apakah kalian pernah merasa kesulitan saat ingin memasukkan gambar ke dalam sebuah halaman web? Jika jawabannya iya, tenang saja! Karena pada artikel ini, saya akan membagikan tips dan trik untuk memasukkan gambar di HTML dengan mudah dan cepat. Yuk, simak artikel ini sampai habis!Sebelum memulai, kita harus mengetahui bahwa ada beberapa jenis format gambar yang bisa dimasukkan ke dalam halaman HTML. Format tersebut antara lain JPEG, PNG, GIF, dan SVG. Setelah kita mengetahui format gambar yang akan digunakan, mari kita mulai tutorial cara memasukkan gambar di HTML.
1. Cara Memasukkan Gambar dengan menggunakan Tag img
Cara pertama yang bisa kita lakukan adalah dengan menggunakan tag . Tag ini sangatlah mudah digunakan, karena kita hanya perlu menuliskan nama dan letak gambar di dalam tag tersebut. Berikut adalah contoh kode HTML untuk memasukkan gambar dengan menggunakan tag img.
<img src=”https://contohgambar.jpg” alt=”Contoh Gambar”>
Penjelasan kode di atas, src adalah kode yang digunakan untuk menunjukkan letak atau URL gambar yang ingin dimasukkan, alt digunakan untuk memberikan deskripsi gambar ketika gambar tidak muncul di halaman. Jangan lupa untuk menambahkan tanda kutip (“) pada URL gambar dan deskripsi gambar.
2. Cara Memasukkan Gambar dengan menggunakan CSS
Cara kedua yang bisa digunakan adalah dengan menggunakan CSS. Dalam hal ini, kita dapat menambahkan styling pada gambar yang ingin dimasukkan. Berikut adalah contoh kode HTML dan CSS untuk memasukkan gambar dengan menggunakan CSS.
<img src=”https://contohgambar.jpg” alt=”Contoh Gambar” class=”gambar”>
<style>
.gambar {
width: 50%;
border-radius: 50%;
}</style>
Penjelasan kode di atas, class “gambar” digunakan untuk memanggil gambar yang akan diberikan styling. Dalam contoh ini, kita menambahkan width 50% dan border-radius 50% sehingga gambar memiliki bentuk melingkar. Tentunya, kalian bisa menyesuaikan styling gambar sesuai dengan keinginan kalian.
3. Cara Memasukkan Gambar dengan menggunakan Tag Figure dan Figcaption
Cara ketiga yang bisa digunakan adalah dengan menggunakan tag figure dan figcaption. Tag ini digunakan untuk memberikan deskripsi atau keterangan pada gambar. Berikut adalah contoh kode HTML untuk memasukkan gambar dengan menggunakan tag figure dan figcaption.
<figure>
<img src=”https://contohgambar.jpg” alt=”Contoh Gambar”>
<figcaption>Ini adalah contoh gambar</figcaption>
</figure>
Penjelasan kode di atas, tag figure digunakan untuk membungkus gambar dan keterangan yang ingin ditampilkan. Sedangkan tag figcaption digunakan untuk memberikan deskripsi atau keterangan pada gambar. Dalam contoh di atas, keterangan pada gambar adalah “Ini adalah contoh gambar”.
4. Cara Memasukkan Gambar dengan menggunakan Elemental Picture
Cara terakhir yang bisa digunakan adalah dengan menggunakan elemental picture. Tag ini memungkinkan kita untuk mengubah gambar ketika layar berubah ukuran. Berikut adalah contoh kode HTML untuk memasukkan gambar dengan menggunakan elemental picture.
<picture>
<source media=”(max-width: 768px)” srcset=”contohgambar-kecil.jpg”>
<source media=”(min-width: 768px)” srcset=”contohgambar-besar.jpg”>
<img src=”contohgambar-besar.jpg” alt=”Contoh Gambar”>
</picture>
Penjelasan kode di atas, tag picture digunakan untuk membungkus sumber gambar yang berbeda. Di dalam tag picture, kita bisa menentukan sumber gambar yang berbeda berdasarkan ukuran layar. Pada contoh di atas, ketika layar memiliki lebar kurang dari atau sama dengan 768px, maka gambar yang dipilih adalah contohgambar-kecil.jpg. Namun, ketika layar memiliki lebar lebih dari 768px, maka gambar yang dipilih adalah contohgambar-besar.jpg.
Kesimpulan
Nah, itulah tadi beberapa cara untuk memasukkan gambar di HTML. Semua cara tersebut tentunya memiliki kelebihan dan kekurangan masing-masing, sehingga kalian bisa memilih cara yang paling sesuai dengan kebutuhan kalian. Dalam memasukkan gambar di HTML, jangan lupa untuk selalu memperhatikan kualitas gambar dan ukuran filenya agar halaman web dapat diakses dengan cepat dan mudah.