List HTML

List merupakan bentuk yang umum yang bisa kita gunakan untuk menguraikan daftara sesuatu, misalnya jenis-jenis list dalam HTML:

List dengan nomor
List tanpa nomor
List definisi

List dengan nomor adalah model daftar yang setiap itemnya dibri nomor. Pada contoh kalimat di atas merupakan contoh list tanpa menggunakan nomor.

Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar ? disebut list definisi.
Untuk membuat list tanpa nomor, disebut juga bulleted list:

Mulai dengan tag pembuka list <ul>
Memasukkan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan)
Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
Akhiri seluruh list dengan sebuah tag penutup </ul>.

Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>

Contoh List

Contoh ini mendemonstrasikan list berurut dan tak berurut menggunakan nomor dan menggunakan billet.
<!-coba_list.html?
<html>
<body>
<h4>An Ordered List: </h4>
<ol>
<li>Coffe</i>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered List:</h4>
<ul>
<li>Coffe</li>
<li>Tea</li>
<li>Milk</li>
</il>
</body>
</html>

Ordered List

Nomor item secara default adalah menggunakan angka 1,2,3,…, dan seterusnya sampai dengan sejumlah item dalam list tersebut.
Untuk keperluan penyajian tentu kita dapat mengubah nomor dalam order list dengan model angka yang lain, dengan mengisi atribut type pada tag <ol>.
Berikut ini adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam order list;
Type I Arti : Ditampilkan dengan angka Romawi huruf besar
Type i Arti : Ditampilkan dengan angka Romawi huruf kecil
Type a Arti : Diubah dengan menggunakan abjad huruf kecil
Type A rti : Diubah dengan menggunakan abjad huruf besar
Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka berikut adalah contoh penggunaannya <ol start=7>…</ol>

Contoh ini mendemonstrasikan berbagai jenis ordered list yang berbeda.
<!- -coba_listordered.html–>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list : </h4>
<ol type=”A”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list : </h4>
<ol type=”a”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type=”I”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list :</h4>
<ol type=”i”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>

Unordered List

Unordered list sering disebut sebagai bulleted list, mempunyai bulleted default berupa noktah. Jenis bulet bisa diubah, berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:

disk, bentuk noktah tetapi tidak diarsir ditengahnya
box, bentuk kotak

untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <ul>, berikut adalah contoh untuk mengubah jenis bullet menjadi kotak <ul type=”box>…</u>
Contoh ini mendemonstrasikan berbagai jenis unoredered list.
<!-coba_listunordered.html?
<html>
<body>
<h4>Disc bullets list : </h4>
<ul type=”disc”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list : </h4>
<ul type=”circle”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Orange</li>
<h4>square bullets list : </h4>
<ul type=”square”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>

Nested List

Bullet dapat digunakan secara bersarang, maksudnya didalam list ada list lagi. Contoh ini mendemonstrasikan bagaimana membuat list yang bersarang (nested list).
<!–coba_listnested.html – - >
<html>
<body>
<h4>A nested List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>Black tea</li>
<li>Green tea</li>
</ul>
</body>
</html>

Definition List

Contoh ini mendemonstrasikan suatu definition list
<!-coba_listdef.html?
<html>
<body>
<h4>A Definition List : </h4>
<dl>
<dt>Coffee</dt>
<add>Black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
</body>
</html>
Tag Awal <ol> kegunaan sebagai Defines an ordered list
Tag Awal <ul> kegunaan sebagai Defines an unordered list
Tag Awal <li> kegunaan sebagai Defines a list item
Tag Awal <dl> kegunaan sebagai a Defines a definition list
Tag Awal <dt> kegunaan sebagai Defines a definition term
Tag Awal <dd> kegunaan sebagai Defines a definition description
Tag Awal <dir> kegunaan sebagai Deprecated. Use <ul> instead
Tag Awal <menu> kegunaan sebagai Deprecated. Use <ul> instead

Damir Blog

BLOG'S DAMIR

Sabtu, 25 September 2010

PEMROGRAMAN WEB (LIST HTML)