List Pada HTML


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:

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




 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>

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


    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>


     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>

0 comments:

Post a Comment

 

Search This Blog

Followers

Labels