Membuat Daftar/List di HTML

SeputarTI.com | Salam sejahtera agan2, kali ini saya sedikit bercerita tentang html list yang mungkin sangat berguna dalam membuat rapi suatu menu. Langsung TKP aja ya. Cara membuat daftar atau list di HTML. Menu Daftar atau list di HTML secara luas digunakan dalam membuat daftar atau menu atau list deskripsi untuk membuat terlihat lebih rapi dan indah pada dokumen html. Misalnya daftar menu makanan dalam berdasarkan jenis, atau deskripsi topik, dan lain-lain. Dalam HTML, ada tiga jenis daftar atau list dalam html:

  1. Ordered List atau numberred list <ol>, list yang berurutan dengan nomer atau abjad.
  2. Unordered list atau bulleted list <ul>, List yang berurutan dengan simbol.
  3. Definition list <dl>, List yang digunakan sebagai daftar istilah.

Membuat daftar menu atau list di HTML jenis tag <ol> yang digunakan untuk membuat daftar itematau list dengan angka Romawi di HTML. tag <ol> secara default menggunakan angka. Namun, untuk tujuan-tujuan tertentu dapat diatur dengan atribut “type“. Jika Anda ingin daftar mulai dari nilai tertentu dapat menggunakan atribut “start”. Kemudian di bawah ini berisi angka awal untuk penomoran pada daftar menu/list html:

Berikut beberapa tipe list dengan tag <ol>:

I = digunakan huruf romawi besar

i = Menggunakan huruf romawi  kecil

A = Menggunakan huruf besar

a = Menggunakan huruf kecil

1 = default

contoh kode sederhana html membuat list atau daftar di HTML:

<html>
<head>
<title>Membuat HTML List</title>
</head>
<body>
<h3> Menu Makanan: </h3>
<ol><b>Ikan:</b>
<li>Gurameh</li>
<li>Nila</li>
<li>Udang</li>
</ol>
<ul><b>Darat:</b>
<li>Ayam</li>
<li>Pizza</li>
<li>Stieak</li>
</ul>
<dl><b>Minuman:</ b>
<dt>Jus jeruk</dt>
<dt>Jus Apel</dt>
<dt>Jus Mangga</dt>
</dl>
</body>

Hasil Dari kode html list diatas adalah:

menu list html

 

Selanjutnya kita juga mengatur tag list di html tersebut dengan beberapa atribut di atas. misalnya atribut type, dan start. Kita akan mencoba type pada tag <ol> dengan romawi serta huruf besar dengan mulai angka 5 serta tag <ul>
untuk valuenya bisa kita gunakan Disc, Circle, dan Square. Disc untuk membuat urutan dengan simbol berupa disc, circle membuat urutan dengan simbol lingkarang dan value square untuk membuat urutan dengan simbol berupa kotak.

Berikut kode sederhana membuat daftar menu atau list di html dengan tambahan atribut:

<html>
<head>
<title>Membuat HTML List</title>
</head>
<body>
<h3> Menu Makanan: </h3>
<ol type=”I” start=”5″><b>Ikan:</b>
<li>Gurameh</li>
<li>Nila</li>
<li>Udang</li>
</ol>
<ul type=”square”><b>Darat:</b>
<li>Ayam</li>
<li>Pizza</li>
<li>Stieak</li>
</ul>
<dl><b>Minuman:</ b>
<dt>Jus jeruk</dt>
<dd>deskripsi belajar html list</dd>
<dt>Jus Apel</dt>
<dd>deskripsi belajar html list</dd>
<dt>Jus Mangga</dt>
<dd>deskripsi belajar html list</dd>
</dl>
</body>
</html>

Hasil dari tambahan atribut membuat list/daftar dalam html sebagai berikut:

html list

Dan untuk tag <dd> adalah deskripsi dari tag <dt>. kita bisa memasukkan untuk memberi keterangan jika diperlukan.
Beberapa tag list html yang harus kita ketahui :
<dl> = description list
<dt> = description term
<dd> = described of description

Nah itu adalah sedikit sharing saya tentang cara membuat daftar atau list di html dengan atribut type dan start pada tag <ul> tag <ol> dan tag <dl>. makasih semoga bermanfaat artikel saya.

 

About Ganang Julianto 253 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

1 Comment

Leave a Reply

Your email address will not be published.


*