CARA MEMBUAT BULLET DAN NUMBERING
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:
<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.
- Tipe Disc
- Agar jarak antar barisnya tidak terlalu jauh maka penulisan tag
htmlnya tidak perlu ganti baris (tidak usah di enter). Perhatikan contoh
berikut:
<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:
<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:
<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