25
VII. Image HTML
Pada umumnya sebuah halaman web dilengkapi dengan gambar – gambar (image) sehingga membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site tersebut. Biasanya browser web juga dapat menampilkan gambar disertai dengan teks (inline image). Adapun gambar-gambar yang ditampilkan adalah yang mempunyai format XBM (X bitmap), GIF, JPEG, PNG, dan lain-lain. Konsekuensi dari disertakannya gambar dalam web page adalah diperlukannya waktu tambahan saat download.
Untuk menampilkan gambar digunakan tag <img> disertai dengan atribut src. Format atau sintax dari tag ini adalah :
<img src = “namaimage”>
dimana namaimage adalah alamat URL dari file image yang akan ditampilkan.
7.1 Pengaturan Tampilan gambar : Alignment
Untuk mengatur tampilan gambar di dalam halaman web kita dapat memakai atribut
Align. Ada 3 opsi dalam atribut align yaitu : bottom, middle, top, left, center, dan right.
Format atau sintax dari atribut ini adalah :
<img src = “namaimage” align =”bottom|middle|top|left|center|right”>
Berikut ini adalah contoh dokumen HTML yang menggunakan atribut align(listing 7.1), sedangkan hasilnya diperlihatkan dalam gambar 7.1.
<!—Image : align --> <html>
<head>
<title>Contoh Image : align </title> </head>
<body>
<p>Bendera Amerika
<image src = "../gambar/usa.gif" align="bottom"> </p> <p>Bendera Amerika
<image src = "../gambar/usa.gif" align="middle"> </p> <p>Bendera Amerika
<image src = "../gambar/usa.gif" align="top"> </p> </body>
7.Image HTML Pemrograman Web
26
Contoh berikut memperlihatkan pemakaian align : left, right, dan center (listing 7.2) dan hasilnya dapat dilihat dalam gambar 7.2.
<!—Image : align 2 --> <html>
<head>
<title>Contoh Image : align </title> </head>
<body> <p>
<image src = "../gambar/usa.gif" align="left">Bendera Amerika di kiri </p> <p>bendera Amerika
<image src = "../gambar/usa.gif" align="center"> di tengah </p> <p>
<image src = "../gambar/usa.gif" align="right"> Bendera Amerika di kanan</p> </body>
</html>
Gambar 7.1 hasil eksekusi image_align.htm
Listing 7.2 image_align2.htm
7.Image HTML Pemrograman Web
27
7.2 Pengaturan Ukuran Gambar
Untuk mengatur ukuran gambar dalam halaman web kita dapat memakai atribut
Height dan Width. Format atau sintax dari atribut ini adalah :
<img src = “namaimage” width =”nilai” height =”nilai”>
Berikut ini adalah contoh dokumen HTML yang menggunakan atribut height dan width (listing 7.3).
<!—Image : width-height --> <html>
<head>
<title>Contoh Image : align </title> </head>
<body>
<p>Bendera Inggris
<image src = "../gambar/great-britain.gif" width = "30" height="20"> </p> <p>Bendera Inggris
<image src = "../gambar/great-britain.gif" width = "55" height="45"> </p> <p>Bendera Inggris
<image src = "../gambar/great-britain.gif" width = "80" height="70"> </p> </body>
</html>
Hasil eksekusi dari listing 7.3 (image_wh.htm) diperlihatkan dalam gambar 7.3 di bawah ini.
Listing 7.3 image_wh.htm
7.Image HTML Pemrograman Web
28
7.3 Teks sebagai Alternatif bagi Image
Beberapa browser tidak mampu menampilkan gambar. Dan ada beberapa user yang me- non aktifkan kemampuan menampilkan gambar dari browser untuk mempercepat proses download halaman web. HTML menyediakan atribut untuk menampilkan teks sebagai alternatif bagi image yaitu atribut ALT. Teks akan ditampilkan secara mengambang untuk memberi tahu maksud dari gambar, dan teks ini ini akan muncul jika kita meletakkan pointer mouse diatas gambar. Format atau sintax dari atribut ini adalah :
<img src = “namaimage” alt=”teks”>
Berikut ini adalah contoh dokumen HTML yang menggunakan atribut ALT (listing 7.4) sedangkan hasilnya dapat dilihat dalam gambar 7.4.
<!—Image : alt --> <html>
<head>
<title>Contoh Image : alt </title> </head>
<body>
<p>Welcome to
<image src = "../gambar/usa.gif" alt="This Our Flag"> United States of America </p> </body>
</html>
7.4 Image sebagai Link
Dalam halaman web, gambar dapat kita pakai untuk melakukan link ke dokumen HTML atau halaman web yang lain. Di samping itu pembuatan menu dalam halaman web
Gambar 7.4 hasil eksekusi image_alt.htm Listing 7.4 image_alt.htm
7.Image HTML Pemrograman Web
29 akan tampak lebih menarik jika ditampilkan dengan gambar. Dimana dengan mengklik salah satu item kita akan melakukan link ke halaman web atau dokumen HTML yang lain. Format atau sintaks untuk melakukan link dengan gambar adalah :
<a href=”dokumen_html”><img src = “namaimage” >
Dokumen HTML berikut akan memberikan contoh tentang pemakaian link dengan gambar. Buatlah dulu file aboutsinga.htm (listing 7.5) di bawah ini. Kemudian buat file image_link.htm (listing 7.6). Selanjutnya buka file image_link.htm dengan browser IE maka hasilnya adalah seperti gambar 7.5.
<html> <head>
<title>Contoh Image : Link </title> </head>
<body>
<h3>About Singapore...</h3>
<blockquote>Singapore is one of the countries in southeast asia<br> The Smallest but the fastest economic's growth<br>
Because of strategic location <br>
so well known as The "Triangle Gold" country </blockquote> </body> </html> <!—Image : link --> <html> <head>
<title>Contoh Image : Link </title> </head>
<body>
<p>Welcome to The "Triangle Gold" Singapore
<a href ="aboutsinga.htm"><image src = "../gambar/singapore.gif"> </a> </p>
</body> </html>
Listing 7.5 Aboutsinga.htm
7.Image HTML Pemrograman Web
30
Jika pointer mouse diarahkan pada gambar bendera dan mengkliknya maka akan dihasilkan gambar 7.6.
Gambar 7.5 Hasil eksekusi Image_link.htm
Klik di sini