Kasblar

CSS

Bo'limlar

Lists

List so'zi ro'yxat deb tarjima qilsak bo'ladi. Bu darsda Html da ro'yxatlar haqida gaplashamiz. Darslar davomida listlar deb ishlatib ketamiz.

HTML ro'yxatlar bir biriga aloqador bo'lgan ma'lumotlarni guruxlash uchun ishlatiladi.

Namuna

Coffee
Tea
Milk

Coffee
Tea
Milk

<!DOCTYPE html>
<html>
<body>
<h1>Html List lar</h1>
<h2>Tartiblanmagan ro'yxat</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>Tartiblangan ro'yxat</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

List Turlari

Html da listlar (ro'yxatlar) 2ta turga bo'linadi.

Unordered List (tartiblanmagan ro'yxat) - <ul> tartiblanmagan ro'yxat elementi.
Ordered List (tartiblangan ro'yxat) - <ol> tartiblangan ro'yxat elementi.

<li>

Xohlagan ro'yxatni malumotini ko'rsatish uchun <li> elementidan foydalanamiz.

<li> elementi List Item so'zidan olingan bo'lib ro'yxat elementi deb tarjima qilsa bo'ladi. Ro'yxatning har bir elementi <li> tagidan boshlanadi. Ya'ni ro'yxatda ko'rsatmoqchi bo'lgan malumotlar <li> tagi da bo'lishi kerak.

Unordered List

HTML da <ul> tegi tartibga solinmagan (sanalmagan) ro'yxatni ko'rsatish uchun ishlatiladi.

Ro'yxatning har bir elementi <li> tegidan boshlanadi.

Namuna

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Natija

Coffee
Tea
Milk

Namunada tartiblanmagan ro'yxat ko'rsatilgan. Unda 3ta element bor (Coffe,Tea,Milk) va ularning barchasi <li> element ichida. Natijada 3ta <li> elementi yozilgan.

Namunada ro'yxat elementlari o'qlar bilan belgilanadi (kichik qora doiralar). Bu ro'yxat elementlari markeri turini o'zgartirish mumkin.

List element markerini o'zgartirish

Ro'yxat elementlari markerini CSS ning list-style-type xususiyati orqali o'zgartirish mumkin. U quyidagi qiymatlardan biriga ega bo'lishi mumkin.

disc	Ro‘yxat elementlarini kichik qora doiralar bilan belgilanadi. Bu default holat qiymati dir.
circle	Ro'yxat elementlarini aylana bilan belgilaydi.
square	Ro‘yxat elementlarini to'rt burchak bilan belgilaydi.
none	Ro'yxat elementlarida hech qanday belgilanish bo'lmaydi.

Namuna

 <ul style="list-style-type:disc;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul> 

   <ul style="list-style-type:circle;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul> 

  <ul style="list-style-type:square;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>  

  <ul style="list-style-type:none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

Ordered List

Ordered List so'zini saralangan yoki tartiblangan ro'yxat deb tarjima qilsak bo'ladi.

HTML <ol> tegi saralangan ro'yxatlar uchun ishlatiladi. Saralangan ro'yxat raqamli yoki alifbo tartibida bo'lishi mumkin.

Ro'yxatning har bir elementi <li> tegidan boshlanadi.

Namuna

<ol>
	<li>Coffee</li>
   	<li>Choy</li>
  	<li>Sut</li>
  	<li>Kampo't</li>
  	<li>Gazli suv</li> 
</ol>

Natija

Coffee
Choy
Sut
Kampo't
Gazli suv

Tartiblangan List markerini o'zgartirish

Tartiblangan ro'yxat elementlarini markerini o'zgartirish chun <ol> tagining type atributidan foydalaning.

type atributi quyidagi qiymatlarni qabul qiladi.

Turi	Tarif
type="1"	Ro'yxatdagi elementlar raqamlar bilan belgilanadi (markerlanadi). Bu default qiymatr dir.
type="A"	Ro'yxat katta harflar bilan markerlanadi.
type="a"	Ro'yxat kichik harflar bilan belgilanadi
type="I"	Ro'yxat katta RIM raqamlari bilan belgilandi
type="i"	Ro'yxat kichik RIM raqamlari bilan belgilandi

Namuna

<ol type="1">
   <li>Coffee</li>
   <li>Choy</li>
   <li>Sut</li>
</ol>

<ol type="A">
  <li>Coffee</li>
  <li>Choy</li>
  <li>Sut</li>
</ol>

<ol type="a">
  <li>Coffee</li>
  <li>Choy</li>
  <li>Sut</li>
</ol>

<ol type="I">
  <li>Coffee</li>
  <li>Choy</li>
 <li>Sut</li>
</ol>

<ol type="i">
  <li>Coffee</li>
  <li>Choy</li>
  <li>Sut</li>
</ol>

Ro'yxat tartibini o'zgartirish

Odatda tartiblangan ro'yxat 1dan boshlab hisoblashni boshlaydi . Agar siz boshlang'ich raqamni o'zgartirmoqchi bo'lsangiz start atributidan foydalaning.

Bunda start atributiga ro'yxat nechi sondan boshlanishi kerak ekanligni yozing.

Namuna

<ol start="25">
   <li>Coffee</li>
   <li>Choy</li>
   <li>Sut</li>
</ol>

Natija

Coffee
Choy
Sut

Nested HTML Lists

Nested so'zi ichki deb tarjima qilsak bo'ladi.

Nested List so'zi ichma ich joylashgan ro'yxat deb tushinib olsak bo'ladi. Ya'ni list (ro'yxat) ichidagi list (ro'yxat).

Namuna

<ul>
   <li>Coffee</li>
   <li>Choy
      <ul>
        <li>Qora choy</li>
      	<li>Ko'k choy</li>
      </ul>
  </li>
  <li>Sut</li>
  <li>
    Kampo't
    <ul>
      <li>Olam Kampo'ti</li>
      <li>Shaftoli kampo'ti</li>
      <li>O'rik kampo'ti</li>
    </ul>
  </li>
  <li>Gazli suv</li> 
</ul>

Eslatma ichma ish listlarda xohlagan turdagi listlarni ishlatish mumkin.

Masalan namunada tartiblanmagan <ul> ro'yxat ichida boshqa bir tartiblanmagan <ul> ro'yxat ishlatildi.

Ammo siz o'zingiz tartiblanmagan <ul> ro'yxat ichida boshqa bir tartiblangan <ol> ro'yxat ni yozib natijasini ko'rishingiz mumkin.

Namuna aralash ichma ich ro'yxat.

<ol type="1">
   <li>Coffee</li>
   <li>Choy
      <ul>
        <li>Qora choy</li>
      	<li>Ko'k choy</li>
        <li>Limo'n choy</li>
        <li>Kipitoq</li>
      </ul>
  </li>
  <li>Sut</li>
  <li>
    Kampo't
    <ol type="i">
      <li>Olam Kampo'ti</li>
      <li>Shaftoli kampo'ti</li>
      <li>O'rik kampo'ti</li>
    </ol>
  </li>
  <li>Gazli suv</li> 
</ol>

Natija

Coffee
Choy
- Qora choy
- Ko'k choy
- Limo'n choy
- Kipitoq
Sut
Kampo't
1. Olam Kampo'ti
2. Shaftoli kampo'ti
3. O'rik kampo'ti
Gazli suv

HTML List Taglari

Tag	Tarif
<ul>	Tartiblanmagan listni ifodalaydi.
<ol>	Tartiblangan listni ifodalaydi.
<li>	Listning qiymatini ifodalaydi (ro'yxat elementlarini ifodalaydi).