Contoh Desain Web dengan JavaScript

19 11 2009

Membuat tampilan awal homepage

Contoh file HTML-nya adalah sebagai berikut :

<html>

<head>

<title>Demo JavaScript</title>

</head>

<script>

function scrollit_r2l(seed){

var m1  = “Selamat datang di Homepage si Tesur tea ….    “;

var m2  = “Teddy Surya Gunawan   ….   “;

var m3  = “Teknik Elektro – ITB  ….   “;

var m4  = “Selamat menikmati ….  “;

var msg=m1+m2+m3+m4;

var out = ” “;

var c   = 1;

if (seed > 100) {

seed–;

var cmd=”scrollit_r2l(” + seed + “)”;

timerTwo=window.setTimeout(cmd,100);

}

else if (seed <= 100 && seed > 0) {

for (c=0 ; c < seed ; c++) {

out+=” “;

}

out+=msg;

seed–;

var cmd=”scrollit_r2l(” + seed + “)”;

window.status=out;

timerTwo=window.setTimeout(cmd,100);

}

else if (seed <= 0) {

if (-seed < msg.length) {

out+=msg.substring(-seed,msg.length);

seed–;

var cmd=”scrollit_r2l(” + seed + “)”;

window.status=out;

timerTwo=window.setTimeout(cmd,100);

}

else {

window.status=” “;

timerTwo=window.setTimeout(“scrollit_r2l(100)”,75);

}

}

}

</script>

<body bgcolor=CYAN onLoad=”timerONE=window.setTimeout(‘scrollit_r2l(100)’,500);”>

<body text=”#000000″ link=”#0000FF” vlink=”#ff0000″ alink=”#0000ff”>

<center>

<h1> Homepage si Tesur tea </h1><hr>

<center><h4> Demo JavaScript (Perlu Netscape 2.0 atau lebih) </h4>

<BR><table border=7>

<tr><td align=center><A HREF=”alive.htm”>Berapa detik kamu telah hidup</a></td>

<td align=center><a href=”js_maze.htm”>Maze Game</a></td></tr>

<tr><td align=center><a href=”tglahir.htm”>Hari tanggal lahir anda</a></td>

<td align=center><a href=”selamat.htm”>Scrolling banner</a></td></tr>

<tr><td align=center><a href=”stopwatch.htm”>Stopwatch</a></td>

<td align=center><a href=”link.htm”>Link … </a></td></tr>

</table><br>

<center><img src=”tesur.gif”></center>

<H3>Teddy Surya Gunawan<BR>

Jl.Bojongkoneng no.43<BR>

Bandung 40125<BR>

Jawa Barat<BR>

Indonesia<BR>

E-mail : <A HREF=”MAILTO:tesur@students.itb.ac.id”>tesur@students.itb.ac.id</A>

</body>

</html>

Pada file HTML di atas terdapat sebuah menu kecil yang ditunjukkan dengan adanya <TABLE>. Dari menu tersebut di-link ke file-file HTML lainnya, misalnya ke game, useful link, tool, dan sebaginya. Hal ini akan memudahkan kita untuk mengakses HTML lainnya. Tentu saja menu-menu tersebut dapat diganti dengan menu-menu lain yang berguna, misalnya tentang data pribadi, foto keluarga, dan sebagainya. Selain itu terdapat juga fungsi scrollit yang akan membuat tulisan dalam variabel msg (msg=m1+m2+m3+m4) bergerak-gerak di scroll bar.


Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: