HTML (Hypertext Markup Language) adalah bahasa markup standar untuk membuat halaman web.
Salah satu fitur HTML adalah kemampuannya untuk menampilkan gambar atau image di dalam halaman web.
Dalam artikel ini, kita akan membahas tentang HTML images secara lengkap, mulai dari cara menambahkan gambar ke halaman web hingga cara mengatur properti gambar seperti ukuran dan posisi.
Menambahkan Gambar
Untuk menambahkan gambar ke halaman web, kita membutuhkan tag <img>. Tag ini merupakan tag mandiri, artinya tidak memerlukan tag penutup dan tidak dapat digunakan untuk menampilkan teks. Berikut adalah contoh penggunaan tag <img>:
1 | <img src="gambar.jpg" alt="Deskripsi Gambar"> |
Di dalam tag tersebut, atribut src menentukan alamat atau path dari gambar, sedangkan atribut alt digunakan untuk memberikan deskripsi tentang gambar tersebut.
Deskripsi ini akan muncul apabila gambar gagal dimuat atau ketika pengguna mengarahkan kursor ke gambar tersebut.
Ukuran Gambar
Untuk mengatur ukuran gambar, kita dapat menggunakan atribut width dan height. Atribut width menentukan lebar gambar dalam piksel, sedangkan atribut height menentukan tinggi gambar dalam piksel.
Contoh penggunaannya sebagai berikut:
1 | <img src="gambar.jpg" alt="Deskripsi Gambar" width="500" height="300"> |
Dalam contoh di atas, gambar akan ditampilkan dengan lebar 500 piksel dan tinggi 300 piksel.
Namun, sebaiknya kita tidak menggunakan atribut width dan height secara bersamaan. Penggunaan atribut tersebut dapat menyebabkan gambar menjadi terdistorsi dan terlihat buram.
Sebaiknya kita pilih salah satu atribut saja yang akan digunakan dan biarkan browser yang menyesuaikan proporsi gambar secara otomatis.
Posisi Gambar
Gambar juga dapat diatur posisinya di dalam halaman web dengan menggunakan CSS (Cascading Style Sheets). Salah satu properti CSS yang dapat digunakan adalah float.
Properti ini menentukan posisi gambar relatif terhadap teks atau konten di sekitarnya. Contoh penggunaannya sebagai berikut:
1 | <img src="gambar.jpg" alt="Deskripsi Gambar" style="float: right;"> |
Dalam contoh di atas, gambar akan diletakkan di sebelah kanan halaman dan konten di sebelah kiri akan mengalir mengelilingi gambar.
Link Gambar
Gambar juga dapat dijadikan sebagai tautan ke halaman web atau file lainnya. Caranya sama dengan membuat tautan pada teks, hanya saja tag <img> ditambahkan sebagai pengganti teks pada tautan. Contoh penggunaannya sebagai berikut:
1 2 3 | <a href="https://www.contohwebsite.com"> <img src="gambar.jpg" alt="Deskripsi Gambar"> </a> |
Dalam contoh di atas, ketika gambar tersebut di klik, pengguna akan diarahkan ke halaman web yang ditentukan dalam atribut href.
Mengganti Gambar
Kita juga dapat mengganti gambar yang sedang ditampilkan di halaman web dengan menggunakan JavaScript. Caranya adalah dengan mengubah nilai atribut src pada tag <img>. Berikut adalah contoh penggunaan JavaScript untuk mengganti gambar:
1 2 3 4 5 6 7 8 9 | <img id="gambar" src="gambar1.jpg" alt="Deskripsi Gambar"> <button onclick="gantiGambar()">Ganti Gambar</button> <script> function gantiGambar() { document.getElementById("gambar").src = "gambar2.jpg"; } </script> |
Dalam contoh di atas, gambar yang ditampilkan awalnya adalah gambar1.jpg. Ketika tombol "Ganti Gambar" di klik, gambar akan diubah menjadi gambar2.jpg.
Kesimpulan
Dalam artikel ini, kita telah membahas tentang HTML images secara lengkap, mulai dari cara menambahkan gambar ke halaman web hingga cara mengatur properti gambar seperti ukuran dan posisi.
Dalam penggunaannya, sebaiknya kita memberikan deskripsi tentang gambar pada atribut alt, menghindari penggunaan atribut width dan height secara bersamaan, dan menggunakan properti CSS seperti float untuk mengatur posisi gambar.
Selain itu, gambar juga dapat dijadikan sebagai tautan ke halaman web atau file lainnya. Dalam halaman web yang lebih interaktif, kita juga dapat mengganti gambar dengan menggunakan JavaScript.
0 comments