pw1 03-html lanjut
TRANSCRIPT
-
8/15/2019 Pw1 03-HTML Lanjut
1/17
BS404Pemrograman Web 03- HTML Lanjut
-
8/15/2019 Pw1 03-HTML Lanjut
2/17
-
8/15/2019 Pw1 03-HTML Lanjut
3/17
HTML Images
Menampilkan images pada halaman webAttributesrc
width
Nilai Attribute
lokasi folder + nama file gambar + ekstensi file
px
px
text (alternative information when the image fails to load)
text (the tooltip in browser)
px
px
px
bottom, middle, top
height
alt
title
border
hspace
vspace
align
-
8/15/2019 Pw1 03-HTML Lanjut
4/17
HyperlinkAttribute
href
target
Nilai Attribute
nama file html / url
title
File HTML : Profile (internal link)
URL : Google (external link)
_blank, _top, _parent, _self, new
text (create a tooltip for your links)
_blank : browser akan selalu membuka halaman baru
_top : link dokumen ke jendela yang sama_parent : link dokumen ke framset parent.
_self : link dokumen ke frame yang bersangkutan/aktif
new : browser akan membuka halaman baru
-
8/15/2019 Pw1 03-HTML Lanjut
5/17
Hyperlink (Intra-Page Links)
• Navigation within a single page
• Jump from the top of the page to a topic far down on the page and jback to the top
How to build Intra-page link?
Beri id untuk posisi tujuan atau name pada tag
Part 1 atau
-
8/15/2019 Pw1 03-HTML Lanjut
6/17
Hyperlink (Using Images)
Membuat link dengan menggunakan images Biasanya digunakan untuk membuat menu pada halaman web
-
8/15/2019 Pw1 03-HTML Lanjut
7/17
Body
•
Link, saat hyperlink belum dikunjungi• Visited, saat hyperlink telah dikunjungi
• Active, saat hyperlink dalam keadaan terpilih
…
-
8/15/2019 Pw1 03-HTML Lanjut
8/17
Image Map
•
How to create an image map, with clickable regions. Each of the regionhyperlink
• Tag map mempunyai atribut name sebagai identitas yang akan dipakai
pada atribut usemap
…
Attribute
alt
Nilai Attribute
rect, circle, poly
koordinat
text
nama file atau URL
shape
coords
href
-
8/15/2019 Pw1 03-HTML Lanjut
9/17
Koordinat
-
8/15/2019 Pw1 03-HTML Lanjut
10/17
Contoh Image Map
Click on the sun or on one of the planets to watch it closer:
-
8/15/2019 Pw1 03-HTML Lanjut
11/17
Marquee
Membuat tampilan bergerak vertikal atau horizontal
• Non-standard HTML element
• Tidak disarankan untuk digunakan pada dokumen HTMLAttribute
behavior
direction
Nilai Attribute
scroll, slide, alternate
left, right, up, down
px
px
1 px = the slowest scroll speed
1000 milliseconds = 1 second
width
height
scrollamount
scrolldelay
Pemrograman Web
-
8/15/2019 Pw1 03-HTML Lanjut
12/17
iFrame
•
Menampilkan halaman web lain dalam satu halaman webAttribute
width
Nilai Attribute
nama file atau URL
1 atau 0
px atau persentase
px atau persentasetext
src
frameborder
heightname
-
8/15/2019 Pw1 03-HTML Lanjut
13/17
Contoh iFrame
Latihan iFrame
Go to W3schools Lorem ipsumsit amet, consectetur adipiscing elit. Nunc sed lacus a odio iaculis egestas vestibulum nibh. Cum sociis natoque penatibus et magnis dis parturient montesridiculus mus. Vivamus cursus accumsan odio, eget vehicula purus laoreet pharlacus erat, elementum at fringilla et, posuere sodales neque. Vivamus viverrasem in ultricies.
-
8/15/2019 Pw1 03-HTML Lanjut
14/17
Contoh iFrame
Tampilan awal iframe
menampilkan frame_a.html
Tampilan iframe setelah user
memilih link Go to W3schools
-
8/15/2019 Pw1 03-HTML Lanjut
15/17
-
8/15/2019 Pw1 03-HTML Lanjut
16/17
-
8/15/2019 Pw1 03-HTML Lanjut
17/17