Tag UL dan OL menandakan permulaan pembuatan daftar, sedangkan tag LI untuk mengisi item-item pada daftar. Tag ul (<ul>) ditutup dengan penutup tag ul juga (</ul>) dan tag ol (<ol>) juga ditutup dengan tag ol (</ol>).
Contoh daftar tak berurutan:
ul.html
<!DOCTYPE HTML>
<html>
<head>
<title>Membuat daftar dengan UL</title>
</head>
<body>
<ul style="list-style-type:disc">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
<ul style="list-style-type:circle">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
<ul style="list-style-type:square">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
</body>
</html>
Contoh penggunaan tag UL.
Contoh daftar berurutan
Untuk daftar berurutan terdiri dari angka, huruf abjad dan huruf roman, yang dituliskan dalam bentuk type. Type 1 untuk penomoran angka (default), Type A; penomoran dengan abjad dengan huruf kapital, Type a; penomoran dengan abjad dengan huruf kecil, Type I untuk penomoran huruf roman kapital dan Type i untuk penomoran huruf roman dengan huruf kecil.
Contohnya: ol.html
<!DOCTYPE HTML>
<html>
<head>
<title>Membuat daftar dengan OL</title>
</head>
<body>
<ol type="1">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
<ol type="A">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
<ol type="a">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
<ol type="I">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
<ol type="i">
<li>Apel</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
</body>
</html>
Penggunaan tag OL.
Kombinasi UL dan OL
Tag UL dan OL juga bisa dikombinasikan, Anda bisa bereksperimen semaunya asalkan tetap tidak lupa menutup tag-tag yang telah dibuka di awal, misalnya seperti contoh dibawah (ulol.html):
<!DOCTYPE HTML>
<html>
<head>
<title>Membuat daftar kombinasi UL dan OL</title>
</head>
<body>
<ol style="list-style-type:square">
<li>Apel
<ol type="1">
<li>Apel Merah</li>
<li>Apel putih</li>
</ol>
</li>
<li>Anggur
<ol type="a">
<li>Anggur merah</li>
<li>Anggur hijau</li>
</ol>
</li>
<li>Strawberry
<ol type="i">
<li>Strawberry matang</li>
<li>Strawberry muda</li>
</ol>
</li>
</ol>
</body>
</html>
<html>
<head>
<title>Membuat daftar kombinasi UL dan OL</title>
</head>
<body>
<ol style="list-style-type:square">
<li>Apel
<ol type="1">
<li>Apel Merah</li>
<li>Apel putih</li>
</ol>
</li>
<li>Anggur
<ol type="a">
<li>Anggur merah</li>
<li>Anggur hijau</li>
</ol>
</li>
<li>Strawberry
<ol type="i">
<li>Strawberry matang</li>
<li>Strawberry muda</li>
</ol>
</li>
</ol>
</body>
</html>
No comments:
Post a Comment