Tutorial HTML 10 - Membuat Daftar

List atau daftar pada HTML yang sering di pakai umumnya ada dua yaitu daftar beraturan dan daftar tidak beraturan

<html>
<body>

<h4>Daftar beraturan (ordered lists)</h4>
<ol>
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar tidak beraturan (unordered lists)</h4>
<ul>
<li>Rusa</li>
<li>Kerbau</li>
<li>Zebra</li>
</ul>

</body>
</html>
Coba di sini! >>>

Nah ini hasilya.

Daftar beraturan (ordered lists)

  1. Gula
  2. Keju
  3. Mentega

Daftar tidak beraturan (unordered lists)

  • Rusa
  • Kerbau
  • Zebra

Sudah tau kan bedanya.
Tag <ol> (di gunakan untuk membuat daftar secara berurut atau beraturan, sedangkant tag <ul> (unordered list) diginakam untuk membuat daftar tidak beraturan, dan untuk daftarnya menggunakan tag <li> (list item).

Daftar Berurut (Ordered List)

Seperti disebutkan diatas, untuk membuat daftar secara berurut pada HTML yaitu menggunakan tag <ol> (ordered list), sedangkan untuk menentukan daftarnya yaitu dengan tag <li> (list item).

Daftar HTML secara berurut ditandai dengan angka, namun bisa juga diganti dengan huruf atau angka Romawi.

<html>
<body>

<h4>Daftar dengan angka</h4>
<ol>
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar dengan huruf</h4>
<ol type="A">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar dengan huruf kecil</h4>
<ol type="a">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar dengan anka Romawi</h4>
<ol type="I">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar dengan anka Romawi kecil</h4>
<ol type="i">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

</body>
</html>
Coba di sini! >>>

Daftar Tidak Berurut (Unordered List)

Daftar tidak beaturan di tentukan oleh tag <ul> (unordered list) dan untuk daftarnya menggunakan tag <li>.

Daftar tidak beraturan ditandai dengan lingkaran hitam kecil, namun bisa juga di ganti.

<html>
<body>

<ul type="disc">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ul>
<br />

<ul type="circle">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ul>
<br />

<ul type="square">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ul>

</body>
</html>
Coba di sini! >>>

Daftar Definisi (Definition List)

Daftar definisi digunakan untuk mendeskripsikan istilah, contoh seperti pada kamus. Untuk membuatnya dengan menggunakan tag <dl> (definition list).
Untuk istilahnya ditentukan oleh tag <dt> (definition term), dan untuk mendeskripsikan istilah tadi yaitu dengan menggunakan tag <dd> (defining definition).

Supaya tidak bingung lihat contoh dibawah

<html>
<body>

<dl>
<dt>Gunting</dt>
<dd>Alat yang di gunakan untuk memotong</dd>

<dt>Lem</dt>
<dd>Bahan yang digunakan untuk menempelkan/merekatkan benda</dd>

<dt>Kertas</dt>
<dd>Bahan yang tipis dan rata, hasil dari kompresi serat yang berasal dari pulp</dd>
</dl>

</body>
</html>
Coba di sini! >>>

Hasilnya
Gunting
Alat yang di gunakan untuk memotong
Lem
Bahan yang digunakan untuk menempelkan/merekatkan benda
Kertas
Bahan yang tipis dan rata, hasil dari kompresi serat yang berasal dari pulp
Perhatikan, setiap istilah pada daftar, terdapat penjelasan dibawahnya.

Daftar Didalam Daftar

Langsung saja lihat contoh berikut

<html>
<body>

<ul>
<li>Laptop</li>
<li>Handphone</li>
  <ul type="circle">
   <li>Feature Phone</li>
   <li>Smatphone</li>
      <ul type="square">
      <li>Android</li>
      <li>Symbian</li>
      <li>Windows Phone</li>
      </ul>
   </ul>
<li>Tablet</li>
</ul>

</body>
</html>
Coba di sini! >>>

Hasilnya seperti ini

  • Laptop
  • Handphone
    • Feature Phone
    • Smatphone
      • Android
      • Symbian
      • Windows Phone
  • Tablet



1 komentar:

Edu Tutorial mengatakan...

terima kasih atas sharenya

Posting Komentar

 
© 2012 Alusplus | Blogger.com