Anda di halaman 1dari 74

endarnirmala@gmail.

com

MODUL
PEMROGRAMAN WEB 1

OLEH :

ENDAR NIRMALA, S.Kom, MT

JURUSAN TEKNIK INFORMATIKA


UNIVERSITAS PAMULANG

Modul Pemrograman Web 1


1
endarnirmala@gmail.com

KATA PENGANTAR

Web merupakan salah satu sumber informasi yang banyak digunakan. Berbagai
aplikasi web dibuat dengan tujuan agar pemakai dapat berinteraksi dengan
penyedia informasi dengan mudah dan cepat melalui dunia Internet. HTML
digunakan untuk membangun suatu halaman web. Sekalipun banyak orang
menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan
bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap
sebuah dokumen teks.

Sehubungan dengan kebutuhan untuk membangun aplikasi web yang bersifat


dinamis modul ini dibuat dengan mengkombinasikan HTML dan Java Script.
Harapan yang diinginkan agar pembaca khususnya mahasiswa dapat belajar
sendiri untuk mengimplementasikannya. Dengan pendekatan "belajar dengan
mencoba dan berlatih", modul ini dapat menuntun mahasiswa memiliki
kemampuan dasar dalam membuat aplikasi web yang dinamis.

Modul ini mencakup tentang HTML dan Java Script sehingga pembaca khusunya
mahasiswa dapat membuat web sederhana yang cukup menarik. Semua contoh
latihan sudah diuji dilingkungan Windows . Untuk lebih melengkapi modul ini
anda dapat mendownload sendiri situs-situs tutorial yang berhubungan dengan
HTML dan Java Script yang berada di Internet.

Akhir kata semoga modul ini dapat memberikan manfaat.

Jakarta, Mei 2011

Penulis

Modul Pemrograman Web 1


2
endarnirmala@gmail.com

DAFTAR ISI

KATA PENGANTAR 1
DAFTAR ISI .......................................................................................................................... 3
BAB I PENGENALAN WEB ................................................................................................... 5
1.1 World Wide Web...................................................................................................... 5
1.2 Sekilas Cara Kerja Web ............................................................................................ 6
1.3 Pengenalan HTML ................................................................................................... 7
1.3.1 Elemen HTML .................................................................................................... 8
1.3.2 Browser dan Editor ........................................................................................... 8
1.3.3 Struktur script HTML : ....................................................................................... 8
BAB II BASIC TAG HTML.................................................................................................... 10
2.1 Struktur Dasar HTML .............................................................................................. 10
2.1.1 HEAD ............................................................................................................... 10
2.1.2 BODY ............................................................................................................... 11
2.2 Format Dokumen HTML ......................................................................................... 11
BAB III FORMAT TEKS DAN KARAKTER KHUSUS ........................................................... 16
3.1 Format Teks............................................................................................................ 16
3.2 Karakter Khusus ..................................................................................................... 16
BAB IV MENYISIPKAN GAMBAR, SUARA DAN VIDEO ..................................................... 20
4.1. Menyisipkan Gambar ............................................................................................ 20
4.2 Menyisipkan Suara ................................................................................................. 20
4.3 Menyisipkan Video ................................................................................................. 21
BAB V HYPERLINK ............................................................................................................ 22
BAB VI LIST ...................................................................................................................... 25
BAB VII TABEL ................................................................................................................... 29
BAB VIII FORM .................................................................................................................. 33
BAB IX FRAME .................................................................................................................. 38
BAB X CASCADING STYLE SHEET (CSS)............................................................................ 43
10.1. Penulisan CSS ...................................................................................................... 43
10.2 Menggunakan Style sheet .................................................................................... 44

Modul Pemrograman Web 1


3
endarnirmala@gmail.com

BAB XI PENGENALAN JAVA SCRIPT ................................................................................. 52


11.1 Penulisan Java Script ............................................................................................ 52
11.2 Variabel ................................................................................................................ 54
11.3. Tipe Data ............................................................................................................. 55
11.4 Jenis Operator ...................................................................................................... 56
BAB XII STRUKTUR KENDALI DAN FUNGSI ..................................................................... 61
12.1 Struktur Kendali ................................................................................................... 61
12.2 LOOP.................................................................................................................... 64
BAB XIII FUNCTION DAN ARRAY .................................................................................... 67
13.1. FUNCTIONS ......................................................................................................... 67
13.2 Array ..................................................................................................................... 68
BAB IV KOLEKSI CODE JAVA SCRIPT ................................................................................. 70
14.1 Membuat tanggal ................................................................................................ 70
14.2 Teks jalan distatus bar.......................................................................................... 70
14.3 Animasi Kursor ..................................................................................................... 71
DAFTAR PUSTAKA ............................................................................................................. 74

Modul Pemrograman Web 1


4
endarnirmala@gmail.com

BAB I PENGENALAN WEB

1.1 World Wide Web

Internet merupakan jaringan global yang merupakan sumber daya informasi


dengan menghubungkan suatu network dengan network lainnya di seluruh dunia.
World Wide Web telah berkembang sangat pesat sejak kemunculannya diawal
tahun 1990 an. Semua perhatian public, baik dari media massa, bisnis,
pemerintah, ataupun perseorangan, tertuju kepada World Wide Web. Melihat daya
jangkauannya yang luar biasa, mereka pun mulai berlomba-lomba memanfaatkan
World Wide Web untuk memperlancar usahanya.

World Wide Web dibangun dari halaman web atau dikenal dengan home
page. Home page sendiri dibuat dengan menggunakan Hypertext Markup
Language (HTML). Tanpa HTML, tidak akan ada home page, dan tanpa home
page tidak akan ada World Wide Web. HTML merupakan pondasi dari World
Wide Web.

HTML merupakan format data yang digunakan untuk membuat dokumen


hypertext yang dapat dibaca dari satu platform komputer lainnya tanpa perlu
melakukan suatu perubahan apapun. Dokumen HTML sebenarnya merupakan
suatu dokumen teks biasa sehingga di platform apapun dokumen tersebut dapat
dibaca. Dokumen HTML disebut sebagai markup language karena mengandung
tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan
tingkat kepentingan dari teks tersebut dalam suatu dokumen.

Dengan sistem hypertext pada dokumen HTML, pengguna tidak harus


membaca suatu dokumen secara berurutan dari atas ke bawah, tetapi dapat menuju
ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks
penghubung yang akan membawa kita ke suatu topik atau dokumen lain secara
langsung.

Modul Pemrograman Web 1


5
endarnirmala@gmail.com

World Wide Web bekerja berdasarkan dengan tiga mekanisme, yaitu:

 Protocol merupakan standard aturan yang digunakan untuk berkomunikasi


dengan komputer networking, protokol untuk World Wide Web adalah
Hypertex Transfer Protocol (HTTP).
 Address, World Wide Web memiliki aturan penamaan alamat web yaitu URL
(Uniform Resource Locator) sebagai standard alamat internet.
 HTML digunakan untuk membuat dokumen yang dapat diakses melalui web.

1.2 Sekilas Cara Kerja Web

Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan
dilewatkan oleh suatu protocol HTTP melewati port 80 pada server. Alamat ini
adalah URL dari suatu situs yang mempunyai alamat yang unik di Internet. Web
Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnya, aturan
ini biasa disebut sebagai protocol, standar protocol menggunakan TCP/IP, proses
ini dimulai dengan melakukan 3 way handshakes antara sumber dan tujuan. Web
browser, suatu aplikasi pada client yang akan menampilkan halaman web sites
dari internet. Web browser di install di sisi user (OS) menampilkan informasi ke
komputer dengan interpreting bahasa pengkodean HTML, dimana homepage
berisi gambar, suara, multimedia, dan resources lainnya yang dapat diakases. Files
Coding pada HTML memberikan datanya ke browser apa yang akan ditampilkan
ke sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi dari
web servernya dan browser akan menginterpretasikan tag HTML untuk link ke
halaman berikutnya

Modul Pemrograman Web 1


6
endarnirmala@gmail.com

Gambar 1.1 Cara kerja web

1.3 Pengenalan HTML


Hypertext Markup Language merupakan bahasa standard yang digunakan
untuk menampilkan dokumen web. Hal-hal yang dapat dilakukan dengan
menggunakan HTML, yaitu:

1. Mengontrol tampilan web page dan content-nya


2. Mempublikasikan dokumen secara on-line sehingga dapat di akses dari
seluruh dunia
3. Membuat on-line form yang dapat digunakan untuk menangani pendaftaran,
transaksi secara on-line
4. Menambahkan objek-objek seperti image, audio, video dan java applet.

Perbedaan utama dokumen HTML dengan dokumen pada umumnya adalah


dokumen HTML memiliki elemen-elemen HTML beserta tag-tagnya.

Modul Pemrograman Web 1


7
endarnirmala@gmail.com

1.3.1 Elemen HTML


Elemen HTML merupakan komponen penyusun suatu dokumen HTML.
Elemen ini dibagi atas 2 bagian utama, yaitu:

 Elemen-elemen <HEAD> yang memberikan informasi tentang dokumen


tersebut
 Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen
ditampilkan oleh browser.

1.3.2 Browser dan Editor


a. Browser
Browser merupakan software yang di install pada mesin client yang berfungsi
untuk meneterjemahkan tag-tag HTML menjadi halaman web. Browser yang
sering digunakan biasanya Internet Explorer, Netscape Navigator, Mozilla dan
Opera.

b. Editor
Editor adalah program yang digunakan untuk membuat dokumen HTML,
diantaranya MS FrontPage, Notepad, Macromedia DreamWeaver, EditPlus,
CuteHTML dan lain sebagainya.

1.3.3 Struktur script HTML :

<html>

<head>

--- bagian head ---

</head>

<body>

--- bagian body ---

</body>
</html>

Modul Pemrograman Web 1


8
endarnirmala@gmail.com

Latihan :

1. Apa perbedaan Web, Portal dan Blog !


2. Apa yang dimaksud dengan Web Browser, berikan contoh !
3. Apa yang dimaksud dengan Web Server, berikan contoh !
4. Ceritakan proses kerja web !

Modul Pemrograman Web 1


9
endarnirmala@gmail.com

BAB II BASIC TAG HTML

2.1 Struktur Dasar HTML

HTML digunakan untuk membangun suatu halaman web. Banyak orang


menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan
bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap
sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai
dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ) , dan disebut tag.

Tag biasanya merupakan suatu pasangan, yang disebut tag awal dan tag akhir.
Tag awal dinyatakan dalam bentuk <nama_elemen> dan tag akhir dinyatakan
dalam bentuk </nama_elemen>. Ada beberapa macam bentuk tag yang dikenal
dalam HTML, yaitu :

 Tag berpasangan
Format : <nama_elemen> teks </nama_elemen>
 Tag tunggal
Format : <nama_elemen>
 Tag yang disertai attribut
Format : <nama_elemen nama_attribut=argumen> teks </nama_elemen>
Atribut adalah properti dari suatu elemen HTML

2.1.1 HEAD

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian
head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian
head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
 Menyediakan judul dokumen
 Menjembatani hubungan antar dokumen
 Memberitahu browser untuk membuat form pencarian
 Menyediakan metode untuk mengirim pesan ke tipe browser

Modul Pemrograman Web 1


10
endarnirmala@gmail.com

Elemen yang mungkin terdapat pada bagian head :

 Tag <TITLE>, digunakan untuk memberi judul dokumen.


Bentuk umumnya : <TITLE> Judul </TITLE>
 Tag <BASE>, digunakan untuk menentukan basis URL sebuah dokumen.
Bentuk umumnya : <BASE HREF=”URL”>
Contoh : <BASE HREF=”//www.alamat.com/direktori”>
 Tag <LINK>, digunakan untuk menunjukkan relasi antar dokumen HTML.
 Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar
HTML.

Penggunaan elemen <META> yang paling populer adalah penggunaan properti


Keyword dan Description. Kedua properti ini sangat berguna untuk membantu
kerja search engine. Biasanya search engine akan menggunakan teks yang
disebutkan pada properti Keyword untuk mengindeks dokumen dan
menggunakan teks yang terdapat pada properti Description untuk
mendeskripsikan indeks tersebut.

2.1.2 BODY

Berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam
web page. Bentuk Umum :

<body bgcolor=”……” background=”….”>

Bgcolor  latar belakang : warna Background  latar belakang: gambar

2.2 Format Dokumen HTML

 <BR> : membuat baris baru, tidak memerlukan penutup </BR>


 <P align= left|right|center |justify> : memulai paragaraf baru, tidak
memerlukan penutup </P>
 <HR align=left|right|center width = ... size = ... noshade color = ... >
 <Hn> : heading sebuah dokumen, nilai n berkisar antara 1 hingga 6.

Modul Pemrograman Web 1


11
endarnirmala@gmail.com

 <PRE> : membuat tampilan dokumen HTML pada browser sama dengan


tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR>
tidak diperlukan lagi.
 <BLOCKQUOTE> : membuat tampilan menjorok ke dalam seperti identasi.
Bentuk umum : <blcokquote> .... </blockquote>

Latihan 1

<html>
<head>
<title>The Cool Web Movie Database</title>
</head>
<body>
Welcome to the Cool Web Movie Database. So far we
offer<br>
information on the many brilliant films of David
Lean:<br>
soon, a lot more will be online.
<hr width=75% size=3 color="blue" align=left>
<h1>Films with Sam Spiegel Productions</h1>
<h2>The Bridge on the River Kwai (1957)</h2>
<p>Produced by Sam Spiegel, this film was the first of
the Lean blockbuster movies, and featured a young Alec
Guinness, William Holden, and a brilliant performance
from Sessue Hayakawa.
<h3>Lawrence of Arabia (1962)</h3>
One of my all-time favorite movies, this epic
adventure starring Peter O’Toole established Lean as
a director who could truly envision film on a grand
scale.
<hr>
<h4>The Later Years</h4>
<h5>Doctor Zhivago (1965)</h5>
<h6>Ryan’s Daughter (1970)</h6>
<hr>
This information maintained by Dave Taylor
</body>
</html>

Modul Pemrograman Web 1


12
endarnirmala@gmail.com

Tampilan pada browser :

Latihan 2

<html>
<head>
<title>Penggunaan Pre</title>
</head>
<body bgcolor="cyan">
<h2>Ini adalah awal dari suatu paragraph lho</h2>
<p>Kalo ini adalah paragraph kedua.
<p>Nah ini nih paragrap terakhir.
<p align="left">
Teks dengan Align="left" akan diratakan pada margin
kiri.
<p align="center">

Modul Pemrograman Web 1


13
endarnirmala@gmail.com

Teks dengan Align="center" akan diratakan pada margin


tengah.
<p align="right">
Teks dengan Align="right" akan diratakan pada margin
kanan.
<pre>
Teks ini mempergunakan s p a s i dan juga tombol ENTER
untuk
berpindah ke baris ini.

Asisten Status
=======================
Frans Single
Budi Single juga
Riyo Double, lho?
Chandra duda, he he he...
</pre>
</body>
</html>

Tampilan pada browser

Modul Pemrograman Web 1


14
endarnirmala@gmail.com

Latihan 3

 Buatlah halaman web dengan tampilan sebagai berikut :

 Simpan dengan nama : home.html

Modul Pemrograman Web 1


15
endarnirmala@gmail.com

BAB III FORMAT TEKS DAN KARAKTER KHUSUS

3.1 Format Teks

 Font, HTML menyediakan elemen <FONT> yang dapat dipakai untuk


mengubah ukuran, jenis, dan warna suatu teks.

<font face=” ... ” size=n color=” ...” > ……


</font>
Face : jenis huruf
Size : ukuran huruf yang memiliki nilai dari 1 hingga 7.
Nilai 1 digunakan untuk membuat ukuran terkecil, sedangkan nilai 7
adalah ukuran terbesar. Nilai default dari ukuran standar teks adalah 3.
Default standar ukuran teks dapat diubah dengan menggunakan tag
<BASEFONT>
Color : warna

 <b> : menebalkan teks


 <strong> : menebalkan teks
 <em> : menekankan teks
 <i> : memiringkan teks
 <small> : memperkecil ukuran teks
 <big> : memperbesar ukuran teks
 <sub> : teks dijadikan subscript
 <sup> : teks dijadikan supercript
 <u> : membuat garis bawah
 <s> : mencoret teks

3.2 Karakter Khusus

 © : Copyright bentuk umum : &copy;


 ® : Registered trademark bentuk umum : &reg;
 ™ : Trademark bentuk umum : &#8482;
 & : Ampersand bentuk umum : &amp;
 : Non breaking space bentuk umum : &nbsp
 « : angle quotation mark (left) bentuk umum : &laquo;
 » : angle quotation mark (right) bentuk umum : &raquo;

Modul Pemrograman Web 1


16
endarnirmala@gmail.com

 ¨ : tanda kutip bentuk umum : &quot;


 < : lebih kecil bentuk umum : &lt;
 > : lebih besar bentuk umum : &gt;
 x : tanda kali bentuk umum : &times;
 ÷ : tanda bagi bentuk umum : &divide;

Latihan 1

<html>
<head>
<title>FONTSIZE terhadap BASEFONT</title>
</head>
<body>
<basefont size=3>
<font size=5>size=5</font>
<br><font size=-3 color="blue">teks dengan size=-
3</font>
<br><font face="arial black" size=-2>teks dengan size=
-2</font>
<br><center><font face="comic sans ms" color="red"
size=-1>teks dengan size=-1</font></center>
<br><font size=+1>teks dengan size=+1</font>
<br><font size=+2>teks dengan size=+2</font>
<br><font size=+3>teks dengan size=+3</font>
</body>
</html>

Latihan 2

<html>
<head>
<title>Karakter Khusus</title>
</head>
<pre>
Tag &lt;B&gt;...&lt;/B&gt;
<b>menebalkan</b> teks
Tag &lt;I&gt;...&lt;/I&gt; membuat teks
terlihat miring <i>miring</i>
Tag &lt;U&gt;...&lt;/U&gt; <u>menggaris
bawahi</u> teks
Tag &lt;S&gt;...&lt;/S&gt; memberikan
coretan <s>coretan</s> pada teks
Tag &lt;Strike&gt;...&lt;/Strike&gt; memberikan
<STRIKE>Coretan</strike> sama seperti elemen &lt;S&gt;

Modul Pemrograman Web 1


17
endarnirmala@gmail.com

Tag &lt;BLINK&gt;...&lt;/BLINK&gt; membuat teks


<blink>berkedip</blink>
Tag &lt;TT&gt;...&lt;/TT&gt; menampilkan teks
dalam font <TT>Typewriter</tt>
Tag &lt;Big&gt;...&lt;/Big&gt;
<big>membesarkan</big> teks
Tag &lt;SMALL&gt;...&lt;/SMALL&gt;
<small>mengecilkan</small> teks
Tag &lt;SUB&gt;...&lt;/SUB&gt; membuat teks
<sub>subscript</sub>
Tag &lt;SUP&gt;...&lt;/SUP&gt; membuat teks
<sup>supercript</sup>

Tag &lt;DFN&gt;...&lt;/DFN&gt; menandai suatu


<dfn>definisi</dfn>
Tag &lt;EM&gt;...&lt;/EM&gt; menandai suatu
<em>penekanan</em> teks
Tag &lt;CODE&gt;...&lt;/CODE&gt; <font
size="4">menyatakan suatu <code>kode
program</code></font>
Tag &lt;KBD&gt;...&lt;/KBD&gt; menyatakan
<kbd>suatu keyboard</kbd>
Tag &lt;VAR&gt;...&lt;/VAR&gt; menyatakan
suatu <var>variabel</var>
Tag &lt;STRONG&gt;...&lt;/STRONG&gt;
<strong>menyatakan teks dengan penekanan yang
kuat</strong>
Tag &lt;!--&gt; membuat suatu komentar
atau keterangan

</body>
</html>

Modul Pemrograman Web 1


18
endarnirmala@gmail.com

Latihan 3

 Buatlah halaman web dengan tampilan sebagai berikut :

 Simpan dengan nama : relion.html

Modul Pemrograman Web 1


19
endarnirmala@gmail.com

BAB IV MENYISIPKAN GAMBAR, SUARA DAN VIDEO

4.1. Menyisipkan Gambar

Format gambar yang dapat ditampilkan dalam dokumen HTML diantaranya GIF,
JPEG, PCX, PNG, WMF, dan BMP, namun yang hanpir sering dikenal disemua
browser adalah GIF dan JPG.

<img src=” ... ” width= “...” height =” ...”


Alt=” … “ align=” …”>

src : nama file gambar


Height : tinggi gambar
Width : lebar gambar
Align : mengatur letak image terhadap teks
(top| bottom| middle| left| right|center)
Alt : menampilkan teks pada saat image tidak dapat tampil

4.2 Menyisipkan Suara

Menyisipkan suara pada halaman web dapat menggunakan embed atau bgsound.
Format suara yang dapat disisipkan diantaranya : .wav, .mid, .mp3, dan .au.

<embed src="filename.ext" width="x" height="x"


autoplay="x" hidden="x" loop="x"
volume="x"></embed>

Contoh :
<embed src="music/davesite.mp3" loop="true" autoplay="false"
width="145" height="60"></embed>

Jika ingin memutar file secara otomatis saat halaman web di-load, set autoplay =
"true", jika tidak ingin file tersebut diputar secara otomatis, set autoplay = "false".
Jika ingin kotak kontrol disembunyikan, gunakan atribut hidden= "true". Biasanya
file tersebut akan berhenti bermain setelah selesai, jika ingin diputar secara terus
menerus atribut loop = "true". Volume dapat disetting dengan atribut volume,

Modul Pemrograman Web 1


20
endarnirmala@gmail.com

nilai dari 1 hingga 100 (default adalah 50). Kotak mengontrol ukuran yang
memainkan suara dapat bervariasi dari browser ke browser, tetapi beberapa versi
dari Netscape tidak akan menampilkan kotak kecuali ditentukan. (145 dan 60
biasanya baik).

<bgsound src="" loop="">

Contoh :
<BGSOUND SRC="mother.mid" LOOP=5>

Pada beberapa browser bgsound tidak dapat bekerja.

4.3 Menyisipkan Video

<embed src="... " width="..." height="..."


type=”...”>

Contoh :

<embed src="helloworld.swf" type="application/x-shockwave-flash" width="200"


height="200">

Modul Pemrograman Web 1


21
endarnirmala@gmail.com

BAB V HYPERLINK

Kelebihan utama dari HTML adalah kemampuannya untuk memberikan link dari
satu teks/gambar menuju dokumen lain atau bagian lain dalam suatu dokumen.
Ada empat jenis link :

1. Link relative
Membuat link dari satu page ke page yang lain pada komputer yang sama.

<a href=”nama file”> ….. </a>

Contoh :

<a href=”perpustakaan.html”>perpustakaan</a>

2. Link absolute
Membuat link ke page web lain yang berada pada web site lain di Internet.

<a href=”alamat web site”> …. </a>

Contoh :

<a href=www.google.com>Google</a>

3. Link dalam dokumen yang sama :


Link jenis ini dibuat apabila dokumen panjang, sehingga apabila
ditampilkan dalam bowser web mengharuskan untuk melakukan scroll
layer berulang-ulang. Navigasi untuk memudahkan penelusuran dokumen
dengan membuat link antar bagian dengan memberinya nama.
<a href=”#nama bagian”> ……. </a>

Contoh :

<a href=”#pengenalan”>Pengenalan</a>
…………
…………
<a name=”pengenalan”>
…………
</a>

Modul Pemrograman Web 1


22
endarnirmala@gmail.com

4. Link Email
Link pada suatu pesan email.

<a href=”mailto:alamat email”>…..</a>

Contoh :

<a href=”mailto:endar_nirmala@yahoo.com”>kirim
email</a>

Latihan 1

<HTML>
<HEAD>
<TITLE> Contoh Hyperlink </TITLE>
</HEAD>
<BODY>
<pre>
<hr color="blue" size=3 width=50% align="left"><font
size= 4 color="red"><a href="home.html">Home</a> |
<a href="profil.html">Profil</a> | <a
href="about.html">About</a> | <a
href="galery.html">Gallery</a> | <a
href="kontak.html">Kontak</a></font>
<hr color="blue" size=3 width=50% align="left">
<font size=3>Selamat datang di halaman webku...
Terimakasih anda telah berkunjung, jika anda
ingin mencari saya dapat searching ke <a
href="http://www.google.com">google</a>
Jika anda memiliki kesulitan dapat menghubungi
saya by <a
href="mailto:endarnirmala.gmail.com">email</a>
</font>
</pre>
</BODY>
</HTML>

Latih 2

 Lengkapi halaman web diatas sehingga saling terhubung antara halaman yang
satu dengan halaman yang lain.
 Simpan halaman web sesuai dengan nama linknya, misalnya about.html,
profil.html, galery.html, dan kontak.html

Modul Pemrograman Web 1


23
endarnirmala@gmail.com

 Carilah Domain dan Hosting gratis (searching di Internet)


 Buatlah Domain untuk alamat web anda dan cobalah lakukan hosting
(langkah-langkah pembuatan dan hosting cari di Internet, jika ada masalah
diskusikan dengan teman atau Dosen anda)
 Kirimkan alamat web anda melalui email ke dosen anda.

Modul Pemrograman Web 1


24
endarnirmala@gmail.com

BAB VI LIST

Tag List dalam dokumen HTML terdiri dari beberapa macam, diantaranya :
 List dengan nomor (ordered list)

<ol type=”I|i|A|a|1”>
<li> ... </li>
<li> ... </li>
dst
</ol>

 List tanpa nomor menggunakan bullet (unordered list)

<ul type= ”circle|square|disc ”>


<li> ... </li>
<li> ... </li>
dst
</ul>

 Menu List (Daftar Menu)


Merupakan daftar item yang pendek dan tidak disertai dengan nomor ataupun
penanda item. Menu list menggunakan tag awal <MENU> dan tag akhir
</MENU>, dengan setiap item di dalamnya menggunakan <LI>.

<menu>
<li> …… </li>
<li> …… </li>
</menu>

 Definition List <DL>

<dl>
<dt> ... </dt>
<dd> .............. </dd>
<dt> ... </dt>
<dd> .............. </dd>
</dl>

Modul Pemrograman Web 1


25
endarnirmala@gmail.com

Latihan 1

<html>
<head><title>Using List</title></head>
<body>
<font size="5">Common Foods of the French
Quarter</font><br>
You can visit <font size="+1">New Orleans</font> and
have a
great time without ever leaving
the picturesque and partyin’ French Quarter area,
particularly if you partake of some of these
fabulous local foods:
<ul>
<li><font color="magenta">Beignets</font> - small deep-
fried
donuts in powdered sugar. Best with
a steaming fresh <font size="+2">cup of
coffee</font>.</li>
<li><font color="GREEN">Seafood Gumbo</font> - a stew-
like
soup that’s delicious.
Typically served with a side of white rice
that’s best dumped into the soup directly. Skip the
chicken gumbo some
places serve too: the seafood is definitely
better!</li>
<li><font color="ORANGE" size="+2">Jambalaya</font> -
the best
of all possible dinners. You’ll just have
to order it so you can find out what it’s about.</li>
<li><font size="5" color="BLUE">alcohol</font> - it’s
the
grease on the wheels of the tourist experience in the
French Quarter, but I’m not convinced it’s as necessary
for a good time as the bars suggest... </li>
</ul>
Whatever you do, make sure you have <font
size="+1">F</font><font size="+2">U</font>
<font size="+3">N</font>!
<dl>
<dt>Komputer</dt>
<dd>
Komputer adalah seperangkat alat elektornik yang
bekerja
secara otomatis mempunyai internal storage dan untuk
melakukan poses data</dd>
<dt>Software</dt>

Modul Pemrograman Web 1


26
endarnirmala@gmail.com

<dd>Software merupakan kumpulan dari perintah-


perintah yang digunakan untuk melakukan proses sesuai
dengan perintah yang diberikan dan sesuai dengan bahasa
pemrograman yang digunakan.</dd>
</dl>
</body>
</html>

Latihan 2

<html>
<head>
<title>The Cool Web Movie Database</title>
</head>
<body>
<font color="navy" size=4>Welcome to the Cool Web Movie
Database.</font><br>
So far we offer information on the many brilliant films
of David Lean: soon, a lot more will be online.
<ol type="A">
<li>Films with Sam Spiegel Productions</li>
<li>The Bridge on the River Kwai (1957)</li>
<li>Lawrence of Arabia (1962)</li>
<li>The Later Years</li>
<li>Doctor Zhivago (1965)</li>
<li>Ryan’s Daughter (1970)</li>
</ol>
<blockquote>
This information maintained by Dave Taylor
</blockquote>

The ingredients:
<ul type="circle">
<li>100 g. flour</li>
<li>10 g. sugar</li>
<li>1 cup water</li>
<li>2 eggs</li>
<li>salt, pepper</li>
</ul>
The procedure:
<ol type="1">
<li>Mix dry ingredients thoroughly.</li>
<li>Pour in wet ingredients.</li>
<li>Mix for 10 minutes.</li>
<li>Bake for one hour at 300 degrees.</li>
</ol>
</body>
</html>

Modul Pemrograman Web 1


27
endarnirmala@gmail.com

Latihan 3

 Buatlah tampilan halaman web seperti dibawah ini

 Simpan dengan nama komponen.html

Modul Pemrograman Web 1


28
endarnirmala@gmail.com

BAB VII TABEL

Tag <table> digunakan untuk membuat tabel dalam dokumen HTML, bagian
pokok dari tabel adalah sel. Elemen tabel terdiri dari :
 Mendefinisikan tabel :

<table border=”n” cellpadding=”n” cellspacing=”n“>


……….
</table>

Border : garis pada tabel ; n=0, 1, 2, .. dst


Cellpadding : spasi antar sel dan border
Cellspacing : jarak antar sel
 Mendefinisikan judul tabel, dalam keadaan default posisi ditengah bagian
paling atas tabel.

<caption align=”…”> … </caption>

 Menspesifikasikan sebuah baris.

<tr align=”…”> … </tr>

 Mendefinisikan sel header

<th> … </th>

 Mendefinisikan sebuah sel data

<td> … </td>

Atribut tabel :
Align = {left | center | right }  alignment horizontal untuk sel
Valign = {top | middle | bottom }  alignment vertical dalam sel
Colspan = n  menggabungkan beberapa kolom
Rowspan = n  menggabungkan beberapa baris
Secara default letak tabel berada di sebelah kiri layar monitor, namun bisa diatur
sesuai dengan keinginan dengan menambahkan perintah <div align=” “ > diatas
tag <tabel> dan ditutup dengan </div> dibawah tag </tabel>

Modul Pemrograman Web 1


29
endarnirmala@gmail.com

Latihan 1 :

<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<div align="center">
<table border="2" width="450">
<tr>
<td colspan="3" bgcolor="#FF9900">Kolom 1+2+3 jadi satu
</td>
</tr>
<tr>
<td rowspan="2">Kolom 1A<br>+Kolom 1B</td>
<td>Kolom 2A</td>
<td rowspan="2">Kolom 3A<br>+Kolom 3B</td>
</tr>
<tr>
<td width=100 height=137>
<img title="myPerform" src="perform4.gif" width=250
height=250 alt="myPicture">
</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</div>
</body>
</html>

Modul Pemrograman Web 1


30
endarnirmala@gmail.com

Tampilan browser :

Latihan 2

<html>
<head>
<title>Penggunaan Tabel Dalam HTML</title>
</head>
<body>
<table border="1" width="70%" >
<caption>BIODATA SISWA</caption>
<tr>
<th width="15%">Nama</th>
<th width="16%">Alamat</th>
<th width="9%" align="center">Telepon</th>
</tr>
<tr>
<td width="15%" rowspan="3">Angga Kusuma</td>
<td width="16%" rowspan="3">&nbsp;Jl. Karbela 2,
Jakarta</td>
<td width="13%" align="center">021 - 55667788</td>
</tr>
<tr>
<td width="13%" align="center">08131445689</td>
</tr>

Modul Pemrograman Web 1


31
endarnirmala@gmail.com

<tr>
<td width="13%" align="center">021 - 56788901</td>
</tr>
<tr>
<td width="15%" rowspan="3">Wirastuti Wiraguna</td>
<td width="16%" rowspan="3">&nbsp;Jl. Permata&nbsp;
5, Jakarta</td>
<td width="13%" align="center">021 - 76456982</td>
</tr>
<tr>
<td width="13%" align="center">08183457298</td>
</tr>
<tr>
<td width="13%" align="center">021 - 66543881</td>
</tr>
</table>
</body>
</html>

Tampilan Browser :

Modul Pemrograman Web 1


32
endarnirmala@gmail.com

BAB VIII FORM

Form merupakan elemen HTML yang digunakan untuk :

 Memperoleh feedback dari pengguna web


 Memperoleh informasi pembelian secara online
 Memperoleh data-data user baik nama, alamat, dan data lainya untuk
mendaftar pada service yang disediakan

<form action=”url” method=”get | post”>


………
………
</form>

url : lokasi file yang akan melakukan proses terhadap input dari form
method : menyatakan bagaimana masukan-masukan berasal dari form di
kirimkan kepada program CGI

Jenis masukan dalam Form :

 Text : nilai yang dimasukkan dapat berupa angka atau teks

<input type=”text” name=”var1” size=n


maxlength=n>

Value pada size menunjukkan besar text box


Value pada maxlength menunjukkan jumlah karakter maksimum yang dapat
ditampung.

 Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.

<input type=”radio” name=”var1”> pilihan 1


<input type=”radio” name=”var2”> pilihan 2
<input type=”radio” name=”var3”> pilihan 3

 Checkbox : menyediakan beberapa pilihan, dapat lebih dari satu pilihan

<input type=”checkbox” name=”var1”


checked>pilihan 1
<input type=”checkbox” name=”var2”>pilihan 2
 <input
List type=”checkbox”
atau Dropdown name=”var3”>pilihan
box : menyediakan pilihan dalam bentuk list.3

Modul Pemrograman Web 1


33
endarnirmala@gmail.com

<select name=”var” size=n>


<option value=”… ”>pilihan 1
<option value=” … ”>pilihan 2
<option value= “ … “
selected>pilihan 3
</select>

 Textarea : memasukkan data dalam bentuk teks berupa memo.

<textarea name=”var” cols=”n” rows=”n”> …


</textarea>

Cols : besar kolom


Rows : banyaknya baris

 Button : digunakan untuk melakukan pemrosesan form, sehingga membuat


form lebih interaktif. Pada saat button ditekan script yang ada dalam file lain
akan dipanggil untuk melakukan proses selanjutnya. Tombol button terdiri
dari : submit dan reset.

<input type=”submit” value=” … “>


<input type=”reset” value=” … “>

Latihan 1

<html>
<head><title>Latihan Dengan Objek Text</title></head>
<body>
<!--NIM, NAMA, JENIS KELAMIN, AGAMA, STATUS, JURUSAN,
KOMENTAR.-->
<form>
<H1> Form Pendaftaran</H1><hr>
<PRE>
NIM : <input type="text" size="11" name="nim">

NAMA : <input type="text" size="25" name="nama">

JENIS KELAMIN : <input type="radio" name="jkel"


value="Pria">Pria <input type="radio" name="jkel"
value="Wanita">Wanita

Modul Pemrograman Web 1


34
endarnirmala@gmail.com

AGAMA : <select name=agama>


<option value="Islam">Islam</option>
<option
value="Katoholik">Katholik</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>

STATUS : <input type="radio" name="status"


value="kawin">Kawin <input type="radio" name="status"
value="belumkawin">Belum Kawin

JURUSAN : <select name="jurusan" Size="1">


<option value ="Teknik Informatika">
Teknik Informatika </option>
<option value ="Manajemen Informatika">
Manajemen Informatika </option>
<option value ="Teknik Komputer"> Teknik
Komputer </option>
<option value ="Teknik Industri"> Teknik
Industri </option>
<option value ="Teknik Elektro"> Teknik
Elektro </option>
<option value ="Teknik Sipil"> Teknik
Sipil </option>
<option value ="Teknik Arsitektur">
Teknik Arsitektur </option>
<option value ="Teknik Perencanaan Wil.
Kota "> Perencanaan Wil. Kota </option>
</select>

KETERANGAN:
<textarea name="ket" rows="3"
cols="30"></textarea>
</PRE>
<BR>
<input type="button" value="kirim">
<input type="reset" value="ulang">
</form>
</body>
</html>

Modul Pemrograman Web 1


35
endarnirmala@gmail.com

Tampilan Browser :

Modul Pemrograman Web 1


36
endarnirmala@gmail.com

Latihan 2

 Buatlah form dengan tampilan seperti dibawah ini, gunakan fasilitas tabel
agar tampilan rapi

Modul Pemrograman Web 1


37
endarnirmala@gmail.com

BAB IX FRAME

Frame dapat membagi tampilan window menjadi beberapa bagian berdasarkan


baris atau kolom.

<frameset border=n rows|cols = ”..%, ...%,


dst”>
<frame src=”url” name=”name frame”>
</frameset>

Dokumen yang berisi frame tidak boleh menggunakan elemen BODY digantikan
oleh elemen FRAMESET yang menyatakan bahwa isi dokumen tersebut
mengandung suatu frame . Struktur dasar dokumen HTML dengan frame sebagai
berikut :
<html>

<head>

--- bagian head ---

</head>

<frameset>

FRAMESET mempunyai 2 buah atribut, yaitu ROWS (membagi jendela


browser menjadi beberapa baris frame) dan COLS (membagi jendela browser
menjadi beberapa kolom frame). Misalnya jika kita ingin membuat 3 buah baris
frame di mana tiap frame tingginya adalah 100, 150, dan 200 pixel, maka kode
HTML untuk membuat frame ini adalah : <FRAMESET ROWS = “100, 150,
200”>. Cara lain untuk menyatakan ukuran baris dan kolom suatu frame adalah
dengan menggunakan % dan nilai relative.
Contoh 1 : <FRAMESET ROWS =”25%, 25%, 50%”>
Contoh 2 : <FRAMESET ROWS =”*, 3*, *”>

Modul Pemrograman Web 1


38
endarnirmala@gmail.com

Latihan 1 :

<HTML>
<HEAD>
<TITLE> Membuat Frame berdasarkan baris </TITLE>
</HEAD>
<frameset rows="25%,65%,10%">
<frame src="header.html">
<frameset cols="15%, 85%">
<frame src="menu.html">
<frame src="home.html">
</frameset>
<frame src="footer.html">
</frameset>
</HTML>

Simpan dengan nama: index.html

 Buat halaman menu

<HTML>
<HEAD>
<TITLE>Contoh Membuat Hyperlink</TITLE>
</HEAD>
<BODY>
<font color="navy" size="4">Menu </font>
<font color="sienna" size="4">
<ul type="square">
<li><a href="home.html" target="kiri">Home</a></li>
<li><a href="profil.html"
target="kiri">Profil</a></li>
<li><a href="galery.html"
target="kiri">Gallery</a></li>
<li><a href="kontak.html"
target="kiri">Kontak</a></li>
</ul></font>
</BODY>
</HTML>

Simpan dengan nama menu.html

Modul Pemrograman Web 1


39
endarnirmala@gmail.com

 Buat halaman home

<HTML>
<HEAD>
<TITLE> Halaman Utama </TITLE>
</HEAD>
<BODY>
<font color="blue"><h1>Programming WEB dengan
HTML</h1></font>
<font color="brown"><h2><blink>Teknologi
Informatika</blink></h2></font>
<hr size=3 color="blue">
<font size=6 color="magenta"><marquee
behavior="scroll" direction="up" height=40
scrollamount="1">Selamat datang pada halaman website
kami....</marquee></font><br>
<p align="justify"><font size=5>Terimakasih anda telah
bergabung dan berkunjung pada situs kami, kami
berharap anda memperoleh informasi yang anda inginkan
dan anda cari.</p>
<p>Situs ini berisi informasi sekitar materi yang
berhubungan dengan programming web, diantaranya :
HTML, CSS, PHP, MySql dan materi atau artikel lain
sekitar web. </p></font>
</BODY>
</HTML>

Simpan dengan nama home.html

 Buatlah halaman profil

<HTML>
<HEAD>
<TITLE> Halaman Profil </TITLE>
</HEAD>

<BODY>

<font size=4 color="blue">


<b><p>Hypertext Markup Language yang sering disebut
HTML merupakan dasar pemrograman dalam membuat
website. Sebaiknya sebelum anda menggunakan template,
CMS atau fitur-fitur lain untuk membuat sebuah
website, saya sarankan anda untuk belajar HTML
terlebih dulu.</b></p> Dengan memahami perintah HTML
anda dapat memperbaiki template atau CMS atau fitur
lain dengan mudah.<b><i>HTML, CSS, PHP dan
MySql</i></b>. Seiring dengan perkembangan teknologi,

Modul Pemrograman Web 1


40
endarnirmala@gmail.com

maka begitu banyak fasilitas yang disediakan untuk


mempermudah dalam pembuatan website. <b><u>Web site
builder, CMS, Template dan lain-lain merupakan
fasilitas untuk mempermudah pembuatan website.
</u></b><br>
<center><img src="image/img1.jpg"></center>
<p>Saat ini P4TK Bisnis dan Pariwisata mulai mencoba
untuk membuat diklat jarak jauh yang dapat dijangkau
oleh siapapun, dimanapun tanpa dibatasi oleh jarak dan
waktu dengan menggunakan fasilitas Open Source yang
biasa disebut Open Distance Learning.
</BODY>
</HTML>

Simpan dengan nama profil.html

 Buat halaman galery

<HTML>
<HEAD>
<TITLE> Halaman Galery </TITLE></head>
<body>
<pre>
<img src="image/me1.jpg" width=250 height=200> <img
src="image/me2.jpg" width=250 height=200> <img
src="image/me3.gif" width=170 height=200>
<img src="image/perform6.gif" width=170 height=200>
</pre>
</BODY>
</HTML>

Simpan dengan nama galery.html

 Buat halaman kontak

<HTML>
<HEAD>
<TITLE> Halaman Galery </TITLE>
</HEAD>
<BODY>
<pre>
<font color="purple" size=5>
Universitas Pamulang
Jl. Surya Kencana No.1 Pamulang-Tangerang Selatan
Website : www.unpam.ac.id
Email : info@unpam.ac.id
Telp : 021 - 7412566
Fax : 021 - 7412566</font></pre>

Modul Pemrograman Web 1


41
endarnirmala@gmail.com

</BODY>
</HTML>

Simpan dengan nama kontak.html


Jalankan file index.html dan pastikan tampilan browser sebagai berikut :

Modul Pemrograman Web 1


42
endarnirmala@gmail.com

BAB X CASCADING STYLE SHEET (CSS)

10.1. Penulisan CSS

Style sheet merupakan fasilitas HTML yang memungkinkan kita untuk


memisahkan style dan layout dokumen HTML sebenarnya. Dengan adanya
kemampuan ini kita tidak perlu menyentuh setiap baris HTML lagi jika ingin
melakukan perubahan layout pada dokumen, kita cukup mengubah definisi style
sheet atau membuat style sheet baru.

CSS merupakan kumpulan dari style yang dikelola secara terpisah dengan demikian
manajemen pages menjadi lebih mudah dan efisien. Aturan penggunaan CSS disusun
oleh tiga bagian yaitu : selector (elemen yang akan didefinisikan), property (atribut yang
akan diubah) dan nilai.

Selector {property: value}

Beberapa attribute style sheet


 Font-size
Atribut font-size digunakan untuk menentukan teks dalam satuan poin, inci,
cm, pixel, atau presentase. Nilai-nilai lain yang dapat digunakan adalah xx-
small, x-small, medium, large, x-large, dan xx-large.
Contoh : {font-size: x-large}
 Font-family
Atribut ini digunakan untuk menentukan jenis font (typeface) suatu teks,
seperti {font-family: Arial, Sans-Serif}. Sans-Serif akan menggantikan Arial
jika system yang digunakan tidak mendukung Arial. Jika typeface terdiri dari
beberapa kata, tambahkan tanda petik untuk nama typeface.
Seperti {font-family: “Times New Roman”, “Courier New”}
 Font-weight
Atribut font-weight menyatakan ketebalan suatu jenis font. Misalnya {font-
weight : medium}. Nilai-nilai yang bisa digunakan adalah bold, light,
bolder, lighter, medium, demi-bold, demi-light, extra-bold, dan extra-light.

Modul Pemrograman Web 1


43
endarnirmala@gmail.com

 Font-style
Atribut ini digunakan untuk menentukan style suatu teks. Beberapa nilai
untuk attribute ini adalah normal (default), italic, dan small-caps.
Contoh : {font-style : italic}
 Font
Atribut-atribut font di atas dapat dinyatakan sebagai berikut :
H1 {font-family: arial;
Font-size: 50 px;
Font-weight: bold;
Font-style: italic}
Penulisan ini dapat diganti menjadi :
H1 {font: Arial 50px bold italic}.
 Text-align
Atribut ini digunakan untuk mengatur peralatan teks. Nilai-nilai yang tersedia
adalah left, right, center, dan justify. Contoh: {text-align: left}.
• Margin-left, Margin-right, Margin-top, dan Margin-bottom
Satuan margin dinyatakan dalam poin, inci, atau pixel.
Contoh :
{margin-top : 10px;
Margin-right: -5px;
Margin-bottom: 5px;
Margin-left: -5px}

10.2 Menggunakan Style sheet

Terdapat 3 cara untuk menggunakan style pada halaman web, yaitu : linking,
embedding, dan inline.

• Linking
Linking merupakan metode menggunakan style sheet dengan cara membuat
suatu link pada file di mana style tersebut berada. Untuk membuat link ke
suatu style sheet, cukup dilakukan dengan membuat suatu file yang berisi
definisi-definisi style dan kemudian menyimpannya dengan ekstensi file “.css”
serta menghubungkan halaman web ke URL dari file tersebut. Misalnya file

Modul Pemrograman Web 1


44
endarnirmala@gmail.com

style sheet mempunyai nama “style2.css” sedangkan URL dari file tersebut
berada pada http://www.stylesheet.com/style2.css”, maka pada bagian
<HEAD> perlu menambahkan kode HTML sebagai berikut :

<LINK REL=STYLESHEET
HREF=http://www.stylesheet.com/style2.css
TYPE=”text/css”>

• Embedding
Embedding merupakan metode menggunakan style sheet dengan meletakkan
definisi style sheet di bagian atas dokumen sebelum bagian <BODY>.
Metode ini dilakukan dengan menggunakan pasangan tag <style> … </style>
yang diletakkan di antara bagian <HTML> dan <BODY>

<html>
<head>
<title>Style Sheet</title>
<style>
< ! –
BODY {font-family : Arial; font-size : 10pt,
color : black}
H1 H2 {font: Arial 16 pt medium, color: red}
P {font: Arial; font-style: italic}
-- >
</style></head>
<body>
….
</body>
</html>

• Inline
Inline merupakan metode menggunakan style sheet dengan memberikan
secara langsung suatu style pada suatu tag atau sekumpulan tag.
Contoh : <H1 STYLE=”color:blue”> Heading 1 </h1>

Modul Pemrograman Web 1


45
endarnirmala@gmail.com

10.3 Menggunakan Atribut CLASS

CLASS dapat digunakan untuk membuat bermacam-macam variasi pada definisi


style dari suatu elemen. Misalnya, paragraf tebal dengan identasi 15pt dan
paragraf miring dengan identasi 45pt, maka definisi style tersebut :
P.tebal {font-family : Arial; font-weight : bold; text-indent : 15pt}
P.miring {font-family : Arial; font-weight : italic; text-indent : 45pt}

Contoh :

<html>
<head>
<title>STYLE SHEET</title>
<style>
<! - -
p.tebal {font-family : Arial; font-weight : bold;
text-indent : 15pt}
p.miring {font-family : Arial; font-weight :
italic; text-indent : 45pt}
- - >
</style>
</head>
<body>
<p class=”tebal”>Teks dalam paragraph ini
terlihat tebal dengan identasi 15 pt.
<p class=”miring”>Teks dalam paragraph ini
terlihat tebal dengan identasi 45 pt.
</body>
</html>

Beberapa contoh penggunaan style sheet :

Contoh 1:

P
{
Text-align: center;
Color: blue;
Font-family: arial
}

Modul Pemrograman Web 1


46
endarnirmala@gmail.com

Contoh 2:

h1, h2, h3, h4, h5, h6


{
Color: green;
}

Contoh style sheet external:

Body {background-color: yellow}


H1 {font-size: 36 pt}
H2 {color: blue}
P {margin-left: 50px}

Simpan dengan nama : style1.css

Latihan 1:

<html>
<head>
<style type="text/css">
body
{
background-image: url('myflower.gif');
background-repeat:repeat-y;
}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify; font-size: 125%; color:
red;}
</style>
</head>

<body>
<h1>Penggunaan Align pada CSS</h1>
<p class="date">Oktober, 2010</p>
<p class="main">Ketika saya masih terlalu muda dan
masih sangat rentan, ayah saya memberi nasihat "apabila
kamu dikritik oleh seseorang ingatlah bahwa semua orang
didunia tidak ada yang memiliki kelebihanmu ".
In my younger and more vulnerable years my father gave
me some advice that I've been turning over in my mind
ever since. 'Whenever you feel like criticizing
anyone,' he told me, just remember that all the people

Modul Pemrograman Web 1


47
endarnirmala@gmail.com

in this world haven't had the advantages that you've


had.'</p>
<p><b>Note:</b> Try to resize the browser window to see
how justify works.</p>
</body>

</html>

Latihan 2 :

 Buatlah file CSS dengan perintah seperti dibawah :

body {
color: #80c0c0;
background: black}
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
a.case1:link { background: green }
p:first-line { margin-left: 25px }
div.foo:first-line {
font-weight: bold;
margin-left: 30px }
div:first-letter {
font-size: x-large;
color: #ffffff }
ul ul li {
font-size: x-large;
font-decoration: italic }
h2 em { font-weight: 900 }
h2.ex1 {
color: green; /* This type of heading MUST
be Green and Large! */
line-height: 50px;
font-size: 40px }
.funkyclass {
font: 36pt/40pt courier;
font-variant: small-caps;
border: thick dashed blue }
#tagid1 {
padding: 20px;
border: 20px groove #ffffff }
.class1, #tagid2 { font-family: 'comic sans ms',
fantasy; color: rgb(100%,100%,0%) }
h1, h2, div.class5, blockquote { background: #000080 }
p.special {
font: 12pt/14pt sans-serif;
margin: 5px 0px 2px 25px;

Modul Pemrograman Web 1


48
endarnirmala@gmail.com

border: medium dashed #ff0000;


background: white url(http://www.foo.com/image.gif)
repeat-x fixed top right }
blockquote {
margin-left: 2cm;
color: #00ff00 }
.part1 {
font-size: xx-large;
color: #808000 }
h5 {
font-size: xx-small ! important;
color: red ! important }

Simpan dengan nama sytle.css

Latihan 3 :

 Buatlah file dibawah ini dengan menyisipkan file CSS yang dibuat tersendiri
diatas.

<html>
<head>
<title>Contoh CSS Link</title>
<link rel="stylesheet" TYPE="text/css"
href="style.css">
</head>

<body>
<h1 CLASS="funkyclass" ALIGN="center">Welcome to my
home page!</h1>
Hi there! If you are reading this then you have found
my home page! Congratulations! I know it can be hard
to find my pages, but I bet that you feel lucky now.
Now that you are here, please take a look at my page
of links to <a
HREF="http://www.mysite.com/coolsites.html">cool
sites</a> or sign my <a
HREF="http://www.mysite.com/guestbook.html">guest
book</a></p>
<div CLASS="foo"> My wonderful poetry <br> is
available if you are REALLY bored. Why not give it a
spin?</div>

<h2 CLASS="ex1"> The Best Poetry I <em>NEVER</em>


Wrote</h2>
<ul>
<li>'There Once Was A Man From Nantucket' - <span
CLASS="class1">Anonymous</span></li>

Modul Pemrograman Web 1


49
endarnirmala@gmail.com

<li>'Cool In Fur' - <span CLASS="class1">Harry B.


Foot</span></li>
<li>And My All Time Fave:
<ul>
<li> 'A Toast To My Toaster' - <span
CLASS="class1">Me!</span></li>
</ul>
</li></ul>

<blockquote>Brought to you by the letter <span


ID="tagid2">&quot;H&quot;</span> and <span
ID="tagid1">Joe Shmoe</span> </blockquote>

<div CLASS="class5"> When you are done looking through


these masterpieces, I encourage you to visit my proud
sponsor!! </div>

<p CLASS="special"><span
CLASS="funkyclass">ADVERTISEMENT:</span> Buy Navel
Lint Contemplator! Its a browser and its a sandwich
spread! Go to our <a
HREF="http://www.navellint.com">home page</a> without
delay! Why? Because shelf life is only 8 hours unless
refrigerated. We know that makes it hard to browse,
but it promotes frequent upgrading to the latest and
greatest version. </p>

<h5>All standard disclaimers apply. Your life depends


on NOT copying this document in any way. This tape
will <a HREF="http://www.mysite.com/selfdestruct.html"
CLASS="case1">self destruct</a> in 10 seconds...</h5>
</body>
</html>

Simpan dengan nama : csslink.html


Tampilan browser :

Modul Pemrograman Web 1


50
endarnirmala@gmail.com

 Buatlah halaman web dengan menggunakan CSS yang dibuat tersendiri

Modul Pemrograman Web 1


51
endarnirmala@gmail.com

BAB XI PENGENALAN JAVA SCRIPT

11.1 Penulisan Java Script

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya
berjalan pada suatu dokumen HTML. Bahasa ini adalah bahasa pemrograman
untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan
mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi
browser bukan di sisi server web.
Javascript bergantung kepada browser (navigator) yang memanggil halaman web
yang berisi skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML.
Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk
menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah
termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan
mana JavaScript selalu di bandingkan) yang memerlukan kompilator khusus
untuk menterjemahkannya di sisi user/klien.

Bentuk script dari Java Script :

<SCRIPT language="Javascript">
letakkan script anda disini
</SCRIPT>

Memberi komentar :
• menulis komentar dalam satu baris kita gunakan karakter dobel slash.
// semua karakter di belakang // tidak akan di
eksekusi
• menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /*
dan */
/* Semua baris antara 2 tanda tersebut tidak akan di
eksekusi oleh kompilator */

Modul Pemrograman Web 1


52
endarnirmala@gmail.com

Aturan penulisan syntax Java Script :


 Penyisipan Java Script dalam Head
<html>
<head><title>penulisan dalam head</title>
<script type=”teks/javascript”>
------
</script>
</head>
<body>
----
</body>
</html>

 Penyisipan Java Script dalam Body


<html>
<head><title>penulisan dalam Body</title>
</head>
<body>
<script type=”teks/javascript”>
------
</script>

----
</body>
</html>

 Penyisipan Java Script dalam Head dan Body


<html>
<head><title>penulisan dalam head dan body</title>
<script type=”teks/javascript”>
------
</script>
</head>
<body>
<script type=”teks/javascript”>
------
</script>

----
</body>
</html>

Modul Pemrograman Web 1


53
endarnirmala@gmail.com

 Penyisipan Java Script dalam bentuk File


<html>
<head><title>penulisan dalam bentuk File</title>
<script src=”xyz.js”>
</head>
<body>
----
</body>
</html>

11.2 Variabel

Variabel adalah tempat menyimpan data atau informasi yang bersifat sementara di
memory komputer. Variabel yang dideklarasikan dapat di isi dengan nilai apa
saja. Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya
anda boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. Jika
anda memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa anda
telah mendeklarasikan variabel tersebut.
Syarat membuat nama variabel :
• Harus diawali dengan karakter (huruf atau garis bawah)
• Tidak boleh menggunakan spasi
• Huruf Kapital dan kecil memiliki arti yang berbeda
• Tidak boleh menggunakan kata-kata yang merupakan reserved word.

Sintaks:
 cara 1, dengan pernyataan var
var nama_variabel = nilai
 cara 2, tanpa pernyataan var
nama_variabel = nilai
Latihan 1 :

<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var myFirstVariable;
myFirstVariable = "Hello";
alert(myFirstVariable);

Modul Pemrograman Web 1


54
endarnirmala@gmail.com

myFirstVariable = 54321;
alert(myFirstVariable);
var string1 = "Hai how a you ";
var string2 = "Goodbye";
string2=string1;
alert(string2);
document.write("Nilai dari string1 = ",string1,"<br>");
document.write("Nilai dari string2 = ",string2,"<br>");
string1 = "Now for something different";
alert(string1);
alert(string2);
document.write("Hasil string1 setelah diubah
",string1,"<br>");
document.write("Hasil string2 setelah diubah
",string2,"<br>");
</script>
</body>
</html>

11.3. Tipe Data

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data
secara explisit. Hal ini dapat dilihat dari beberapa contoh variabel diatas. Anda
mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun JavaScript
tidak memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit.

Terdapat empat macam tipe data implisit yang dimiliki oleh JavaScript yaitu :
• Numerik, seperti : 0454422531, 85000, 57, 9.146789 dan sebagainya
• String, seperti : “How are you”, “Kahitna”, “Jl. Rancamaya Blok 1 No. 7A”,
“Desember” dan sebagainya
• Boolean, bernilai true atau false
• Null, variabel yang tidak diinisilisasi

Tipe Numerik
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu
bilangan bulat (integer) dan bilangan pecahan(real/float). Untuk bilangan bulat
dapat dipresentasikan dengan basis desimal, oktal atau heksadesimal.

Modul Pemrograman Web 1


55
endarnirmala@gmail.com

Contoh :
var A = 400;
var B = 0x2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik atau notasi
ilmiah (notasi E). Contoh :
var a = 3.14893567;
var b = 1.23456E+5;

Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string
diantara tanda petik tunggal (') atau tanda petik ganda (") Contoh :
var str = 'Contoh deklarasi string';
var str1 = "cara ini juga bisa untuk menulis string";

Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya
digunakan untuk mengecek suatu kondisi atau keadaan. Contoh :
var A = (B > 80);
contoh diatas menunjukkan bahwa jika B lebih besar dari 90 maka A akan
bernilai True.

Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai
awal (inisialisasi).

11.4 Jenis Operator

Jenis operator dalam Java Script ada 6 buah :


• Aritmatika
• Pemberian nilai (Assign)
• Pemanipulasian bit (bitwise)
• Pembanding
• Logika
• String

a. Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua macam operator aritmatik,
yaitu operator numerik tunggal dan operator aritmatik biner. Perbedaan kedua
operator terletak pada jumlah operan yang harus dioperasikan.

Modul Pemrograman Web 1


56
endarnirmala@gmail.com

b. Operator Pemberian Nilai


Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu
operan.

c. Operator Manipulasi Bit


Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan
bulat.
Contoh :
var A = 12; // A = 1100b
var B = 10; // B = 1010b
var C = A & B
maka akan dihasilkan bilangan seperti berikut :
1100b
1010b AND
1000b
var A = 12;
var C = A<< 2
var D = A >> 1
maka variabel C akan bernilai 48(0011 0000b)
variabel D akan bernilai 6 (0110b)

d. Operator Pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenal
operator ini dapat bertipe string, numerik, maupun ekspresi lain.

e. Operator Logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.
Contoh :
var A = true;
var B = false;
var C = A && B; //menghasilkan false
var D = A || B ; // true
var E = !A; //false

Modul Pemrograman Web 1


57
endarnirmala@gmail.com

f. Operator String
Selain operator pembanding, operator string pada JavaScript juga mengenal satu
operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan untuk
menggabungkan beberapa string menjadi sebuah string yang lebih panjang.
Contoh :
nama = ”Java” + ”Script”;
akan menghasilkan ”JavaScript” pada variabel nama.

Latihan 2 :

<html>
<body>
<script language="JavaScript" type="text/javascript">
// Equation is °C = 5/9 (°F - 32).
var degFahren = prompt("Enter the degrees in
Fahrenheit",50);
var degCent;
degCent = 5/9 * (degFahren - 32);
alert(degCent);
</script>
</body>
</html>

Latihan 3 :

<HTML>
<HEAD><TITLE>Operasi Aritmatika</TITLE></HEAD>
<BODY>
<P><SCRIPT language="JavaScript">
<!--
document.writeln("<PRE>");
document.writeln("<H1>Operasi Aritmatik</H1>");
var A = "100";
var B = "200";
var C = 300;
var D = 400;
var E = A + B;
document.writeln('"100" + "200" = ' + E);
E = B + C;
document.writeln('"200" + 300 = ' + E);
E = C + D;
document.writeln('300 + 400 = ' + E);
document.writeln("<PRE>");
//-->
</SCRIPT></P>

Modul Pemrograman Web 1


58
endarnirmala@gmail.com

</BODY>
</HTML>

Latihan 4 :

<html>
<body>
<script language="JavaScript" type="text/javascript">
var greetingString = "Hello";
var myName = prompt("Please enter your name", "");
var concatString;
document.write(greetingString + " " + myName + "<br>");
concatString = greetingString + " " + myName;
document.write(concatString);
</script>
</body>
</html>

Latihan 5 :

<html>
<head><title>Convert String to Number</head></title>
<body>
<script language="JavaScript" type="text/javascript">
var myString = "56.02 degrees centigrade";
var myInt;
var myFloat;
document.write("\"" + myString + "\" is " +
parseInt(myString) +
" as an integer" + "<BR>");
myInt = parseInt(myString);
document.write("\"" + myString + "\" when converted to
an integer equals " +
myInt + "<BR>");
myFloat = parseFloat(myString);
document.write("\"" + myString +
"\" when converted to a floating point number equals "
+ myFloat);
</script>
</body>
</html>

Modul Pemrograman Web 1


59
endarnirmala@gmail.com

Latihan 6 :

Buatlah kalkulator dengan menggunakan Java Script, minimal tampilan sebagai


berikut :

Modul Pemrograman Web 1


60
endarnirmala@gmail.com

BAB XII STRUKTUR KENDALI DAN FUNGSI

12.1 Struktur Kendali

 IF
Perintah IF ada tiga macam, yaitu :
• IF dengan satu kondisi

IF (kondisi)
{
----------
}
• IF dengan dua kondisi

IF (kondisi)
{
-----------
}
Else
{
----------
}

• IF lebih dari dua kondisi

IF (kondisi)
{
--------
}
Elseif (kondisi)
{
---------
}
Else
{
---------
}

Modul Pemrograman Web 1


61
endarnirmala@gmail.com

Latihan 1 :

<script type="text/javascript">
<!--
var myNum = 10;

if(myNum == 7){
document.write("Lucky 7!");
}else{
document.write("You're not very lucky
today...");
}
//-->
</script>

Latihan 2 :

<script type="text/javascript">
//If the time is less than 10, you will get a "Good
morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date();


var time = d.getHours();

if (time < 10)


{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

 SWITCH ... CASE

switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;

Modul Pemrograman Web 1


62
endarnirmala@gmail.com

default:
code to be executed if n is different from case 1
and 2
}

Latihan 3 :

<script type="text/javascript">

var d=new Date();


var theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this
weekend!");
}
</script>

Latihan 4:

alert("What I Learned In College...")


//Please change the subject ;-)
var subject = "Humility"

switch (subject) {
case "Deep Thoughts" : alert("On Deep thoughts : A day
without sunshine is like night.");
break;
case "Problem Solving" : alert("On Problem Solving :
When the only tool you own is a hammer, every problem
begins to resemble a nail. - Abraham Maslow")
break;
case "Materialism" : alert("On Materialism : He who
dies with the most toys, is, nonetheless, still dead.")
break;
case "Infinity" : alert("On Infinity : If you had
everything, where would you keep it?")

Modul Pemrograman Web 1


63
endarnirmala@gmail.com

break;
case "Economics" : alert("On Economics : The cost of
living hasn't affected its popularity.")
break;
case "Revisionist History" : alert("On Revisionist
History : What was sliced bread the greatest thing
since?")
break;
case "Literature" : alert("On Literature : This is not
a novel to be tossed aside lightly. It should be
thrown with great force. - Dorothy Parker")
break;
case "Humility" : alert("On Humility : To err is human,
to moo bovine.")
break;
case "Excuses" : alert("On Excuses : I can't complain,
but sometimes I still do. - Joe Walsh")
break;
case "Numbers" : alert("On Numbers : 2 is not equal to
3 - not even for very large values of 2.")
break;
default:alert("I learnt nothing in college");
}

Latihan 5 :

<script type="text/javascript">
var red = 1;
var result = null;
switch (red) {
case 1: result = 'one'; break;
case 2: result = 'two'; break;
default: result = 'unknown';
}
document.write(result);
</script>

12.2 LOOP

1. For Loop

for(INITIALIZATION ; CONDITION ; NEXT) {


code to be executed
}

Modul Pemrograman Web 1


64
endarnirmala@gmail.com

Latihan 6 :

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

Latihan 7 :

<html>
<body>
<script type="text/javascript">

alert("The Student Mind During A Final Exam");

//Make an array with all the thoughts


var thoughts = new Array("The prof. never covered
this section!",
"Actual knowledge on the subject.",
"The T.A.'s kinda cute!",
"I knew I should have read the book!",
"Soon this will all be behind me!",
"I hope the curve is really low!",
"PANIC ZONE!",
"Prayers for a miracle flood, fire, tornado,
hurricane, earthquake...etc...",
"Eeny, meeny, miny moe...",
"Summer break!");

//Show all the thoughts - one by one...


for(i=0;i<10;i++) {
alert("Thought #"+(i+1)+" : "+thoughts[i]);
}
</script>
</body>
</html>

Modul Pemrograman Web 1


65
endarnirmala@gmail.com

2. While

while(CONDITION) {
code to be executed
}

Latihan 8 :

<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

3. Do .. While

do
{
code to be executed
}
while (variable<=endvalue);

Latihan 9 :

<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>

Modul Pemrograman Web 1


66
endarnirmala@gmail.com

BAB XIII FUNCTION DAN ARRAY

13.1. FUNCTIONS

function functionname(var1,var2,...,varX)
{
some code
}

Latihan 1.

<SCRIPT language="Javascript">
<!--
var a = 12;
var b = 4;
function PerkalianDengan2(b) {
var a = b * 2;
return a;
}
document.write("Dua kali dari ",b," adalah “
,PerkalianDengan2(b),"<br>");
document.write("Nilai dari a adalah ",a);
// -->
</SCRIPT>

Latihan 2.

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3));
</script>

</body>
</html>

Modul Pemrograman Web 1


67
endarnirmala@gmail.com

13.2 Array

Array dapat didefinisikan sebagai berikut :

 var myCars=new Array(); // regular array (add an


optional integer
myCars[0]="Saab"; // argument to control
array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

 var myCars=new Array("Saab","Volvo","BMW"); //


condensed array

 var myCars=["Saab","Volvo","BMW"]; // literal array

Latihan 3.

<html>
<head><title>Contoh Array</title></head>
<body>
<script type="text/javascript">
<!--
var myArray = new Array();

myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";

document.write(myArray[0] + myArray[1] + myArray[2]);


//-->
</script>
</body>
</html>

Latihan 4.

<html>
<body onLoad="window.defaultStatus='selamat belajar
java script'">
<script language="JavaScript" type="text/javascript">
function convertToCentigrade(degFahren)
{
var degCent;
degCent = 5/9 * (degFahren - 32);
return degCent;
}

Modul Pemrograman Web 1


68
endarnirmala@gmail.com

var degFahren = new Array(212, 32, -459.15);


var degCent = new Array();
var loopCounter;
for (loopCounter = 0; loopCounter <= 2; loopCounter++)
{
degCent[loopCounter] =
convertToCentigrade(degFahren[loopCounter]);
}
for (loopCounter = 2; loopCounter >= 0; loopCounter--)
{
document.write("Value " + loopCounter + " was " +
degFahren[loopCounter] +
" degrees Fahrenheit");
document.write(" which is " + degCent[loopCounter] +
" degrees centigrade<br>");
}
</script>
</body>
</html>

Latihan 5

<html>
<body>
<script type="text/javascript">
var parents = ["Jani", "Tove"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(children);
document.write(family);

</script>

</body>
</html>

Latihan 6

<html>
<body>

<script type="text/javascript">
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>
</body>
</html>

Modul Pemrograman Web 1


69
endarnirmala@gmail.com

BAB IV KOLEKSI CODE JAVA SCRIPT

14.1 Membuat tanggal

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<script type="text/javascript">
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}

var months = new


makeArray('Januari','Februari','Maret','April','Mei'
,'Juni','Juli','Augustus','September','Oktober','Nov
ember','Desember');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;

document.write(day + " " + months[month] + " " +


year);
</script>
</BODY>
</HTML>

Tampilan Browser sesuai dengan tanggal dari system yang sedang aktif,
misalnya :

25 anuari 2011

14.2 Teks jalan distatus bar

<html>
<head>
<title>teks jalan</title>
<script language="VBScript">
<!--
Dim Teks,Pjteks,Ambil1,Ambil2
Teks =" welcome my elearning " & Space(15)

Modul Pemrograman Web 1


70
endarnirmala@gmail.com

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 OnLoad=TeksJalan>
</body>
</html>

14.3 Animasi Kursor

<html>
<head>
<title>Animasi Kursor</title>
<script language="JavaScript">
<!--

var x,y
var step=20
var flag=0

var message="my cursor"


message=message.split("")

var xpos=new Array()


for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()


for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(e){
x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
flag=1
}

Modul Pemrograman Web 1


71
endarnirmala@gmail.com

function textfollow() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
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--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("textfollow()",10)
}
file://-->
</script>
<STYLE>
.spanstyle {
position:absolute;
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>
<script language="JavaScript">

Modul Pemrograman Web 1


72
endarnirmala@gmail.com

<!--
for (i=0;i<=message.length-1;i++) {
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>
<body onLoad="textfollow()">
Gerakan Mouse .....
</body>
</html>

Modul Pemrograman Web 1


73
endarnirmala@gmail.com

DAFTAR PUSTAKA

1. http://www.w3c.org
2. Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002
3. Internet &World Wide Web How to Program, Deitel, Deitel & Nieto
4. http://www.w3schools.com
5. Effendi, Pemrograman Dynamic HTML
6. http://en.wikipedia.org/wiki/World_Wide_Web

Modul Pemrograman Web 1


74