HTML havolalar (a) va rasm (img)

Vebning asosiy kuchi sahifalarning bir-biri bilan bog’langanidadir. Oldingi darslarda matnni 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:

<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:

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

Sayt ildiziga nisbiy manzil

/ bilan boshlangan manzil shu sayt domenining ildizidan hisoblanadi:

<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:

<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:

<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:

<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.

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.

<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:

<!-- 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.

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.

Kod

<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>

<style>
img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
</style>

Natija

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:

<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 yordamida bog’langan elementlarni tartibli, tartiblanmagan va ichma-ich guruhlarga ajratamiz.