Havolalar — a tegi, href, target, rel, download

~15 daq · HTML · HTML Asoslari

Havola nima?

Internet — o'zaro bog'langan sahifalar to'plami. Bir sahifadan ikkinchisiga o'tish uchun havola (link) ishlatiladi. HTML da havola <a> tegi bilan yaratiladi.

<a> — anchor (langar) so'zidan keladi. Xuddi kemaning langari kabi — bir joyni boshqa joyga bog'laydi.

Foydalanuvchi havolani bosadi
         ↓
Brauzer href qiymatini o'qiydi
         ↓
Yangi sahifaga o'tadi

Asosiy sintaksis

<a href="manzil">Ko'rinadigan matn</a>

href — Hypertext Reference — qayerga o'tish kerak
Matn — foydalanuvchi ko'radigan va bosadigan narsa

Oddiy misol

<a href="https://google.com">Google ga o'tish</a>

Brauzerda shunday ko'rinadi:

Google ga o'tish

`href` turlari

href ga turli xil qiymatlar beriladi. Har biri boshqacha ishlaydi.

1. Tashqi havola — to'liq URL

Boshqa saytga o'tish uchun to'liq manzil yoziladi:

<a href="https://github.com">GitHub</a>
<a href="https://youtube.com">YouTube</a>
<a href="https://t.me/firdavs2407">Telegram</a>

https:// yozishni unutmang. Yozmasa brauzer uni o'z saytingizning papkasi deb tushunadi.

<!-- Xato — github.com ni o'z saytingizda qidiradi -->
<a href="github.com">GitHub</a>

<!-- To'g'ri -->
<a href="https://github.com">GitHub</a>

2. Ichki havola — o'z sahifalaringiz

Bir xil sayt ichidagi sahifalarga o'tish:

<!-- Fayl tuzilishi:
  index.html
  about.html
  contact.html
  pages/
    blog.html
-->

<a href="about.html">Biz haqimizda</a>
<a href="contact.html">Aloqa</a>
<a href="pages/blog.html">Blog</a>

Bosh sahifaga qaytish uchun:

<a href="index.html">Bosh sahifa</a>
<!-- yoki -->
<a href="/">Bosh sahifa</a>

3. Sahifa ichidagi havola — `#id`

Bir sahifaning ichida ma'lum qismga sakrash:

<!-- Manzil — ID bilan belgilanadi -->
<h2 id="kirish">Kirish</h2>
<h2 id="asoslar">Asoslar</h2>
<h2 id="xulosa">Xulosa</h2>

<!-- Havolalar -->
<a href="#kirish">Kirishga o'tish</a>
<a href="#asoslar">Asoslarga o'tish</a>
<a href="#xulosa">Xulosaga o'tish</a>

Sahifa yuqorisiga qaytish uchun:

<a href="#">Yuqoriga</a>

4. Email havola

Bosganida email dasturi ochiladi:

<a href="mailto:info@example.com">Email yuborish</a>

<!-- Mavzu bilan -->
<a href="mailto:info@example.com?subject=Salom">Email yuborish</a>

5. Telefon havola

Mobil qurilmada bosganida qo'ng'iroq qiladi:

<a href="tel:+998901234567">+998 90 123 45 67</a>

`target` — Qayerda ochilsin?

Havola bosilganda yangi sahifa qayerda ochilishini target bilan belgilaymiz.

Qiymat	Nima qiladi
`_self`	Shu oynada ochadi (standart)
`_blank`	Yangi tab yoki oynada ochadi
`_parent`	Ota freymda ochadi (kamdan-kam ishlatiladi)
`_top`	To'liq oynada ochadi (kamdan-kam)

Amalda

<!-- Shu oynada ochadi (standart xulq) -->
<a href="about.html">Biz haqimizda</a>
<a href="about.html" target="_self">Biz haqimizda</a>

<!-- Yangi tabda ochadi -->
<a href="https://github.com" target="_blank">GitHub</a>

💡 Qoida: Tashqi saytlarga havolalar odatda target="_blank" bilan yoziladi — foydalanuvchi sizning saytingizdan chiqib ketmaydi.

`rel` — Munosabat

target="_blank" ishlatilganda xavfsizlik muammosi bor. Yangi tabda ochilgan sahifa window.opener orqali sizning sahifangizga ta'sir qila oladi.

Buning oldini olish uchun rel atributi ishlatiladi:

<!-- Xavfli — opener muammosi bor -->
<a href="https://example.com" target="_blank">Havola</a>

<!-- Xavfsiz — to'g'ri yozish -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Havola
</a>

`rel` qiymatlari

Qiymat	Nima qiladi
`noopener`	Yangi tab sizning sahifangizga kira olmaydi
`noreferrer`	Qaysi saytdan kelganingiz yangi saytga aytilmaydi
`nofollow`	Qidiruv tizimlariga "bu havolani kuzatma" deydi
`external`	Bu tashqi havola ekanligini bildiradi (semantik)

⚠️ Qoida: target="_blank" ishlatilganda har doim rel="noopener noreferrer" qo'shing. Bu xavfsizlik standarti.

`download` — Fayl yuklab olish

Havola bosilganda sahifaga o'tish o'rniga fayl yuklab olinadi:

<!-- Faylni yuklab olish -->
<a href="resume.pdf" download>CV ni yuklab olish</a>

<!-- Yuklab olingan faylga nom berish -->
<a href="resume.pdf" download="Firdavs_CV.pdf">CV ni yuklab olish</a>

Rasm, PDF, ZIP — istalgan fayl uchun ishlaydi:

<a href="images/logo.png" download="logo.png">Logoni yuklab olish</a>
<a href="files/data.zip" download>Arxivni yuklab olish</a>

⚠️ download faqat bir xil domen fayllar uchun ishlaydi. Boshqa saytdagi faylni download bilan yuklab bo'lmaydi — brauzer xavfsizlik sababli ruxsat bermaydi.

Havola ichida rasm

Havola faqat matn emas — ichiga rasm ham qo'yish mumkin:

<a href="https://github.com">
  <img src="github-logo.png" alt="GitHub" width="32" height="32" />
</a>

Rasm bosilganda GitHub ga o'tadi.

Amaliy misol — Navigatsiya

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

    <!-- Navigatsiya -->
    <nav>
      <a href="index.html">Bosh sahifa</a>
      <a href="about.html">Biz haqimizda</a>
      <a href="blog.html">Blog</a>
      <a href="contact.html">Aloqa</a>
    </nav>

    <!-- Kontent -->
    <main>
      <h1 id="top">Xush kelibsiz!</h1>

      <p>
        Batafsil ma'lumot uchun
        <a href="about.html">biz haqimizda</a>
        sahifasini o'qing.
      </p>

      <p>
        Savollaringiz bo'lsa
        <a href="mailto:info@example.com">email yuboring</a>
        yoki
        <a href="tel:+998901234567">qo'ng'iroq qiling</a>.
      </p>

      <p>
        Loyihamiz
        <a href="https://github.com/example" target="_blank" rel="noopener noreferrer">
          GitHub da ochiq
        </a>.
      </p>

      <p>
        <a href="files/prezentatsiya.pdf" download>
          Prezentatsiyani yuklab olish (PDF)
        </a>
      </p>
    </main>

    <!-- Yuqoriga qaytish -->
    <a href="#top">↑ Yuqoriga</a>

  </body>
</html>

Tez-tez uchraydigan xatolar

1. `https://` unutish

<!-- Xato — o'z saytingizda "github.com" papkasini qidiradi -->
<a href="github.com">GitHub</a>

<!-- To'g'ri -->
<a href="https://github.com">GitHub</a>

2. `target="_blank"` da `rel` unutish

<!-- Xavfli -->
<a href="https://example.com" target="_blank">Havola</a>

<!-- Xavfsiz -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Havola</a>

3. Bo'sh `href`

<!-- Yomon — sahifa yuqoriga sakraydi -->
<a href="#">Bosing</a>

<!-- Yaxshiroq — JavaScript bilan ishlash uchun -->
<a href="#" onclick="doSomething(); return false;">Bosing</a>

<!-- Eng yaxshi — button ishlatish -->
<button onclick="doSomething()">Bosing</button>

4. Havola matnini noaniq yozish

<!-- Yomon — nima haqida? -->
<a href="about.html">Bu yerga bosing</a>
<a href="about.html">O'qish</a>

<!-- Yaxshi — aniq va tushunarli -->
<a href="about.html">Kompaniya haqida batafsil</a>

💡 Accessibility qoidasi: Havola matni o'z-o'zidan tushunarli bo'lishi kerak. Ko'zi ojiz foydalanuvchilar screen reader ishlatadi — u faqat havola matnini o'qiydi, atrofidagi matnni emas.

Xulosa

Atribut	Nima qiladi	Misol
`href`	Manzil	`href="https://google.com"`
`target`	Qayerda ochilsin	`target="_blank"`
`rel`	Munosabat va xavfsizlik	`rel="noopener noreferrer"`
`download`	Faylni yuklab olish	`download="fayl.pdf"`

Keyingi dars

6-dars: Rasmlar — img tegi, src, alt, width, height, loading