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.
Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:
Simpan kode html diatas dengan nama list_ol.html. Buka file tersebut di browser maka tampilannya adalah sebagai berikut:
Selain type default, type lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :
Simpan kode html diatas kemudian buka file tersebut di browser maka tampilannya adalah sebagai berikut:
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 :
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.
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>
<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>
<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>
<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.
Post a Comment