Wednesday, February 1, 2017

Cara Membuat Bullet/Numbering dengan HTML

Ada tiga jenis list dalam dokumen HTML, yaitu Ordered List <ol>, Unordered List<ul> dan List tanpa bullet.
Ordered list <ol>. Tag  <ol>  adalah  kependekan  dari  Ordered  List,  yang  artinya  list  secara  berurutan.  list  yang  ditampilkan  nanti  oleh  tag  ini akan  menampilkan  nomor disebelah kiri dari detail.
Contoh:
<html>
<head>
<title>Bullet Numbering</title>
</head>
<body>
DAFTAR MENU MAKANAN :
<ol>
  <li>Ayam Bakar</li>
  <li>Ayam Goreng</li>
  <li>Bebek Goreng</li>
  <li>Bebek Bakar</li>
  <li>Lele Bakar</li>
  <li>Lele Goreng</li>
  <li> Cah kangkung</li>
</ol>
</body>
</html>

Hasilnya:
Bullet Numbering DAFTAR MENU MAKANAN :
  1. Ayam Bakar
  2. Ayam Goreng
  3. Bebek Goreng
  4. Bebek Bakar
  5. Lele Bakar
  6. Lele Goreng
  7. Cah kangkung

Defaultnya pengurutan dengan tag adalah angka. Jika ingin menggantinya menggunakan huruf/romawi maka tinggal menambahkan atribut type pada tag
contoh:
<html>
<head>
<title>Bullet Numbering</title>
</head>
<body>
DAFTAR MENU MAKANAN :
<ol type="A">
  <li>Ayam Bakar</li>
  <li>Ayam Goreng</li>
  <li>Bebek Goreng</li>
  <li>Bebek Bakar</li>
  <li>Lele Bakar</li>
  <li>Lele Goreng</li>
  <li> Cah kangkung</li>
</ol>
</body>
</html>
Hhasilnya:
Bullet Numbering DAFTAR MENU MAKANAN :
  1. Ayam Bakar
  2. Ayam Goreng
  3. Bebek Goreng
  4. Bebek Bakar
  5. Lele Bakar
  6. Lele Goreng
  7. Cah kangkung
Unorderedlist<ul>
Tag<ul> merupakan pengurutan list menggunakan simbol/bullet.  Cara membuatnya sama dengan script di atas tinggal menggati tag<ol> dengan <ul>. Contoh:
<html>
<head>
<title>Bullet Numbering</title>
</head>
<body>
DAFTAR MENU MAKANAN :
<ul>
  <li>Ayam Bakar</li>
  <li>Ayam Goreng</li>
  <li>Bebek Goreng</li>
  <li>Bebek Bakar</li>
  <li>Lele Bakar</li>
  <li>Lele Goreng</li>
  <li> Cah kangkung</li>
</ul>
</body>
</html>

Hasilnya:
Bullet Numbering DAFTAR MENU MAKANAN :
  • Ayam Bakar
  • Ayam Goreng
  • Bebek Goreng
  • Bebek Bakar
  • Lele Bakar
  • Lele Goreng
  • Cah kangkung
List tanpa bullte. Bagaimana dengan List tanpa bullet? Cara penulisannya sama persis dengan pembuatan list ol/ul hanya saja tag<ul>diganti dengan tag<dl> dan tag <li> diganti tag<dd>. Cobalah sendiri sehingga hasilnya seperti tamplan dibawah ini: 
Bullet Numbering DAFTAR MENU MAKANAN :
Ayam Bakar
Ayam Goreng
Bebek Goreng
Bebek Bakar
Lele Bakar
Lele Goreng
Cah kangkung
Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)