Langkah-langkah menulis program

Diktat Kuliah
P emrogram an Web
IGA Widagda
Fisika FMIPA UNUD
2012
Kata Pengantar
Penulis memanjatkan puji syukur kepada Tuhan Yang Maha Esa, karena berkat
rahmat-Nya maka kami bisa menerbitkan Diktat kuliah Pemrograman Web. Kami berharap
semoga diktat kuliah ini dapat membantu mahasiswa Fisika FMIPA UNUD dalam menguasai
materi kuliah pemrograman web.
Kami juga menyampaikan terima kasih kepada semua pihak yang turut serta
membantu penyusunan diktat ini :
-Bapak Ketua Jurusan Fisika FMIPA UNUD
-Teman – teman dosen dan karyawan Jurusan Fisika, FMIPA, UNUD
-Istriku, Kusuma Dewi dan kedua anakku, Widya dan Lestari
Kami menyadari bahwa diktat ini masih banyak kekurangannya, untuk itu kami
sangat mohon kritik dan saran dari semua pihak untuk kesempurnaan diktat ini.
PENYUSUN
i
DAFTAR ISI
KataPengantar...........................................................................................................................i
Daftar Isi ...................................................................................................................................ii
1
WWW (World Wide Web)................................................................................. 1
2
Pengenalan HTML............................................................................................... 3
3
Tag Dasar.............................................................................................................. 5
4
Format Teks dalam HTML................................................................................. 12
5
Entitas Karakter dalam HTML........................................................................... 17
6
Link HTML.........................................................................................................19
7
Image HTML...................................................................................................... 25
8
List dan Tabel......................................................................................................31
9
Frame.................................................................................................................. 49
10
Form....................................................................................................................54
11
CSS (Cascade Style Sheet)................................................................................. 62
12
HTML Dinamik.................................................................................................. 68
Daftar Pustaka
ii
1.World Wide Web
Pemrograman Web
I. World Wide Web
1.1. Pendahuluan
World Wide Web (singkatnya : Web) adalah salah satu layanan yang didapatkan oleh
pemakai komputer ketika terhubung ke Internet. Web pada awalnya adalah ruang informasi
dalam internet. User dituntun untuk menemukan informasi dengan mengikuti link yang
disediakan dalam dokumen atau halaman web(web page) tersebut. Web merupakan standar
interface pada layanan-layanan yang ada di internet. Awalnya internet dipakai sebagai
penyedia informasi, kini digunakan untuk komunikasi baik lewat e-mail maupun chatting.
Disamping itu internet dapat dipakai sebagai media untuk melakukan transaksi bisnis (ecommerce), transaksi bank (e-banking), penyedia informasi pemerintahan (e-goverment),
penyedia informasi literatur (e-library) dan lain-lainnya.
1.2.Proses Kerja Web
Untuk mendapatkan informasi dari suatu halaman Web maka akan melewati proses
seperti diperlihatkan gambar 1.1.
Client
Server
Web Browser
HTTPS
1
URL: http//..//abc.htm
2
HTTP
“Get”
Abc.htm
3
Komputer
HTTP
“replay”
Internet
Web Browser
Hard Disk
URL: http//..//abc.htm
4
welcome
Temp file / memori
file abc.htm
<HTML>
<H1>Welcome</H1>
</HTML>
<HTML>
<H1>Welcome</H1>
</HTML>
Gambar 1.1. Proses Kerja Pengaksesan Informasi pada Web
Informasi disimpan dalam dokumen yang disebut halaman-halaman web (web pages). Web
page adalah file-file yang disimpan dalam komputer yang disebut dengan server web.
Komputer yang membaca web page disebut dengan client web. Client web menampilkan
1
1.World Wide Web
Pemrograman Web
page dengan menggunakan program yang disebut browser web. Browser web yang sering
dipakai adalah Mozilla Firefox, Internet Explorer (IE), Netscape Navigator (NN), dll.
1.3. Server Web
Server web adalah komputer yang dipakai untuk menyimpan dokumen-dokumen
web, komputer ini akan melayani permintaan dokumen web dari kliennya. Browser web
berkomunikasi dengan server web lewat jaringan internet dengan menggunakan standar
komunikasi (protokol) yaitu HTTP (Hyper Text Transfer Protocol).
1.4. Browser Web
Browser web adalah software yang dipakai untuk menampilkan informasi dari server
web. Browser mengambil sebuah web page dari server dengan sebuah request (permintaan).
Sebuah request berisi alamat page (page address).Contoh sebuah page address adalah :
http:/www.kita.web.id/hal1.htm. Seluruh halaman web berisi instruksi bagaimana untuk
ditampilkan. Browser menampilkan page dengan membaca intstruksi ini. Instruksi ini
biasanya dinyatakan dengan bahasa HTML ( Hyper Text Markup Language).
2
2.Pengenalan HTML
Pemrograman Web
II. PENGENALAN HTML
2.1. Dokumen HTML
HTML singkatan dari Hyper Text Markup Language. Dokumen HTML adalah file
teks murni yang dapat dibuat dengan editor teks sembarang seperti : notepad. Dokumen ini
dikenal sebagai halaman web (web page). File atau dokumen HTML dibuat dengan
mengetikkan dalam editor teks, kemudian dilanjutkan dengan memberi nama file dan
ekstensi htm atau html.Contoh : latihan.htm, myfirstweb.html.
2.2.Elemen HTML
Dokumen HTML disusun oleh elemen-elemen. Elemen-elemen ini dinyatakan
dengan tag. Beberapa contoh elemen atau tag dalam HTML adalah : head, body, table,
paragraf, dan list. Format penulisan tag dalam HTML adalah :
<nama tag>
Tag umumnya berpasangan yaitu : tag awal dan tag akhir, dimana format penulisannya
adalah :
<nama tag>
…
</nama tag>
Untuk membuat sebuah dokumen HTML biasanya paling tidak diperlukan 3 tag yaitu
<html>, <head>, dan <body> beserta tag-tag pasangannya. Elemen head berisi informasi
tentang dokumen tersebut, sedangkan elemen body berisi teks sebenarnya yang tersusun dari
table, paragraf, list, dan elemen lainnya. Secara umum dokumen HTML terdiri dari 2 bagian
yaitu bagian head dan bagian body. Sehingga setiap dokumen HTML akan mempunyai pola
sebagai berikut :
<html>
<head>
…informasi tentang dokumen HTML
</head>
<body>
…informasi yang ditampilkan dalam browser web
</body>
</html>
Setiap dokumen HTML harus diawali oleh tag <html> dan tag </html> di akhir dokumen.
Bagian head ditandai dengan tag <head> diawal, dan tag </head> di akhir. Bagian ini berisi
informasi tentang dokumen HTML nya. Biasanya informasi yang dituliskan adalah judul dari
3
2.Pengenalan HTML
Pemrograman Web
dokumen. Judul ini ditampilkan pada caption bar dari window browser (lihat gambar 2.1).
Tag yang dipakai untuk menampilkan judul ini adalah tag <title> …</title>.
Bagian body ditandai dengan tag <body>…</body>. Bagian body ini merupakan elemen
terbesar dalam dokumen HTML. Elemen ini berisi isi dokumen yang akan ditampilkan
dalam browser web yang meliputi : paragraf, grafik, tabel, dan sebagainya. Sebagai contoh
awal untuk membuat dokumen HTML cobalah ketikkan teks di bawah ini dalam editor
notepad. Kemudian beri nama file tersebut dengan : contoh.htm. Selanjutnya jalankan
browser Internet Explorer dan buka (open) file : contoh.htm. Hasilnya dapat dilihat dalam
gambar 2.1.
<html>
<head>
<title>Judul Halaman web</title>
</head>
<body>
ini adalah home page pertama ku.
</body>
</html>
Listing 2.1. contoh.htm
Gambar 2.1. Tampilan dari dokumen HTML : contoh.htm
4
3.Tag Dasar HTML
Pemrograman Web
III.Tag Dasar HTML
3.1 Tag-tag Dasar HTML
Tag atau elemen dasar merupakan komponen utama dari dokumen HTML. Dokumen
HTML pada dasarnya berisi teks informasi. Judul dokumen HTML disimpan dalam elemen
Head dengan tag <title>…</title>. Teks informasi disimpan dalam elemen Body dengan
menggunakan tag <body>…</body>. Teks informasi dalam elemen Body akan disusun
menjadi paragraf-paragraf dengan memakai tag <p>.
Beberapa tag dasar HTML seperti : html, head, title, body, paragraf, line break,
heading, garis datar, alignment, komentar, dll.
3.2 HTML
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen
HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya
sebagai tag pertama dalam dokumen HTML. Format penulisannya adalah :
<html>
…..
</html>
3.3 Head
Merupakan tag berikutnya setelah tag <html> untuk memberikan judul atau
keterangan tentang dokumen web yang akan ditampilkan. Format penulisannya adalah :
<head>
…..
</head>
3.4 Body
Merupakan bagian utama dalam dokumen web. Pada bagian ini semua isi dokumen
yang akan ditampilkan di dalam browser harus dituliskan. Format penulisannya adalah :
<body>
…..
</body>
3.5 Paragraf
Informasi yang akan ditampilkan dalam browser web harus mengikuti aturan atau
kaidah dalam penulisan. Misalnya satu pikiran utama biasanya disimpan dalam satu paragraf.
Format penulisannya adalah :
<p> …teks informasi…
(tanpa tag penutup)
<p> …teks informasi…</p>
(dengan tag penutup)
atau
5
3.Tag Dasar HTML
Pemrograman Web
Berikut ini adalah beberapa contoh dokumen HTML yang menggunakan tag dasar tersebut :

<html>
<head>
<title>sebuah contoh HTML sederhana</title>
</head>
<body>
<p> Selamat datang di dunia HTML.It's so easy and enjoyable </p>
</body>
</html>
Listing 3.1 Tag_dasar.htm
Gambar 3.1 Hasil eksekusi Tag_dasar.htm
Listing 3.2 (tag_dasar1.htm) memperlihatkan secara lebih rinci tentang tag paragraf. Hasil
eksekusinya ditampilkan dalam gambar 3.2.

<html>
<head>
<title>Contoh penggunaan tag paragraf</title>
</head>
<body>
<p> Ini adalah paragraf pertama</p>
<p> Ini adalah paragraf kedua </p>
<p> Ini adalah paragraf ketiga</p>
</body>
</html>
Listing 3.2 Tag_dasar1.htm
6
3.Tag Dasar HTML
Pemrograman Web
Gambar 3.2 Hasil eksekusi Tag_dasar1.htm
3.6 Line Break (Pindah Baris)
Kita dapat melakukan pindah atau ganti baris pada dokumen web. Untuk
menampilkan suatu teks agar ditampilkan pada baris yang baru dalam suatu paragraf maka
harus digunakan tag <br>. Format penulisannya adalah :
…teks informasi…<br>
(tanpa tag penutup)
contoh pemakaian line break dapat dilihat dalam listing 3.3 (line_break.htm) berikut ini :

<html>
<head>
<title>Contoh penggunaan tag line break</title>
</head>
<body>
<p> Ini adalah baris pertama <br>
Ini adalah baris kedua <br>
Ini adalah baris ketiga </p>
</body>
</html>
listing 3.3 line_break.htm
Gambar 3.3 Hasil eksekusi line_break.htm
7
3.Tag Dasar HTML
Pemrograman Web
3.7 Heading
Teks dalam dokumen umumnya mempunyai judul topik. Pada dokumen HTML judul
ini disebut heading. Heading akan ditampilkan dengan huruf yang lebih besar dan ditebalkan
dibandingkan dengan huruf normal. Heading dipakai untuk menunjukkan tingkat keberartian
dari teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, diberi nomer 1 sampai
dengan 6. Nomer 1 merupakan heading terbesar. Format penulisan heading adalah :
<hn>…teks informasi…</hn>
dimana n adalah nomer heading (1,2,…6)
Contoh pemakaian heading diperlihatkan dalam listing 3.4 (heading.htm) berikut ini :

<html>
<head>
<title>Contoh penggunaan heading</title>
</head>
<body>
<h1> Ini adalah heading 1 </h1>
<h2> Ini adalah heading 2 </h2>
<h3> Ini adalah heading 3 </h3>
<h4> Ini adalah heading 4 </h4>
<h5> Ini adalah heading 5 </h5>
<h6> Ini adalah heading 6 </h6>
</body>
</html>
Listing 3.4 heading.htm
Hasil eksekusi dari heading.htm diperlihatkan dalam gambar 3.4.
Gambar 3.4 Hasil eksekusi heading.htm
8
3.Tag Dasar HTML
Pemrograman Web
Tag heading mempunyai atribut yang dipakai untuk mengatur letak heading dalam suatu
baris. Atribut yang dipakai adalah : align. Ada 3 opsi pengaturan yaitu :



Left (kiri)
Center (tengah)
Right (kanan)
Format penulisan heading dengan atribut align adalah :
<hn align=”left/right/center”> …teks informasi…</hn>
Contoh pemakaian atribut align dapat dilihat dalam listing 3.5 ( align.htm). Dan hasilnya
ditampilkan pada gambar 3.5.

<html>
<head>
<title>Contoh penggunaan heading : align </title>
</head>
<body>
<h2 align="center"> heading 2 di tengah </h2>
<p> heading 2 diposisikan di tengah baris</p>
<h1 align="right"> heading 1 di kanan </h1>
<p>heading 1 diletakkan di kanan baris</p>
</body>
</html>
Listing 3.5 align.htm
Gambar 3.5 Hasil eksekusi align.htm
3.8 Garis horizontal (horizontal rule)
Sebuah garis dapat dibuat dalam halaman web. Garis ini biasanya digunakan sebagai
pemisah antar bagian atau paragraf. Tag yang dipakai untuk membuat garis adalah <hr>.
9
3.Tag Dasar HTML
Pemrograman Web
Adapun format penulisan tag <hr> adalah :
…teks informasi…
<hr>
…teks informasi
Contoh pemakaian tag <hr> dapat dilihat dalam listing 3.6 (garis.htm). Dan hasil eksekusi
dari file garis.htm dapat dilihat dalam gambar 3.6.

<html>
<head>
<title>Contoh penggunaan garis horizontal</title>
</head>
<body>
<p> Ini adalah contoh penggunaan garis </p>
<hr>
<p> ini adalah teks di bawah garis horizontal </p>
</body>
</html>
Listing 3.6 Garis.htm
Gambar 3.6 Hasil eksekusi garis.htm
3.9 Komentar
Dalam suatu dokumen web ada sebagian teks dalam dokumen hanya berfungsi
sebagai catatan atau komentar terhadap dokumen itu sendiri. Catatan atau komentar ini tidak
akan ditampilkan dalam browser web. Format penulisan komentar adalah :

contoh penulisan komentar dalam dokumen HTML dapat dilihat dalam listing 3.7
(komentar.htm). Dan hasil eksekusi dari komentar.htm dapat dilihat dalam gambar 3.7
10
3.Tag Dasar HTML
Pemrograman Web

<html>
<head>
<title>Contoh penggunaan komentar</title>
</head>
<body>

<p> ini sebuah paragraf </p>
</body>
</html>
Listing 3.7 komentar.htm
Gambar 3.7 Hasil eksekusi komentar.htm
Latihan :
1.Buatlah sebuah dokumen HTML dimana jika dieksekusi dalam browser maka akan
menampilkan hasil seperti di bawah ini :
11
4.Format Text dalam HTML
Pemrograman Web
IV. Format Teks dalam HTML
4.1 Format Teks
Format teks dalam dokumen HTML dapat dibuat secara khusus untuk menunjukkan
perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan dan
penekanan tersebut antara lain :
 huruf miring (italic)
 superscript
 huruf tebal (bold)
 subscript
 huruf digarisbawahi
 huruf diberi tekanan (emphasize) dll
 huruf dikecilkan
Contoh pemformatan teks ditunjukkan dalam dokumen HTML format_teks.htm (listing 4.1).
Hasil eksekusi file Format_teks.htm diperlihatkan dalam gambar 4.1.

<html>
<body>
<b> Ini Teks Tebal</b><br>
<strong> Ini Teks Strong</strong><br>
<big> Ini Teks besar </big> <br>
<em> Ini Teks Emphasize</em> <br>
<i> Ini teks miring </i> <br>
<small>Ini teks small </small> <br>
Teks ini berisi <sub> subscript </sub> <br>
Teks ini berisi <sup> superscript</sup> <br>
</body>
</html>
Listing 4.1. Format_teks.htm
Gambar 4.1. Hasil eksekusi file Format_teks.htm
12
4.Format Text dalam HTML
Pemrograman Web
4.2 Teks Preformat
Untuk menampilkan teks di dalam browser web sesuai dengan dokumen web tersebut
di dalam editor teks, maka dapat digunakan tag <pre>….</pre>. Dengan tag <pre> yang
mempunyai kepanjangan “preformatted” maka spasi, baris baru, dan tab akan ditampilkan
sesuai dengan aslinya.
Secara default jarak antara suatu kata atau kalimat ketika ditampilkan dalam browser
web adalah sebesar satu spasi. Salah satu contoh penggunaan dari tag <pre> adalah untuk
menampilkan source program dalam web. Sebagai contoh akan diperlihatkan dalam listing
4.2 (preformat.htm) berikut ini.

<html>
<body>
<pre>
void Node :: Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->setcontent(null);
if (next)
next->prev = prev;
parent = null
}
</pre>
</body>
</html>
Listing 4.2. Preformat.htm
Hasilnya ditunjukkan dalam gambar 4.2.
Gambar 4.2. Hasil eksekusi file Preformmat.htm
13
4.Format Text dalam HTML
Pemrograman Web
4.3 Address
Untuk menampilkan sebuah alamat (address) pada web maka digunakan tag address.
Adapun format penulisannya adalah :
<address> …teks informasi…</address>
contoh pemakaian tag <address> diperlihatkan dalam listing 4.3 (address.htm). Sedangkan
hasil eksekusi dari listing tersebut diperlihatkan dalam gambar 4.3

<html>
<body>
<address>
Jurusan Fisika, FMIPA <br>
Universitas Udayana <br>
bukit Jimbaran <br>
Bali
</address>
</body>
</html>
Listing 4.3. Address.htm
Gambar 4.3. Hasil eksekusi file Address.htm
4. 4 Singkatan (Acronym)
Untuk menampilkan data kepanjangan dari suatu singkatan pada halaman web kita
dapat memanfaatkan tag acronym (akronim) ditambah dengan atribut title. Adapun format
penulisannya adalah :
<acronym title = “teks kepanjangan”> …teks singkatan…</acronym>
Dengan memakai tag tersebut maka pada saat pointer mouse berada di atas singkatan
tersebut, maka kepanjangan dari singkatan tersebut akan ditampilkan mengambang di
atasnya. Adapun contoh pemakaian dari tag <acronym> adalah seperti diperlihatkan dalam
14
4.Format Text dalam HTML
Pemrograman Web
listing 4.4 ( acronym.htm). Gambar 4.4 memperlihatkan hasil eksekusi file tersebut dalam
browser .

<html>
<body>
<acronym title = "World Wide Web"> W W W </acronym> <br>
<acronym title = "Indeks harga Saham Gabungan"> IHSG </acronym>
</body>
</html>
Listing 4.4. file Acronym.htm
Gambar 4.4. Hasil eksekusi file Acronym.htm
4.5 Kutipan (Quotation)
Untuk menampilkan suatu kutipan dalam halaman web adalah dengan memakai tag
quotation. Ada dua macam kutipan yaitu :
 kutipan pendek – tag <q>
 kutipan panjang – tag <blockquote>
Adapun format penulisannya adalah :
Kutipan pendek :
<q> …teks informasi…</q>
Kutipan panjang :
<blockquote> …teks informasi…</blockquote>
tag <blockquote> dipakai untuk membuat sebagian teks yang dikutip sebagai suatu blok
sendiri. Margin dari teks kutipan akan berubah untuk memisahkan dari teks yang lain.
Tag <quote> tidak melakukan sesuatu yang khusus.
Contoh pemakaian kutipan dalam dokumen HTML diperlihatkan dalam listing 4.5
(quot.html) . Dan hasil eksekusi dari file tersebut dapat dilihat dalam gambar 4.5.
15
4.Format Text dalam HTML
Pemrograman Web

<html>
<body>
Ini adalah kutipan (quotation) panjang :
<blockquote>
baris 1 kutipan panjang
baris 2 kutipan panjang
baris 3 kutipan panjang
baris 4 kutipan panjang
baris 5 kutipan panjang
</blockquote>
ini adalah kutipan (quotation) pendek :
<q>
baris 1 kutipan pendek
baris 2 kutipan pendek
</q>
</body>
</html>
Listing 4.5. Hasil eksekusi file quot.htm
Gambar 4.5. Hasil eksekusi file quot.htm
16
5.Entitas Karakter HTML
Pemrograman Web
V.Entitas Karakter HTML
5.1 Pengertian
Dalam HTML ada beberapa karakter yang mempunyai arti khusus seperti :

< (tanda lebih kecil) menyatakan awal tag

> (tanda lebih besar) menyatakan akhir tag

x menyatakan tanda kali

” menyatakan tanda kutip

dll
Jika kita menginginkan browser untuk menampilkan karakter-karakter tersebut kita harus
menyisipkan entitas karakter ke dalam source code HTML (listing). Entitas karakter terdiri
dari 3 bagian yaitu : sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor
entitas, dan tanda titik koma (;). Contoh untuk menampilkan tanda lebih kecil (<) maka kita
harus menuliskan : &lt; atau &#60;
Kelebihan menggunakan nama dibandingkan nomor adalah nama lebih mudah diingat
dibandingkan nomor.
Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru, sedangkan
dukungan untuk nomor entitas hampir ada pada setiap browser. Contoh penggunaan entitas
karakter diperlihatkan dalam listing 5.1 (entitas.htm). Sedangkan hasil eksekusi dari file
tersebut dapat dilihat dalam gambar 5.1.

<html>
<body>
apakah A &gt; B atau A &lt; B ?
</body>
</html>
Listing 5.1. entitas.htm
Gambar 5.1. Hasil eksekusi entitas.htm
17
5.Entitas Karakter HTML
Pemrograman Web
5.2 Entitas karakter yang sering digunakan
Beberapa entitas karakter yang sering digunakan dalam halaman web adalah seperti
diperlihatkan dalam tabel di bawah ini.
Hasil
Keterangan
©
Copyright
®
Registered trademark
™
Trademark
Nama entitas
Nomer entitas
&copy;
&#160;
&reg;
&#174;
&#8482;
Non-breaking space (spasi)
&nbsp;
&#161;
&
Ampersand
&amp;
&#38;
»
Angle quotation mark(left)
&laquo;
&#171;
«
Angle quotation mark(right)
&raquo;
&#187;
”
Tanda kutipan
&quot;
&#34;
<
Lebih kecil
&lt;
&#60;
>
Lebih besar
&gt;
&#61;
x
Tanda kali
&times;
&#215;
÷
Tanda bagi
&divide;
&#247;
Latihan :
1.Buatlah sebuah dokumen HTML dimana jika dibuka dalam browser maka akan
menampilkan hasil seperti di gambar bawah ini :
18
5.Entitas Karakter HTML
Pemrograman Web
19
6.Link HTML
Pemrograman Web
VI. Link HTML
Dokumen HTML memiliki kemampuan untuk memberikan link dari satu teks atau
gambar ke dokumen lain atau bagian lain dalam satu dokumen. Teks atau gambar yang
ditentukan sebagai link akan diberi warna dan garis bawah (highlight).
Dokumen HTML menggunakan tag hyperlink atau anchor untuk melakukan link
kepada dokumen lain dalam web. Disamping tag anchor maka kita perlu menyertakan atribut
href untuk menyatakan alamat link yang dituju. Format atau sintax dari hyperlink adalah :
<a href = “alamat_link”> …teks informasi…
</a>
dimana alamat_link adalah alamat link yang akan dituju. Contoh :
<a href = http://www.microsoft.com> Alamat Microsfoft </a>
Ada 3 tipe link yaitu :



Link relatif
Link absolut
Link dalam dokumen yang sama
6.1 Link Relatif
Link relatif adalah suatu link dari suatu page ke page lain pada komputer yang sama.
Link jenis ini tidak memerlukan alamat internet yang lengkap. Jika dua page berada pada
direktori (folder) yang sama anda dapat menuliskan alamat file HTML secara langsung.
Contoh :
<a href = “file_contoh.htm” >Open File </a>
6.2 Link Absolut
Link absolut adalah suatu link dari suatu web page ke web page lain di internet.
Dalam hal ini kita harus menuliskan alamat internet secara lengkap. Berikut ini adalah
contohnya :
<a href = “http://www.microsoft.com” >Welcome to Microsoft </a>
Di bawah ini adalah contoh dokumen HTML tentang link (listing 6.1 link.htm).
<html>
<body>
<p><a href ="aboutsinga.htm">Welcome to Singapore </a></p>
<p><a href ="http://www.microsoft.com">Welcome to Microsoft </a></p>
</body>
</html>
listing 6.1 link.htm
19
6.Link HTML
Pemrograman Web
Karena file link.htm salah satu linknya adalah menuju file aboutsinga.htm maka kita perlu
membuat file aboutsinga.htm juga. Adapun isi dari file aboutsinga.htm adalah seperti di
bawah ini :
<html>
<body>
<h3>About Singapore...</h3>
<blockquote>Singapore is one of the countries in southeast asia<br>
The Smallest but the fastest economic's growth<br>
Because of strategic location <br>
so well known as The "Triangle Gold" country
</blockquote>
</body>
</html>
listing 6.2 Aboutsinga.htm
Jika file link.htm dibuka dengan browser maka tampilannya adalah seperti gambar 6.1
Gambar 6.1 hasil eksekusi link.htm
Dan apabila ‘Welcome to Singapore’ diklik, maka akan menampilkan gambar 6.2
Gambar 6.2 Hasil link
20
6.Link HTML
Pemrograman Web
6.3 Link dalam Dokumen yang Sama
Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila dalam
browser web maka kita perlu melakukan penggulungan layar (scroll) secara berulang-ulang.
Untuk mengatasi hal itu kita bisa membuat link antar bagian, dengan menandai setiap bagian
tersebut dengan nama tertentu. Biasanya link jenis ini dipakai sebagai daftar isi suatu
dokumen. Dimana dengan mengklik daftar isi maka kita dapat langsung menuju isi lengkap
dari dokumen tersebut. Format atau sintaks dari link ini adalah :
<a name = “namabagian” >
<a href = “#namabagian” >…teks informasi…. </a></a>
dimana tanda # menunjukkan bahwa link tersebut menuju pada dokumen yang sama. Berikut
ini akan diberikan contoh dokumen HTML tentang pemakaian link jenis ini (listing 6.3)
<html>
Penjelasan tentang bab 2<br>
<body>
Penjelasan tentang bab 2<br>
<p>
Penjelasan tentang bab 2<br>
<a name="top">
Penjelasan tentang bab 2<br>
<a href="#B3">
Penjelasan tentang bab 2
Lihat bab 3
</p>
</a>
<a name="B3">
</a>
<h3>Bab 3</h3>
</p>
<p>
<h3>Bab 1</h3>
Penjelasan tentang bab 3<br>
<p>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 3
Penjelasan tentang bab 1<br>
</p>
Penjelasan tentang bab 1
<a href ="#top"> Kembali ke Atas </a>
</p>
</body>
<h3>Bab 2</h3>
</html>
<p>
Listing 6.3 link2.htm
Hasil dari file link2.htm jika dibuka dengan browser Internet Explorer adalah seperti
diperlihatkan dalam gambar 6.3.
21
Klik di sini
Gambar 6.3 hasil eksekusi file link2.htm
Dan jika ‘lihat bab 3’ di klik maka akan memperlihatkan isi dari Bab 3 seperti ditunjukkan
dalam gambar 6.4.
Klik di sini
Gambar 6.4 hasil link
Dan jika ‘Kembali ke Atas’ diklik maka akan kembali menampilkan gambar 6.3.
6.4 Membuka Link dengan Window Baru (Open in New Window)
Untuk melakukan link kepada page lain dengan membukanya pada window baru
dalam HTML dapat kita lakukan dengan mengeset atribut target = ”_blank”. Dengan
demikian pengunjung tidak harus meninggalkan web site kita saat membuka web site lain.
Format perintahnya adalah :
<a href = “alamat_link” target= ”_blank” >
22
contoh pemakaian link seperti ini dapat dilihat dalam dokumen HTML berikut ini (listing
6.4). Sementara hasilnya jika dibuka dengan browser Internet Explorer adalah seperti
diperlihatkan dalam gambar 6.5.
<html>
<body>
<p><a href ="aboutsinga.htm" target= "_blank">Welcome to Singapore </a></p>
<p><a href ="http://www.microsoft.com" target = "_blank">Welcome to Microsoft
</a></p>
</body>
</html>
Listing 6.4 Link3.htm
Gambar 6.5 Hasil eksekusi Link3.htm
Pada gambar 6.5 diperlihatkan setelah ”Welcome to Singapore” diklik maka akan membuka
link pada window baru. Sehingga akan tampak 2 buah window.
6.5 Mengirim e-mail dengan Mailto
Untuk mengirim email ke sebuah alamat email tertentu dalam HTML kita dapat
menggunakan atribut : mailto. Adapun contoh dokumen HTML yang menampilkan
pemakaian mailto diperlihatkan dalam listing 6.5.
<html>
<body>
kirim email ke :<a href ="mailto:[email protected]?subject = Tanya Hasil test HTML">
[email protected] </a>
</body>
</html>
Listing 6.5 Link_mailto.htm
23
Hasil dari listing 6.5 jika dibuka dengan browser Internet Explorer adalah ditunjukkan dalam
gambar 6.6.
Gambar 6.6 Hasil eksekusi link_mailto.htm
24
7.Image HTML
Pemrograman Web
VII. Image HTML
Pada umumnya sebuah halaman web dilengkapi dengan gambar – gambar (image)
sehingga membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site
tersebut. Biasanya browser web juga dapat menampilkan gambar disertai dengan teks (inline
image). Adapun gambar-gambar yang ditampilkan adalah yang mempunyai format XBM (X
bitmap), GIF, JPEG, PNG, dan lain-lain. Konsekuensi dari disertakannya gambar dalam web
page adalah diperlukannya waktu tambahan saat download.
Untuk menampilkan gambar digunakan tag <img> disertai dengan atribut src.
Format atau sintax dari tag ini adalah :
<img src = “namaimage”>
dimana namaimage adalah alamat URL dari file image yang akan ditampilkan.
7.1 Pengaturan Tampilan gambar : Alignment
Untuk mengatur tampilan gambar di dalam halaman web kita dapat memakai atribut
Align. Ada 3 opsi dalam atribut align yaitu : bottom, middle, top, left, center, dan right.
Format atau sintax dari atribut ini adalah :
<img src = “namaimage” align =”bottom|middle|top|left|center|right”>
Berikut ini adalah contoh dokumen HTML yang menggunakan atribut align(listing 7.1),
sedangkan hasilnya diperlihatkan dalam gambar 7.1.
<!—Image : align -->
<html>
<head>
<title>Contoh Image : align </title>
</head>
<body>
<p>Bendera Amerika
<image src = "../gambar/usa.gif" align="bottom"> </p>
<p>Bendera Amerika
<image src = "../gambar/usa.gif" align="middle"> </p>
<p>Bendera Amerika
<image src = "../gambar/usa.gif" align="top"> </p>
</body>
Listing 7.1 image_align.htm
25
7.Image HTML
Pemrograman Web
Gambar 7.1 hasil eksekusi image_align.htm
Contoh berikut memperlihatkan pemakaian align : left, right, dan center (listing 7.2) dan
hasilnya dapat dilihat dalam gambar 7.2.
<!—Image : align 2 -->
<html>
<head>
<title>Contoh Image : align </title>
</head>
<body>
<p>
<image src = "../gambar/usa.gif" align="left">Bendera Amerika di kiri </p>
<p>bendera Amerika
<image src = "../gambar/usa.gif" align="center"> di tengah </p>
<p>
<image src = "../gambar/usa.gif" align="right"> Bendera Amerika di kanan</p>
</body>
</html>
Listing 7.2 image_align2.htm
Gambar 7.2 Hasil eksekusi image_align2.htm
26
7.Image HTML
Pemrograman Web
7.2 Pengaturan Ukuran Gambar
Untuk mengatur ukuran gambar dalam halaman web kita dapat memakai atribut
Height dan Width. Format atau sintax dari atribut ini adalah :
<img src = “namaimage” width =”nilai” height =”nilai”>
Berikut ini adalah contoh dokumen HTML yang menggunakan atribut height dan width
(listing 7.3).
<!—Image : width-height -->
<html>
<head>
<title>Contoh Image : align </title>
</head>
<body>
<p>Bendera Inggris
<image src = "../gambar/great-britain.gif" width = "30" height="20"> </p>
<p>Bendera Inggris
<image src = "../gambar/great-britain.gif" width = "55" height="45"> </p>
<p>Bendera Inggris
<image src = "../gambar/great-britain.gif" width = "80" height="70"> </p>
</body>
</html>
Listing 7.3 image_wh.htm
Hasil eksekusi dari listing 7.3 (image_wh.htm) diperlihatkan dalam gambar 7.3 di bawah ini.
Gambar 7.3 hasil eksekusi image_wh.htm
27
7.Image HTML
Pemrograman Web
7.3 Teks sebagai Alternatif bagi Image
Beberapa browser tidak mampu menampilkan gambar. Dan ada beberapa user yang
me- non aktifkan kemampuan menampilkan gambar dari browser untuk mempercepat proses
download halaman web. HTML menyediakan atribut untuk menampilkan teks sebagai
alternatif bagi image yaitu atribut ALT. Teks akan ditampilkan secara mengambang untuk
memberi tahu maksud dari gambar, dan teks ini ini akan muncul jika kita meletakkan pointer
mouse diatas gambar. Format atau sintax dari atribut ini adalah :
<img src = “namaimage” alt=”teks”>
Berikut ini adalah contoh dokumen HTML yang menggunakan atribut ALT (listing 7.4)
sedangkan hasilnya dapat dilihat dalam gambar 7.4.
<!—Image : alt -->
<html>
<head>
<title>Contoh Image : alt </title>
</head>
<body>
<p>Welcome to
<image src = "../gambar/usa.gif" alt="This Our Flag"> United States of America </p>
</body>
</html>
Listing 7.4 image_alt.htm
Gambar 7.4 hasil eksekusi image_alt.htm
7.4 Image sebagai Link
Dalam halaman web, gambar dapat kita pakai untuk melakukan link ke dokumen
HTML atau halaman web yang lain. Di samping itu pembuatan menu dalam halaman web
28
7.Image HTML
Pemrograman Web
akan tampak lebih menarik jika ditampilkan dengan gambar. Dimana dengan mengklik salah
satu item kita akan melakukan link ke halaman web atau dokumen HTML yang lain. Format
atau sintaks untuk melakukan link dengan gambar adalah :
<a href=”dokumen_html”><img src = “namaimage” >
Dokumen HTML berikut akan memberikan contoh tentang pemakaian link dengan gambar.
Buatlah dulu file aboutsinga.htm (listing 7.5) di bawah ini. Kemudian buat file
image_link.htm (listing 7.6). Selanjutnya buka file image_link.htm dengan browser IE maka
hasilnya adalah seperti gambar 7.5.
<html>
<head>
<title>Contoh Image : Link </title>
</head>
<body>
<h3>About Singapore...</h3>
<blockquote>Singapore is one of the countries in southeast asia<br>
The Smallest but the fastest economic's growth<br>
Because of strategic location <br>
so well known as The "Triangle Gold" country
</blockquote>
</body>
</html>
Listing 7.5 Aboutsinga.htm
<!—Image : link -->
<html>
<head>
<title>Contoh Image : Link </title>
</head>
<body>
<p>Welcome to The "Triangle Gold" Singapore
<a href ="aboutsinga.htm"><image src = "../gambar/singapore.gif">
</a> </p>
</body>
</html>
Listing 7.6 Image_link.htm
29
7.Image HTML
Pemrograman Web
Klik di sini
Gambar 7.5 Hasil eksekusi Image_link.htm
Jika pointer mouse diarahkan pada gambar bendera dan mengkliknya maka akan dihasilkan
gambar 7.6.
Gambar 7.6 Hasil link
30
8.List dan Tabel
Pemrograman Web
VIII. LIST dan TABEL
8.1 LIST
Pada umumnya untuk menguraikan sesuatu dari hal yang umum ke hal yang lebih
terperinci kita memakai list (daftar). Dalam HTML dikenal 3 jenis list yaitu :
 List dengan nomer (ordered list)
 List tanpa nomer (unordered list)
 List definisi (definition list)
8.1.1 List dengan Nomer (Ordered List)
List dengan nomer adalah model list yang setiap itemnya diberi nomer. Untuk
membuat list dengan nomer dalam HTML kita menggukan tag <ol>. Adapun sintax dari tag
<ol> ini adalah :
<ol >
<li> item_list1</li>
<li> item_list2</li>
<li> item_listn</li>
</ol>
Nomer item secara default memakai angka 1, 2, 3, …. Model angka dalam list dapat diubah
dengan mengubah atribut type dalam list seperti diperlihatkan dalam tabel di bawah ini.
Tipe
Arti
I
Ditampilkan dengan angka Romawi huruf besar
i
Ditampilkan dengan angka Romawi huruf kecil
a
Ditampilkan dengan abjad huruf kecil
A
Ditampilkan dengan abjad huruf besar
Sedangkan untuk mengatur nomer awal yang digunakan pada list kita memakai atribut start.
Untuk lebih jelasnya berikut ini akan diberikan contoh pemakaian list beserta atributnya
seperti diperlihatkan dalam listing 8.1.(file list_ol.htm).

<html>
<body>
<h3> list dengan nomer</h3>
<ol>
<li>Pisang </li>
<li>Apel </li>
<li>Mangga </li>
<li>Jeruk </li>
</ol>
<h3> list dengan nomer : huruf besar</h3>
<ol type ="A">
<li>Pisang </li>
<li>Apel </li>
31
8.List dan Tabel
<li>Mangga </li>
<li>Jeruk </li>
</ol>
<h3> list dengan nomer : huruf romawi besar</h3>
<ol type ="I">
<li>Pisang </li>
<li>Apel </li>
<li>Mangga </li>
<li>Jeruk </li>
</ol>
<h3> list dengan nomer : huruf romawi kecil</h3>
<ol type ="i">
<li>Pisang </li>
<li>Apel </li>
<li>Mangga </li>
<li>Jeruk </li>
</ol>
</body>
</html>
Pemrograman Web
Listing 8.1 List_ol.htm
Sedangkan hasil dari list_ol.htm jika dibuka dalam browser adalah seperti diperlihatkan
dalam gambar 8.1
Gambar 8.1 Hasil eksekusi list_ol.htm
8.1.2 List tanpa Nomer (Unordered List)
List tanpa nomer adalah model list yang setiap itemnya tanpa diberi nomer. List tanpa
nomer sering disebut bulleted list. Untuk membuat list tanpa nomer dalam HTML kita
menggukan tag <ul>. Adapun sintax dari tag <ul> ini adalah :
<ul >
<li> item_list1</li>
<li> item_list2</li>
<li> item_listn</li>
</ul>
32
8.List dan Tabel
Pemrograman Web
Setiap item dalam list tanpa nomer diberi bullet. Model bullet dalam list dapat diubah
dengan mengubah atribut type dalam list seperti diperlihatkan dalam tabel di bawah ini.
Tipe
Bentuk bullet
Disc
noktah tanpa arsiran di dalamnya
Circle
Lingkaran
Square
Kotak tanpa arsiran
Untuk lebih jelasnya berikut ini akan diberikan contoh pemakaian list beserta atributnya
seperti diperlihatkan dalam listing 8.2.(file list_ul.htm).

<html>
<body>
<h3> list : bullet lingkaran diarsir</h3>
<ul type ="disc">
<li>Pisang </li>
<li>Apel </li>
<li>Mangga </li>
<li>Jeruk </li>
</ul>
<h3> list : bullet lingkaran tanpa arsiran</h3>
<ul type ="circle">
<li>Pisang </li>
<li>Apel </li>
<li>Mangga </li>
<li>Jeruk </li>
</ul>
<h3> list : bullet kotak tanpa arsiran</h3>
<ul type ="square">
<li>Pisang </li>
<li>Apel </li>
<li>Mangga </li>
<li>Jeruk </li>
</ul>
</body>
</html>
Listing 8.2 list_ul.htm
Gambar 8.2 Hasil eksekusi list_ul.htm
33
8.List dan Tabel
Pemrograman Web
8.1.3 List Definisi (Definition List)
List tanpa nomer adalah model list yang memberikan uraian terhadap suatu item
dalam list tersebut. Untuk membuat list definisi dalam HTML kita menggukan tag <dl>.
Adapun sintax dari tag <dl> ini adalah :
<dl >
<dt> item_list1</dt>
<dd> item_list2</dd>
</dl>
--definisi term
--definisi description
Di bawah ini diberikan contoh pemakaian list definisi (listing 8.3). Dan hasilnya dapat dilihat
dalam gambar 8.3.

<html>
<body>
<h3> list definisi</h3>
<dl>
<dt>Pisang </dt>
<dd>pisang Ambon</dd>
<dd>pisang Raja</dd>
<dd>pisang kepok</dd>
<dt>Apel </dt>
<dd>Apel Fuji </dd>
<dd>Apel Manalagi</dd>
<dd>Apel New Zeeland</dd>
</dl>
</body>
</html>
Listing 8.3 list_dl.htm
Gambar 8.3 Hasil eksekusi list_dl.htm
34
8.List dan Tabel
Pemrograman Web
8.2 TABEL
Untuk menyajikan data dalam bentuk baris dan kolom maka digunakan elemen tabel.
Di dalam HTML elemen-elemen yang diperlukan untuk membuat tabel adalah :
Elemen
Penjelasan
<table>…</table>
Mendefinisikan sebuah tabel dalam HTML
<caption>…</caption>
Mendefinisikan tulisan untuk judul tabel
<tr>…</tr>
Membuat sebuah baris baru pada tabel
<td>…</td>
Mendefinisikan sebuah kolom pada tabel
<th>…</th>
Mendefinisikan sel header tabel
Elemen atau tag <table> mempunyai atribut yaitu :
Atribut
Penjelasan
Border
Mengatur ketebatan garis tepi tabel
Cellpadding
Mengatur spasi atau jarak antara sel dan bordernya
Cellspacing
Mengatur jarak antar sel
Background
Memberi background pada tabel
Elemen atau tag <td> dan <th> memiliki beberapa atribut yaitu :
Atribut
Align = left|center|right
Penjelasan
Mengatur posisi horisontal data
Valign = top|middle|bottom Mengatur posisi vertikal data
Colspan = n
Mengatur n lebar kolom
Rowspan = n
Mengatur n tinggi baris
Nowrap
Menonaktifkan pinggiran (wrapping) sel
8.2.1 Border
Untuk mengatur ukuran ketebalan garis pinggir dari tabel digunakan atribut border.
Adapun format dari atribut border adalah :
<table border = “tebal_border” > …</table>
Berikut ini akan diberikan contoh dokumen HTML (listing 8.4) tentang pembuatan tabel
dengan mengatur atribut border. Hasilnya dapat dilihat dalam gambar 8.4
<html>
<body>
35
8.List dan Tabel
<h4>Border Normal</h4>
<table border = ”1”>
<tr>
<td>Kesatu</td>
<td>barisnya</td>
</tr>
<tr>
<td>Kesatu</td>
<td>barisnya</td>
</tr>
</table>
<h4>Border Tebal</h4>
<table border = ”8”>
<tr>
<td>Kesatu</td>
<td>barisnya</td>
</tr>
<tr>
<td>Kesatu</td>
<td>barisnya</td>
</tr>
</table>
<h4>Border Sangat Tebal</h4>
<table border = ”0”>
<tr>
<td>Kesatu</td>
<td>barisnya</td>
</tr>
<tr>
<td>Kesatu</td>
<td>barisnya</td>
</tr>
</table>
</body>
</html>
Pemrograman Web
Listing 8.4 tabel_border.htm
36
8.List dan Tabel
Pemrograman Web
Gambar 8.4 Hasil dari tabel_border.htm
8.2.2 Cellpadding
Untuk membuat spasi antara sel dan bordernya dipakai atribut Cellpadding. Adapun
format dari atribut ini adalah :
<table border = “tebal_border” cellpadding = “nilai”> …</table>
Berikut ini contoh dokumen HTML (listing 8.5) tentang pemakaian atribut cellpadding.
Hasilnya dapat dilihat dalam gambar 8.5.
<html>
<body>
<h4>Tanpa Cellpadding</h4>
<table border = "1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>second</td>
<td>Row</td>
</tr>
</table>
<h4>Dengan Cellpadding</h4>
<table border = "1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Listing 8.5 Tabel_cellpad.htm
37
8.List dan Tabel
Pemrograman Web
Gambar 8.5 Hasil dari tabel_cellpad.htm
8.2.3 Cellspacing
Untuk membuat spasi atau jarak antara sel atribut Cellspacing. Adapun format dari
atribut ini adalah :
<table border = “tebal_border” cellspacing = “nilai”> …</table>
Berikut ini contoh dokumen HTML (listing 8.6) tentang pemakaian atribut cellspacing.
Hasilnya dapat dilihat dalam gambar 8.6.
<html>
<body>
<h4>Tanpa Cellspacing</h4>
<table border = "1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>second</td>
<td>Row</td>
</tr>
</table>
<h4>Dengan Cellspacing</h4>
<table border = "1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Listing 8.6 Tabel_cellspacing.htm
38
8.List dan Tabel
Pemrograman Web
Gambar 8.6 Hasil dari tabel_cellspacing.htm
8.2.4 Caption
Untuk menampilkan judul atau nama tabel digunakan tag Caption. Adapun format
dari tag caption adalah :
<table border = “tebal_border” >
<caption > Judul atau Nama tabel </caption>
</table>
Di bawah ini contoh dokumen HTML (listing 8.7) tentang pemakaian tag caption. Hasilnya
dapat dilihat dalam gambar 8.7.
<html>
<body>
<h4>Tabel dengan Caption</h4>
<table border = "1">
<caption> My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
39
8.List dan Tabel
Pemrograman Web
Listing 8.7 Tabel_caption.htm
Gambar 8.7 Hasil dari tabel_caption.htm
8.2.5 Header
Berfungsi untuk menampilkan Header tabel atau judul tiap kolom tag <th>. Adapun
format dari Header adalah :
<table border = “tebal_border” >
<tr>
<th>teks judul kolom-1</th>
<th>teks judul kolom-2</th>
<th>teks judul kolom-n</th>
</tr>
</table>
Di bawah ini contoh dokumen HTML (listing 8.8) tentang pemakaian tag <th>. Hasilnya
dapat dilihat dalam gambar 8.8.
<html>
<body>
<h4>Tabel Header</h4>
<table border = "1">
<tr>
<th>Nama</td>
<th>Telepon</td>
</tr>
<tr>
<td>Budi Sanjaya</td>
<td>0361-255521</td>
</tr>
</table>
<h4>Vertical Header</h4>
<table border = "1">
<tr>
<th>Nama</td>
<td>Budi Sanjaya</td>
</tr>
<tr>
<th>Telepon</td>
<td>0361-255521</td>
</tr>
</table>
</body>
</html>
Listing 8.8 Tabel_header.htm
40
8.List dan Tabel
Pemrograman Web
Gambar 8.8 Hasil dari tabel_header.htm
8.2.6 Pengaturan Lebar kolom (Colspan) dan Tinggi baris (rowspan)
Colspan dan rowspan merupakan atribut yang dipakai pada tag <th>. Atribut colspan
berfungsi untuk mengatur lebar kolom, sedangkan atribut rowspan dipakai untuk mengatur
tinggi baris. Adapun formatnya adalah :
<table border = “tebal_border” >
<tr>
<th colspan=”lebar_kolom”>teks judul kolom</th>
</tr>
<tr>
<th rowspan=”tinggi_baris”>teks judul kolom</th>
</tr>
</table>
Di bawah ini contoh dokumen HTML (listing 8.9) tentang pemakaian tag <th>. Hasilnya
dapat dilihat dalam gambar 8.9.
<html>
<body>
<h4>Lebar kolom : Colspan</h4>
<table border = "1">
<tr>
<th>Nama</td>
<th colspan = "2">Telepon</td>
</tr>
<tr>
<td>Budi Sanjaya</td>
<td>0361-255521</td>
<td>0361-255532</td>
</tr>
</table>
<h4>Tinggi Baris : rowspan</h4>
<table border = "1">
<tr>
<th>Nama</td>
<td>Budi Sanjaya</td>
</tr>
<tr>
<th rowspan="2">Telepon</td>
<td>0361-255521</td>
</tr>
8.List dan Tabel
<tr>
<td>0361-255532</td>
</tr>
Pemrograman Web
</table>
</body>
</html>
Listing 8.9 Tabel_col_row.htm
Gambar 8.9 Hasil dari tabel_col_row.htm
8.2.7 Sel Kosong (empty cell)
Di dalam tabel sering kita jumpai sebuah sel sengaja dikosongkan. Adapun formatnya
adalah :
<table >
<tr>
<td></td>
</tr>
</table>
Di bawah ini contoh dokumen HTML (listing 8.10) tentang pemakaian tag <th>. Hasilnya
dapat dilihat dalam gambar 8.10.
<html>
<body>
<h4>Sel kosong</h4>
<table border = "1">
<tr>
<td>Budi Sanjaya</td>
<td>0361-255521</td>
</tr>
<tr>
<td></td>
<td>0361-255532</td>
</tr>
</table>
</body>
</html>
8.List dan Tabel
Pemrograman Web
Listing 8.10 Tabel_empty_cell.htm
Gambar 8.10 Hasil dari tabel_empty_cell.htm
8.2.8 Background Tabel
Untuk menampilkan background atau latar belakang pada tabel maka kita dapat
menggunakan atribut background. Adapun latar belakang yang dipakai adalah file gambar
(image). Adapun formatnya adalah :
<table border = “tebal_border” background =”nama_file_background”>
…teks informasi…
</table>
Di bawah ini contoh dokumen HTML (listing 8.11) tentang pemakaian atribut background.
Hasilnya dapat dilihat dalam gambar 8.11.
<html>
<body>
<h4>BackGround Image</h4>
<table border = "1" background ="../gambar/bgsearch.gif">
<tr>
<td>Budi Sanjaya</td>
<td>0361-255521</td>
</tr>
<tr>
<td></td>
<td>0361-255532</td>
</tr>
</table>
</body>
</html>
8.List dan Tabel
Pemrograman Web
Listing 8.11 Tabel_background.htm
Gambar 8.11 Hasil dari tabel_background.htm
8.2.9 Pengaturan Teks dalam Sel Tabel (Alignment)
Untuk mengatur tampilan teks dalam sel tabel maka kita dapat menggunakan atribut
Align pada tag <td>. Ada 3 jenis align yaitu : left, right, center. Formatnya adalah :
<table >
<td align = “left|center|right”> …teks informasi…</td>
</table>
Di bawah ini contoh dokumen HTML (listing 8.12) tentang pemakaian atribut align.
Hasilnya dapat dilihat dalam gambar 8.12.
<html>
<body>
<table width
<tr>
<th align
<th align
<th align
</tr>
<tr>
<td align
<td align
<td align
</tr>
<tr>
<td align
<td align
<td align
</tr>
<tr>
<td align
<td align
<td align
= "400" border = "1">
= "left">Nomer</td>
= "right">Nama </td>
= "right">Alamat </td>
= "left">1</td>
= "right">Agus Sanjaya </td>
= "right">Jln.Serpong damai 11 </td>
= "left">2</td>
= "right">Budi Hartono </td>
= "right">Jln. M.T. Haryono 2 </td>
= "left">3</td>
= "right">Candra Hidayat </td>
= "right">Jln. Pahlawan 15 </td>
8.List dan Tabel
</tr>
</table>
</body>
</html>
Pemrograman Web
Listing 8.12 Tabel_align.htm
8.2.10 Atribut Frame
Gambar 8.12 Hasil dari tabel_align.htm
Untuk mengatur tipe frame dari border tabel maka kita bisa menggunakan atribut
frame. Formatnya adalah :
<table frame =”tipe_frame”>
</table>
Ada beberapa jenis tipe frame seperti diperlihatkan dalam tabel di bawah ini :
Tipe Frame
Penjelasan
Border
Frame seluruh sisi sel
Box
Frame seluruh sisi sel
void
Tanpa frame
Above
Frame hanya di sisi atas sel
Below
Frame hanya di sisi bawah sel
Hsides (horizontal sides)
Frame di seluruh sisi horizontal sel
Vsides (vertical sides)
Frame di seluruh sisi vertikal sel
Lhs (left horizontal side)
Frame hanya di sisi kiri sel
Rhs (right horizontal side)
Frame hanya di sisi kanan sel
Di bawah ini contoh dokumen HTML (listing 8.13) tentang pemakaian atribut frame.
Hasilnya dapat dilihat dalam gambar 8.13.
<html>
<body>
<h4>frame : border</h4>
<table frame = "border">
8.List dan Tabel
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : box</h4>
<table frame = "box">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : void</h4>
<table frame = "void">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : above</h4>
<table frame = "above">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : below</h4>
<table frame = "below">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
Pemrograman Web
<td>kedua</td>
</tr>
</table>
<h4>frame : horizontal sides</h4>
<table frame = "hsides">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : vertical sides</h4>
<table frame = "vsides">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : left horizontal</h4>
<table frame = "lhs">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
<h4>frame : right horizontal</h4>
<table frame = "rhs">
<tr>
<td>baris</td>
<td>pertama</td>
</tr>
<tr>
<td>baris</td>
<td>kedua</td>
</tr>
</table>
</body>
</html>
Listing 8.13 Tabel_frame.htm
27
8.List dan Tabel
Pemrograman Web
Gambar 8.13 Hasil dari tabel_frame.htm
Latihan :
1.Buatlah dokumen HTML untuk menampilkan sistem Kalender seperti gambar 8.14 di
bawah ini. Jika salah satu nama bulan : Januari, Februari,….,Desember, diklik maka akan
menampilkan tanggal pada bulan yang bersangkutan. Pada gambar tampak bulan Oktober,
Dan pada bulan Oktober tersebut terdapat beberapa tanggal penting. Dimana apabila
tanggal penting tersebut (misal : tanggal 31) dipilih akan menampilkan
peristiwa atau catatan pada tanggal tersebut (seperti gambar 8.15).
keterangan
8.List dan Tabel
Pemrograman Web
Gambar 8.14 Sistem Kalender
Gambar 8.15 Tampilan tanggal 31 Oktober
9.Frame
Pemrograman Web
IX. FRAME
Untuk menampilkan beberapa halaman web dalam satu browser kita dapat memakai
elemen frame. Window dalam browser akan dibagi menjadi beberapa sub windows. Model
ini biasanya dipakai untuk menampilkan detil informasi tanpa menghilangkan tampilan menu
utama. Adapun sintax dari frame adalah :
<frameset border = # {[rows|cols]={#,[#,…]]>
<Frame src = “url” name = “namaframe”>
</frameset>
9.1 Frame Kolom
Dalam frame kolom maka windows browser akan dibagi menjadi beberapa frame
kolom. Berikut ini adalah contoh dokumen HTML tentang frame kolom (listing 9.1).
<html>
<frameset cols="25%,50%,25%">
<frame src="sun.htm">
<frame src="venus.htm">
<frame src="mercur.htm">
</frameset>
</html>
Listing 9.1 Frame_kolom.htm
Sementara itu masing-masing frame akan mengacu pada file HTML yang lain yaitu :
sun.htm., venus.htm, dan mercur.htm. Untuk itu kita perlu membuat file-file tersebut terlebih
dahulu.
<html>
<body>
<p>
Selamat datang di matahari
<br>Semoga matahari ini menyejukkan
</p>
<hr>
Kembali ke <a href="coba_imagempap.html">tata surya</a>
</body>
</html>
Listing 9.2 sun.htm
<html>
<body>
<p>
Selamat datang di Planet Venus
<br>Ini sepertinya Dewi Venus
</p>
<hr>
Kembali ke <a href="coba_imagempap.html">tata surya</a>
</body>
</html>
Listing 9.3 venus.htm
49
9.Frame
Pemrograman Web
<html>
<body>
<p>
Selamat datang di Planet Merkurius
<br>Terasa Planet ini terbesar setelah matahari
</p>
<hr>
Kembali ke <a href="coba_imagempap.html">tata surya</a>
</body>
</html>
Listing 9.4 mercur.htm
Hasil dari listing 9.1 diperlihatkan dalam gambar 9.1 di bawah ini.
Gambar 9.1 Hasil eksekusi frame_kolom.htm
9.2 Frame Baris
Dalam frame baris maka windows browser akan dibagi menjadi beberapa frame
baris. Berikut ini adalah contoh dokumen HTML tentang frame baris (listing 9.2).
<html>
<frameset rows="25%,50%,25%">
<frame src="sun.htm">
<frame src="venus.htm">
<frame src="mercur.htm">
</frameset>
</html>
Listing 9.5 Frame_baris.htm
Hasil dari listing 9.5 ditunjukkan dalam gambar 9.2 berikut ini.
50
9.Frame
Pemrograman Web
Gambar 9.2 Hasil eksekusi dari frame_baris.htm
9.3 Frame Navigasi
Dalam frame navigasi maka windows browser akan dibagi menjadi beberapa frame.
Frame pertama disebut sebagai frame navigasi yang berisi daftar link dan frame kedua
sebagai frame target. Berikut ini adalah contoh dokumen HTML tentang frame navigasi
(listing 9.6).
<html>
<frameset cols="180,*" frameborder="1">
<frame src="tata_surya.htm">
<frame src="sun.htm" name="frame2">
</frameset>
</html>
Listing 9.6 Frame_navigasi.htm
Frame pertama (navigasi) mengacu pada file HTML yaitu : tata_surya.htm dan frame
kedua (target) mengacu pada file : sun.htm. Dimana listing tata_surya.htm diperlihatkan
dalam listing 9.7 berikut ini :
<html>
<body>
<p>
Selamat datang Tata Surya
<br>
</p>
<hr>
<a href="sun.htm" target="frame2">matahari</a><br>
<a href="venus.htm" target="frame2">Venus</a> <br>
<a href="mercur.htm" target="frame2">merkurius</a>
</body>
</html>
Listing 9.7 tata_surya.htm
51
9.Frame
Pemrograman Web
Hasil eksekusi dari listing 9.6 (frame_navigasi.htm) ditunjukkan dalam gambar 9.3 di bawah
ini.
Frame navigasi
Frame target
Gambar 9.3 Hasil eksekusi frame_navigasi.htm
Dalam gambar 9.3 tampak ada 3 link yaitu : matahari, venus, dan merkurius. Jika salah satu
dipilih (di-klik) maka akan menampilkan link yang bersesuaian pada frame target. Misalnya
jika venus di-klik maka akan menampilkan file venus.htm pada frame target (gambar 9.4).
Gambar 9.4 Hasil link venus.htm
Latihan :
1.Buatlah dokumen HTML untuk menampilkan sistem Kalender tahun 2007 dengan
menggunakan frame navigasi seperti diperlihatkan gambar 9.5 di bawah ini. Jika salah satu
nama bulan : Januari, Februari,….,Desember, diklik maka akan menampilkan tanggal pada
bulan yang bersangkutan pada frame target. Pada gambar tampak bulan Oktober 2007.
52
9.Frame
Pemrograman Web
53
10.Form
Pemrograman Web
X. FORM
Fo rm
merupakan elemen HTML yang digunakan untuk mendapatkan masukan atau
input dari pengguna web. Adapun sintax dari f or m adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
</FORM>
atribut ACTION :
menyatakan alamat url (url address) yang akan dipakai sebagai
pemroses data input form.URL adalah lokasi dokumen yang akan
melakukan proses terhadap input dari form.
Atribut METHOD : untuk menyatakan bagaimana masukan atau input yang berasal dari
form dikirimkan ke program aplikasi CGI ( program aplikasi yang dapat
dijalankan oleh server web).
Dalam form terdapat beberapa tipe masukan antara lain :
 Text
 Radio button
 Check box
 Button
 Text area , dll
Tiap-tiap jenis input atau masukan dinyatakan dengan atribut ty p e dalam HTML.
10.1 Input T e x t
Digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai
yang dimasukkan dapat berupa angka maupun teks. Adapun format atau sintax dari input
text adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”text” name = “nama_var” size = “panjang_text”>
</FORM>
atribut name : untuk membuat nama variabel sebagai tempat menyimpan teks
atribut si z e : untuk menyatakan panjang teks
Berikut ini adalah contoh dokumen HTML tentang form dengan input text (listing
10.1). Hasilnya dapat dilihat dalam gambar 10.1

<html>
<body>
<form>
Nama :
<input type="text" name ="nama" size="10">
<br>
Alamat :
<input type="text" name ="alm" size="30">
54
</form>
</body>
</html>
Listing 10.1 Form_text.htm
Gambar 10.1 Hasil eksekusi Form_text.htm
10.2 Input C h e c k
box
Digunakan untuk memasukkan suatu nilai lewat beberapa pilihan. Kita bisa memilih
satu atau lebih pilihan yang disediakan. Adapun format atau sintax dari input check box
adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”checkbox” name = “nama_var-1” [checked]>nama_pilihan-1
<input type =”checkbox” name = “nama_var-2” [checked]>nama_pilihan-2
<input type =”checkbox” name = “nama_var-n” [checked]>nama_pilihan-n
</FORM>
atribut name
: untuk membuat nama variabel sebagai tempat menyimpan pilihan
atribut checked : bersifat optional, jika kita menuliskan atribut ini maka kita memilih
variabel tersebut
Berikut ini adalah contoh dokumen HTML tentang form dengan input check box
(listing 10.2). Hasilnya dapat dilihat dalam gambar 10.2

<html>
<body>
HOBI
<form>
<input type="checkbox" name ="T" checked>Tenis
<br>
<input type="checkbox" name ="J">Jogging
<br>
<input type="checkbox" name ="R">Renang
<br>
<input type="checkbox" name ="B">Basket</form>
</body>
</html>
Listing 10.2 Form_cbox.htm
55
10.Form
Pemrograman Web
Gambar 10.2 Hasil eksekusi Form_cbox.htm
10.3 Input R a d i o b u t t o n
Hampir sama dengan check box, radio button (tombol radio) digunakan untuk
memasukkan suatu nilai lewat beberapa pilihan. Kita hanya bisa memilih satu pilihan dari
beberapa pilihan. Adapun format atau sintax dari input radio button adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”radio” name = “nama_var” [checked]>nama_pilihan-1
<input type =”radio” name = “nama_var” [checked]>nama_pilihan-2
<input type =”radio” name = “nama_var” [checked]>nama_pilihan-n
</FORM>
atribut name
: untuk membuat nama variabel sebagai tempat menyimpan pilihan
atribut checked : bersifat optional, jika kita menuliskan atribut ini maka kita memilih
variabel tersebut
Berikut ini adalah contoh dokumen HTML tentang form dengan input radio button
(listing 10.3). Hasilnya dapat dilihat dalam gambar 10.3

<html>
<body>
AGAMA
<form>
<input type="radio" name ="agm" checked>Hindu
<br>
<input type="radio" name ="agm" >Islam
<br>
<input type="radio" name ="agm" >Kristen
<br>
<input type="radio" name ="agm" >Budha
</form>
</body>
</html>
Listing 10.3 Form_radio.htm
56
Gambar 10.3 Hasil eksekusi Form_radio.htm
10.4 Input B u t t o n
Digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Ada 2
macam tipe button yaitu : Submit dan Reset. Tombol Submit dipakai untuk memanggil url
setelah input selesai dimasukkan. Sedangkan tombol Reset digunakan untuk menginisialisasi
setiap elemen pada form.Adapun format atau sintax dari input bu tt on su bmi t dan r e s et
adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type =”submit” value = “teks” >
<input type =”reset” value = “teks” >
</FORM>
atribut value : untuk menampilkan teks sebagai nama tombol
teks
: teks judul dari tombol
Berikut ini adalah contoh dokumen HTML tentang form dengan input button submit
dan reset (listing 10.4). Hasilnya dapat dilihat dalam gambar 10.4

<html>
<body>
<form action="form_action.asp" method = "get">
Masukkan nama :&nbsp;&nbsp;
<input type="text" name ="nama">
<br>
Masukkan alamat :
<input type="tex" name ="alm">
<br>
<input type="submit" value ="kirim">
<input type="reset" value ="reset">
</form>
</body>
</html>
Listing 10.4 Form_button.htm
57
10.Form
Pemrograman Web
Gambar 10.4 Hasil eksekusi Form_button.htm
10.5 Input D r o p d o w n b o x
Digunakan untuk memasukkan suatu nilai lewat beberapa pilihan.Adapun format atau
sintax dari input Dro pd ow n b o x adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<select name = “nama_var” >
<option value = “nama_option-1” [selected]>option-1
<option value = “nama_option-2” [selected]>option-2
…
<option value = “nama_option-n” [selected]>option-n
</select>
</FORM>
Berikut ini adalah contoh dokumen HTML tentang form dengan input dropdown box
(listing 10.5). Hasilnya dapat dilihat dalam gambar 10.5

<html>
<body>
Merek mobil yang anda suka :
<form >
<select name ="cars">
<option value ="volvo">Volvo
<option value ="toyota">toyota
<option value ="fiat" selected>fiat
<option value ="audi">audi
</select>
</form>
</body>
</html>
Listing 10.5 Form_dropdown.htm
58
Gambar 10.5 Hasil eksekusi Form_dropdown.htm
10.6 Input t e x t a r e a
Digunakan untuk memasukkan suatu data berupa teks atau memo.Adapun format
atau sintax dari input tex t a r ea adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<textarea rows = “nilai” cols = “nilai” >
…teks_informasi…
</textarea>
</FORM>
Berikut ini adalah contoh dokumen HTML tentang form dengan input text area
(listing 10.6). Hasilnya dapat dilihat dalam gambar 10.6.

<html>
<body>
Keterangan
<form>
<textarea rows="5" cols="50">
Pendidikan terakhir S2 Program Magister
Ilmu komputer di Universitas Gadjah Mada Jogyakarta
</textarea>
</form>
</body>
</html>
Listing 10.6 Form_textarea.htm
59
10.Form
Pemrograman Web
Gambar 10.6 Hasil eksekusi Form_textarea.htm
10.7 Input I m a g e
Digunakan untuk mengganti tombol (button), berupa tombol yang berbentuk
gambar.Adapun format atau sintax dari input i mage adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type = “image” src=”url_address”>
</FORM>
src
: alamat url dari file gambar yang akan dipakai.
Berikut ini adalah contoh dokumen HTML tentang form dengan input image (listing
10.7). Hasilnya dapat dilihat dalam gambar 10.7.

<html>
<body>
<form action="form_action.asp" method = "get">
Masukkan nama :&nbsp;&nbsp;
<input type="text" name ="nama">
<br>
Masukkan alamat :
<input type="text" name ="alm">
<br>
<input type="image" src="../gambar/usa.gif">
</form>
</body>
</html>
Listing 10.7 Form_image.htm
60
Gambar 10.7 Hasil eksekusi Form_image.htm
61
11.CSS (Cascade Style Sheet)
Pemrograman Web
XI. CSS (Cascade Style Sheet)
CSS merupakan fitur (feature) baru dari HTML. Hal ini diperlukan setelah melihat
perkembangan dari HTML menjadi kurang praktis karena Web Pages terlalu banyak
dibebani oleh hal-hal yang berhubungan dengan faktor tampilan (style) seperti font, color,
background, dan lain-lain. Untuk itu akan lebih efisien jika pengaturan tampilan/style
tersebut dikelola secara terpisah.
11.1 Aturan Penggunaan CSS
Secara umum CSS disusun oleh 3 bagian yaitu :
 Selector , yaitu elemen (tag) yang akan didefinisikan
 Property, yaitu atribut yang akan diubah
 Value, yaitu nilai yang akan diberikan pada atribut
Adapun format atau sintax dari penulisan CSS adalah
SELECTOR {PROPERTY : VALUE}
Contoh :
Body { color : black}
Jika nilai terdiri dari beberapa kata, maka gunakan tanda petik ganda.
Contoh :
P { font-family : ”sans serif”}
Jika lebih dari satu property pisahkan dengan titik koma (semi colon).
Contoh :
P { text-align : center; color : red}
Jika ingin lebih mudah dibaca maka dapat ditulis seperti berikut :
Contoh :
P
{
text-align : center
color:black
font-family : arial
}
atau jika selector dikelompokkan seperti contoh berikut ini :
Contoh :
H1, H2, H3, H4, H5, H6
{
Color:green
}
Jika menggunakan atribut class (dalam definisi CSS).
Contoh :
P.kanan {text-align : right}
P.kiri {text-align : left}
Berikut ini adalah contoh sintax HTML menggunakan definisi diatas :
<P class=”kanan”> Paragraf ini akan dicetak rata kanan</p>
<P class=”kiri”> Paragraf ini akan dicetak rata kiri</p>
Jika menggunakan ID atribut.
62
11.CSS (Cascade Style Sheet)
Pemrograman Web
Contoh : #kanan {text-align : right}
Berikut ini adalah contoh sintax HTML menggunakan definisi diatas :
<p id=”kanan”> Paragraf ini akan dicetak rata kanan</p>
<h3 id=”kanan”> Header ini juga akan dicetak rata kanan</h3>
11.2 Style Sheet External
CSS external adalah file HTML yang didefinisikan secara terpisah menjadi sebuah
file. Adapun extensi dari file ini adalah “ .c s s” . Berikut ini adalah contoh pemakaian style
sheet eksternal dengan nama : ex1.css. File ini akan dipakai untuk mengatur tampilan/style
dari file HTML yang bernama : coba_cssex1.htm.
Body {background-color : yellow}
h1{font-size : 36 pt}
h2{color : blue}
P{margin-left :50 px}
Listing 11.1 ex1.css
<!—coba_cssex1.htm-->
<html>
<head>
<link rel =”stylesheet” type=”text/css” href=”ex1.css”>
</head>
<body>
<h1> This header is 36 pt </h1>
<h2> This header is Blue </h1>
<p> this paragraph has a left margin of 50 pixels</p>
</body>
</html>
Listing 11.2 coba_cssex1.htm
Hasilnya dapat dilihat dalam gambar 11.1 berikut ini :
Gambar 11.1 Hasil eksekusi coba_cssex1.htm
63
11.CSS (Cascade Style Sheet)
Pemrograman Web
Listing 11.3 di bawah ini adalah contoh lain dari CSS. Sedangkan listing 11.4 adalah file
HTML yang menggunakan file CSS tersebut.
Body {background-color : tan}
h1{color : marron;font-size : 36 pt}
h2{color : navy}
P{font-size: 11 pt;margin-left :15 px}
a:link{color:green}
a:visited{color:yellow}
a:active{color:blue}
a:hover{color:black}
Listing 11.3 ex2.css

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex2.css">
</head>
<body>
<h1>ini adalah head 1 </h1>
<h2>head 2 warna biru </h2>
<p>Paragraf ini punya left margin 15 pixels dan font size 11 pt</p>
<p><a href="http://www.microsoft.com" target="_blank">
ini adalah link</a></p>
</body>
</html>
Listing 11.4 coba_cssex2.htm
Hasil eksekusi dari listing 11.4 diperlihatkan dalam gambar 11.2.
Gambar 11.2 hasil eksekusi coba_cssex2.htm
64
11.CSS (Cascade Style Sheet)
Pemrograman Web
11.3 Style Sheet Internal
CSS
internal didefinisikan secara langsung di dalam file HTML. Berikut ini adalah
contoh pemakaian style sheet yang didefinisikan secara i n te rn al .

<html>
<head>
<style type="text/css">
body{background-image: url("../gambar/bground.gif")}
hr{color:sienna}
p{font-size: 11 pt; margin-left: 15 px}
</style>
</head>
<body>
<p>Paragraf ini punya left margin 15 pixels dan font size 11 pt</p>
<hr>
</body>
</html>
Listing 11.5 coba_cssin1.htm
Hasilnya dapat dilihat dalam gambar 11.3 berikut ini :
Gambar 11.3 Hasil eksekusi coba_cssin1.htm
65
12.HTML Dinamik
Pemrograman Web
XIII. HTML DINAMIK
Selama ini pada bab-bab sebelumnya kita sudah membahas bagaimana merancang
Web yang sifatnya statik. Yang mana banyak berhubungan dengan masalah desain, layout,
dan seni. Jika ingin mengubah atau memperbaiki desain dan layout web site tersebut maka
akan dilakukan secara manual. Permasalahannya adalah bagaimana meng-update dan
memperbaiki data yang ada di dalam web site tersebut. Dalam hal inilah kita perlu
melakukan pemrograman halaman web sehingga bersifat dinamik. Dalam pemrograman web
dinamik ini kita bisa mengelola data seperti : menambah, mengubah, maupun menghapus.
Sehingga informasi yang disajikan dalam halaman web selalu uptodate (terbaru)
Ada banyak software pendukung untuk merancang web yang bersifat dinamik
misalnya : ASP, PHP, Java Script, VB script, dan lain-lain. Dalam bab ini kita akan
membahas yaitu : PHP.
Dalam PHP data-data akan disimpan di dalam database server seperti : MySQL.
Selanjutnya dengan PHP kita akan membuat sebuah program untuk mengakses database
dalam server
tersebut. Program tersebut sering disebut dengan s cri p t . Script tersebut
kemudian dapat kita panggil dari program atau file HTML.
Dalam file HTML elemen yang dapat kita gunakan untuk memasukkan input dari
user adalah elemen F o r m . Data masukan ini akan dikirim ke server saat melakukan request.
Dan saat server menerima request, maka request tersebut bukanlah suatu file HTML tetapi
suatu aplikasi yang harus dijalankan (script PHP), yang bisa menerima data-data masukan
yang disertakan dalam request sebagai parameter dari aplikasi (script PHP) yang harus
dijalankan tadi. Adapun langkah-langkah pembuatan Web dinamik dengan PHP adalah
seperti berikut ini.
13.1 Instalasi software PHP
Untuk meng-install PHP maka diperlukan program XAMPP. Disini kita akan
memakai xampp versi 1.8. Pertam kiat klik file : xam pp - wi n 32 - 1 .8 .1 - VC9 - i n stal l e r
Setelah itu ikuti langkah-langkah selanjutnya selama proses instalasi. Setelah proses instalasi
selesai maka anda tidak saja menginstall PHP tetapi juga secara langsung sudah menginstall
APACHE sebagai web servernya dan MySQL sebagai database servernya.
13.2 Membuat database dan tabel dengan MySQL
Untuk membuat database dengan PHP maka langkah-langkahnya adalah :
1.Jalankan web server Apache dengan jalan : Klik Start>All Program>PHPTriad>Apache
Console>Start Apache
66
12.HTML Dinamik
Pemrograman Web
2.Jalankan salah satu browser web misalnya : mozilla firefox, setelah itu pada bagian
address ketikkan alamat : http://localhost/phpmyadmin, maka akan muncul tampilan
seperti gambar 13.1
Gambar 13.1
3.Pada text box create new database ketikkan : karyawan. Kemudian klik tombol Create.
Berarti anda sudah membuat database baru dengan nama : karyawan. Setelah itu akan
muncul tampilan seperti gambar 13.2
Gambar 13.2
67
12.HTML Dinamik
Pemrograman Web
4.Pada text box Create Table on database karyawan ketiklah pada
name : karyawan.
Fields : 3
Kemudian klik Go. Berarti kita sudah membuat tabel karyawan dengan jumlah field 3
buah. Selanjutnya akan muncul tampilan seperti gambar 13.3
Gambar 13.3
5.Pada kolom -kolom ketikkan :
Field
T yp e
Le ng th / v a lu e s
Ni k
Va rch a r
4
Nam a
Va rch a r
30
Al amat
Va rch a r
50
Pr i m ar y
Berarti kita sudah membuat 3 field yaitu : nik, nama, alamat. Dimana field nik sebagai
primary key
Setelah itu klik tombol : Save
Dengan demikian dari 5 langkah tersebut diatas maka kita sudah membuat database yang
bernama karyawan dan tabel yang bernama karyawan.
13.3 Membuat Form untuk memasukkan data ke dalam tabel Karyawan
Untuk mengisi tabel karyawan dalam database karyawan kita perlu membuat form.
Adapun rancangan form yang ingin kita buat adalah seperti gambar 13.4.
68
12.HTML Dinamik
Pemrograman Web
Gambar 13.4 Rancangan Form
untuk membuat form seperti itu maka kita harus membuat sebuah file HTML seperti listing
13.1 berikut ini :

<html>
<head>
<title> Form entry pegawai</title>
</head>
<body>
<h1>Form Entry Data Pegawai</h1>
<form action="http:\\localhost\isi_pegawai.php" method="post">
<table>
<tr>
<td>NIK</td>
<td><input type="text" name="nik" size="10" maxlength="4"</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" size="20" maxlength="30"</td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" size="50" maxlength="50"</td>
</tr>
<tr>
<td colspan><input type="submit" value="simpan"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.1. forminputpegawai.htm
69
12.HTML Dinamik
Pemrograman Web
Ingat, simpanlah file forminputpegawai.htm tersebut di directori : c:\apache\htdocs
Dari listing 13.1 (forminputpegawai.htm) dapat dilihat bahwa ketika tombol simpan
ditekan maka akan memanggil program/script PHP dengan nama : isi_pegawai.php.
Untuk itu terlebih dahulu kita perlu membuat file i si _peg aw ai .ph p tersebut. Untuk itu
buatlah file tersebut pada editor notepad. Dimana isi dari file tersebut adalah seperti listing
13.2 di bawah ini.
<?php
$host="localhost";
$userdb="root";
$passdb="";
$namadb="karyawan";
$sambung=mysql_connect($host,$userdb,$passdb);
mysql_select_db($namadb,$sambung);
$nik1=$_POST[nik];
$nama1=$_POST[nama];
$alamat1=$_POST[alamat];
$sql="insert into karyawan (
nik ,nama,alamat
) values('$nik1','$nama1','$alamat1')";
$hasil=mysql_query($sql);
if ($hasil)
{
echo "tabel berhasil diisi";
}
else
{
echo "tabel gagal diisi";
}
?>
Listing 13.2. isi_pegawai.php
Ingat! Simpan file : isi_pegawai.php di directori : c:\apache\htdocs
Jalankan listing 13.1 (forminputpegawai.htm) dalam browser Internet Explorer maka akan
muncul tampilan seperti gambar 13.5. Pada text box isikan data – data berikut ini :
Nik
: 0001
Nama
: Budi Darmanto
Alamat
: Jln Pecenongan 11
Kemudian klik tombol Simpan. Jika data-data tersebut berhasil disimpan maka akan
muncul pesan : ”Tabel berhasil diisi”. Maka data-data tersebut akan disimpan dalam tabel
karyawan.
70
12.HTML Dinamik
Pemrograman Web
Gambar 13.5 Hasil eksekusi forminputpegawai.htm
Untuk melihat hasil penyimpanan data tersebut dalam tabel karyawan caranya adalah :
1.Dalam Internet Explorer bukalah database karyawan dengan cara mengetikkan
http://localhost/phpmyadmin pada bagian address kemudian klik Go. Sehingga akan
muncul tampilan seperti gambar 13.6.
Klik database
karyawan
Gambar 13.6 Buka database
2.Klik database karyawan (lihat gambar 13.6), maka akan muncul tampilan seperti
diperlihatkan dalam gambar 13.7.
71
12.HTML Dinamik
Pemrograman Web
Klik browse
Gambar 13.7 Lihat isi tabel karyawan
2.Klik browse (lihat gambar 13.7) maka akan muncul tampilan isi record dari tabel
karyawan seperti diperlihatkan dalam tabel 13.8
Gambar 13.8 Isi record tabel karyawan
Dapat dilihat dalam gambar 13.8 bahwa tabel karyawan telah berisi 1 record.
13.4 Membuat Form untuk mengedit data dalam tabel Karyawan
Untuk mengedit atau mengubah data dalam tabel karyawan maka kita perlu membuat
sebuah form. Adapun rancangan form adalah seperti gambar 13.9.
72
12.HTML Dinamik
Pemrograman Web
Gambar 13.9 Rancangan form edit
Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti
diperlihatkan dalam listing 13.3 di bawah ini.

<html>
<head>
<title> Form edit pegawai</title>
</head>
<body>
<h1>Form Edit Data Pegawai</h1>
<form action="http:\\localhost\edit_pegawai.php" method="post">
<table>
<tr>
<td>NIK </td>
<td><input type="text" name="nik" size="10" maxlength="4"</td>
</tr>
<tr>
<td colspan><input type="submit" value="edit"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.3 Formeditpegawai.htm
Dapat dilihat dalam listing 13.3 bahwa jika tombol edit ditekan maka akan menjalankan
file edit_pegawai.php. Adapun listing dari file edit_pegawai.php adalah seperti
diperlihatkan dalam listing 13.4 di bawah ini.
<?php
$host="localhost";
$userdb="root";
$passdb="";
73
12.HTML Dinamik
Pemrograman Web
$namadb="karyawan";
$sambung=mysql_connect($host,$userdb,$passdb);
mysql_select_db($namadb,$sambung);
$nik1=$_POST[nik];
$sql="select * from karyawan where nik=$nik1";
$hasil=mysql_query($sql);
while ($row=mysql_fetch_array($hasil))
{
$nik=$row['nik'];
$nama=$row['nama'];
$alamat=$row['alamat'];
}
?>
<html>
<head>
<title>Form Edit Data Pegawai</title>
</head>
<body>
<form action="http:\\localhost\simpan_edit_pegawai.php" method="post">
<table>
<tr>
<td>NIK</td>
<td><input type="text" name="nik" value= "<?php echo "$nik"; ?>"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value= "<?php echo "$nama";
?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" value= "<?php echo "$alamat";
?>"></td>
</tr>
<tr>
<td colspan><input type="submit" value="simpan"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.4 edit_pegawai.php
Dalam listing 13.4 (edit_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik
maka akan menjalankan file : si mpan _ edi t_ peg aw ai .ph p . Adapun listing dari file
tersebut adalah sebagai berikut :
<?php
$host="localhost";
$userdb="root";
$passdb="";
$namadb="karyawan";
$sambung=mysql_connect($host,$userdb,$passdb);
mysql_select_db($namadb,$sambung);
$nik1=$_POST[nik];
74
12.HTML Dinamik
Pemrograman Web
$sql="update karyawan set
nama='$_POST[nama]',
alamat='$_POST[alamat]'
where nik=$nik1";
$hasil=mysql_query($sql);
if ($hasil)
{
echo"data berhasil diedit";
}
else
{
echo"data gagal diedit";
}
?>
Listing 13.4 simpan_edit_pegawai.php
Untuk melihat proses pengeditan data dalam tabel karyawan maka lakukan langkahlangkah berikut :
1.Jalankan file HTML formeditpegawai.htm, maka akan muncul tampilan seperti gambar
13.10.
Gambar 13.10 hasil eksekusi formeditpegawai.htm
Pada text box NIK coba masukkan : 0001. Kemudian klik tombol edit, maka akan muncul
tampilan seperti gambar 13.11
75
12.HTML Dinamik
Pemrograman Web
Gambar 13.11 Hasil ketika tombol edit diklik
cobalah untuk mengubah data-data dalam text box nama dan alamat misalnya :
nama
: Budi Raharjo
Alamat
: Jln Pecenongan 25
Selanjutnya klik tombol simpan. Jika data berhasil diedit maka menampilkan pesan :
”data berhasil diedit ”.
Untuk melihat hasil perubahan yang telah kita lakukan terhadap data dengan nik : 0001
tersebut maka kita dapat membuka tabel karyawan dengan cara seperti yang sama seperti
saat kita melihat isi dari tabel karyawan. Ternyata tabel karyawan sekarang isinya telah
berubah seperti diperlihatkan dalam gambar 13.12.
Gambar 13.12 Isi tabel karyawan setelah proses edit
76
12.HTML Dinamik
Pemrograman Web
13.5 Membuat Form untuk menghapus data dalam tabel Karyawan
Untuk menghapus data atau record dalam tabel karyawan maka kita perlu membuat
sebuah form. Adapun rancangan form adalah seperti gambar 13.13.
Gambar 13.13 Rancangan Form Hapus tabel karyawan
Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti
diperlihatkan dalam listing 13.5 di bawah ini.

<html>
<head>
<title> Form Hapus data pegawai</title>
</head>
<body>
<h1>Form Hapus Data Pegawai</h1>
<form action="http:\\localhost\hapus_pegawai.php" method="post">
<table>
<tr>
<td>NIK </td>
<td><input type="text" name="nik" size="10" maxlength="4"</td>
</tr>
<tr>
<td colspan><input type="submit" value="lihat"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.5 Formhapuspegawai.htm
Dapat dilihat dalam listing 13.5 bahwa jika tombol lihat ditekan maka akan menjalankan
file hapus_pegawai.php. Adapun listing dari file hapus_pegawai.php adalah seperti
diperlihatkan dalam listing 13.6 di bawah ini.
<?php
$host="localhost";
$userdb="root";
77
12.HTML Dinamik
Pemrograman Web
$passdb="";
$namadb="karyawan";
$sambung=mysql_connect($host,$userdb,$passdb);
mysql_select_db($namadb,$sambung);
$nik1=$_POST[nik];
$sql="select * from karyawan where nik=$nik1";
$hasil=mysql_query($sql);
while ($row=mysql_fetch_array($hasil))
{
$nik=$row['nik'];
$nama=$row['nama'];
$alamat=$row['alamat'];
}
?>
<html>
<head>
<title>Form Hapus Data Pegawai</title>
</head>
<body>
<form action="http:\\localhost\simpan_hapus_pegawai.php" method="post">
<table>
<tr>
<td>NIK</td>
<td><input type="text" name="nik" value= "<? echo "$nik"; ?>"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value= "<? echo "$nama";
?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" value= "<? echo "$alamat";
?>"></td>
</tr>
<tr>
<td colspan><input type="submit" value="simpan"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.6 hapus_pegawai.php
Dalam listing 13.6 (hapus_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik
maka akan menjalankan file : si mpan _h apu s _ peg aw ai .ph p . Adapun listing dari file
tersebut adalah sebagai berikut :
<?php
$host="localhost";
$userdb="root";
$passdb="";
78
12.HTML Dinamik
Pemrograman Web
$namadb="karyawan";
$sambung=mysql_connect($host,$userdb,$passdb);
mysql_select_db($namadb,$sambung);
$nik1=$_POST[nik];
$sql="delete from karyawan
where nik=$nik1";
$hasil=mysql_query($sql);
if ($hasil)
{
echo"data berhasil dihapus";
}
else
{
echo"data gagal dihapus";
}
?>?>
Listing 13.7 simpan_hapus_pegawai.php
Untuk melihat proses penghapusan data atau record dalam tabel karyawan maka lakukan
langkah-langkah berikut :
1.Jalankan file HTML formhapuspegawai.htm, maka akan muncul tampilan seperti
gambar 13.14.
Gambar 13.14 hasil eksekusi formhapuspegawai.htm
Pada text box NIK coba masukkan : 0001. Kemudian klik tombol lihat, maka akan muncul
tampilan seperti gambar 13.15
79
12.HTML Dinamik
Pemrograman Web
Gambar 13.15 hasil eksekusi jika tombol lihat diklik
2.Klik tombol hapus. Jika data berhasil dihapus maka akan menghasilkan pesan : ”data
berhasil dihapus ”. Dengan demikian data atau record karyawan dengan nik : 0001
akan terhapus dari tabel karyawan. Untuk membuktikannya coba lihat isi tabel karyawan
dengan cara seperti yang sudah dijelaskan sebelumnya.
80

Langkah-langkah menulis program

Related documents

Products

Support

Langkah-langkah menulis program

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib