Dalam HTML kita juga bisa membuat list/daftar dalam bentuk bullet atau numbering, tag dasar yang dipakai ada 2:
- <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
- <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
- <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.
Ternyata ukurannya pun bisa diatur juga ya gan?
ReplyDeletebagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://computer-course-center.com/
Mantep lah, terima kasih atas infonya, jadi bisa mengerti model list yang bullet atau numbering untuk scriptnya.
ReplyDeleteKunjungi blog saya ya: https://tedsu.mahasiswa.atmaluhur.ac.id
dan website kampus saya: http://www.atmaluhur.ac.id
Thanks gan, artikelnya keren dan sangat bermanfaat serta menambah wawasan saya tentang pembuatan List dan Penomoran atau Bullet and Numbering.
ReplyDeleteJangan lupa kunjung blog saya https://randi96.mahasiswa.atmaluhur.ac.id/ dan website kampus saya juga ya http://www.atmaluhur.ac.id/