Daftar
Item (Bullet And Numbering)
Ada dua macam daftar item yaitu
daftar item tak berurut (bullet) dan daftar item berurut (numbering).
Contoh daftar item tak berurut
(bullet):
• item
pertama
• item
kedua
• item
ketiga
Contoh daftar item berurut
(numbering):
1. item
pertama
2. item
kedua
3. item
ketiga
Untuk membuat daftar item tak
berurut kita gunakan tag <UL> sedang untuk membuat daftar item berurut
digunakan tag <OL>. Adapun setiap item ditandai dengan tag
<LI>.
Beginilah kode sumber untuk
daftar item tak berurut di atas:
<ul>
<li>item
pertama</li>
<li>item
kedua</li>
<li>item
ketiga</li> </ul>
Dan beginilah kode sumber untuk
daftar item berurut di atas:
<ol>
<li>item
pertama</li>
<li>item
kedua</li>
<li>item
ketiga</li>
</ol>
Kita pun dapat membuat daftar item bertingkat atau daftar
item di dalam daftar item. Contohnya sebagai berikut:
• item
pertama
• item
kedua o sub item
pertama o sub item
kedua
§ sub sub
item pertama
§ sub sub
item kedua
§ sub sub
item ketiga o sub item ketiga
• item
ketiga
Untuk membuat daftar item
bertingkat seperti di atas tidak ada penambahan tag atau atribut apa-apa. Yang
dilakukan hanyalah menempatkan tag-tag daftar item tingkat bawah di dalam
daftar item tingkat di atasnya. Untuk jelasnya beginilah source kodenya:
<ul>
<li>item
pertama</li>
<li>item
kedua</li>
<ul>
<li>sub
item pertama</li>
<li>sub
item kedua</li>
<ul>
<li>sub
sub item pertama</li>
<li>sub
sub item kedua</li>
<li>sub
sub item ketiga</li>
</ul>
<li>sub
item ketiga</li>
</ul>
<li>item
ketiga</li>
</ul>
Penulisan kode-kode HTML di atas
sengaja kita beri spasi agak ke dalam, agar lebih mudah dibaca dan dimengerti
mana yang level pertama, kedua dan seterusnya. Sebenarnya, tanpa pemberian
spasi, hasilnya dalam browser tetap akan menggunakan spasi agak ke dalam untuk
level-level di bawahnya.
Cara yang sama dilakukan untuk
membuat daftar item berurut bertingkat. Kita tinggal mengganti tag <UL>
dengan tag <OL> maka hasilnya akan seperti ini:
1.
item pertama
2.
item kedua
1. sub item
pertama
2. sub item
kedua
1. sub sub
item pertama
2. sub sub
item kedua
3. sub sub
item ketiga
3.
sub item ketiga 3. item
ketiga
Dari contoh daftar item tak
berurut yang bertingkat di atas, kita lihat bahwa secara default, browser akan
menampilkan gambar (bullet) bulatan hitam untuk item-item level pertama,
lingkaran untuk untuk item-item level kedua, dan kotak hitam untuk item-item
level ketiga. Sebenarnya kita pun bisa
memilih sendiri bullet jenis apa yang kita ingin gunakan dengan menambah
atribut TYPE dalam tag <UL>. Rumusnya: <UL TYPE="jenis bullet">. Dimana nama bullet ada
tiga macam: "disc" untuk bulatan hitam, "circle" untuk
lingkaran, dan "square" untuk kotam hitam. Jadi bila kita ingin
membuat daftar item semacam ini:
§ item
pertama
§ item
kedua
§ item
ketiga
Maka kita menuliskan kode-kode
HTML sebagai berikut:
<ul
type="square">
<li>item
pertama</li>
<li>item
kedua</li>
<li>item
ketiga</li>
</ul>
Untuk daftar item berurut
(numbering), jenis angkanya pun dapat diganti dengan menggunakan atribut yang
sama. Jadi rumusnya: <OL
TYPE="jenis angka">. Sedangkan jenis angkanya diisi dengan
angka 1, A, a, I, atau i tergantung selera kita. Contoh:
<ol
type="I">
<li>item
pertama</li>
<li>item
kedua</li>
<ol
type="A">
<li>sub
item pertama</li>
<li>sub
item kedua</li>
<ol
type="1">
<li>sub
sub item pertama</li>
<li>sub
sub item kedua</li>
<li>sub
sub item ketiga</li>
</ol>
<li>sub
item ketiga</li>
</ol>
<li>item
ketiga</li> </ol>
Akan menghasilkan daftar item
sebagai berikut:
I.
item pertama
II.
item kedua
A.
sub item pertama
B.
sub item kedua
1.
sub sub item pertama
2.
sub sub item kedua
3.
sub sub item ketiga
C. sub item
ketiga
III.
item ketiga
Tidak ada komentar:
Posting Komentar