# HTML havolalar (a) va rasm (img)

> HTML'da a va img elementlarini to'g'ri ishlating: href, mutlaq va nisbiy manzil, target, rel, src, alt, width, height va lazy loading asoslari.

Manba: https://learncode.uz/html-css/havola-rasm/
Sana: 2026-05-17

Vebning asosiy kuchi sahifalarning bir-biri bilan bog'langanidadir. Oldingi
darslarda [matnni](https://learncode.uz/html-css/matn-formatlash) belgilagan edingiz; endi
sahifani tashqi dunyoga ulaymiz. Havola foydalanuvchini boshqa sahifa yoki
sahifaning ma'lum qismiga olib boradi, rasm esa mazmunni tezroq tushunishga
yordam beradi. Bu darsda `<a>` va
`<img>` elementlarini faqat ishlaydigan emas, tushunarli va accessible tarzda
yozishni o'rganamiz.

Bu dars yakunida siz:

- `<a>` elementi bilan turli manzillarga havola yaratasiz;
- mutlaq, nisbiy va sahifa ichidagi manzillarni farqlaysiz;
- yangi yorliqda ochiladigan havolani xavfsiz yozasiz;
- `<img>` uchun `src`, `alt`, `width` va `height` atributlarini tanlaysiz;
- mazmunli va dekorativ rasm uchun to'g'ri `alt` yozasiz.

## Havola qanday yaratiladi?

Havola `<a>` (*anchor*) elementi bilan yoziladi. `href` atributi bosilganda
qayerga o'tishni belgilaydi:

```html
<a href="https://learncode.uz">LearnCode saytiga o'tish</a>
```

Bu kodda:

- `a` — havola elementining nomi;
- `href` — manzil atributi;
- `https://learncode.uz` — havolaning manzili;
- `LearnCode saytiga o'tish` — foydalanuvchi bosadigan matn.

Havola matni maqsadni o'zi tushuntirishi kerak. `Bu yerga bosing` o'rniga
`HTML darslarini ko'rish` kabi aniq matn ishlating. Bu usul sahifani tez
ko'zdan kechirayotgan va ekran o'quvchi ishlatayotgan foydalanuvchilarga
yordam beradi.

## Mutlaq va nisbiy manzillar

Havola manzili bir necha usulda yoziladi.

### Mutlaq manzil

Protokol va domen bilan yozilgan to'liq URL boshqa saytga havola qilishda
ishlatiladi:

```html
<a href="https://developer.mozilla.org/">MDN hujjatlarini ochish</a>
```

### Sayt ildiziga nisbiy manzil

`/` bilan boshlangan manzil shu sayt domenining ildizidan hisoblanadi:

```html
<a href="/html-css/royxatlar">HTML ro'yxatlar darsi</a>
```

Bu havola domen qanday bo'lishidan qat'i nazar, sayt ichidagi bir xil yo'lga
olib boradi.

### Joriy faylga nisbiy manzil

`about.html` yoki `images/logo.png` kabi manzil joriy hujjat joylashgan
papkadan hisoblanadi:

```html
<a href="about.html">Biz haqimizda</a>
```

Papka tuzilishi o'zgarsa, bunday havolaning yo'li ham yangilanishi mumkin.

### Sahifa ichidagi manzil

`#` belgisi va elementning `id` qiymati orqali shu sahifaning kerakli qismiga
o'tish mumkin:

```html
<a href="#aloqa">Aloqa bo'limiga o'tish</a>

<h2 id="aloqa">Aloqa</h2>
```

`href="#aloqa"` va `id="aloqa"` qiymatlari aynan bir xil bo'lishi kerak.

## Havolani yangi yorliqda ochish

Tashqi manbani yangi yorliqda ochish uchun `target="_blank"` ishlatiladi:

```html
<a
  href="https://developer.mozilla.org/"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN hujjatlari
</a>
```

`rel="noopener"` yangi sahifaning boshlang'ich sahifani JavaScript orqali
boshqarishiga yo'l qo'ymaydi. `noreferrer` esa o'tish manbasi haqidagi
ma'lumotni yubormaydi. Zamonaviy brauzerlar `_blank` uchun himoya qo'llasa
ham, bu qiymatlarni aniq yozish niyatni tushunarli qiladi.

> **Har havolani yangi yorliqda ochmang**
>
> Sayt ichidagi oddiy navigatsiyada foydalanuvchining odatiy brauzer
> boshqaruvini saqlang. `_blank` faqat yangi kontekst haqiqatan foydali bo'lgan
> holatda ishlatiladi. Havola yangi yorliq ochishini matnda yoki interfeysda
> bildirish ham yaxshi amaliyotdir.

## Rasm qanday qo'shiladi?

Rasm `<img>` elementi va `src` atributi bilan qo'shiladi. `<img>` kontentni
ichiga olmaydigan **void element**, shuning uchun unga yopilish tegi kerak emas.

```html
<img
  src="/images/html-css/tog-koli-namuna.webp"
  alt="Tog'lar orasidagi moviy ko'l va qirg'oqdagi yashil daraxt"
  width="1200"
  height="800"
>
```

- `src` rasm faylining manzilini beradi;
- `alt` rasm mazmunini matn bilan ifodalaydi;
- `width` rasmning tabiiy kengligini;
- `height` rasmning tabiiy balandligini bildiradi.

Kenglik va balandlikni oldindan ko'rsatish brauzerga rasm yuklanmasidan avval
qancha joy ajratishni aytadi. Natijada sahifadagi matn rasm paydo bo'lganda
keskin sakramaydi.

## `alt` matni qanday yoziladi?

`alt` — `alternative text`, ya'ni rasmning matnli muqobili. U rasm
yuklanmaganda ko'rinadi va ekran o'quvchi tomonidan o'qilishi mumkin.

Yaxshi `alt` rasmning ayni sahifadagi vazifasini qisqa ifodalaydi:

```html
<!-- Mazmunli rasm -->
<img src="xarita.png" alt="Toshkentdan Samarqandgacha poyezd yo'nalishi">

<!-- Dekorativ bezak -->
<img src="bezak.svg" alt="">
```

Dekorativ rasm yangi ma'lumot bermasa, `alt=""` ishlatiladi. Shunda ekran
o'quvchi uni o'tkazib yuboradi. `alt` atributini butunlay tashlab ketish esa
dekorativ rasmni belgilash bilan bir xil emas.

> **Alt ichida 'rasm' deb boshlash shart emas**
>
> Ekran o'quvchi element rasm ekanini allaqachon bildiradi. `Tog' rasmi` o'rniga
> `Tog'lar orasidagi moviy ko'l` kabi foydali mazmun yozing. Rasm yonidagi matn
> uning mazmunini to'liq tushuntirsa, takrorni ham kamaytiring.

## Havola va rasmning jonli natijasi

Quyidagi namuna ichki rasm, tavsif va aniq havola matnini birlashtiradi.
Previewdagi kichik CSS qoidasi rasmni tor ekranga moslashtiradi; CSS
keyingi darslarda batafsil o'rganiladi.

```html
<article>
  <h1>Tog' ko'liga sayohat</h1>

  <p><a href="#sayohat-rejasi">Sayohat rejasiga o'tish</a></p>

  <img
    src="/images/html-css/tog-koli-namuna.webp"
    alt="Tog'lar orasidagi moviy ko'l va qirg'oqdagi yashil daraxt"
    width="1200"
    height="800"
  >

  <p>Tiniq ko'l baland qoyalar orasida joylashgan.</p>

  <h2 id="sayohat-rejasi">Sayohat rejasi</h2>
  <p>Ertalab yo'lga chiqish va ko'l bo'yida tushlik qilish.</p>
</article>
```

```css
img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
```

Rasmning asl o'lchami katta bo'lsa ham, previewdagi CSS uni mavjud kenglikdan
oshirmaydi. HTML'dagi `width` va `height` qiymatlari esa asl nisbatni brauzerga
oldindan ma'lum qiladi.

## Rasmni tezroq yuklash

Sahifaning boshlanishida ko'rinmaydigan rasmlarga `loading="lazy"` qo'shish
mumkin:

```html
<img
  src="galereya-5.webp"
  alt="Samarqanddagi Registon maydoni kechqurun"
  width="1200"
  height="800"
  loading="lazy"
>
```

Brauzer bunday rasmni foydalanuvchi unga yaqinlashganda yuklaydi. Bu uzun
sahifaning dastlabki ochilish vaqtini kamaytirishi mumkin. Sahifaning eng
yuqorisidagi asosiy rasmni lazy yuklash esa aksincha kechikish keltirishi
mumkin, shuning uchun joylashuvni hisobga oling.

## Fayl manzili xato bo'lsa

Rasm chiqmasa yoki havola ishlamasa, quyidagilarni tekshiring:

- fayl va papka nomidagi katta-kichik harflar bir xilmi;
- kengaytma `.jpg`, `.png` yoki `.webp` to'g'ri yozilganmi;
- nisbiy manzil joriy HTML faylidan to'g'ri hisoblanganmi;
- fayl haqiqatan ko'rsatilgan papkada bormi;
- manzilda bo'sh joy yoki xato belgi yo'qmi.

Mahalliy Windows tizimida katta-kichik harf xatosi sezilmasligi, serverga
joylanganda esa havola buzilishi mumkin. Fayl nomlarini kichik harf va tire
bilan yozish (`tog-koli.webp`) qulay amaliyotdir.

## Amaliy mashq

`Sayohat kundaligi` nomli kichik sahifa yarating. Unda sarlavha, bitta
mazmunli rasm, rasmni tushuntiruvchi paragraf va boshqa darsga olib boruvchi
havola bo'lsin. Rasmga aniq `alt`, haqiqiy `width` va `height` yozing. So'ng
`src` manzilidagi bir harfni vaqtincha o'zgartirib, rasm yuklanmaganda `alt`
matni qanday yordam berishini ko'ring.

## Qisqacha xulosa

- `<a href="...">` sahifa va resurslarni bir-biriga bog'laydi.
- Havola matni maqsadni kontekstsiz ham tushuntirishi kerak.
- Mutlaq, sayt ildiziga nisbiy, faylga nisbiy va fragment manzillari mavjud.
- `<img>` uchun `src` va mazmunga mos `alt` yoziladi.
- `width` va `height` sahifa joylashuvining sakrashini kamaytiradi.
- Dekorativ rasm bo'sh `alt=""` bilan belgilanadi.
- Pastdagi rasmlar uchun `loading="lazy"` yuklanishni yengillashtiradi.

Keyingi darsda [HTML ro'yxatlar](https://learncode.uz/html-css/royxatlar) yordamida bog'langan
elementlarni tartibli, tartiblanmagan va ichma-ich guruhlarga ajratamiz.