2.5-dars — Havolalar va tasvirlar: a, img

Darsda 5 ta bo'lim bor. Ularni tartib bilan o'rganing.

<a> tegi (anchor — «langar» so'zidan) giperhavola yaratadi. Bu HTML'dagi eng muhim teglardan biri — aynan havolalar veb'ni «to'r» (web) qiladi, sahifalarni bir-biri bilan bog'laydi. Havolalarsiz internet shunchaki alohida hujjatlar to'plami bo'lardi.

Havolada albatta href atributi bo'lishi kerak (hypertext reference — «gipermatn havolasi» so'zidan). hrefda siz havola olib boradigan manzilni ko'rsatasiz. <a>ning ochuvchi va yopuvchi tegi orasidagi matn — bu foydalanuvchi ko'radigan va bosishi mumkin bo'lgan narsa.

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

<a href="https://ru.wikipedia.org/wiki/HTML">HTML haqida maqola</a>

<a href="page2.html">Keyingi sahifa</a>

<a href="/catalog/phones.html">Telefonlar katalogi</a>

href turli xil manzillarga olib borishi mumkin. Eng muhimi — absolyut va nisbiy yo'llar orasidagi farqni tushunish.

Absolyut yo'l — bu http:// yoki https:// bilan boshlanadigan to'liq URL (veb-manzil). U sahifangiz qayerda joylashganidan qat'i nazar, internetdagi resursni ko'rsatadi. Misol: https://example.com/image.jpg. Havola boshqa saytga olib borganda ishlatiladi.

Nisbiy yo'l — bu joriy sahifaga nisbatan manzil. U domen nomini o'z ichiga olmaydi. Misollar: page2.html (bir xil papkadagi fayl), images/photo.jpg (images kichik papkasidagi fayl), ../index.html (ota papkadagi fayl). Havola o'z saytingizning boshqa fayliga olib borganda ishlatiladi.

../ belgisi «bir daraja yuqoriga ko'tarilish»ni bildiradi. Agar sizda papkalar tuzilmasi: site/about/team.html va site/index.html bo'lsa, u holda team.htmldan index.html'ga havola shunday bo'ladi: <a href="../index.html">Bosh sahifa</a>. Bu «oldingi papkaga qaytish» buyrug'iga o'xshaydi.

<!-- Absolyut (boshqa saytga) -->
<a href="https://yandex.ru">Yandex</a>
<a href="https://github.com">GitHub</a>

<!-- Nisbiy (o'z saytiga) -->
<a href="about.html">Kompaniya haqida</a>
<a href="catalog/phones.html">Telefonlar</a>
<a href="../index.html">Bosh sahifaga</a>

Havola nafaqat boshqa sahifaga, balki faylga, tasvirga, arxivga, PDF hujjatiga ham olib borishi mumkin. Brauzer yoki faylni ochadi (agar uni ko'rsata olsa, masalan PDF yoki tasvirni), yoki yuklab olishni taklif qiladi. Shuningdek, havola elektron pochtaga ham olib borishi mumkin — buning uchun maxsus mailto: protokoli ishlatiladi.

<!-- Email'ga havola (pochta klientini ochadi) -->
<a href="mailto:info@example.com">Bizga yozing</a>

<!-- Faylni yuklab olish uchun havola -->
<a href="files/catalog.pdf">Katalogni yuklab olish (PDF)</a>

<!-- Telefonga havola (mobil qurilmalarda qo'ng'iroq qiladi) -->
<a href="tel:+79161234567">+7 (916) 123-45-67</a>

Yana bir foydali havola turi — langar havolalar. Ular boshqa sahifaga emas, joriy sahifaning aniq bir joyiga olib boradi. Buning uchun: 1) elementga id atributini berish, 2) href'da shu id'ni panjara belgisi (#) orqali ko'rsatish kerak.

<!-- Mundarija — havolalar quyidagi bo'limlarga olib boradi -->
<a href="#section1">1-bo'lim</a>
<a href="#section2">2-bo'lim</a>
<a href="#section3">3-bo'lim</a>

<!-- 1-bo'lim (havola shu yerga olib boradi) -->
<h2 id="section1">1-bo'lim</h2>
<p>1-bo'lim matni...</p>

Langar havolaga bosilganda brauzer sahifani ko'rsatilgan id'ga ega elementga silliq (yoki bir zumda) aylantiradi. Bu uzun, mundarijali sahifalar uchun juda qulay. Aytgancha, biz shu kursning har bir darsining mazmun qismida langar havolalardan foydalanamiz!

Standart bo'yicha havolalar brauzerda ko'k rangli, tagiga chiziq tortilgan matn ko'rinishida bo'ladi. Tashrif buyurilgandan keyin havola siyohrang bo'lib qoladi. Bu uslublarni CSS orqali o'zgartirish mumkin, lekin hozircha biz CSS'ni o'tmayapmiz — shunchaki havolalar «qutidan chiqqan holda» qanday ko'rinishini eslab qoling.

target atributi (target — «maqsad» so'zidan) brauzerga havolani qayerda ochishni ko'rsatadi. _blank qiymati «yangi vkladkada (yoki yangi oynada)» degan ma'noni bildiradi. Standart bo'yicha (agar target ko'rsatilmasa) havola bir xil vkladkada ochiladi — bu target="_self"ga teng.

<!-- Shu vkladkada ochiladi (standart bo'yicha) -->
<a href="https://example.com">Example.com</a>

<!-- Yangi vkladkada ochiladi -->
<a href="https://example.com" target="_blank">Example.com (yangi vkladka)</a>

<!-- Barcha tashqi havolalar yangi oynada ochiladi -->
<a href="https://google.com" target="_blank">Google</a>
<a href="https://yandex.ru" target="_blank">Yandex</a>

target="_blank" qachon ishlatiladi? Asosan tashqi saytlarga havolalar uchun. Agar siz o'z saytingizning boshqa sahifasiga havola qilsangiz — oddiy havolani (target'siz) qoldiring. Agar havola boshqa saytga olib borsa — target="_blank" qo'shing, shunda foydalanuvchi saytingizdan ketib qolmaydi. Bu ayniqsa internet-do'konlar, bloglar va uzun matnli saytlar uchun muhim — siz foydalanuvchi vkladkani yopib, saytingizni yo'qotib qo'yishini xohlamaysiz.

target uchun boshqa qiymatlar ham bor: _self (shu vkladkada, standart bo'yicha), _parent (ota freymda), _top (freymlardan chiqib, butun ekranda). Lekin amalda sizga faqat _blank kerak bo'ladi. Qolganlari kamdan-kam va o'ziga xos vaziyatlarda ishlatiladi (masalan, iframe bilan).

target="_blank" bilan xavfsizlik uchun rel="noopener noreferrer" qo'shish tavsiya etiladi. Bu yangi vkladkaning sizning sahifangizga JavaScript orqali kirishining oldini oladi. Zamonaviy brauzerlar standart bo'yicha xavfsiz, lekin doim target="_blank" rel="noopener noreferrer" yozish yaxshi amaliyot hisoblanadi.

<!-- Tashqi havolalarni ochishning xavfsiz usuli -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Tashqi sayt (xavfsiz)
</a>

<img> tegi (image — «tasvir» so'zidan) sahifaga rasm qo'yadi. Bu yakka (o'zi-o'zini yopuvchi) teg — uning yopuvchi tegi yo'q. Asosiy atributi — src (source — «manba» so'zidan), unda tasvirga bo'lgan yo'l ko'rsatiladi.

Havolalardagi kabi, tasvirlarga bo'lgan yo'llar ham absolyut (to'liq URL) va nisbiy (joriy sahifaga nisbatan yo'l) bo'lishi mumkin. O'z saytingizdagi rasmlar uchun odatda nisbiy yo'llar, internetdagi rasmlar uchun esa — absolyut yo'llar ishlatiladi.

<!-- Internetdan tasvir (absolyut yo'l) -->
<img src="https://example.com/images/photo.jpg" alt="Tavsif">

<!-- Bir xil papkadagi tasvir (nisbiy yo'l) -->
<img src="photo.jpg" alt="Mening rasmim">

<!-- images kichik papkasidagi tasvir -->
<img src="images/photo.jpg" alt="images papkasidagi rasm">

<!-- Ota papkadagi tasvir -->
<img src="../photo.jpg" alt="Ota papkadagi rasm">

Agar internetdan rasm ishlatmoqchi bo'lsangiz, undan foydalanish huquqingiz borligiga ishonch hosil qiling. Boshqalarning tasvirlarini o'g'irlamang! Bepul fotobanklardan foydalaning: Unsplash, Pexels, Pixabay. Yoki o'z fotosuratingizni serverga yuklab, unga yo'lni ko'rsating.

Qanday tasvir formatlari qo'llab-quvvatlanadi? Asosiylari: JPEG (fotosuratlar), PNG (shaffoflikka ega grafika), GIF (animatsiyalar), WebP (zamonaviy format, kichikroq hajm), SVG (vektor grafika). Brauzerlar barcha ushbu formatlarni qo'llab-quvvatlaydi. Fotosuratlar uchun JPEG yoki WebP, ikonka va logotiplar uchun PNG yoki SVG, animatsiyalar uchun GIF (yoki bundan ham yaxshisi — video, lekin buni keyinroq o'rganamiz) ishlating.

<img> ichida width va height atributlarini — tasvirning kengligi va balandligini piksellarda ko'rsatish mumkin (va kerak). Bu brauzerga rasm yuklanmasidan oldin sahifada joy ajratib qo'yishga yordam beradi. Bu atributlarsiz sahifa yuklanish jarayonida «sakrashi» mumkin — matn allaqachon yuklangan, rasm esa hali yo'q, va u paydo bo'lganda kontent siljib ketadi.

Muhim: <img> — bu qator elementi, lekin u qator-blok elementi kabi harakat qiladi. U qatorni ko'chirmaydi (qator elementi kabi), lekin unga kenglik va balandlik berish mumkin (blok elementi kabi). Agar width/height ko'rsatilmagan bo'lsa, tasvir standart bo'yicha o'zining asl o'lchamida ko'rsatiladi.

<!-- 800x600 piksellik rasm -->
<img src="photo.jpg" alt="Tavsif" width="800" height="600">

Agar faqat kenglikni ko'rsatsangiz, balandlik avtomatik moslashadi (proporsiyalarni saqlagan holda). Lekin ikkala o'lchamni ham ko'rsatgan ma'qul — bu sahifadagi joyni aniqroq ajratadi. Agar tasvir ko'rsatilgan o'lchamlardan kichikroq bo'lsa, u cho'ziladi (va xira ko'rinishi mumkin). Agar kattaroq bo'lsa — kichrayadi (lekin sifati yaxshi bo'lib qoladi).

Har bir <img>da bo'lishi kerak bo'lgan uchta atribut: src (majburiy), alt (qulaylik standartlariga ko'ra majburiy), width va height (qat'iy tavsiya etiladi). Keling, har birini batafsilroq ko'rib chiqamiz.

alt (alternative — «alternativa» so'zidan) — bu tasvir yuklanmagan taqdirda ko'rsatiladigan matn. U shuningdek, ko'zi ojiz foydalanuvchilarga rasmni tasvirlash uchun skrinriderlar tomonidan ishlatiladi. Qidiruv tizimlari (Google, Yandex) ham alt'ni o'qiydi — bu tasvirlaringizning qidiruvdagi SEO'siga ta'sir qiladi.

alt'ni qanday yozish kerak? Bir nechta oddiy qoidalar: rasmda nima tasvirlanganini 5-15 so'z bilan tasvirlab bering. «Tasvir», «Rasm», «Foto» so'zlari bilan boshlamang — skrinrider bu tasvir ekanligini baribir aytadi. Agar rasmda matn bo'lsa — bu matnni alt'da takrorlang. Agar rasm dekorativ bo'lsa (shunchaki chiziq, ikonka, fon) — alt'ni bo'sh qoldiring: alt="". Bo'sh alt — skrinrider uchun rasmni o'tkazib yuborish signali.

<!-- Yaxshi alt: mazmunni tasvirlaydi -->
<img src="cat.jpg" alt="Jigarrang mushuk deraza tokchasida uxlayapti">

<!-- Yomon alt: axborotsiz -->
<img src="cat.jpg" alt="Mushuk">

<!-- Yomon alt: keraksiz so'zlar -->
<img src="cat.jpg" alt="Deraza tokchasidagi mushukning tasviri">

<!-- Dekorativ rasm: bo'sh alt -->
<img src="divider.png" alt="">

<!-- Matnli rasm: matnni takrorlaymiz -->
<img src="sale-banner.jpg" alt="31-iyulgacha hammasiga 50% chegirma">

width va height tasvir o'lchamlarini piksellarda belgilaydi. width — kenglik, height — balandlik. Bu atributlar majburiy emas, lekin juda foydali. Ular brauzerga rasm yuklanmasidan oldin uning ostiga joy ajratishga yordam beradi, kontentning «sakrashi»ning oldini oladi. Bu CLS (Cumulative Layout Shift) deb ataladi — sahifa yuklanayotganda qanchalik «tebranishini» o'lchaydigan ko'rsatkich.

Maslahat: width va heightni tasvirning haqiqiy o'lchamlariga aniq mos ravishda ko'rsating. Agar rasm 1200x800 piksel bo'lsa, width="1200" height="800" deb yozing. Rasmni HTML orqali kichraytirishga urinmang — buning uchun CSS bor. Agar asl tasvirdan kichikroq o'lchamlar ko'rsatilsa, rasm baribir to'liq o'lchamda yuklanadi (shunchaki kichikroq ko'rsatiladi) — bu sahifaning yuklanishini sekinlashtiradi.

Yana bir foydali atribut bor — title. U tasvir ustiga sichqoncha olib borilganda paydo bo'ladigan qalqib chiquvchi izohni yaratadi. Lekin bu alt'ning o'rnini bosmaydi! Alt — qulaylik uchun, title — qo'shimcha ma'lumot uchun. title'ni kamdan-kam, faqat haqiqatan ham kerak bo'lganda ishlating.

<!-- To'liq atributlar to'plami -->
<img src="photo.jpg" alt="Dengizda quyosh botishi" width="800" height="500" title="Rasm Sochida olingan">

<!-- Minimal, lekin yetarli to'plam -->
<img src="photo.jpg" alt="Dengizda quyosh botishi" width="800" height="500">

<!-- Juda yomon (lekin texnik jihatdan ishlaydi) -->
<img src="photo.jpg">

Oxirgi misol (alt, width, height'siz) — yomon amaliyot. Shunday qilmagan ma'qul. Skrinrider tavsif o'rniga fayl nomini (photo.jpg) o'qiydi. Brauzer joy ajratmaydi — rasm yuklanganda kontent «sakraydi». Har doim kamida alt va width/height qo'shing.

Endi bilganlarimizning barchasini qo'llaymiz. Sevimli mushugingiz (yoki istalgan film) haqida sahifa yarating. Faqat <a> va <img>dan foydalaning — bu darsdagi boshqa teglar shart emas, lekin ilgari o'rgangan (strong, em, ro'yxatlar) teglarni ishlatishingiz mumkin.

Topshiriq: «Mening sevimli mushugim» sahifasi

Quyidagi tuzilmaga ega sahifa yarating:

— Sarlavha: mushukning zoti yoki laqabi

— Mushuk tasviri (internetdan, absolyut URL orqali)

— Qisqacha tavsif: mushuk haqida 2-3 abzats

— Zot haqida ma'lumot beruvchi sahifaga havola (tashqi sayt, yangi vkladkada ochiladi)

— «Muallifga yozish» havolasi (mailto)

<h1>Mening mushugim — Barsik</h1>

<img src="https://placekitten.com/600/400"
     alt="Jigarrang mushuk Barsik divanda o'tiribdi"
     width="600" height="400">

<p>Barsik — meyn-kun zotidagi <strong>uch yoshli</strong> jigarrang mushuk.
U juda <em>mehribon</em> va tizzada uxlashni yaxshi ko'radi.</p>

<p>Har kuni ertalab Barsik nonushta so'rab
<strong>baland ovozda miyovlaydi</strong>. Uning sevimli taomlari — baliq va tovuq.</p>

<h2>Sevimli mashg'ulotlari</h2>
<ul>
    <li>Quyoshda uxlash</li>
    <li>To'p bilan o'ynash</li>
    <li>Derazadan qushlarni kuzatish</li>
</ul>

<hr>

<p>
  <a href="https://ru.wikipedia.org/wiki/Мейн-кун"
     target="_blank" rel="noopener noreferrer">
     Meyn-kun zoti haqida batafsil (Vikipediya)
  </a>
</p>

<p>
  <a href="mailto:barsik@example.com">Barsikka yozish</a>
</p>

Tasvir placekitten.com'dan olingan — mushuklar uchun placeholder-rasmlar xizmati. Rasm havola emas (shunchaki <img>), lekin uni <a> ichiga o'rab, bosiladigan qilib qo'yish mumkin.

2-topshiriq: sevimli film haqida sahifa (mustaqil)

Shunga o'xshash tarzda sevimli filmingiz haqida sahifa yarating. Tuzilma:

— Film nomi (sarlavha)

— Film posteri (internetdagi tasvir)

— Tavsif: chiqarilgan yili, rejissyor, bosh aktyorlar, qisqacha syujet

— Kinopoisk'dagi film sahifasiga havola (yangi vkladkada)

— YouTube'dagi treylerga havola

O'rgangan barcha atributlarni ishlatib ko'ring: alt (poster tavsifi), width/height (o'lchamlar), target="_blank" (tashqi havolalar uchun), rel (xavfsizlik), mailto: (agar «muallifga yozish» qo'shmoqchi bo'lsangiz).

<h1>Mening sevimli filmim: «Inception»</h1>

<img src="https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjJMl5BL.jpg"
     alt="«Inception» (2010) filmining posteri"
     width="400" height="600">

<p><strong>Yili:</strong> 2010</p>
<p><strong>Rejissyor:</strong> Kristofer Nolan</p>
<p><strong>Rollarda:</strong> Leonardo DiKaprio, Jozef Gordon-Levitt,
Ellen Peyj, Tom Xardi, Kilian Merfi</p>

<p>Dom Kobb — tushlardan g'oyalarni o'g'irlash bo'yicha mutaxassis. Unga
<em>imkonsiz</em> vazifa taklif qilinadi: o'g'irlash emas, balki inson ongiga
g'oyani <em>kiritish</em>. Film ko'rishga <strong>albatta tavsiya etiladi</strong>!</p>

<hr>

<p>
  <a href="https://www.kinopoisk.ru/film/447301/"
     target="_blank" rel="noopener noreferrer">
     Kinopoisk'dagi film sahifasi
  </a>
</p>

<p>
  <a href="https://www.youtube.com/watch?v=YoHD9XEInc0"
     target="_blank" rel="noopener noreferrer">
     YouTube'da treylerni tomosha qilish
  </a>
</p>

Istalgan misolni HTML fayliga nusxalab, brauzerda oching. Tekshiring: havola bosiladimi? Yangi vkladkada ochiladimi? Rasm yuklanadimi? Rasmni olib tashlasangiz (masalan, src'ni mavjud bo'lmagan manzilga almashtirsangiz), alt ko'rinadimi? Agar hammasi ishlasa — siz darsni ajoyib o'zlashtirdingiz!

Tabriklayman! Siz 2.5-darsni yakunladingiz. Endi siz barcha turdagi havolalarni yaratishni va sahifaga tasvirlarni joylashtirishni bilasiz. Bu HTML tuzilmasi moduli bo'yicha oxirgi dars. Keyingi modulda biz CSS va sahifalarni stillashni o'rgana boshlaymiz.