HTML Images adalah cara yang digunakan pada bahasa markup (HTML) untuk menyisipkan gambar ke dalam suatu halaman. Cara penggunaannya adalah dengan menggunakan tag element <img/>. Tag element <img> tersebut dapat disisipkan ke dalam beberapa element juga, seperti element <div>, <a>, <table> dan yang lainnya.
Contoh Sederhana Membuat Gambar dengan HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img src="alamatgambar.png"/>
</body>
</html>
Pada penggunaanya, HTML Images agar valid harus menggunakan yang namanya property “alt”. Property tersebut digunakan untuk memberikan identitas kepada gambar agar para pengunjung dapat lebih memahami apa sebenarnya gambar tersebut.
Contoh Lengkap Membuat Gambar dengan HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img alt="ini adalah gambar" src="alamatgambar.png"/>
</body>
</html>
Besar kecilnya suatu gambar pada HTML Images dapat diatur oleh pemilik dengan lebih leluasa menggunakan property “widht” dan “height”. Isi di dalam property tersebut dituliskan dengan format “pixels”.
Contoh 1 Mengatur Panjang dan Lebar Gambar dengan HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img alt="ini adalah gambar" src="alamatgambar.png" width="50px" height="50px"/>
</body>
</html>Contoh 2 Mengatur Panjang dan Lebar Gambar dengan HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img alt="ini adalah gambar" src="alamatgambar.png" widht="50px" height="auto"/>
</body>
</html>
Pada contoh 1 dan 2 mengatur panjang dan lebar, dapat digunakan sebagai alternatif agar gambar yang disisipkan dalam suatu halaman menjadi lebih responsive.
Kemudian, pada saat kita menyisipkan sebuah gambar dengan HTML pada paragraf yang berisi kalimat, maka kita bisa mengaturnya agar gambar muncul di samping kiri ataupun samping kanan paragraf. Contohnya seperti berikut ini.
Contoh Membuat Gambar di Sebelah Kanan dengan HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img src="alamatgambar.png"/>
</body>
</html>
Contoh Membuat Gambar di Sebelah Kiri dengan HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img src="alamatgambar.png"/>
</body>
</html>
Selesai sampai sini pembahasan tentang HTML Images Advanced. Bagi yang ingin belajar HTML lebih banyak lagi dapat melihat Daftar Isi Panduan Lengkap Belajar HTML Disini.
0 Comments