Membuat List dalam HTML

Jika kita ingin membuat list dalam website kita ,maka kita harus menggunakan unordered list,ordered list,dan definition list.Penjelasannya ada di postingan saya sebelumnya tentang Atribut-atribut HTML.

Untuk menogtak-atik lebih dalam tentan list,pertama kita akan membahas tentang atribut pada elemen odered list.

ATRIBUT TYPE PADA ELEMEN ORDERED LIST (OL)

Atribut type pada elemen <ol> dapat dipakai untuk mengubah pengurutan daftar item dari angka(default) menjadi beberapa opsi lain seperti berikut :
  • Numeric(1,2,3,4,5)
  • Huruf Besar(A,B,C,D,E)
  • Huruf Kecil (a,b,c,d,e)
  • Numeric Romawi Besar (I,II,III,IV,V)
  • Numeric Romawi Kecil(i.ii.iii.iv.v)
Sebagai contoh ketikkan coding berikut :

<!DOCTYPE HTML>
<html>
<head>
<title>Membuat List HTML</title>
</head>

<body>

<ol type="I">
<li>Romawi Satu</li>
<li>Romawi Dua</li>
<li>Romawi Tiga</li>
<li>Romawi Empat</li>
</ol>

</body>
</html>

Hasilnya akan menjadi seperti gambar di bawah ^ ^

ATRIBUT TYPE UNTUK MENGUBAH NILAI AWAL

Jika kita ingin menetapkan nilai awal dari penomoran list,kita dapat menggunakan atribut start pada elemen<ol>.Nilai dari atribut ini merupakan wakil numerik dari titik awal itu.Dalam artian, D pada sebuah list yang terurut dengan huruf besar akan direpresentasikan dengan nilai 4 dalam numerik.

Sebagai contoh :

<!DOCTYPE HTML>
<html>
<head>
<title>Membuat List HTML</title>
</head>

<body>

<ol type="A" start = "4">
<li>Suikoden 1</li>
<li>Suikoden 2</li>
<li>Suikoden 3</li>
<li>Suikoden 4</li>
</ol>

</body>
</html>

Dan hasilnya akan menjadi seperti gambar di bawah ^ ^ :



LIST DEFINISI

List definisi berarti jenis spesial dari daftar yang memuat istilah istilah yang diikuti dengan definisi atau deskripsi pendek.List definisi dimuat dalam elemen <dl>.Elemen <dl> kemudian membuat elemen <dt> dan <dd>  secara bergantian.Isi dari elemen <dt> adalah istilah yang kita definisikan.Elemen <dd> membuat definisi dari elemen <dt> terkait.Contohnya adalah sebagai berikut :

Ketikkan script :

<!DOCTYPE HTML>
<html>
<head>
<title>Membuat List HTML</title>
</head>

<body>

<dl>
<dt>Suikoden 1</dt>
<dd>Seri pertama dari Perusahaan Konami</dd>
<dt>Suikoden 2</dt>
<dd>Seri kedua dari Perusahaan Konami</dd>
<dt>Suikoden 3</dt>
<dd>Seri ketiga dari Perusahaan Konami</dd>
</dl>

</body>
</html>

Hasilnya akan menjadi seperti ini :

LIST BERSARANG

Kita dapat membuat list dalam list lain.Contohnya adalah sebagai berikut :


<!DOCTYPE HTML>
<html>
<head>
<title>Membuat List HTML</title>
</head>

<body>

<ol type = "I">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
<li>Empat
<ol type="i">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>
        </li>
<li>L

ima</li>
</ol>

</body>
</html>

Hasilnya adalah sebagai berikut :

Mudah bukan ?Sekarang kita sudah bisa membuat daftar dengan baik ^ ^.Sekian pembahasan mengenai list dalam HTML.Semoga ilmu yang dibagikan dapat bermanfaat bagi yang membutuhkan.Terima kasih !

Comments