Tag <img> pada HTML digunakan untuk menampilkan gambar, foto, icon pada halaman website. Jenis gambar yang didukung dengan ekstensi JPEG, GIF - termasuk animasi GIFs, PNG, APNG, SVG, BMP, BMP ICO dan PNG ICO. Format penulisannya: <img src="nama gambar dan eksetensinya" alt="keterangan gambar" />
Salah satu atribut tag <img> adalat alt. Karena mesin pencari, seperti Google, tidak dapat memahami apa maksud gambar, maka tag alt digunakan sebagai penjelas makna (keterangan) gambar dimaksud.
Beberapa atribut lain yang juga sering digunakan adalah width dan height, yaitu untuk mengatur lebar dan tinggi gambar ketika ditampilkan di halaman website. Untuk contoh, sediakan gambar, misalnya nama gambar itu pemandangan.jpg, letakkan satu tempat dengan kode html berikut, simpan dengan nama gambar.html. Maka skripnya:
<!DOCTYPE HTML>
<html>
<head>
<title>Menampilkan gambar pada HTML</title>
</head>
<body>
<img src="pemandangan.jpg" alt="Pemandangan di pantai di sore hari" width="500" height="220" />
<p>Ini adalah gambar pemandangan</p>
</body>
</html>
Tag img dan CSS
Tag img dapat juga dikombinasikan dengan css. Misanlya untuk mengatur posisi gambar, misalnya di kiri, tengah atau kanan. Anda dapat juga membuat teks berdampingan dengan gambar, karena jika menampilkan gambar, teks yang setelahnya otomatis enter ke bawah. Contohnya seperti berikut, imgcss.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Menampilkan gambar pada HTML dengan CSS</title>
<style type="text/css">
img.kiri{float:left;width:500px; height:220px;}
img.tengah{display: block;margin-left: auto; margin-right: auto;}
img.kanan{float:right;}
h3{clear:both;}
div.cover{float:left;}
img.kiriteks{clear:left;float:left; width:400px;height:350px;margin-right:10px;}
</style>
</head>
<body>
<h3>Gambar posisi dikiri</h3>
<img src="pemandangan.jpg" class="kiri" alt="gambar di kiri" />
<h3>Gambar posisi tengah</h3>
<img src="pemandangan.jpg" class="tengah" alt="gambar di tengah" />
<h3>Gambar posisi kanan</h3>
<img src="pemandangan.jpg" class="kanan" alt="gambar di kanan" />
<h3>Gambar posisi dikiri dan teks disamping</h3>
<div class="cover">
<img src="pemandangan.jpg" class="kiriteks" alt="di samping gambar ada teks" />
</div>
<p>Belajar HTML di 4bhtml.blogspot.com memang menyenangkan.
Aku akan merekomendasikan ke teman-teman yang lain.
</p>
</body>
</html>
Posisi gambar tidak satu tempat
Jika file html dan gambar tidak satu tempat, misalnya file html ada di luar dan gambar di foler gambar. Maka tuliskan nama folder gambarnya, kemudian nama gambarnya. Misalnya, pemandangan.jpg ada di folder gambar.
<img src="gambar/pemandangan.jpg" class="kiri" alt="tampilkan gambar dari folder gambar" />
Jika file html ada masing-masing folder bagaimana? Berarti logikanya, file html "keluar" dulu dari foldernya kemudian masuk ke folder di mana letak gambar, misalnya seperti contoh diatas, pemandangan.jpg ada di folder gambar.
<img src="../gambar/pemandangan.jpg" class="kiri" alt="tampilkan gambar dari folder gambar" />
Catatan: "Mundur" atau keluar dari folder satu kali ditandai "../", jika dua kali "../../", jika tiga kali "../../../" dan seterusnya.
Gambar ada di internet
Jika gambar ada di situs internet, maka tuliskan alamat lengkap gambar tersebut pada atribut src. Misalnya, gambar striker Barcelona Munir Al Haddadi ada di tipspengetahuan.com. Maka skripnya:
<img src="http://tipspengetahuan.com/img/250814fcu2118.jpg" class="kiri" alt="Munir El Haddadi" />
^Baca juga: Membuat tabel dengan tag <table> HTML.
lewatinaja.com
ReplyDelete