![[Belajar HTML #17] List/Daftar HTML - < ol > - < ul > - < li > - < dl >](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjSCQygGV-lZLGs9k8KsjBx9DXeWEJ2JKHkAeIPfw-iQPn14jeZ3XD0JMYlcXlAwhWSdYP8dhd4r4MWq5Cro8buzT1EyVmFEMuWK-C4vJdHcUh6uY4h7UYiM5LSRDP2yN1H78rIz-akWs/w920-h400-p-k-no-nu/List+HTML.PNG)
List HTML
Contoh:
An Unordered List:
- Item
- Item
- Item
- Item
An Ordered List:
- First item
- Second item
- Third item
- Fourth item
Daftar HTML tidak berurutan <ol>
Daftar tidak berurutan dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag.<li>
Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
Daftar HTML Tidak Berurutan - Pilih Penanda Item Daftar
Properti CSS list-style-type digunakan untuk menentukan gaya penanda item daftar:
| Value | Deskripsi |
|---|---|
| disc | Setel penanda item daftar ke butir (default) |
| circle | Setel penanda item daftar ke lingkaran |
| square | Setel penanda item daftar ke kotak |
| none | Item daftar tidak akan ditandai |
Contoh - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Cobalah sendiri "Contoh - Lingkaran
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Cobalah sendiri "Contoh - Kotak
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Cobalah sendiri "Contoh - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Cobalah sendiri "Daftar HTML yang Dipesan
Daftar yang diurutkan dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag. <li>
Item daftar akan ditandai dengan angka secara default:
| Tipe | Deskripsi |
|---|---|
| type="1" | Item daftar akan diberi nomor dengan angka (default) |
| type="A" | Item daftar akan diberi nomor dengan huruf besar |
| type="a" | Item daftar akan diberi nomor dengan huruf kecil |
| type="I" | Item daftar akan diberi nomor dengan angka roman huruf besar |
| type="i" | The list items will be numbered with lowercase roman numbers |
Angka Romawi Huruf Besar:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Cobalah sendiri "Angka Romawi Huruf Kecil:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Cobalah sendiri "Daftar Deskripsi HTML
HTML juga mendukung daftar deskripsi.
Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
Tag <dl> mendefinisikan daftar deskripsi, yang tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah:
Contoh
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> Cobalah sendiri "Daftar HTML Bersarang
Daftar dapat disarangkan (daftar di dalam daftar):
Contoh
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> Cobalah sendiri "Penghitungan Daftar Kontrol
Secara default, daftar yang dipesan akan mulai dihitung dari 1. Jika Anda ingin mulai menghitung dari nomor yang ditentukan, Anda dapat menggunakan atribut start:
Daftar Horisontal dengan CSS
Daftar HTML dapat ditata dengan berbagai cara dengan CSS.
Salah satu cara populer adalah mendesain daftar secara 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> Cobalah sendiri "Ringkasan Bab
- Gunakan
<ul>elemen HTML untuk mendefinisikan daftar tidak terurut - Gunakan
list-style-typeproperti CSS untuk mendefinisikan penanda item daftar - Gunakan
<ol>elemen HTML untuk mendefinisikan daftar yang diurutkan - Gunakan
typeatribut HTML untuk menentukan jenis penomoran - Gunakan
<li>elemen HTML untuk mendefinisikan item daftar - Gunakan
<dl>elemen HTML untuk mendefinisikan daftar deskripsi - Gunakan
<dt>elemen HTML untuk mendefinisikan istilah deskripsi - Gunakan
<dd>elemen HTML untuk menggambarkan istilah dalam daftar deskripsi - Daftar dapat bersarang di dalam daftar
- Daftar item dapat berisi elemen HTML lainnya
- Gunakan properti CSS
float:leftataudisplay:inlineuntuk menampilkan daftar secara horizontal
0 Response to "[Belajar HTML #17] List/Daftar HTML - < ol > - < ul > - < li > - < dl >"
Post a Comment