The World Wide Web

Belajar
HTML
dengan
Mudah
dan Cepat
Disusun Oleh :
Binsar Siagian
Widyaiswara PPPG Teknologi Bandung
DEPARTEMEN PENDIDIKAN NASIONAL
DEREKTORAT JENDERAL PENDIDIKAN DASAR DAN MENENGAH
PUSAT PENGEMBANGAN PENATARAN GURU TEKNOLOGI BANDUNG
TAHUN
2001
Belajar HTML dengan mudah dan cepat.
DAFTAR ISI
DAFTAR ISI …………..…………………………...…………………………...i
KATA PENGANTAR….…………………………...…………………………... iii
1. WORLD WIDE WEB…………………………...…………………………... 1
Apa yang dimaksud dengan world wide web?………………………..
1
Bagaimana www bekerja? ……………………….…………………….. 1
Bagaimana caranya browser menjemput pages ? ……………………. 1
Bagaimana caranya browser menampilkan pages ? ………………… 1
Siapa yang membuat standart web ? ………………………...………... 2
2. MENGENAL HTML…………………………...………………………….… 3
Apa yang dimaksud dengan sebuah file HTML ? ……………………… 3
Anda ingin mencobanya ? …………………………...…………………... 3
Penjelasan contoh diatas…………………………...…………….………. 4
Catatan untuk editor HTML………………………...……………………… 4
Pertanyaan dan jawaban untuk penyegaran..…………………………… 4
3. ELEMEN - ELEMEN HTML…………………………...……………….….. 6
Tag-tag HTML………………………...………………...…….……………. 6
Elemen- elemen HTML ………………………...………………….…….. 6
Mengapa kita menggunakan tag dengan huruf kecil ?…..………...….. 7
Atribut-atribut (lambang) tag…………………………...………………….. 7
Bentuk tanda kutip "red" atau 'red' ? ……………………………………... 8
4. DASAR - DASAR TAG HTML…………………………...………………... 9
Lakukan percobaan untuk contoh-contoh berikut: ……………………… 9
Headings…………………………...………………...……………………… 10
Line break…………………………...………………...…………………….. 11
Komentar atau catatan dalam HTML ……………………...…………… 11
Tips yang sangat berguna! …………………………...……………….….. 11
Contoh-contoh yang perlu dicoba: …………………………...……………12
Membandingkan tag dasar html: …………………………...…………… 13
5. MEMFORMAT TEXT HTML…………………………...……………….…. 14
Contoh-contoh : …………………………...………………...……………… 14
Bagaimana menampilkan source HTML…………………………...…… 15
Tag untuk format text: …………………………...……………….……….. 15
Tag untuk "computer output" : …………………………...……………….. 16
Tag untuk citations, quotations, definition: …………………………...….. 16
6. HTML CHARACTER ENTITIES…………………………...……………….17
Karakter entity…………………………...……………………...……………17
Tanda spasi tetap (non-breaking space) …………………………...…… 17
The most common character entities: …………………………...………. 18
Some other commonly used character entities: ………………………… 18
7. ENTITIES REFERENCE UNTUK HTML 4.01…………………………... 19
ASCII entities with new entity names…………………………...………… 19
Iso 8859-1 symbol entities…………………………...…………………… 19
Iso 8859-1 character entities…………………………...………………… 20
Some other entities supported by HTML ………………………...……… 21
8. LINKS DALAM HTML…………………………...…………………………. 23
Contoh-contoh: …………………………...……………………………...… 23
Tag anchor dan atribut href…………………………...…………………… 24
Oleh: Binsar Siagian 2001
i
Belajar HTML dengan mudah dan cepat.
Atribut target…………………………...……………………………...……. 24
Tag anchor dan nama atribut…………………………...………………… 25
Contoh-contoh: …………………………...……………………………...… 26
Tag link dan target: …………………………...……………………………. 28
9. BINGKAI ( FRAME ) HTML…………………………...…………………… 29
Contoh: …………………………...……………………………...…………. 29
Frame…………………………...……………………………...…………… 29
Tag untuk frameset…………………………...……………………………. 30
Tag untuk frame: …………………………...……………………………... 30
Catatan - tips yang berguna. …………………………...………………… 30
Contoh-contoh: …………………………...……………………………...… 31
Tag untuk frame: …………………………...……………………………... 33
ii
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
KATA PENGANTAR
Dari hari ke hari, semakin banyak guru dan siswa yang belajar Internet,
baik dalam hal pemakaian komputer sebagai alat bantu belajar ataupun
menggunakan komputer sebagai object untuk belajar.
Komputer sebagai object belajar dapat dibagi dalam beberapa kelompok
diantaranya adalah pengetahuan tentang perangkat keras (hardware) dan
tentang perangkat lunak (software). Mempelajari perangkat lunak merupakan
kegiatan yang tidak ada habisnya, dari hari ke hari, selalu saja muncul sesuatu
yang baru. Secara umum pembelajaran perangkat lunak dapat kita bagi dalam 3
kategori yakni : Pengguna software Aplikasi (Operator), Pembuat program
pengolahan (Programmer), Penyaji Imformasi ke World Wide Web (Web
master).
Pada kesempatan ini penyajian imformasi ke World Wide Web menjadi
topik pembahasan utama. Untuk menyajikan informasi dibutuhkan suatu keahlian
khusus, dimana informasi yang akan disampaikan harus ditata sedemikian rupa
supaya public tertarik dan punya motivasi untuk menyimak informasi yang
disampaikan. Media utama yang dipakai sebagai jendela informasi adalah layar
komputer yang dikontrol atau dikendalikan oleh berbagai merek dan jenis
komputer yang berbeda operating systemnya. Tetapi Web master mengharapkan
agar informasi yang disajikan dapat dilihat sesuai dengan hasil rancangannya,
dimana saja dengan komputer jenis apapun.
Untuk tujuan tersebuat dirancang salah satu bahasa pengantar
pemrograman untuk Internet yang diberi nama Hyper Text Markup Language
disingkat dengan HTML.
Dengan menggunakan bahasa ini didukung oleh
fasilitas dan perangkat komunikasi, maka koneksi antar komputer dapat terwujut.
Sarana komunikasi tersebut menggunakan standart komunikasi yang dinamakan
HTTP. Dengan HTTP semua komputer dalam Web dapat berkomunikasi satu
sama lainnya, sehingga jarak dan waktu tidak lagi menjadi hambatan untuk
memperoleh informasi yang telah tersedia pada komputer server (pelayanan).
Bila Anda ingin menjadi seorang Web master maka, diharuskan untuk
memahami pemrograman dengan HTML. Supaya dikemudian hari Anda dapat
mengendalikan dan mengatur Web site yang Anda buat. Web site yang baik
adalah Web site yang dinamis yakni yang dapat berinteraksi dengan
pengunjungnya (user/Quest). Membuat Web site dinamis maka harus berurusan
dengan HTML.
Mengapa dan bagaimana menggunakannya? Ikuti seluruh sajian berikut
ini. Buku On-line ini disusun sedemikian rupa, dilengkapi dengan sejumlah
contoh-contoh source program yang dapat dibuka dan di jalankan. Sehingga
untuk penulisan program dapat menghemat waktu.
Bandung Juni 2001
Penulis,
Oleh: Binsar Siagian 2001
Binsar
Siagian.
iii
Belajar HTML dengan mudah dan cepat.
BAB 1
World Wide Web.
A. Pertanyaan dan jawaban singkat tentang World Wide Web
1. Apa yang dimaksud dengan World Wide Web?

World Wide Web (WWW) biasanya disebut sebagai Web.

Web adalah sebuah jaringan komputer (network) yang terdapat diseluruh
dunia.

Semua komputer dalam Web dapat berkomunikasi satu sama lainnya.

Semua komputer menggunakan standart komunikasi yang dinamakan
HTTP.
2. Bagaimana WWW bekerja?

Informasi Web disimpan dalam dokumen disebut Web pages.

Web pages adalah file yang disimpan pada komputer disebut Web
servers

Komputer pembaca Web pages disebut Web clients

Web clients menampilkan page dengan program disebut sebagai Web
Browser.

Browser yang populer diantaranya adalah Internet Explorer dan
Netscape Navigator.
3. Bagaimana caranya browser menjemput pages ?

Browser menjemput sebuah Web page dari sebuah server dengan
menggunakan request (permintaan).

Sebuah request adalah standart dari permintaan HTTP yang berisi
sebuah page address.

Sebuah page address diperlihatkan seperti
http://www..tedcbandung.com/index.htm.
bentuk
berikut
ini:
4. Bagaimana caranya browser menampilkan pages ?

Didalam semua Web page terdapat instruksi atau perintah-perintah yang
berfungsi untuk menampilkan isinya.

Browser menampilkan isi page dengan membaca instruksi baris per baris.
Oleh: Binsar Siagian 2001
1
Belajar HTML dengan mudah dan cepat.

Instruksi untuk menampilkan pada umumnya disebut HTML tags.

Contoh HTML tags seperti berikut : <p>Ini sebuah Paragraph</p>.
5. Siapa yang membuat Standart Web ?

Pembuat Standart Web bukan Netscape atau Microsoft.

Pembuat aturan body (kerangka) Web adalah W3C.

Pendiri W3C adalah World Wide Web Consortium.

W3C membuat spesifikasi untuk standart Web secara bersama-sama.

Standart Web yang terpenting dan umum adalah HTML, CSS and XML.

Standart HTML yang terbaru adalah XHTML 1.0.
B. Pertanyaan dan jawaban lengkap tentang World Wide Web
1. Bagaimana cara kerja World Wide Web ?
2

World Wide Web adalah koleksi informasi yang sangat luas, itu dihasilkan
dari ratusan ribu komputer dari seluruh dunia. Bila Anda mengakses
dokumen dari Web, maka banyak pandangan yang melatarbelakanginya.
Disini akan diuraikan deskripsi sederhana tetang pandangan tersebut.

World Wide Web adalah sebuah jaringan yang terdiri dari ribuan
komputer, semuanya itu dikelompokkan menjadi dua kategori yakni:
clients and servers. Melalui penggunaan software khusus mereka dapat
dibentuk menjadi satu jenis jaringan yang disebut “a client-server
network” ini bukan sesuatu yang mengherankan.

Servers menyimpan informasi dan melakukan proses permintaan
clients. Kemudian server mengirimkan permintaan informasi ke clients.
Informasi ini terdiri dari berbagai jenis data diantaranya, images, sounds,
dan text. Server juga mengirimkan instruksi-instruksi cara menampilkan
informasi ke client. Instruksi ini dikirimkan dalam bentuk format “Hypertext
Markup Language” (HTML).

Clients membuat permintaan untuk Informasi dan juga mengambil alih
tugas untuk menampilkan Informasi ke layar komputer. Bila Anda
menggunakan sebuah Web browser untuk menuntun ke Web, maka
software browser akan berperan sebagai sebuah client.

World Wide Web adalah sebuah jaringan distribusi (distributed network).
Artinya tidak ada komputer pusat (central) untuk World Wide Web.
Beberapa server pada Web dapat diakses secara langsung melalui
sebuah client. Bila sebuah server pada World Wide Web mengalami
kegagalan pemakaian (tidak berfungsi), itu bukan berarti efek dari
perbuatan dari server lain.
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.

Pemakai mengendalikan World Wide Web melalui penggunaan hubungan
hypertext (hypertext links). Bila Anda memilih atau meng-click pada
sebuah hypertext link, itu artinya Anda pergi ke area lain pada Internet.
Hampir semua dokumen dalam Web terhubung melalui penggunaan
hypertext links.

Kebanyakan dokumen pada World Wide Web ditulis dalam bentuk
Hypertext Markup Language (HTML). HTML menyediakan instruksiinstruksi untuk software client dalam hal bagaimana dokumen tersebut
akan di displaykan. HTML juga memiliki informasi tentang bagaimana
menyambungkan sebuah dokumen ke dokumen lainnya pada Web.
2. Bagaimana URLs bekerja?

Hampir semua item informasi pada World Wide Web dapat diakses
secara langsung. Itu disebabkan oleh setiap dokumen, file, dan image,
telah memiliki alamat yang spesifik. Alamat ini disebut sebagai Uniform
Resource Locators (URLs). URLs digunakan oleh software Web browsing
untuk menuju lokasi dan meng-akses informasi pada World Wide Web.
Cara berpikir dari URLs sebagai penunjuk pengalamatan untuk Internet.

G
a
m
b
a
r
1-1: Penulisan Alamat Web

Bagian pertama dari URL disebut sebagai protocol. Biasanya ditulis
dengan http://, yakni singkatan dari Hypertext Transfer Protocol.
Beberapa URLs dimulai dengan protocol yang berbeda seperti ftp:// atau
news://. Bila Anda meng-akses sebuah dokumen dari hard disk local
melalui Web maka URL akan dimulai dengan tulisan file://.

Bagian kedua dari URL (www.zdnet.com) disebut sebagai domain
name. Bila Anda sudah pernah menggunakan e-mail pada Internet, besar
kemungkinan hal ini sudah anda ketahui. Domain menggambarkan nama
dari server yang akan anda sambungkan / hubungi.

Bagian ketiga dari URL (~zdi/software/win95) disebut sebagai directory
path. Ini menunjukkan area spesifik pada server dimana item tersebut
ditempatkan. Directory paths pada Web servers bekerja seperti pada
hard disk di komputer desktop Anda. Untuk menuju lokasi tempat file
pada server, pertama sekali anda harus mengindikasikan direktorynya.

Bagian keempat dari URL (utils.html) disebut sebagai document file
name. Ini mengindikasikan file yang akan diakses. Biasanya bentuk
filenya adalah HTML, tetapi kadang-kadang dapat juga berupa sebuah
image , sound, atau file bentuk lainnya.
Oleh: Binsar Siagian 2001
3
Belajar HTML dengan mudah dan cepat.

Kadang-kadang URL memiliki bagian kelima (#WINZIP) disebut sebagai
anchor name. Ini penunjuk ke bagian tertentu pada bagian dalam
dokumen HTML. Dia selalu didahului dengan tanda pagar (#). Anchors
sangat berguna dalam pengelolaan dokumen yang besar.
3. Bagaimana menggunakan sebuah Web Browser ?
Web browser Anda adalah pintu gerbang Anda untuk menuju World Wide Web.
Browser adalah software client yang mengizinkan Anda untuk mengakses dan
menampilkan beberapa dokumen pada Web. Ada beberapa macam Web
browser, yang mungkin berkembang dan bertambah setiap tahunnya. Bila anda
selalu menggunakan Web ada baiknya untuk selalu memperbaharui software
sesuai dengan perkembangannya. Berbeda Web browser berarti ada perbedaan
kemampuan dan masing-masing akan menampilkan halaman dengan berbagai
variasi. Pada kesempatan ini kita akan menggunakan Web browser dari
Microsoft yakni Internet Explorer versi 5.00 salah satu browser yang populer
saat ini disamping browser lain, misalnya Netscape atau Opera.
4
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 2.
Mengenal HTML
A. Pertanyaan dan jawaban singkat tentang File HTML
1. Apa yang dimaksud dengan sebuah File HTML ?
 HTML adalah singkatan dari Hyper Text Markup Language.
 Sebuah file HTML terdiri dari file Text yang ditambahkan dengan tag
(tanda pengenal).
 Penambahan tanda pengenal (tag) untuk memberitahukan Web
Browser, bagaimana cara menampilkan page.
 Penyimpanan (save) sebuah file HTML harus menggunakan extension
htm atau html.
 File HTML dapat dibuat dengan menggunakan text editor seperti
Notepad.
2. Anda ingin mencobanya ?
Bila Anda menggunakan Windows, jalankan Notepad dan tulis baris teks
berikut
ini,
kemudian
simpan
(Save
As)
pada
folder
“C:\BelajarHTML\Sample” dengan nama file “latihan2_1.html” !
<html>
<head>
<title>Judul page</title>
</head>
<body>
Ini adalah homepage Saya yang pertama.
<b>Tulisan ini menggunakan bold</b>
</body>
</html>
Jalankan Internet Browser.
Pilih menu “File” kemudian “Open”, dialog Box akan muncul.
Pilih “Browse” dialog Box Internet Explorer muncul, double click folder
“BelajarHTML” double click folder “Sample” kemudian pilih file
“latihan2_1.htm” dan click “Open”.
Oleh: Binsar Siagian 2001
5
Belajar HTML dengan mudah dan cepat.
Sekarang Anda dapat melihat sebuah alamat pada dialog box, seperti
contoh “C:\BelajarHTML\Sample\latihan2_1.html”. Klick “OK” dan
kemudian Browser akan menampilkan page hasil program.
Ini adalah homepage Saya yang pertama. Tulisan ini menggunakan
bold
Penjelasan Contoh diatas.
Tag yang pertama pada dokumen HTML Anda adalah <html>. Tag ini
memberitahukan Browser bahwa ini tanda start (awal) sebuah dokumen
HTML. Tag yang terakhir pada dokumen Anda adalah </html>. Tag ini
memberitahukan Browser bahwa ini tanda akhir (end) dari dokumen HTML.
Tulisan diantara tag <head> dan tag </head> adalah informasi
Informasi judul tidak ditampilkan pada window browser.
judul.
Tulisan diantara tag <body> dan tag </body> adalah Informasi yang akan
ditampilkan pada window browser.
Tulisan diantara tag <title> dan tag </title> adalah judul dari dokumen
Anda. Informasi ini yang akan ditampilkan pada Caption browser.
Tulisan diantara tag <b> dan tag </b> akan ditampilkan dengan font Bold.
3. Catatan untuk Editor HTML.
Anda dapat mengedit HTML dengan menggunakan Editor WYSIWYG
(what you see is what you get) seperti FrontPage, Claris Home Page atau
Adobe PageMill yang langsung akan membuatkan tag pada file plain text.
Tetapi bila Anda ingin menjadi Web Developer yang terampil, Saya
anjurkan Anda untuk memulai belajar lewat plain text, dalam penulisan
sebuah file HTML. Karena dalam pembuatan page yang dinamis Editor
HTML diatas tidak dapat berbuat banyak untuk membantu Anda.
4. Pertanyaan dan jawaban untuk penyegaran.
1. Setelah saya melakakukan edit pada sebuah file HTML, Saya tidak
dapat melihat hasil pada Browser, mengapa ?
J: Pastikan bahwa Anda menyimpan (save) file dengan nama dan
extension yang benar. Misalnya : “C:\BelajarHTML\Sample\
latihan1_1.html”. Kemudian pastikan bahwa Anda memanggil file yang
Anda simpan tadi saat membuka lewat Browser.
6
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
2. Saya mencoba melakakukan perubahan (edit) pada sebuah file HTML,
ketika Browser Saya jalankan tidak ada hasil perubahan pada Browser,
mengapa ?
J: Browser menggenggam page Anda, sehingga dia tidak pernah
melakukan dua kali pembacaan file yang sama. Bila Anda melakukan
penggantian pada page Browser tidak mengetahui hal itu. Gunakan
tombol Refresh/reload untuk memaksa Browser membaca file page
hasil edit.
3. Bolehkah Saya menggunakan Internet
Navigator dengan file yang sama ?
Explorer
dan
Netscape
J: Ya, Anda dapat menggunakannya dalam latihan ini dengan Internet
Explorer 4.0 atau Netscape Navigator 4.0 atau yang terbaru. Walaupun
dalam beberapa contoh kita berasumsi bahwa Anda menggunakan
Internet Explorer 4.0 atau 5.0. Karena ada kelemahan dari Netscape
untuk mendukung standard Web yang baru.
4. Komputer Saya kebetulan menggunakan Windows, bagaimana bila
menggunakan Macintosh (Mac) ?
J: Anda dapat menggunakannya dalam latihan ini, Walaupun bukan
menggunakan Windows misalnya Mac. Tetapi untuk beberapa contoh
program kita mengasumsikan Anda menggunakan Windows 98 atau
Windows 2000.
Oleh: Binsar Siagian 2001
7
Belajar HTML dengan mudah dan cepat.
BAB 3.
Elemen - elemen HTML
Dokumen HTML terdiri dari File Text yang dibuat dengan berbagai elemen
(unsur/dasar) HTML.
Elemen-elemen HTML didefenisikan dengan menggunakan berbagai Tag
Tag-tag HTML

Tag HTML digunakan untuk memberikan tanda pada elemen HTML

Tag HTML diapit oleh tanda dengan dua buah karakter < and >

Diantara dua karakter yang diapit disebut sebagai “angle brackets”

Biasanya Tag HTML terdiri dari sepasang tanda seperti <b> dan </b>

Tag yang pertama dari pasangan tersebut adalah “start tag”, dan yang
kedua adalah “end tag”.

Tulisan (text) diantara start dan end tags adalah “element content”.

Tag HTML tidak mempermasalahkan huruf besar atau kecil <b> artinya
sama dengan <B>
Elemen- elemen HTML
Ingat contoh HTML dari halaman sebelumnya :
<html>
<head>
<title>Judul page</title>
</head>
<body>
Ini adalah homepage Saya yang pertama.
<b>Tulisan ini menggunakan bold</b>
</body>
</html>
Ini contoh elemen HTML :
<b>Tulisan ini menggunakan bold</b>
8
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Elemen
HTML
dimulai
dengan
sebuah
start
tag:
<b>
Content atau Isi dari elemen HTML adalah: Tulisan ini menggunakan bold
Elemen HTML diakhiri dengan sebuah end tag: </b>
Kegunaan dari tag <b> adalah untuk mendefenisikan sebuah elemen HTML
supaya mendisplaykannya sebagai tulisan tebal (bold).
Ini juga sebuah elemen HTML:
<body>
Ini adalah homepage Saya yang pertama.
<b>Tulisan ini menggunakan bold</b>
</body>
Elemen HTML dimulai dengan sebuah start tag: <body> dan diakhiri dengan
sebuah end tag: </body>
Kegunaan dari tag <body> adalah untuk mendefenisikan sebuah elemen HTML
bahwa dianya (tubuhnya) mengandung dokumen HTML.
Mengapa kita menggunakan tag dengan huruf kecil ?
Diatas kita menyebutkan Tag HTML tidak mempermasalahkan huruf besar atau
kecil <b> artinya sama dengan <B>.
Bila Anda mengamati Web, Anda akan memberikan catatan bahwa kebanyakan
contoh menggunakan tag dengan huruf besar. Kita selalu menggunakan huruf
kecil , mengapa?
Bila kita mempersiapkan diri untuk generasi HTML yang berikutnya, maka kita
harus membiasakan diri dengan menggunakan tag dengan huruf kecil. World
Wide Web Consortium (W3C) merekomendasikan huruf kecil untuk HTML4 dan
juga untuk XHTML (generasi berikutnya dari HTML)
Atribut-atribut (lambang) Tag
Tag dapat memiliki atribut. Atribut dapat memberikan informasi tambahan
tentang elemen HTML pada page Anda.
Tag ini mendefenisikan elemen body dari page HTML Anda: <body>. Dengan
menambahkan sebuah atribut bgcolor, Anda dapat memberitahukan Browser,
bahwa warna latar belakang (background color) dari page Anda akan diubah
menjadi merah seperti : <body bgcolor="red">.
Tag ini mendefenisikan sebuah tabel HTML : <table>. Dengan menambahkan
sebuah atribut border(batas), Anda dapat memberitahukan Browser, bahwa tabel
dibuat tanpa tanda: <table border=”0”>
Oleh: Binsar Siagian 2001
9
Belajar HTML dengan mudah dan cepat.
Atribut selalu dibuat dalam bentuk pasangan seperti ini : name=”value”.
Atribut selalu ditambahkan pada bagian start tag dalam sebuah elemen HTML.
Bentuk tanda kutip “red” atau ‘red’ ?
Nilai atribut selalu diapit oleh dua tanda kutip. Biasanya digunakan tanda kutip
ganda ( “ ) tetapi yang single ( ‘ ) pun dapat digunakan.
Pada beberapa kondisi tertentu (janggal), seperti bila nilainya sendiri memiliki
tanda kutip, biasanya kita gunakan tanda kutip tunggal, seperti contoh dibawah
ini :
Name=’Binsar “bermarga” Siagian’
10
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 4.
Dasar – dasar Tag HTML
Bagian terpenting dari tag HTML adalah tag yang mendefenisikan Headings,
paragraphs dan line breaks.
Cara yang terbaik untuk belajar HTML adalah dengan cara mencoba Contohcontoh. Saya sudah mempersiapkan beberapa contoh yang dapat Anda coba
seperti cara-cara yang telah dijelaskan pada halaman sebelumnya.
Contoh programnya sudah tersedia pada Disket Latihan. Dengan adanya file-file
ini maka diharapkan Anda dapat bekerja dan mencoba lebih praktis dan cepat.
File aslinya dibuat dengan extension “namafile.txt”, dengan maksud bila Anda
melakukan perubahan, maka yang Anda ubah adalah pada file HTML.
Oleh sebab itu langkah pertama adalah Open file Asli dan Save menjadi file
HTML dan kemudian Anda dapat melakukan perubahan.
Lakukan percobaan untuk contoh-contoh berikut :
Dokumen HTML yang sangat sederhana
Contoh ini adalah sebuah dokumen HTML yang sangat sederhana, dengan
jumlah tag yang minimal.
Contoh ini mendemonstrasikan, bagaimana sebuah text yang diapit oleh elemen
body ditampilkan pada browser.
(Buka file Latihan 4-1.txt dan simpan dengan nama latihan4_1.html, Open file
“latihan4_1.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
Tulisan yang diapit oleh elemen body ditampilkan pada browser.
</body>
</html>
Paragraph
Oleh: Binsar Siagian 2001
11
Belajar HTML dengan mudah dan cepat.
Contoh ini adalah sebuah dokumen HTML yang mendemonstrasikan, bagaimana
tampilan sebuah tulisan yang diapit oleh elemen paragraph <p> </p>.
HTML akan secara otomatis menambahkan satu baris kosong sebelum dan
sesudah heading.
(Buka file Latihan 4-2.txt dan simpan dengan nama latihan4_2.html, Open file
“latihan4_2.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<p>Ini sebuah paragraph baris 1.</p>
<p>Ini sebuah paragraph baris 2.</p>
<p>Ini sebuah paragraph baris 3.</p>
<p>Elemen-elemen Paragraph didefenisikan dengan tag p.</p>
</body>
</html>
Headings
Heading didefenisikan dengan tag <h1> sampai <h6>. <h1> mendefenisikan
heading yang terbesar, dan <h6> mendefenisikan heading yang terkecil.
HTML akan secara otomatis menambahkan satu baris kosong sebelum dan
sesudah heading.
(Buka file Latihan 4-3.txt dan simpan dengan nama latihan4_3.html, Open file
“latihan4_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Ini
Ini
Ini
Ini
Ini
Ini
contoh
contoh
contoh
contoh
contoh
contoh
dari
dari
dari
dari
dari
dari
sebuah
sebuah
sebuah
sebuah
sebuah
sebuah
heading
heading
heading
heading
heading
heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
<p>Gunakan tag heading hanya untuk Heading, jangan gunakan
untuk membuat tuliasan supaya menjadi besar. Gunakan tag
yang lain untuk keperluan itu.</p>
</body>
</html>
12
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Line Break
Tag <br> akan digunakan apabila Anda menginginkan mangakhiri baris, seperti
layaknya menekan tombol Enter, tetapi tidak menginginkan sebuah paragraph
yang baru. Tag <br> memaksa memutus baris bila Anda menempatkannya
dimana saja diantara text.
Contoh:
<p>This <br> is a para<br>graph with line breaks</p>
Tag <br> merupakan tag tunggal tidak ada tanda penutupnya.
(Buka file Latihan 4-4.txt dan simpan dengan nama latihan4_4.html, Open file
“latihan4_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<p>
Untuk
memotong
sebuah<br>paragraph<br>gunakan tag br.
</p>
<br>baris<br>dalam
</body>
</html>
Komentar atau Catatan dalam HTML
Tag komentar digunakan untuk memasukkan catatan-catatan programmer pada
source code HTML. Sebuah komentar tidak akan diproses oleh browser. Anda
dapat menggunakan catatan untuk menjelaskan arti dari sekelompok program,
yang dapat membantu Anda untuk memahami seluruh isinya bila dikemudian hari
diperlukan perbaikan atau pengembangan.
Contoh:
<!--Ini contoh tag untuk komentar atau catatan -->
Tips yang sangat berguna !
Bila Anda menulis text HTML, Anda tidak akan tahu persis bagaimana hasilnya
bila ditampilkan dengan browser lain. Karena ada orang yang memiliki display
yang besar, dan ada juga yang kecil. Apabila dilakukan pengubahan ukuran
Window maka saat itu juga akan dilakukan format ulang tampilan. Jangan
Oleh: Binsar Siagian 2001
13
Belajar HTML dengan mudah dan cepat.
melakukan pengaturan pada layar komputer Anda dengan menambahkan baris
kosong atau spasi dalam text.
HTML akan memotong spasi yang ada dalam text Anda. Banyak spasi diatara
kata dianggab menjadi satu spasi kosong dan dalam satu baris kosong yang
memiliki banyak spasi dianggab hanya satu spasi kosong.
Menggunakan paragraph kosong dengan tag <p></p> untuk menyisipkan baris
kosong adalah cara yang kurang baik. Lebih baik Anda menggunakan tag <br>.
(Tetapi jangan menggunakan tag <br> untuk membuat daftar atau list, tunggu
sampai Anda belajar tentang list pada HTML.)
Mungkin sekarang Anda akan mempunyai catatan bahwa paragraph dapat
ditulis tanpa menutup tag </p>.
Jangan mempercayai hal itu. Versi berikutnya dari HTML tidak akan mengijinkan
Anda melompati atau mengabaikan tag penutup.
HTML akan secara otomatis menambahkan baris kosong sebelum dan sesudah
elemen, seperti sebelum dan sesudah paragraph, dan sebelum dan sesudah
sebuah heading.
Kita menggunakan penggaris (rule) horizontal ( tag <hr>), untuk memisahkan
section pada latihan kita.
Contoh-Contoh yang perlu dicoba :
1. Paragraph dengan banyak spasi
Contoh ini mendemonstrasikan beberapa default untuk elemen paragraph. (Buka
file Latihan 4-5.txt dan simpan dengan nama latihan4_5.html, Open file
“latihan4_5.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
2. Sulitnya mengatur Penulisan Puisi
Contoh ini mendemonstrasikan beberapa problem dengan format HTML. (Buka
file Latihan 4-6.txt dan simpan dengan nama latihan4_6.html, Open file
“latihan4_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
3. Membuat posisi center untuk heading
Contoh ini mendemonstrasikan cara menempatkan Heading di posisi Center. .
(Buka file Latihan 4-7.txt dan simpan dengan nama latihan4_7.html, Open file
“latihan4_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
14
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
4. Horizontal Rule
Contoh ini mendemonstrasikan cara menempatkan garis horizontal diantara baris
text. . (Buka file Latihan 4-8.txt dan simpan dengan nama latihan4_8.html,
Open file “latihan4_8.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
5. Catatan atau Hidden Comment
Contoh ini mendemonstrasikan cara menempatkan catatan dalam Source code
HTML. . (Buka file Latihan 4-9.txt dan simpan dengan nama latihan4_9.html,
Open file “latihan4_9.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
6. Warna latar belakang (background)
Contoh ini mendemonstrasikan cara mengubah warna background dari sebuah
page HTML. . (Buka file Latihan 4-10.txt dan simpan dengan nama
latihan4_10.html, Open file “latihan4_10.html” lewat Browser, kemudian GO,
perhatikan hasilnya pada window browser!).
Membandingkan tag Dasar HTML:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
NN IE
W3C Purpose
<html>
<body>
3.0 3.0
3.0 3.0
3.2
3.2
Defines a html document
Defines the documents' body
<h1>-<h6> 3.0 3.0
3.2
Defines heading 1 to heading 6
<p>
<br>
<hr>
<!-->
3.2
3.2
3.2
3.2
Defines a paragraph
Inserts a single line break
Defines a horizontal rule
Defines a comment in the HTML source code
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
Oleh: Binsar Siagian 2001
15
Belajar HTML dengan mudah dan cepat.
BAB 5.
Memformat Text HTML
HTML mendefenisikan banyak elemen untuk melakukan format output, seperti
bold atau text Italic.
Dibawah ini sejumlah contoh yang dapat Anda coba sendiri.
Contoh-contoh :
1. Memformat Text.
Contoh ini mendemonstrasikan cara memformat text dalam sebuah dokumen
HTML. . (Buka file Latihan 5-1.txt dan simpan dengan nama latihan5_1.html,
Open file “latihan5_1.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
2. Memformat Text dengan tag <pre>. (Preformatted text)
Contoh ini mendemonstrasikan cara, bagaimana Anda supaya dapat
mengendalikan line break dan space dengan tag <pre>. Sehingga yang tampil
dilayar persis seperti yang Anda susun pada text Editor. (Buka file Latihan 52.txt dan simpan dengan nama latihan5_2.html, Open file “latihan5_2.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
3. Memformat Text dengan tag “Computer output”
Contoh ini mendemonstrasikan bagaimana perbedaan tag “computer output”.
Untuk dapat membedakan tulisan listing program komputer (Buka file Latihan 53.txt dan simpan dengan nama latihan5_3.html, Open file “latihan5_3.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
4. Memformat Text dengan bentuk alamat
Contoh ini mendemonstrasikan bagaimana bentuk penulisan untuk alamat
seseorang dalam dokumen HTML. (Buka file Latihan 5-4.txt dan simpan dengan
nama latihan5_4.html, Open file “latihan5_4.html” lewat Browser, kemudian
GO, perhatikan hasilnya pada window browser!).
5. Memformat Text dengan bentuk singkatan (Abbreviations and acronyms)
Contoh ini mendemonstrasikan bagaimana cara penulisan untuk Singkatan atau
persamaan. (Buka file Latihan 5-5.txt dan simpan dengan nama
latihan5_5.html, Open file “latihan5_5.html” lewat Browser, kemudian GO,
perhatikan hasilnya pada window browser!).
6. Memformat Text dengan “text direction”
Contoh ini mendemonstrasikan bagaimana cara mengubah arah penulisan text.
(Buka file Latihan 5-6.txt dan simpan dengan nama latihan5_6.html, Open file
16
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
“latihan5_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
7. Memformat Text dengan “Quotations”
Contoh ini mendemonstrasikan bagaimana cara mengubah posisi Indent text.
(Buka file Latihan 5-7.txt dan simpan dengan nama latihan5_7.html, Open file
“latihan5_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
Dengan block elemen quote, browser menyisipkan line break dan margin, tetapi
elemen q tidak mengubah (render) sesuatu menjadi sesuatu yang khusus.
8. Memformat Text dengan cara Menghapus dan menyisipkan Text.
Contoh ini mendemonstrasikan bagaimana cara memberikan tanda ke subuah
text yang akan dihapus atau disisipkan dalam sebuah dokumen. (Buka file
Latihan 5-8.txt dan simpan dengan nama latihan5_8.html, Open file
“latihan5_8.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
Bagaimana menampilkan Source HTML.
Pernahkah Anda melihat sebuah Web page yang luarbiasa dan,” Bagaimana
mereka membuatnya ?”. Untuk melihatnya, sangat sederhana, click option View
pada toolbar browser Anda dan pilih SOURCE atau PAGE SOURCE. Tindakan
ini akan membuka sebuah window yang memperlihatkan kepada kita actual
HTML dari page tersebut.
Ingat !, Anda dapat menyimpan source file, dan menggunakannya sebagai
sebuah template untuk Web page milik Anda.
Tag untuk Format Text :
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
NN
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
Oleh: Binsar Siagian 2001
IE
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
4.0
4.0
W3C
3.2
3.2
3.2
3.2
3.2
3.2
3.2
3.2
4.0
4.0
Purpose
Defines bold text
Defines big text
Defines emphasized text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
17
Belajar HTML dengan mudah dan cepat.
<s>
<strike>
<u>
Deprecated. Use <del> instead
Deprecated. Use <del> instead
Deprecated. Use styles instead
Tag untuk "Computer Output" :
Start Tag
<code>
<kbd>
<samp>
<tt>
<var>
<pre>
<listing>
<plaintext>
<xmp>
NN
3.0
3.0
3.0
3.0
3.0
3.0
IE
3.0
3.0
3.0
3.0
3.0
3.0
W3C
3.2
3.2
3.2
3.2
3.2
3.2
Purpose
Defines computer code text
Defines keyboard text
Defines sample computer code
Defines teletype text
Defines a variable
Defines preformatted text
Deprecated. Use <pre> instead
Deprecated. Use <pre> instead
Deprecated. Use <pre> instead
Tag untuk Citations, Quotations, Definition:
Start Tag
<abbr>
<acronym>
<address>
<bdo>
<blockquote>
<q>
<cite>
<dfn>
18
NN
IE
4.0
4.0
4.0
3.0
3.0
3.0
4.0
3.0
3.0
W3C
4.0
4.0
3.2
4.0
3.2
4.0
3.2
3.2
Purpose
Defines an abbreviation
Defines an acronym
Defines an address element
Defines the text direction
Defines a long quotation
Defines a short quotation
Defines a citation
Defines a definition term
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 6.
HTML Character Entities
Beberapa karakter seperti tanda lebih kecil ( < ) , memiliki arti tersendiri dalam
HTML, oleh sebab itu tidak dapat digunakan didalam penulisan text.
Untuk mendisplaykan tanda lebih kecil (<) dalam HTML, kita harus menggunakan
“entity” karakter .
Karakter Entity
Beberapa karakter ada yang mempunyai arti tersendiri dalam HTML, seperti
tanda lebih kecil ( < ), memiliki arti start tag dalam HTML. Bila kita menginginkan
browser menampilkan tanda < kita harus menyisipkan karakter entity didalam
source HTML.
Karakter entity terdiri dari tiga macam yakni sebuah ampersand (&), sebuah
nama entity atau sebuah tanda # dan sebuah entity number, dan yang terakhir
sebuah tanda semicolon ( ; ).
Untuk menampilkan tanda lebih kecil pada dokumen HTML kita harus menulis :
&lt atau &#60. Keuntungan dari penggunaan nama singkatan lebih mudah
mengingatnya dari pada urutan angka kodenya. Kerugiannya tidak semua
browser mendukung penggunaan singkatan yang baru, sedangkan dengan
penggunaan nomor code semua browser dapat menjalankannya.
Catatan tanda-tanda ini sangat sensitip
Contoh berikut ini memperlihatkan untuk Anda cara pemakaian “character
entities”
(Buka file Latihan 6-1.txt dan simpan dengan nama latihan6_1.html, Open file
“latihan6_1.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
Tanda spasi tetap (Non-breaking Space)
Seluruh “character entity” dalam penulisan program HTML adalah bersifat “nonbreaking space” yakni tidak ada pemotongan spasi diantara text yang ditulis.
Biasanya HTML akan memotong spasi yang terdapat pada text seperti yang
telah dijelaskan sebelumnya, yakni bila Anda tulis 10 spasi dalam text HTML
maka Browser akan membuang 9 spasi dari padanya. Untuk menambahkan
spasi yang tetap pada tampilan browser maka Anda harus menggunakan &nbsp
yakni character entity (Non-breaking Space)
Berikut ini disajikan sejumlah tabel yang berhubungan dengan “character entity”
yang dapat digunakan sesuai keperluan.
Oleh: Binsar Siagian 2001
19
Belajar HTML dengan mudah dan cepat.
The Most Common Character Entities:
Result
Description
<
>
&
"
'
non-breaking space
less than
greater than
ampersand
quotation mark
apostrophe
Entity
Name
 
<
>
&
"
Entity
Number
 
<
>
&
"
'
Some other Commonly Used Character Entities:
Result
Description
¢
£
¥
§
©
®
×
÷
cent
pound
yen
section
copyright
registered trademark
multiplication
division
Entity
Name
¢
£
¥
§
©
®
×
÷
Entity
Number
¢
£
¥
§
©
®
×
÷
Character entities yang lebih lengkap, dijelaskan pada bagian berikutnya yakni
HTML 4.01 Entities Reference.
20
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 7.
Entities Reference untuk HTML 4.01
HTML 4.01 mendukung ISO 8859-1 yakni karakter set untuk Latin-1.
Bagian terendah dari ISO 8859-1 ( kode dari 0-127) adalah standart original (asli)
dari kode ASCII 7 bit. Semua karakter ini dapat digunakan tanpa sebuah
Character reference.
Bagian tertinggi dari ISO 8859-1 ( kode dari 160-225) semuanya akan dapat
digunakan dengan memakai nama “character entity”.
Catatan nama “character entity” sangat sensitive.
ASCII Entities with new Entity Names
Result
Description
"
&
<
>
quotation mark
ampersand
less-than
greater-than
Entity
Name
"
&
<
>
Entity
Number
"
&
<
>
Entity
Name
 
¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
Entity
Number
 
¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
ISO 8859-1 Symbol Entities
Result
¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬
®
¯
°
±
²
³
Description
non-breaking space
inverted exclamation mark
currency
cent
pound
yen
broken vertical bar
section
spacing diaresis
copyright
feminine ordinal indicator
angle quotation mark (left)
negation
soft hyphen
registered trademark
spacing macron
degree
plus-or-minus
superscript 2
superscript 3
Oleh: Binsar Siagian 2001
21
Belajar HTML dengan mudah dan cepat.
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
spacing acute
micro
paragraph
middle dot
spacing cedilla
superscript 1
masculine ordinal indicator
angle quotation mark (right)
fraction 1/4
fraction 1/2
fraction 3/4
inverted question mark
multiplication
division
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
Entity
Name
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Entity
Number
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
ISO 8859-1 Character Entities
22
Result
Description
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
capital a, grave accent
capital a, acute accent
capital a, circumflex accent
capital a, tilde
capital a, umlaut mark
capital a, ring
capital ae
capital c, cedilla
capital e, grave accent
capital e, acute accent
capital e, circumflex accent
capital e, umlaut mark
capital i, grave accent
capital i, acute accent
capital i, circumflex accent
capital i, umlaut mark
capital eth, Icelandic
capital n, tilde
capital o, grave accent
capital o, acute accent
capital o, circumflex accent
capital o, tilde
capital o, umlaut mark
capital o, slash
capital u, grave accent
capital u, acute accent
capital u, circumflex accent
capital u, umlaut mark
capital y, acute accent
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
capital THORN, Icelandic
small sharp s, German
small a, grave accent
small a, acute accent
small a, circumflex accent
small a, tilde
small a, umlaut mark
small a, ring
small ae
small c, cedilla
small e, grave accent
small e, acute accent
small e, circumflex accent
small e, umlaut mark
small i, grave accent
small i, acute accent
small i, circumflex accent
small i, umlaut mark
small eth, Icelandic
small n, tilde
small o, grave accent
small o, acute accent
small o, circumflex accent
small o, tilde
small o, umlaut mark
small o, slash
small u, grave accent
small u, acute accent
small u, circumflex accent
small u, umlaut mark
small y, acute accent
small thorn, Icelandic
small y, umlaut mark
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
Entity
Name
Œ
œ
Š
š
Ÿ
ˆ
˜
 
 
 
Entity
Number
Œ
œ
Š
š
Ÿ
ˆ
˜
 
 
 
Some Other Entities supported by HTML
Result
Description
Œ
œ
Š
š
Ÿ
ˆ
˜
capital ligature OE
small ligature oe
capital S with caron
small S with caron
capital Y with diaeres
modifier letter circumflex accent
small tilde
en space
em space
thin space
Oleh: Binsar Siagian 2001
23
Belajar HTML dengan mudah dan cepat.
–
—
‘
’
‚
“
”
„
†
‡
‰
‹
›
€
™
zero width non-joiner
zero width joiner
left-to-right mark
right-to-left mark
en dash
em dash
left single quotation mark
right single quotation mark
single low-9 quotation mark
left double quotation mark
right double quotation mark
double low-9 quotation mark
dagger
double dagger
per mille
single left-pointing angle quotation
single right-pointing angle quotation
euro
trademark
‌
‍
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
‰
‹
›
€
‌
‍
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
‰
‹
›
€
™
original 7-BIT ASCII standard
24
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 8.
Links dalam HTML
HTML menggunakan hyperlink untuk menyambungkan satu sama lain file
dokumen dalam Web
Contoh-contoh :
1. Membuat Hyperlink Page
Contoh ini mendemonstrasikan bagaimana cara membuat link dalam sebuah file
HTML. (Buka file Latihan 8-1.txt dan simpan dengan nama latihan8_1.html,
Open file “latihan8_1.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<p>
<a href="lastpage.htm"> This text </a> is a link to a
page on this Web site.
</p>
<p>
<a href="http://www.microsoft.com/"> This text</a> is a
link to a page on the World Wide Web.
</p>
</body>
</html>
2. Membuat Hyperlink Image
Contoh ini mendemonstrasikan bagaimana cara membuat link ke Image file
dalam HTML. (Buka file Latihan 8-2.txt dan simpan dengan nama
latihan8_2.html, Open file “latihan8_2.html” lewat Browser, kemudian GO,
perhatikan hasilnya pada window browser!).
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img
border="0"
src="tblNext.bmp"
height="38"></a>
</p>
width="65"
</body>
</html>
Oleh: Binsar Siagian 2001
25
Belajar HTML dengan mudah dan cepat.
Tag Anchor dan Atribut Href
HTML menggunakan tag <a> (anchor) untuk membuat link ke dokumen lain.
Sebuah anchor dapat menunjuk ke beberapa resource dalam Web diantaranya:
sebuah file page HTML, sebuah file gambar (image), sebuah file suara (sound),
sebuah file Video (movie) dan sebagainya.
Syntax untuk membuat sebuah anchor:
<a href="url">Text to be displayed</a>
Tag <a> digunakan untuk membuat sebuah anchor link pada form, atribut href
digunakan untuk pengalamatan dokumen yang akan di link, dan kata diantara
tanda pembuka dan penutup anchor akan didisplaykan sebagai tanda hyperlink.
Anchor ini mendefenisikan link ke tedcbandung.com
<a href="http://www.tedcbandung.com/">Mengunjungi
TEDC Bandung</a>
Web
(Buka file Latihan 8-3.txt dan simpan dengan nama latihan8_3.html, Open file
“latihan8_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
Atribut Target
Dengan atribut target, Anda dapat mendefenisikan kemana dokumen yang telah
di link akan dibuka / ditempatkan.
Baris program dibawah ini akan membuka dokumen pada window browser yang
baru.
<a href=" http://www.tedcbandung.com/"
target="_blank"> Mengunjungi Web TEDC Bandung!</a>
(Buka file Latihan 8-4.txt dan simpan dengan nama latihan8_4.html, Open file
“latihan8_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
26
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Tag Anchor dan nama Atribut
Nama atribut digunakan untuk membuat nama sebuah anchor. Bila
menggunakan nama anchor kita dapat membuat link (seperti menu pada
halaman yang sama) yang dapat meloncat langsung ke lokasi tujuan (specified
section). Sehingga kita tidak membiarkan pemakai menggunakan scroll untuk
mencari dan menemukan informasi lengkap dari section yang diharapkan sesuai
dengan judul yang dipilih.
Syntax untuk sebuah nama anchor:
<a name="label">Text to be displayed</a>
Nama atribut digunakan untuk membuat nama Anchor. Pemberian nama anchor
dapat berupa text yang Anda inginkan.
Baris program dibawah mendefenisikan nama sebuah anchor
<a name="tips">Read the Useful Tips section</a>
Anda harus memperhatikan bahwa nama anchor tidak ditampilkan pada display
secara khusus.
Untuk link nama anchor Anda harus menambahkan tanda # dan nama anchor
pada bagian akhir dari URL, seperti berikut ini:
<a
href="http://
www.tedcbandung.com/html_links.html#tips">
Baca tips Internet yang disajikan!</a>
Baris diatas akan membawa pemakai (user) langsung ke lokasi text yang
mempunyai nama anchor <a name="tips">... </a> dalam file “html_links.html”.
Hyperlink tujuan yakni form Baca Tips yang terdapat pada file html_links.html
akan menggunakan syntax berikut ini:
<a href="#tips">Tips Internet</a>
Contoh-contoh:
Oleh: Binsar Siagian 2001
27
Belajar HTML dengan mudah dan cepat.
1. Membuat sebuah link pada window browser baru.
Contoh ini mendemonstrasikan bagaimana cara membuat link ke halaman lain
dengan membuka window yang baru, sehingga user tidak meninggalkan Web
site Anda. (Buka file Latihan 8-5.txt dan simpan dengan nama latihan8_5.html,
Open file “latihan8_5.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
2. Membuat sebuah link pada halaman yang sama.
Contoh ini mendemonstrasikan bagaimana cara membuat link untuk meloncat
antar section pada satu halaman yang sama. ( Buka file Latihan 8-6.txt dan
simpan dengan nama latihan8_6.html, Open file “latihan8_6.html” lewat
Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<body>
<p><a href="#C4">See also Chapter 4.</a></p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
3. Membuat sebuah link ke alamat e-mail.
28
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Contoh ini mendemonstrasikan bagaimana cara membuat link ke alamat e-mail,
link ini akan berfungsi bila Anda memiliki program mail yang terinstal dan
dijalankan, misalnya Outlook 5.0 dsb.
( Buka file Latihan 8-7.txt dan simpan dengan nama latihan8_7.html, Open file
“latihan8_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<body>
<p>
This is a mail link:
<a href="mailto:[email protected]?Subject=Hello again">
Send Mail</a>
</p>
</body>
</html>
4. Cara ke 2 membuat link ke alamat e-mail.
Contoh ini mendemonstrasikan bagaimana cara membuat link ke alamat e-mail,
link ini akan berfungsi bila Anda memiliki program mail yang terinstal dan
dijalankan, misalnya Outlook 5.0 dsb, dengan cara yang lebih lengkap.
( Buka file Latihan 8-8.txt dan simpan dengan nama latihan8_8.html, Open file
“latihan8_8.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:[email protected]?
[email protected]&
[email protected]&
subject=Summer%20Party&
body=You%20are%20invited%20to
%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p><b>
Note:</b>Spaces between words, should be replaced by%20
(instead of a space). This way the browser will display your
text properly in the mail.
</p>
</body>
</html>
Tag Link dan target:
Oleh: Binsar Siagian 2001
29
Belajar HTML dengan mudah dan cepat.
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
<a>
NN
3.0
Target
Attributes
target="_blank"
target="_self"
Purpose
target="_parent"
target="_top"
30
IE
3.0
W3C
3.2
Purpose
Defines an anchor
Loads the new document in a new blank window
Loads the new document in the same window as the
anchor (default)
Loads the new document in the parent frame (when
using frames)
Loads the new document in the entire browser window
(nice way to break out of frames)
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 9.
Bingkai ( Frame ) HTML.
Dengan bingkai (frame), Anda dapat menampilkan lebih dari satu Web page
pada window browser yang sama.
Contoh:
1. Mengatur Frame Vertikal.
Contoh ini mendemonstrasikan bagaimana frame vertikal (cols) diatur dengan
tiga dokumen yang berbeda. ( Buka file Latihan 9-1.txt dan simpan dengan
nama latihan9_1.html, Open file “latihan9_1.html” lewat Browser, kemudian
GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset cols="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
2. Mengatur Frame Horizontal.
Contoh ini mendemonstrasikan bagaimana frame Horizontal (rows) diatur
dengan tiga dokumen yang berbeda. ( Buka file Latihan 9-2.txt dan simpan
dengan nama latihan9_2.html, Open file “latihan9_2.html” lewat Browser,
kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset rows="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
Frame
Oleh: Binsar Siagian 2001
31
Belajar HTML dengan mudah dan cepat.
Dengan bingkai (frame), Anda dapat menampilkan lebih dari satu Web page
pada window browser yang sama. Masing-masing dokumen HTML disebut
sebuah Frame, dan masing-masing frame berdiri sendiri terhadap yang lainnya.
Kelemahan penggunaan frame adalah:

Web developer harus mempertahankan track dari beberapa dokumen
HTML.

Sangat sulit untuk mencetak page yang ada.
Tag untuk Frameset

Tag <frameset> mendefenisikan bagaimana pembagian window kedalam
beberapa frame.

Masing-masing frameset mendefenisikan pasangan untuk rows atau
columns.

Besaran untuk rows/columns menandakan ukuran area screen masingmasing row/column yang akan dibuat.
Tag untuk Frame:
Tag <frame> mendefenisikan bagaimana dokumen HTML ditempatkan di
masing-masing frame.
Pada contoh dibawah ini kita memiliki sebuah frameset dengan dua buah kolom.
Kolom yang pertama adalah di set ke 25% dari lebar window browser. Kolom
yang ke dua 75% dari lebar window browser. Dokumen HTML "
tryhtml_frame_a.htm"
ditempatkan
pada
kolom
pertama,
dan
“tryhtml_frame_b.htm” ditempatkan pada kolom yang kedua:
<html>
<frameset cols="25%,75%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
</frameset>
</html>
Catatan – Tips yang berguna.
Bila border (pembatas) Frame kelihatan, maka pengguna (user) dapat mengubah
ukuran Frame dengan cara dragging border (menempatkan kursor pada garis
pembatas, kemudian menekan tombol kiri mouse dan ditahan, kemudian digeser
32
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
ke posisi yang diinginkan). Untuk mencegah pengguna melakukan hal ini, Anda
dapat menambahkan atribut noresize ke tag <frame>.
Tambahkan tag <noframes> untuk browser yang tidak mendukung frame.
Contoh-contoh :
1. Frameset Campuran (Mixed).
Contoh ini mendemonstrasikan bagaimana membuat frameset dengan tiga
dokumen yang berbeda dan menggabungkan Kolom dan Row . ( Buka file
Latihan 9-3.txt dan simpan dengan nama latihan9_3.html, Open file
“latihan9_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<frameset rows="50%,50%">
<frame src="tryhtml_frame_a.htm">
<frameset cols="25%,75%">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</frameset>
</html>
2. Frame Navigasi (Navigation Frame).
Contoh ini mendemonstrasikan bagaimana membuat frame navigasi. Frame
navigasi terdiri dari sebuah list dari link, dengan target frame yang ke dua. Frame
yang ke dua memperlihatkan isi dokumen yang di Link.
( Buka file Latihan 9-4.txt dan simpan dengan nama latihan9_4.html, Open file
“latihan9_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="tryhtml_frame_a.htm"
name="showframe">
</frameset>
</html>
Oleh: Binsar Siagian 2001
33
Belajar HTML dengan mudah dan cepat.
Berikut ini adalah isi dari file “tryhtml_contents.htm”
<html>
<body>
<a
href
="tryhtml_frame_a.htm"
="showframe">Frame  a</a><br>
<a
href
="tryhtml_frame_b.htm"
="showframe">Frame  b</a><br>
<a
href
="tryhtml_frame_c.htm"
="showframe">Frame  c</a>
target
target
target
</body>
</html>
3. Sisipan dalam Frame (Inline frame).
Contoh ini mendemonstrasikan bagaimana menampilkan sebuah page dalam
sebuah frame (inline) atau Sebuah Page HTML didalam sebuah frame.
( Buka file Latihan 9-5.txt dan simpan dengan nama latihan9_5.html, Open file
“latihan9_5.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<body>
<iframe src ="index.htm"> </iframe>
<p>Some older browsers don't support iframes.<p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
4. Melompat ke lokasi spesifik dengan sebuah frame.
(Jump to a specified section within a frame)
Contoh ini mendemonstrasikan dua frame. Salah satu frame memiliki sumber
untuk menunjuk ke lokasi yang spesifik dalam sebuah file. Lokasi yang spesifik
dibuat dengan menggunakan <a name="C10"> didalam file "link.htm".
( Buka file Latihan 9-6.txt dan simpan dengan nama latihan9_6.html, Open file
“latihan9_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<frameset cols="20%,80%">
<frame src="tryhtml_frame_a.htm">
34
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
<frame src="link.htm#C10">
</frameset>
</html>
5. Melompat ke lokasi spesifik dengan sebuah frame.
(Jump to a specified section with frame navigation)
Contoh ini mendemonstrasikan dua frame. Frame navigasi (Content.htm)
dimasukkan sebelah kiri, dengan berisi sejumlah list untuk link, dengan frame
yang ke dua menjadi target frame (link.htm). Frame yang kedua menunjukkan
dokumen yang di link. Salah satu link dari frame navigasi ditujukan ke lokasi
spesifik pada file target. Kode HTML dalam file “content.htm” diperlihatkan seperti
berikut:
<a href ="link.htm" target ="showframe">Link without Anchor</a>
<br>
<a href ="link.htm#C10" target ="showframe">Link with Anchor</a>
( Buka file Latihan 9-7.txt dan simpan dengan nama latihan9_7.html, Open file
“latihan9_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm" name="showframe">
</frameset>
</html>
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm" name="showframe">
</frameset>
</html>
6. Membatalkan sebuah frame ( Break out of a frame ).
Contoh ini mendemonstrasikan bagaimana cara membatalkan sebuah frame, bila
site Anda terkunci oleh sebuah frame.
( Buka file Latihan 9-6.txt dan simpan dengan nama latihan9_6.html, Open file
“latihan9_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser! ).
<html>
<body>
<p>Locked in a frame?</p>
Oleh: Binsar Siagian 2001
35
Belajar HTML dengan mudah dan cepat.
<a href="http://www.dikmenjur.com/"
target="_top">Click here!</a>
</body>
</html>
Tag untuk Frame:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
36
Start Tag
<frameset>
<frame>
<noframes>
NN
3.0
3.0
3.0
IE
3.0
3.0
3.0
W3C
4.0
4.0
4.0
<iframe>
6.0 3.0 4.0
Purpose
Defines a set of frames
Defines a sub window (a frame)
Defines a noframe section for browsers that
do not handle frames
Defines an inline sub window (frame)
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 10.
Membuat tabel dengan HTML
Dengan HTML Anda dapat membuat tabel.
Contoh:
1. Tabel
Contoh ini mendemonstrasikan cara membuat table didalam sebuah dokumen
HTML. (Buka file Latihan 10-1.txt dan simpan dengan nama latihan10_1.html,
Open file “latihan10_1.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr> <td>100</td> <td>200</td> <td>300</td></tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<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>
Oleh: Binsar Siagian 2001
37
Belajar HTML dengan mudah dan cepat.
1. Tanda pembatas dalam Tabel (border)
Contoh ini mendemonstrasikan cara mengaktifkan border yang berbeda-beda
untuk tabel. (Buka file Latihan 10-2.txt dan simpan dengan nama
latihan10_2.html, Open file “latihan10_2.html” lewat Browser, kemudian GO,
perhatikan hasilnya pada window browser!).
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
</body>
</html>
Tabel
Tabel didefenisikan dengan tag <table>. Sebuah tabel terdiri dari beberapa row
(dengan tag <tr>), dan setiap row dibagi kedalam beberapa cell (dengan tag
<td>). Huruf td mengartikan “table data” yang berarti isi data cell. Sebuah data
cell dapat berisi text, images, list, paragraph, form, horizontal rule, table dan
sebagainya.
(Buka file Latihan 10-3.txt dan simpan dengan nama latihan10_3.html, Open
file “latihan10_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
38
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Tabel dan atribut untuk border.
Bila Anda tidak menentukan atribut untuk border, tabel akan ditampilkan tanpa
garis pembatas. Suatu saat border ini sangat berguna, tetapi biasanya Anda
tentukan sesuai dengan kebutuhan.
Untuk menampilkan tabel dengan border, Anda harus menggunakan atribut
untuk border:
(Buka file Latihan 10-4.txt dan simpan dengan nama latihan10_4.html, Open
file “latihan10_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Heading didalam Tabel
Heading didalam tabel didefenisikan dengan tag <th>.
(Buka file Latihan 10-5.txt dan simpan dengan nama latihan10_5.html, Open
file “latihan10_5.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Bagaimana hasilnya pada browser ?
Oleh: Binsar Siagian 2001
39
Belajar HTML dengan mudah dan cepat.
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
Cell kosong pada Tabel.
Cell dari tabel dengan isi kosong tidak ditampilkan oleh kebanyakan browser.
(Buka file Latihan 10-6.txt dan simpan dengan nama latihan10_6.html, Open
file “latihan10_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
Bagaimana hasilnya pada browser ?
row 1, cell 1 row 1, cell 2
row 2, cell 1
Catatan border disekitar tabel cell kosong adalah suatu kesalahan.
Untuk membenarkan hal ini, tambahkan sebuah “non-breaking space” (&nbsp)
untuk mengosongkan data cell, untuk membuat border supaya kelihatan.
(Buka file Latihan 10-7.txt dan simpan dengan nama latihan10_7.html, Open
file “latihan10_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<table border="1">
<tr>
<td>row 1, cell 1</td>
40
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
Bagaimana hasilnya pada browser ?
row 1, cell 1 row 1, cell 2
row 2, cell 1
Contoh-contoh:
1. Tabel tanpa pembatas (border)
Contoh ini mendemonstrasikan sebuah tabel tanpa border. (Buka file Latihan 108.txt dan simpan dengan nama latihan10_8.html, Open file “latihan10_8.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<h4>Tabel ini tidak mempunyai border:</h4>
<table>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>400</td><td>500</td><td>600</td></tr>
</table>
<h4>Tabel ini tidak mempunyai border, karena nilai atribut= 0
</h4>
<table border="0">
<tr> <td>100</td>
<tr> <td>400</td>
</table>
<td>200</td>
<td>500</td>
<td>300</td></tr>
<td>600</td></tr>
</body>
</html>
2. Heading didalam sebuah Tabel.
Contoh ini mendemonstrasikan bagaimana menampilkan header dalam sebuah
tabel. (Buka file Latihan 10-9.txt dan simpan dengan nama latihan10_9.html,
Oleh: Binsar Siagian 2001
41
Belajar HTML dengan mudah dan cepat.
Open file “latihan10_9.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th></tr>
<tr><td>Binsar
Siagian</td>
<td>6554486</td></tr>
</table>
<th>Telephone</th>
<td>6652326</td>
<h4>Vertical headers:</h4>
<table border="1">
<tr> <th>First Name:</th> <td>Binsar Siagian</td></tr>
<tr> <th>Telephone:</th> <td>6652326</td> </tr>
<tr> <th>Telephone:</th> <td>6654486</td> </tr>
</table>
</body>
</html>
3. Tabel kosong.
Contoh ini mendemonstrasikan bagaimana menggunakan “ ” untuk
menghandel cell yang tidak mempunyai isi (content).
(Buka file Latihan 10-10.txt dan simpan dengan nama latihan10_10.html, Open
file “latihan10_10.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<table border="1">
<tr> <td>Some text</td> <td>Some text</td></tr>
<tr> <td></td> <td>Some text</td></tr>
</table>
<p>
Seperti yang Anda lihat salah satu Cell tidak punya border.
Itu disebabkan oleh karena isinya kosong. Coba masukkan
sebuah space kedalam Cell. Apakah tetap tidak tanpa border ?
</p>
<p>
Trick untuk memasukkan sebuah no-breaking space (" ")
kedalam cell. No-breaking space adalah sebuah karakter
42
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
entity. Bila Anda tidak mengetahui apa yang dimaksud dengan
karakter entity, baca penjelasan sebelumnya.
</p>
</body>
</html>
4. Tabel dengan menggunakan Caption.
Contoh ini mendemonstrasikan bagaimana menggunakan tabel dengan Caption.
(Buka file Latihan 10-11.txt dan simpan dengan nama latihan10_11.html, Open
file “latihan10_11.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>
Tabel ini memiliki sebuah Caption, dan border yang tebal:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr> <td>100</td> <td>200</td>
<tr> <td>400</td> <td>500</td>
</table>
<td>300</td></tr>
<td>600</td></tr>
</body>
</html>
5. Tabel dengan rentangan beberapa kolom/baris per Cell.
Contoh ini mendemonstrasikan bagaimana mendefenisikan Cell yang memiliki
rentangan lebih dari satu kolom atau baris.
(Buka file Latihan 10-12.txt dan simpan dengan nama latihan10_12.html, Open
file “latihan10_12.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>Cell dengan rentang dua kolom:</h4>
<table border="1">
<tr>
<th>Name</th>
Oleh: Binsar Siagian 2001
43
Belajar HTML dengan mudah dan cepat.
<th colspan="2">Telephone</th>
</tr>
<tr><td>Binsar Siagian</td><td>6652326</td><td>6554486</td>
</tr>
</table>
<h4>Cell dengan rentang dua baris:</h4>
<table border="1">
<tr><th>First Name:</th><td>Binsar Siagian</td></tr>
<tr><th rowspan="2">Telephone:</th><td>6652326</td></tr>
<tr><td>6554486</td></tr>
</table>
</body>
</html>
6. Tag didalam sebuah Tabel.
Contoh ini mendemonstrasikan bagaimana cara menampilkan elemen-elemen
didalam elemen lain.
(Buka file Latihan 10-13.txt dan simpan dengan nama latihan10_13.html, Open
file “latihan10_13.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<table border="1">
<tr>
<td><p>Ini sebuah paragraph !</p><p>Ini
berikutnya</p></td>
<td>Cell ini memiliki sebuah tabel:
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</td>
</tr>
paragraph
yang
<tr>
<td>Cell ini memiliki sebuah list (daftar):
<ul> <li>Appel</li><li>Pisang</li><li>Pepaya</li> </ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
44
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
7. Menggunakan cell padding didalam sebuah Tabel.
Contoh ini mendemonstrasikan bagaimana menggunakan cell padding untuk
membuat jarak text dari batas tabel.
(Buka file Latihan 10-14.txt dan simpan dengan nama latihan10_14.html, Open
file “latihan10_14.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<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>Menggunakan 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>
8. Menggunakan Cell spacing didalam sebuah Tabel.
Contoh ini mendemonstrasikan bagaimana menggunakan cellspacing untuk
membuat jarak antar Cell dalam sebuah tabel.
(Buka file Latihan 10-15.txt dan simpan dengan nama latihan10_15.html, Open
file “latihan10_15.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr> <td>First</td> <td>Row</td></tr>
Oleh: Binsar Siagian 2001
45
Belajar HTML dengan mudah dan cepat.
<tr> <td>Second</td>
</table>
<td>Row</td></tr>
</body>
</html>
9. Menambahkan background color atau background image kedalam
sebuah Tabel.
Contoh ini mendemonstrasikan bagaimana menambahkan warna latar belakang
kedalam sebuah tabel atau menambahkan gambar (image) latar belakang untuk
sebuah tabel.
(Buka file Latihan 10-16.txt dan simpan dengan nama latihan10_16.html,
Open file “latihan10_16.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="red">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>A background image:</h4>
<table border="1" background="background.jpg">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
</body>
</html>
10. Menambahkan background color atau background image kedalam
sebuah Cell tabel.
Contoh ini mendemonstrasikan bagaimana menambahkan warna latar belakang
kedalam sebuah cell tabel (kotak) atau menambahkan gambar (image) latar
belakang untuk sebuah cell tabel.
(Buka file Latihan 10-17.txt dan simpan dengan nama latihan10_17.html,
Open file “latihan10_17.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
46
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr><td bgcolor="red">First</td><td>Row</td></tr>
<tr>
<td background="background.jpg">Second</td><td>Row</td>
</tr>
</table>
</body>
</html>
11. Meluruskan isi (content ) dalam sebuah cell tabel.
Contoh ini mendemonstrasikan bagaimana meluruskan susunan content dalam
sebuah cell didalam tabel, supaya terlihat lebih rapih. (Buka file Latihan 1018.txt dan simpan dengan nama latihan10_18.html, Open file
“latihan10_18.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Tabungan bulan....</th>
<th align="right">Januari</th>
<th align="right">Februari</th>
</tr>
<tr>
<td align="left">Pakaian</td>
<td align="right">Rp. 25.000,-</td>
<td align="right">Rp. 17.500,-</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">Rp. 4.500,-</td>
<td align="right">Rp. 8.250,-</td>
</tr>
<tr>
<td align="left">Jajanan</td>
<td align="right">Rp. 7.500,-</td>
<td align="right">Rp. 2.500,-</td>
</tr>
<tr>
<th align="left">Jumlah</th>
<th align="right">Rp. 37.000,-</th>
<th align="right">Rp. 28.250,-</th>
</tr>
Oleh: Binsar Siagian 2001
47
Belajar HTML dengan mudah dan cepat.
</table>
</body>
</html>
12. Mengaktifkan beberapa atribut untuk bingkai (frame).
Contoh ini mendemonstrasikan bagaimana menggunakan atribut “frame” untuk
mengontrol tampilan pembatas diseputar tabel. (Buka file Latihan 10-19.txt dan
simpan dengan nama latihan10_19.html, Open file “latihan10_19.html” lewat
Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<p>
Bila tidak ada frame diseputar tabel pada contoh ini,
berarti browser Anda sudah tertinggal (versi lama tidak
mendukung fungsi ini).
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr><td>First</td><td>Row</td></tr>
48
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
</body>
</html>
Oleh: Binsar Siagian 2001
49
Belajar HTML dengan mudah dan cepat.
Table Tags:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
NN IE W3C Purpose
<table>
3.0 3.0 3.2
Defines a table
<th>
3.0 3.0 3.2
Defines a table header
<tr>
3.0 3.0 3.2
Defines a table row
<td>
3.0 3.0 3.2
Defines a table cell
<caption> 3.0 3.0 3.2
Defines a table caption
<colgroup>
3.0 4.0
Defines groups of table columns
<col>
3.0 4.0
Defines the attribute values for one or more columns in
a table
<thead>
4.0 4.0
Defines a table header that will not scroll
<tbody>
4.0 4.0
Defines a table body that scrolls within a fixed table
header and table footer
<tfoot>
4.0 4.0
Defines a table footer that will not scroll
50
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
BAB 11.
HTML Lists
Dukungan HTML untuk ordered, undordered dan defenition lists
Contoh:
1. Unordered list
Unordered list adalah sebuah susunan items. Susunan item ditandai dengan
menggunakan bullet (tanda titik bulat). Unordered list dimulai dengan tag <ul>
dan masing-masing item dengan tag <li>. Didalam list item anda dapat
menempatkan paragraphs, line breaks, images, links, list yang lain dsb. Contoh
ini mendemonstrasikan sebuah unordered list.
(Buka file Latihan 11-1.txt dan simpan dengan nama latihan11_1.html, Open
file “latihan11_1.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
</html>
<body>
<p> Contoh list Unordered </p>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
Contoh lain untuk Unordered list
(Buka file Latihan 11-2.txt dan simpan dengan nama latihan11_2.html, Open
file “latihan11_2.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
Oleh: Binsar Siagian 2001
51
Belajar HTML dengan mudah dan cepat.
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
2. Ordered list
Ordered list juga adalah sebuah susunan items. Susunan item ordered ditandai
dengan menggunakan nomor urut. Ordered list dimulai dengan tag <ol> dan
masing-masing item dengan tag <li>.
Didalam list item anda dapat
menempatkan paragraphs, line breaks, images, links, list yang lain dsb. Contoh
ini mendemonstrasikan sebuah Ordered list.
(Buka file Latihan 11-3.txt dan simpan dengan nama latihan11_3.html, Open
file “latihan11_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<p> Contoh list Ordered </p>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
52
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Contoh lain untuk Ordered list
(Buka file Latihan 11-4.txt dan simpan dengan nama latihan11_4.html, Open
file “latihan11_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Oleh: Binsar Siagian 2001
53
Belajar HTML dengan mudah dan cepat.
3. Definition Lists
Defenition List bukan sebuah list dari item. Ini adalah list dari bagian item yang
menjelaskan item lebih rinci. Defenition List dimulai dengan tag <dl> dan masingmasing list dari item dengan tag <dt>. Masing-masing list dibawah item dimulai
dengan tag <dd>. Didalam list item anda dapat menempatkan paragraphs, line
breaks, images, links, list yang lain dsb. Contoh ini mendemonstrasikan sebuah
Defenition List.
(Buka file Latihan 11-5.txt dan simpan dengan nama latihan11_5.html, Open
file “latihan11_5.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
</html>
<body>
<h4> Contoh Definition Lists </h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Contoh lain untuk Defenition List (Nested List)
(Buka file Latihan 11-6.txt dan simpan dengan nama latihan11_6.html, Open
file “latihan11_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
54
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Tag untuk List:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
NN
IE
W3C
Purpose
<ol>
3.0
3.0
3.2
Defines an ordered list
<ul>
3.0
3.0
3.2
Defines an unordered list
<li>
3.0
3.0
3.2
Defines a list item
<dl>
3.0
3.0
3.2
Defines a definition list
<dt>
3.0
3.0
3.2
Defines a definition term
<dd>
3.0
3.0
3.2
Defines a definition description
<dir>
Deprecated. Use <ul> instead
<menu>
Deprecated. Use <ul> instead
Oleh: Binsar Siagian 2001
55
Belajar HTML dengan mudah dan cepat.
BAB 12.
HTML Forms and Input
Sebuah Form adalah area yang terdiri dari beberapa elemen form.
Elemen Form adalah elemen yang memungkinkan pemakai untuk memberikan
data atau informasi dari user atau pengguna Web ( misalnya text fields,
textarea fields, drop-down menus, radio buttons, checkboxes, dan
sebagainya). Sebuah Form didefenisikan dengan tag <form>
Umumnya form yang digunakan adalah form input dengan tag <input>. Tipe data
untuk input ditentukan dengan atribut misalnya text, password yang akan
diuraikan pada bagian berikut ini. Lebar field default adalah selebar 20 character.
Contoh:
1. Field Input untuk text
Contoh ini mendemonstrasikan bagaimana membuat field untuk input text pada
sebuah halaman dengan menggunakan HTML, dan pengguna dapat mengisikan
data sesuai dengan permintaan.
(Buka file Latihan 12-1.txt dan simpan dengan nama latihan12_1.html, Open
file “latihan12_1.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
2. Field Input untuk Password.
Contoh ini mendemonstrasikan bagaimana membuat field untuk password pada
sebuah halaman dengan menggunakan HTML.
(Buka file Latihan 12-2.txt dan simpan dengan nama latihan12_2.html, Open
file “latihan12_2.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
56
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Catatan: Bila anda mengisi pada filed password, angka yang
ditampilkan berubah menjadi tanda bintang, untuk melindungi
tulisan dari pembacaan orang lain !
</p>
</body>
</html>
3. Field Input untuk Radio Buttons.
Contoh ini mendemonstrasikan bagaimana membuat field untuk Radio Buttons
pada sebuah halaman dengan menggunakan HTML. Radio button digunakan
apabila anda ingin pemakai memilih salah satu pilihan yang tersedia. Hanya satu
pilihan yang dapat dilakukan.
(Buka file Latihan 12-3.txt dan simpan dengan nama latihan12_3.html, Open
file “latihan12_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
</body>
</html>
4. Field Input untuk Checkboxes.
Oleh: Binsar Siagian 2001
57
Belajar HTML dengan mudah dan cepat.
Contoh ini mendemonstrasikan bagaimana membuat field untuk Checkboxes
pada sebuah halaman dengan menggunakan HTML. Checkboxes digunakan
apabila anda ingin pemakai memilih beberapa pilihan yang tersedia.
(Buka file Latihan 12-4.txt dan simpan dengan nama latihan12_4.html, Open
file “latihan12_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
<input type="checkbox" name="bike" value="yes">I have a
bike<br>
<input type="checkbox" name="car" value="yes">I have a car
</form>
</body>
</html>
B. Tindakan untuk atribut Form dan Tombol Kirim.
Ketika pemakai melakukan click pada tombol “Submit” (kirim), maka isi dari form
akan dikirim ke dalam file lain. Tindakan ini juga akan mendefenisikan nama file
tempat data yang akan dikirimkan. Defenisi nama file biasanya juga ditentukan
sebagai penerima isi file.
Contoh ini mendemonstrasikan bagaimana mengirimkan data/informasi dengan
action atribut “submit”. pada sebuah halaman dengan menggunakan HTML.
(Buka file Latihan 12-5.txt dan simpan dengan nama latihan12_5.html, Open
file “latihan12_5.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form
name="input"
action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>
</html>
58
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Hasil dari tindakan ini dapat dilihat bila Anda sudah online pada salah satu server
yang Anda gunakan sebagai Web Server Anda misalnya pada “geocities” atau
yang lainnya.
Contoh-contoh lain.
Checkboxes
Contoh ini mendemonstrasikan bagaimana penggunaan checkbox untuk
membuat pilihan pada sebuah halaman dengan menggunakan HTML.
(Buka file Latihan 12-6.txt dan simpan dengan nama latihan12_6.html, Open
file “latihan12_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Radio Button
Contoh ini mendemonstrasikan bagaimana penggunaan tombol Radio untuk
membuat pilihan pada sebuah halaman dengan menggunakan HTML.
(Buka file Latihan 12-7.txt dan simpan dengan nama latihan12_7.html, Open
file “latihan12_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
Male:
<input type="radio" checked name="Sex">
Oleh: Binsar Siagian 2001
59
Belajar HTML dengan mudah dan cepat.
<br>
Female:
<input type="radio" name="Sex">
</form>
<p>
Bila pemakai memilih click pada radio-button, maka button
menjadi terpilih dengan tanda lingkaran hitam ditengahnya,
dan button yang lain akan berubah menjadi tidak terpilih.
</p>
</body>
</html>
Drop down box sederhana
Contoh ini mendemonstrasikan bagaimana membuat pilihan dengan drop down
box pada sebuah halaman dengan menggunakan HTML.
(Buka file Latihan 12-8.txt dan simpan dengan nama latihan12_8.html, Open
file “latihan12_8.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
<p>
Klick tanda segitiga pilihan dan sorot salah satu pilihan,
ketika mouse dilepas maka yang terpilih tampil pada text
field.
</p>
</body>
</html>
Drop down box dalam bentuk lain
60
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Contoh ini mendemonstrasikan bagaimana membuat pilihan dengan drop down
box dengan pilihan bebas pada sebuah halaman dengan menggunakan HTML.
(Buka file Latihan 12-9.txt dan simpan dengan nama latihan12_9.html, Open
file “latihan12_9.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Membuat Textarea
Contoh ini mendemonstrasikan bagaimana membuat sebuah area untuk
penulisan text lebih dari satu baris. Pada area tersebut Anda dapat menulis apa
saja yang diperlukan.
(Buka file Latihan 12-10.txt dan simpan dengan nama latihan12_10.html,
Open file “latihan12_10.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<p>
Contoh ini dapat di edit seperti editor biasa. Silahkan tulis
apa saja didalamnya!
</p>
<textarea rows="10" cols="30">
Saya sedang melakukan ujicoba penulisan pada text Area.
</textarea>
</body>
</html>
Membuat Button
Oleh: Binsar Siagian 2001
61
Belajar HTML dengan mudah dan cepat.
Contoh ini mendemonstrasikan bagaimana membuat sebuah Tombol yang dapat
diberi tulisan didalamnya.
(Buka file Latihan 12-11.txt dan simpan dengan nama latihan12_11.html, Open
file “latihan12_11.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
Membuat Fieldset diseputar data
Contoh ini mendemonstrasikan bagaimana membuat sebuah pembatas yang
diberi judul untuk sejumlah data.
(Buka file Latihan 12-12.txt dan simpan dengan nama latihan12_12.html, Open
file “latihan12_12.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<fieldset>
<legend>
Informasi Kesehatan:
</legend>
<form>
Tinggi badan <input type="text" size="3">
Berat badan <input type="text" size="3">
</form>
</fieldset>
</body>
</html>
Membuat Form input dengan tombol kirim
62
Oleh: Binsar Siagian 2001
Belajar HTML dengan mudah dan cepat.
Contoh ini mendemonstrasikan bagaimana menambahkan form kedalam
halaman, Form terdiri dari dua field input dan sebuah tombol submit.
(Buka file Latihan 12-13.txt dan simpan dengan nama latihan12_13.html,
Open file “latihan12_13.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
<html>
<body>
<form
name="input"
method="get">
action="html_form_action.asp"
Enter your first name:
<input type="text" name="FirstName" value="Mickey">
<br>Enter your last name:
<input type="text" name="LastName" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to
a new page called html_form_action.asp.
</p>
</body>
</html>
Mengirimkan E-mail lewat Form input dengan tombol kirim
Contoh ini mendemonstrasikan bagaimana mengirimkan form kedalam ke alamat
email secara langsung.
(Buka file Latihan 12-14.txt dan simpan dengan nama latihan12_14.html, Open
file “latihan12_14.html” lewat Browser, kemudian GO, perhatikan hasilnya pada
window browser!).
<html>
<body>
<form
action="MAILTO:[email protected]"
enctype="text/plain">
method="post"
<h3>Mail ini akan dikirim ke TEDC Bandung</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
Oleh: Binsar Siagian 2001
63
Belajar HTML dengan mudah dan cepat.
<input type="text" name="mail"
value="yourmail" size="25">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Tag untuk Form:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Start Tag
NN
IE
W3C
Purpose
<form>
3.0
3.0
3.2
Defines a form for user input
<input>
3.0
3.0
3.2
Defines an input field
<textarea>
3.0
3.0
3.2
Defines a text-area (a multi-line text input control)
<label>
4.0
4.0
Defines a label to a control
<fieldset>
4.0
4.0
Defines a fieldset
<legend>
4.0
4.0
Defines a caption for a fieldset
3.0
3.2
Defines a selectable list (a drop-down box)
4.0
Defines an option group
3.0
3.2
Defines an option in the drop-down box
4.0
4.0
Defines a push button
<select>
3.0
<optgroup>
6.0
<option>
3.0
<button>
<isindex>
64
Deprecated. Use <input> instead
Oleh: Binsar Siagian 2001