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