HTML memiliki Unordered list, Ordered list, atau Deskripsi list :
Unordered List
|
Ordered List
1. The first item
2. The second item
3. The third item
4.The fourth item
|
Unordered HTML List
Unordered list dimulai dengan tag <ul>. Yang mana list item dimulai dengan tag <li>.
List item akan ditandai dengan lingkaran hitam kecil.
Unordered list :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered list :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML list - Atribut
Tipe atribut dapat ditambahkan pada Unordered list. Untuk menentukan model penanda :
Tipe atribut dapat ditambahkan pada Unordered list. Untuk menentukan model penanda :
Style
|
Description
|
list-style-type:disc
|
List item akan ditandai dengan lingkaran (default)
|
list-style-type:circle
|
List item akan ditandai dengan simbol circle
|
list-style-type:square
|
List item akan ditandai dengan simbol bujur sangkar
|
list-style-type:none
|
List item tidak akan ditandai
|
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Menggunakan tipe atribut <ul type="disc">, dari pada <ul style="list-style-type:disc>, juga bekerja. Tapi di HTML5, tipe atribut tidak valid pada unordered list, hanya pada ordered list.
Ordered HTML List
Ordered list dimulai dengan tag <ol>. Yang mana list item dimulai dengan tag <li>.
List item akan ditandai dengan nomor.
Ordered list :
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - Atribut
Numbers :
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Upper Case :
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lower Case :
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Roman Upper Case :
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Roman Lower Case :
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description List
Tag <dl> untuk mendefinisikan Description list.
Tag <dt> untuk mendefinisikan istilah (nama), tag <dd> mendefinisikan data (deskripsi).
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
List item dapat berisi list baru, dan elemen HTML lainya, seperti gambar dan link.
Horizontal List
HTML list bisa ditata dalam berbagai cara dengan CSS.
Salah satu cara yang populer, adalah gaya list untuk menampilkan horizontal :
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Menggunakan tipe atribut <ul type="disc">, dari pada <ul style="list-style-type:disc>, juga bekerja. Tapi di HTML5, tipe atribut tidak valid pada unordered list, hanya pada ordered list.Ordered HTML List
Ordered list dimulai dengan tag <ol>. Yang mana list item dimulai dengan tag <li>.
List item akan ditandai dengan nomor.
Ordered list :
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - Atribut
Tipe atribut dapat ditambahkan pada ordered list. Untuk menentukan model penanda :
Type
|
Description
|
type="1"
|
List item akan diberi nomor dengan angka (default)
|
type="A"
|
List item akan diberi nomor dengan angka kapital
|
type="a"
|
List item akan diberi nomor dengan angka kecil
|
type="I"
|
List item akan diberi nomor dengan angka romawi
besar
|
type="i"
|
List item akan diberi nomor dengan angka romawi
kecil
|
Numbers :
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Upper Case :
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lower Case :
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Roman Upper Case :
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Roman Lower Case :
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description List
Tag <dl> untuk mendefinisikan Description list.
Tag <dt> untuk mendefinisikan istilah (nama), tag <dd> mendefinisikan data (deskripsi).
Description list :
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested List
List dapat dijadikan bersarang (list dalam list)<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
List item dapat berisi list baru, dan elemen HTML lainya, seperti gambar dan link.Horizontal List
HTML list bisa ditata dalam berbagai cara dengan CSS.
Salah satu cara yang populer, adalah gaya list untuk menampilkan horizontal :
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
</html>
HTML Lists Tags
Tag
|
Description
|
Defines an unordered list
|
|
Defines an ordered list
|
|
Defines a list item
|
|
Defines a description list
|
|
Defines the term in a description list
|
|
Defines the description in a description list
|
Referensi :
Written by Unknown
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 komentar:
Posting Komentar