2/12/2013
1 Andi WRE © 2013
Pemrograman Web WEEK 03 – HTML LANJUT
2
IMAGE HYPERLINK
Introduction
IMAGE MAP DIV & SPAN META
Andi WRE © 2013
1
2/12/2013
3
HTML Image
Menampilkan gambar pada halaman web
Tag:
![]()
(tidak memiliki tag penutup) Atribut
Value
Keterangan
align
Top, bottom, middle, left, right
Deprecated pada HTML 4.01 Not supported pada HTML 5
alt
text
Menampilkan informasi lain dari gambar dalam bentuk teks
border
Pixels (px)
Deprecated pada HTML 4.01 Not supported pada HTML 5
height
Pixels (px)
Menentukan tinggi gambar
Andi WRE © 2013
4
HTML Image cont.
Atribut
Value
Keterangan
hspace
Pixels (px)
Deprecated pada HTML 4.01 Not supported pada HTML 5
src
URL
Lokasi folder beserta nama file gambar yang hendak ditampilkan
vspace
Pixels (px)
Deprecated pada HTML 4.01 Not supported pada HTML 5
width
Pixels (px)
Menentukan lebar gambar
Andi WRE © 2013
2
2/12/2013
5
HTML Image cont.
Contoh Pemakaian Gambar 
Andi WRE © 2013
6
HTML Hyperlink
Jembatan antara halaman web yang satu dengan halaman web yang lain
Dapat dipakai juga untuk file
Sintaks:
Link text
Contoh:
IT Maranatha
Andi WRE © 2013
3
2/12/2013
7
HTML Hyperlink cont.
Atribut target dipakai untuk menentukan apakah link yang ditekan/ diklik membuka pada window yang baru atau tidak
Sintaks
Link text Target value
Keterangan
_top
Link dengan window yang sama
_blank
Link dengan membuka window/ tab baru
_parent
Link ke frameset parent
_self
Link ke dokumen frame yang aktif
Andi WRE © 2013
8
HTML Hyperlink Jump In Page
Berpindah ke halaman yang sama
Dipakai biasanya jika terdapat topik atau top page
Cara membuat:
Beri identitas (atribut id) pada tag
Buat link dengan menambahkan tanda #
Sintaks
URL text
Andi WRE © 2013
4
2/12/2013
9
HTML Hyperlink Mailto
Berpindah ke halaman compose email yang sudah diisi
Berfungsi jika dan hanya jika sudah mengintegrasikan email application
Spasi diganti dengan %20
Sintaks
Send mail
Andi WRE © 2013
10
HTML Hyperlink Image
Mengganti URL teks dengan gambar
Sintaks
Andi WRE © 2013
5
2/12/2013
11
Image Map
Membagi gambar menjadi bagian-bagian (region) yang dapat diklik.
Region dapat berupa rect, circle, atau poly
Tag: <map>
Tag map memiliki atribut name sebagai identitas
Andi WRE © 2013
12
Image Map cont.
Tag <area> mendefinisikan area dalam image-map
Sintaks <area shape=“shape_value” coords=“coords_value” href=“URL” alt=“alternate_teks”> Atribut
shape
Value
Deskripsi
default
Mendefinikan seluruh region
rect
Mendefinisikan region berbentuk kotak
circle
Mendefinisikan region berbentuk lingkaran
poly
Mendefinisikan polygonal region
Andi WRE © 2013
6
2/12/2013
13
Image Map cont.
Atribut coords
Value
Deskripsi
x1, y1, x2, y2
Spesifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape=“rect”)
x, y, radius
Specifies the coordinates of the circle center and the radius (for shape=“circle”)
x1, y1, x2, y2, ..., xn, yn
Spesifies the coordinates fo the edges of polygon
Andi WRE © 2013
14
Image Map cont.
Andi WRE © 2013
7
2/12/2013
15
DIV
Berfungsi memformat content yang berada di dalamnya
Tag:
Mendefinisikan section pada dokumen HTML
Dikelompokkan untuk diformat dengan CSS
Andi WRE © 2013
16
SPAN
Berfungsi memformat content yang berada di dalamnya
Tag: <span>
Digunakan dalam 1 baris
Andi WRE © 2013
8
2/12/2013
17
DIV & SPAN
Andi WRE © 2013
18
Marquee
Membuat tampilan bergerak (vertikal/ horizontal)
Non-standar HTML tag
Tidak disarankan dipakai dalam dokumen HTML
Tag: <marquee> Atribut
behaviour
Value
Keterangan
slide
Slide 1 arah dan berhenti
scroll
Bergerak ke direction & berulang
alternate
Bouncing
direction
left | right | up | down
-
scrollamount
1 n
Kecepatan teks/ gambar
Andi WRE © 2013
9
2/12/2013
19
HTML Meta
Informasi mengenai data
Tidak ditampilkan oleh dokumen web, tetapi digunakan oleh pencarian search engine/ browser /web service
Selalu diletakkan dalam tag
Tag: <meta>
Andi WRE © 2013
20
HTML Meta cont
Contoh penggunaan meta: <meta name=“description” content=“describe your content”> <meta name=“keywords” content=“IT, Maranatha, HTML”> <meta name=“author” content=“Web Author”>
Andi WRE © 2013
10
2/12/2013
21
Icon for Website
Memberikan icon pada title website Anda (address bar)
Ukuran: 16 × 16 px
Sintaks
ATAU
Andi WRE © 2013
22
Question
Andi WRE © 2013
11
