7. Membuat Suatu Daftar Urutan atau List pada HTML
Memo Hari Ini
Yang harus dilakukan :
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:
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 :
Yang harus dilakukan :
- Nelpon Mirza
- Bayar tagihan listrik
- Ambil cucian di laundry
- Nganterin Ayah ke bandara
- 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.
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:
Sangat mudah! kalian dapat mencobanya di papan tulis pada bagian bawah halaman ini.
- <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>
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>
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:
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,
- 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
- <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>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</dd>
- <dt>Baut</dt>
- <dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian
- perempuannya</dd>
- </dl>
Tidak ada komentar:
Posting Komentar