Daftar HTML Contoh
Sebuah Daftar Unordered:
- Barang
- Barang
- Barang
- Barang
Sebuah Daftar Memerintahkan:
- item pertama
- kedua barang
- Item ketiga
- butir keempat
Unordered HTML Daftar
Daftar item akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
Contoh
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML Daftar - Pilih Daftar Barang Marker
CSS
list-style-typeproperti digunakan untuk menentukan gaya item daftar penanda:| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Contoh - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Contoh - Lingkaran
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Contoh - Lapangan
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Contoh - Tidak ada
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Memerintahkan Daftar HTML
Daftar item akan ditandai dengan angka secara default:
Contoh
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Memerintahkan Daftar HTML - The Jenis Atribut
| Type | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default) |
| type="A" | The list items will be numbered with uppercase letters |
| type="a" | The list items will be numbered with lowercase letters |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="i" | The list items will be numbered with lowercase roman numbers |
nomor:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Huruf besar:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Huruf kecil:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Huruf besar Bilangan Romawi:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Huruf kecil Bilangan Romawi:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Deskripsi HTML
HTML juga mendukung daftar deskripsi.
Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
The
<dl>tag mendefinisikan daftar deskripsi, yang tag mendefinisikan istilah (nama), dan tag menjelaskan setiap istilah: <dt> <dd>Contoh
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Daftar bersarang HTML
Daftar dapat bersarang (daftar dalam daftar):
Contoh
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Catatan: Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll
Control List Menghitung
Secara default, daftar memerintahkan akan mulai menghitung dari 1. Jika Anda ingin mulai menghitung dari jumlah tertentu, Anda dapat menggunakan
startatribut:Contoh
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Daftar horisontal dengan CSS
daftar HTML bisa ditata dalam berbagai cara dengan CSS.
Salah satu cara yang populer adalah gaya daftar horizontal, untuk membuat menu navigasi:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;}
li {
float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;}
li a:hover {
background-color: #111111;}</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Bab Ringkasan
- Gunakan HTML
<ul>elemen untuk mendefinisikan daftar unordered - Gunakan CSS
list-style-typeproperti untuk menentukan item daftar penanda - Gunakan HTML
<ol>elemen untuk mendefinisikan daftar memerintahkan - Gunakan HTML
typeatribut untuk menentukan jenis penomoran - Gunakan HTML
<li>elemen untuk menentukan item daftar - Gunakan HTML
<dl>elemen untuk mendefinisikan daftar deskripsi - Gunakan HTML
<dt>elemen untuk mendefinisikan istilah deskripsi - Gunakan HTML
<dd>elemen untuk menggambarkan istilah dalam daftar deskripsi - Daftar dapat bersarang di dalam daftar
- Daftar item dapat berisi elemen HTML lainnya
- Menggunakan properti CSS
float:leftataudisplay:inlineuntuk menampilkan daftar horizontal
Latihan HTML
HTML Daftar Tag
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Tidak ada komentar:
Posting Komentar