Praktek 1 Desain Halaman Web
-
Upload
agunggumilar -
Category
Documents
-
view
68 -
download
1
description
Transcript of Praktek 1 Desain Halaman Web
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-1
2 DESIGN HALAMAN WEB
Overview
Untuk membangun sebuah web site, diperlukan modal dasar berupa bahasa
yaitu Hypertext Markup Language(HTML). Setiap tampilan pada halaman web
dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna.
Tujuan
1. Mengenal dasar-dasar HTML
2. Membuat dokumen HTML dan melakukan pemformatan dokumen yang
sederhana.
3. Membuat teks preformat dan karakter spesial
4. Membuat list pada dokumen HTML
5. Membuat list bersarang pada dokumen HTML
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-2
2.1 Pengenalan HTML
HyperText Markup Language adalah bahasa yang digunakan untuk
membuat suatu situs web atau homepage. Setiap dokumen dalam Web ditulis
dalam format HTML. Semua format dokumen, hyperlink yang dapat di klik,
gambar, dokumen multimedia, form yang dapat di isi dan sebagainya
didasarkan atas HTML.
2.1.1 HTML Editor
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi
teks editor biasa seperti notepad. Namun sekarang ini di pasaran terdapat
banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web), contohnya Macromedia Dreamweaver, Adobe
GoLive, Microsoft FrontPage dan Notepad++.
Gambar 2-1 Lembar Kerja Microsoft FrontPage
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-3
Kemudahan Microsoft FrontPage :
Pengeditan “What You See Is What You Get” (WYSIWYG)
Menambahkan, menghapus dan mengubah teks.
Menambahkan paragraf dan gaya karakter ke dalam teks.
Mengubah huruf, ukuran dan warnanya.
Memasukkan tabel, gambar, garis horisontal dan hyperlink dalam
dokumen web yang anda buat.
Drag-and-drop hyperlink dan gambar dari dokumen yang lain.
2.1.2 Struktur Dasar HTML
Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan
disebut sebagai Markup Language yakni bahasa yang mengandung kode
penanda yang disebut tag HTML yang digunakan untuk mengatur format
tampilan suatu dokumen. Kode ini diselipkan ke dalam teks HTML, berfungsi
untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu
hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk
menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >.
Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat
case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada
umumnya banyak dari pemakai HTML menggunakan huruf besar dalam
penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas,
sehingga mempermudah proses pembacaan. Semua dokumen HTML terdiri
dari dua bagian logikal, yaitu:
bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML
berisi informasi umum mengenai dokumen
dan bagian badan (body) yaitu berisi dokumen yang sebenarnya.
Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur
dasarnya adalah sebagai berikut:
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-4
Keterangan:
<html> .. </html>
Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut
adalah file HTML.
<head> .. </head>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<title> .. </title>
Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi
dokumen. Kalimat yang terletak di dalam tag ini akan muncul pada
bagian paling atas browser Anda (pada title bar).
<body> .. </body>
Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi
halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti
bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. Contoh
dari penggunaan tag <HTML> seperti ini:
<HTML>
<HEAD>
<TITLE> Judul dari dokumen HTML </TITLE>
</HEAD>
<BODY>
My Homepage
</BODY>
</HTML>
Untuk mencoba script di atas, anda bisa membuka aplikasi notepad
ataupun program teks editor yang lain. Tuliskan script di atas dan simpan
dengan ekstensi *.html atau *.htm, misalkan MyPage.html. Bukalah dokumen
html yang telah anda buat tadi dengan menggunakan web browser, misalkan
Internet Explorer. Maka akan terlihat tampilan seperti di bawah ini.
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-5
Gambar 2-2 Tampilan MyPage.html
2.2 Memformat Dokumen HTML
2.2.1 Bagian Body
Pada bagian tag <BODY> digunakan untuk mendefinisikan teks beserta
formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini
bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link,
vlink, alink, leftmargin dan topmargin.
1) Background : digunakan untuk mengatur latar belakang dengan
gambar/image.
2) Bgcolor : digunakan untuk mengatur warna latar belakang
dokumen, dengan warna putih sebagai default-nya.
3) Teks : digunakan untuk mengatur warna teks dokumen,
dengan warna hitam sebagai warna default.
4) Link : Untuk mengatur warna link dokumen dengan warna
biru sebagai warna default
5) Vlink : Untuk mengatur warna visited link dokumen dengan
default ungu
6) Alink : digunakan untuk mengatur warna active link dokumen
dengan default merah.
2.2.2 Membuat Heading
Heading digunakan untuk mengatur ukuran huruf pada header. Tag
heading <Hn>..</Hn>, "n" mempunyai nilai antara 1 - 6 atau antara <H1>
sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6>
merupakan ukuran terkecil.
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-6
Dalam banyak dokumen, heading pertama digunakan sebagai judul
tulisan. Heading ini mempunyai atribut untuk menentukan letak tulisan, di kiri,
kanan ataupun tengah. Jika atribut ini tidak ditambahkan, maka heading akan
otomatis rata kiri. Contoh penggunaannya : <HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
My Homepage
<H1>Heading tingkat 1</H1>
<H2>Heading tingkat 2</H2>
<H3>Heading tingkat 3</H3>
<H4>Heading tingkat 4</H4>
<H5>Heading tingkat 5</H5>
<H6>Heading tingkat 6</H6>
<H1 ALIGN=LEFT>Heading 1 rata kiri</H1>
<H2 ALIGN=CENTER>Heading 2 rata tengah</H2>
<H3 ALIGN=RIGHT>Heading 3 rata kanan</H1>
</BODY>
</HTML>
Tampilan dari script diatas dapat dilihat pada gambar berikut ini :
Gambar 2-3 Contoh Heading
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-7
2.2.3 Memformat Paragraf
Dalam membuat paragraf, ada beberapa hal yang harus diperhatikan.
Dengan adanya perbedaan browser web yang berjalan pada komputer yang
berbeda, memiliki kemampuan untuk menampilkan grafis yang berbeda
sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda.
Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk
browser web yang memiliki ukuran satu halaman penuh dan yang tidak.
Untuk membuat paragraf ini digunakan tag <P>, hal yang perlu dicatat
adalah tag <P> ini akan mengabaikan spasi dan pindah baris. Dalam
pembuatan paragraf pun, kita bisa menggunakan atribut ALIGN untuk
mengatur letak paragraf, rata kiri, tengah ataupun rata kanan. Attribut align
mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
Contoh penggunaan paragraf dapat dilihat pada script berikut ini.
<HTML>
<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<H2>My Homepage</H2>
<h3>Paragraf rata kiri</h3>
<P ALIGN=LEFT>Lajunya perkembangan Teknologi Informasi
semakin meningkatkan penggunaan sumber daya
yang bersifat digital. Sejak kemunculan internet, merupakan
suatu titik terang bukan hanya bagi masyarakat IT, tetapi
sekarang sudah berdampak ke seluruh lapisan masyarakat.
</P>
<h3>Paragraf rata tengah</h3>
<P ALIGN=CENTER>Lajunya perkembangan Teknologi Informasi
semakin meningkatkan penggunaan sumber daya
yang bersifat digital. Sejak kemunculan internet, merupakan
suatu titik terang bukan hanya bagi masyarakat IT,
tetapi sekarang sudah berdampak ke seluruh lapisan
masyarakat.
</P>
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-8
<h3>Paragraf rata kanan</h3>
<P ALIGN=RIGHT>Lajunya perkembangan Teknologi Informasi
semakin meningkatkan penggunaan sumber daya
yang bersifat digital. Sejak kemunculan internet, merupakan
suatu titik terang bukan hanya bagi masyarakat IT, tetapi
sekarang sudah berdampak ke seluruh lapisan masyarakat.
</P>
</BODY>
</HTML>
Tampilan di browser akan seperti ini.
Gambar 2-4 Contoh Format Paragraf
2.2.4 Line Breaks
Line breaks digunakan untuk menambahkan baris baru pada teks dalam
dokumen HTML dengan cara menambahkan tag <BR>. <CENTER>
digunakan untuk membuat teks dalam posisi di tengah. Setiap teks yang
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-9
terdapat diantara <CENTER> dan </CENTER> akan ditempatkan di tengah-
tengah margin kiri dan kanan.
Contoh script penggunaan Line Breaks dan <CENTER> :
<HTML>
<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<H2>My Homepage</H2>
<h3>Penggunaan Line Breaks</h3>
Contoh penggunaan line break<BR>
baris baru<BR>sudaaaahhh<br><br>
<CENTER>contoh teks ditengah</CENTER>
</BODY>
</HTML>
Hasilnya :
Gambar 2-5 Contoh Penggunaan Line Break dan Center
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-10
2.2.5 Teks Preformat
Berbeda dengan pembuatan paragraf yang mengabaikan setiap
tambahan spasi, tag <PRE> ini akan membuat spasi ikut diperhitungkan.
Dengan kata lain tag <PRE> akan menampilkan teks pada halaman web sesuai
dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat.
Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom, yang
membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut
ini contoh penggunaan dari tag <PRE>.
<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<H2>My Homepage</H2>
<h3>Penggunaan Teks Preformat</h3>
Contoh dibawah adalah penggunaan tag Preformat untuk
membuat tabel<br>
<PRE>
Tabel data mahasiswa
----------------------------------
Nama Umur
----------------------------------
Adi Sasongko 19
Budi Swarga 20
Chev Sampurna 18
Della Rossa 19
----------------------------------
</PRE>
</BODY>
<HTML>
Hasil :
Gambar 2-6 Contoh Penggunaan Teks Preformat
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-11
2.2.6 Memformat Bentuk Tulisan
Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan.
Cara menggunakannya adalah awali dengan <tag>, terus masukkan tulisan
yang akan diatur dan akhiri dengan </tag>. Tag-tag yang dapat digunakan
untuk mengatur teks adalah :
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<BLINK> Text berkedip (lebih baik jangan digunakan)
<CITE> Digunakan untuk quoting text
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini. <HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<H2>My Homepage</H2>
Contoh menggunakan Tag pada Teks<BR><BR>
<B>tag untuk menebalkan huruf</B><BR><BR>
<I>tag untuk membuat huruf miring</I><BR><BR>
tag untuk membuat huruf<SUP>superscript</SUP><BR><BR>
tag untuk membuat huruf<SUB>subscript</SUB><BR><BR>
untuk membuat huruf yang <U>digaris bawahi</U><BR><BR>
untuk membuat huruf yang lebih <BIG>BESAR</BIG><BR><BR>
untuk membuat huruf yang lebih <SMALL>kecil</SMALL><BR><BR>
</BODY>
</HTML>
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-12
Tampilan dari Script di atas akan terlihat seperti berikut ini.
Gambar 2-7 Contoh Menggunakan Tag pada Teks
2.2.7 Tag Font
Tag <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag
FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-13
SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang
digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan
7 merupakan ukuran terbesar.
FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma.
Bila terdapat spasi yang terletak pada nama font maka harus digunakan
tanda garis bawah (_). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web kita
nantinya akan terdapat pada komputer pengguna yang lain (pengakses
web kita). Pendeknya kita tidak usah menggunakan font-font yang
bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan
menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama
warna (red misalnya).
Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini.
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font size=1 Face=arial color=#FF0000>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2</font><br>
<font size=3 Face=arial color=blue>Ukuran font 3</font><br>
<font size=4 Face=verdana color=red>Ukuran font 4</font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5</font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6</font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7</font><br>
</body>
</html>
Hasilnya :
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-14
Gambar 2-8 Contoh Tag Font dan Atributnya
2.2.8 Karakter Spesial
Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar
(>), tanda dan (&) dan kutip ganda (“), yang mempunyai arti khusus dan
digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara
langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan
karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu
karakter spesial untuk menggantikan karakter-karakter di atas.
Karakter spesial tersebut antara lain : < karakter spesial untuk <
> karakter spesial untuk >
& karakter spesial untuk &
" karakter spesial untuk "
@ karakter spesial untuk @
© karakter spesial untuk ©
© karakter spesial untuk ©
® karakter spesial untuk ®
® karakter spesial untuk ®
karakter spesial untuk spasi yang tak dapat dipecah
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-15
Dibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial
dalam dokumen HTML :
<HTML>
<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<H2>My Homepage</H2>
<h3>Penggunaan Karakter Spesial</h3>
Berikut ini contoh penggunaan karakter spesial<br>
Sekarang kita mencoba menggunakan tanda lebih kecil seperti
ini < dan
sekarang kita akan coba menggunakan tanda lebih besar
seperti ini >.
Bagaimana? dapat terlihat kan? yang akan ditampilkan saat
ini adalah tanda dan &.
tanda kutip ganda " dan tanda @ seperti yang
sering digunakan dalam alamat email.
Pernah lihat tanda © atau tanda © atau tanda
® atau tanda ®.
Pasti salah satunya sudah pernah lihat kan?
 
;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa
spasi
di kalimatnya.
</BODY>
</HTML>
Hasilnya akan terlihat seperti gambar di bawah ini.
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-16
Gambar 2-9 Contoh Penggunaan Karakter Spesial
2.2.9 Membuat Garis Horizontal
Tag <HR> digunakan untuk membuat garis horizontal pada jendela
browser. Defaultnya adalah membuat garis yang solid.
Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.
<HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D.
<HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel,
default 2.
<HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan
garis.
<HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis
dengan letak sebelah kiri (left), kanan (right) atau tengah (center-default).
Contoh pembuatan garis horizontal :
<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<H2>My Homepage</H2>
<h3>Membuat Garis Horizontal</h3>
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-17
Garis horizontal biasa (Shade dan solid) <HR>
Garis horizontal No Shade <HR NOSHADE>
Garis horizontal dengan ukuran 10 (berongga, bukan solid)
<HR SIZE=10>
Garis horizontal dengan Lebar 100
<HR WIDTH=100>
Garis horizontal dengan lebar 50% dari lebar dokumen
<HR WIDTH=50%>
Garis horizontal dengan lebar 100 dan diletakkan di
sebelah kiri
<HR WIDTH=100 ALIGN=LEFT>
Garis horizontal dengan ukuran 10, lebar 100 dan
diletakkan di sebelah kanan
<HR SIZE=10 WIDTH=100 ALIGN=RIGHT>
</BODY>
</HTML>
Hasilnya akan terlihat seperti gambar di bawah ini.
Gambar 2-10 Contoh membuat Garis Horizontal
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-18
2.3 List
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian
rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa
tanda-tanda khusus/simbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu:
2.3.1 List Tanpa Urutan (Unordered Lists)
Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak
bernomor). List entri didefinisikan dengan tag <LI>. Pada jenis ini tidak
memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang
akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini :
Tabel 2-1 Tabel Jenis Bullet
Tipe Penjelasan
Disc Bullet berbentuk cakram
Circle Bullet berbentuk lingkaran
Square Bullet berbentuk kotak
Contoh penggunaannya adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<h3>Membuat List tanpa urutan</h3>
<UL>
<LI>apel</LI>
<LI>jeruk</LI>
<LI>mangga</LI>
<LI>jambu</LI>
</UL>
</BODY>
</HTML>
Hasilnya akan terlihat seperti gambar di bawah ini.
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-19
Gambar 2-11 Contoh Unordered List
2.3.2 List Berurut (Ordered Lists)
<OL> Juga digunakan untuk membuat daftar item bernomor, dengan
tiap item dapat menggunakan angka arab atau romawi. List entri juga
didefinisikan dengan tag <LI>.
Contoh pembuatan list berurut adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<h3>Membuat List berurut</h3>
<OL>
<LI>apel</LI>
<LI>jeruk</LI>
<LI>mangga</LI>
<LI>jambu</LI>
</OL>
</BODY>
</HTML>
Hasilnya akan terlihat seperti gambar di bawah ini.
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-20
Gambar 2-12 Contoh Ordered List
Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa
type penomoran yang dapat digunakan pada ordered list ditunjukkan pada
tabel di bawah ini :
Tabel 2-2 Tipe Penomoran pada Ordered List
Tipe Penjelasan
I Angka ditampilkan dalam angka romawi huruf besar
i Angka ditampilkan dalam angka romawi huruf kecil
a Angka ditampilkan dalam abjad huruf kecil
A Angka ditampilkan dalam abjad huruf besar
Pada tag <OL> juga terdapat atribut START untuk memulai list dari nomor
tertentu. Pada tag <LI> terdapat atribut VALUE untuk melewati nomor yang
tidak diinginkan.
Contoh penggunaannya adalah sebagai berikut: <HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<h3>Membuat List berurut</h3>
Contoh penggunaan atribut START dan VALUE<br>
<OL START=3>
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-21
<LI>apel</LI>
<LI>jeruk</LI>
<LI VALUE=7>mangga</LI>
<LI>jambu</LI>
</OL>
Contoh penggunaan atribut START dan VALUE dengan
type=A<br>
<OL TYPE=A START=3>
<LI>apel</LI>
<LI>jeruk</LI>
<LI VALUE=7>mangga</LI>
<LI>jambu</LI>
</OL>
</BODY>
</HTML>
Gambar 2-13 Contoh Penomoran dengan Ordered List
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-22
2.3.3 Definition Lists
Definition lists biasanya digunakan untuk membuat suatu list singkatan
dan definisinya atau istilah-istilah. Definition List dinyatakan dengan tag <DL>
dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu
bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan
penjabaran dari istilah.
Contoh :
<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<h3>Membuat Definition LIsts</h3>
<DL>
<DT> HTTP
<DD> HyperText Transfer Protocol
<DT> FTP
<DD> File Transfer Protocol
</DL>
</BODY>
</HTML>
Gambar 2-14 Contoh Definition List
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-23
2.3.4 List Bersarang (Nested Lists)
Dalam pembuatan list bersarang menggunakan tag-tag yang telah
dijelaskan sebelumnya seperti tag <UL>, <OL> dan <LI>. Contoh pembuatan
list bersarang adalah sebagai berikut :
<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<h3>Membuat List Bersarang</h3>
<UL>
<LI>List item Number 1</LI>
<LI>List item number 2</LI>
<UL>
<LI>Item 2 sub-item A</LI>
<LI>Item 2 sub-item B</LI>
</UL>
<LI>List item number 3</LI>
<UL>
<LI>Item 3 sub-item A</LI>
<LI>Item 3 sub-item B</LI>
</UL>
</UL>
</BODY>
</HTML>
Gambar 2-15 Contoh Nested List
http://kuliah.msyani.com Pemrograman Web
Design Halaman Web 2-24
Rangkuman
1. HyperText Markup Language adalah bahasa yang digunakan untuk
membuat suatu situs web atau homepage.
2. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat
case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. 3. Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan
mengatur warna latar belakang, format teks, pewarnaan teks dan
pengaturan paragraf.
4. List ada tiga macam antara lain : ordered list, unordered list dan
definition list. Dari ketiga macam list tersebut dapat dibuat bentuk List
Bersarang.
Latihan
1. Jelaskan masing-masing fungsi dari tag-tag berikut ini :
a. <h3>
b. <br>
c. <sub>
d. <b>
e. <small>
2. Jelaskan perbedaan antara <p> dan <pre>!
3. Untuk pengaturan font dapat digunakan atribut size, face dan color.
Jelaskan masing-masing atribut tersebut dan berikan conroh
penggunaannya!
4. Tuliskan tag HTML untuk karakter spesial @, &, ©, ®, spasi!
5. Sebutkan jenis-jenis list yang ada pada dokumen HTML!
6. Tuliskan perintah HTML untuk membuat list dengan menggunakan
penomoran angka Romawi!