Ketemu lagi di artikel tentang HTML Fundamental, terakhir posting artikel tentang CSS, sekarang baru bisa posting tentang HTML lagi. Seperti biasa, jika anda baru membaca di blog saya, saya sarankan dan persilahkan untuk mengikuti tutorial sebelumnya, dan ini linknya HTML Fundamental I, HTML Fundamental II, HTML Fundamental III, HTML Fundamental VI, HTML Fundamental V.
Sekarang kita mulai tutorial ini. Setelah membahas tentang Font dan atribut-atributnya sekarang kita akan membahas untuk pengurutan daftar item atau list pada HTML.
- Daftar Item Tanpa Nomor Urut
Jika data anda ingin ditampilkan dalam bentuk daftar (list) yang tidak menggunakan nomor, anda bisa menggunakan tag <ul>. Dalam hal ini, akhir daftar diakhiri dengan tag </ul>. Contoh kode menggunakan tag <ul>...</ul>. diimplementasikan dengan koding dibawah ini :
<html>
<head>
<title>Contoh Pemakaian Tag UL</title>
</head>
<body>
<h2>Berbagai Blog Gratis</h2>
<ul>
www.blogger.com<br>
www.multiply.com<br>
www.wordpress.com<br>
www.gobloglah.com<br>
www.ebloggy.com<br>
www.blogdrive.com<br>
www.blogsome.com<br>
</ul>
********
</body>
</html>
gambar dibawah ini menampilkan hasil dari koding diatas.
Perhatikan bahwa jenis blog terletak didalam pasangan tag <ul>...</ul>, hasilnya diperlihatkan pada gambar diatas. Penggunaan daftar item menggunakan tanda berbentuk circle atau kotak dapat menggunakan tag <li> didepan masing-masing item. Contoh penggunaan tag <li> dapat dilihat pada koding dibawah ini :
<html>
<head>
<title>Contoh Pemakaian Tag UL</title>
</head>
<body>
<h2>Berbagai Blog Gratis</h2>
<ul>
<li>www.blogger.com<br>
<li>www.multiply.com<br>
<li>www.wordpress.com<br>
<li>www.gobloglah.com<br>
<li>www.ebloggy.com<br>
<li>www.blogdrive.com<br>
<li>www.blogsome.com<br>
</ul>
********
</body>
</html>
Hasil implementasi menggunakan tag <ul>...</ul> yang digabung dengan tag <li> dapat dilihat pada gambar dibawah ini.
Jenis-jenis bullet yang dapat disisipkan melalui atribut <type> pada tag <li>. Nilai-nilai pada tag <type> diperlihatkan pada tabel dibawah ini :
contoh penggunaan berbagai nilai untuk <type> dapat dilihat pada koding dibawah ini :
Nilai Untuk Bullet Bentuk Bullet Circle
Disc
Square
<html>
<head>
<title>Penggunaan TYPE LI</title>
</head>
<body>
<ul>
<li type = "circle">www.blogspot.com<br>
<li>www.blogspot.com<br>
<li type = "circle">www.blogspot.com<br>
<li type = "disc">www.blogspot.com<br>
<li type = "square">www.blogspot.com<br>
<li>www.blogspot.com<br>
</ul>
</body>
</html>
pada contoh koding diatas menunjukkan bahwa tag yang tidak mendeklarasikan tag <type> naka nilai bullet akan menjadi bullet standar. Dan Standar penggunaan bullet adalah type Circle.
Sekian dulu untuk tutorial kali ini, semoga berteme kembali pada tutorial selanjutnya.regards
0 comments:
Post a Comment