List HTML


Pemrogaman WEB dengan HTML, List HTML, Contoh List, Ordered List, Unordered List, Nested List, Definition List, Tag-tag List

List HTML
Lis merupakan bentuk tang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML:
  • List dengan nomor
  • List tanpa nomor
  • List definisi

List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Pada contoh kalimat diatas merupakan contoh l.ist tanpa menggunakan nomor.

Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uaraian terhadap suatu item dalam daftar à disebut list definisi.

Untuk membuat list tanpa nomor, disebut juga Bulleted List:
  • Mulai dengan tag pebuka List <ul>
  • Masukkan setiap item list denghan menggunakan tag <li> kemudian tuliskan itemnya (satu aja), tag penutup item</li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan
  • Ulangi lagi langkah kedua uintuk menuliskan item list berikutnya
  • Akhiri seluruh list dengan sebuah tag penutup </ul>

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

Contoh List
Contoh ini medemontrasikan list berurut dan tak berurut menggunakan nomor dan menggunakan bullet.
<!—boba_list.htmlà
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html> 

Ordered List
Nomor item secara default adalah menggunakan angka 1,2,3,…, dst sampai dengan sejumlah item dalam list tersebut.

Unutk keperluan penyjian tertentu kita dapat mengubah nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut type pada tag <ol>.

Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list;
Type
Arti
I
I
a
A
Datampilkan dengan angka Romawi huruf besar
Datampilkan dengan angka Romawi huruf kecil
Diubah dengan menggunakan abjad huruf kecil
Diubah dengan menggunakan abjad huruf besar

Selain atribut type, ada juga atribut start, digunakan unutk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka berikut adalah contoh penggunaanya <ol start=7>…</ol>

Contoh ini mendemontrasikan berbagai jenis ordered list yang berbeda.
<!—coba_lisordered.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>
<li>Oranges</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, memounyai bullet default berupa noktah. Jenis bullet bisa diubah, berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:
  • Disk, bentuk noktah tetapi tidak diarsir di tengahnya
  • 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”>…</ul>.

Contoh ini mendemontrasikan berbagai jenis unordered list.
<!—coba_listunordered.htmlà
<html>
<body>
<h4>Disk 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>Oranges</li>
</ul>
<h4>Square bullet 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 mendemontrasikan 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>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
<li>Milk</li>
</ul>
</body>
</html>

Definition List
Contoh ini mendemontrasikan suatu Definition List.
<!—coba_listdef.htmlà
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black Hot Drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>

Tag-tag List
Tag Awal
NN
IE
W3
Kegunaan
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
<dir>
<menu>
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.2
3.2
3.2
3.2
3.2
3.2
Defines an ordered list
Defines an unordered list
Defines a list item
Defines a definition list
Defines a definition term
Defines a definition description
Deprecated. Use <ul> instead
Deprecated. Use <ul> instead

Diposting oleh