Ro'yxatlar — ul, ol, li, dl, dt, dd

~10 daq · HTML · HTML Asoslari

Ro'yxat nima uchun kerak?

Kundalik hayotda ro'yxatlar hamma joyda: xarid ro'yxati, qadamlar, ta'riflar. HTML da ro'yxatlar uchun maxsus teglar bor — ular matnni tuzilmali qiladi va qidiruv tizimlari uchun ma'noli.

HTML da uch xil ro'yxat bor:

  • <ul> — tartibsiz ro'yxat (bullet points)
  • <ol> — tartibli ro'yxat (raqamlar)
  • <dl> — ta'riflar ro'yxati (atama + ta'rif)

Tartibsiz ro'yxat — <ul>

ul — unordered list. Tartib muhim bo'lmagan ro'yxatlar uchun. Har bir element oldida nuqta (•) ko'rinadi.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Brauzerda:

• HTML
• CSS
• JavaScript

<li> — list item (ro'yxat elementi). Har bir element <li> ichida bo'ladi.

Qachon <ul> ishlatish kerak?

Tartib muhim bo'lmagan hollarda:

<!-- Ingredientlar — tartib muhim emas -->
<h3>Osh uchun kerakli mahsulotlar:</h3>
<ul>
  <li>Guruch — 500g</li>
  <li>Sabzi — 2 ta</li>
  <li>Piyoz — 2 ta</li>
  <li>Go'sht — 400g</li>
  <li>O'simlik yog'i — 100ml</li>
</ul>

<!-- Navigatsiya menyusi -->
<nav>
  <ul>
    <li><a href="/">Bosh sahifa</a></li>
    <li><a href="/about">Biz haqimizda</a></li>
    <li><a href="/contact">Aloqa</a></li>
  </ul>
</nav>

Tartibli ro'yxat — <ol>

ol — ordered list. Tartib muhim bo'lgan ro'yxatlar uchun. Har bir element oldida raqam ko'rinadi.

<ol>
  <li>Suv qaynatiladi</li>
  <li>Choy solinadi</li>
  <li>3 daqiqa kutiladi</li>
  <li>Piyolaga quyiladi</li>
</ol>

Brauzerda:

1. Suv qaynatiladi
2. Choy solinadi
3. 3 daqiqa kutiladi
4. Piyolaga quyiladi

<ol> atributlari

type — raqamlash turi:

<!-- Arabcha raqamlar (standart) -->
<ol type="1">
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ol>

<!-- Katta lotin harflari -->
<ol type="A">
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ol>

<!-- Kichik lotin harflari -->
<ol type="a">
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ol>

<!-- Rim raqamlari (katta) -->
<ol type="I">
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ol>

<!-- Rim raqamlari (kichik) -->
<ol type="i">
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ol>

start — boshlanish raqami:

<!-- 5 dan boshlanadi -->
<ol start="5">
  <li>Beshinchi qadam</li>
  <li>Oltinchi qadam</li>
  <li>Yettinchi qadam</li>
</ol>

Brauzerda:

5. Beshinchi qadam
6. Oltinchi qadam
7. Yettinchi qadam

reversed — teskari tartib:

<ol reversed>
  <li>Uchinchi o'rin</li>
  <li>Ikkinchi o'rin</li>
  <li>Birinchi o'rin</li>
</ol>

Brauzerda:

3. Uchinchi o'rin
2. Ikkinchi o'rin
1. Birinchi o'rin

Qachon <ol> ishlatish kerak?

Tartib muhim bo'lgan hollarda:

<!-- Ko'rsatmalar — tartib muhim -->
<h3>Git bilan loyiha boshlash:</h3>
<ol>
  <li>GitHub da yangi repository yarating</li>
  <li><code>git clone</code> bilan yuklab oling</li>
  <li>Fayllarni tahrirlang</li>
  <li><code>git add .</code> bilan saqlang</li>
  <li><code>git commit -m "..."</code> bilan commit qiling</li>
  <li><code>git push</code> bilan yuboring</li>
</ol>

<!-- Reyting — tartib muhim -->
<h3>Top 3 dasturlash tili:</h3>
<ol>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Java</li>
</ol>

Ichma-ich ro'yxatlar — Nested lists

Ro'yxat ichida ro'yxat bo'lishi mumkin. <li> ichiga yangi <ul> yoki <ol> qo'yiladi.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Brauzerda:

• Frontend
    ◦ HTML
    ◦ CSS
    ◦ JavaScript
        ▪ React
        ▪ Vue
• Backend
    ◦ Node.js
    ◦ Python

Brauzer har bir daraja uchun boshqa belgi ishlatadi (•, ◦, ▪).

<ol> va <ul> aralash

<ol>
  <li>Loyihani rejalashtirish
    <ul>
      <li>Talablarni yig'ish</li>
      <li>Texnologiyalarni tanlash</li>
    </ul>
  </li>
  <li>Dasturlash
    <ul>
      <li>Frontend</li>
      <li>Backend</li>
    </ul>
  </li>
  <li>Test qilish</li>
  <li>Deploy qilish</li>
</ol>

Ta'riflar ro'yxati — <dl>

dl — description list. Atama va uning ta'rifi juftliklari uchun. Lug'at, glossariy, FAQ kabi.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — veb sahifalar tuzilmasini belgilaydigan til.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — veb sahifalar ko'rinishini boshqaradigan til.</dd>

  <dt>JavaScript</dt>
  <dd>Veb sahifalarga interaktivlik qo'shadigan dasturlash tili.</dd>
</dl>

Brauzerda:

HTML
    HyperText Markup Language — veb sahifalar tuzilmasini belgilaydigan til.
CSS
    Cascading Style Sheets — veb sahifalar ko'rinishini boshqaradigan til.
JavaScript
    Veb sahifalarga interaktivlik qo'shadigan dasturlash tili.
  • <dt> — description term (atama)
  • <dd> — description details (ta'rif, biroz ichkariga surilgan)

Bir atamaga bir nechta ta'rif

<dl>
  <dt>Bank</dt>
  <dd>Pul saqlash va kredit beruvchi moliya muassasasi.</dd>
  <dd>Daryoning qirg'og'i (inglizcha "bank" so'zining ikkinchi ma'nosi).</dd>
</dl>

Bir nechta atamaga bitta ta'rif

<dl>
  <dt>www</dt>
  <dt>World Wide Web</dt>
  <dd>Internet orqali bog'langan hujjatlar va resurslar tizimi.</dd>
</dl>

<dl> qachon ishlatiladi?

<!-- FAQ -->
<h2>Ko'p so'raladigan savollar</h2>
<dl>
  <dt>Kurs bepulmi?</dt>
  <dd>Ha, barcha materiallar to'liq bepul.</dd>

  <dt>Qancha vaqt kerak?</dt>
  <dd>Har bir kurs uchun taxminiy vaqt ko'rsatilgan. O'rtacha 2-4 hafta.</dd>
</dl>

<!-- Mahsulot xususiyatlari -->
<dl>
  <dt>Brend</dt>
  <dd>Apple</dd>

  <dt>Model</dt>
  <dd>MacBook Pro 14"</dd>

  <dt>Protsessor</dt>
  <dd>Apple M3 Pro</dd>
</dl>

Amaliy misol — Retsept sahifasi

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <title>Osh retsepti</title>
  </head>
  <body>

    <h1>O'zbek oshi</h1>

    <h2>Kerakli mahsulotlar</h2>
    <ul>
      <li>Guruch — 500g</li>
      <li>Sabzi — 3 ta (yirik)</li>
      <li>Piyoz — 2 ta</li>
      <li>Qo'y go'shti — 500g</li>
      <li>O'simlik yog'i — 150ml</li>
      <li>Ziravorlar:
        <ul>
          <li>Zira — 1 choy qoshiq</li>
          <li>Qalampir — tatib ko'rib</li>
          <li>Tuz — tatib ko'rib</li>
        </ul>
      </li>
    </ul>

    <h2>Tayyorlash tartibi</h2>
    <ol>
      <li>Guruchni 30 daqiqa suvda iviting</li>
      <li>Go'shtni katta bo'laklarga kesmang</li>
      <li>Qozonda yog'ni qizdiring</li>
      <li>Piyozni qo'ng'ir rangga qovuring</li>
      <li>Go'shtni soling va qovuring</li>
      <li>Sabzini soling, 10 daqiqa qovuring</li>
      <li>Suv qo'shing, qaynating</li>
      <li>Guruchni soling, tekislang</li>
      <li>Qopqoq yoping, 25 daqiqa damlab qo'ying</li>
    </ol>

    <h2>Atamalar</h2>
    <dl>
      <dt>Zirvak</dt>
      <dd>Go'sht, piyoz va sabzidan tayyorlangan oshning asosi.</dd>

      <dt>Damlab qo'yish</dt>
      <dd>Taom tayyor bo'lgandan keyin o'chiq olovda yoki issiqda ushlab turish.</dd>
    </dl>

  </body>
</html>

Xulosa

Teg Nima uchun Ko'rinishi
<ul> Tartibsiz ro'yxat • nuqtalar
<ol> Tartibli ro'yxat 1. 2. 3. raqamlar
<li> Ro'yxat elementi <ul> va <ol> ichida
<dl> Ta'riflar ro'yxati Atama + ta'rif
<dt> Atama <dl> ichida
<dd> Ta'rif <dl> ichida, ichkariga surilgan

Qachon nimani ishlatish:

  • Tartib muhim emas → <ul>
  • Tartib muhim (qadamlar, reyting) → <ol>
  • Atama + ta'rif (lug'at, FAQ) → <dl>
  • Ro'yxat ichida ro'yxat → <li> ichiga yangi <ul>/<ol>

Keyingi dars

5-dars: Havolalar — a tegi, href, target, rel, download