Best Author
sangdedi

743,613
octa

486,247
fitrotinnikm

456,615
idjah

445,157
dwi

313,549
adit

310,096
resta-andara

275,123
benedict

261,583
rahadian

240,910
bara

228,942
nabilalalala

216,882
kurnitap_

154,132
kuswanto

140,175
suranto

100,765
admin

98,998
iwan

80,055
kupukupu

78,106

Membuat Suatu Daftar Urutan atau List pada HTML

Memo Hari Ini
Yang harus dilakukan :

  • Bayar tagihan listrik
  • Nganterin Ayah ke bandara
  • Beli lampu neon buat di taman
  • Ambil cucian di laundry
  • Nelpon Mirza

Diatas adalah contoh dari daftar atau list yang dapat dibuat di HTML. List tersebut dapat kalian buat dengan mudah menggunakan tag yang sesuai yaitu tag <ul>, <ol>, dan <li>.

Dalam membuat suatu list maka sebaiknya kalian bertanya dulu ke diri kalian, apakah list yang akan kalian buat itu harus berurutan atau tidak. Jika jawabannya adalah berurutan maka kalian sebaiknya memakai tag <ol>, namun apabila list yang akan dibuat tidak harus berurutan seperti contoh diatas maka kalian sebaiknya memakai tag <ul>. Tag <li> digunakan untuk membuat detail dari list tersebut.

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail. Lihat contoh dibawah ini:

Memo Hari Ini
Yang harus dilakukan :

  1. Nelpon Mirza
  2. Bayar tagihan listrik
  3. Ambil cucian di laundry
  4. Nganterin Ayah ke bandara
  5. Beli lampu neon buat di taman

Contoh diatas adalah versi berurutan dari memo yang ditulis pada contoh sebelumnya. Perhatikan bahwa sekarang list yang ada menggunakan nomor urut untuk menentukan prioritas yang harus dikerjakan. Nomor urut ini tampil karena ia menggunakan tag <ol>. Inilah perintah HTML untuk menampilkan list tersebut.

<ol>
<li>Nelpon Mirza</li>
<li>Bayar tagihan listrik</li>
<li>Ambil cucian di laundry</li>
<li>Nganterin Ayah ke bandara</li>
<li>Beli lampu neon buat di taman</li>
</ol>

Kalian dapat melihat disini penggunaan <ol> dan <li> , dimana <ol> digunakan untuk memberi petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan <li> digunakan untuk membuat detail dari list. Mudah bukan?

Sekarang kalian pasti dapat menebak contoh penggunaan Unordered List, atau list secara tidak berurut, persis seperti pada contoh pertama. Yap, perintahnya sama dengan Ordered List namun tag <ol> diganti dengan <ul>. Lihat contoh berikut:

<ul>
<li>Bayar tagihan listrik</li>
<li>Nganterin Ayah ke bandara</li>
<li>Beli lampu neon buat di taman</li>
<li>Ambil cucian di laundry</li>
<li>Nelpon Mirza</li>
</ul>

Sangat mudah! kalian dapat mencobanya di papan tulis pada bagian bawah halaman ini.

Ada satu lagi jenis list dalam HTML namun pemakaiannya sangat jarang sekali di luar sana. List itu adalah Definition List. List ini digunakan untuk menampilkan suatu daftar istilah-istilah berikut penjelasannya. Contohnya adalah seperti ini:

Obeng
Perkakas yang digunakan untuk memutar suatu skrup
Stop Kontak
Suatu panel yang digunakan sebagai sumber listrik
Mur
Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya
Baut
Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya

Perhatikan bahwa tiap istilah berada di sebelah kiri dan penjelasannya berada di bawahnya dengan agak menjorok ke kanan. Inilah yang disebut dengan Definition List. Untuk membuatnya kita akan membutuhkan,

  • <dl> untuk membuat suatu Definition List
  • <dt> untuk menampilkan suatu istilah, kependekan dari Definition Term
  • <dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari Definition Description

Penggunaan dari tag-tag diatas adalah seperti ini:

<dl>
<dt>Obeng</dt>
<dd>Perkakas yang digunakan untuk memutar suatu skrup</dd>
<dt>Stop Kontak</dt>
<dd>Suatu panel yang digunakan sebagai sumber listrik</dd>
<dt>Mur</dt>
<dd>Baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</dd>
<dt>Baut</dt>
<dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian
perempuannya</dd>
</dl>

Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.