Sulit membayangkan sebuah halaman HTML
tanpa gambar untuk standard web saat ini. Kali ini saya akan membahas tentang cara
menambahkan gambar di HTML
dengan menggunakan tag image. Tag Image digunakan untuk menampilkan
gambar kedalam 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. 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 html.jpg yang berada dalam satu folder dengan file
html saat ini. Savelah sebagai img.html
Contoh
penggunaan tag img :
<html>
<head>
<title>Penggunaan
Tag Image</title.
</head>
<body>
<h1>
Penggunaan Tag Image</h1>
<img
src=”html.jpg”>
</body>
</html>
Hasilnya
:
:.
Hati-hati dalam penulisan atribut “src”, sering gambar gagal tampil karena
salah ketik atribut “src” menjadi “scr”.
Atribut
alt dalam tag <img>
Tag
image juga memiliki atribut penting lainnya, yaitu alt.
Atribut
alt adalah singkatan dari
alternative description, dimana alt digunakan untuk keterangan dari gambar jika
gambar tersebut gagal di tampilkan oleh browser.
Contoh
penggunaan atribut alt pada tag <img> :
<html>
<head>
<title>Penggunaan
Tag Image</title>
</head>
<body>
<h1>
Penggunaan Tag Image</h1>
<img
src="HTML.jpg" alt=”Gambar HTML”>
</body>
</html>
Atribut
alt juga berperan penting untuk mesin pencarian seperti Google karena cara
kerja Google yang meng-index seluruh situs dengan memproses tulisan yang ada.
Google tidak akan mengerti isi dari gambar tanpa bantuan deskripsi yang ditulis
dalam atribut alt.
Atribut width
dan height dalam tag <img>
Atribut
lainnya membolehkan kita untuk menentukan tinggi dan lebar sebuah gambar yang
ditampilkan yaitu width dan height.
Contoh
penggunaan width dan height dalam tag <img> :
<html>
<head>
<title>Penggunaan
Tag Image</title>
</head>
<body>
<h1>
Penggunaan Tag Image</h1>
<img
src="HTML.jpg" alt=”Gambar HTML” width=”200” height=”100”>
</body>
</html>
:. Perlu sobat ketahui untuk ukuran width dan
height, sobat bisa menggunakan ukuran pixel(px) seperti 100px atau 100 (pixel
mau di tulis atau tidak dalam kode html tidak akan berpengaruh terhadap ukuran
gambar) dan juga sobat bisa gunakan
ukuran persen (%). Saya sarankan sobat untuk menggunakan ukuran persen terutama
untuk tampilan background yang menggunakan gambar dan table supaya tampilannya
pas atau sesuai dengan ukuran layar monitor.
Hasilnya
:
0 Response to "Menampilkan Gambar Dengan Kode HTML"
Post a Comment