Cara Membuat Bullet and Numbering Html
Saya ucapkan selamat datang di blog Belajar Html Lengkap, pada kesempatan kali ini saya akan berbagi ilmu tentang bagaimana membuat bullet dan numbering pada postingan di blog .Kita sering kali menjumpai daftar item (list), baik berupa penomoran (numbering) maupun bullet pada suatu postingan /tulisan yang berfungsi untuk memberikan label atau urutan agar postingan/tulisan tersebut terstruktur dengan rapi sehingga dapat dipahami dengan mudah oleh para pembacanya.
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>
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:
- Tipe Circle Tipe ini menampilkan bullet dengan bentuk lingkaran. Contoh:
- Tipe Square Tipe ini menampilkan bullet dengan bentuk kotak persegi. Contoh:
<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>
<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>
<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>
Sekian tulisan tentang bullet dan numbering html yang bisa saya sampaikan. Silahkan dicoba sendiri mudah-mudahan tulisan saya dapat bermanfaat dalam membuat postingan menjadi lebih rapih dan menarik. Terima kasih dan salam....
No comments: