Ko'p sahifali sayt tuzilmasi: papkalar, toza URL va 404 sahifasi

Qisqacha: Sayt — bir-biriga nisbiy havolalar bilan bog'langan fayl va papkalar to'plami. Rasmlar, CSS va boshqa yordamchi fayllar alohida papkalarda (assets/) turadi. menyu/index.html kabi papka va index.html juftligi chiroyli manzil beradi: example.com/menyu/. 404.html esa mavjud bo'lmagan manzilga kirgan foydalanuvchini adashtirmaydi.

Bu darsda

• Saytning papka tuzilmasini oldindan rejalashtirasiz.
• index.html yordamida toza URL (/menyu/) yasaysiz.
• 404.html sahifasini yaratasiz va undagi havola tuzog'ini bilasiz.
• Umumiy navigatsiyani hamma sahifada bir xil qilasiz va joriy sahifani belgilaysiz.
• Buzilgan havolalarni avtomatik vosita bilan topasiz.

Oldin bilishingiz kerak: Sahifa ichidagi havolalar, Havola asoslari, Fayl va papka nomlash qoidalari.

1. Nega bu kerak?

Choyxona sayti o'sib bormoqda: bosh sahifa, menyu, aloqa, tadbirlar, bir nechta rasm va PDF. Hozir hammasi bitta papkada aralash yotibdi.

Yana bir oydan keyin 30 ta fayl bo'ladi. Qaysi rasm qaysi sahifaniki? Qaysi fayl eski? Bitta faylni boshqa papkaga ko'chirsangiz — o'nlab havolalar buziladi.

Uy qurishdan oldin chizma chiziladi. Sayt ham shunday: avval papka tuzilmasi, keyin sahifalar. Bu dars — shu chizma.

2. Tipik papka tuzilmasi

2.1 Choyxona sayti

Kichik va o'rta saytlar uchun keng tarqalgan tuzilma:

• choyxona/ — loyihaning ildizi
  • index.html — bosh sahifa
  • 404.html — "sahifa topilmadi"
  • menyu/
    • index.html — menyu sahifasi
  • aloqa/
    • index.html
  • tadbirlar/
    • index.html — tadbirlar ro'yxati
    • osh-bayrami.html
  • assets/ — yordamchi fayllar
    • css/ — uslub fayllari (CSS qismida)
    • js/ — JavaScript fayllari
    • images/ — rasmlar
    • files/ — PDF va yuklab olinadigan fayllar

Ikki xil fayl bor:

• Sahifalar (.html) — foydalanuvchi ochadigan manzillar.
• Resurslar (assets) — sahifalar ishlatadigan fayllar: rasmlar, CSS, JavaScript, shriftlar. Ular foydalanuvchi to'g'ridan-to'g'ri ochmaydigan fayllar.

Resurslarni assets/ papkasiga yig'ish sahifalar papkasini toza saqlaydi. Ba'zi loyihalar images/, css/, js/ ni to'g'ridan-to'g'ri ildizda saqlaydi — bu ham to'g'ri. Asosiysi — bitta tanlovga amal qilish.

Oldingi darslarda rasmlar uchun rasmlar/, PDF uchun fayllar/ papkasini ishlatgan edik. Bundan buyon ularning o'rni — assets/images/ va assets/files/.

2.2 Terminalda yaratish

Git Bash, macOS yoki Linux'da:

mkdir -p menyu aloqa tadbirlar
mkdir -p assets/css assets/js assets/images assets/files
touch index.html 404.html menyu/index.html aloqa/index.html

-p — ichma-ich papkalarni birdaniga yaratish (assets va uning ichidagi css).

Windows PowerShell'da:

mkdir menyu, aloqa, tadbirlar, assets/css, assets/js
mkdir assets/images, assets/files
New-Item index.html, 404.html, menyu/index.html, aloqa/index.html

PowerShell'da bir nechta nom vergul bilan yoziladi va ichki papkalar avtomatik yaratiladi.

Natijani tekshirish: Windows'da tree /f, macOS va Linux'da find . buyrug'i hamma fayl va papkalarni ro'yxat qilib ko'rsatadi.

2.3 Nomlash qoidalari

Fayl nomlash darsidagi qoidalar bu yerda hal qiluvchi, chunki fayl nomi — URL'ning bir qismi:

• Faqat kichik lotin harflar, raqamlar va defis: osh-bayrami.html.
• Bo'sh joy, apostrof va kirill harflarsiz: bo'lim 1.html .
• Ma'noli: IMG_20260927_1432.jpg emas, osh-tarelka.jpg.

3. Toza URL: index.html ning sehri

3.1 G'oya

Solishtiring:

• example.com/menyu.html
• example.com/menyu/

Ikkinchisi qisqaroq, chiroyliroq va ovoz chiqarib aytish osonroq. Bunday manzillar toza URL (clean URL) deyiladi.

Birinchi sahifa darsida ko'rdik: manzil papkani ko'rsatsa, server o'sha papkadagi index.html ni beradi. Toza URL aynan shunga asoslanadi: menyu.html o'rniga menyu/ papkasini yaratib, uning ichiga index.html qo'yasiz.

Havola ham papkaga qaratiladi:

<a href="menyu/">Menyu</a>

3.2 Nega bu muhim?

• Manzil texnologiyaga bog'liq emas. Ertaga saytni boshqa texnologiyaga (masalan, Next.js — kursda o'rganamiz) o'tkazsangiz, .html yo'qoladi. example.com/menyu.html ga Google'da, Telegram'da, QR-kodda tarqalgan hamma havolalar buziladi. example.com/menyu/ esa o'zgarmaydi.
• Foydalanuvchi uchun qulay. Odam manzilni eslab qoladi va qo'lda yozadi.

3.3 Ikki ogohlantirish

1. file:// da ishlamaydi. Sahifani diskdan ochsangiz, href="menyu/" bosilganda brauzer index.html ni emas, papka ichidagi fayllar ro'yxatini ko'rsatadi. Toza URL'lar serverda ishlaydi — shuning uchun Live Server bilan tekshiring. U papka uchun index.html ni xuddi haqiqiy server kabi beradi.
2. Oxiridagi / ni unutmang. menyu/ — papka. Uning ichidagi sahifadagi nisbiy yo'llar shu papkadan hisoblanadi. / siz menyu manzili ba'zi serverlarda boshqacha ishlaydi va sahifadagi rasmlar yo'qolib qolishi mumkin.

Tekshirib ko'ring: menyu/index.html sahifasidan bosh sahifadagi assets/images/osh.jpg rasmiga qanday nisbiy yo'l yoziladi?

4. 404.html — "sahifa topilmadi"

4.1 Nega kerak

Foydalanuvchi manzilni xato yozdi (example.com/menu), yoki eski havolani bosdi. Server bunday sahifani topa olmaydi va 404 status kodini qaytaradi. HTTP status kodlari darsida bu kodni ko'rgansiz.

Server odatda quruq "Not Found" yozuvini ko'rsatadi. Foydalanuvchi adashadi va saytni yopadi. O'z 404.html sahifangiz esa unga yo'l ko'rsatadi:

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Sahifa topilmadi — Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Kechirasiz, bu sahifa topilmadi</h1>
    <p>Manzil noto'g'ri yozilgan yoki sahifa ko'chirilgan
    bo'lishi mumkin.</p>
    <ul>
      <li><a href="/">Bosh sahifaga qaytish</a></li>
      <li><a href="/menyu/">Bugungi menyu</a></li>
    </ul>
  </body>
</html>

GitHub Pages va Netlify kabi xostinglar (saytni internetga joylash xizmatlari — ularni Birinchi deploy darsida ishlatamiz) ildizdagi 404.html ni avtomatik taniydi.

4.2 Nega bu yerda / bilan boshlanadigan yo'l?

Havola asoslari darsida biz nisbiy yo'llarni tanladik. 404.html — bundan istisno.

Sababi: server 404.html ning mazmunini foydalanuvchi yozgan xato manzilning o'zida ko'rsatadi. Foydalanuvchi example.com/eski/sahifa/osh ni ochdi deylik. 404 sahifasidagi nisbiy menyu/ havolasi example.com/eski/sahifa/menyu/ ga olib boradi — bu ham mavjud emas!

/menyu/ esa doim sayt ildizidan hisoblanadi va qayerda ko'rsatilishidan qat'i nazar to'g'ri ishlaydi.

Diqqat: Agar sayt kichik papkada joylashsa (masalan, GitHub Pages'da aziz.github.io/choyxona/), / — aziz.github.io ning ildizi bo'ladi, sizning saytingizniki emas. Unda 404 sahifadagi havolalarga papka nomini ham qo'shasiz: /choyxona/menyu/. Buni deploy darsida amalda ko'ramiz.

5. Umumiy navigatsiya

5.1 Har sahifada bir xil

Foydalanuvchi qaysi sahifada bo'lmasin, asosiy bo'limlarga bir bosishda o'ta olishi kerak. Shuning uchun navigatsiya har bir sahifaning tepasida bir xil turadi.

Bosh sahifadagi navigatsiya:

<ul>
  <li><a href="./">Bosh sahifa</a></li>
  <li><a href="menyu/">Menyu</a></li>
  <li><a href="tadbirlar/">Tadbirlar</a></li>
  <li><a href="aloqa/">Aloqa</a></li>
</ul>

menyu/index.html dagi navigatsiya — bir ../ qo'shilgan:

<ul>
  <li><a href="../">Bosh sahifa</a></li>
  <li><a href="./" aria-current="page">Menyu</a></li>
  <li><a href="../tadbirlar/">Tadbirlar</a></li>
  <li><a href="../aloqa/">Aloqa</a></li>
</ul>

./ — "shu papka", ya'ni shu papkaning index.html i. ../ — bir papka yuqoridagi index.html, ya'ni bosh sahifa.

5.2 Joriy sahifani belgilash

aria-current="page" — "foydalanuvchi hozir shu sahifada". Ekran o'quvchi havolani o'qiganda "joriy sahifa" deb qo'shadi. CSS esa uni boshqa rangda ko'rsatishi mumkin — foydalanuvchi qayerda turganini darhol ko'radi.

aria- bilan boshlanadigan atributlar — accessibility uchun maxsus atributlar oilasi. Ularni ARIA asoslari darsida o'rganamiz. Hozircha shu bittasini eslab qoling.

Navigatsiyaning to'liq to'g'ri tuzilmasi (nav tegi bilan) — Sahifa landmarklari darsida.

5.3 Nusxalash muammosi

Sezdingizmi: bir xil navigatsiyani har bir sahifaga qo'lda ko'chiryapmiz. Yangi bo'lim qo'shilsa — hamma sahifani tahrirlash kerak. Bittasini unutsangiz, navigatsiya har xil bo'lib qoladi.

Faqat HTML bilan bu muammoni to'liq hal qilib bo'lmaydi. Real loyihalarda uni shablonlar va freymvorklar hal qiladi: navigatsiya bir marta yoziladi va hamma sahifaga avtomatik qo'shiladi. Buni kursning keyingi qismlarida — JavaScript va React'da ko'rasiz. Hozircha kichik sayt uchun nusxalash — normal. Faqat har bir o'zgarishdan keyin hamma sahifani tekshiring.

6. Buzilgan havolalarni topish

Fayllarni ko'chirganda yoki qayta nomlaganda havolalar jimgina buziladi. Har birini qo'lda bosib chiqish — uzoq. linkinator vositasi buni avtomatik qiladi: saytni aylanib chiqadi va har bir havolani tekshiradi.

choyxona papkasida:

npx linkinator . --recurse

. — joriy papka, --recurse — sahifadan sahifaga o'tib, hammasini tekshir. Natijaning bir qismi:

  [200] tadbirlar/
  [404] menyu.html
  [404] assets/images/osh.jpg
ERROR: Detected 2 broken links. Scanned 5 links in 0.2 seconds.

[200] — havola ishlaydi, [404] — buzilgan. Oxirgi qator: "2 ta buzilgan havola topildi, 5 ta havola tekshirildi". Ro'yxatdagi har bir 404 ni tuzating va buyruqni qayta ishga tushiring. Hammasi to'g'ri bo'lsa, oxirgi qator shunday bo'ladi: ✓ Successfully scanned 5 links — "5 ta havola muvaffaqiyatli tekshirildi".

Buyruq Windows, macOS va Linux'da bir xil. Windows'da natijadagi yo'llarda / o'rniga \ ko'rinishi mumkin — bu faqat ko'rinish farqi.

7. Ko'p uchraydigan xatolar

7.1 Faylni ko'chirdingiz — havolalar buzildi

menyu.html ni menyu/index.html ga ko'chirdingiz. Endi index.html dagi href="menyu.html" 404 beradi. Ko'chirilgan sahifaning ichidagi hamma nisbiy yo'llar ham buzildi — ular endi bir papka chuqurroqdan hisoblanadi. Tuzatish: ko'chirishdan keyin ikki tomondagi havolalarni yangilang va npx linkinator bilan tekshiring.

7.2 Sahifa ichidagi rasm yo'qoldi

menyu/index.html da <img src="assets/images/osh.jpg"> — brauzer menyu/assets/images/osh.jpg ni qidiradi. Tuzatish: ../assets/images/osh.jpg.

7.3 Katta harfli yoki bo'sh joyli nomlar

Menyu/Index.html yoki osh bayrami.html — kompyuteringizda ishlaydi, serverda esa yo'q (katta-kichik harf) yoki xunuk %20 bilan (bo'sh joy). Tuzatish: hamma nomni kichik harf va defis bilan qayta nomlang — va havolalarni ham.

7.4 404.html dagi nisbiy havolalar

4.2-bo'limda ko'rdik: 404 sahifa istalgan chuqurlikdagi manzilda ko'rsatiladi. Nisbiy havolalar u yerda buziladi. Tuzatish: 404.html da / bilan boshlanadigan yo'llar.

8. Mashqlar

1-mashq (oson): Yo'lni yozing

Tuzilma 2.1-bo'limdagidek.

1. index.html dan tadbirlar/osh-bayrami.html ga:
2. tadbirlar/osh-bayrami.html dan menyu sahifasiga (toza URL):

2-mashq (o'rta): Tuzilmani loyihalang

Choyxona sayti uchun yangi bo'lim kerak: "Foto galereya" — sahifa va 10 ta rasm. Uning papka tuzilmasini yozing va galereya sahifasidan bosh sahifaga, menyuga hamda birinchi rasmga yo'llarni ko'rsating.

<a href="../">Bosh sahifa</a>
<a href="../menyu/">Menyu</a>
<img src="../assets/images/galereya/01-zal.jpg" alt="Choyxona zali">

3-mashq (qiyin): Choyxona saytini qayta tuzing

1. 2.1-bo'limdagi tuzilmani yarating (terminalda). Mavjud sahifalarni tegishli papkalarga index.html nomi bilan ko'chiring.
2. Hamma sahifalarga bir xil navigatsiya qo'shing, joriy sahifani aria-current="page" bilan belgilang.
3. 404.html yarating — / bilan boshlanadigan havolalar bilan.
4. Live Server'da tekshiring: http://127.0.0.1:5500/menyu/ ochilishi kerak. Mavjud bo'lmagan manzilni ham oching.
5. npx linkinator . --recurse — buzilgan havola qolmasin.

mkdir -p menyu aloqa assets/images assets/files
mv menyu.html menyu/index.html
mv aloqa.html aloqa/index.html
mv rasmlar/* assets/images/
mv fayllar/* assets/files/

9. Real ishda

• Statik sayt generatorlari (Astro, Eleventy, Hugo — kursda ba'zilari bilan tanishamiz) aynan shu tuzilmani avtomatik yaratadi: har bir sahifa — papka va index.html. Siz qo'lda qilgan ish ularning asosi.
• SEO va migratsiya. Saytni yangi tuzilmaga o'tkazishda eski manzillar yangisiga yo'naltiriladi — aks holda Google'dagi hamma o'rinlar yo'qoladi. Toza URL bunday muammolarni kamaytiradi.
• CI'da havola tekshiruvi. Katta loyihalarda linkinator kabi vositalar har bir o'zgarishda avtomatik ishga tushadi va buzilgan havola bo'lsa ogohlantiradi.
• 404 sahifalari brend tajribasining qismi. Ko'p kompaniyalar 404 sahifasini hazil va foydali havolalar bilan bezaydi — foydalanuvchi ketib qolmasin.

Xulosa

• Sahifalar va resurslarni ajrating: rasmlar, CSS, JS — assets/ ichida; nomlar kichik harf va defis bilan.
• Toza URL: menyu/index.html → example.com/menyu/; havola href="menyu/"; Live Server bilan tekshiring.
• Papkaga ko'chirilgan sahifada hamma nisbiy yo'llar bitta ../ ga uzayadi.
• 404.html ildizda turadi va unda / bilan boshlanadigan yo'llar ishlatiladi.
• Navigatsiya har sahifada bir xil; joriy sahifa — aria-current="page".
• npx linkinator . --recurse buzilgan havolalarni avtomatik topadi.

Keyingi dars: Rasm qo'yish: img asoslari — sahifaga rasm qo'shish, alt matni va nega rasmga o'lcham berish kerak.

Manbalar

• MDN: "Dealing with files", "What is a URL?" — developer.mozilla.org
• GitHub Docs: "Creating a custom 404 page for your GitHub Pages site" — docs.github.com
• linkinator — npmjs.com/package/linkinator