Header Ads

Cara Membuat List/Daftar/Bullets Numbering pada HTML

List / Daftar adalah teks didalam dokumen yang berisi daftar item dari suatu kelompok atau group tertentu. List / Daftar ini sering juga disebut dengan istilah Bullets Numbering pada penulisan dokument/microsoft word.
Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar makanan dan minuman beserta harganya. List dapat juga berupa prosedur ( urutan langkah-langkah dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir.

Tipe List/Daftar dalam Dokumen HTML

Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
  • Daftar Berurutan (Order List)
  • Daftar Tidak Berurutan (Unordered List)
  • Daftar Definisi (Definition List)

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.


Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:
<html>
<head>
<title>tag list </title>
</head>
<body>
<h1>
Daftar Menu</h1>
<ol>
<li>Nasi Goreng Jawa</li>
<li>Nasi Goreng Baso</li>
<li>Nasi Goreng Spesial</li>
<li>Mie Ayam</li>
<li>Mie Ayam Baso</li>
<li>Nasi Rames</li>
<li>Nasi Uduk</li>
</ol>
</body>
</html>


Simpan kode html diatas dengan nama list_ol.html. Buka file tersebut di browser maka tampilannya adalah sebagai berikut:



Daftar List Berurut

Adapun atribut untuk tag <ol> adalah "type" yang menunjukan jenis penomorannya . Secara default, type nya adalah menggunakan penomoran 1,2,3,4,5 dst.
Selain type default, type lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :
  • Type A :Untuk membuat list berupa karakter A, B, C, D, dst
  • Type a :Untuk membuat list berupa karakter a,b,c,d, dst
  • Type I :Untuk membuat list berupa karakter I, II, III, dst
  • Type i :Untuk membuat list berupa karakter i, ii, iii, dst

Cara penulisan tag nya diawali dengan <ol type="jenis_tipe"> dan ditutup dengan tag </ol>. Perhatikan contoh berikut:
<html>
<head>
<title>tag list </title>
</head>
<body>
<h1>
Daftar Menu</h1>
<ol type="A">
<li>Nasi Goreng Jawa</li>
<li>Nasi Goreng Baso</li>
<li>Nasi Goreng Spesial</li>
<li>Mie Ayam</li>
<li>Mie Ayam Baso</li>
<li>Nasi Rames</li>
<li>Nasi Uduk</li>
</ol>
</body>
</html>

Simpan kode html diatas kemudian buka file tersebut di browser maka tampilannya adalah sebagai berikut:


Daftar List Tidak Berurutan (Unordered List)

Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:
<html>
<head>
<title>tag list </title>
</head>
<body>
<h1>
Daftar Menu</h1>
<ul>
<li>Nasi Goreng Jawa</li>
<li>Nasi Goreng Baso</li>
<li>Nasi Goreng Spesial</li>
<li>Mie Ayam</li>
<li>Mie Ayam Baso</li>
<li>Nasi Rames</li>
<li>Nasi Uduk</li>
</ul>
</body>
</html>



Simpan kode html diatas dengan nama list_ul.html. Buka file tersebut di browser maka tampilannya adalah sebagai berikut:





Adapun atribut untuk tag <ol> adalah "type" yang menunjukan jenis penomorannya .Type lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :

  • Type Disk : Tanda untuk bulatan hitam, cara menulis tagnya <ul type="disk"> 
  • Type Circle : Tanda untuk bulatan putih, cara menulis tagnya <ul type="circle"> 
  • Type D : Tanda untuk tanda kotak, cara menulis tagnya <ul type="square"> 

Demikianlah artikel tentang Tutorial Belajar HTML : Cara Membuat List/Daftar pada HTML. Untuk cara pembuatan list deskripsi akan dibahas pada artikel selanjutnya. Terima Kasih semoga bermanfaat.

Tidak ada komentar

Diberdayakan oleh Blogger.