Home » , » Cara Membuat Daftar/List di HTML

Cara Membuat Daftar/List di HTML

Written By Teguh Aljauza on Jumat, 02 Agustus 2013 | 00.27

Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag List.
Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan)
Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>

Contoh penggunaan tag ordered list <ol>:

<ol>
<li>Handphone</li>
<li>Komputer</li>
<li>Televisi</li>
<li>Kipas Angin</li>
<li>DVD Player</li>
</ol>

 Hasil Output:
  1. Handphone
  2. Komputer
  3. Televisi
  4. Kipas Angin
  5. DVD Player

 Untuk menjadi unordered list, tinggal ganti tag <ol> menjadi <ul>.
Contoh penggunaan tag unordered list <ul>:

<ul>
<li>Handphone</li>
<li>Komputer</li>
<li>Televisi</li>
<li>Kipas Angin</li>
<li>DVD Player</li>
</ul>

Hasil Output:
  • Handphone
  • Komputer
  • Televisi
  • Kipas Angin
  • DVD Player
LIST DALAM LIST:

<ul>
<li>Handphone</li>
<li>Komputer
    <ol>
    <li>Pentium IV</li>
    <li>Dual Core</li>
    <li>Core 2 Duo</li>
    <ol>
</li>
<li>Televisi</li>
<li>Kipas Angin</li>
<li>DVD Player</li>
</ul>

Hasil Output:
  • Handphone
  • Komputer
    1. Pentium IV
    2. Dual Core
    3. Core 2 Duo
  • Televisi
  • Kipas Angin
  • DVD Player
Deskripsi HTML
Sebuah daftar deskripsi adalah daftar istilah / nama, dengan deskripsi dari setiap istilah / nama.
Tag <dl> mendefinisikan daftar deskripsi.
Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan istilah / nama) dan <dd> (menjelaskan setiap istilah / nama):
Contoh penulisan:
<dl>
<dt>Hanphone</dt>
<dd>- Telpon genggam sebagai alat komunikasi</dd>
<dt>Televisi</dt>
<dd>- Alat komunikasi satu arah secara audio visual</dd>
</dl> 


Hasil Output:
Hanphone
- Telpon genggam sebagai alat komunikasi
Televisi
- Alat komunikasi satu arah secara audio visual
Share this article :

0 komentar:

Poskan Komentar

 
Link : Google | My Facebook | Follow Twitter | Jasa Pembuatan Website
Copyright © 2013. Script Web Tutorial - All Rights Reserved
Posted by Teguh Aljauza
Powered by Blogger