Belajar HTML cara
menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag
Image digunakan untuk menampilkan gambar ke dalam halaman web,
menggunakan <img>.
Atribut src dalam tag <img>
Atribut src adalah singkatan
dari source,
merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat
ini bisa relatif atau absolute.
Untuk contoh kode HTML tentang image
ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan
gambar tersebut ke dalam satu folder dengan
halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
Pada contoh dibawah ini saya menggunakan
sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah
sebagai img.html
Contoh penggunaan tag <img>:
<!DOCTYPE HTML>
<html>
<head>
<title>Penggunaan TagImage</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<imgsrc="Penguins.jpg" />
</body>
</html
Perhatikan bahwa tag <img> tidak
memiliki elemen, sehingga langsung ditutup dengan />Berikut penampakannya jika
dijalankan melalui browser:
Hati-hati dengan penulisan
atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.
Atribut alt dalam tag <img>
Tagimage juga
memiliki atribut penting lainnya, yaitu alt
Atribut alt adalah singkatan dari alternativedescription, dimana alt digunakan untuk keterangan dari
gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web
broser telah disetting untuk tidak menampilkan gambar.
Contoh
penggunaan atribut alt pada tag <img>:
<!DOCTYPE HTML>
<html>
<head>
<title>Penggunaan TagImage</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<imgalt="gambar Penguins" src="Penguins.jpg"/>
</body>
</html>
Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan
yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi
yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.
Atribut width dan height dalam tag <img>
Atribut lainnya
membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.
Contoh
penggunaan atribut width dan height pada tag <img>:
Pada penggunaan tag image di atas,
gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan height ‘memaksa‘
gambar untuk tampil dengan nilai yang kita tetapkan.
Biasanya web server akan
menampilkan text terlebih dahulu, baru mengirim gambar setelahnya. Untuk web
server yang sibuk, atau gambar dengan ukuran besar, hal ini akan
menyebabkan text berpindah tempat karena gambar yang terlambat ditampilkan.
Mencantumkan ukuran dari gambar dengan atribut width dan height akan
memberikan kesempatan kepada browser untuk mempersiapkan ukuran tersebut untuk
gambar, dan text tidak akan berpindah.
sekian yang dapat kami bagikan kepada sahabat semoga bermanfaat ya (:
Komentar