Senin, 26 Maret 2012

Menampilkan Gambar dengan HTML

Gambar adalah elemen yang sangat penting dalam menampilkan informasi. HTML menyediakan tag <IMG> untuk menampilkan gambar pada halaman web Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1”>

Perintah HTML diatas akan menampilkan gambar gambar1.gif dan menampilkan teks “gambar 1” apabila browser mematikan fasilitas
penampil grafik. Ekstensi grafik yang biasa di tampilkan oleh HTML adalah GIF, JPG, dan BMP. Anda juga dapat menggabungkan grafik dengan tag <A> untuk membuat link dari gambar Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1” HREF=”www.yahoo.com”>

Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser yang tidak mendukung penggunaan gambar atau apabila client sengaja mematikan fasilitas tersebut. Anda juga dapat menggunakan atribut align untuk mengatur posisi gambar terhadap teks yang bersebelahan. Perhatikan contoh berikut :




<HTML>
<HEAD>
<TITLE>contoh10.htm</TITLE>
</HEAD>
<BODY>
<H1>Blog Nurul Ilmah</H1>
<BR>Pergi ke web site <IMG SRC="icon_help.gif" ALIGN="MIDDLE"> <A
HREF="www.nurulilmah.blogspot.com">Blog Informasi apapun.</A>
</BODY>
</HTML>



Pada contoh HTML di atas, align untuk gambar adalah tengah. Anda dapat mencobanya untuk align dan align bottom untuk membandingkannya.

Dengan menambahkan atribut HSPACE dan VSPACE, Anda dapat mengatur frame yang mengelilingi gambar.

<HTML>
<HEAD>
<TITLE>contoh10.htm</TITLE>
</HEAD>
<BODY>
<H1>Blog Nurul Ilmah</H1>
<BR>Pergi ke web site <IMG SRC="icon_help.gif" ALIGN="MIDDLE" HSPACE=13 VSPACE=13> <A HREF="www.nurulilmah.blogspot.com">Blog Informasi apapun.</A>
</BODY>
</HTML>

Bila dirasa gambar Anda terlalu kecil atau terlalu besar, Anda dapat menentukan sendiri lebar dan panjang gambar mengatur property WIDTH dan HEIGHT pada tag <IMG>.


<HTML>
<HEAD>
<TITLE>contoh10.htm</TITLE>
</HEAD>
<BODY>
<H1>Blog Nurul Ilmah</H1>
<BR>Pergi ke web site <IMG SRC="icon_help.gif" ALIGN="MIDDLE" WIDTG=50 HEIGHT=50> <A HREF="www.nurulilmah.blogspot.com">Blog Informasi apapun.</A>
</BODY>
</HTML>






0 komentar:

Posting Komentar

Silahkan Beri Komentar... ^^