Monday, 26 September 2011

membuat List (Daftar) di HTML

| Monday, 26 September 2011 | 0 comments


List (Daftar)
Salah satu cara yang efektif dan mudah untuk dibaca dalam menyampaikan informasi adalah dengan menggunakan daftar. HTML mewnyediakan beberapa jenis daftar, yaitu :
  • Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)
  • Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)
  • Menu list (daftar menu)
  • Directory list
  • Definition list (glossary/daftar istilah)

Ordered list
Ordered list atau  numbered list adalah suatu daftar dimana item-item yang ada di dalam daftar tersebut memiliki nomor secara berurut. Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>. Sedang untuk menyatakan list item, menggunakan tag <LI>. Berikut ini contoh penggunaan ordered list :

<html>
<body>
<h4>Contoh Ordered List:</h4>
<ol>
  <li>Fakultas Teknik dan Ilmu Komputer</li>
  <li>Fakultas Ekomnomi</li>
  <li>Fakultas Desain</li>
  <li>Fakultas Hukum</li>
  <li>Fakultas Sosial Politik</li>
</ol>
</body>
</html>


Ordered list memiliki atribut-atribut yang dapat digunakan untuk mengganti nomor  menjadi huruf atau  bilangan romawi. Kita juga dapat mengatur nomor awal untuk daftar kita.

Atribut
Argumen
Keterangan
Type
A
Daftar dengan huruf besar (A,B,C dst)
a
Daftar dengan huruf kecil (a,b,c, dst)
I

Daftar dengan bilangan romawi besar (I,II dst)
i
Daftar dengan bilangan romawi kecil (i,ii, dst)
1
Daftar dengan nomor berurut (1,2,3 dst)
Start
x
 X diisi dengan angka/huruf yang akan dijadikan awal daftar.

Untuk lebih meperjelas penggunaan atribut Type, berikut akan diberikan contoh penggunaan atribut type pada dokumen html
Contoh  List Nomor
<ol>
 <li>Apel </li>
 <li>Pisang</li>
 <li>Mangga</li>
 <li>Jambu</li>
</ol> 
Contoh  List huruf besar
<ol type="A">
 <li>Apel </li>
 <li>Pisang</li>
 <li>Mangga</li>
 <li>Jambu</li>
</ol>
Contoh  List huruf kecil
<ol type="a">
 <li>Apel </li>
 <li>Pisang</li>
 <li>Mangga</li>
 <li>Jambu</li>
</ol>
Contoh List angka romawi besar
<ol type=”I”>
 <li>Apel </li>
 <li>Pisang</li>
 <li>Mangga</li>
 <li>Jambu</li>
</ol>
Contoh List angka romawi kecil
<ol type="i">
 <li>Apel </li>
 <li>Pisang</li>
 <li>Mangga</li>
 <li>Jambu</li>
</ol> 



Unordered list
Unordered list/bulleted list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul dalam sembarang urutan.  Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>. Sedang isi daftar menggunakan tag <LI>. Berikut contoh penggunaan tag unordered list

<html>
<body>
<h4>Atribut Pada Unordered List</h4>
<ul >
 <li>atribut Type="disc"</li>
 <li>atribut Type="circle"</li>
 <li>atribut Type="square"</li>
</ul> 
</body>
</html>

Adapun atribut yang dapat ditambahkan pada tag unordered list adalah atribut TYPE

Atribut
Argumen
Keterangan
Type
Disc
Simbol berupa disk
Circle
Simbol berupa lingkaran
Square
Simbol berupa kotak

 Supaya lebih jelas, berikut ini akan diberikan contoh tentang atribut type dan hasilnya pada browser
Contoh  List type disk
<ul type="disc">
 <li>Apel</li>
 <li>Mangga</li>
 <li>Jeruk</li>
 <li>Pepaya</li>
</ul> 
Contoh  List type circle
<ul type="circle">
 <li>Apel</li>
 <li>Mangga</li>
 <li>Jeruk</li>
 <li>Pepaya</li>
</ul> 
Contoh  List type square
<ul type="square">
 <li>Apel</li>
 <li>Mangga</li>
 <li>Jeruk</li>
 <li>Pepaya</li>
</ul>




Kombinasi Ordered List dan Unordered List
Untuk daftar yang bertingkat, dapat menggunakan kombinasi dari ordered list dan unordered list. Kedaunya dipakai secara bersama-sama untuk membentuk suatu daftar. Berikut adalah contoh penggunaan kombinasi dari kedua list untuk membentuk suatu daftar.

<html>
<body>
<h4>Contoh Kombinasi Ordered List dan Unordered List:</h4>
<ol>
  <li>Kopi
    <ul type="square">
      <li>Arabika</li>
      <li>Capucino</li>
    </ul>
   </li>  
  <li>Teh
    <ul type="circle">
    <li>Teh hitam</li>
    <li>Teh hijau</li>
    </ul>
  </li>
  <li>Susu</li>
</ol>
</body>
</html> 


List Definisi
List definisi digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu disebut juga daftar istliah (glossary list). Terdapat tiga tag yang digunakan untuk menyusun suatu daftar istilah :
<DL>….<DL>
Untuk menyatakan list definisi
<DT>
Istilah yang akan didefinisikan, tag tunggal tanpa penutup
<DD>
Definisi dari istilah tersebut, tag tunggal tanpa penutup

Berikut ini adalah contoh penggunaan dari list definisi dalam HTML

<html>
<body>
<h4>Contoh List Definisi:</h4>
<dl>
  <dt>HTML</dt>
<dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman-halaman web.
</dd>

 <dt>Internet Explorer</dt>
<dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman-halaman web.
</dd>
</dl>
</body>
</html>

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 
Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com