Selasa, 09 Januari 2018

Membuat Bullet and Numbering (Daftar Isi) di HTML

Bullet and Numbering mungkin tidak abstrak lagi ditelinga anda yang biasa memakai Microsoft Word. Format yang biasa digunakan untuk menciptakan daftar isi atau list ini bisa juga di gunakan di halaman website/blog. Penggunaanya cukup sederhana, anda hanya perlu mengenal Tag Ordered List (OL) ialah daftar yang berupa angka atau huruf abjad. Sedang untuk menciptakan daftar yang berupa Bullet memakai Tag Unordered List (UL). Berikut contoh penggunaanya :


1. Contoh Penggunaan Ordered List (Daftar Numbering)

<ol>
<li>Halaman Utama
<li>Profil
<li>Galery
<li>Kontak Kami
</ol>

Hasilnya
  1. Halaman Utama
  2. Profil
  3. Galery
  4. Kontak Kami

Secara default akan muncul modelnya 1,2,3.....dst, tetapi anda bisa juga menciptakan Daftarnya dengan Type yang lain, ialah dengan menambahkan Attribut Type, sebagai contoh :

<ol type="A">
<li>Halaman Utama
<li>Profil
<li>Galery
<li>Kontak Kami
</ol>

Hasilnya
  1. Halaman Utama
  2. Profil
  3. Galery
  4. Kontak Kami

Adapun Type - type yang lainya sebagai berikut :
---------------------------------------------------------
Type Fungsi
---------------------------------------------------------
A Untuk menciptakan daftar urut "A, B, C, D...........dst."
a Untuk menciptakan daftar urut "a, b, c, d...........dst."
I Untuk menciptakan daftar urut "I, II, III,...........dst."
i Untuk menciptakan daftar urut "i, ii, iii,...........dst."
----------------------------------------------------------

Jika ingin memulai bukan dari angka pertama maka tambahkan attribut Start = 3, berarti dimulai dari angka 3.


2. Contoh Penggunaan Unordered List (Daftar Bullet)

<ul>
<li>Halaman Utama
<li>Profil
<li>Galery
<li>Kontak Kami
</ol>

Hasilnya
  • Halaman Utama
  • Profil
  • Galery
  • Kontak Kami

Adapun Type - type yang lainya sebagai berikut :
  • Circle
  • Square
  • Disc

Keterangan :
UL = Unordered List (Daftar Bullet)
OL = Ordered List (Daftar Numbering)
Li = List Item (Bagian dari Ordered / Unordered List)



Sumber http://www.tips-trick.com

Tidak ada komentar:

Posting Komentar