Cara
Membuat Bullet and Numbering pada posting blog tidaklah sulit
tetapi hanya butuh ketelitian. Sebenarnya pada post editor blog sudah tersedia
fasilitas untuk membuat list baik numbering maupun bullet, untuk blogspot
sendiri fasilitas ini terdapat pada mode “Tulis” atau “Compose” yaitu berupa
icon, dan penggunaannya cukup dengan meng klik icon tersebut. Namun penggunaan
fasilitas ini dirasa kurang memadai, terutama karena kurangnya variasi type
numbering maupun bullet, juga pada saat kita hendak menggunakan list yang
bertingkat. Selain itu pada post editor mode “HTML” fasilitas bullet dan
numbering tidak tersedia sehingga mau tidak mau harus membuatnya.
Sejauh yang
saya ketahui, untuk membuat bullet and numbering ini
bisa langsung melalui HTML, atau bisa juga melalui CSS (Cascading Style Sheet).
Namun kali ini saya hanya akan membahas cara membuat bullet dan numbering
dengan HTML. Untuk tutorial ini bisa anda coba membuatnya di notepad, atau
langsung di blog juga bisa. HTML mendukung beberapa format list, baik numbering
List dan bullets List. Berikut ini beberapa format dari bullet dan numbering
HTML:
·
Bullet HTML
Bullet dan
numbering berbeda hanya pada tag pertama dan terakhir saja. Jika ingin membuat
list berupa numbering maka tag yang anda gunakan adalah OL. Sementara jika anda
ingin membuat list berupa bullet maka gunakan tag UL. Adapun Tag HTML yang
digunakan untuk bullet dibuka dengan kode <ul> dan ditutup dengan kode
</ul> , sedangkan untuk masing masing item /list dibuka dengan <li>
dan ditutup dengan </li>. Perhatikan contoh berikut:
<html>
<head>
<title>Bullet HTML</title>
</head>
<body>
<ul>
<li>bullet satu</li>
<li>bullet dua</li>
<li>bullet tiga</li>
</ul>
</body>
</html>
<head>
<title>Bullet HTML</title>
</head>
<body>
<ul>
<li>bullet satu</li>
<li>bullet dua</li>
<li>bullet tiga</li>
</ul>
</body>
</html>
Tulislah kode
di atas pada notepad lalu simpan dengan nama bullet.html. Setelah
selesai disimpan bukalah file bullet.html tadi
dengan browser misalnya mozilla firefox sehingga tampilannya akan menjadi
seperti yang di bawah ini.
Ada beberapa tipe
bullet yang dapat digunakan di antaranya sebagai berikut:
·
Tipe Disc
Agar jarak antar barisnya tidak
terlalu jauh maka penulisan tag htmlnya tidak perlu ganti baris (tidak usah di
enter). Perhatikan contoh berikut:
<html>
<head>
<title>HTML Tipe Disc</title>
</head>
<body>
<ul type=”Disc”> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list seterusnya…</li></ul>
</body>
</html>
<head>
<title>HTML Tipe Disc</title>
</head>
<body>
<ul type=”Disc”> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list seterusnya…</li></ul>
</body>
</html>
Maka tampilan pada browser akan
tampak seperti di bawah ini.
·
Tipe Circle
Tipe ini menampilkan bullet
dengan bentuk lingkaran. Contoh:
<html>
<head>
<title>Bullet HTML Tipe Circle</title>
</head>
<body>
<ul type=”Circle”> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list seterusnya…</li></ul>
</body>
</html>
<head>
<title>Bullet HTML Tipe Circle</title>
</head>
<body>
<ul type=”Circle”> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list seterusnya…</li></ul>
</body>
</html>
Maka tampilan pada browser akan
tampak seperti berikut ini.
·
Tipe Square
Tipe ini menampilkan bullet
dengan bentuk kotak persegi. Contoh:
<html>
<head>
<title>Bullet HTML Tipe Square</title>
</head>
<body>
<ul type=”Square”>
<li>list 1</li><li>list 2</li><li>list 3</li><li>list seterusnya…</li></ul>
</body>
</html>
<head>
<title>Bullet HTML Tipe Square</title>
</head>
<body>
<ul type=”Square”>
<li>list 1</li><li>list 2</li><li>list 3</li><li>list seterusnya…</li></ul>
</body>
</html>
0 comments:
Post a Comment