HTML havolalar: a tegi, href va nisbiy yo'llar

Qisqacha: Havola — bosilganda boshqa sahifaga olib boradigan element: <a href="menyu.html">Menyu</a>. href ga boshqa saytning to'liq manzili (absolyut URL) yoki o'z saytingizdagi faylga yo'l (nisbiy yo'l) yoziladi. Havola matni qayerga olib borishini aytishi kerak — "bu yerni bosing" emas, "Menyuni ko'rish".

Bu darsda

• a va href bilan havola yarata olasiz.
• Absolyut URL va nisbiy yo'l farqini tushuntirasiz.
• ./, ../ va / bilan boshlanadigan yo'llarni to'g'ri yozasiz.
• Havolaga ma'noli matn tanlaysiz.
• Yo'l bilan bog'liq eng ko'p uchraydigan xatolarni topasiz.

Oldin bilishingiz kerak: div va span, Yo'llar (path): absolyut va nisbiy, URL anatomiyasi.

1. Nega bu kerak?

HTML nima darsida HTML nomini tahlil qilgan edik: "HyperText" — bosilsa boshqa matnga o'tadigan matn. Havola — vebning yuragi. Havolasiz sayt — bir-biridan uzilgan yolg'iz sahifalar.

Choyxona saytida endi bir nechta sahifa bor: index.html, menyu.html, aloqa.html, tadbirlar.html. Hozircha ular orasida o'tishning yagona yo'li — manzil qatoriga qo'lda yozish. Bu darsda ularni bir-biriga bog'laymiz.

2. a va href

Havola a tegi bilan yoziladi (anchor — "langar"). Qayerga olib borishi href atributida (hypertext reference — "gipermatn havolasi"):

<p><a href="menyu.html">Menyuni ko'rish</a></p>

Brauzerda "Menyuni ko'rish" yozuvi ko'k rangda va tagiga chizilgan chiqadi. Uni bossangiz, menyu.html ochiladi. Bir marta ochilgan sahifaning havolasi binafsha rangga o'zgaradi — "bu yerda bo'lgansiz" degani. Bu ranglar brauzerning standart uslubi, CSS bilan o'zgartiriladi.

Teg, element va atribut darsida a ni atribut misoli sifatida ko'rgan edik. Endi href ga nima yozish mumkinligini batafsil ko'ramiz.

3. Absolyut URL — boshqa saytga

Boshqa saytga havola uchun to'liq manzil yoziladi — URL anatomiyasi darsidagi hamma qismlari bilan:

<p>Bizning Telegram kanal:
<a href="https://t.me/sizning_kanal">t.me/sizning_kanal</a></p>
<p>Dasturlashni <a href="https://ilmhamroh.uz">IlmHamroh</a>'da
o'rganing.</p>

Bu absolyut URL: u sxema (https://) bilan boshlanadi va qaysi sahifadan bosilishidan qat'i nazar, doim bir joyga olib boradi.

Diqqat: Boshqa saytga havolada https:// ni tushirib qoldirmang. href="ilmhamroh.uz" yozsangiz, brauzer buni sizning saytingizdagi ilmhamroh.uz degan fayl deb tushunadi va example.com/ilmhamroh.uz manzilini ochishga urinadi. Natija — "sahifa topilmadi".

4. Nisbiy yo'l — o'z saytingiz ichida

4.1 Joriy papkadan hisoblash

O'z saytingizdagi sahifalar uchun to'liq manzil yozish shart emas. Nisbiy yo'l — joriy sahifa turgan papkadan boshlab hisoblanadigan yo'l.

Yo'llar darsida terminalda cd .. va ./fayl bilan ishlagan edik. HTML'da mantiq aynan shunday. Faqat "joriy papka" — havola yozilgan HTML fayl turgan papka.

Choyxona saytining tuzilmasi:

• choyxona/
  • index.html
  • menyu.html
  • aloqa.html
  • rasmlar/
    • osh.jpg
  • tadbirlar/
    • osh-bayrami.html

4.2 Yo'l turlari

../ — "bir papka yuqoriga chiq". Ichki papkadagi sahifadan bosh sahifaga qaytish uchun:

<!-- tadbirlar/osh-bayrami.html ichida -->
<a href="../index.html">Bosh sahifaga qaytish</a>
<a href="../menyu.html">Menyu</a>

4.3 Brauzer yo'lni qanday hisoblaydi

Sayt internetda https://example.com manzilida deylik. Foydalanuvchi https://example.com/tadbirlar/osh-bayrami.html sahifasida. Shu sahifadagi havolalar qayerga olib boradi:

Birinchi qatorga e'tibor bering. menyu.html tadbirlar/ papkasida qidirildi — u yerda esa bunday fayl yo'q. Ichki papkadagi sahifalarda bu eng ko'p uchraydigan xato.

4.4 / bilan boshlanadigan yo'l

/menyu.html — sayt ildizidan boshlanadigan yo'l. Qaysi papkada bo'lmang, u doim saytning bosh papkasidagi menyu.html ga olib boradi. Katta saytlarda juda qulay.

Lekin ikkita tuzoq bor:

1. file:// bilan ochganda. Sahifani ikki marta bosib ochsangiz, "ildiz" — sayt papkasi emas, butun disk. /menyu.html → file:///C:/menyu.html — bunday fayl yo'q.
2. Sayt kichik papkada joylashsa. Masalan, GitHub Pages'da saytingiz https://aziz.github.io/choyxona/ da bo'lishi mumkin. /menyu.html esa https://aziz.github.io/menyu.html ga olib boradi — choyxona/ papkasini "tashlab" ketadi.

Shuning uchun HTML qismida biz nisbiy yo'llar (menyu.html, ../menyu.html) bilan ishlaymiz. Ular Live Server'da ham, diskdan ochganda ham, internetda ham bir xil ishlaydi.

Tekshirib ko'ring: tadbirlar/osh-bayrami.html sahifasidan rasmlar/osh.jpg ga qanday nisbiy yo'l yoziladi?

Bo'sh joyni to'ldiring: bir papka yuqoriga chiqish uchun yo'l boshiga nima yoziladi?

5. Havola matni — eng muhim detal

5.1 "Bu yerni bosing" — yomon

<p>Menyuni ko'rish uchun
<a href="menyu.html">bu yerni bosing</a>.</p>

Ekranda tushunarli. Lekin:

• Ekran o'quvchi foydalanuvchilari ko'pincha sahifadagi barcha havolalar ro'yxatini ochib ko'radi. Ro'yxatda: "bu yerni bosing", "bu yerni bosing", "batafsil" — qaysi biri qayerga olib borishini bilib bo'lmaydi.
• Google havola matnidan sahifa nima haqida ekanini bilib oladi. "Bu yerni bosing" unga hech narsa demaydi.
• Ko'z yugurtirib o'qiydigan odam faqat havolalarga qaraydi. "Bu yerni" — hech narsa aytmaydi.

5.2 Ma'noli matn — yaxshi

<p><a href="menyu.html">Bugungi menyuni ko'rish</a></p>
<p>Yetkazib berish shartlari —
<a href="aloqa.html">aloqa sahifasida</a>.</p>

Qoida: havola matnini alohida o'qiganda ham qayerga olib borishi tushunarli bo'lsin.

Uzun URL'ni havola matni qilmang — uni o'qish qiyin. Qisqa, tanish manzil (t.me/sizning_kanal) esa matn sifatida yaxshi: foydalanuvchi uni eslab qolishi mumkin.

6. Havola ichida nima bo'lishi mumkin

Havola ichida faqat matn emas, rasm yoki butun blok ham bo'lishi mumkin. Masalan, taom kartochkasi bosilsa, taom sahifasi ochilsin:

<a href="taomlar/osh.html">
  <h3>Toshkent oshi</h3>
  <p>Qozonda damlangan, bedana tuxumi bilan.</p>
</a>

Zamonaviy HTML bunga ruxsat beradi. Butun kartochka bitta katta bosiladigan hudud bo'ladi.

Faqat bitta cheklov: havola ichida boshqa havola yoki tugma bo'lmaydi. Bu haqda Tugma yoki havola darsida gaplashamiz.

href siz a ham mumkin: <a>Menyu</a>. U havola emas, balki "bu yerda havola bo'lishi mumkin edi" degan joy. Masalan, sayt menyusida foydalanuvchi turgan sahifaning nomi. Uni bosib bo'lmaydi va klaviatura bilan unga o'tib bo'lmaydi.

7. Hujumchi nigohi

Havola matni va haqiqiy manzil — ikki xil narsa. Hujumchilar aynan shundan foydalanadi:

<a href="https://c1ick-uz.example.com/login">https://click.uz</a>

Ekranda foydalanuvchi https://click.uz ni ko'radi va ishonadi. Bosganda esa c1ick-uz.example.com — soxta sayt ochiladi (l o'rniga 1). U yerda karta ma'lumotlari so'raladi. Ish joyini tayyorlash darsida ko'rgan fishing aynan shunday ishlaydi.

Sizning saytingiz qanday himoyalanadi va siz qanday himoyalanasiz:

• Foydalanuvchi sifatida: havolani bosishdan oldin sichqonchani ustiga olib boring. Brauzer oynasining pastki chap burchagida haqiqiy manzil chiqadi.
• Dasturchi sifatida: havola matni sifatida URL yozsangiz, u href bilan aynan bir xil bo'lsin. Foydalanuvchilar yozgan havolalarni saytingizda ko'rsatayotganda esa ularning haqiqiy manzilini yashirmang.

href ga yana bir xavfli narsa yozilishi mumkin — javascript: bilan boshlanadigan kod. Foydalanuvchi kiritgan manzilni tekshirmasdan href ga qo'ysangiz, hujumchi o'z kodini ishga tushirishi mumkin. Bu hujum turini HTML darajasidagi xavfsizlik darsida batafsil ko'ramiz.

8. Ko'p uchraydigan xatolar

8.1 https:// siz tashqi havola

3-bo'limda ko'rdik: href="t.me/sizning_kanal" nisbiy yo'lga aylanadi. Tuzatish: boshqa saytga havola doim https:// bilan.

8.2 Katta-kichik harf

Kompyuteringizda href="Menyu.html" ishlaydi, fayl esa menyu.html. Saytni internetga chiqardingiz — havola "sahifa topilmadi" beradi.

Sabab: Windows va macOS fayl nomida katta-kichik harfni odatda farqlamaydi. Serverlardagi Linux esa farqlaydi (Fayl ruxsatlari darsida ko'rgansiz). Tuzatish: fayl nomlari va havolalarni doim kichik harflarda yozing (Fayl nomlash qoidalari).

8.3 Teskari qiya chiziq

<a href="tadbirlar\osh-bayrami.html">Osh bayrami</a>

Windows yo'llarida \ ishlatiladi. Veb manzillarda esa faqat /. Ba'zi brauzerlar \ ni kechiradi, serverlar va boshqa brauzerlar esa yo'q. Tuzatish: HTML'da doim /.

8.4 Ichki papkadan havola

tadbirlar/osh-bayrami.html ichida href="menyu.html" — brauzer tadbirlar/menyu.html ni qidiradi. Tuzatish: ../menyu.html. Har bir havolani yozganda o'zingizga savol bering: "Bu fayl qaysi papkada va men qaysi papkadan yozyapman?"

9. Mashqlar

1-mashq (oson): Qayerga olib boradi?

Sahifa: https://example.com/tadbirlar/choy-kechasi.html. Havolalar qaysi manzilga olib boradi?

1. href="osh-bayrami.html" — https://example.com/ dan keyingi qism:
2. href="../aloqa.html" — https://example.com/ dan keyingi qism:

2-mashq (o'rta): Havolalarni tuzating

Bu kod tadbirlar/osh-bayrami.html faylida turibdi. Beshta xatoni toping:

<a href="index.html">Bosh sahifa</a>
<a href="Menyu.html">bu yerni bosing</a>
<a href="t.me/sizning_kanal">Telegram</a>
<a href="..\aloqa.html">Aloqa</a>

<a href="../index.html">Bosh sahifa</a>
<a href="../menyu.html">Menyuni ko'rish</a>
<a href="https://t.me/sizning_kanal">Telegram kanalimiz</a>
<a href="../aloqa.html">Aloqa</a>

3-mashq (qiyin): Choyxona sayti navigatsiyasi

1. choyxona ichida tadbirlar/ papkasini yarating va tadbirlar.html ni unga osh-bayrami.html nomi bilan ko'chiring.
2. Har bir sahifaning boshiga (sarlavhadan oldin) bir xil navigatsiya qo'shing: Bosh sahifa, Menyu, Aloqa, Osh bayrami. Ichki papkadagi sahifada yo'llar to'g'ri bo'lsin.
3. Hamma havolalarni Live Server'da va faylni ikki marta bosib ochib tekshiring.

<p>
  <a href="index.html">Bosh sahifa</a> |
  <a href="menyu.html">Menyu</a> |
  <a href="aloqa.html">Aloqa</a> |
  <a href="tadbirlar/osh-bayrami.html">Osh bayrami</a>
</p>

<p>
  <a href="../index.html">Bosh sahifa</a> |
  <a href="../menyu.html">Menyu</a> |
  <a href="../aloqa.html">Aloqa</a> |
  <a href="osh-bayrami.html">Osh bayrami</a>
</p>

10. Real ishda

• Har bir sayt havolalardan iborat: menyu, pastki qism, maqola ichidagi havolalar. Havolasiz sahifa Google uchun "boshi berk ko'cha" — robot boshqa sahifalarni topa olmaydi.
• SEO. Havola matni — Google sahifani tushunishining asosiy manbalaridan biri. Marketologlar "anchor text" (havola matni) haqida doim so'raydi.
• Accessibility tekshiruvlari "bu yerni bosing" kabi havolalarni birinchi topadi. Lighthouse "Links do not have descriptive text" ("Havolalar ma'noli matnga ega emas") deb ogohlantiradi.
• Freymvorklarda (React, Next.js — kursda alohida o'rganamiz) havolalar maxsus komponentlar orqali yoziladi, lekin ichida baribir <a href> turadi.

Xulosa

• Havola: <a href="manzil">matn</a>; href siz a — shunchaki joy egallovchi.
• Absolyut URL (https://...) — boshqa saytga; https:// siz yozilsa, nisbiy yo'lga aylanadi.
• Nisbiy yo'l joriy fayl papkasidan hisoblanadi: fayl.html, papka/fayl.html, ../fayl.html.
• / bilan boshlanadigan yo'l — sayt ildizidan; file:// va kichik papkadagi saytlarda buziladi.
• Havola matni o'zi alohida ma'noli bo'lsin: "Menyuni ko'rish", "bu yerni bosing" emas.
• Fayl nomlari va yo'llar — kichik harfda, faqat / bilan.

Keyingi dars: Sahifa ichidagi havolalar: fragment va langar — id va # bilan sahifaning aniq bir bo'limiga havola qilish.

Manbalar

• MDN: <a>: The Anchor element, "Creating hyperlinks" — developer.mozilla.org
• WebAIM: "Links and Hypertext" — webaim.org