PENGENALAN DASAR HTML | List (Bagian 4)

pada tanggal

Halo semuanya, kali ini bakal sharing tentang basic HTML. Seperti biasa, topik akan dibagi menjadi beberapa post agar tidak terlalu panjang dan lebih mudah di cari kalau hanya butuh bagian tertentunya. Tetap nantikan post selanjutnya ya. 

Post keempat berisi mengenai basic HTML dalam pembuatan konten berbentuk list.

List atau daftar, dari jenisnya dapat dikategorikan menjadi tiga, yaitu: 
  • List berurutan 
  • List tidak berurutan
  • List dengan deskripsi
List berurutan sering disebut ordered list. List ini merupakan list yang tiap itemnya dijabarkan dalam sebuah urutan. List ini menggunakan tag "<ol>". Penjabaran tiap item menggunakan tag "<li>". Berikut contohnya.
1
2
3
4
5
<ol>
  <li>Ambil piring</li>
  <li>Ambil makanan</li>
  <li>Duduk</li>
</ol>
Pada web browser akan tertampil seperti berikut.

List tidak berurutan disebut unordered list, merupakan kebalikan dari ordered list. List ini menjabarkan tiap item menjadi poin-poin. List ini menggunakan tag "<ul>". Sama seperti ordered list, menggunakan tag "<li>" untuk menjabarkan tiap item. Contoh penggunaan list tidak berurutan:

1
2
3
4
5
<ul>
  <li>Bakso goreng</li>
  <li>Mie ayam</li>
  <li>Es teh manis</li>
</ul>
Pada web browser akan tertampil seperti berikut.

List dengan deskripsi, atau description list. List ini jarang dibahas namun cukup berguna ketika hendak menjabarkan item serta deskripsinya. List ini menggunakan tag "<dl>". Penjabaran itemnya menggunakan tag "<dt>" dan untuk deskripsinya menggunakan tag "<dd>". Contoh penggunaan list dengan deskripsi. 

1
2
3
4
5
6
<dl>
  <dt>Sarapan</dt>
  <dd>Sarapan sangat penting dalam membuka hari. Salah satu makanan yang cocok untuk dijadikan menu sarapan adalah bubur.</dd>
  <dt>Makan siang</dt>
  <dd>Makan siang juga tidak kalah pentingnya dengan sarapan. Menu yang cocok untuk makan siang lebih beragam daripada menu sarapan. Mulai dari yang berkuah sampai yang kering.</dd>
</dl>
Pada web browser akan tertampil seperti berikut. 

Sekian dulu post kali ini. Kalau masih bingung, bisa langsung dilihat video kami (link video menyusul). Post kelima membahas mengenai basic HTML untuk membuat form. Pantengin terus post selanjutnya.


Salam share,


Funtastic Share

Komentar

Posting Komentar