Yo'llar (path): absolyut va nisbiy

Qisqacha: Yo'l (path) — faylning papkalar daraxtidagi manzili. Absolyut yo'l ildizdan boshlanadi (/home/ali/sayt/index.html yoki C:\Users\Ali\sayt\index.html) va qayerdan qarasangiz ham bir xil ishlaydi. Nisbiy yo'l esa joriy papkadan hisoblanadi: . — shu papka, .. — bir pog'ona yuqoridagi ota papka. Veb-loyihalarda deyarli doim nisbiy yo'l va / slesh ishlatiladi.

Bu darsda

• Absolyut va nisbiy yo'lni farqlay olasiz va ikkalasini yoza olasiz.
• Joriy papka nima ekanini tushunasiz.
• ., .. va ~ belgilarini to'g'ri ishlata olasiz.
• Windows \ va veb / sleshlari farqini bilasiz.
• ENOENT va 404 xatolarining sababini topa olasiz.

Oldin bilishingiz kerak: Fayl tizimi: papkalar daraxti va fayllar, Operatsion tizim nima.

1. Nega bu kerak?

Siz birinchi saytingizni yozdingiz. Sahifaga logotip qo'ydingiz — o'z kompyuteringizda chiroyli ko'rinyapti. Do'stingizga yubordingiz yoki internetga joyladingiz — logotip o'rnida bo'sh kvadrat.

Deyarli har doim sabab bitta: rasmning yo'li noto'g'ri yozilgan. Brauzer, Node.js yoki boshqa dastur faylni topish uchun uning aniq manzilini bilishi kerak. Manzil xato bo'lsa, 404 (Not Found) yoki ENOENT: no such file or directory xatosi chiqadi.

Bu dars dasturlashdagi eng ko'p takrorlanadigan xatolardan birini oldini oladi.

2. Yo'l nima?

Yo'l (path) — faylga olib boradigan papkalar ketma-ketligi va oxirida fayl nomi. Papka nomlari maxsus belgi bilan ajratiladi: Linux va macOS'da /, Windows'da \.

Oldingi darsdagi daraxtni eslang: ildiz → home → ali → loyihalar → sayt → index.html. Shu yo'lni yozsak:

/home/ali/loyihalar/sayt/index.html

Birinchi / — ildiz. Keyingi har bir / — "shu papkaning ichiga kir" degani.

Hayotdan o'xshatish: do'stingizga kitob qayerdaligini aytyapsiz. Ikki xil aytish mumkin:

• To'liq manzil: "Toshkent, Navoiy ko'chasi, 12-uy, 14-xona, javondagi qizil kitob." Dunyoning qayerida bo'lmasin, bu manzil bitta joyni ko'rsatadi.
• Yo'nalish: "Chiqib, o'ngdagi eshikka kir, birinchi javonda." Bu faqat do'stingiz hozir qayerda turganiga bog'liq.

Fayl yo'llari ham shunday ikki xil: absolyut (to'liq manzil) va nisbiy (yo'nalish).

3. Absolyut yo'l

Absolyut yo'l (absolute path) — ildizdan boshlanadigan to'liq manzil:

• Linux: /home/ali/loyihalar/sayt/index.html
• macOS: /Users/ali/loyihalar/sayt/index.html
• Windows: C:\Users\Ali\loyihalar\sayt\index.html

Uni qanday tanish mumkin: Linux/macOS'da / bilan, Windows'da disk harfi bilan (C:\) boshlanadi.

Faylning absolyut yo'lini ko'chirib olish:

• Windows 11: faylni sichqonchaning o'ng tugmasi bilan bosing → "Copy as path" ("Yo'l sifatida nusxalash").
• macOS: Finder'da Option tugmasini bosib turib, faylni o'ng tugma bilan bosing → "Copy ... as Pathname".

Afzalligi: dastur qayerdan ishga tushsa ham, absolyut yo'l bitta aniq faylni ko'rsatadi.

Kamchiligi: u faqat shu kompyuterda to'g'ri. Loyihangizni Malikaning kompyuteriga ko'chirsangiz, u yerda C:\Users\Ali papkasi yo'q. Serverda esa C: diskining o'zi yo'q. Hamma yo'llar buziladi.

Endi siz: Malikaning Windows kompyuterida uy papkasi C:\Users\Malika. Uning loyihalar papkasidagi sayt ichida style.css bor. Uning absolyut yo'li C:\Users\Malika\...\sayt\style.css. Uch nuqta o'rnida qaysi papka turibdi? Javob:

Tekshirib ko'ring: /var/www/html/index.html — absolyut yo'lmi?

4. Joriy papka

Nisbiy yo'lni tushunish uchun avval bitta tushuncha kerak: joriy papka (current working directory, cwd) — "hozir turgan joyingiz".

• HTML fayl ichidagi yo'l uchun joriy papka — shu HTML fayl turgan papka.
• Terminalda joriy papka — terminal hozir "turgan" papka. Uni terminal oynasida ko'rasiz. Terminalni kursda alohida o'rganamiz.

O'xshatish: "o'ngdagi eshik" degan yo'nalish faqat siz qaysi xonada turganingiz ma'lum bo'lsa ishlaydi. Joriy papka — o'sha xona.

5. Nisbiy yo'l

Nisbiy yo'l (relative path) — joriy papkadan boshlab yoziladigan yo'l. Unda ikki maxsus belgi bor:

Bu darsdagi barcha misollar shu loyihada:

sayt/
├── index.html
├── css/
│   └── style.css
├── rasmlar/
│   └── logo.png
└── sahifalar/
    ├── aloqa.html
    └── narxlar/
        └── index.html

5.1 Pastga tushish: papka nomini yozamiz

sayt/index.html ichida turibmiz va logo.png kerak. rasmlar papkasi yonimizda turibdi:

rasmlar/logo.png

Buni ./rasmlar/logo.png deb ham yozish mumkin — ./ "shu papkadan boshla" degani. Ikkalasi bir xil ishlaydi.

5.2 Yuqoriga chiqish: ..

Endi css/style.css ichida turibmiz va yana logo.png kerak. Qadamma-qadam:

1. Biz css papkasidamiz. rasmlar bu yerda yo'q.
2. .. — bir pog'ona yuqoriga, sayt papkasiga chiqamiz.
3. rasmlar/ — uning ichiga kiramiz.
4. logo.png — faylni olamiz.

Natija:

../rasmlar/logo.png

5.3 Ikki pog'ona yuqoriga: ../..

sahifalar/narxlar/index.html ichidamiz, logo.png kerak:

1. .. — narxlar dan sahifalar ga chiqdik.
2. .. — sahifalar dan sayt ga chiqdik.
3. rasmlar/logo.png — kerakli faylga tushdik.

Natija: ../../rasmlar/logo.png. Har bir .. — bitta pog'ona.

graph BT
  N["narxlar/index.html (shu yerdamiz)"] -->|".."| S["sahifalar"]
  S -->|".."| T["sayt"]
  T -->|"rasmlar/"| R["rasmlar"]
  R --> L["logo.png"]

5.4 Endi o'zingiz

sahifalar/aloqa.html ichidamiz, css/style.css kerak. Nisbiy yo'l qanday? Ishora: avval bir pog'ona yuqoriga chiqing. Javob:

Maslahat: CSS fayl ichidagi yo'l CSS faylning o'zidan hisoblanadi, uni ulagan HTML'dan emas. css/style.css ichida fon rasmi uchun ../rasmlar/fon.jpg yoziladi — HTML qayerda bo'lishidan qat'i nazar.

Tekshirib ko'ring: Nega loyiha ichida nisbiy yo'l absolyut yo'ldan yaxshiroq?

6. ~ — uy papkasi

~ (tilda) belgisi — joriy foydalanuvchining uy papkasi:

• Linux'da ~ = /home/ali
• macOS'da ~ = /Users/ali
• Windows PowerShell'da ~ = C:\Users\Ali

~/loyihalar — "uy papkamdagi loyihalar". Bu yozuv qisqa va har foydalanuvchida o'z uy papkasini ko'rsatadi.

Diqqat: ~ ni terminal tushunadi. Lekin HTML sahifada yoki dastur kodida (masalan, Node.js'da fayl ochishda) ~ avtomatik uy papkasiga aylanmaydi. U yerda ~ shunchaki ~ nomli papka deb qabul qilinadi.

7. Sleshlar: / va \

• Windows tarixan teskari slesh ishlatadi: C:\loyihalar\sayt.
• Linux, macOS va internet manzillari (URL) — oddiy slesh: /home/ali/sayt, https://example.com/rasmlar/logo.png.

Qoida: HTML, CSS, JavaScript va URL'larda doim / yozing, hatto Windows'da ishlayotgan bo'lsangiz ham. Server Linux'da ishlaydi va \ ni papka ajratgich deb tushunmaydi.

Yaxshi yangilik: ko'p dasturlar (VS Code, PowerShell, Node.js) Windows'da ham / ni to'g'ri tushunadi. Shuning uchun / — xavfsiz tanlov.

Maslahat: Dastur kodida \ yana bir sabab bilan xavfli. Ko'p tillarda u maxsus belgi: masalan, \n "yangi qator" degani. "C:\new" deb yozsangiz, dastur \n ni yangi qator deb o'qiydi. Buni JavaScript darslarida ko'ramiz.

8. Saytdagi / bilan boshlanadigan yo'l

Saytlarda uchinchi turdagi yo'l ham uchraydi: /css/style.css. U / bilan boshlangani uchun absolyut ko'rinadi. Lekin bu diskning ildizi emas, saytning ildizi.

Tuzoq: index.html ni ikki marta bosib, fayl sifatida ochsangiz, brauzerda file:///C:/... manzili chiqadi. Bu holatda /css/style.css diskning ildiziga — C:\css\style.css ga qarab ketadi va topilmaydi. Shuning uchun boshlanishda oddiy nisbiy yo'llarni ishlating. Havolalarni Havola asoslari darsida, URL tuzilishini URL anatomiyasi darsida batafsil ko'ramiz.

Tekshirib ko'ring: https://example.com/blog/post.html sahifasida /rasmlar/a.png yozilgan. Brauzer qaysi manzildan rasm so'raydi?

9. Katta-kichik harf

Bu — "mening kompyuterimda ishlaydi, serverda ishlamaydi" xatolarining eng mashhur sababi:

• Windows (NTFS) va macOS (APFS) odatda katta-kichik harfni farqlamaydi. Logo.png va logo.png — bitta fayl.
• Linux farqlaydi. Logo.png, logo.png va LOGO.PNG — uchta boshqa fayl.

Ssenariy: Windows'da fayl Logo.png deb saqlangan, HTML'da esa <img src="rasmlar/logo.png"> yozilgan. Kompyuteringizda rasm ko'rinadi. Saytni Linux serverga joylaysiz — rasm yo'q, konsolda 404 (Not Found). Ko'p bepul hosting xizmatlari ham Linux'da ishlaydi.

Yechim: fayl va papka nomlarini faqat kichik harflarda yozing. Nomlash qoidalarini keyingi darsda to'liq ko'ramiz.

10. Ko'p uchraydigan xatolar

10.1 ENOENT: no such file or directory

Node.js'da (JavaScript'ni kompyuterda ishlatadigan dastur) faylni ochishda shunday xato chiqishi mumkin:

Error: ENOENT: no such file or directory, open '/home/ali/sayt/rasmlar/logo.png'

Tarjimasi: ENOENT — "Error NO ENTry", ya'ni "bunday yozuv yo'q". "Bunday fayl yoki papka mavjud emas, ochmoqchi bo'lgan: ...". E'tibor bering: siz nisbiy yo'l yozgan bo'lsangiz ham, xabar absolyut yo'lni ko'rsatadi. Dastur yo'lni joriy papkaga qo'shib hisoblagan. Shu yo'lni o'qing — xato qayerda ekanini ko'pincha darhol ko'rasiz.

Tez-tez sabablari: noto'g'ri joriy papka, harf xatosi, katta-kichik harf, ortiqcha yoki yetishmayotgan ...

10.2 Brauzerda 404 (Not Found)

Brauzerning dasturchi panelida (F12 → "Console") shunday qator chiqadi. Manzildagi 127.0.0.1:5500 — kompyuteringizda ishlayotgan sinov serveri:

GET http://127.0.0.1:5500/rasm/logo.png 404 (Not Found)

Tarjimasi: "Shu manzildagi fayl so'raldi — topilmadi". Manzilga qarang: rasm/ yozilgan, papka esa rasmlar/. Brauzer so'ragan to'liq manzilni loyihadagi haqiqiy papkalar bilan solishtiring.

10.3 HTML'da kompyuter yo'li

<!-- ❌ faqat sizning kompyuteringizda ishlaydi -->
<img src="C:\Users\Ali\loyihalar\sayt\rasmlar\logo.png">

<!-- ✅ loyiha qayerga ko'chsa ham ishlaydi -->
<img src="rasmlar/logo.png">

10.4 .. ni sanashda adashish

Yo'lni yozishdan oldin savol bering: "Men qaysi papkadaman?" Keyin kerakli faylgacha yuqoriga nechta pog'ona borligini sanang. Har pog'ona — bitta ...

11. Mashqlar

1-mashq (oson): Absolyutmi, nisbiymi?

Har bir yo'lning turini ayting:

1. C:\Windows\notepad.exe
2. ../css/style.css
3. /etc/hosts
4. rasmlar/logo.png

2-mashq (o'rta): Yo'llarni yozing

Darsdagi sayt/ tuzilmasidan foydalaning. Nisbiy yo'lni yozing:

1. index.html ichidan sahifalar/aloqa.html ga.
2. sahifalar/aloqa.html ichidan bosh sahifa index.html ga.
3. sahifalar/narxlar/index.html ichidan css/style.css ga.

Ishora: har safar avval "qaysi papkadaman?" deb so'rang.

3-mashq (qiyin): Buzilgan sahifani tuzating

Jasur sahifalar/narxlar/index.html faylida uchta qator yozdi. Uchalasi ham ishlamayapti. Sayt Linux serverda.

<link rel="stylesheet" href="../css/style.css">
<img src="..\..\rasmlar\logo.png">
<img src="../../Rasmlar/logo.png">

Har bir qatordagi xatoni toping va to'g'ri yo'lni yozing. (link — sahifaga CSS faylni ulaydigan HTML tegi, href da uning yo'li yoziladi. HTML'ni kursda keyinroq o'rganamiz.)

12. Real ishda

• HTML va CSS: har bir rasm, havola va stil fayli yo'l bilan ulanadi. Buni Havola asoslari darsida ishlatamiz.
• JavaScript modullari: import { narx } from "./hisob.js" — bu ham nisbiy yo'l. Modullarni JavaScript kursida o'rganasiz.
• Terminal: terminalda papkalar orasida yurish .. va ~ bilan bo'ladi. Buni Terminalda harakatlanish darsida mashq qilamiz.
• Serverdagi xatolar: backend xatolarining katta qismi "fayl topilmadi" — noto'g'ri joriy papka yoki katta-kichik harf. Tajribali dasturchi birinchi navbatda xato xabaridagi to'liq yo'lni o'qiydi.
• Intervyu: "Absolyut va nisbiy yo'l farqi nima? /css/a.css va css/a.css farqi-chi?"

Xulosa

• Yo'l — faylning daraxtdagi manzili: papka nomlari va oxirida fayl nomi.
• Absolyut yo'l ildizdan boshlanadi (/ yoki C:\) va faqat shu kompyuterda to'g'ri.
• Nisbiy yo'l joriy papkadan hisoblanadi: . — shu papka, .. — bir pog'ona yuqori.
• ~ — uy papkasi, lekin uni faqat terminal tushunadi.
• Veb-kodda doim / va kichik harflar. Saytda / bilan boshlangan yo'l — sayt ildizidan.
• ENOENT va 404 ko'rsangiz — xabardagi to'liq yo'lni haqiqiy papkalar bilan solishtiring.

Keyingi dars: Fayl va papka nomlash qoidalari — yo'llar buzilmasligi uchun fayllarga qanday nom berishni o'rganamiz.