i
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
ii
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
1.World Wide Web Pemrograman Web
1
<HTML>
<H1>Welcome</H1>
</HTML>
file abc.htm
HTTP
“Get”
Abc.htm
HTTP
“replay”
1 2
3
4
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 (e-
commerce), 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.
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
Client
Web Browser
URL: http//..//abc.htm
HTTPS
Server
Komputer
Internet
Web Browser
welcome
URL: http//..//abc.htm
<HTML>
<H1>Welcome</H1>
</HTML>
Temp file / memori
Hard Disk
Gambar 1.1. Proses Kerja Pengaksesan Informasi pada Web
1.World Wide Web Pemrograman Web
2
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.Pengenalan HTML Pemrograman Web
3
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
2.Pengenalan HTML Pemrograman Web
4
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>
Gambar 2.1. Tampilan dari dokumen HTML : contoh.htm
Listing 2.1. contoh.htm
3.Tag Dasar HTML Pemrograman Web
5
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)
atau
<p> …teks informasi…</p> (dengan tag penutup)
3.Tag Dasar HTML Pemrograman Web
6
Berikut ini adalah beberapa contoh dokumen HTML yang menggunakan tag dasar tersebut :
<!--Tag dasar-->
<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.2 (tag_dasar1.htm) memperlihatkan secara lebih rinci tentang tag paragraf. Hasil
eksekusinya ditampilkan dalam gambar 3.2.
<!--Tag dasar: paragraf--> <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.1 Tag_dasar.htm
Gambar 3.1 Hasil eksekusi Tag_dasar.htm
Listing 3.2 Tag_dasar1.htm
3.Tag Dasar HTML Pemrograman Web
7
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 :
<!--Tag dasar: line break <br> --> <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>
Gambar 3.2 Hasil eksekusi Tag_dasar1.htm
listing 3.3 line_break.htm
Gambar 3.3 Hasil eksekusi line_break.htm
3.Tag Dasar HTML Pemrograman Web
8
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 :
<!--Tag dasar: heading<br> --> <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>
Hasil eksekusi dari heading.htm diperlihatkan dalam gambar 3.4.
Listing 3.4 heading.htm
Gambar 3.4 Hasil eksekusi heading.htm
3.Tag Dasar HTML Pemrograman Web
9
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.
<!--Tag dasar: align <br> --> <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>
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>.
Listing 3.5 align.htm
Gambar 3.5 Hasil eksekusi align.htm
3.Tag Dasar HTML Pemrograman Web
10
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.
<!--Tag dasar: garis horizontal <br> --> <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>
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 :
<!--komentar anda -->
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
Gambar 3.6 Hasil eksekusi garis.htm
Listing 3.6 Garis.htm
3.Tag Dasar HTML Pemrograman Web
11
<!--Tag dasar:ini contoh komentar <br> --> <html> <head> <title>Contoh penggunaan komentar</title> </head> <body> <!-- Ini sekedar komentar dan tidak akan ditampilkan dalam browser--> <p> ini sebuah paragraf </p> </body> </html>
Latihan :
1.Buatlah sebuah dokumen HTML dimana jika dieksekusi dalam browser maka akan
menampilkan hasil seperti di bawah ini :
Listing 3.7 komentar.htm
Gambar 3.7 Hasil eksekusi komentar.htm
4.Format Text dalam HTML Pemrograman Web
12
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)
huruf tebal (bold)
huruf digarisbawahi
huruf dikecilkan
superscript
subscript
huruf diberi tekanan (emphasize) dll
Contoh pemformatan teks ditunjukkan dalam dokumen HTML format_teks.htm (listing 4.1).
Hasil eksekusi file Format_teks.htm diperlihatkan dalam gambar 4.1.
<!--format teks--> <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
4.Format Text dalam HTML Pemrograman Web
13
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.
<!--Preformat teks--> <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>
Hasilnya ditunjukkan dalam gambar 4.2.
Gambar 4.2. Hasil eksekusi file Preformmat.htm
Listing 4.2. Preformat.htm
4.Format Text dalam HTML Pemrograman Web
14
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
<!--Alamat <address>-->
<html>
<body>
<address>
Jurusan Fisika, FMIPA <br>
Universitas Udayana <br>
bukit Jimbaran <br>
Bali
</address>
</body>
</html>
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
Gambar 4.3. Hasil eksekusi file Address.htm
Listing 4.3. Address.htm
4.Format Text dalam HTML Pemrograman Web
15
listing 4.4 ( acronym.htm). Gambar 4.4 memperlihatkan hasil eksekusi file tersebut dalam
browser .
<!--Acronym dan abbr <address>--> <html> <body> <acronym title = "World Wide Web"> W W W </acronym> <br> <acronym title = "Indeks harga Saham Gabungan"> IHSG </acronym> </body> </html>
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.
Listing 4.4. file Acronym.htm
Gambar 4.4. Hasil eksekusi file Acronym.htm
4.Format Text dalam HTML Pemrograman Web
16
<!--kutipan / quotation --> <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
5.Entitas Karakter HTML Pemrograman Web
17
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 : < atau <
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.
<!--Entitas Karakter <address>--> <html> <body> apakah A > B atau A < B ? </body> </html>
Listing 5.1. entitas.htm
Gambar 5.1. Hasil eksekusi entitas.htm
5.Entitas Karakter HTML Pemrograman Web
18
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 Nama entitas Nomer entitas
© Copyright ©  
® Registered trademark ® ®
™ Trademark ™
Non-breaking space (spasi) ¡
& Ampersand & &
» Angle quotation mark(left) « «
« Angle quotation mark(right) » »
” Tanda kutipan " "
< Lebih kecil < <
> Lebih besar > =
x Tanda kali × ×
÷ Tanda bagi ÷ ÷
Latihan :
1.Buatlah sebuah dokumen HTML dimana jika dibuka dalam browser maka akan
menampilkan hasil seperti di gambar bawah ini :
6.Link HTML Pemrograman Web
19
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
6.Link HTML Pemrograman Web
20
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>
Jika file link.htm dibuka dengan browser maka tampilannya adalah seperti gambar 6.1
Dan apabila ‘Welcome to Singapore’ diklik, maka akan menampilkan gambar 6.2
Gambar 6.1 hasil eksekusi link.htm
Gambar 6.2 Hasil link
listing 6.2 Aboutsinga.htm
6.Link HTML Pemrograman Web
21
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>
<body>
<p>
<a name="top">
<a href="#B3">
Lihat bab 3
</a>
</a>
</p>
<h3>Bab 1</h3>
<p>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 1<br>
Penjelasan tentang bab 1
</p>
<h3>Bab 2</h3>
<p>
Penjelasan tentang bab 2<br>
Penjelasan tentang bab 2<br>
Penjelasan tentang bab 2<br>
Penjelasan tentang bab 2<br>
Penjelasan tentang bab 2
</p>
<a name="B3">
<h3>Bab 3</h3>
<p>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 3<br>
Penjelasan tentang bab 3
</p>
<a href ="#top"> Kembali ke Atas </a>
</body>
</html>
Hasil dari file link2.htm jika dibuka dengan browser Internet Explorer adalah seperti
diperlihatkan dalam gambar 6.3.
Listing 6.3 link2.htm
22
Dan jika ‘lihat bab 3’ di klik maka akan memperlihatkan isi dari Bab 3 seperti ditunjukkan
dalam gambar 6.4.
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” >
Gambar 6.3 hasil eksekusi file link2.htm
Gambar 6.4 hasil link
Klik di sini
Klik di sini
23
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>
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.4 Link3.htm
Gambar 6.5 Hasil eksekusi Link3.htm
Listing 6.5 Link_mailto.htm
24
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
7.Image HTML Pemrograman Web
25
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
7.Image HTML Pemrograman Web
26
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>
Gambar 7.1 hasil eksekusi image_align.htm
Listing 7.2 image_align2.htm
Gambar 7.2 Hasil eksekusi image_align2.htm
7.Image HTML Pemrograman Web
27
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>
Hasil eksekusi dari listing 7.3 (image_wh.htm) diperlihatkan dalam gambar 7.3 di bawah ini.
Listing 7.3 image_wh.htm
Gambar 7.3 hasil eksekusi image_wh.htm
7.Image HTML Pemrograman Web
28
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>
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
Gambar 7.4 hasil eksekusi image_alt.htm
Listing 7.4 image_alt.htm
7.Image HTML Pemrograman Web
29
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>
<!—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.5 Aboutsinga.htm
Listing 7.6 Image_link.htm
7.Image HTML Pemrograman Web
30
Jika pointer mouse diarahkan pada gambar bendera dan mengkliknya maka akan dihasilkan
gambar 7.6.
Gambar 7.5 Hasil eksekusi Image_link.htm
Klik di sini
Gambar 7.6 Hasil link
8.List dan Tabel Pemrograman Web
31
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).
<!--coba list : ordered list --> <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>
8.List dan Tabel Pemrograman Web
32
<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>
Sedangkan hasil dari list_ol.htm jika dibuka dalam browser adalah seperti diperlihatkan
dalam gambar 8.1
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>
Listing 8.1 List_ol.htm
Gambar 8.1 Hasil eksekusi list_ol.htm
8.List dan Tabel Pemrograman Web
33
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).
<!--coba list : unordered list --> <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
8.List dan Tabel Pemrograman Web
34
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> --definisi term
<dd> item_list2</dd> --definisi description
</dl>
Di bawah ini diberikan contoh pemakaian list definisi (listing 8.3). Dan hasilnya dapat dilihat
dalam gambar 8.3.
<!--coba list : Definition list --> <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>
Gambar 8.3 Hasil eksekusi list_dl.htm
Listing 8.3 list_dl.htm
8.List dan Tabel Pemrograman Web
35
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 Penjelasan
Align = left|center|right 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>
8.List dan Tabel Pemrograman Web
36
<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>
Listing 8.4 tabel_border.htm
8.List dan Tabel Pemrograman Web
37
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>
Gambar 8.4 Hasil dari tabel_border.htm
Listing 8.5 Tabel_cellpad.htm
8.List dan Tabel Pemrograman Web
38
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>
Gambar 8.5 Hasil dari tabel_cellpad.htm
Listing 8.6 Tabel_cellspacing.htm
8.List dan Tabel Pemrograman Web
39
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>
Gambar 8.6 Hasil dari tabel_cellspacing.htm
8.List dan Tabel Pemrograman Web
40
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.7 Tabel_caption.htm
Gambar 8.7 Hasil dari tabel_caption.htm
Listing 8.8 Tabel_header.htm
8.List dan Tabel Pemrograman Web
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>
Gambar 8.8 Hasil dari tabel_header.htm
8.List dan Tabel Pemrograman Web
<tr>
<td>0361-255532</td>
</tr>
</table>
</body>
</html>
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>
Listing 8.9 Tabel_col_row.htm
Gambar 8.9 Hasil dari tabel_col_row.htm
8.List dan Tabel Pemrograman Web
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>
Listing 8.10 Tabel_empty_cell.htm
Gambar 8.10 Hasil dari tabel_empty_cell.htm
8.List dan Tabel Pemrograman Web
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 = "400" border = "1">
<tr>
<th align = "left">Nomer</td>
<th align = "right">Nama </td>
<th align = "right">Alamat </td>
</tr>
<tr>
<td align = "left">1</td>
<td align = "right">Agus Sanjaya </td>
<td align = "right">Jln.Serpong damai 11 </td>
</tr>
<tr>
<td align = "left">2</td>
<td align = "right">Budi Hartono </td>
<td align = "right">Jln. M.T. Haryono 2 </td>
</tr>
<tr>
<td align = "left">3</td>
<td align = "right">Candra Hidayat </td>
<td align = "right">Jln. Pahlawan 15 </td>
Listing 8.11 Tabel_background.htm
Gambar 8.11 Hasil dari tabel_background.htm
8.List dan Tabel Pemrograman Web
</tr>
</table>
</body>
</html>
8.2.10 Atribut Frame
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">
Gambar 8.12 Hasil dari tabel_align.htm
Listing 8.12 Tabel_align.htm
8.List dan Tabel Pemrograman Web
27
<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>
<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
8.List dan Tabel Pemrograman Web
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 keterangan
peristiwa atau catatan pada tanggal tersebut (seperti gambar 8.15).
Gambar 8.13 Hasil dari tabel_frame.htm
8.List dan Tabel Pemrograman Web
Gambar 8.14 Sistem Kalender
Gambar 8.15 Tampilan tanggal 31 Oktober
9.Frame Pemrograman Web
49
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>
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> <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.1 Frame_kolom.htm
Listing 9.2 sun.htm
Listing 9.3 venus.htm
9.Frame Pemrograman Web
50
<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>
Hasil dari listing 9.1 diperlihatkan dalam gambar 9.1 di bawah ini.
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>
Hasil dari listing 9.5 ditunjukkan dalam gambar 9.2 berikut ini.
Gambar 9.1 Hasil eksekusi frame_kolom.htm
Listing 9.4 mercur.htm
Listing 9.5 Frame_baris.htm
9.Frame Pemrograman Web
51
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>
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>
Gambar 9.2 Hasil eksekusi dari frame_baris.htm
Listing 9.6 Frame_navigasi.htm
Listing 9.7 tata_surya.htm
9.Frame Pemrograman Web
52
Hasil eksekusi dari listing 9.6 (frame_navigasi.htm) ditunjukkan dalam gambar 9.3 di bawah
ini.
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).
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.
Gambar 9.3 Hasil eksekusi frame_navigasi.htm
Gambar 9.4 Hasil link venus.htm
Frame navigasi Frame target
10.Form Pemrograman Web
54
X. FORM
Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan atau
input dari pengguna web. Adapun sintax dari form 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 type 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 size : 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
<!--form teks--> <html> <body> <form> Nama : <input type="text" name ="nama" size="10"> <br> Alamat : <input type="text" name ="alm" size="30">
55
</form> </body>
</html>
10.2 Input C h e c k b o x
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
<!--form checkbox--> <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.1 Form_text.htm
Gambar 10.1 Hasil eksekusi Form_text.htm
Listing 10.2 Form_cbox.htm
10.Form Pemrograman Web
56
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
<!--form checkbox--> <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>
Gambar 10.2 Hasil eksekusi Form_cbox.htm
Listing 10.3 Form_radio.htm
57
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 button submit dan reset
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
<!--form button--> <html> <body> <form action="form_action.asp" method = "get"> Masukkan nama : <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>
Gambar 10.3 Hasil eksekusi Form_radio.htm
Listing 10.4 Form_button.htm
10.Form Pemrograman Web
58
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 Dropdown box 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
<!--form drop down--> <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>
Gambar 10.4 Hasil eksekusi Form_button.htm
Listing 10.5 Form_dropdown.htm
59
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 text area 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.
<!--form text area--> <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>
Gambar 10.5 Hasil eksekusi Form_dropdown.htm
Listing 10.6 Form_textarea.htm
10.Form Pemrograman Web
60
10.7 Input I m a g e
Digunakan untuk mengganti tombol (button), berupa tombol yang berbentuk
gambar.Adapun format atau sintax dari input image adalah :
<FORM ACTION = “url” METHOD=”get|post” ENCTYPE=“”>
<input type = “image” src=”url_address”>
</FORM>
s r c : 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.
<!--form button image--> <html> <body> <form action="form_action.asp" method = "get"> Masukkan nama : <input type="text" name ="nama"> <br> Masukkan alamat : <input type="text" name ="alm"> <br> <input type="image" src="../gambar/usa.gif"> </form> </body> </html>
Gambar 10.6 Hasil eksekusi Form_textarea.htm
Listing 10.7 Form_image.htm
11.CSS (Cascade Style Sheet) Pemrograman Web
62
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.
11.CSS (Cascade Style Sheet) Pemrograman Web
63
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 “.css”. 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}
<!—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>
Hasilnya dapat dilihat dalam gambar 11.1 berikut ini :
Listing 11.2 coba_cssex1.htm
Listing 11.1 ex1.css
Gambar 11.1 Hasil eksekusi coba_cssex1.htm
11.CSS (Cascade Style Sheet) Pemrograman Web
64
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}
<!--coba_cssex2.html--> <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>
Hasil eksekusi dari listing 11.4 diperlihatkan dalam gambar 11.2.
Listing 11.4 coba_cssex2.htm
Listing 11.3 ex2.css
Gambar 11.2 hasil eksekusi coba_cssex2.htm
11.CSS (Cascade Style Sheet) Pemrograman Web
65
11.3 Style Sheet Internal
CSS internal didefinisikan secara langsung di dalam file HTML. Berikut ini adalah
contoh pemakaian style sheet yang didefinisikan secara internal .
<!--coba_cssex2.html--> <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>
Hasilnya dapat dilihat dalam gambar 11.3 berikut ini :
Gambar 11.3 Hasil eksekusi coba_cssin1.htm
Listing 11.5 coba_cssin1.htm
12.HTML Dinamik Pemrograman Web
66
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 script . 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 Form . 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 : xampp-win32-1.8.1-VC9-instal ler
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
12.HTML Dinamik Pemrograman Web
67
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
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.1
Gambar 13.2
12.HTML Dinamik Pemrograman Web
68
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
5.Pada kolom -kolom ketikkan :
Field Type Length/values Primary
Nik Varchar 4
Nama Varchar 30
Alamat Varchar 50
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.
Gambar 13.3
12.HTML Dinamik Pemrograman Web
69
untuk membuat form seperti itu maka kita harus membuat sebuah file HTML seperti listing
13.1 berikut ini :
<!--form teks-->
<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>
Gambar 13.4 Rancangan Form
Listing 13.1. forminputpegawai.htm
12.HTML Dinamik Pemrograman Web
70
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 isi_pegawai.php 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";
}
?>
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.
Listing 13.2. isi_pegawai.php
12.HTML Dinamik Pemrograman Web
71
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.
2.Klik database karyawan (lihat gambar 13.6), maka akan muncul tampilan seperti
diperlihatkan dalam gambar 13.7.
Gambar 13.5 Hasil eksekusi forminputpegawai.htm
Gambar 13.6 Buka database
Klik database
karyawan
12.HTML Dinamik Pemrograman Web
72
2.Klik browse (lihat gambar 13.7) maka akan muncul tampilan isi record dari tabel
karyawan seperti diperlihatkan dalam tabel 13.8
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.
Gambar 13.7 Lihat isi tabel karyawan
Klik browse
Gambar 13.8 Isi record tabel karyawan
12.HTML Dinamik Pemrograman Web
73
Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti
diperlihatkan dalam listing 13.3 di bawah ini.
<!--form teks-->
<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>
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="";
Gambar 13.9 Rancangan form edit
Listing 13.3 Formeditpegawai.htm
12.HTML Dinamik Pemrograman Web
74
$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>
Dalam listing 13.4 (edit_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik
maka akan menjalankan file : simpan_edit_pegawai.php . 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];
Listing 13.4 edit_pegawai.php
12.HTML Dinamik Pemrograman Web
75
$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";
}
?>
Untuk melihat proses pengeditan data dalam tabel karyawan maka lakukan langkah-
langkah berikut :
1.Jalankan file HTML formeditpegawai.htm, maka akan muncul tampilan seperti gambar
13.10.
Pada text box NIK coba masukkan : 0001. Kemudian klik tombol edit, maka akan muncul
tampilan seperti gambar 13.11
Listing 13.4 simpan_edit_pegawai.php
Gambar 13.10 hasil eksekusi formeditpegawai.htm
12.HTML Dinamik Pemrograman Web
76
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.11 Hasil ketika tombol edit diklik
Gambar 13.12 Isi tabel karyawan setelah proses edit
12.HTML Dinamik Pemrograman Web
77
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.
Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti
diperlihatkan dalam listing 13.5 di bawah ini.
<!--form teks-->
<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>
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";
Gambar 13.13 Rancangan Form Hapus tabel karyawan
Listing 13.5 Formhapuspegawai.htm
12.HTML Dinamik Pemrograman Web
78
$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>
Dalam listing 13.6 (hapus_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik
maka akan menjalankan file : simpan_hapus_pegawai.php . Adapun listing dari file
tersebut adalah sebagai berikut :
<?php
$host="localhost";
$userdb="root";
$passdb="";
Listing 13.6 hapus_pegawai.php
12.HTML Dinamik Pemrograman Web
79
$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";
}
?>?>
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.
Pada text box NIK coba masukkan : 0001. Kemudian klik tombol lihat, maka akan muncul
tampilan seperti gambar 13.15
Listing 13.7 simpan_hapus_pegawai.php
Gambar 13.14 hasil eksekusi formhapuspegawai.htm
12.HTML Dinamik Pemrograman Web
80
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.
Gambar 13.15 hasil eksekusi jika tombol lihat diklik