Tutorial Belajar Mengganti Karakter List di HTML
Sunday, May 14, 2017
Add Comment
Tipe Ordered List
Pada ordered list kita dapat menggunakan tidak hanya list angka saja (1,2,3,dst) tapi juga huruf (a,b,c,dst) dan angka romawi (I,II,III,dst). Untuk mengubah tipe ordered list, kita gunakan atribut di dalam tag
<ol>.
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
</ol>
<li>List Ketiga</li>
Contoh kode di atas akan menampilkan list seperti ini:
- List Pertama
- List Kedua
- List Ketiga
Adapun tipe-tipe yang dapat digunakan diantaranya:
| Tipe | Deskripsi |
|---|---|
| type="1" | Item list menggunakan angka (default) |
| type="A" | Item list menggunakan huruf kapital |
| type="a" | Item list menggunakan huruf kecil |
| type="I" | Item list menggunakan angka romawi kapital |
| type="i" | Item list menggunakan angka romawi kecil |
Tipe Unordered List
Bawaan dari unordered list menggunakan lingkaran hitam untuk setiap item listnya. Kita dapat mengganti simbol item tersebut menggunakan style property
list-style-type.
<ul style="list-style-type:circle"><li>List Pertama</li>
<li>List Ketiga</li>
<li>List Kedua</li>
</ul>
Contoh kode di atas akan menampilkan list seperti ini:
- List Pertama
- List Kedua
- List Ketiga
Adapun tipe list style yang dapat kita gunakan diantaranya:
| Nilai | Deskripsi |
|---|---|
| disc | Item list menggunakan simbol lingkaran (default) |
| circle | Item list menggunakan simbol garis luar lingkaran |
| square | Item list menggunakan simbol kotak |
| none | Item list tidak menggunakan simbol list |
PRAKTEK
- Jalankan kode pada editor dan lihat seperti apa tampilannya.
- Gantilah list utama menggunakan ordered list dengan angka romawi kapital. Jalankan kode dan lihat perubahannya.
- Gantilah setiap sublist sehingga masing-masing menggunakan list style tipe kotak, lingkaran dan tanpa simbol.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<style>
</style>
</head>
<body>
<h1>Men's Wear Online Shop</h1>
<ul>
<li>Pakaian
<ul>
<li>Atasan</li>
<li>Outerwear</li>
<li>Bawahan</li>
<li>Baju Koko</li>
<li>Pakaian Dalam</li>
<li>Pakaian Tidur</li>
</ul>
</li>
<li>Sepatu
<ul>
<li>Sepatu Derbies</li>
<li>Sneakers & Skate</li>
<li>Sepatu Olahraga</li>
<li>Sandal & Flip Flop</li>
<li>Loafers</li>
<li>Boots</li>
</ul>
</li>
<li>Aksesoris
<ul>
<li>Tas</li>
<li>Jam Tangan</li>
<li>Syal</li>
<li>Dompet</li>
<li>Topi</li>
<li>Ikat Pinggang</li>
<li>Kacamata</li>
</ul>
</li>
</ul>
</body>
</html>
Hasilnya:
Men's Wear Online Shop
- Pakaian
- Atasan
- Outerwear
- Bawahan
- Baju Koko
- Pakaian Dalam
- Pakaian Tidur
- Sepatu
- Sepatu Derbies
- Sneakers & Skate
- Sepatu Olahraga
- Sandal & Flip Flop
- Loafers
- Boots
- Aksesoris
- Tas
- Jam Tangan
- Syal
- Dompet
- Topi
- Ikat Pinggang
- Kacamata
0 Response to "Tutorial Belajar Mengganti Karakter List di HTML"
Post a Comment