Memo Hari Ini
Yang harus dilakukan :
- Bayar Utang Pulsa
- Ngasih Makan Kucing
- Ngapel Kerumah Selingkuhan
- Anterin Pacar Nyalon
- Nelpon YUI
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 :
- Nelpon YUI
- Bayar Utang Pulsa
- Anterin Pacar Nyalon
- Ngasih Makan Kucing
- Ngapel Kerumah Selingkuhan
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 YUI</li>
<li>Bayar Utang Pulsa</li>
<li>Anterin Pacar Nyalon</li>
<li>Ngasih Makan Kucing</li>
<li>Ngapel Kerumah Selingkuhan</li>
</ol>
Kita 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:
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 Utang Pulsa</li>
<li>Ngasih Makan Kucing</li>
<li>Ngapel Kerumah Selingkuhan</li>
<li>Anterin Pacar Nyalon</li>
<li>Nelpon YUI</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:
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>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</dd>
<dt>Baut</dt>
<dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian
perempuannya</dd>
</dl>
Artikel Terkait:
0 Comments
