Selasa Materi Pemrograman Web 1 Unpam PDF

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

2
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

3
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

4
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.

5
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

6
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.

7
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>

8
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 !

9
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

10
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.

11
 <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>

12
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">

13
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

14
Latihan 3
 Buatlah halaman web dengan tampilan sebagai berikut :
 Simpan dengan nama : home.html

15
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 : ©

 ® : Registered trademark bentuk umum : ®
 ™ : Trademark bentuk umum : ™
 & : Ampersand bentuk umum : &
 : Non breaking space bentuk umum : &nbsp
 « : angle quotation mark (left) bentuk umum : «
 » : angle quotation mark (right) bentuk umum : »

16
 ¨ : tanda kutip bentuk umum : "

 < : lebih kecil bentuk umum : <
 > : lebih besar bentuk umum : >
 x : tanda kali bentuk umum : ×
 ÷ : tanda bagi bentuk umum : ÷
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>
</body>
</html>
Latihan 2
<html>
<head>
<title>Karakter Khusus</title>
</head>
<pre>
Tag <B>...</B>
<b>menebalkan</b> teks
Tag <I>...</I> membuat teks
terlihat miring <i>miring</i>
Tag <U>...</U> <u>menggaris
bawahi</u> teks
Tag <S>...</S> memberikan
coretan <s>coretan</s> pada teks
Tag <Strike>...</Strike> memberikan
<STRIKE>Coretan</strike> sama seperti elemen <S>

17
Tag <BLINK>...</BLINK> membuat teks

<blink>berkedip</blink>
Tag <TT>...</TT> menampilkan teks
dalam font <TT>Typewriter</tt>
Tag <Big>...</Big>
<big>membesarkan</big> teks
Tag <SMALL>...</SMALL>
<small>mengecilkan</small> teks
Tag <SUB>...</SUB> membuat teks
<sub>subscript</sub>
Tag <SUP>...</SUP> membuat teks
<sup>supercript</sup>
Tag <DFN>...</DFN> menandai suatu

<dfn>definisi</dfn>
Tag <EM>...</EM> menandai suatu
<em>penekanan</em> teks
Tag <CODE>...</CODE> <font
size="4">menyatakan suatu <code>kode
program</code></font>
Tag <KBD>...</KBD> menyatakan
<kbd>suatu keyboard</kbd>
Tag <VAR>...</VAR> menyatakan
suatu <var>variabel</var>
Tag <STRONG>...</STRONG>
<strong>menyatakan teks dengan penekanan yang
kuat</strong>
Tag 
<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

34
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>

35
Tampilan Browser :

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

37
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*, *”>

38
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

39
 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,

40
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>

41
</BODY>
</HTML>
Simpan dengan nama kontak.html

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

42
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.

43
 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

44
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>

45
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
}

46
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

47
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;

48
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>

49
<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">"H"</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 :

50
 Buatlah halaman web dengan menggunakan CSS yang dibuat tersendiri

51
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 */

52
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>
----
</body>
</html>
 Penyisipan Java Script dalam Head dan Body

<html>
<head><title>penulisan dalam head dan body</title>
------
</script>
</head>
<body>
------
</script>
----
</body>
</html>

53
 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);

54
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.

55
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.

56
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

57
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>
// 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">

</SCRIPT></P>

58
</BODY>
</HTML>
Latihan 4 :
<html>
<body>
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>
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>

59
Latihan 6 :
Buatlah kalkulator dengan menggunakan Java Script, minimal tampilan sebagai

berikut :

60
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
{
---------
}

61
Latihan 1 :
<script type="text/javascript">

</script>
Latihan 2 :
//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;

62
default:
code to be executed if n is different from case 1
and 2
}
Latihan 3 :
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?")

63
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 :
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
}

64
Latihan 6 :
<html>
<body>
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>
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>

65
2. While
while(CONDITION) {
code to be executed
}
Latihan 8 :
<html>
<body>
var i=0;
while (i<=5)
{
i++;
}
</script>
</body>
</html>
3. Do .. While
do
{
code to be executed
}
while (variable<=endvalue);
Latihan 9 :
<html>
<body>
var i=0;
do
{
i++;
}
while (i<=5);
</script>
</body>
</html>

66
BAB XIII FUNCTION DAN ARRAY
13.1. FUNCTIONS
function functionname(var1,var2,...,varX)
{
some code
}
Latihan 1.
<SCRIPT language="Javascript">

</SCRIPT>
Latihan 2.
<html>
<head>
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
document.write(product(4,3));
</script>
</body>
</html>

67
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>
</body>
</html>
Latihan 4.
<html>
<body onLoad="window.defaultStatus='selamat belajar
java script'">
function convertToCentigrade(degFahren)
{
var degCent;
degCent = 5/9 * (degFahren - 32);
return degCent;
}

68
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>
var parents = ["Jani", "Tove"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(children);
document.write(family);
</script>
</body>
</html>
Latihan 6
<html>
<body>
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>

69
BAB IV KOLEKSI CODE JAVA SCRIPT
14.1 Membuat tanggal
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
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">

</script>
</head>
<body OnLoad=TeksJalan>
</body>
</html>
14.3 Animasi Kursor
<html>
<head>
<title>Animasi Kursor</title>
<script language="JavaScript">

</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">

72

</script>
</head>
<body onLoad="textfollow()">
Gerakan Mouse .....
</body>
</html>

73
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

74

Selasa Materi Pemrograman Web 1 Unpam PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Selasa Materi Pemrograman Web 1 Unpam PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

endarnirmala@gmail.

ENDAR NIRMALA, S.Kom, MT

JURUSAN TEKNIK INFORMATIKA

Modul Pemrograman Web 1

Sehubungan dengan kebutuhan untuk membangun aplikasi web yang bersifat

Akhir kata semoga modul ini dapat memberikan manfaat.

Jakarta, Mei 2011

Modul Pemrograman Web 1

Modul Pemrograman Web 1

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

Modul Pemrograman Web 1

BAB I PENGENALAN WEB

1.1 World Wide Web

Internet merupakan jaringan global yang merupakan sumber daya informasi

HTML merupakan format data yang digunakan untuk membuat dokumen

Dengan sistem hypertext pada dokumen HTML, pengguna tidak harus

Modul Pemrograman Web 1

World Wide Web bekerja berdasarkan dengan tiga mekanisme, yaitu:

 Protocol merupakan standard aturan yang digunakan untuk berkomunikasi

1.2 Sekilas Cara Kerja Web

Modul Pemrograman Web 1

Gambar 1.1 Cara kerja web

1.3 Pengenalan HTML

1. Mengontrol tampilan web page dan content-nya

Perbedaan utama dokumen HTML dengan dokumen pada umumnya adalah

Modul Pemrograman Web 1

1.3.1 Elemen HTML

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

1.3.2 Browser dan Editor

1.3.3 Struktur script HTML :

--- bagian head ---

--- bagian body ---

Modul Pemrograman Web 1

1. Apa perbedaan Web, Portal dan Blog !

Modul Pemrograman Web 1

BAB II BASIC TAG HTML

2.1 Struktur Dasar HTML

HTML digunakan untuk membangun suatu halaman web. Banyak orang

Modul Pemrograman Web 1

Elemen yang mungkin terdapat pada bagian head :

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

Penggunaan elemen <META> yang paling populer adalah penggunaan properti

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

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

2.2 Format Dokumen HTML

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

Modul Pemrograman Web 1

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

Modul Pemrograman Web 1

Tampilan pada browser :

Modul Pemrograman Web 1

Teks dengan Align="center" akan diratakan pada margin

Tampilan pada browser

Modul Pemrograman Web 1

 Buatlah halaman web dengan tampilan sebagai berikut :

 Simpan dengan nama : home.html

Modul Pemrograman Web 1

BAB III FORMAT TEKS DAN KARAKTER KHUSUS

3.1 Format Teks

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

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

 <b> : menebalkan teks

3.2 Karakter Khusus

 © : Copyright bentuk umum : ©

 ¨ : tanda kutip bentuk umum : "

Tag <BLINK>...</BLINK> membuat teks

Tag <DFN>...</DFN> menandai suatu