Thursday, May 16, 2013

Materi Ke 5 HTML : Membuat List dan Penomoran atau Bullet and Numbering

Dalam HTML kita juga bisa membuat list/daftar dalam bentuk bullet atau numbering, tag dasar yang dipakai ada 2:
  1. <ol></ol> untuk membuat daftar terurut (numbering/ penomoran) contoh 1, 2, 3 dst atau A, B, C dst atau i, ii, iii dst dan sebagainya. OL merupakan singkatan dari Ordered List (daftar yang terurut). Attribut yang dipakai adalah type sedangkan nilai attribut type contohnya type="1" , type="A" dst
  2. <ul></ul> untuk membuat daftar tidak terurut (bullet). UL merupakan singkatan dari Unordered List (daftar tidak terurut). Attribut yang dipakai adalah type sedangkan nilai attribut type contohnya type="square" , type="disk" dst. Nilai attribut type yang lain adalah disc, square, dan circle
  3. <li></li> untuk menunjukkan list data OL maupun UL, tag ini berada diantara tag OL atau UL, lebih jelasnya dibahas di contoh.
Perlu diperhatikan materi yang saya tulis disini selalu ada kaitannya dengan materi sebelumnya terutama Materi Ke 1, disarankan untuk yang baru belajar dibaca dulu Materi Ke 1 disini


Untuk lebih memperjelas membuat list dan penomoran kita coba praktik penggunaannya sebagai berikut:
1. Buka Text Editor HTML, disini kita pakai Notepad++, buat file baru setelah itu kita ketikkan kode berikut:
<html>
<head>
<title>Membuat List</title>
</head>
<body bgcolor="Lightblue">
<font color="Darkblue" size="5">LATIHAN MEMBUAT LIST</font><br>
<font color="Blue" size="3">List Website Favorit :</font><br>
<! Mulai membuat ordered list penomoran type 1,2,3 dst >
<ol type="1">
<li>www.facebook.com</li>
<li>www.twitter.com</li>
<li>www.gmail.com</li>
<li>www.yahoo.com</li>
<li>prongang.blogspot.com</li>
</ol>
<font color="Blue" size="3">List Penyanyi Favorit : :</font><br>
<! Mulai membuat ordered list penomoran type i,ii,iii dst >
<ol type="i">
<li>Justin Bieber</li>
<li>Lady Gaga</li>
<li>Katy Perry</li>
<li>Rihanna</li>
<li>Taylor Swift</li>
</ol>
<font color="Blue" size="3">List Makanan Favorit : :</font><br>
<! Mulai membuat unordered list bullet type disc >
<ul type="disc">
<li>Rendang</li>
<li>Bakso</li>
<li>Sate Ayam</li>
<li>Soto Ayam</li>
<li>Nasi Goreng</li>
</ul>
<font color="Blue" size="3">List Gadget Favorit : :</font><br>
<! Mulai membuat unordered list bullet type square >
<ul type="square">
<li>Apple IPhone 4S</li>
<li>Samsung Galaxy Note</li>
<li>BlackBerry Bold 9900</li>
<li>Nokia Lumia 800</li>
<li>Samsung Galaxy W</li>
</ul>
</body>
</html>
2. Seperti biasa kita simpan di C:\AppServ\www\coba simpan dengan nama list.html 
 

3. Untuk melihat hasil buka webbrowser ketikkan di addressbar alamat berikut localhost/coba/list.html

Tugas pembaca adalah menganalisa antara coding dan hasil yang ditampilkan selanjutnya coba berkreasi dengan mengganti warna atau mengganti nilai attribut type sesuai keinginan. 

Selamat berkreasi semoga bermanfaat,,,, Nantikan postingan selanjutnya berkaitan dengan membuat tabel.


No comments:

Post a Comment