Image Dalam HTML

Untung Suryadi, S.Kom., M.Pd., Gr.

Next Page
 Gambar dapat dipakai untuk meningkatkan tampilan
web, dimana sebuah gambar dapat mewakili sejumlah
informasi dan dengan adanya gambar meningkatkan kualitas
web tersebut. Namun yang perlu kita ingat adalah semakin
banyak gambar yang disajikan akan menyita Bandwidth
sehingga dibutuhkan lebih banyak waktu untuk menampilkan
keseluruhan Web.
Format gambar *.GIF dan *.JPG adalah format gambar
yang hampir semua browser mendukungnya, hal ini disebabkan
kedua format gambar tersebut dapat menyimpangambar
dengan ukuran yang kecil. Untuk menampilkan gambar dalam
HTML diberikan Sintaks sebagai berikut:
<img src=“file_gambar”>

2
 Mengatur Ukuran Gambar
Dengan menggunakan atribut height dan width pada Tag
<Img src=“…”> maka akan didapatkan tinggi dan lebar
gambar yang dikehendaki. Perubahan ini hanya terjadi pada
tampilan di browser bukan pada filenya. Ukuran yang
digunakan adalah dalam satuan pixel atau persen layar,
untuk yang terakhir hasilnya akan berbeda secara signifikan
pada lebar layar browser, hal ini di karenakan nilai persen
mengikuti nilai settingan layar browser.
Contoh :
<img src=“Gambar.jpg” width=“100”
height=“100”>

3
 Atribut ALT pada tag <Img Src=“…”> digunakan untuk
menampilkan teks di area gambar, hal ini dimaksudkan untuk
mengantisipasi terhadap user yang menggunakan browser
yang tidak dapat menampilkan gambar. Atribut ini dapat
berisi informasi tentang ukuran file serta ukuran pixel dari
gambar, hal ini berguna agar user dapat memperkirakan
waktu loadingnya.
contohnya :
<img src=“gambar.jpg” width=“100”
height=“100” alt=“gambar.jpg (100x100) 20 kb”>

4
 Atribut border pada tag <Img Src=“…”> digunakan untuk
mengatur border pada tepian gambar. Secara default setiap
gambar yang ditampilkan tidak memiliki border, namun jika
gambar dijadikan link maka secara default gambar tersebut
memiliki border
contohnya :

<img src=“gambar.jpg” border=“5”>

5
 Untuk membuat gambar bekerja sebagai link, cara yang
digunakan adalah sama dengan teks. Dengan meletakkan Tag
<a href> dan </a> pada awal dan akhir dari gambar.
Berikut ini adalah perintah HTML yang menggunkan gambar
bekerja sebagai Link.
contohnya :
<a href = “profil.HTML”> <img src=“profil.gif”> </a>
jika tidak mengatur border maka pada sekeliling gambar
akan ditampilkan border tipis. Untuk meniadakan border ini
tambahkan atribut border=“0” dalam tag <img>
contohnya :
<a href = “profil.HTML”> <img src=“profil.gif”
border=“0”> </a>

6
 Gambar external sebenarnya gambar biasa, tapi cara
menampilkannya yang berbeda dengan gambar biasa.
Gambar akan di tampilkan jika user mengklik teks atau
gambar.
contohnya :

<a href = “foto.gif”> gambar </a>

7
Back to Front page