Membuat Website Itu Mudah (Bagian IV – List)

Paragraf selain memiliki bentuk seperti biasanya yang berisikan teks panjang, juga dapat berbentuk daftar. Paragraf dalam bentuk susunan yang diawali dengan nomor, angka, ataupun tanda (bullet) dinamakan dengan List. List pada HTML dimaksudkan untuk membuat daftar yang tersusun untuk berbagai keperluan. List dibedakan atas 3 jenis, yakni Unordered List, Ordered List, dan Definition List.

Unordered List

Unordered List adalah paragraf dalam bentuk daftar yang tersusun dalam bentuk bullet, biasanya berbentuk lingkaran kecil.. Ditandai dengan Tag <UL> dan ditutup dengan </UL>. Unordered List dipergunakan untuk memperlihatkan daftar satu persatu. Setiap Item dalam Unordered List diberi Tag <LI> dan ditutup dengan </LI>. Contohnya adalah sebagai berikut:

<html>
<body>
Topik-topik yang dibahas dalam HTML di antaranya adalah:
<UL>
<LI>Text Formating</LI>
<LI>Paragraf</LI>
<LI>List</LI>
<LI>Warna & Teks Berjalan </LI>
<LI>Link</LI>
<LI>Font Style </LI>
<LI>Image</LI>
<LI>Frame</LI>
<LI>Table</LI>
<LI>Form</LI>
<LI>Special Character </LI>
</UL>
</body>
</html>

Hasilnya akan terlihat seperti ini:

Membuat website itu mudah

Bentuk lain dari bullet dapat dipilih jenis circle / lingkaran, disc / lingkaran hitam, dan square / kotak hitam, dengan menambahkan properti “type” pada Tag <UL>. Misalnya: <UL type=”circle”> atau <UL type=”disc”> atau <UL type=”square”>.

Ordered List

Ordered List adalah paragraf dalam bentuk daftar yang tersusun menurut abjad atau angka. Ditandai dengan Tag <OL> dan ditutup dengan </OL>. Ordered List dipergunakan untuk menjabarkan sub bagian satu demi satu. Setiap Item yang menjadi bagian dari List diberi Tag <LI> dan ditutup dengan </LI>. Contohnya adalah sebagai berikut:

<html>
<body>

Agar dapat membuat website yang baik,
kita harus memiliki pengetahuan dan menguasai beberapa software,
di antaranya:
<OL>
<LI>HTML</LI>
<LI>Dreamweaver</LI>
<LI>Photoshop</LI>
<LI>Search Engine Optimization</LI>
<LI>Internet Marketing</LI>
</OL>
</body>
</html>

Hasilnya terlihat seperti di bawah ini:

Membuat website itu mudah

Bentuk lain dapat dipilih dari jenis angka Romawi, angka Romawi kecil, huruf besar, dan huruf kecil dengan menambahkan properti “type” pada Tag <OL>. Misalnya: <OL type=”1″> atau <OL type=”I”> atau <OL type=”i”> atau <OL type=”A”> atau <OL type=”a”>.

List Bersarang

List Bersarang atau Nested List diperlukan ketika kita ingin menjabarkan sub item dari item yang ada dalam List. List Bersarang dapat dipergunakan baik pada Unordered List maupun Ordered List. Contohnya adalah sebagai berikut:

<html>
<body>
Untuk dapat menguasai web dinamis kita harus memiliki pengetahuan,
pemahaman dan menguasai software, antara lain:
<OL>
<LI>HTML</LI>
<LI>Web Design </LI>
<UL>
<LI>Microsoft Frontpage</LI>
<LI>Adobe Dreamweaver</LI>
</UL>
<LI>Image Processing</LI>
<UL>
<LI>Image Editing</LI>
<UL>
<LI>Adobe Photoshop</LI>
<LI>Image Editing</LI>
</UL>
<LI>Web Image Optimization</LI>
<UL>
<LI>Adobe ImageReady</LI>
</UL>
</UL>
<LI>Database</LI>
<LI>Client & Server Side Programming</LI>
</OL>
</body>
</html>

Yang hasilnya akan terlihat sebagai berikut:

Membuat website itu mudah

Definition List

Definition List dipergunakan untuk membuat keterangan mengenai suatu istilah. Daftar istilah menjadi item-item yang dipisahkan dari keterangannya, sedangkan paragraf yang menerangkan Definition List diberi menjorok ke dalam (indent). Definition List ditandai dengan Tag <DL> dan ditutup dengan </DL>. Item-item istilah diberi Tag <DT> atau Definition Type, sedangkan penjelasannya diberi Tag <DD> atau Definition Definition. Contoh:

<html>
<body>
Berikut ini adalah Daftar Istilah yang dipergunakan dalam buku ini:
<DL>
<DT><b>WWW (World Wide Web)</b></DT>
<DD>Merupakan sebuah sistem dimana informasi (yang berupa teks, gambar, suara, dan lain-lain)
dipresentasikan dalam bentuk <i>hypertext</i> dan dapat diakses oleh sebuah peraga WWW
(yang sering disebut sebagai <u>browser</u>).
<DT><b>HTML ( Hypertext Markup Language)</b></DT>
<DD>Sebuah standar dalam penulisan website, di mana kode-kodenya dituliskan dalam bentuk Tag.
File HTML disimpan di server internet dan kemudian dibaca, diterjemahkan dan ditampilkan oleh
Internet Browser.</DD>
</DL>
</body>
</html>

Hasilnya adalah sebagai berikut:

Membuat website itu mudah

Sampai di sini topik bahasan mengenai Paragraf dalam HTML, selanjutnya kita dapat mulai membahas mengenai Warna dan Font. ■

Advertisements

One Response

  1. cara buat list tapi hasilnya mendatar gimana ya???
    masih bingung

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: