Bahasa Penanda Hiperteks (HTML)/Senarai

Sebelum: Imej Indeks Berikut: Jadual

HTML memiliki tiga jenis senarai, setiap satunya bersesuaian dengan jenis maklumat khusus:

  • "Senarai peluru" atau bullet list, untuk maklumat yang tidak memiliki hierarki dibuat dengan menggunakan tag-tag mula dan akhiran <ul> dan </ul>.
  • Senarai bernombor, bullet list, bagi maklumat yang mempunyai hierarki atau pangkat, seperti jujukan tindakan misalnya, dibuat dengan tag-tag <ol> dan </ol>.
  • Senarai definisi, dibuat dengan tag-tag <dl> dan </dl>.

Senarai Tak BerhierarkiSunting

Senarai tak berhierarki atau senarai tak teratur (undordered list) menampilkan senarai item yang didahului oleh tanda "peluru".

Sampel HTML:

  <ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
  </ul>

Paparan:

  • Item pertama
  • Item kedua
  • Item ketiga

Senarai BerhierarkiSunting

Senarai berhierarki atau senarai bernombor (ordered list) menyediakan senarai item, setiap satunya didahului oleh nombor yang bertambah dengan bilangan 1.

Sampel HTML:

  <ol>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
  </ol>

Penampilan:

  1. Item pertama
  2. Item kedua
  3. Item ketiga

Senarai definisiSunting

Senarai definisi memaparkan senarai perkataan yang ditebalkan, disusuli oleh baris baharu dan didahului tatatanda prefiks (lalai).

Sampel HTML:

  <dl>
    <dt>Perkataan 1</dt>
    <dd>Definisi Perkataan 1</dd>
    <dt>Perkataan 2</dt>
    <dd>Definisi Perkataan 2</dd>
  </dl>

Contoh paparan:

Perkataan 1
Definisi Perkataan 1
Perkataan 2
Definisi Perkataan 2

Jika dua perkataan berkongsi definisi yang sama, perkataan-perkataan tersebut boleh dikumpulkan bersama seperti berikut:

  <dl>
    <dt>Lembaran Gaya Lata</dt>
    <dt>CSS</dt>
    <dd>Takrif Lembaran gaya Lata (CSS)</dd>
    <dt>Perkataan 2</dt>
    <dd>Takrif Perkataan 2</dd>
  </dl>

Contoh paparan:

Lembaran Gaya Lata
CSS
Takrif Lembaran gaya Lata (CSS)
Perkataan 2
Takrif Perkataan 2

Jika sesebuah perkataan itu memiliki dua definisi, gunakan unsur dd bagi setiap definisi, misalnya, .

  <dl>
    <dt>Gnu</dt>
    <dd>Antelop besar</dd>
    <dd>"GNU is not Unix"</dd>
  </dl>

Example rendering:

Gnu
Antelop besar
"GNU is not Unix"

Definisi atau takrifa yang lebih panjang dapat dibahagikan kepada perenggan dengan menggunakan unusr-unsur sarang p dalam unsur dd.

  <dl>
    <dt>Perkataan 2</dt>
    <dd>
      <p>Perenggan pertama definisi</p>
      <p>Perenggan kedua definisi</p>
    </dd>
  </dl>

Contoh paparan:

Perkataan 2

Perenggan pertama definisi

Perenggan kedua definisi

Senarai SarangSunting

Senarai boleh ditulis bersarang. Contoh:

<ul>
  <li>Senarai    
    <ul>
      <li>Senarai bernombor</li>
      <li>Senarai tak bernombor</li>
    </ul>
  </li>
</ul>

Contoh paparan:

  • Senarai
    • Senarai bernombor
    • Senarai tak bernombor

Apabila ditulis bersarang, unsur yang bersarang perlu diletakkan dalam unsur induk li.

Contoh senarai bersarang yang silap:

<ul>
  <li>Senarai</li>
  <ul>
    <li>Senarai bernombor</li>
    <li>Senarai tak bernombor</li>
  </ul>
</ul>

Satu lagi contoh senarai yang tidak bersarang dengan betul, yang mengandungi dua unsur ul berturut-turut:

<ul>
   <li>
      Item senarai luar
      <ul>
        <ul>
          <li>
            Item senarai dalam dengan dua unsur "ul" berturut-turut
          </li>
        </ul>
      </ul>
   </li>
</ul>

Nota Berkaitan PemformatanSunting

Pemerian berkaitan tiga jenis senarai yang diperikan di atas merujuk kepada paparan lalai setiap kod HTML oleh pelyar web. Namun demikian, dengan menggunakan CSS, anda dapat mengubah pemformatan senarai. Misalnya, dengan CSS, anda dapat membuat senarai itu memdatar berbanding menegak.

ContohSunting

Sebuah resipi membuat lempeng yang menggunakan senarai:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ms">
  <head>
    <title>Lempeng</title>
  </head>
  <body>
    <h1>Resipi membuat Lempeng</h1>
    <p>Terjemahan <a href="http://en.wikibooks.org/wiki/Cookbook:Pancake">Resipi Wikibooks Cookbook Bahasa Inggeris</a>.</p>
    <p>Lempeng-lempeng ini amat sesuai buat sarapan seluruh keluarga.
       Lempeng amat sedap dengan sirap mapel.
       Lempeng ini makanan sihat (selagi anda tidak mengguna sirap berlebihan)
       oleh sebab tepung gandum penuh membekalkan keperluan serat semula jadi anda.
    </p>
    <h2>Ramuan</h2>
    <ul>
      <li>1 cawan tepung gandum penuh</li>
      <li>1 sudu besar gula</li>
      <li>2 camca serbuk penaik</li>
      <li>1/4 camca garam</li>
      <li>1 biji telur</li>
      <li>1 cawan susu</li>
      <li>2 sudu besar minyak</li>
      <li>sedikit minyak goreng</li>
    </ul>
    <h2>Prosedur</h2>
    <ol>
      <li>Minyak ke dalam kuali.</li>
      <li>Campurkan ramuan kering di dalam satu mangkuk.</li>
      <li>Di dalam mangkuk yang lain, pecahkan telur, kemudian tambah bahan-bahan basah yang lain, termasuk 2 sudu minyak</li>
      <li>Campurkan ramuan-ramuan kering dan basah agar menghilangkan kekeringan, tapi tidak lebih daripada itu.</li>
      <li>Panaskan kuali sehingga panas sederhana.
          Kuali dikira panas apabila setitik air mendidih.</li>
      <li>Curahkan sebiji lempeng, lebih kurang bulatan 10 sentimeter dengan menggunakan 1/4 cawan tepung sadur.</li>
      <li>Lempeng akan berbuih-buih. Apabila buih berhenti, dan bibir lempeng kekeringan sedikit, terbalikkannya.</li>
      <li>Apabila lempeng kelihatan sudah dimasak, keluarkannya dari kuali dan mulakan pemasakan satu lagi.</li>
    </ol>
    <h2>Hias Atas</h2>
    <p>Secara tradisinya, lempeng dihias dengan mentega dan sirap mapel.
    </p>
 </body>
</html>


Nota penterjemah:
Anda boleh menaip kod ini dalam fail HTML anda dan buka fail dengan pelayar kesukaan anda bagi melihat paparan resipi ini.

.

Sebelum: Imej Indeks Berikut: Jadual