Pw1 03-HTML Lanjut

BS404
Pemrograman Web
03- HTML Lanjut
HTML Images
Menampilkan images pada halaman web
Attribute
src
Nilai Attribute
lokasi folder + nama file gambar + ekstensi file
width
px
height
px
alt
text (alternative information when the image fails to load)
title
text (the tooltip in browser)
border
px
hspace
px
vspace
px
align
bottom, middle, top
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
Hyperlink
Attribute
nama file html / url
href
File HTML
URL
target
_blank
_top
_parent
_self
new
title
Nilai Attribute
: <a href="profile.html">Profile</a> (internal link)

: <a href="http://www.google.com">Google</a> (external link)
_blank, _top, _parent, _self, new

: browser akan selalu membuka halaman baru
: link dokumen ke jendela yang sama
: link dokumen ke framset parent.
: link dokumen ke frame yang bersangkutan/aktif
: browser akan membuka halaman baru
text (create a tooltip for your links)
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 jump
back to the top
How to build Intra-page link?
Beri id untuk posisi tujuan atau name pada tag <a>

<H2 id="part1">Part 1</H2> atau <a name=part1"></a>
Buat link untuk menuju ke posisi yang diinginkan

<a href="#part1">Back to begin of Part 1</a>
Accessing Intra-Page Links from Other Pages

<a href="story.html#part1">Back to begin of Part 1</a>
Hyperlink (Using Images)
Membuat link dengan menggunakan images
Biasanya digunakan untuk membuat menu pada halaman web
<a href="index.html" title="Link to the home page">

<img src="images/home.gif" width="150" height="35" title="home
navigation"/>
</a>
Body
Link, saat hyperlink belum dikunjungi
Visited, saat hyperlink telah dikunjungi
Active, saat hyperlink dalam keadaan terpilih
<BODY link="#..." vlink="#..." alink="#..."> </BODY>
Image Map
How to create an image map, with clickable regions. Each of the regions is a
hyperlink
<map> </map>
Tag map mempunyai atribut name sebagai identitas yang akan dipakai oleh tag
<img> pada atribut usemap
<area>
Attribute
Nilai Attribute
shape
rect, circle, poly
coords
koordinat
alt
text
href
nama file atau URL
Koordinat
Contoh Image Map

<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html" />
</map>
</body>
</html>
Marquee
Membuat tampilan bergerak vertikal atau horizontal
Non-standard HTML element
Tidak disarankan untuk digunakan pada dokumen HTML
Attribute
Nilai Attribute
behavior
scroll, slide, alternate
direction
left, right, up, down
width
px
height
px
scrollamount
1 px = the slowest scroll speed
scrolldelay
1000 milliseconds = 1 second
<marquee width="200" direction="right" behavior="alternate">Pemrograman Web</marquee>
iFrame
Menampilkan halaman web lain dalam satu halaman web

Attribute
Nilai Attribute
src
nama file atau URL
frameborder
1 atau 0
width
px atau persentase
height
px atau persentase
name
text
Contoh iFrame
<html>
<head> <title>Latihan iFrame</title></head>
<body>
<p>
<a href="http://w3schools.com" target="iframe_a">Go to W3schools</a> Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nunc sed lacus a odio iaculis egestas et
vestibulum nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus cursus accumsan odio, eget vehicula purus laoreet pharetra. Nam
lacus erat, elementum at fringilla et, posuere sodales neque. Vivamus viverra placerat
sem in ultricies.
</p>
<iframe src="frame_a.html" frameborder="5" name ="iframe_a" width="70%"
height="40%"></iframe>
</body>
</html>
Contoh iFrame
Tampilan awal iframe
menampilkan frame_a.html
Tampilan iframe setelah user

memilih link Go to W3schools
Latihan

Pw1 03-HTML Lanjut

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

Pw1 03-HTML Lanjut

Diunggah oleh

Hak Cipta:

Format Tersedia

BS404

text (alternative information when the image fails to load)

text (the tooltip in browser)

bottom, middle, top

<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />

nama file html / url

: <a href="profile.html">Profile</a> (internal link)

_blank, _top, _parent, _self, new

text (create a tooltip for your links)

Hyperlink (Intra-Page Links)

Navigation within a single page

Beri id untuk posisi tujuan atau name pada tag <a>

Buat link untuk menuju ke posisi yang diinginkan

Accessing Intra-Page Links from Other Pages

Hyperlink (Using Images)

Membuat link dengan menggunakan images

Biasanya digunakan untuk membuat menu pada halaman web

<a href="index.html" title="Link to the home page">

Link, saat hyperlink belum dikunjungi

Visited, saat hyperlink telah dikunjungi

Active, saat hyperlink dalam keadaan terpilih

<BODY link="#..." vlink="#..." alink="#..."> </BODY>

rect, circle, poly

nama file atau URL

Contoh Image Map

scroll, slide, alternate

left, right, up, down

1 px = the slowest scroll speed

1000 milliseconds = 1 second

<marquee width="200" direction="right" behavior="alternate">Pemrograman Web</marquee>

Menampilkan halaman web lain dalam satu halaman web

nama file atau URL

Tampilan iframe setelah user

Anda mungkin juga menyukai