Di atas adalah contoh list yang akan kita pelajari. List digunakan seperti halnya bullet and numbering pada word bedanya list pada HTML bisa di desain sedemikian rupa sehingga menarik. Bahkan menu navigasi pada web saya di atas itu menggunakan list. Atau programmer web nyebutnya navbar tapi asalnya sama saja dari list yg kemudia di desain dengan CSS. tag list adalah <li></li> digunakan sebagai deklarasi list. untuk style penomorannya berbeda-beda ada <ul> ada <ol> Penasaran? Check it out!
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items will be marked with bullets (small black circles) by default
Intinya adalah undordered list adalah tag <li> sebagai deklarasi penomorannya (defaultya adalah bullet alias titik) yang berada dalam tag <ul>
bisa didesain dengan fungsi atribut style "list-style-type"
| disc | Sets the list item marker to a bullet (default) bentuk titik hitam |
|
| circle | Sets the list item marker to a circle bentuk lingkaran putih |
|
| square | Sets the list item marker to a square bentuk kotak |
|
| none | The list items will not be marked tidak ada simbol |
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be marked with numbers by default
adalah penomoran yang menggunakan tag <li> di dalam tag <ol>
untuk tag <ol> stylenya menggunakan atribut type="" langsung tanpa perlu tag style=""
| type="1" | The list items will be numbered with numbers (default) menampilkan penomoran menggunakan angka | |||||||||
| type="A" | The list items will be numbered with uppercase letters menampilkan penomoran menggunakan huruf besar  |
|||||||||
| type="a" | The list items will be numbered with lowercase letters menampilkan penomoran menggunakan huruf kecil  |
|||||||||
| type="I" | The list items will be numbered with uppercase roman numbers menampilkan penomoran dengan angka romawi besar |
|||||||||
| type="i" | The list items will be numbered with lowercase roman numbers menampilkan penomoran dengan angka romawi kecil  |
HTML Description Lists
HTML also supports description lists.A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term
menampilkan list dengan keterangan sebelumnya. menggunakan tag <dl> untuk deklarasi listnya lalu tag <dt> keterangannya dan tag <dd> untuk isi listnya
Nested HTML Lists
List can be nested (lists inside lists) alias list bersarang atau list di dalam list jadi listnya bertumpuk
Horizontal Lists
HTML lists can be styled in many different ways with CSS.One popular way is to style a list horizontally, to create a menu
membuat list menjadi horizontal alias mendatar dengan style CSS
list seperti inilah yang biasa digunakan programmew web untuk membuat menu navigasi atau istilah kerennya navbar. Hanya tinggal ditambahi style CSS saja kan
Sekarang kita coba kodingnya di file index.html dan membuat stylenya di style.css
body {
background-color:lightblue;
}
p {
color:red;
padding:10px;
}
pre{
font-family:verdana;
margin:20px;
}
address{
font-size:70px;
border: 1px solid red;
}
blockquote{
text-align:right;
}
img{
width:50px;
height:100px;
}
bdo{
}
a:link {
color:green;
background-color:transparent;
text-decoration:none;
}
a:visited{
color:pink;
background-color:transparent;
text-decoration:none;
}
a:hover{
color:red;
background-color:transparent;
text-decoration:none;
}
a.active{
color:yellow;
background-color:transparent;
text-decoration:none;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color: black;
}
li{
float:left;
}
li a{
display:block;
color:yellow;
text-align:center;
padding: 16px;
text-decoration:none;
}
li a:hover{
background-color:green;
}
background-color:lightblue;
}
p {
color:red;
padding:10px;
}
pre{
font-family:verdana;
margin:20px;
}
address{
font-size:70px;
border: 1px solid red;
}
blockquote{
text-align:right;
}
img{
width:50px;
height:100px;
}
bdo{
}
a:link {
color:green;
background-color:transparent;
text-decoration:none;
}
a:visited{
color:pink;
background-color:transparent;
text-decoration:none;
}
a:hover{
color:red;
background-color:transparent;
text-decoration:none;
}
a.active{
color:yellow;
background-color:transparent;
text-decoration:none;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color: black;
}
li{
float:left;
}
li a{
display:block;
color:yellow;
text-align:center;
padding: 16px;
text-decoration:none;
}
li a:hover{
background-color:green;
}
Di atas adalah koding file css nya
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="lain.html">Halaman Lain</a></li>
</ul>
<p>ini <abbr>contohnya</abbr>
untuk paragraf
spasi enter tidak terdeteksi</p>
<br />
<pre>ini <cite>contoh</cite>
untuk paragrafnya
mendeteksi paragraf</pre>
<address>contoh
<bdo dir="rtl">paragraf terbalik</bdo>
sama <q>seperti</q> <pre></address>
<blockquote>tulisan ini
nantinya menjorok
kedalam</blockquote>
<img src="c.jpg" />
<a href="lain.html">ini linknya</a>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="lain.html">Halaman Lain</a></li>
</ul>
<p>ini <abbr>contohnya</abbr>
untuk paragraf
spasi enter tidak terdeteksi</p>
<br />
<pre>ini <cite>contoh</cite>
untuk paragrafnya
mendeteksi paragraf</pre>
<address>contoh
<bdo dir="rtl">paragraf terbalik</bdo>
sama <q>seperti</q> <pre></address>
<blockquote>tulisan ini
nantinya menjorok
kedalam</blockquote>
<img src="c.jpg" />
<a href="lain.html">ini linknya</a>
</body>
</html>
Di atas adalah koding untuk file index.html. Sekarang kita coba run di browser
untuk style list yang lain silahkan langsung di coba di w3school
Tidak ada komentar:
Posting Komentar