Senarai (List)

Senarai

Senarai ialah tag yang digunakan untuk membuat senarai dalam HTML.Terdapat 3 jenis list iaitu

• <ul> - unordered list; bullets
• <ol> - ordered list; numbers
• <dl> - definition list; dictionary

Ordered Lists

Gunakan tag <ol> untuk memulakan proses meletakkan senarai. Kemudian letakan tag <li> diantara pembuka <ol> dan penutup </ol> untuk membuat senarai. "Ordered list" bermakna senarai disusun dalam turutan nombor. Perhatikan senarai dibawah sebagai demonstrasi.

<h4 align="center">Hobi Saya</h4>
  <ol>
  <li>Membaca</li>
  <li>Berbasikal</li>
  <li>Memancing</li>
  </ol>  

Senarai dalam turutan nombor:

Untuk memulakan senarai anda dengan menggunakan nombor permulaan yang lain contohnya 6 kita menggunakan attribute "start".

<h4 align="center">Hobi Saya</h4>
  <ol start="6">
  <li>Membaca</li>
  <li>Berbasikal</li>
  <li>Memancing</li>
  </ol>  

Hasil:

Sambungan "Ordered List"

Terdapat 4 jenis senarai yang boleh dibuat selain meggunakan nombor. iaitu menggunakan abjad atau angka roman. Untuk menggunakan jenis ini anda perlukan mengguna attribute "type".

<ol type="a">
<li>Ini contoh pertama "a"</li>
<li>Ini contoh kedua "a"</li>
</ol>
<ol type="A">
<li>Ini contoh pertama "A"</li>
<li>Ini contoh kedua "A"</li>
</ol>
<ol type="i">
<li>Ini contoh pertama "i"</li>
<li>Ini contoh kedua "i"</li>
</ol>
<ol type="I">
<li>Ini contoh pertama "I"</li>
<li>Ini contoh kedua "I"</li>
</ol>

Hasil:

Unordered Lists

Untuk membuat senarai yang tidak menggunakan nombor, anda boleh menggunakan tag <ul>. Senarai dalam <ul> akan disusun dengan menggunakan "bullet", "circle" atau "disc". Jika attribute <ul> tidak digunakan, jenis "bullet" akan dipaparkan.

HTML:

<h4 align="center">Barang Dapur</h4>
  <ul>
  <li>Susu</li>
  <li>Milo</li>
  <li>Roti</li>
  <li>Beras</li>
  </ul>  

Hasil:

Dibawah adalah jenis <ul> yang menggunakan atribut lain. penggunakan "type" adalah untuk menggantikan paparan asal iaitu "bullet".

<ul type="square">
  <li>Contoh pertama "square"</li>
  <li>Contoh kedua "square"</li>
</ul>
<ul type="disc"> 
  <li>Contoh pertama "disc"</li>
  <li>Contoh kedua "disc"</li>
</ul>
<ul type="circle">
  <li>Contoh pertama "circle"</li>
  <li>Contoh kedua "circle"</li>
</ul>

Hasil:

"Definition Term Lists"

Penggunaan "Definition list" adalah untuk membuat senarai dalam bentuk kamus atau definisi. Perkataan akan ditebalkan manakala makna akan diletakkan dibawah perkataan.

• <dl> - tag untuk memulakan definition list
• <dt> - tag untuk perkataan
• <dd> - tag untuk penerangan kepada tag perkataan

<dl>
  <dt><b>Kripkorn Studios</b></dt>
  <dd>Pusat pembelajaran laman web.</dd>
  <dt><b>HTML</b></dt>
  <dd>Asas aturcara pertama laman web.</dd>
  </dt>
</dl>

Hasil: