Mengganti Karakter List

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>
   <li>List Ketiga</li>
</ol>
Contoh kode di atas akan menampilkan list seperti ini:
  1. List Pertama
  2. List Kedua
  3. List Ketiga
Adapun tipe-tipe yang dapat digunakan diantaranya:
TipeDeskripsi
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 Kedua</li>
   <li>List Ketiga</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:
NilaiDeskripsi
discItem list menggunakan simbol lingkaran (default)
circleItem list menggunakan simbol garis luar lingkaran
squareItem list menggunakan simbol kotak
noneItem list tidak menggunakan simbol list

Contoh:

<!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
<ol type="A">
<li>Tas</li>
<li>Jam Tangan</li>
<li>Syal</li>
<li>Dompet</li>
<li>Topi</li>
<li>Ikat Pinggang</li>
<li>Kacamata</li>
</ol>
</li>
</ul>

</body>
</html>

Outputnya akan seperti ini:

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
    1. Tas
    2. Jam Tangan
    3. Syal
    4. Dompet
    5. Topi
    6. Ikat Pinggang
    7. Kacamata


Sumber: codepoiltan.com

Komentar

Posting Komentar