HTML Lists (html liste oluşturma)*Sırasız Html Listeleri<ul>
<li>Kitap</li>
<li>Defter</li>
<li>Kalem</li>
</ul>
** Sırasız Listelerde Ögelerin Başlarına Gelen İşaretleri Değiştirebilirsiniz.
disc = içi dolu nokta,daire
<ul style="list-style-type:disc">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
circle= İçi boş daire
<ul style="list-style-type:circle">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
Square= Kare işareti
<ul style="list-style-type:Square">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
None= Nesnelerin önünde işaret yok
<ul style="list-style-type:None">
<li>Kitap</li>
<li>TDefter</li>
<li>Kalem</li>
</ul>
* Sıralı Html Liste Oluşturma<ol>
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
Öge Başlarına 1,2,3,4.... Sayı ekler
type="1" Öge Başına Sayı Eklenir
<ol type="1">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol
type="A" Öge Başlarına A,B,C,D harf ekler
<ol type="A">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
type="a" Liste Başına a,b,c,d, ...Küçük haf ekler
<ol type="a">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
type="I" Liste başlarına roma rakamı ekler
<ol type="I">
<li>Kitap</li>
<li>Dergi</li>
<li>Gazete</li>
</ol>
***Nesnelerin Altlarına Listeleme Yaparken Açıklama Girebilirsiniz<dl>
<dt>Kitap</dt>
<dd>- Matematik Ders Kitabı</dd>
<dt>Yüzük</dt>
<dd>- 925 ayar gümüş</dd>
</dl>
start="4" Listeyi oluştururken belli bir sayıdan başlamasını sağlaya bilirsiniz.(4,5,6,...)
<ol start="4">
<li>Defter</li>
<li>Kalem</li>
<li>Silgi</li>
</ol>
** CSS ile Yatay Liste Ouşturma<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FF0000;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #000000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">ANA SAYFA</a></li>
<li><a href="#news">FORUM</a></li>
<li><a href="#contact">PROGRAMLAR</a></li>
<li><a href="#about">BLOG</a></li>
</ul>
</body>
</html>
Linkback:
HTML Lists (html liste oluşturma)