Fungsi Tag Image HTML Dan Tutorial/Cara Menambahkan Gambar Di HTML

By Posted on
Contents show

Image Adjustment

Contoh ini mendemonstrasikan bagaimana menyesuaikan image i Icngan ukuran yang berbeda-beda. Lihat contoh gambar dibawah ini:

83

Lihat Source Code

<!–coba_imageadjust.html–>
<html>
<body>
<p>
<img src=”../../pictures/html.gif” width=“20″ height=”20″>
</p>
<img src=”../../pictures/html.gif” width=”45″ height=”45″>
</p>
<img src=”../../pictures/html.gif” width=”70″ height=”70″>
</P>
you can make a picture larger or smaller changing the values in the “height” and “width” attributes of the <img> tag.
</p>
</body>
</html>

Teks Alternatif untuk Image

Adakalanya browser yang digunakan oleh surfer adalah browser dengan mode teks, seperti Lynx — tidak bisa menampilkan gambar — atau juga ada pemakai yang mematikan kemampuan untuk menampilkan gambar pada browser-nya, untuk mempercepat penampilan informasi, sehingga hanya teks dari dokumennya saja yang akan ditampilkan. HTML menyediakan suatu mekanisme yang memberitahu surfer apa yang kurang pada web page tersebut apabila tidak bisa mendapatkan gambarnya.

Atribut alt pada tag <img> menyediakan tempat untuk menampilkan teks sebagai pengganti gambar. Contoh berikut menunjukkannya: <img src=”sembarag.gif’ alt=”Ini teks untuk gambar” >.

Pada beberapa browser teks pada atribut alt akan ditampilkan secara mengambang untuk memberi tahu maksud dari gambar, teks ini muncul apabila kita menaruh mouse pointer di atas gambar agak lama. Lihat contoh gambar dibawah ini:

84

Lihat Source Code
<html>
<body>
<img src=”../../pictures/go left.gif” alt=”Go Left” width=”32″ height=”32″>
<p>
Text-only browsers will only display the text in the “alt” attribute, which is “Go Left”.
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>

Image sebagai Suatu Link

Contoh ini mendemonstrasikan bagaimana membuat suatu image sebagai suatu link.Lihat contoh gambar dibawah ini:

85

Lihat Source Code

<html>
<body>
<lmg src=”../../pictures/goleft” alt=”Go Left” width=”32″ height=”32″>
<p>
Text-only browsers will only display the text in the “alt” attribute, which is “Go Left”.
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>

Software Image Map

Software untuk Image Map dipergunakan untuk mempermudah pembuatan peta link. Salah satu contoh software ImageMap freeware : MapEdit.

Catatan:
Pada saat mendefinisikan map, maka setiap objek daerah dalam image tidak boleh beririsan/overlapping koordinatnya.

Contoh-contoh dapat dicoba, akan tetapi hams dipersiapkan software pendukungnya, yakni software untuk membuat gambar/image dan untuk membuat image map. Software minimum yang fungsional yang dibutuhkan:

MS Paint
MapEdit
Weblmage

Contoh ini mendemonstrasikan bagaimana membuat suatu image- map, dengan daerah dalam image dapat di-click. Setiap daerah image dapat bertindak sebagai suatu hyperlink.Lihat hasil gambar dibawah ini:

86

Lihat Source Code

<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src=” ../../pictures/close.gif”” width=145 height = 126 usemap=11 #planetmap11 >
<map name=”planetmap”>
<area shape=”rectangle” coords=”0,0,82,126″ hre f =”sun.html”>
<area shape=”circle” coords=”90/58,3″ href=”mercur.html”> <area shape=”circle” coords=”124,58,8″ href=”venus.html”>
</map>
</body>
</html>

Demikian penjelasan singkat yang bisa admin sampaikan. Semoga artikel ini bisa menambah pengetahuan anda tentang dunia pemograman dan ilmu yang dibagikan dapat bermanfaat bagi pembaca. Sampai bertemu di postingan-postingan selanjutnya..see you ^-^

READ MORE:

Pages: 1 2