BAB 1I PEMROGRAMAN HTML (Hyper Text Markup Language) Part IV

Oleh: M. Ade Erik, S.Pd. NIP. 19870911 2010 01 1006 Doc versi: 02.00.04/TIK/XI-1/2010-2011 TEKNOLOGI INFORMASI DAN KOMUNIKASI SMA NEGERI 1 TEGAL 2010

y

HTML Frame dan Frameset
Untuk mendefinisikan banyaknya kolom atau baris elemen frame,digunakan tag <frameset> Sedangkan untuk mendefinisikan jendela/bingkat dalam frameset, digunakan tag <frame> Syarat dalam menggunakan frameset/frame adalah harus terlebih dahulu mempunyai halaman html yang akan ditampilkan dalam frameset/frame. Diletakan pada head dan tidak mengandung unsur body

y

Attribut yang dipergunakan dalam tag <frameset>
Mendefinisikan ukuran baris dalam frameset (pixels,%,*) Mendefinisikan ukuran kolom dalam frameset (pixels,%,*)

Attribut Deskripsi Rows Cols

y

Ex.Vertical frameset
<html> <head><title>Frame dan Frameset</title> <frameset cols="50%,50%"> <frame src=´index1.html" /> <frame src=´index2.html" /> </frameset> </head> </html>

y

Ex. Horizontal frameset
<html> <head><title>Frame dan Frameset</title> <frameset rows="50%,50%"> <frame src=´index1.html" /> <frame src=´index2.html" /> </frameset> </head> </html>

y

Ex. Horizontal dan vertical frameset
<html><head><title>Frame dan Frameset</title> <frameset rows="50%,50%"> <frame src=´index1.html" /> <frameset cols="25%,75%"> <frame src=´index2.html" /> <frame src=´index3.html" /> </frameset> </frameset> </head></html>

y

Ex. Noresize frame
<html> <head><title>Frame dan Frameset</title> <frameset cols="50%,50%"> <frame src=´index1.html" noresize="noresize"/> <frame src=´index2.html" noresize="noresize"/> </frameset> </head> </html>

y

Ex. Frameborder
<html> <head><title>Frame dan Frameset</title> <frameset cols="50%,50%"> <frame src=´index1.html" frameborder="0"/> <frame src=´index2.html" frameborder="0"/> </frameset> </head> </html>

y

Ex. Scrolling Frame
<html> <head><title>Frame dan Frameset</title> <frameset cols="50%,50%"> <frame src=´index1.html" scrolling="yes"/> <frame src=´index2.html"/> </frameset> </head> </html>

Ex. Navigation Frame 1 y (index1.html)
y
<html> <head><title>Frame dan Frameset</title> </head> <body bgcolor="red"> <h1>Index1</h1> </body> </html>

Ex. Navigation Frame 1 y (index2.html)
y
<html> <head><title>Frame dan Frameset</title> </head> <body bgcolor="blue"> <h1>Index2</h1> </body> </html>

Ex. Navigation Frame 1 y (menu.html)
y
<html> <head><title>Frame dan Frameset</title> </head> <body> <a href="index1.html" target="tampil"/>Index1</a> <br/><a href="index2.html" target="tampil"/>Index2</a> </body> </html>

Ex. Navigation Frame 1 y (frame.html)
y
<html> <head><title>Frame dan Frameset</title> <frameset cols="50%,50%"> <frame src="menu.html" noresize="noresize" name="menu"/> <frame src="index2.html" noresize="noresize´ name="tampil"/> </frameset> </head> </html>

y

Ex. Inline Frame (iframe)
<html> <head><title>Frame dan Frameset</title> </head> <body> <iframe src ="http://www.google.com" width=´600" height="300´></iframe> </body> </html>

y
y y y y y

HTML Marquee
Untuk membuat efek teks berjalan, gunakan tag <marquee> Ex. <body> <marquee>Ini Teks Berjalan</marquee> </body>

Attribut Behavior Height Width Direction Scrolldelay scrollamount Loop Bgcolor

Deskripsi Mendefinisikan jenis scrolling (scroll/slide/alternate) Mendefiniskan tinggi marquee Mendefiniskan panjang marquee Mendefiniskan arah scrolling (left/right/up/down) Memperlambat jalannya scrolling (dalam milisecond default=85) Mempercepat jalannya scrolling (default=6) Mendefiniskan banyaknya looping/pengulangan Mendefiniskan warna background

y

Ex.Vertical Marque
<html> <head><title>teks berjalan</title></head> <body> <marquee behavior="alternate" bgcolor="red" width=´100" height="300" direction="up"> <img src="Koala.jpg" width="100" height="100"/> </marquee> </body> </html>

y

Ex. Horizontal Marque
<html> <head><title>teks berjalan</title></head> <body> <marquee behavior="scroll" bgcolor="red" width="600" height="100" direction="right" scrollamount="10"> <img src="Koala.jpg" width="100" height="100"/> </marquee> </body> </html>

Buatlah contoh halaman web seperti diatas dengan menggunakan notepad ++ y Save dengan nama dan ektensi file ´sample4.html ´
y

sam4_hmarq.html

sam4_vmarq.html

sam4_menu.html

sample4.html

Sign up to vote on this title
UsefulNot useful