Membuat Daftar / List


Membuat List

Ada 3 tipe list. There are 3 types of lists.

Unordered Lists

Contoh penerapan unordered list:

• Anjing
• Kucing
• Buaya
• Monyet

Perintah ini menempatakan bullet (baik kotak atau bulat) di depan setiap item list.

Ini adalah kode yang ditulis pada HTML anda :

<UL>
<LI>Anjing</LI>
<LI>Kucing</LI>
<LI>Buaya</LI>
<LI>Monyet</LI>
</UL>

Tag <LI> sebagai pengganti List Items.

<UL> adalah TAG pembuka. Dianataranya adalah item-item yang akan di list. Kemudian di akhiri dengan Tag </UL>.

Ordered Lists

Item Ordered list diberi label berupa angka atau huruf.

  • Anjing
  • Kucing
  • Buaya
  • Monyet

Kode-nya adalah sebagai berikut:

<OL>
<LI>Anjing</LI>
<LI>Kucing</LI>
<LI>Buaya</LI>
<LI>Monyet</LI>
</OL>

Item Ordered list diberi label berupa angka atau huruf.

  • Anjing
  • Kucing
  • Buaya
  • Monyet

Kode-nya adalah sebagai berikut:

<OL>
<LI>Anjing</LI>
<LI>Kucing</LI>
<LI>Buaya</LI>
<LI>Monyet</LI>
</OL>

Definition Lists

Tipe ini relatif lebih kompleks namun jangan khawatir sebab tidak se-sulit kelihatannya.

Tipe ini relatif lebih kompleks namun jangan khawatir sebab tidak se-sulit kelihatannya. 

Definisi list block adalah :

<DL></DL>

Inside the tag there are two parts:

<DT> Definition Term -and-
<DD> Definition Definition

contoh penggunaannya adalah :

HTML
Hyper Text Markup Language, the standard format for website documents.
Browser
The program in which the actual contents of the HTML document are displayed.
Link
A clickable text string or image that takes the viewer to another document, or location.

Kode-nya akan sebagai berikut:

<DL>
<DT> HTML
<DD> The program in which the actual contents of the HTML document are displayed.
<DT> Browser
<DD> The program in which the actual contents of the HTML document are displayed.
<DT> Link
<DD> A clickable text string or image that takes the viewer to another document, or location.
</DL>

Contoh Lain Penggunaan Tag List

 
Kode yang anda lihat pada halaman HTML ...

<ol type="I">
<li>Company Profile
<ol type="i">
<li>Headquarters
<li>C.E.O.
<li>Local Branches
<ul type="circle">
<li>Los Angeles
<li>Washington DC
</ul>
</ol>
<li>Products
<ul type="disc">
<li>Computers
<li>Printers
</ul>
<li>Overseas Operations
<ol type="i">
<li>Germany
<ul type="square">
<li>Berlin
<li>Hamburg
</ul>
<li>France
<ul type="square">
<li>Paris
<li>Marseilles
</ul>
</ol>
<li>New Developments
<ol type="1">
<li>Lap Tops
<li>Cell Phones
</ol>

... Dan hasilnya yang akan terlihat pada browser Anda

  1. Company Profile
    1. Headquarters
    2. C.E.O.
    3. Local Branches
      • Los Angeles
      • Washington DC
  2. Products
    • Computers
    • Printers
  3. Overseas Operations
    1. Germany
      • Berlin
      • Hamburg
    2. France
      • Paris
      • Marseilles
  4. New Developments
    1. Lap Tops
    2. Cell Phones



KEMBALI KE DAFTAR ISI



By Joko Setiawan, Klaten, 10 Juni 2003.