Popular Post

NOTASI ALGORITMIK

Posted by on
0

Membuat List dalam HTML

Posted by on
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

Post a Comment