Tag apa yang digunakan untuk membuat bulleted list?

Table of Contents Show

Post navigation
Bagaimana Cara membuat Bulleted List?
Tag apa yang digunakan untuk membuat numbered list?
Tag yang digunakan untuk membuat daftar dimana item item yang ada dalam daftar memiliki bullet list berupa gambar adalah?
Apa perbedaan Bullet dan Numbering dalam HTML?

Jika anda pernah menggunakan Microsoft Word tentu saja akan sangat mengenal dengan istilah bullet dan numbering. Pada blog, juga menggunakan istilah ini. Hanya saja cara menuliskannya berbeda.

Secara umum daftar list bullet dan numbering dibagi menjadi 2, yaitu daftar list numbering atau biasa dikenal dengan ordered list. Dan daftar list yang kedua berupa bullet (simbol) atau biasa dikenal dengan unordered list.

Sebagai contoh silahkan dilihat bedanya dibawah ini :

Ordered List / Numbering

Baris Pertama
Baris Kedua
Baris Ketiga
Dan Seterusnya

Unordered List / Bullet

Baris Pertama
Baris Kedua
Baris Ketiga
Dan Seterusnya

Bagaimana cara menuliskannya pada HTML atau Blog ? Untuk menuliskannya kita harus berada pada mode HTML. Secara umum, bentuk penulisannya adalah sbb :

Ordered List / Numbering :

<ol> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ol>

Untuk menuliskan ordered list kita memulainya dengan TAG <ol></ol>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Unordered List / Bullet :

<ul> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ul>

Untuk menuliskan unordered list kita memulainya dengan TAG <ul></ul>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Diantara kedua list ini bisa disisipkan atau digabungkan menjadi bagian yang komplek, seperti contoh dibawah ini :

Baris Pertama
Baris Kedua
- Sub Baris Pertama
- Sub Baris Kedua
  1. Sub Sub Baris Pertama
  2. Sub Sub Baris Kedua
- Sub Baris Ketiga
Baris Ketiga

Cara penulisannya adalah sebagai berikut :

<ol>
  <li>Baris Pertama </li>
  <li>Baris Kedua 
    <ul>
      <li>Sub Baris Pertama </li>
      <li>Sub Baris Kedua 
        <ol>
          <li>Sub Sub Baris Pertama </li>
          <li>Sub Sub Baris Kedua </li>
        </ol>
      </li>
      <li>Sub Baris Ketiga </li>
    </ul>
  </li>
  <li>Baris Ketiga </li>
</ol>

I’m Teacher Vocational School. I interested in Computer, Networking, Web Design, Blogging and the Development of Computer Education.

Ada kalanya saat kita sedang merapikan tampilan halaman web menjumpai elemen-elemen HTML yang kurang rapi. Seperti yang baru saya jumpai beberapa waktu yang lalu. Elemen tersebut berkaitan dengan tampilan bullets dan numbering, yang mana poin-poin atau list yang ada seharusnya bisa tersusun rapi saat berganti baris tetapi setelah diuji coba malah jadi tidak rapi.

Bullets merupakan metode untuk menampilkan list yang poin-poinnya diwakili dengan simbol karakter tertentu (bisa berbentuk disc, square, circle, dsb.). Dalam HTML, bullets disebut juga dengan unordered list (ul), artinya list yang tidak berurutan. Sementara numbering merupakan metode untuk menampilkan list yang poin-poinnya diwakili dengan nomor urut. Dalam HTML, numbering disebut juga dengan ordered list (ol), artinya list yang berurutan.

Seperti yang sudah kita ketahui, HTML tidak mengenal tab atau spasi seperti layaknya teks editor yang biasa kita gunakan, misalnya pada Microsoft Word atau Notepad. Pada HTML, cara untuk membuat teks yang sedikit menjorok biasanya dilakukan dengan menempatkan karakter kosong seperti   atau bisa pula dengan meletakkan properti padding CSS.

Secara default, tampilan HTML dengan elemen bullets & numbering tampak sebagai berikut:

Namun, terkadang kita menjumpai tampilan bullets & numbering dengan bentuk yang kurang rapi seperti ini (perhatikan tampilan list setelah baris pertama):

CSS sudah menyediakan solusi untuk mengatasi hal tersebut yaitu dengan memanfaatkan properti list-style-position. Properti tersebut bisa diisi dengan salah satu dari nilai berikut:

list-style-position: inside|outside|initial|inherit;

Jika kita ingin membuat bullets & numbering yang mana setelah baris pertama dibiarkan tanpa menjorok ke kanan, maka bisa menggunakan nilai inside. Sedangkan jika kita ingin membuat bullets & numbering yang mana setelah baris pertama ikut menjorok ke kanan, maka bisa menggunakan nilai outside atau cukup dibiarkan kosong karena secara default sudah menggunakan nilai outside.

Apabila menghendaki tampilan yang lebih leluasa dan lebih rapi, misalnya mengganti ukuran font, spasi antarbaris, dan mengganti bentuk bullets/numbering, kita bisa menambahkan sejumlah properti CSS yang lain, contohnya sebagai berikut:

ul.c {
    list-style-type: disc;
    list-style-position: outside;
    padding: 5px 0 5px 10px;
    margin-left:50px;
    line-height:28px;
    font-size:18px
}

Hasil dari penambahan modifikasi CSS di atas bisa dilihat pada screeshoot di bawah. Ukuran font lebih besar dan jarak spasi antarbaris menjadi lebih lebar. Tampilan di bawah ini tentunya akan lebih nyaman dilihat.

Kode HTML dan CSS utuh untuk membantu memahami problem dan solusi pada bahasan kali ini disertakan pada lampiran berikut. Simpan file berikut dalam format .html, kemudian coba buka melalui browser kesayangan Anda.

<!DOCTYPE html>
<html>
<head>
<style>

/** Kode CSS Bullets untuk Metode A, B, dan C**/

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

ul.c {
    list-style-type: disc;
    list-style-position: outside;
    padding: 5px 0 5px 10px;
    margin-left:50px;
    line-height:28px;
    font-size:18px
}

/** Kode CSS Numbering untuk Metode A, B, dan C**/

ol.a {
  list-style-position: outside;
}

ol.b {
  list-style-position: inside;
}

ol.c {
    list-style-position: outside;
    padding: 5px 0 5px 10px;
    margin-left:50px;
    line-height:28px;
    font-size:18px
}
</style>
</head>
<body>

<h2>Contoh Bullets & Numbering</h2>

<h2>Bullets (default), tanpa pemformatan CSS</h2>
<ul>
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>

<h2>Numbering (default), tanpa pemformatan CSS</h2>
<ol>
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>

<br>
***
<br>

<h2>Bullets Model A (default), menggunakan "list-style-position: outside;"</h2>
<ul class="a">
 <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>

<h2>Bullets Model B, menggunakan "list-style-position: inside;"</h2>
<ul class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>

<h2>Bullets Model C, menggunakan pemformatan tambahan</h2>
<ul class="c">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>
<br>
***
<br>
<h2>Numbering Model A (default), menggunakan "list-style-position: outside;"</h2>
<ol class="a">
 <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>

<h2>Numbering Model B, menggunakan "list-style-position: inside;"</h2>
<ol class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>

<h2>Numbering Model C, menggunakan pemformatan tambahan</h2>
<ol class="c">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>

</body>
</html>

Bagaimana Cara membuat Bulleted List?

Membuat daftar bullet:.

Pilih teks yang ingin Anda format sebagai daftar..

Pada tab Home, klik panah drop-down di samping perintah Bullets. Menu gaya bullets akan muncul..

Gerakkan mouse ke berbagai gaya bullets. Sebuah live preview dari gaya bullets akan muncul dalam dokumen. ... .

Teks akan diformat sebagai daftar bullet..

Tag apa yang digunakan untuk membuat numbered list?

Cara membuat ordered list HTML. Ordered list atau list angka/nomor dibuat dengan menggunakan tag <ol> . Penulisan item-item list tersebut menggunakan tag <li> yang ditelakkan diantara tag pembuka <ol> dan tag penutup </ol>.

Tag yang digunakan untuk membuat daftar dimana item item yang ada dalam daftar memiliki bullet list berupa gambar adalah?

Secara default penggunaan dari Tag <ul> menampilkan daftar item dengan di-awali simbol bullet, Simbol bullet tersebut bisa dignti dengan simbol lain menggunakan atribut type dengan nilainya yaitu Circle, Disc, Square. Penggunaan Tag <ul> digunakan bersamaan dengan Tag <li>.