Pemrograman Web IGA Widagda Fisika FMIPA UNUD 2012

(1)

Diktat Kuliah

P

e

m

r

o

g

r

a

m

a

n

W

e

b

IGA Widagda

Fisika FMIPA UNUD

2012

(2)

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.

(3)

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

(4)

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

(5)

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

(6)

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 :

Tag umumnya berpasangan yaitu : tag awal dan tag akhir, dimana format penulisannya adalah :

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 :

…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

(7)

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.

<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

(8)

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 :

3.3 Head

Merupakan tag berikutnya setelah tag <html> untuk memberikan judul atau keterangan tentang dokumen web yang akan ditampilkan. Format penulisannya adalah :

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 :

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

(9)

6 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.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.1 Tag_dasar.htm

Gambar 3.1 Hasil eksekusi Tag_dasar.htm

(10)

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 :

<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

(11)

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 :

<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

(12)

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.

<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

(13)

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.

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

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

(14)

11

<html>

<head>

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

<body>

<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

(15)

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.

<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

(16)

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.

<html>

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

(17)

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

<html>

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

(18)

15 listing 4.4 ( acronym.htm). Gambar 4.4 memperlihatkan hasil eksekusi file tersebut dalam browser .

<html>

<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

(19)

16

<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

(20)

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.

<html>

<body>

apakah A > B atau A < B ? </body>

</html>

Listing 5.1. entitas.htm

(21)

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

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

(22)

19

(23)

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 :

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

<p><a href ="aboutsinga.htm">Welcome to Singapore </a></p>

<p><a href ="http://www.microsoft.com">Welcome to Microsoft </a></p> </body>

</html>

(24)

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 :

<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

(25)

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

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

(26)

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 :

Gambar 6.3 hasil eksekusi file link2.htm

Gambar 6.4 hasil link

Klik di sini

(27)

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.

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

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

(28)

24 Hasil dari listing 6.5 jika dibuka dengan browser Internet Explorer adalah ditunjukkan dalam gambar 6.6.

(29)

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 :

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 :

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

(30)

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>

<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

(31)

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 :

Berikut ini adalah contoh dokumen HTML yang menggunakan atribut height dan width (listing 7.3).

<!—Image : width-height --> <html>

<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

</html>

Hasil eksekusi dari listing 7.3 (image_wh.htm) diperlihatkan dalam gambar 7.3 di bawah ini.

Listing 7.3 image_wh.htm

(32)

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 :

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

(33)

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 :

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.

<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

</body> </html>

Listing 7.5 Aboutsinga.htm

(34)

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

(35)

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

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

(36)

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

(37)

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

<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

(38)

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.

<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

(39)

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 :

Berikut ini akan diberikan contoh dokumen HTML (listing 8.4) tentang pembuatan tabel dengan mengatur atribut border. Hasilnya dapat dilihat dalam gambar 8.4

(40)

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

(41)

37

8.2.2 Cellpadding

Untuk membuat spasi antara sel dan bordernya dipakai atribut Cellpadding. Adapun format dari atribut ini adalah :

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

(42)

38

8.2.3 Cellspacing

Untuk membuat spasi atau jarak antara sel atribut Cellspacing. Adapun format dari atribut ini adalah :

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

(43)

39

8.2.4 Caption

Untuk menampilkan judul atau nama tabel digunakan tag Caption. Adapun format dari tag caption adalah :

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

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

(44)

40

8.2.5 Header

Berfungsi untuk menampilkan Header tabel atau judul tiap kolom tag <th>. Adapun format dari Header adalah :

<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

(45)

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 :

<th colspan=”lebar_kolom”>teks judul kolom</th> </tr>

<tr>

<th rowspan=”tinggi_baris”>teks judul kolom</th> </tr>

</table>

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

(46)

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>

<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

(47)

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.

<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

(48)

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.

<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 = "right">Budi Hartono </td> <td align = "right">Jln. M.T. Haryono 2 </td> </tr>

<tr>

<td align = "right">Candra Hidayat </td> <td align = "right">Jln. Pahlawan 15 </td>

Listing 8.11 Tabel_background.htm

(49)

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 :

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

(50)

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

(51)

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

(52)

Gambar 8.14 Sistem Kalender

(53)

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 :

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

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.

Selamat datang di matahari

<br>Semoga matahari ini menyejukkan </p>

<hr>

Kembali ke <a href="coba_imagempap.html">tata surya</a> </body>

</html>

Selamat datang di Planet Venus <br>Ini sepertinya Dewi Venus </p>

<hr>

</html>

Listing 9.1 Frame_kolom.htm

Listing 9.2 sun.htm

(54)

50

Selamat datang di Planet Merkurius

<br>Terasa Planet ini terbesar setelah matahari </p>

<hr>

</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).

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

(55)

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>

</html>

Frame pertama (navigasi) mengacu pada file HTML yaitu : tat a_sur ya.htm dan frame kedua (target) mengacu pada file : sun.htm. Dimana listing tata_surya.htm diperlihatkan dalam listing 9.7 berikut ini :

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

(56)

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

(57)

53

(58)

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 :

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 :

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

<html>

<body> <form> Nama :

Alamat :

(59)

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 :

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

<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