Sabtu, 24 Desember 2016

22.03

By Unknown



No comments

Mari Mengenal HTML Part 5 : List HTML

Pada kesempatan kali saya akan memposting List HTML, dari pengertian, jenis-jenisnya dan contoh scriptnya.

List HTML
List Item merupakan sebuah perintah dalam HTML yang digunakan untuk membuat daftar atau pengelompokan. Ada berbagai macam jenis list item HTML diantaranya :


Unordered ListUnordered list dimulai dengan tag <ul>, pada setiap itemnya dimulai dengan tag <li> yang dapat disimbolkan dengan lingkaran kecil berwarna hitam.
Contoh :

<!DOCTYPE html>
<html>
<head><title>List HTML</title></head>
<body>
<h3>Unordered List</h3>
<ul>
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>
</body>
</html.

Anda dapat mencoba sendiri script yang diatas, maka hasilnya akan muncul seperti di bawah ini :

 
CSS list-style-type properti digunakan untuk menentukan gaya item daftar 
penanda:
  • disc, bulatan kecil (default)
<h3>Unordered List with Disc Bullets</h3>
<ul style="list-style-type:disc">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>
  • circle, lingkaran.
<h3>Unordered List with Circle Bullets</h3>
<ul style="list-style-type:circle">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>
  • square, persegi
 <h3>Unordered List with Square Bullets</h3>
<ul style="list-style-type:square">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul> 
  • none, kosong atau tidak ada
 <h3>Unordered List without Bullets</h3>
<ul style="list-style-type:none">
    <li>Kopi</li>
    <li>Tea</li>
    <li>Susu</li>
</ul>

Dari beerapa contoh script yang diatas, anda dapat mencobanya sendiri. Hasilnya seperti dibawah ini :


 Ordered List
Ordered List, dimulai dengan tag <ol>, setiap item dimulai dengan tag <li> secara default ditandai dengan nomor.
Contoh:
<h3>Ordered List</h3>
<ol>
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>

Anda dapat mencoba sendiri script yang diatas, maka hasilnya akan muncul seperti di bawah ini :
Jenis-jenis atribut <ol>, antara lain :
  • Type="1", daftar item dengan nomor (default).
 <h3>Ordered list with numbers</h3>
<ol type="1">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>
  • Type="A", daftar item nomor diberi tanda huruf besar
 <h3>Ordered list with letters</h3>
<ol type="A">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>
  • Type="a", daftar diberi nomor tanda huruf kecil
<h3>Ordered list with lowercase letters</h3>
<ol type="a">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>
  • Type="I", daftar diberi nomor dengan angka romawi huruf besar
<h3>Ordered list with Roman Numbers</h3>
<ol type="I">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol> 
  • Type="i", daftar diberi nomor dengan angka romawi huruf kecil
 <h3>Ordered list with Lowercase Roman Numbers</h3>
<ol type="i">
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
</ol>
Dari beerapa contoh script yang diatas, anda dapat mencobanya sendiri. Hasilnya seperti dibawah ini :

 

Deskripsi List, deskripsi list didefinisikan dengan tag <dl>, kalau tag <dt> untuk mendefinisikan istilah sedangkan tag <dd> menjelaskan setiap istilah.
Contoh :
<h3>Description List</h3>
<dl>
 <dt>Kopi</dt>
    <dd>-Kopi Susu</dd>
 <dt>Susu</dt>
    <dd>Susu Coklat</dd>
</dl>
Hasil :
 List Bersarang bisa disebut juga dengan daftar dalam daftar
Contoh :
<h3>List Bersarang</h3>
<ul>
 <li>Teh</li>
 <li>Kopi</li>
    <ul>
     <li>Kopi Susu<li>
     <li>Kopi Luwak<li>
    </ul>
 </li>
<li>Susu</li>
<ul>
Hasil :
 

Sekian dan terimakasih
Semoga Bermanfaat 
Referensi :


 

0 komentar:

Posting Komentar