Bab 3 perkembangan masyarakat indonesia pada masa kolonial
Homepage untuk informasi dan komunikasi
1. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
1
HOMEPAGE UNTUK INFORMASI DAN KOMUNIKASI
orld Wide Web (WWW) yang lebih umum disebut dengan web adalah
media penyajian informasi dalam bentuk dokumen yang mempunyai
referensi dan link (hubungan ke dokumen lain atau mesin lain di
internet). Halaman depan web disebut Homepage.
Penyajian informasi melalui web dapat dinikmati pemakai komputer melalui
browser yang terhubung ke internet dengan menggunakan HTTP (HyperText Transfer
Protocol) yang informasinya dibuat dengan HTML (HyperText Markup Language).
Secara umum halaman web dibangun dengan sebuah bahasa pemrograman bernama
HTML. Seperti bahasa pemrograman lainnya HTML memerlukan software atau program
aplikasi tertentu yang dikenal dengan HTML Editor. HTML Editor ini yang nantinya
berfungsi untuk menerjemahkan bahasa HTML menjadi tampilan web yang dapat dilihat
oleh pemakai internet.
Browser Web
Browser Web adalah software yang digunakan untuk menampilkan informasi dari server
web. Browser Web yang popular digunakan antara lain adalah Microsoft Internet Explorer,
Netscape Navigator dan Mozilla. Browser Web bertugas menerjemahkan instruksi-instruksi
berbentuk tag HTML untuk ditampilkan.
Server Web
Server Web adalah komputer yang dgunakan untuk menyimpan dokumen-dokumen web.
Komputer ini akan melayani permintaan dokumen web dari kliennya.
Browser web berkomunikasi melalui jaringan server web dengan menggunakan
HTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu
atau layanan lain yang disediakan server. Server memberikan dokumen atau layanannya
jika tersedia dengan menggunakan protokol HTTP.
HyperText Transfer Protocol (HTTP)
HTTP adalah protokol yang menentukan aturan yang harus diikuti oleh Browser Web
dalam meminta atau mengambil suatu dokumen dari server web dalam menyediakan
dokumen yang diminta. Protokol ini merupakan protokol standar yang digunakan untuk
mengakses dokumen HTML.
HTTP umumnya digunakan untuk melayani dokumen hypertext karena HTTP
merupakan protokol dengan overhead yang sangat rendah. Pada kenyataannya navigasi
informasi dapat ditambahkan langsung ke dalam dokumen dan dengan demikian
protokolnya sendiri tidak harus mendukung navigasi secara penuh.
Uniform Resources Locator (URL)
URL adalah sarana yang digunakan untuk menentukan lokasi informasi pada suatu server
web. Format umum suatu URL adalah sebagai berikut.
Protokol transfer : //nama_host/path/nama_file
Protokol transfer adalah protokol yang digunakan oleh suatu browser untuk mengambil
informasi. Contohnya : http.
Nama_host adalah nama dari komputer dimana informasi tersebut berada.
Contohnya : smun47-jkt.sch.id.
Path/nama_file adalah jalur serta nama file dari suatu informasi.
Contohnya : soal/matematika.html
Biasanya alamat yang diketik pada Address bar adalah protokol transfer dan nama host
saja. Setelah homepage (halaman pertama website) tampil, maka kita dapat melakukan link
ke bagian tertentu dari website tersebut.
W
2. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
2
Protokol Transfer
Protokol transfer adalah protokol yang digunakan untuk pengiriman informasi di internet.
Selain HTTP dikenal beberapa protokol lain diantaranya adalah sebagai berikut :
FTP (File Transfer Protocol)
Protokol ini dirancang agar memungkinkan pemakai mentransfer file dalam format teks
atau biner dalam server komputer di internet.
Contoh : ftp.usma.edu/pub/msdos/.
Gopher
Protokol ini dirancang untuk mengakses server Gopher.
Contoh : gopher://wiretrap.spies.com/.
News (Network News Transfer Protocol)
Protokol ini digunakan untuk mendistribusikan berita Usenet. Usenet adalah sistem
yang dirancang sebagai forum diskusi yang didasarkan pada topik-topik yang disebut
newsgroup.
Contoh : news:comp.infosystem.www.announce.
Telnet
Protokol ini digunakan untuk login ke suatu server tertentu.
Domain Name Server (DNS)
Untuk mempermudah pengelolaan server komputer di internet, maka digunakanlah suatu
format penamaan standar atau yang dikenal DNS (Domain Name Server). DNS merupakan
sistem penamaan untuk server komputer. DNS membuat tingkatan-tingkatan domain yang
merupakan kelompok komputer yang terhubung ke internet.
Berikut ini nama domain dan jenis organisasinya (Top Level Domain)
Nama Domain Jenis Organisasi
com
edu
gov
int
mil
net
org
id
Organisasi komersial, contoh : www.yahoo.com
Lembaga pendidikan, contoh : www.usc.edu
Lembaga pemerintah
Organisasi internasional
Organisasi militer
Provider internet
Organisasi umum, contoh : www.vlsm.org
Domain untuk negara Indonesia,
contoh : http://smun47-jkt.sch.id
Pembuatan Homepage Sederhana
A. Editor dalam Mendesain Homepage
Secara umum ada dua jenis HTML Editor, yaitu text editor dan WYSIWYG editor. Text
editor digunakan oleh mereka yang terbiasa dengan bahasa pemrograman serta mahir
bahasa HTML. Kode-kode HTML langsung ditulis sesuai aturan yang berlaku dalam
penulisan HTML. Salah satu contoh text editor adalah Homesite. Jika anda menggunakan
sistem operasi Windows, notepad bisa digunakan untuk menuliskan HTML walaupun
fungsinya bukan sebagai HTML editor.
WYSIWYG (What You See Is What You Get) merupakan HTML editor yang
berbasis GUI (Graphic User Interface) yang cocok bagi pemakai yang tidak terbiasa dengan
bahasa pemrograman atau sintaks HTML. Microsoft Frontpage yang terdapat dalam paket
Microsoft Office, bisa anda gunakan sebagai HTML editor. WYSIWYG yang terkenal
diantaranya adalah Macromedia Dreamweaver yang menyediakan fasilitas untuk membuat
skrip-skrip tertentu. File HTML mempunyai ekstensi .HTML atau .HTM.
3. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
3
B. Cara Membuka Source HTML pada suatu Homepage
HTML merupakan client side scripting. Dengan demikian, anda sebagai pemakai (user)
dapat melihat seluruh kode-kode pemrograman yang dibuat di browser dan dapat
memodifikasinya sesuai keinginan anda. Untuk melihat kode HTML yang terdapat pada
sebuah homepage, terlebih dahulu anda buka file HTML yang dimaksud dengan Browser
Web, misalkan Internet Explorer.
Gambar 1 Web dengan HTML
Kemudian lakukanlah langkah-langkah berikut ini
Klik menu View pada Internet Explorer
Klik Source
Gambar 2 Membuka Source HTML
Maka akan tampak Source Code dalam program aplikasi notepad seperti gambar berikut.
Gambar 3 Source HTML
4. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
4
C. Elemen-Elemen dalam Dokumen HTML
Sebuah dokumen HTML bisa mengandung teks, gambar, suara, animasi atau video. Untuk
membedakan antara teks HTML dengan dokumen lainnya, anda dapat melihat elemen
beserta tag-tagnya.
Dokumen HTML disusun oleh tiga bagian, yaitu :
1. Baris yang berisi informasi versi HTML yang digunakan
2. Deklarasi bagian header dengan elemen head
3. Deklarasi bagian body dengan elemen body atau frame-set
Perhatikan gambar berikut ini.
Gambar 4 Elemen-elemen HTML
Lebih lengkapnya elemen dasar untuk pembuatan HTML adalah sebagai berikut :
Elemen Dasar
Jenis Dokumen
Judul
Mukadimah (Header)
Batang Tubuh
<HTML> </HTML>
<TITLE> </TITLE>
<HEAD> </HEAD>
<BODY> </BODY>
Terdapat pada awal dan akhir dari file HTML
Terdapat pada mukadimah
Keterangan umum seperti judul
Isi dari halaman HTML
Format penulisan HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Tempat mendeskripsikan halaman HTML seperti judul,
............... pembuat, tanggal dibuat, hubungan antar dokumen
</TITLE> dan lain-lain.
</HEAD>
<BODY>
...............
............... Tempat pengetikan informasi-informasi yang dimuncul-
</BODY> kan pada halaman web.
</HTML>
Elemen dapat berupa teks murni, bukan teks atau keduanya. Suatu elemen HTML
terdiri dari tag-tag dan atributnya.
Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag.
Tag HTML terdiri atas “tanda lebih kecil (<)”, sebuah nama tag dan sebuah “tanda lebih
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
<html>
<head>
Deklarasi bagian header
</head>
<body>
Deklarasi bagian body
</body>
</html>
5. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
5
besar (>)”. Umumnya, tag berpasangan, misalnya <....> dengan </....>. Tag yang pertama
menunjukkan tag awal yang berarti awal elemen dan tag yang kedua (dengan garis miring)
menunjukkan tag akhir yang berarti akhir elemen.
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya
dituliskan dengan <nama tag>....</nama tag>. Penulisan penamaan tag tidak case sensitive
artinya tidak berpengaruh terhadap huruf besar atau huruf kecil.
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan
tag <html>, <head> dan <body> berikut tag-tag pasangannya yang selalu diawali dengan
tanda (/). Elemen head berisi informasi tentang dokumen tersebut seperti title, meta dan
script tertentu. Elemen body berisi teks yang sebenarnya, yaitu tampilan halaman web yang
tersusun dari link, grafik, paragraf dan elemen lainnya.
Tag awal dapat disisipkan beberapa buah atribut yang menyatakan karakteristik tag
tersebut, misalnya tag awal berikut ini.
<P ALIGN = “center”>
Tag ini digunakan untuk membuat teks di tengah-tengah suatu paragraf. Tag yang
digunakan adalah <p> dan atribut yang menyertainya adalah ALIGN dengan nilai center.
Dalam HTML, nilai atribut diapit tanda petik ganda, kecuali jika :
Nilai merupakan suatu kumpulan dari nilai tertentu (misalnya dalam <p align = “left”>,
tanda petik ganda boleh dihilangkan, maka penulisan boleh <p align = left>). Nilai left
merupakan salah satu kumpulan dari nilai left, right dan center.
Nilai hanya berisi angka, huruf dan titik (dalam <IMG SRC = “picture/hiasan.gif”
ALT = “Menampilkan hiasan”>. Kedua nilai tersebut memerlukan tanda petik ganda
karena nila SRC mengandung tanda “/” dan nilai ALT mengandung spasi).
Heading Dokumen
Heading dokumen berisi informasi mengenai bagian kepala suatu dokumen HTML.
Elemen Head
Kepala dokumen dinyatakan dengan pasangan tag <HEAD> </HEAD> yang merupakan
pembuka dari dokumen HTML. Head berisi informasi-informasi yang menjelaskan
dokumen HTML, seperti judul (title) dokumen, baris URL suatu dokumen, hubungan antar
dokumen dalam html, indeks suatu dokumen, informasi dan script tertentu. Teks bagian
head tidak akan terlihat saat dokumen tersebut dibuka pada suatu browser.
D. Cara Mengedit Teks HTML dengan Microsoft Word
Banyak cara untuk mengedit file HTML, termasuk bukan dengan program aplikasi HTML
editor, sebagai contohnya adalah mengedit dengan Microsoft Word. Program pengolah kata
ini dapat digunakan untuk membuat dan mengedit file HTML. Oleh karena Microsoft Word
merupakan program aplikasi berbasis GUI, maka anda dapat mengedit layaknya pada
sebuah WYSIWYG editor. Hal ini sangat memudahkan pemakai yang tidak terbiasa dengan
bahasa pemrograman. Untuk dapat mengedit file HTML dengan Microsoft Word, anda
dapat melakukannya dengan mengklik ikon Edit with Microsoft Word pada Internet
Explorer. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini.
6. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
6
Buka sebuah website dengan Internet Explorer baik online atau offline
Gambar 5 Web dengan HTML
Klik ikon Edit with Microsoft Word
Gambar 6 Ikon untuk mengedit HTML
Hingga muncul program Microsoft Word dengan tampilan website yang bisa diedit.
Gambar 7 Web pada program Microsoft Word
Setelah itu anda dapat mengedit website dalam Microsoft Word seperti mengedit teks
dalam Microsoft Word.
7. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
7
E. Manipulasi Teks dengan HTML
Agar lebih hidup, teks dalam web perlu dispesialisasi. Caranya adalah dengan
memanipulasi atau yang lebih dikenal dengan istilah format teks, seperti menebalkan teks,
memiringkan teks atau memperbesar ukuran teks. Bahasa HTML sangat berbeda dengan
bahasa format teks yang sering kita lakukan pada program aplikasi pengolah kata.
Pada bahasa HTML, format teks dilakukan dengan menggunakan tag-tag tertentu
sesuai aturan. Beberapa pemformatan teks dan tag yang digunakan adalah sebagai berikut.
Tags Format Teks
<B>....</B>
<I>....</I>
<U>....</U>
<EM>....</EM>
<S>....</S>
<BIG>....</BIG>
<SMALL>....</SMALL>
<CENTER>....</CENTER>
<SUB>....</SUB>
<SUP>....</SUP>
<BLINK>....</BLINK>
<FONT FACE = “***”>....</FONT>
<FONT SIZE = ?>....</FONT>
<BR>
<HR>
<P>....</P>
Teks dengan huruf tebal
Teks dengan huruf miring
Teks dengan garis bawah
Tekanan pada teks (emphasize)
Coretan pada teks
Memperbesar ukuran huruf
Memperkecil ukuran huruf
Menempatkan posisi teks / gambar di tengah
Menggeser huruf ke bawah (subscript)
Menggeser huruf ke atas (superscript)
Huruf berkedip
Memilih jenis huruf
Menentukan ukuran huruf
Pindah ke baris berikutnya / di bawahnya
Garis datar
Paragraf baru
1. Menambah Heading
Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul suatu
dokumen HTML. Walaupun merupakan judul, heading berbeda dengan elemen <TITLE>
yang hanya muncul pada title bar dari suatu jendela browser, bukan dalam halaman web.
HTML menyediakan enam tingkat heading. Untuk menyatakan suatu heading,
digunakan tag <Hx> dengan x adalah nomor level heading dari 1 sampai 6.
Untuk pemakaian heading perhatikan contoh berikut ini.
<html>
<head>
<title>Heading dalam Dokumen</title>
</head>
<body>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</body>
</html>
8. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
8
Gambar 8 Heading
2. Perataan Heading
Atribut yang menyertai tag <H> adalah ALIGN yang memungkinkan sebuah heading
ditampilkan rata kanan, kiri atau tengah. Berikut adalah tabel Align Tag Heading.
Nilai Fungsi
ALIGN = left
ALIGN = center
ALIGN = right
Untuk meratakan heading ke kiri
Untuk meratakan heading di tengah
Untuk meratakan heading ke kanan
Perhatikan sintaks HTML di bawah ini :
<html>
<head>
<title>Perataan Heading</title>
</head>
<body>
<H1 align=center>Heading Level 1 Rata Tengah</H1>
<H2 align=left>Heading Level 2 Rata Kiri</H2>
<H3 align=right>Heading Level 3 Rata Kanan</H3>
</body>
</html>
9. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
9
Gambar 9 Perataan Heading
3. Garis Pemisah Horizontal
Untuk memberi pemisah antara baris yang satu dengan baris yang lain, anda dapat
menggunakan elemen tag <HR>. Atribut yang menyertainya adalah sebagai berikut.
Nama Fungsi
ALIGN
WIDTH
SIZE
NOSHADE
COLOR
Dapat diset dengan nilai left, center atau right.
Untuk mengatur panjang garis horizontal yang dapat ditentukan dengan
nilai pixel atau persen.
Untuk mengatur ketebalan garis horizontal yang mempunyai nilai dalam
satuan pixel.
Untuk menampilkan garis horizontal tanpa bayang-bayang 3-D.
Untuk memberi warna pada garis horizontal.
Untuk membuat garis pemisah horizontal, buatlah sintaks berikut.
<html>
<head>
<title>Heading dengan Pemisah Horizontal</title>
</head>
<body>
<H1 align=center>Heading dengan garis pembatas</H1>
<HR size=4 color=red>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
</body>
</html>
11. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
11
Gambar 11 Garis Pemisah Horizontal dan Entitas
F. Manipulasi Gambar dengan HTML
Ada dua metode untuk menampilkan gambar-gambar (image) ke dalam halaman web, yaitu
metode inline dan eksternal. Gambar inline menampilkan gambar secara langsung saat
pengguna komputer membuka web yang berbasiskan grafis. Gambar eksternal tidal
memunculkan gambar secara otomatis saat web dibuka. Gambar akan muncul ketika
pemakai menginginkannya, yakni dengan mengklik link yang mewakili gambar tersebut.
Link tersebut dapat berupa teks atau gambar lain yang ditampilkan secara eksternal dan
biasanya berukuran lebih kecil.
1. Penggunaan Elemen IMG
Elemen IMG yang dinyatakan dengan tag <IMG> adalah suatu tag tunggal yang tidak
mempunyai tag pasangan. Elemen IMG mempunyai tiga buah atribut, yaitu SRC, ALT dan
ALIGN. Atribut SRC berfungsi untuk menentukan sumber dari gambar inline. Atribut
ALIGN digunakan untuk mengatur perataan teks pada suatu gambar inline. Atribut ALT
digunakan sebagai alternatif untuk browser yang berbasis teks.
2. Teks Alternative untuk Gambar
Jika browser yang digunakan pemakai adalah browser dengan mode teks, seperti Lynx
yang tidak dapat menampilkan gambar, maka HTML menyediakan suatu alternatif gambar
dengan teks. Sarana yang digunakan adalah atribut ALT pada elemen IMG, sintaksnya
adalah sebagai berikut.
<IMG SRC = ”URL_Gambar” ALT = ”Teks Pengganti”>
“teks pengganti” adalah teks yang akan menggantikan gambar sewaktu ditampilkan di
browser. Atribut ALT juga berguna sebagai pengganti gambar jika fasilitas pemanggilan
gambar secara otomatis (Auto Load Images pada Netscape) dimatikan.
3. Gambar Sebagai Suatu Link
Gambar dapat berfungsi sebagai link jika ditambahkan tag <A>. Jika gambar diklik, maka
link akan menuju link tujuan yang diberikan pada tag <A>, seperti :
<A HREF = ”Contoh.htm”> <IMG SRC = “Gambar_contoh.gif”> Contoh </A>
4. Pengaturan Perataan
Atribut ALIGN digunakan untuk mengatur perataan gambar terhadap teks-teks yang ada di
sekitarnya. Nilai untuk atribut ALIGN antara lain : LEFT, RIGHT, MIDDLE, TOP,
BOTTOM dan TOPTEXT. Contoh :
12. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
12
<IMG SRC = “Gambar_contoh.gif” ALIGN = “TOP”>
5. Perataan Ukuran Gambar
Atribut HEIGHT dan WIDTH digunakan untuk menentukan tinggi dan lebar suatu image
dalam ukuran pixel. Jika atribut ini tidak digunakan, maka browser akan memakai ukuran
sebenarnya dari gambar tersebut. Contoh :
<IMG SRC = “Gambar_contoh.gif” WIDTH = 170 HEIGHT = 120>
6. Atribut HSPACE dab VSPACE
Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi antara gambar
dengan objek di sekitarnya. Atribut HSPACE menentukan spasi horizontal (bagian kanan
dan kiri) suatu gambar, sedangkan atribut VSPACE menentukan spasi vertikal (sebelah atas
dan bawah) suatu gambar. Spasi ini dinyatakan dalam satuan pixel dan akan menyebabkan
timbulnya ruangan kosong di antara gambar dan objek-objek yang mengelilinginya. Jika
atribut ini tidak digunakan, maka browser akan meletakkan teks persis di samping gambar
tanpa ada jarak antara teks dan gambar. Contoh :
<IMG SRC = “Gambar_contoh.gif” VSPACE = 20> atau
<IMG SRC = “Gambar_contoh.gif” HSPACE = 20>
7. Atribut Border
Atribut border berfungsi untuk memberikan garis pada suatu Gambar Inline. Gambar Inline
pada umumnya tidak mempunyai garis, kecuali Gambar Inline yang berfungsi sebagai suatu
link. Nilai BORDER menggunakan satuan pixel. Gambar yang tidak mempunyai border
memiliki atribut BORDER = 0. Jika nilai 0 digunakan pada gambar yang berfungsi sebagai
suatu link, maka border pada gambar tersebut akan hilang. Hal ini menyebabkan ciri suatu
gambar yang berfungsi sebagai link menjadi hilang dan menyebabkan pemakai tidak
mengetahui bahwa gambar tersebut dapat diklik untuk menuju ke link lain. Contoh :
<IMG SRC = “Gambar_contoh.gif” BORDER = 5>
Contoh :
<html>
<head>
<title>Menyisipkan Gambar</title>
</head>
<body>
<p align = "center">
<img border = "2" src = "logo.jpg" width = "250" height = "250"
hspace = "1" vspace = "1"></p>
<hr size = "5" color = "blue">
<h2 align = "center" color = "red">Mozilla Firefox vs Internet
Explorer</h2>
<hr size = "5" color = "blue">
</body>
</html>
13. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
13
Output :
Gambar 12 Menyisipkan Gambar pada Halaman Web
LATIHAN PRAKTEK
Buatlah halaman web untuk menampilkan gambar yang dapat di link ke halaman lain
Klik salah satu gambar untuk menuju ke halaman berikutnya
Buatlah teks yang dapat di link ke halaman depan (utama)
14. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
14
G. Manipulasi Daftar Item dengan HTML
HTML menyediakan beberapa jenis daftar item, yaitu :
Ordered list / numbered list (daftar berurut / daftar dengan nomor)
Unordered list / bulleted list (daftar tak berurut / daftar dengan titik)
Menu list (daftar menu)
Directory list (daftar direktori)
Definition list (glossary / daftar istilah)
Pada pembahasan kali ini akan diperkenalkan dua dari lima item di atas.
1. Ordered List
Ordered list atau numbered list adalah suatu daftar dengan item-item yang ada dalam daftar
berupa nomor secara berurut. Ordered menggunakan tag <OL>....</OL>. Di antara kedua
tag tersebut terdapat tag <LI> untuk menyatakan list item dalam daftar.
Berikut ini contoh ordered list.
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h2> HTML menyediakan beberapa jenis daftar / list, yaitu :</h2>
<OL>
<LI>Ordered List / numbered list (daftar berurut / daftar dengan
nomor)
<LI>Unordered List / bulleted list (daftar tak berurut / daftar
dengan titik)
<LI>Menu List (daftar menu)
<LI>Directory List (daftar direktori)
<LI>Definition List (glossary / daftar istilah)
</OL>
</body>
</html>
Output :
Gambar 13 Ordered List
15. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
15
Pada hasil di atas, browser secara otomatis memberi nomor secara berurut pada setiap item
yang terdapat pada daftar tersebut. Setiap kali browser menemui tag <LI>, maka item
otomatis berpindah ke baris baru.
a. Atribut Type
Untuk mengganti jenis pengurutan, anda dapat menggunakan atribut TYPE yang diletakkan
pada tag <OL>.
Berikut ini atribut untuk mengubah jenis nomor pada tag <OL>.
Atribut Fungsi
TYPE = A Untuk membuat daftar berurut dengan huruf besar (A,B,C,D,.....)
TYPE = a Untuk membuat daftar berurut dengan huruf kecil (a,b,c,d,.....)
TYPE = I Untuk membuat daftar berurut dengan bilangan romawi berhuruf besar
(I,II,III,IV,.....)
TYPE = i Untuk membuat daftar berurut dengan bilangan romawi berhuruf kecil
(i,ii,iii,iv,.....)
TYPE = 1 Untuk mengembalikan daftar berurut pada nomor (default) (1,2,3,4,.....)
TYPE = x Untuk menentukan nilai awal dari item dalam daftar, dimana x adalah
nilai awal daftar
Selain TYPE, ada juga atribut START yang digunakan untuk mendefinisikan nomor awal
yang akan digunakan pada ordered list.
Contoh : <OL START = 7>
Dengan contoh di atas, list akan dimulai dari nomor 7.
b. Nested Ordered List (Daftar Bersarang)
Nested ordered list adalah tampilan suatu daftar yang di dalamnya terdapat daftar lain.
Contoh :
<html>
<head>
<title>Nested Ordered List</title>
</head>
<body>
<h2> HTML menyediakan beberapa jenis daftar / list, yaitu :</h2>
<OL>
<LI>Ordered List / numbered list (daftar berurut / daftar dengan
nomor)
<OL TYPE=a>
<LI>Daftar berurut dengan nomor (default)
<LI>Daftar berurut dengan bilangan romawi kecil
<LI>Daftar berurut dengan bilangan romawi besar
<LI>Daftar berurut dengan huruf besar
<LI>Daftar berurut dengan huruf kecil
</OL>
<LI>Unordered List / bulleted list (daftar tak berurut / daftar
dengan titik)
<LI>Menu List (daftar menu)
<LI>Directory List (daftar direktori)
<LI>Definition List (glossary / daftar istilah)
</OL>
</body>
</html>
16. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
16
Output :
Gambar 14 Nested Ordered List
2. Unordered List
Unordered list adalah suatu daftar yang mengabaikan urutan item. Setiap item dalam
unordered list biasanya ditandai dengan bentuk objek tertentu, misalkan kotak atau bulat.
Tag yang digunakan adalah tag <UL>....</UL> sedangkan setiap item didalamnya
menggunakan tag yang sama seperti pada ordered list, yaitu <LI>.
a. Atribut TYPE
Pada unordered list terdapat atribut TYPE yang berguna untuk mengubah bentuk tanda item
dari suatu list. Berikut ini uraian atribut TYPE beserta fungsinya.
Atribut Fungsi
TYPE = circle Membuat tanda lingkaran untuk item
TYPE = square Membuat tanda kotak untuk item
TYPE = disc Membuat tanda cakram untuk item
17. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
17
Contoh pemakaian order list dengan unordered list adalah sebagai berikut.
<html>
<head>
<title>Ordered List dan Unordered List</title>
</head>
<body>
<h2> HTML menyediakan beberapa jenis daftar / list, yaitu :</h2>
<OL TYPE=I>
<LI>Ordered List / numbered list (daftar berurut / daftar dengan
nomor)
<UL TYPE=square>
<LI>Daftar berurut dengan nomor (default)
<LI>Daftar berurut dengan bilangan romawi
<OL TYPE=i>
<LI>romawi kecil
<LI>romawi besar
</OL>
<LI>Daftar berurut dengan huruf
<OL TYPE=a>
<LI>besar
<LI>kecil
</OL>
</UL>
<LI>Unordered List / bulleted list (daftar tak berurut / daftar
dengan titik)
<UL TYPE=disc>
<LI>Daftar berurut dengan simbol kotak
<LI>Daftar berurut dengan simbol bulat
<LI>Daftar berurut dengan simbol disk
</UL>
<LI>Menu List (daftar menu)
<LI>Directory List (daftar direktori)
<LI>Definition List (glossary / daftar istilah)
</OL>
</body>
</html>
Output :
Gambar 15 Unordered List
18. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
18
TUGAS PRAKTEK I
Buatlah sebuah halaman HTML dengan bentuk tulisan sebagai berikut :
1. Microsoft Excel adalah salah satu program aplikasi yang berorientasi pada
pengolahan...
A. kata
B. angka
C. data
D. grafis
E. web
2. Sistem Operasi yang dibutuhkan untuk dapat mengoperasikan program Microsoft Excel
adalah...
A. linux
B. windows
C. Disk Operating System (DOS)
D. unix
E. novell netware
3. Kolom terakhir pada lembar kerja Microsoft Excel adalah...
A. z
B. az
C. ip
D. iv
E. zz
TUGAS PRAKTEK II
Buatlah sebuah halaman HTML dengan bentuk tulisan sebagai berikut :
Tipe Data dan Operator :
I Tipe Data
1 Tipe Data Sederhana
i Tipe Data Standar
Integer
Real
Char
String
Boolean
ii Tipe Data Definisi
o Enumerated
o Subrange
2 Tipe Data Terstruktur
3 Tipe Data Penunjuk
II Operator
19. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
19
H. Manipulasi Form dengan HTML
Form merupakan elemen HTML yang digunakan untuk memperoleh input (masukan) dari
pengguna web (surfer). Pengguna web dapat memasukkan input melalui halaman HTML.
Suatu form dapat terdiri atas beberapa form, tetapi hanya satu form yang dapat
dikirimkan ke server dalam satu saat. Form tidak dapat berbentuk nested (bersarang).
Sintaks :
<FORM ACTION=”_url_” METHOD=”get | post” ENCTYPE=” ”>
</FORM>
Atribut ACTION merupakan tempat menspesifikasikan URL yang akan digunakan
sebagai pemroses field input form. Jika ACTION tidak disebutkan, informasi akan
dikirimkan ke URL yang sama dengan halaman web itu sendiri.
Atribut METHOD digunakan untuk menyatakan proses informasi yang dikirim ke URL
yang disebutkan dalam ACTION. Nilai yang umum dipakai untuk atribut ini adalah
GET dan POST. POST yang membuat informasi dikirimkan secara terpisah dengan
URL, sedangkan GET yang akan membuat informasi dikirimkan menjadi satu dengan
URL.
1. Jenis Masukan dalam Form
Tag <INPUT> digunakan untuk proses pemasukan data dan letaknya berada dalam
pasangan tag <FORM>...</FORM>. Ada beberapa macam tipe pemasukan data, antara lain
berupa kotak teks, password, tombol radio (radio button), kotak cek (check box) serta
tombol SUBMIT dan RESET.
Tag <INPUT> memiliki sejumlah atribut, yaitu :
a. Name : untuk menentukan nama data. Atribut ini diperlukan oleh semua jenis
masukan kecuali SUBMIT dan RESET.
b. Size : untuk menentukan ukuran kotak yang akan tampil yang berlaku untuk
input teks dan password.
c. Maxlength : untuk menentukan jumlah karakter yang dapat dimasukkan dalam
kotak password dan kotak teks.
d. Value : untuk menentukan nilai default kotak masukan.
e. Checked : untuk mengatur agar kotak cek dalam keadaan terpilih pada kondisi
awal.
f. Type : untuk menentukan tipe kotak masukan.
Tipe masukan dalam form dibedakan menjadi 9, yakni :
a. Text
Digunakan untuk memasukkan suatu nilai yang akan dikirimkan kepada server. Nilai
dapat berupa angka atau teks.
Contoh sintaksnya adalah sebagai berikut :
<input type=”text” name=”var1” size=”8” maxlength=”8”>
b. Radio
Sebagai input yang menyediakan beberapa pilihan (option) dan hanya satu pilihan yang
bisa dipilih.
Contoh sintaksnya adalah sebagai berikut :
<input type=”radio”>Pilihan1
<input type=”radio”>Pilihan2
<input type=”radio”>Pilihan3
c. Check box
Menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih.
Contoh sintaksnya adalah sebagai berikut :
20. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
20
<input type=”checkbox”>Pilihan1
<input type=”checkbox”>Pilihan2
<input type=”checkbox”>Pilihan3
d. List
Menyediakan pilihan dalam bentuk daftar pilihan. Hanya satu pilihan yang bisa dipilih.
Contoh sintaksnya adalah sebagai berikut :
<select name=".......">
<option value="......"> Pilihan1
<option value="......"> Pilihan2
<option value="......"> Pilihan3
</select>
e. Password
Menyediakan tipe password yang akan membuat setiap karakter yang diketikkan oleh
pemakai pada field ini akan disembunyikan, misalnya diganti dengan tanda asterix (*)
untuk setiap karakter yang diketikkan.
Contoh sintaksnya adalah sebagai berikut :
<input type=”password” name=”kunci” size=”8” maxlength=”8”>
f. Submit
Digunakan untuk memanggil URL setelah input selesai dimasukkan.
Tipe SUBMIT pada tag <INPUT> akan membentuk tombol, yaitu tombol yang
menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat.
Contoh sintaksnya adalah sebagai berikut :
<input type=”submit”>
g. Button
Digunakan untuk membuat form lebih interaktif untuk memanggil script yang ada di
dalam dokumen HTML.
h. Image
Digunakan sebagai pengganti button (tombol), berupa tombol yang berbentuk gambar.
<input type=”image” src=”url_image”>
i. Text area
Digunakan untuk memasukkan data dalam bentuk teks berupa memo.
Atributnya adalah sebagai berkut :
Name
Digunakan untuk menentukan nama area teks
Rows
Digunakan untuk menentukan jumlah baris yang tampil pada layar
Cols
Digunakan untuk menentukan jumlah kolom yang tampil pada layar
Wrap
Digunakan untuk menentukan teks yang secara otomatis akan dilipat (jika baris tidak
cukup menampung keseluruhan teks, maka teks akan diletakkan pada beberapa baris)
pada area teks atau tidak jika terlalu panjang. Contohnya :
<textarea cols=20 rows=10>.................</textarea>
Setiap elemen dapat diberikan nama dengan memberikan atribut NAME dengan
value berupa string yang mendefinisikan nama elemen. Dalam pemrograman, name ini
sering disebut sebagai nama variabel. Nama variabel sebaiknya mencerminkan fungsi dari
variabel tersebut.
21. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
21
LATIHAN PRAKTEK I
Source Code :
<html>
<head>
<title>form2</title>
</head>
<body>
<u><h1>DATA SISWA</h1></u>
<form name="form1" method="post" action="bukutamu.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td width="20%">No Absen :</td>
<td width="80%"><input type="text" name=text_absen size=5
maxlength=5></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td width="20%">Nama Siswa :</td>
<td width="80%"><input type="text" name=text_nama size=30
maxlength=30></td>
</tr>
<tr>
<td> </td>
</tr>
23. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
23
LATIHAN PRAKTEK II
Source Code :
<html>
<head>
<title>uts</title>
</head>
<body>
<h1>Welcome</h1>
<p>Selamat datang di website pertama saya!<br />
Silahkan melihat-lihat:<br />
<ul>
<li><a href="photo.html">Photo-photo</a></li>
<li><a href="catatan.html">Catatan-kecil</a></li>
<li><a href="bukutamu.php">Lihat Buku Tamu</a></li>
<li><a href="about.html">About</a></li>
</ul>
</p>
25. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
25
<tr>
<td>Confirm password :</td>
<td>
<input type="password" name=paswd2 size=6 maxlength=6>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td>Kritik dan saran :</td>
<td>
<textarea cols=30 rows=7>
</textarea>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td> </td>
<td>
<input type="submit" name="submitOK" value="setuju">
<input type="reset" name="submitBTL" value="batal">
</td>
</tr>
</table>
</form>
</body>
</html>
I. Manipulasi Frame dengan HTML
Salah satu kemampuan HTML adalah memanipulasi frame, yakni dengan membagi jendela
browser menjadi beberapa bagian, baik ke arah horizontal maupun ke arah vertikal.
Dalam penggunaannya frame memiliki 2 jenis dokumen yang berbeda, yakni :
1. Layout Document (Dokumen Tata Letak)
Dokumen ini berfungsi semata-mata hanya untuk membagi jendela menjadi beberapa
bagian.
Tag yang biasanya digunakan adalah tag <FRAMESET>....</FRAMESET>.
2. Content Document (Dokumen Isi)
Dokumen ini digunakan untuk mengisi sebuah bingkai. Sebenarnya dokumen ini sama
dengan dokumen biasa, satu-satunya variasi yang ada adalah letaknya pada link.
Dokumen ini dapat dibuat beberapa link dalam satu bingkai dan dapat ditampilkan pada
bingkai yang lain. Keberadaan dokumen ini pada dokumen HTML didefinisikan dengan
tag <FRAME SRC=”url”>.
a. Pembuatan Frame
Untuk membuat frame, gunakan tag <FRAMESET>....</FRAMESET>. Tag
<FRAMESET> ini sekaligus menggantikan elemen <BODY>.
Tag <FRAMESET>....</FRAMESET> mempunyai atribut ROWS dan COLS. Atribut
ROWS berfungsi untuk membagi jendela browser menjadi beberapa baris sedangkan
atribut COLS berfungsi untuk membagi jendela browser menjadi beberapa kolom. Atribut-
atribut ini memiliki nilai yang menyatakan jumlah baris dan jumlah kolom yang dibuat
dalam suatu jendela browser.
26. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
26
Selain dua buah atribut tersebut masih ada atribut-atribut lainnya, seperti
FRAMESPACING yang berfungsi untuk mendefinisikan spasi di sekitar frame dan atribut
FRAMEBORDER yang berfungsi untuk membuat border dengan suatu nilai tertentu (nilai
0 berarti tidak menampilkan border). Untuk memberikan warna pada border, gunakan
BORDERCOLOR pada tag FRAMESET.
Untuk menampilkan dokumen di dalam sebuah frame, gunakan tag <FRAME
SRC=”url”> yang disisipkan antara tag FRAMESET. Tag ini merupakan tag tunggal
dengan berbagai atribut yang menyertainya. Atribut-atribut tersebut antara lain adalah
MARGIN WIDTH, MARGIN HEIGHT dan SCROLLING.
Sintaks yang biasa digunakan adalah sebagai berikut :
<FRAMESET COLS=”15%,25%,*”>
<FRAME SRC=”url”>
</FRAMESET>
Jumlah tag FRAME bergantung pada jumlah frame kolom atau frame baris yang
ditentukan pada tag FRAMESET. Artinya, bila kita membuat 3 buah frame maka harus
memasukkan 3 buah tag frame juga kecuali jika tidak ingin mengisi semua frame.
<FRAMESET COLS=”15%,25%,*”>
<FRAME SRC=”url”>
<FRAME SRC=”url”>
<FRAME SRC=”url”>
</FRAMESET>
b. Pembuatan Frame Kolom
Jika ingin membuat tiga buah kolom dalam satu frame, maka buatlah listing seperti
berikut :
<html>
<head>
<title>frame1</title>
</head>
<frameset cols="25%,25%,25%,25%">
<frame src="soal1.html">
<frame src="soal2.html">
<frame src="soal3.html">
<frame src="soal4.html">
</frameset>
</html>
Output :
Gambar 16 Frame Kolom
27. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
27
c. Pembuatan Frame Baris
Jika ingin membuat tiga buah baris dalam satu frame, maka buatlah listing seperti
berikut :
<html>
<head>
<title>frame1</title>
</head>
<frameset rows="25%,25%,25%,25%">
<frame src="soal1.html">
<frame src="soal2.html">
<frame src="soal3.html">
<frame src="soal4.html">
</frameset>
</html>
Output :
Gambar 17 Frame Baris
d. Variasi Frame (Baris dan Kolom)
Frame kolom dan baris juga dapat dipadukan dalam sebuah halaman web. Untuk
membuat 2 baris dan 3 kolom, contoh list programnya adalah sebagai berikut :
<html>
<head>
<title>frame1a</title>
</head>
<frameset rows="75%,25%">
<frame src="soal4.html">
<frameset cols="25%,50%,25%">
<frame src="soal1.html">
<frame src="soal2.html">
<frame src="soal3.html">
</frameset>
</frameset>
</html>
28. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
28
Output :
Gambar 18 Frame Baris dan Kolom
e. Hubungan antar frame
Bagian dari sebuah frame dapat kita hubungkan (link) ke frame lain pada halaman itu.
Untuk membuatnya, kita harus menentukan nama frame dan targetnya.
Kode untuk menentukan nama frame adalah :
<frame name="nama_frame">
Sedangkan kode untuk menentukan target adalah :
<a href="url" target=" nama_frame ">
Contoh :
Langkah-langkah membuat menu seperti diatas adalah sebagai berikut :
1. Buat menu untuk judul dan simpan dengan nama judul.html
Baris programnya :
29. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
29
<html>
<head>
<title>judul</title>
</head>
<body>
<h1 align=center><u>MACAM-MACAM KEGIATAN</u></h1>
</body>
</html>
2. Buatlah isi dari menu-menu yang akan ditampilkan di dalam frame di sebelah
kanan, diantaranya isi dari menu olahraga, kesenian dan hiburan. Beri nama masing-
masing dengan menu1.html, menu2.html dan menu3.html
Baris programnya (menu1.html) :
<html>
<head>
<title>menu1</title>
</head>
<body>
<h1 align="center"> <font size=9 face="tahoma">OLAHRAGA</h1>
<h2><font size=5 face="tahoma">Macam-macam kegiatan
Olahraga antara lain :</h2>
<ul>
<li><h4>bulutangkis</h2>
<li><h4>sepak bola</h2>
<li><h4>renang</h2>
<li><h4>basket</h2>
</ul>
</body>
</html>
Dan seterusnya dimana isi dari menu 2 dan menu 3 adalah sebagai berikut :
30. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
30
3. Sekarang buatlah halaman utama seperti gambar paling atas dimana halaman utama
terbagi menjadi 3 frame (frame 1 untuk judul, frame 2 untuk menu dan frame 3
adalah isi dari masing-masing menu tersebut)
Simpan dengan nama halamanutama.html
Source codenya adalah sebagai berikut :
<html>
<head>
<title>frame dengan menu</title>
</head>
<frameset rows="25%,75%">
<frame src="judul.html">
<frameset cols="25%,75%">
<frame src="menu.html"> untuk menentukan sumber
<frame name="penjelasan"> dari frame sebelah kiri
</frameset>
</frameset> memberi nama pada frame
</html> sebelah kanan
4. Berikutnya adalah membuat pilihan menu yang ada pada frame sebelah kiri
(terdapat 3 pilihan yaitu olahraga, kesenian dan hiburan yang masing-masing
terhubung / link ke isi dari menu yang telah dibuat sebelumnya).
Jika klik pilihan olahraga maka terhubung ke menu1.html dan seterusnya.
Simpan dengan nama menu.html
Source codenya adalah sebagai berikut :
<html>
<head>
<title>menu</title>
</head>
<body>
<a href="menu1.html" target="penjelasan"><h2>OLAHRAGA</h2>
<a href="menu2.html" target="penjelasan"><h2>KESENIAN</h2>
<a href="menu3.html" target="penjelasan"><h2>HIBURAN</h2>
</body>
</html>
J. Manipulasi Tabel dengan HTML
Tabel terdiri atas kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis.
Setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu
kesatuan.
Dasar-Dasar Pembuatan Tabel
Tabel terdiri dari beberapa bagian yaitu :
1. Table Row atau baris tabel, yaitu baris-baris pada suatu tabel yang dinyatakan dengan
pasangan tag <TR>......</TR>
2. Table Data atau data tabel, yaitu tempat informasi dalam suatu tabel. Beberapa data
tabel yang terdapat dalam suatu baris membentuk baris tabel. Data tabel dinyatakan
dengan pasangan tag <TD>......</TD>
3. Table Header adalah judul tabel. Umumnya, tabel ini terletak di bagian paling atas
atau paling kiri dari tabel. Judul tabel yang terletak di bagian atas adalah judul kolom
31. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG
Oleh : Fanda Meilasa, S.Kom
31
tabel, sedang judul tabel yang terletak di bagian kiri adalah judul baris tabel. Judul tabel
dinyatakan dengan pasangan tag <TH>......</TH> dan biasanya ditampilkan dalam teks
tebal.
4. Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya terletak di
bagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk membentuk
suatu caption adalah <CAPTION>......</CAPTION>
Selain elemen-elemen tersebut, tabel juga mempunyai bermacam-macam atribut yang
berguna untuk melengkapi bentuk tabel tersebut. Berikut ini uraian atribut-atribut
tersebut.
BORDER untuk membuat batas tepi dari suatu tabel.
WIDTH dan HEIGHT untuk mengatur lebar dan tinggi tabel.
ALIGN untuk mengatur bentuk perataan horisontal data di dalam tabel, seperti
di kiri, di tengah atau di bagian kanan.
VALIGN untuk mengatur bentuk perataan vertikal data di dalam tabel, seperti
di atas, di tengah atau di bagian bawah.
CELLSPACING dan CELLPADDING untuk mengatur spasi antar sel dan
spasi di dalam sel. Sel adalah tempat atau kotak keberadaan data atau judul
kolom ataupun judul baris.
ROWSPAN dan COLSPAN, yaitu gabungan sel-sel dalam suatu kolom
ataupun baris.
BGCOLOR untuk mengatur warna suatu sel dalam tabel.
Contoh :
a)
<table border="1" cellspacing="5" cellpadding="5">
<tr color="red">
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Output :
b) <table border="1" width="400" height="150">
<tr align="left" valign="top">
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr align="right" valign="bottom">
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
