Bu dərsimizdə HTML siyahılar haqqında bir neçə nümunəyə baxacağıq. Microsoft Office Word dərslərində iştirak edənlər siyahılar haqqında məlumatları olur. HTML siyahilərinin də Word yazı redaktorunda olan siyahılara oxşarlığı olacaq.

Sıra saysız HTML siyahısı
Sırasayı olmayan siyahi (ul) etiketi ilə başlanır. Siyahı hər bir elementi (li) etiketi ilə başlanır.
Siyahının elementləri sabit olaraq işarələrlə (kiçik qara dairələr) qeyd olunacaq

<!-- siyahı başladı -->
<ul>
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ul>  
<!-- siyahı bitdi-->

Nümunəyə buradan baxaq: Sıra saysız HTML siyahısı

CSS "list-style-type" xassəsindən istifadə edərək siyahılarımıza müxtəlif forma verək.
CSS "list-style-type" xassəsin dəyəri dayirə "disc".

 <!-- siyahı başladı -->
<ul style="list-style-type:disc">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ul>  
<!-- siyahı bitdi-->

CSS "list-style-type" xassəsin dəyəri çevrə "circle".

 <!-- siyahı başladı -->
<ul style="list-style-type:circle">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ul>  
<!-- siyahı bitdi-->

CSS "list-style-type" xassəsin dəyəri kvadrat "square".

 <!-- siyahı başladı -->
<ul style="list-style-type:square">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ul>  
<!-- siyahı bitdi-->

CSS "list-style-type" xassəsin dəyəri Yoxdur "none".

 <!-- siyahı başladı -->
<ul style="list-style-type:none">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ul>  
<!-- siyahı bitdi-->

Nümunəyə buradan baxaq: CSS "list-style-type" xassəsin dəyərləri

Sıra saylı HTML siyahısı
Sıra saylı siyahı (ol) etiketi ilə başlanır. Hər bir siyahı elementi (li) etiketi ilə başlanır.
Siyahıdakı maddələr sabit halda nömrələr ilə qeyd olunacaq:

 <!-- siyahı başladı -->
<ol>
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ol>  
<!-- siyahı bitdi-->

CSS "type" xassəsin dəyəri "1".

 <!-- siyahı başladı -->
<ol type="1">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ol> 
<!-- siyahı bitdi-->

CSS "type" xassəsin dəyəri "A".

 <!-- siyahı başladı -->
<ol type="A">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ol>   
<!-- siyahı bitdi-->

CSS "list-style-type" xassəsin dəyəri Latın rəqəmləri "I".

 <!-- siyahı başladı -->
<ol type="I">
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>"NewServer" Hosting Domen qeydiyyatı</li>
</ol>  
<!-- siyahı bitdi-->

Nümunəyə buradan baxaq: Sıra saylı HTML siyahısı və CSS "type" xassəsin dəyərləri

HTML də təsviri siyahıları dəstəkləyir.
Təsvir siyahısı hər terminin təsviri ilə şərtlərin siyahısıdır.
(dl) etiketi təsviri siyahısını müəyyən edir, (dt) etiketi termini (adını) müəyyən edir və (dd) etiketi hər bir terminini təsvir edir:

 <!-- siyahı başladı -->
<dl>
  <dt>"ZƏKA" Kompüter Təlimi</dt>
  <dd>- <a href="https://edu.zaka.biz/">edu.zaka.biz</a></dd>
  <dt>"ZƏKA" Veb Sayt Hazırlanması</dt>
  <dd>- <a href="https://wds.zaka.biz/">wds.zaka.biz</a></dd>
  <dt>"NewServer" Hosting Domen qeydiyyatı</dt>
  <dd>- <a href="https://www.newserver.biz/">www.NewServer.biz</a></dd>
</dl><!-- siyahı bitdi-->

Nümunəyə buradan baxaq: HTML siyahıların təsviri

Siyahı daxili HTML siyahıları

<!-- siyahı başladı -->
<ul>
  <li>"ZƏKA" Kompüter Təlimi</li>
  <li>"ZƏKA" Veb Sayt Hazırlanması</li>
  <li>NewServer
    <ul>
      <li>Domen qeydiyyatı</li>
      <li>Hosting Planları</li>
    </ul>
  </li>
</ul>
<!-- siyahı başladı -->

Nümunəyə buradan baxaq: HTML siyahıların təsviri

Horizontal Siyahı
HTML siyahıları CSS ilə bir çox müxtəlif şəkildə tərtib edilə bilər.
Bir menyu yaratmaq üçün üfüqi bir siyahı tərtib etmək:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #288feb;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #1687e9;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Əsas</a></li>
  <li><a href="#news">Xəbər</a></li>
  <li><a href="#contact">Əlaqə</a></li>
  <li><a href="#about">Haqqında</a></li>
</ul>

</body>
</html>

Nümunəyə buradan baxaq: HTML menyu