Pertemuan 04

PEMROGRAMAN WEB
Oleh:
Annah, S.Kom., M.T.
Agenda
• Image
Image
• Image (gambar) dalam suatu web
merupakan daya tarik bagi pengunjung.
• Umumnya browser menampilkan inline
image (gambar disajikan bergamaan dg
teks).
• Image yg dpt ditampilkan dalam web
site adalah jenis GIF, JPG, XBM, dan
PNG
• Bentuk Umum
<img src=“nama_image” [Atribut]>

• Atribut Image
Atribut Kegunaan
Width Menentukan lebar Image
Height Menentukan tinggi Image
Align Perataan Image
Top, Bottom, Middle, Left,
Right
Alt Menentukan alternatif Image
Border Memberi bingkai pd Image
Contoh:
<HTML>
<head><title></title></head>
<BODY BACKGROUND="kdm_bg.jpg"
TEXT="#FFFFFF" link="#00FF00"
vlink="#FFFF00" alink="#FFFFFF">
<H2>DAFTAR SEARCH ENGINE</H2>
<IMG SRC="garis_asli.gif" width="100%"><P>
<IMG SRC="bola.gif"> <a
href="http://www.altavista.digital.com/">Alta
Vista</a><BR>
href="http://www.google.com/">Google</a><BR>
href="http://comfind.com/">ComFind</a><BR>
href="http://www.planetsearch.com/">Planet
Search</a><BR>
href="http://www.excite.com/">Excite</a><BR>
href="http://www.hotbot.com/">HotBot</a><BR>
</BODY>
</HTML>
Hasil
Mengubah Ukuran Image
<HTML>
<BODY>
<IMG SRC="Ayuazhar.gif"> (ukuran asli)
<IMG SRC="Ayuazhar.gif" WIDTH="45" HEIGHT="60">

<IMG SRC="Ayuazhar.gif" WIDTH="180"
HEIGH="240"> 
</BODY>
</HTML>
Hasil
Alternatif Image
<HTML>
<BODY>
<IMG SRC="Jackych.gif" WIDTH="120"
HEIGHT="150" ALT ="Gambar Jackychen">
<IMG SRC="Ayuazhar.gif" WIDTH=120 HEIGHT=150
ALT="Gambar Ayu Azhari">
</BODY>
</HTML>
Hasil
Image Border
• Memberi bingkai pada image
<HTML>
<BODY><B>
<IMG SRC="Cindycra.gif" width=90 height=90>
<IMG SRC="Cindycra.gif" BORDER="5" width=90
height=90>
<IMG SRC="Cindycra.gif" BORDER="10" width=90
height=90>
</BODY>
</HTML>
Hasil
Image Sebagai Link
• Image juga dapat dijadikan sbg Link
• Bentuk:
<a href=“Sumber”> <img src=“Nama_Image”></a>
Contoh:
<p align="center">
<a href="image_map.html"><img src="Tkiri.gif"></a>
<a href="Border_Gambar.html"><img
src="Tkanan.gif"></a></p>
Image Map
• Suatu area dari image dapat dijadikan

sebagai LINK.
• Bentuk:
<IMG SRC=“Nama_Image " USEMAP="#nama_map" >
<MAP NAME=“nama_map">
<AREA SHAPE=RECT COORDS=“y1,x1,y2,x2"

HREF="html_editor.html“>
</MAP>
Contoh:
<HTML>
<BODY BACKGROUND="background.jpg">
<IMG SRC="menu.jpg " USEMAP="#menu" BORDER="2">
<MAP NAME="menu">
<AREA SHAPE=RECT COORDS="15,10,256,30" HREF="html_editor.html"
ALT="Daftar HTML Editor Gratis!">
<AREA SHAPE=RECT COORDS="15,40,264,60" HREF="image_editor.html"
ALT="Daftar Image Editor Gratis!">
<AREA SHAPE=RECT COORDS="15,65,192,80" HREF="email_gratis.html"
ALT="Daftar E-Mail Gratis!">
<AREA SHAPE=RECT COORDS="15,90,240,105" HREF="web_space.html"
ALT="Daftar Penyelnggara Web Space Gratis!">
<AREA SHAPE=RECT COORDS="15,115,234,125" HREF="bookmark.html"
ALT="Daftar Bookmark Gratis!">
<AREA SHAPE=RECT COORDS="15,140,208,155" HREF="counter.html"
ALT="Daftar Counter Gratis!">
<AREA SHAPE=RECT COORDS="15,166,336,180" HREF="web_authoring.html"
ALT="Daftar Web Authoring Tool Gratis!">
<AREA SHAPE=RECT COORDS="15,190,241,205" HREF="uang_tunai.html"
ALT="Daftar Penyandang Dana Gratis!">
</MAP></BODY>
Hasil
Contoh Lain
• Image MAP dengan berbagai bentuk
koordinat.
• Bentuk-bentuk tersebut antara lain:
Segi Empat
Lingkaran
Poligon
Bentuk imange
contacts.html products.html
new.html
Penentuan Koordinat
• Misalkan koordinat segi empat (Contacts)
sbb:
• Maka bentuk tag AREA SHAPE –nya

adalah
– SHAPE RECT COORDS="6,116,97,184"
Penentuan Koordinat (Kont.)
• Misalkan koordinat lingkatan (Products)
sbb:
• Maka bentuk tag AREA SHAPE –nya

adalah
– SHAPE CIRCLE COORDS="251,143,47"
Penentuan Koordinat (Kont.)
• Misalkan koordinat Poligon (New) sbb:
• Maka bentuk tag AREA SHAHE –nya

adalah
– SHAPE=POLY COORDS="150,217, 190,257,
150,297,110,257"
Contoh Lengkap
<HTML>
<HEAD>
<TITLE>IMAGE MAP</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=CENTER>
<MAP NAME="map1">
<AREA HREF="contacts.html" ALT="Contacts" TITLE="Contacts“
SHAPE=RECT COORDS="6,116,97,184">
<AREA HREF="products.html" ALT="Products” TITLE="Products“
SHAPE=CIRCLE COORDS="251,143,47">
Contoh Lengkap
<AREA HREF="new.html" ALT="New!" TITLE="New!" SHAPE=POLY
COORDS="150,217, 190,257, 150,297,110,257">
</MAP>
<IMG SRC="testmap.gif" ALT="map of GH site" BORDER=0 WIDTH=300

HEIGHT=300 USEMAP="#map1"><BR>
[<A HREF="contacts.html" ALT="Contacts">Contacts</A>]
[<A HREF="products.html" ALT="Products“>Products</A>]
[<A HREF="new.html" ALT="New!">New!</A> ] </DIV>
</BODY>
<HTML>
Hasil

Pertemuan 04

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 04

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB

<img src=“nama_image” [Atribut]>

• Suatu area dari image dapat dijadikan

<AREA SHAPE=RECT COORDS=“y1,x1,y2,x2"

• Maka bentuk tag AREA SHAPE –nya

• Maka bentuk tag AREA SHAPE –nya

• Maka bentuk tag AREA SHAHE –nya

<IMG SRC="testmap.gif" ALT="map of GH site" BORDER=0 WIDTH=300

Anda mungkin juga menyukai