IF MATERI WEB DESIGN

(1)

MODUL

PEMROGRAMAN WEB 1

PENGENALAN WEB

Apakah web :

Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet, yang dapat memudahkan pengguna komputer untuk berinteraksi dengan pengguna internet lainnya dan mencari informasi yang diperlukan.

Web browser :

Browser web merupakan software yang digunakan untuk menampilkan informasi dari server web.

Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet Explorer, Lynx,

Konqueror.

Server web :

Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web dari kliennya.

(2)

Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table, paragraf dan list.

Untuk menandai berbgai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan, misalkan tag awal <H1> berpasangan dengan tag akhir </H1>.

Struktur Dokumen HTML :

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun dari link, grafis, paragraf dan elemen lainnya. Berikut ini adalah pola dasar sebuah dokumen HTML :

<html> <head>

…. Informasi tentang dokumen HTML.

</head> <body>

…. Informasi tentang yang akan ditampilkan dalam browser web. </body>

(3)

MODUL I

(STRUKTUR HTML)

Praktikum 1

 Bukalah notepad atau program text editor yang lain.

 Ketikkan script berikut :

<HTML>

<HEAD>

<TITLE> World Wide Web</TITLE>

<BODY>

<CENTER><H1>Definisi World Wide Web</H1></CENTER>

WWW adalah layanan yang paling sering digunakan dan memiliki

perkembangan yang sangat cepat karena dengan layanan ini kita

bisa menerima informasi dalam berbagai format (multimedia).

Untuk mengakses layanan WWW dari sebuah komputer (yang

disebut WWW server atau web server) digunakan program web

client yang disebut web browser atau browser saja.

Jenis-jenis browser yang sering digunakan adalah: Netscape

Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,

Lynx, dan lain-lain.

(4)

bila tidak netter akan tersesat kedalam rimba informasi yang

maha luas.

</BODY>

</HTML>

 Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type, pilihlan All Files(*.*).

 Buka web browser anda (internet explorer)

 Bukalah dokumen yang anda buat tadi. (File|Open)

 Klik browse: arahkan ke file Contoh1.html, klik OK

(5)

Praktikum 2

Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan pemformatan tampilan teks.

 Buka kembali file web.html pada program teks editor anda (notepad).

 Ubah perintah berikut <BODY BGCOLOR=”PINK”>

 Ubah paragraf pertama menjadi seperti dibawah ini :

<B>WWW</B> adalah layanan yang paling sering digunakan dan

memiliki perkembangan yang sangat cepat karena dengan layanan

ini kita bisa menerima informasi dalam berbagai format

(multimedia). Untuk mengakses layanan WWW dari sebuah komputer

(yang disebut <U>WWW server atau web server </U>) digunakan

program web client yang disebut web browser atau browser saja.

Jenis-jenis browser yang sering digunakan adalah: <I>Netscape

Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena,

Lynx, dan lain-lain.</I>

 Simpan hasil editing anda (File|Save)

 Lihat hasil perubahan pada web browser anda.

Praktikum 3

 Buatlah sebuah dokumen HTML untuk tulisan berikut ini :

(6)

tidak mendapat pekerjaan dan tidak bisa membuka usaha sendiri. Untuk menutupi kenyataan

menganggur, beberapa penganggur mencoba melucu dengan mengatakan bekerja di perumtel, kependekan dari penunggu rumah dan telenovela. Menganggurnya lulusan S-1 tidak saja akibat kondisi di luar, tetapi juga akibat kondisi dari dalam diri lulusan S-1 itu. Banyak mahasiswa

yang tidak menyiapkan diri dan mentalnya selama kuliah sehingga ketika lulus tidak tahu ke arah mana harus melangkah.

Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah dan bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak sekolahan? Lalu, ke mana setelah itu? Apakah di benak mereka terpikirkan 3 K: Kuliah, kerja, kawin? Lulus kuliah,

mencari pekerjaan, kemudian menikah, dan seterusnya?

Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat dunia di luarnya seperti adanya pasar global yang dinamis dan menuntut daya saing sangat kompetitif? Siapkan mereka menyambut pasar bebas ASEAN (AFTA) tahun 2003? Pedulikah mereka pada

pengakuan kualitas kelulusan mereka oleh negara lain yang sangat penting untuk persaingan global dan pasar bebas? Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di

(7)

MODUL II

(PEMFORMATAN TEKS DAN KARAKTER KHUSUS)

Pemformatan Teks:

Perintah-perintah yang digunakan:

 <FONT FACE=”nama font” SIZE=”ukuran font” COLOR=”warna font”>

..teks.. </font>

 tag-tag pemformatan :

Tag awal Kegunaan

<b> Mendefinisikan teks yang ditebalkan. <big> Mendefinisikan teks yang besar ukurannya.

<em> Mendefinisikan teks yang ditekankan

<I> Mendefinisikan teks yang dimiringkan – Italic

<small> Mendefinisikan teks yang kecil ukurannya

<strong> Mendefinisikan teks yang ditebalkan.

<sub> Mendefinisikan teks yang dijadikan subscript.

<sup> Mendefinisikan teks yang dijadikan superscript.

<u> Mendefinisikan teks yang digaris bawahi – Underline

<s> Mendefinisikan teks yang di coret – strikethrough

 Karakter-karakter khusus

Entitas Keterangan

(8)

¥ Yen

Praktikum 1

 Ketikkan script berikut menggunakan teks editor.

 Simpan dengan nama Internet.html <html>

<head><title> Interconnected Network</title>

</head>

<font face=”arial” size=6 color=red> Interconnected Network alias Internet</font>

</center>

<hr>

<I>Interconnected Network</I> - atau yang lebih populer

dengan sebutan Internet - adalah sebuah sistem komunikasi

global yang menghubungkan komputer-komputer dan

jaringan-jaringan komputer di seluruh dunia. Setiap komputer dan

jaringan terhubung - secara langsung maupun tidak langsung -

ke beberapa jalur utama yang disebut <I> internet backbone

</I> dan dibedakan satu dengan yang lainnya menggunakan

<I>unique name</I> yang biasa disebut dengan alamat IP 32

bit. Contoh: 202.155.4.230 . Komputer dan jaringan dengan

berbagai platform yang mempunyai perbedaan dan ciri khas

masing-masing (Unix, Linux, Windows, Mac, dll) bertukar

informasi dengan sebuah protokol standar yang dikenal dengan

nama TCP/IP (<I>Transmission Control Protocol/Internet

Protocol</I>). TCP/IP tersusun atas 4 layer (network access,

internet, host-to-host transport, dan application) yang

masing-masing memiliki protokolnya sendiri-sendiri.

(9)

Bila anda mempunyai Komputer minimal prosessor 486, Windows

95, Modem, dan line telepon, maka anda telah bisa bergabung

dengan ribuan juta komputer lain dari seluruh dunia dan

mengakses harta karun informasi di internet.

</font>

</p>

<hr>

<font face=”century” size=3 color=brown>&copy STMIK EL RAHMA

<br><b>Yogyakarta</b></font>

</center>

</body>

</html>

Praktikum 2

<HTML>

<HEAD>

<TITLE> karakter khusus </TITLE>

</HEAD>

<BODY>

(10)

 Simpan dengan nama karakter_khusus.html

 Lihat hasilnya dengan browser.

Praktikum 3

<HTML>

<HEAD>

<TITLE> Formatting Font </TITLE>

</HEAD>

<BODY>

<BR>

<u>Underline</u>

<BR>

<I>Italic</I>

<BR>

<strong>Strong</strong>

<BR>

<em>Emphasis</em>

<BR>

(11)

<BR>

<S>strikethrough</s>

<BR>

CO<sup>2</sup>

<BR>

H<sub>2</sub>O

</BODY>

</HTML>

 Simpan dengan nama font.html

(12)

MODUL III

(Penyisipan Gambar)

Perintah-perintah yang digunakan dalam penyisipan gambar :

 Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam dokumen HTML.

<img src=”nama_ image.ext” width=”ukuran lebar gambar”

height=”ukuran tinggi gambar” align=”posisi/perataan gambar terhadap teks”>

 Bila ingin menggunakan gambar sebagai background/latar belakangdokumen HTML

praktikum 1

 Ketikkan script berikut : <html>

<head>

<title>Wisata Dunia</title>

</head>

<p align="center"><b><u>Tempat-tempat yang indah didunia

</u></b></p>

<hr>

<p align="left">Inilah tempat-tempat wisata dunia yang banyak

dikunjungi oleh

wisatawan tiap tahunnya:</p>

<p align="left"><img border="0" src=" lawu.jpg" width="148"

(13)

<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur

Indonesia</p>

<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika <img

border="0" src=" Hawaii.jpg" width="203" height="134"></p>

</body>

</html>

 Simpan dengan nama image_align.html

(14)

Praktikum 2 (Tugas)

(15)

MODUL 4

HYPERLINK

Perintah-perintah yang digunakan :

 Membuat link dengan karakter : <a href=”URL/dokumen.html”>link</a>

 Membuat link dengan gambar :

 Membuat nama link pada satu dokumen (anchor) :

 Membuat link pada bagian lain dalam satu dokumen HTML. :

Praktikum 1

<head>

<title>Wisata Dunia</title>

</head>

<a name="atas"><b><u>Tempat-tempat yang indah didunia

</u></b></a>

(16)

<a href=" detail_tempat_wisata.html"><img src="lawu.jpg"

width="136" height="95">

</a>

<b>Gunung Lawu</b> : di Propinsi Jawa Timur

<p>

<b>Hawaii</b> : Terletak di Benua Amerika 

<a href=" detail_tempat_wisata.html"><img src=" Hawaii.jpg"

width="161" height="99"></a>

</p>

<b>Colloseum</b> : ada di Romawi

</p>

<b>Candi Borobudur</b> : Di Jawa Tengah

<a href=" detail_tempat_wisata.html"><img src="Borobudur.jpg"

width="132" height="92"></a>

</p>

<p align="center">Tersedia paket perjalanan wisata dengan

harga mulai 100$ US</p>

<p align="center"><a href="mailto:pesan@travel.com">Pesan

sekarang juga</a></p>

<hr>

</body>

</html>

 Simpan dengan nama Tempat_wisata.html

(17)

Praktikum 2

 Buat script berikut dan simpan dengan nama detail_tempat_wisata.html <html>

<head>

<title>Detail Tempat Wisata</title>

</head>

<body>

<b><font size="4">Detail Tempat Wisata</font></b>

</p>

<p>

<u><b>Gunung Lawu</b></u>

</p>

<p>

Gunung yang indah dan penuh dengan legenda ini terletak di

Propinsi Jawa Timur, dengan

ketinggian sekitar 3265 diatas permukaan laut.

</p>

<p>Harga paket perjalanan wisata : Rp. 500.000 (3H2M)</p>

<p>

<b><u>Hawaii</u></b>

</p>

<p>

(18)

Harga paket perjalanan wisata : $500.000 (3H2M)</p>

<p><b><u><a href="wisata_dunia.html">Kembali</a></u></b></p>

</body>

</html>

(19)

MODUL 5

LIST

List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu. Jenis-jenis list dalam HMTL :

 List dengan nomor (OL : Ordered List)

Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi atribut type pada tag <ol>

Contoh untuk list dengan angka romawi : <ol type=”I”>

 List tanpa nomor (UL: Unordered List)

Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag <ul>

Contoh <ul type=”box”> : bila ingin bullet berbentuk kotak.  List definisi

Praktikum 1:

 Cobalah script berikut ini : <HTML>

<HEAD>

<TITLE> Ordered List & Unordered List</TITLE>

</HEAD>

<BODY>

<h4>An ordered List : </h4>

<ol>

(20)

</ul>

</BODY>

</HTML>

 Simpan dengan nama list.html

 Jalankan dengan web browser

Praktikum 2:

 Cobalah script berikut ini : <HTML>

<HEAD>

<TITLE> definition list </TITLE>

</HEAD>

<BODY>

<DL>

<DT>Coffee</DT>

<DD>Black hot drink</DD>

<DT>Ice Cream</DT>

<DD>sweet Cold drink</DD>

</DL>

</BODY>

</HTML>

 Simpan dengan nama definition.html

(21)

MODUL 6

TABEL

Elemen-elemen tabel :

Elemen Keterangan

<table>...</table> Mendefinisikan sebuah tebel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border.

<th>…</th> Mendefinisikan sel header tabel, secara default teks dalam sel ini ditebalkan

dan rata tengah.

<tr>…</tr> Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan

atribut untuk seluruh baris : align(left,center,right) dan/atau valign (top,middle,bottom)

<td>…</td> Mendefinisikan sebuah sel data tabel, secara default teks dalam sel ini akan

ditampilkan rata kiri dan ditengah secara vertikal. Sel data tabel dapat berisi

atribut untuk mendefinisikan karakteristik dari sel dan isinya.

Praktikum 1

 Ketikkan script berikut

<HTML>

<HEAD>

<TITLE> Belajar Tabel </TITLE>

</HEAD>

(22)

</TR>

<TR>

<TD>Asih Winantu</TD>

<TD>Bantul Yogyakarta</TD>

</TR>

<TR>

<TD>Agus Riyanto</TD>

<TD>Sleman Yogyakarta</TD>

</TR>

<TR>

<TD>M Wahib</TD>

<TD>Blora Jawa Tengah</TD>

</TR>

</TABLE>

</BODY>

</HTML>

 Simpan dengan nama tabel1.html

(23)

Praktikum 2

 Ketikkan script berikut ini <html>

<head>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0"

width="100%">

<caption><b>Daftar Nilai Pemrograman Web 1</b></caption>

<tr>

<th width="67%" colspan="2" >Nilai</th>

</tr>

<tr>

<th width="33%">Tugas</th>

<th width="34%">Praktikum</th>

</tr>

<tr>

<td width="33%">Lutfia</td>

</tr>

<tr>

<td width="33%">yulia </td>

(24)

</table>

</body>

</html>

 Simpan dengan nama tabel2.html

 Jalankan dengan web browser

Praktikum 3 (tugas)

 Buatlah dokumen HTML dengan tampilan sebagai berikut :

Biaya SPP Per semester STMIK El Rahma Yogyakarta Tahun ajaran 2005/2006

Lulusan Periode Daftar Biaya

LPK El Rahma

I Rp. 650.000

II Rp. 700.000

III Rp. 750.000

LPK Non El Rahma

I Rp. 675.000

II Rp. 725.000

III Rp. 775.000

SMU/Sederajat

I Rp. 700.000

II Rp. 750.000

(25)

MODUL 7

FRAME

Sintaks :

</frame>

Praktikum 1

 Buat file dengan nama Frame.html

<frameset framespacing="0" border="0" rows="64,*,79"

frameborder="0">

<frame name="top" scrolling="no" noresize target="contents"

src="atas.htm">

</frameset>

<frame name="bottom" scrolling="no" noresize

target="contents" src="bawah.htm">

</frameset>

(26)

</body>

</html>

 Buat file dengan nama utama.html <html>

<head>

<title>SELAMAT DATANG DI SITUS STMIK EL RAHMA</title>

</head>

<body>

<p align="center"><b><img border="0" src="LOGOSTIMIK.jpg"

width="61" height="61" align="middle">

SELAMAT DATANG DI SITUS STMIK EL RAHMA</b></p>

<hr>

<p align="left">STMIK El Rahma Yogyakarta berdiri pada tanggal

30 Agustus 2001

dengan SK Mendiknas No. 155/D/0/2001 dibawah naungan Yayasan

El Rahma. Pada saat

berdirinya, STMIK El Rahma memiliki lima program studi yaitu

Sistem Informasi,

Teknik Informatika, Manajemen Informatika, Teknik Komputer dan

Komputerisasi

Akuntansi.</p>

</body>

</html>

 Buat file dengan nama kiri.html <html>

<head>

<title>Program Studi</title>

</head>

<body>

<p>Sejarah Singkat</p>

(27)

<p>Fasilitas</p>

<p>Alumni</p>

<p>Info Kerja</p>

</body>

</html>

 Buat file dengan nama bawah.html <html>

<head>

<title>untitled</title>

</head>

<body>

<p align="center">© STMIK EL RAHMA<br>2005</p>

</body>

</html>

(28)

(29)

MODUL 8

IMAGE MAP

Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam suatu gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk daerah dan koordinat pembatasnya. Bentuk daerah peta dibedakan menjadi :

 Point : daerah berupa titik

 Rect : daerah berupa kotak/persegi panjang

 Poly : daerah berbentuk polygon

 Circle : daerah berbentuk lingkaran

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat (0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan bawah gambar (lebar_maks, tinggi_maks).

Sintaks :

<img src=”nama gambar sebagai map” width=”lebar tampilan gambar” height=”tinggi tampilan gambar” usemap=”#nama_map”

border=0>

(30)

Contoh:

<title>Creating Hotspot</title>

</head>

<body>

<img src="Starry.gif" width="400" height="200"

border="0" usemap="#Map">

<area shape="rect"

coords="0,0,200,100"

href="file1.htm"

alt="kotak link">

<area shape="circle"

coords="354,41,36"

href="file2.htm"

alt="lingkaran link">

<area shape="poly"

coords="58,102,97,101,110,134,

119,119,177,195,69,196,

47,162,62,143" href="#">

</map>

</body>

(31)

Contoh penggunaan image map:

Script dari image map diatas adalah : <html>

<head><title>Image Map</title></head>

<body>

<area href="profile.html" shape="rect" coords="114, 4, 228,

118">

<area href="fasilitas.html" shape="rect" coords="115, 119,

229, 234">

<area href="Prodi.html" shape="rect" coords="4, 2, 114, 118"> Link 1 Link 2

(32)

MODUL 9

FORM DAN INPUT

Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman web.

Sintaks :

</form>

Jenis masukan dalam suatu form dibedakan menjadi :

 Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa berupa angka atau teks.

 Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya banyak.

 Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.

 Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.

 List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.

 Button : mendefinisikan tombol untuk melakukan pemrosesan form. o Submit : untuk memenggil url, setelah selesai penginputan form. o Reset : untuk menginisialisasi setiap elemen form.

o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada

dalam dokumen HTML.

o Image : digunakan sebagai pengganti button, button yang berbentuk gambar.

Praktikum 1

<head>

<title>formulir</title>

</head>

(33)

<p><b>Formulir Pendaftaran Kursus</b></p>

<tr>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td><input type="radio" value="L" checked

name="jkl">Laki-laki

</tr>

<tr>

<td>Propinsi</td>

(34)

<td><input type="checkbox" name="kursus"

value="inggris">Bahasa Inggris<br>

<input type="checkbox" name="kursus"

value="komputer">Komputer</td>

</tr>

</table>

<p><input type="submit" value="Submit" name="Bsubmit"><input

type="reset" value="Reset" name="Breset"></p>

</form>

</body>

</html>

 Simpan dengan nama form.html

(35)

Praktikum 2 (validasi data)

 Bukalah kembali file form.html.

 Tambahkan script berikut pada bagian head : <script language="VBscript">

<!--

sub Bsubmit_OnClick

dim TheForm

Set Theform= document.form_kursus

if IsNumerik(TheForm.nama.value) then

Msgbox " Input anda salah"

Else

TheForm.submit

End If

End Sub

-->

</script>

 Jalankan dengan browser.

Validasi Data dengan JavaScript:

<head>

<title>Membuat Validasi</title>

function ValidasiForm()

(36)

}

if (document.FormTamu.email.value=="") {

alert("Kolom Email tidak boleh kosong");

return false;

<form onSubmit="return ValidasiForm()" name="FormTamu"

method="post" action="">

<table class="TABLE" width="307" border="0" cellspacing="0"

cellpadding="3">

<th colspan="2" scope="col">Form Validasi </th>

</tr>

<tr>

<input name="nama" type="text" id="nama" size="25"

maxlength="35"></td>

</tr>

<tr>

<td>Alamat</td>

<td><input name="alamat" type="text" id="alamat"

size="25" maxlength="35"></td>

</tr>

<tr>

<td>Email</td>

<td><input name="email" type="text" id="email"

</tr>

(37)

<td><input type="submit" name="Submit"

value="Kirim"></td>

</tr>

</table>

</form>

</body>

</html>

(38)

MODUL 10

CSS (Cascading Style Sheet)

CSS merupakan sebuah dokumen yang dapat digunakan untuk melakukan pengaturan pada seluruh komponen web. CSS bisa digunakan dengan berbagai metode, salah satu diantaranya adalah diletakkan pada bagian Head.

Contoh penggunaan CSS : <html>

<head><title>Membuat form bentuk cantik</title>

<!--

INPUT {

background-color:#00FF00;

border-style:outset;

border-width: 2PX;

}

TEXTAREA {

background-color:#00FF00;

border-style:outset;

border-width: 2PX;

}

.TABLE {

border-style : solid;

border-color:#00FF00;

border-width: 1PX;

}

-->

</style></head>

<body>

<table class="TABLE" width="350" border="0" cellspacing="0"

cellpadding="3">

(39)

<th colspan="2" scope="col">Form Cantik </th>

</tr>

<tr>

<input name="nama" type="text" id="nama" size="25"

maxlength="35"></td>

</tr>

<tr>

<td>Alamat</td>

<td><input name="alamat" type="text" id="alamat"

</tr>

<tr>

<td>Email</td>

<td><input name="email" type="text" id="email"

</tr>

(40)

MODUL 11

MEMPERCANTIK HALAMAN WEB

Cursor diikuti teks:

<head>

<title>Animasi Kursor</title>

<!--

var x,y

var step=20

var flag=0

var message="STMIK El Rahma"

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50

}

var ypos=new Array()

ypos[i]=-50

}

function handlerMM(e){

x = (document.layers) ? e.pageX : event.clientX

y = (document.layers) ? e.pageY : event.clientY

flag=1

}

(41)

if (flag==1 && document.all) {

var thisspan = eval("document.all.span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

if (flag==1 && document.layers) {

for (i=message.length-1; i>=1; i--) {

thisspan.top=ypos[i]

}

(42)

visibility:visible;

top:-50px;

font-size:8pt;

font-family:verdana;

color:black;

font-weight: bold;

}

a { color:FFFFCC; text-decoration:none }

a:hover { color:FFFF99; text-decoration:underline }

a:visited { color:FFFF99 }

</STYLE>

<!--

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i])

document.write("</span>")

}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

//-->

</script>

</head>

Gerakan Mouse ...

</body>

</html>

Teks Berjalan Pada Status Bar

<html>

(43)

<title>teks jalan</title>

<!--

Dim Teks,Pjteks,Ambil1,Ambil2

Teks =" Coba teks berjalan " & Space(15)

Sub TeksJalan()

Pjteks=Len(Teks)

Ambil1=Mid(Teks, 2, Pjteks-1)

Ambil2=Mid(Teks,1,1)

Teks=Ambil1 & Ambil2

Window.Status=Teks

Window.SetTimeOut "TeksJalan", 200

End Sub

-->

</script>

</head>

</body>