Membuat List Pada HTML
List adalah informasi yang ditampilkan dalam bentuk daftar urutan.
Bukan hanya menampilkan informasi saja, tapi list juga digunakan untuk membuat berbagai komponen pada website.
Misalnya membuat menu navigasi website, membuat daftar rekomendasi artikel di sidebar website, dan lain-lain. Semua dibuat dengan menggunakan list. hanya saja diberikan sentuhan CSS untuk mengubah bentuknya.
Pada tutorial ini kita belum akan membahas CSS, kita akan lebih fokus pada pembahasan cara membuat list pada HTML.
Ada 3 jenis list pada HTML, yaitu :
- Unordered List
- Ordered List
- Description List
Unordered List
List pertama yang akan kita pelajari adalah unordered list. Unordered list adalah list yang menggunakan tanda titik pada setiap listnya.
Untuk membuat unordered list kita bisa menggunakan elemen <ul> .. </ul>
. dan gunakan elemen <li> .. </li>
di dalamnya.
Tulis list di dalam tag <li>
pembuka dan tag </li>
penutup.
Perhatikan contoh berikut
<ul>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Nasi Soto</li>
</ul>
Pada contoh di atas kita membuat list makanan kesukaan. dan mengisi list nya dengan nasi goreng, mie goreng dan nasi soto.
Ordered List
Ordered list adalah list yang memiliki urutan angka pada setiap listnya.
Cara membuat ordered list kita bisa menggunakan elemen <ol> .. </ol>
.
Isi dari listnya bisa di tulis dalam elemen <li> .. </li>
. Sama seperti unordered list. Bedanya unordered list menggunakan elemen <ul> .. </ul>
dan ordered list menggunakan elemen <ol> .. </ol>
.
Perhatikan contoh berikut.
<ol>
<li>Es teh manis</li>
<li>Air putih</li>
<li>Kopi gayo</li>
</ol>
Seperti yang kamu lihat, setiap list yang kita buat akan diberi tanda dengan urutan angka. Dimulai dari angka 1 sampai seterusnya.
Mulai Dari Angka Tertentu
Lalu bagaimana jika saya ingin membuat urutan angkanya dimulai dari angka 5 ?
Bisa!
Tulis atribut start=""
dalam tag <ol>
pembuka. dan isi angka yang kamu inginkan.
Contohnya jika kita ingin urutannya dimulai dari angka 5, maka tulis atribut start="5"
.
<ol start="5">
<li>Es teh manis</li>
<li>Air putih</li>
<li>Kopi gayo</li>
</ol>
Yang lebih kerennya lagi, bukan hanya angka, ordered list juga bisa dikembangkan untuk membuat list dengan angka romawi atau huruf.
List Berbentuk Angka Romawi
Jika kamu ingin listnya ditampilkan menggunakan angka romawi, maka kamu bisa menuliskan atribut type="i"
pada tag <ol>
pembuka.
<ol type="i">
<li>Es teh manis</li>
<li>Air putih</li>
<li>Kopi gayo</li>
</ol>
Caranya mudah kan!
List Berbentuk Huruf
Jika kamu ingin listnya ditampilkan menggunakan urutan huruf, maka kamu bisa menuliskan atribut type="a"
pada tag <ol>
pembuka.
<ol type="a">
<li>Es teh manis</li>
<li>Air putih</li>
<li>Kopi gayo</li>
</ol>
Oke, list yang menggunakan huruf pun berhasil kita buat.
List Description
List description adalah list yang memiliki deskripsi atau penjelasan untuk setiap listnya masing-masing.
Untuk membuat list description kita bisa gunakan elemen <dl> .. </dl>
.
Di dalam elemen <dl> .. </dl>
buat elemen <dt> .. </dt>
untuk membuat judul listnya. di bawah elemen <dt> .. </dt>
buat element <dd> .. </dd>
untuk membuat penjelasan dari judul list.
<dl>
untuk membuat description list.<dt>
untuk membuat judul list<dd>
untuk membuat penjelasan atau deskripsi dari judul list
Perhatikan contoh berikut.
<p>Minuman kesukaan saya :</p>
<dl type="i">
<dt>Es teh manis</dt>
<dd>Es teh manis adalah teh yang diberi gula dan es.</dd>
<dt>Kopi gayo</dt>
<dd>Kopi gayo adalah kopi alami yang tumbuh di tanah gayo. di provinsi Aceh.</dd>
</dl>
Seperti yang bisa dilihat pada contoh description list di atas, list memiliki judul dan deskripsinya masing-masing.
Dan tampil dengan rapi.
Sekian tutorial list HTML, silahkan teman-teman latihan lebih jauh lagi untuk lebih mendalami HTML Dasar.
Pada tutorial selanjutnya kamu akan belajar tentang cara membuat form pada HTML. dan membuat contoh form pendaftaran siswa sederhana.