HTML (Hypertext Markup Language) adalah bahasa dasar yang digunakan untuk membuat dan merancang halaman web. Salah satu elemen penting dalam HTML adalah gambar. Artikel ini akan menjelaskan berbagai konsep terkait HTML images, termasuk sintaks, atribut, format file umum, dan cara mengatur gambar di halaman web Kamu.
HTML Images Syntax
Sintaks dasar untuk menambahkan gambar ke dalam halaman web menggunakan HTML adalah dengan menggunakan elemen <img>. Berikut adalah contoh sederhana:
<img src="image.jpg" alt="Deskripsi Gambar">Elemen <img> bersifat self-closing, artinya tidak memerlukan tag penutup seperti elemen HTML lainnya.
src Attribute
Atribut src (source) adalah salah satu atribut terpenting pada elemen <img>. Atribut ini menunjukkan URL atau path menuju file gambar yang ingin ditampilkan. Misalnya:
<img src="gambar-kucing.jpg" alt="Gambar Kucing Lucu">Pastikan path file gambar benar agar gambar dapat ditampilkan dengan baik.
Hasilnya:
alt Attribute
Atribut alt (alternative text) digunakan untuk memberikan teks alternatif jika gambar tidak bisa ditampilkan. Atribut ini juga membantu aksesibilitas, misalnya untuk pembaca layar yang digunakan oleh pengguna tunanetra. Contoh:
<img src="gambar-kucing.jpg" alt="Gambar Kucing Lucu">Jika gambar gagal dimuat, teks “Gambar Kucing Lucu” akan ditampilkan.
Image Size – Width and Height
Kamu dapat mengatur ukuran gambar dengan menggunakan atribut width dan height. Misalnya, jika Kamu ingin menampilkan gambar dengan lebar 500 piksel dan tinggi 500 piksel:
<img src="https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gambar Kucing Lucu" width="500" height="500">Hasilnya:
Width and Height, or Style?
Selain menggunakan atribut width dan height, Kamu juga bisa mengatur ukuran gambar melalui CSS dengan atribut style. Contoh:
<img src="https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gambar Kucing Lucu" style="width: 500px; height: 500px;">Penggunaan CSS memberikan fleksibilitas lebih dalam mendesain layout halaman web Kamu.
Hasilnya:
Images in Another Folder
Jika gambar Kamu berada dalam folder yang berbeda, Kamu harus menyertakan path relatif atau absolut dari file gambar tersebut. Misalnya, jika gambar berada di folder images:
<img src="images/gambar-kucing.jpg" alt="Gambar Kucing Lucu">Images on Another Server/Website
Kamu juga bisa menampilkan gambar yang berada di server atau situs web lain dengan menggunakan URL lengkap:
<img src="https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gambar Kucing Lucu"/>Hasilnya:
Pastikan Kamu memiliki izin untuk menggunakan gambar dari situs lain tersebut.
Animated Images
Kamu dapat menambahkan gambar animasi ke dalam halaman web dengan cara yang sama seperti gambar statis. Format yang paling umum digunakan untuk gambar animasi adalah GIF:
<img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZWRmc3pjYXRtdXMxZXlhZGZhY2k4MzQxMzd4YzAzdnl5N2xodWpsMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3ov9jNziFTMfzSumAw/giphy.webp" alt="Programming" style="width: 200px; height: 200px"/>Image as a Link
Gambar juga dapat berfungsi sebagai tautan. Untuk melakukannya, bungkus elemen <img> dengan elemen <a> (anchor):
<a href="https://aessaputra.net">
<img src="https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gambar Kucing Lucu">
</a>Sekarang, gambar tersebut dapat diklik dan akan mengarahkan pengguna ke URL yang ditentukan.
Image Floating
Untuk mengatur posisi gambar agar teks mengelilinginya, Kamu dapat menggunakan properti CSS float. Misalnya:
<img src="https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gambar Kucing Lucu" style="float: left; margin-right: 10px;">
<p>Ini adalah teks yang mengelilingi gambar kucing di sebelah kiri.</p>Dengan menggunakan float: left;, gambar akan diposisikan di sebelah kiri dan teks akan mengalir di sekitarnya.
Hasilnya:
Common Image Formats
Berikut adalah format file gambar yang paling umum digunakan, dan didukung oleh semua browser (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
Kesimpulan
Menggunakan gambar dalam HTML sangat penting untuk membuat halaman web lebih menarik dan informatif. Dengan memahami sintaks dasar seperti elemen <img>, atribut src dan alt, serta cara mengatur ukuran dan posisi, Anda dapat menambahkan gambar dengan mudah. Memilih format gambar yang tepat juga membantu meningkatkan kualitas tampilan dan kecepatan pemuatan halaman. Dengan dasar ini, Anda siap untuk mengelola gambar di halaman web dengan efektif.