2.4-dars — Ro'yxatlar: ul, ol, li

Darsda 5 ta bo'lim bor. Ularni tartib bilan o'rganing.

<ul> tegi (unordered list — «tartibsiz ro'yxat» so'zidan) belgili ro'yxat yaratadi. U elementlar tartibi muhim bo'lmagan hollarda ishlatiladi. Ro'yxatning har bir elementi <li> (list item) tegiga o'raladi. Brauzer har bir element oldiga belgi (nuqta-doiracha) qo'shadi.

Tasavvur qiling, xarid ro'yxati yozayapsiz. Undagi mahsulotlar tartibi muhim emas — non sutdan oldin yoki keyin sotib olinishi mumkin. Bu <ul> uchun ideal holat. Boshqa misollar: mahsulot xususiyatlari ro'yxati, navigatsiya menyusi bandlari, kompaniya afzalliklari ro'yxati, portfoliodagi texnologiyalar ro'yxati, retsept ingredientlari ro'yxati.

<ul>ning tuzilishi juda oddiy: ochuvchi <ul>, ichida — bir nechta <li>, yopuvchi </ul>. <ul> ichiga <li>dan boshqa hech narsa qo'yib bo'lmaydi (deyarli hech narsa — ichma-ichlik uchun yana bitta <ul> qo'yish mumkin, lekin bu haqda keyinroq).

<h2>Nima sotib olish kerak:</h2>
<ul>
    <li>Non</li>
    <li>Sut</li>
    <li>Tuxum (2 o'nlik)</li>
    <li>Sariyog'</li>
    <li>Pishloq</li>
    <li>Pomidor</li>
</ul>

Bu misolda biz 6 ta elementdan iborat xarid ro'yxatini yaratdik. Brauzer ularni chapdan nuqta-belgilar va kichik chekinish bilan ko'rsatadi. Har bir element alohida qatorda bo'ladi. Elementlarni joyini almashtirsangiz, ma'no o'zgarmaydi — <ul>da tartib haqiqatan ham «muhim emas».

<li> ichiga nima qo'yish mumkin? Deyarli har qanday teg: matn, <a>, <strong>, <em>, <img>, boshqa ro'yxatlar. Faqat — <li> ichiga ro'yxat tuzilmasini buzadigan blok elementlarni qo'ymang (garchi texnik jihatdan bu mumkin bo'lsa-da, buni qilmagan ma'qul).

<h2>Bizning xizmatlarimiz</h2>
<ul>
    <li><strong>Veb-dasturlash</strong> — istalgan murakkablikdagi saytlarni yaratish</li>
    <li><strong>Mobil ilovalar</strong> — iOS va Android</li>
    <li><a href="/seo">SEO-siljitish</a> — qidiruv tizimlarida topga chiqarish</li>
    <li><strong>Dizayn</strong> — biznesingiz uchun <em>o'ziga xos</em> dizayn</li>
</ul>

Bu misolda biz xizmat nomlari uchun <strong>, urg'u uchun <em> va havola uchun <a> ishlatdik. Bularning barchasi <li> ichida. E'tibor bering, <ul> — bu <li> kabi blok elementdir. Har bir ro'yxat bandi butun mavjud kenglikni egallaydi va yangi qatordan boshlanadi.

<ul>dagi belgilarni CSS orqali o'zgartirish mumkin (list-style-type xususiyati). Standart bo'yicha bu disc (bo'yalgan doiracha). Boshqa qiymatlar: circle (bo'sh doiracha), square (kvadrat), none (belgisiz). Lekin biz hozircha CSS'ni o'rganmayapmiz — bu darsda faqat HTML bilan ishlaymiz.

<ol> tegi (ordered list — «tartiblangan ro'yxat» so'zidan) raqamlangan ro'yxat yaratadi. Har bir element avtomatik ravishda raqam oladi: 1, 2, 3 va hokazo. Elementlar tartibi ahamiyatga ega bo'lganda <ol>dan foydalaning.

Ishlatish misollari: bosqichma-bosqich ko'rsatma («1-qadam, 2-qadam, 3-qadam»), reyting («top-10 film»), retsept («avval aralashtiring, keyin qo'shing»), dars jadvali («1-dars, 2-dars, 3-dars»), ustuvorlik yoki ketma-ketlikka ega istalgan ro'yxat.

<ol>ning tuzilishi <ul>nikiga o'xshash: <ol> konteyneri va ichida <li>. Hammasi bir xil, faqat belgilar — nuqta emas, raqamlar.

<h2>Pelmenni qanday pishirish kerak:</h2>
<ol>
    <li>Qozonga suv soling va qaynatib oling.</li>
    <li>Tuz va lavr bargini qo'shing.</li>
    <li>Pelmenni solib, ehtiyotlik bilan aralashtiring.</li>
    <li>Suv yuzasiga chiqqandan keyin 5-7 daqiqa qaynating.</li>
    <li>Suvini to'kib, sariyog' qo'shing.</li>
    <li>Qaymoq bilan issiq holda tortiq qiling.</li>
</ol>

Bu misolda tartib juda muhim. Avval pelmen solib, keyin suvni qaynatib bo'lmaydi. Pelmen pishmasdan turib suvini to'kib bo'lmaydi. Shuning uchun biz <ul> emas, <ol> ishlatamiz. Brauzer qadamlarni raqamlaydi: 1, 2, 3, 4, 5, 6. Agar ikkinchi va uchinchi qadam orasiga yangi qadam qo'shsangiz, brauzer hammasini avtomatik qayta raqamlaydi.

<ol>ning foydali atributlari bor. Eng mashhuri — type, u raqamlash turini belgilaydi: type="1" — oddiy raqamlar (standart), type="A" — katta harflar (A, B, C), type="a" — kichik harflar (a, b, c), type="I" — katta rim raqamlari (I, II, III), type="i" — kichik rim raqamlari (i, ii, iii). Yana start — qaysi raqamdan boshlash, va reversed — teskari tartib (kattadan kichikkaga) atributlari bor.

<h3>Rim raqamlari (katta):</h3>
<ol type="I">
    <li>Birinchi band</li>
    <li>Ikkinchi band</li>
    <li>Uchinchi band</li>
</ol>

<h3>5 dan boshlaymiz:</h3>
<ol start="5">
    <li>Beshinchi band</li>
    <li>Oltinchi band</li>
    <li>Yettinchi band</li>
</ol>

<h3>Teskari tartib:</h3>
<ol reversed>
    <li>Uchinchi (3 bo'ladi)</li>
    <li>Ikkinchi (2 bo'ladi)</li>
    <li>Birinchi (1 bo'ladi)</li>
</ol>

<h3>Harflar (kichik):</h3>
<ol type="a">
    <li>a bandi</li>
    <li>b bandi</li>
    <li>c bandi</li>
</ol>

start atributi bitta ro'yxatni bir necha qismga bo'lganingizda foydali. Masalan, birinchi sahifada sizda 1-3 bandlar, ikkinchisida — 4-6. start="4" raqamlashni davom ettiradi. reversed atributi — bul (mantiqiy) atribut, qiymat talab qilmaydi. Shunchaki ochuvchi teg ichiga reversed deb yozing.

Muhim: <ol> ichida ham, <ul> ichida ham faqat <li> (va ichma-ich ro'yxatlar) ruxsat etiladi. <ol> ichiga boshqa hech narsa qo'ymang. Agar ro'yxat sarlavhasi kerak bo'lsa — uni <ol>dan oldin yoki birinchi <li> ichiga joylashtiring.

<li> tegi (list item) — bu ro'yxat elementi. U ham <ul>da, ham <ol>da ishlatiladi. <li>siz ro'yxatlarning ma'nosi yo'q — bu ro'yxat «suyaklari»dagi «go'sht»dir. Har bir <li> ro'yxatda belgi yoki raqam bilan alohida qatorga aylanadi.

<li> haqida nimalarni bilish muhim? Birinchidan, bu qator-blok elementi. U blok kabi harakat qiladi (butun kenglikni egallaydi, qatorni ko'chiradi), lekin ichida boshqa blok elementlarni ham saqlashi mumkin. Ikkinchidan, <li>da (faqat <ol> uchun) value atributi bor, u aniq bir elementning raqamini qayta belgilash imkonini beradi.

<ol>
    <li>1-band</li>
    <li>2-band</li>
    <li value="10">10-band (sakrab o'tdik)</li>
    <li>11-band (10 dan davom etadi)</li>
    <li>12-band</li>
</ol>

E'tibor bering: value="10"dan keyin raqamlash 11, 12... deb davom etadi. value atributi faqat joriy elementning raqamini o'zgartiradi — keyingi barcha elementlar shundan hisoblanadi. Bu katta ro'yxatdan tanlangan bandlarni ko'rsatish yoki bir necha raqamni o'tkazib yuborish kerak bo'lganda qulay.

<li> ichiga istalgan teglarni joylashtirish mumkin: sarlavhalar (<h1>–<h6>), abzatslar (<p>), tasvirlar (<img>), havolalar (<a>), boshqa ro'yxatlar. <li> — HTML'dagi eng moslashuvchan teglardan biri. Lekin unutmang: <li> faqat <ul> yoki <ol> ichida joylashishi kerak. <li>ni yolg'iz o'zi ishlatmang — bu semantikani buzadi.

Yana bir xususiyat: HTML5'da yopuvchi </li> tegini, agar keyingi element ham <li> bo'lsa, tashlab yuborish mumkin. Lekin biz doim yopuvchi tegni ko'rsatishni qat'iy tavsiya qilamiz. Yopiq teglarga ega kod osonroq o'qiladi, xatolarni topish qulayroq bo'ladi va u o'zgarishlar paytida hech qachon buzilmaydi. </li> yozishga erinmang.

Ichma-ich ro'yxatlar — bu ro'yxat ichidagi ro'yxat. Siz bir <ul> yoki <ol>ni boshqa ro'yxatning <li>si ichiga joylashtirasiz. Bu ierarxik tuzilma yaratadi: bo'limlar va kichik bo'limlar, kategoriyalar va kichik kategoriyalar, ochiluvchi bandlarga ega menyular.

Qoida oddiy: ichma-ich ro'yxat har doim ota ro'yxatning <li>si ichida joylashadi. <li>lar orasida emas, balki ichida. Sxematik ko'rinishi: <ul> → <li> → <ul> → <li> → </li> → </ul> → </li> → </ul>.

<h2>Bizning menyumiz</h2>
<ul>
    <li>Issiq taomlar
        <ul>
            <li>Bo'rsh</li>
            <li>Solyanka</li>
            <li>Baliq sho'rvasi</li>
        </ul>
    </li>
    <li>Salatlar
        <ul>
            <li>Sezar</li>
            <li>Grek salati</li>
            <li>Olivye</li>
        </ul>
    </li>
    <li>Ichimliklar
        <ul>
            <li>Choy</li>
            <li>Kofe</li>
            <li>Sharbat</li>
        </ul>
    </li>
</ul>

Bu misolda bizda menyuning uchta asosiy kategoriyasi bor. Har birining ichida — kichik kategoriyalar. Brauzer ichma-ich ro'yxatlarni chapdan chekinish va boshqa turdagi belgi bilan ko'rsatadi (bo'yalgan doiracha o'rniga — bo'sh doiracha, uchinchi daraja uchun esa — kvadrat). Bu ichma-ich <ul>lar uchun brauzerning avtomatik xatti-harakati.

<ol>ni <ul> ichiga va aksincha joylashtirish mumkin. Masalan, sizda raqamlangan ko'rsatma bo'lishi mumkin, unda har bir qadam ichida — tafsilotlarning belgili ro'yxati:

<ol>
    <li>Tayyorgarlik
        <ul>
            <li>Qo'lingizni yuving</li>
            <li>Muzlatgichdan mahsulotlarni oling</li>
            <li>Duxovkani yoqing</li>
        </ul>
    </li>
    <li>Pishirish
        <ul>
            <li>Sabzavotlarni to'g'rang</li>
            <li>Piyozni oltin rangga qovuring</li>
            <li>Ziravorlar qo'shing</li>
        </ul>
    </li>
    <li>Tortiq qilish
        <ul>
            <li>Tarelkalarga joylang</li>
            <li>Ko'katlar bilan bezang</li>
        </ul>
    </li>
</ol>

Bu yerda biz bosqichma-bosqich retsept yaratdik (ol — qadamlar tartibi muhim). Har bir qadam ichida — tafsilotlar (ul — tartib muhim emas). E'tibor bering: ichma-ich <ul> <li> ichida joylashgan, undan keyin emas. Bu HTML'ning to'g'ri ishlashi uchun juda muhim.

Ichma-ichlik chuqurligi istalgancha bo'lishi mumkin: ro'yxat ichida ro'yxat ichida ro'yxat. Lekin haddan tashqari berilib ketmang — 3-4 darajadan chuqurroq bo'lsa, o'qish qiyinlashadi. Agar sizga ko'proq daraja kerak bo'lsa, ehtimol, ma'lumot tuzilmasini qayta ko'rib chiqish kerakdir.

Esda tuting: ichma-ich ro'yxatlarda yopuvchi teglar ayniqsa muhim. Bitta o'tkazib yuborilgan </li> yoki </ul> butun tuzilmani buzishi mumkin. Har bir ochuvchi tegning mos yopuvchi tegi borligini qo'lda tekshirishni tavsiya qilamiz. Yaxshi amaliyot — ichma-ichlikni vizual ko'rsatish uchun chekinishlardan (bo'shliqlar yoki tabulyatsiya) foydalanish.

Endi bilimlarimizni amaliyotda qo'llaymiz. Sizda ikkita topshiriq bo'ladi. Birinchisi — oddiy (xarid ro'yxati), ikkinchisi — biroz murakkabroq (ichma-ich bandlarga ega sayt menyusi).

1-topshiriq. Xarid ro'yxati (faqat ul)

Do'konga borish uchun xarid ro'yxatini yarating. Unga kamida 8 ta band kiriting, ularni kategoriyalarga ajrating. Ichma-ich ro'yxatlardan foydalaning. Kategoriyalar: «Sut mahsulotlari», «Sabzavot va mevalar», «Bakaleya», «Go'sht mahsulotlari».

<h1>Xarid ro'yxati</h1>
<ul>
    <li>Sut mahsulotlari
        <ul>
            <li>Sut 3.2%</li>
            <li>Tvorog 5%</li>
            <li>Qaymoq 15%</li>
            <li>«Gauda» pishlog'i</li>
        </ul>
    </li>
    <li>Sabzavot va mevalar
        <ul>
            <li>Kartoshka (2 kg)</li>
            <li>Sabzi (1 kg)</li>
            <li>Piyoz (1 kg)</li>
            <li>Olma (1 kg)</li>
        </ul>
    </li>
    <li>Bakaleya
        <ul>
            <li>«Spagetti» makaron</li>
            <li>Yumaloq donli guruch</li>
            <li>Kungaboqar yog'i</li>
        </ul>
    </li>
    <li>Go'sht mahsulotlari
        <ul>
            <li>Tovuq filesi (500 g)</li>
            <li>Mol go'shti qiymasi (400 g)</li>
        </ul>
    </li>
</ul>

E'tibor bering: kategoriyalar (Sut mahsulotlari, Sabzavot va mevalar va h.k.) — bular yuqori darajadagi <li>lar. Har bir shunday <li> ichida — aniq mahsulotlarga ega o'zining <ul>i. Kategoriya matni to'g'ridan-to'g'ri <li> ichida joylashgan (ichma-ich <ul>dan oldin).

2-topshiriq. Sayt menyusi (aralash ro'yxatlar)

Elektronika internet-do'koni uchun menyu tuzilmasini yarating. Kategoriyalar uchun <ul>, kategoriya ichidagi mashhur mahsulotlar reytingi uchun <ol> ishlating.

<h1>«Elektron» internet-do'koni</h1>
<h2>Mahsulotlar katalogi</h2>
<ul>
    <li>Noutbuklar
        <ol>
            <li>Dell XPS 13</li>
            <li>MacBook Air M3</li>
            <li>Lenovo ThinkPad X1</li>
        </ol>
    </li>
    <li>Smartfonlar
        <ol>
            <li>iPhone 16 Pro</li>
            <li>Samsung Galaxy S25</li>
            <li>Google Pixel 10</li>
        </ol>
    </li>
    <li>Quloqchinlar
        <ol>
            <li>Sony WH-1000XM6</li>
            <li>AirPods Pro 3</li>
            <li>Bose QC Ultra</li>
        </ol>
    </li>
</ul>

Bu misolda mahsulot kategoriyalari — <ul> (kategoriyalar tartibi muhim emas). Har bir kategoriya ichida esa — mashhur mahsulotlar reytingi (<ol>), unda tartib muhim (birinchi o'rin — eng mashhur). Bunday ul + ol kombinatsiyasi haqiqiy internet-do'konlarda tez-tez uchraydi.

Ikkala topshiriqni birlashtirib ko'ring: chapda — kategoriyalar menyusi (2-topshiriq), o'ngda — tanlangan kategoriya uchun xarid ro'yxati (1-topshiriq) bo'lgan sahifa yasang. Ularni bir-biridan keyin, har birini o'z <section>ida yoki shunchaki ketma-ket joylashtiring.

Istalgan misolni HTML fayliga nusxalab, brauzerda oching va ro'yxatlar qanday ko'rinishini kuzating. Elementlarni qo'shib-o'chirib ko'ring, ul'ni ol'ga almashtiring, ro'yxatlarni ichma-ich joylashtiring — eksperiment qiling! Qanchalik ko'p mashq qilsangiz, ro'yxatlarni shunchalik tez o'zlashtirasiz.

Tabriklayman! Siz 2.4-darsni yakunladingiz. Endi siz belgili va raqamlangan ro'yxatlar yaratishni, ol atributlaridan foydalanishni, ro'yxatlarni bir-birining ichiga joylashtirishni bilasiz. Keyingi darsda biz havolalar va tasvirlarni o'rganamiz.