Matn, havolalar va rasmlar

Faqat sarlavha va xatboshilardan iborat sahifa — bu hali oddiy hujjat. Vebni «veb» qiladigan narsalar — sahifalarni bir-biriga bog'laydigan havolalar va ko'zni quvontiradigan rasmlar. Bu darsda matnning muhim joylarini ajratishni, havola qo'yishni va rasm joylashni o'rganamiz.

Bu darsda

Matnni ajratish: muhim, urg'uli, belgilangan, kichik matn, daraja va indeks
Iqtiboslar, kod va maxsus belgilar
Havolalar: boshqa saytlarga, o'z sahifalaringizga va sahifa ichiga
Absolyut va nisbiy manzillar
Rasm qo'yish va nega alt matni juda muhim
Rasm formatlari, figure va rasmli havola

Matnni ajratish

Ma'no va ko'rinish: strong va b, em va i

Matndagi so'zni qalin yoki qiya qilish uchun HTML'da ikki juft teg bor. Ular brauzerda bir xil ko'rinadi, lekin ma'nosi boshqacha:

Teg	Ma'nosi	Odatiy ko'rinishi
`<strong>`	Muhim matn: ogohlantirish, asosiy fikr	Qalin
`<b>`	Muhim emas, shunchaki ajratilgan: mahsulot nomi, kalit so'z	Qalin
`<em>`	Urg'u (inglizcha emphasis): gapning ma'nosini o'zgartiradigan ta'kid	Qiya
`<i>`	Boshqacha «ovoz»: chet tilidagi so'z, atama, kema yoki asar nomi	Qiya

<p><strong>Diqqat!</strong> Imtihon ertaga soat 9:00 da boshlanadi.</p>
<p>Men <em>bugun</em> kelaman, ertaga emas.</p>
<p>Ingliz tilida olma <i lang="en">apple</i> deyiladi.</p>
<p>Bugungi taklif: <b>Samarqand noni</b> — 5 000 so'm.</p>

Nega ma'no muhim? Ko'zi ojiz foydalanuvchilarning ekran o'quvchi dasturlari  va  ni ovoz ohangi bilan ajratib o'qishi mumkin, qidiruv tizimlari esa ularni muhim so'z deb hisoblaydi.  va  esa faqat ko'rinish uchun.

Oddiy qoida: so'z haqiqatan muhim bo'lsa — , gapda urg'u bo'lsa — . Matn shunchaki chiroyli ko'rinsin desangiz — bu CSS'ning ishi.

Boshqa foydali teglar

<p>Suvning formulasi: H<sub>2</sub>O</p>
<p>Pifagor teoremasi: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>Narxi: <del>120 000 so'm</del> <ins>90 000 so'm</ins></p>
<p>Eng muhim so'z: <mark>takrorlash</mark>.</p>
<p>Faylni saqlash: <code>Ctrl + S</code></p>
<p><small>© 2026 Mening saytim. Barcha huquqlar himoyalangan.</small></p>

Teg	Nima uchun
`<sub>`	Pastki indeks (subscript): kimyoviy formulalar — H₂O
`<sup>`	Yuqori indeks (superscript): daraja x² yoki izoh raqami — matn¹
`<del>` / `<ins>`	O'chirilgan va qo'shilgan matn: eski va yangi narx, tahrirlar
`<mark>`	Marker bilan belgilangandek: qidiruvda topilgan so'z, diqqat qaratish
`<code>`	Kod parchasi yoki tugma nomi — bir xil kenglikdagi shriftda
`<small>`	Mayda izoh: mualliflik huquqi, shartlar

Iqtiboslar

Birovning so'zini keltirish uchun ham teglar bor:

<blockquote> — uzun, alohida blok bo'lib turadigan iqtibos. Brauzer uni chetdan biroz surib ko'rsatadi.
<q> — gap ichidagi qisqa iqtibos. Qo'shtirnoqlarni brauzer o'zi qo'yadi.
<cite> — asar nomi: kitob, film, qo'shiq.

<blockquote>
  <p>Ilm olish — igna bilan quduq qazish.</p>
</blockquote>
<p>— O'zbek xalq maqoli</p>

<p>Ustozim doim aytardi: <q>Har kuni ozgina, lekin har kuni.</q></p>

<p><cite>O'tkan kunlar</cite> — Abdulla Qodiriyning romani.</p>

Maxsus belgilar

Sahifada < belgisini ko'rsatmoqchi bo'lsangiz, muammo chiqadi: brauzer uni teg boshlanishi deb o'ylaydi. Bunday belgilar maxsus kod bilan yoziladi. U & bilan boshlanib, ; bilan tugaydi:

Belgi	Kodi	Qachon kerak
`<` va `>`	`<` va `>`	Matnda teg ko'rsatish: `<h1>` → <h1>
`&`	`&`	«Va» belgisining o'zi: Tom & Jerry
(bo'sh joy)	` `	Bo'linmas bo'sh joy: `5 000` qator oxirida ikkiga bo'linib ketmaydi
©	`©`	Mualliflik belgisi

Boshqa belgilarni (©, «», —, ✓) bemalol to'g'ridan-to'g'ri yozish mumkin: sahifa UTF-8 kodlashda bo'lsa, ular to'g'ri chiqadi. Maxsus kod asosan < va & uchun kerak.

Havolalar

Havola (inglizcha link) — bosilganda boshqa sahifaga olib boradigan matn yoki rasm. Havolalar <a> tegi bilan yoziladi (anchor — «langar» so'zidan). Qayerga borish kerakligi href atributida ko'rsatiladi:

Havolaning qismlari.

<p>Ko'proq bilish uchun: <a href="https://uz.wikipedia.org">O'zbekcha Vikipediya</a></p>
<p>Muallif haqida: <a href="about.html">Men haqimda</a></p>

Ikkala havolani bosib ko'ring. Birinchisi Vikipediyani ochadi. Ikkinchisi esa konsolga xabar chiqaradi: bu muharrir ichida about.html fayli yo'q, lekin kompyuteringizdagi saytda, shu fayl bo'lsa, u ochiladi.

Havola matni nima ochilishini aytib tursin: «Vikipediya» — yaxshi, «bu yerni bosing» — yomon. Ekran o'quvchi dasturlar foydalanuvchilarga sahifadagi havolalarni ro'yxat qilib o'qib beradi — «bu yerni bosing, bu yerni bosing» ro'yxatidan hech narsa tushunib bo'lmaydi.

Absolyut va nisbiy manzillar

href ga ikki xil manzil yozish mumkin:

Absolyut (to'liq) manzil — protokol va domen bilan: https://uz.wikipedia.org. Boshqa saytlarga havola uchun.
Nisbiy manzil — joriy sahifa turgan papkadan boshlab hisoblanadi: about.html, sahifalar/aloqa.html. O'z saytingizdagi sahifalar va rasmlar uchun.

Nisbiy yo'llarni fayllar va papkalar darsida ko'rgan edik. Mana bir sayt papkasi:

mening-saytim/
├── index.html
├── about.html
├── rasmlar/
│   ├── logo.png
│   └── registon.jpg
└── sahifalar/
    └── aloqa.html

Qaysi sahifada	Qayerga	Yoziladigan manzil
`index.html`	`about.html` (shu papkada)	`about.html`
`index.html`	`aloqa.html` (ichki papkada)	`sahifalar/aloqa.html`
`aloqa.html`	`index.html` (bir papka yuqorida)	`../index.html`
`aloqa.html`	`logo.png`	`../rasmlar/logo.png`

Havolada hech qachon C:\Users\Aziz\... kabi kompyuteringizdagi yo'lni yozmang — sayt internetga chiqqanda bunday havola ishlamaydi. Papkalarni doim oddiy qiya chiziq / bilan ajrating va fayl nomini aynan bir xil yozing: serverlarda About.html va about.html — ikki xil fayl.

O'z sahifalaringizni bog'lash

Ko'p sahifali sayt shunday quriladi: har bir sahifada boshqalariga havolalar bo'ladi. Ikkita fayl bir papkada turibdi:

<!doctype html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <title>Bosh sahifa</title>
</head>
<body>
  <p><a href="index.html">Bosh sahifa</a> | <a href="about.html">Men haqimda</a></p>
  <h1>Mening saytimga xush kelibsiz!</h1>
</body>
</html>

<!doctype html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <title>Men haqimda</title>
</head>
<body>
  <p><a href="index.html">Bosh sahifa</a> | <a href="about.html">Men haqimda</a></p>
  <h1>Men haqimda</h1>
  <p>Men veb-dasturlashni o'rganyapman.</p>
</body>
</html>

Ikkala sahifaning tepasida bir xil havolalar qatori — menyu turibdi. Qaysi sahifada bo'lmang, ikkinchisiga bir bosishda o'tasiz. Buni dars oxiridagi amaliy topshiriqda o'zingiz qilib ko'rasiz.

Yangi oynada ochish

Odatda havola joriy oynaning o'zida ochiladi. Boshqa saytga havola yangi yorliqda (tab) ochilishini xohlasangiz, target="_blank" atributini qo'shing:

<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN — veb-dasturchilar qo'llanmasi</a>

target="_blank" — «yangi yorliqda och».
rel="noopener" — xavfsizlik uchun: yangi ochilgan sayt sizning sahifangizni boshqara olmaydi. Zamonaviy brauzerlar buni o'zi qiladi, lekin yozib qo'yish — yaxshi odat.

target="_blank" ni faqat tashqi saytlar uchun ishlating. O'z saytingiz ichidagi sahifalar bir xil oynada ochilgani ma'qul — foydalanuvchi xohlasa, o'zi yangi yorliqda ochadi (Ctrl + bosish).

Sahifa ichidagi havolalar

Uzun sahifada kerakli bo'limga bir bosishda «sakrash» mumkin. Buning uchun:

Bo'lim sarlavhasiga id beramiz: <h2 id="taomlar">.
Havola manzili sifatida # va shu id ni yozamiz: <a href="#taomlar">.

<h1 id="boshi">Toshkent haqida</h1>
<p>
  <a href="#tarix">Tarix</a> |
  <a href="#joylar">Mashhur joylar</a> |
  <a href="#taomlar">Taomlar</a>
</p>

<h2 id="tarix">Tarix</h2>
<p>Toshkent — ikki ming yildan ortiq tarixga ega qadimiy shahar.</p>
<p>Bugun u O'zbekistonning poytaxti va eng katta shahri.</p>

<h2 id="joylar">Mashhur joylar</h2>
<p>Amir Temur xiyoboni, Chorsu bozori va Toshkent teleminorasi.</p>
<p>Metrosining bekatlari esa haqiqiy san'at asaridek bezatilgan.</p>

<h2 id="taomlar">Taomlar</h2>
<p>Toshkentcha osh, norin va somsa.</p>
<p><a href="#boshi">↑ Yuqoriga</a></p>

Menyudagi havolalarni bosing — natija oynasi kerakli bo'limga aylanadi. «Yuqoriga» havolasi esa sahifa boshiga qaytaradi. Boshqa sahifaning ma'lum bo'limiga ham havola qilsa bo'ladi: about.html#aloqa.

Elektron pochta va telefon

Havola sahifani emas, boshqa ilovani ham ochishi mumkin:

<a href="mailto:salom@example.com">Bizga xat yozing</a>
<a href="tel:+998901234567">+998 90 123 45 67</a>

mailto: — bosilganda pochta dasturi ochiladi, «Kimga» maydoni esa to'ldirilgan bo'ladi.
tel: — telefonda bosilsa, shu raqamga qo'ng'iroq qilish taklif qilinadi. Raqam bo'sh joylarsiz, xalqaro shaklda (+998…) yoziladi.

Rasmlar

Rasm <img> tegi bilan qo'yiladi (inglizcha image — «rasm»). Bu bo'sh element — yopuvchi tegi yo'q. Ikkita asosiy atributi bor:

src (inglizcha source — «manba») — rasm faylining manzili. Havoladagi href kabi, absolyut yoki nisbiy bo'ladi.
alt (inglizcha alternative — «muqobil») — rasmda nima borligini so'z bilan tasvirlovchi matn.

<h2>Samarqand</h2>
<img src="../assets/rasmlar/registon.svg" alt="Registon maydoni: uchta madrasa va moviy gumbazlar" width="320">
<p>Registon — Samarqandning markaziy maydoni.</p>

Bu saytda rasmlar assets/rasmlar/ papkasida turadi, shuning uchun manzil ../assets/rasmlar/registon.svg: «bir papka yuqoriga chiq, assets ga, keyin rasmlar ga kir». O'z saytingizda odatda soddaroq bo'ladi: rasmlar/registon.jpg.

Nega alt shunchalik muhim?

Ko'zi ojiz foydalanuvchilar uchun ekran o'quvchi dastur rasm o'rniga alt matnini o'qib beradi.
Internet sekin bo'lsa yoki fayl topilmasa, rasm o'rnida alt matni ko'rinadi.
Qidiruv tizimlari rasmda nima borligini aynan alt orqali tushunadi.

Rasm topilmasa nima bo'lishini ko'raylik. Quyidagi muharrirda fayl nomini ataylab buzing: tog.svg ni tog2.svg ga o'zgartiring.

<img src="../assets/rasmlar/tog.svg" alt="Quyosh botayotgan paytdagi tog'lar" width="300">
<p>Fayl nomini buzsangiz, rasm o'rnida alt matni ko'rinadi.</p>

Yomon alt	Yaxshi alt
`alt="rasm"`	`alt="Qizil olma yog'och stol ustida"`
`alt="IMG_2041.jpg"`	`alt="Registon maydoni kechasi, chiroqlar yoqilgan"`
alt umuman yo'q	`alt=""` — faqat bezak uchun qo'yilgan rasm (masalan, naqshli chiziq). Bo'sh `alt` «bu rasmni o'tkazib yubor» degani

O'lcham: width va height

width (kenglik) va height (balandlik) rasm o'lchamini piksellarda belgilaydi (px yozilmaydi, faqat son). Faqat kenglikni bersangiz, balandlik proporsiyaga mos ravishda o'zi hisoblanadi:

<img src="../assets/rasmlar/olma.svg" alt="Qizil olma" width="50">
<img src="../assets/rasmlar/olma.svg" alt="Qizil olma" width="100">
<img src="../assets/rasmlar/olma.svg" alt="Qizil olma" width="150">

E'tibor bering: uchta rasm matn kabi bir qatorga terildi. Rasm — matn ichida turadigan (qatorli) element.

Ikkala o'lchamni ham yozish foydali: width="640" height="400". Shunda brauzer rasm hali yuklanmasdan oldin uning joyini bilib turadi va sahifa yuklanayotganda matn «sakrab» ketmaydi. Faqat nisbatni to'g'ri bering — aks holda fotosurat cho'zilib yoki siqilib qoladi. Rasmlarni ekranga moslashtirishni CSS bilan qilamiz.

Rasm formatlari

Format	Qachon ishlatiladi	Xususiyati
JPG (JPEG)	Fotosuratlar	Hajmi kichik, lekin shaffof fon bo'lmaydi
PNG	Skrinshotlar, logotiplar, matnli rasmlar	Aniq chiziqlar, shaffof fon; hajmi kattaroq
SVG	Logotip, belgi (ikonka), sxema	Vektor: har qanday o'lchamda tiniq, hajmi juda kichik. Bu darsdagi rasmlar — SVG
WebP	Fotosurat va boshqa rasmlar	Zamonaviy format: JPG va PNG'dan yengilroq, shaffoflik ham bor
GIF	Oddiy qisqa animatsiyalar	Eski format, faqat 256 rang

Telefonda olingan fotosurat 3–5 MB bo'lishi mumkin. Uni saytga to'g'ridan-to'g'ri qo'ysangiz, sahifa sekin ochiladi, foydalanuvchining mobil interneti esa tez tugaydi. Avval kichraytiring: sayt uchun odatda 1500–2000 piksel kenglik va 200–300 KB hajm yetarli.

Rasm fayllarini qayerda saqlash

Rasmlarni sayt papkasidagi alohida rasmlar/ papkasida saqlash qulay. Unda index.html dan rasm manzili rasmlar/registon.jpg bo'ladi. Rasm chiqmasa, quyidagilarni tekshiring:

Fayl nomi va kengaytmasi aynan bir xilmi? Registon.JPG ≠ registon.jpg.
Papka nomi to'g'rimi va fayl haqiqatan shu papkadami?
Nomida bo'sh joy yoki apostrof yo'qmi? (tog' rasmi.jpg — yomon, tog-rasmi.jpg — yaxshi.)
Yo'l joriy sahifa turgan papkadan to'g'ri hisoblanganmi? Kerak bo'lsa, ../ qo'shing.

Izohli rasm va rasmli havola

Rasmga izoh (sarlavha) qo'shish uchun uni <figure> ichiga olamiz, izohni esa <figcaption> ga yozamiz. Rasmning o'zini havola qilish uchun esa <img> ni <a> ichiga joylash yetarli:

<figure>
  <img src="../assets/rasmlar/tog.svg" alt="Quyosh botayotgan paytdagi tog'lar" width="280">
  <figcaption>1-rasm. Tog'dagi kuz oqshomi.</figcaption>
</figure>

<p>Profilga o'tish uchun rasmni bosing:</p>
<a href="about.html">
  <img src="../assets/rasmlar/avatar.svg" alt="Mening profilim" width="80">
</a>

Rasmli havolada alt matni rasmni emas, havola qayerga olib borishini tasvirlasin: «Mening profilim», «Bosh sahifaga qaytish».

Mashqlar

1-mashq Rasm va havola

Sahifaga ikki narsa qo'shing:

Olma rasmi: manzili ../assets/rasmlar/olma.svg, kengligi 150, ma'noli alt matni bilan.
Olma haqidagi Vikipediya maqolasiga havola (https://uz.wikipedia.org/wiki/Olma). Havola yangi yorliqda ochilsin va rel="noopener" bo'lsin.

<h1>Mevalar</h1>
<p>Olma — mazali va foydali meva.</p>

<!-- 1. Olma rasmini qo'ying -->

<!-- 2. Vikipediyaga havola qo'ying -->

Ishora

Rasm: <img src="…" alt="…" width="150">. Havola: <a href="…" target="_blank" rel="noopener">Matn</a>. Rasm ko'rinmasa — manzilni harfma-harf tekshiring.

Yechimni ko'rish

<h1>Mevalar</h1>
<p>Olma — mazali va foydali meva.</p>

<img src="../assets/rasmlar/olma.svg" alt="Qizil olma" width="150">

<p>
  <a href="https://uz.wikipedia.org/wiki/Olma" target="_blank" rel="noopener">Olma haqida Vikipediyada o'qing</a>
</p>

2-mashq Retseptlar menyusi

Sahifada ikkita retsept bor, lekin menyudagi havolalar hech qayerga olib bormaydi. Ularni ishlaydigan qiling:

«Osh» sarlavhasiga id="osh", «Somsa» sarlavhasiga id="somsa" bering.
Menyudagi havolalarga mos manzillarni yozing: #osh va #somsa.
Sahifa oxiridagi «Yuqoriga» havolasini h1 ga (#boshi) bog'lang.

Keyin havolalarni bosib, ishlashini tekshiring.

<h1 id="boshi">Retseptlar</h1>
<p>
  <a href="">Osh</a> |
  <a href="">Somsa</a>
</p>

<h2>Osh</h2>
<p>Kerak bo'ladi: guruch, sabzi, go'sht, piyoz va yog'.</p>
<p>Avval go'sht qovuriladi, keyin piyoz va sabzi qo'shiladi.</p>
<p>Oxirida guruch solinib, past olovda dam yediriladi.</p>

<h2>Somsa</h2>
<p>Kerak bo'ladi: xamir, qiyma, piyoz va ziravorlar.</p>
<p>Xamir yupqa yoyiladi, ichiga qiyma solinib, uchburchak qilib o'raladi.</p>
<p>Tandirda yoki duxovkada qizarguncha pishiriladi.</p>

<p><a href="">↑ Yuqoriga</a></p>

Yechimni ko'rish

<h1 id="boshi">Retseptlar</h1>
<p>
  <a href="#osh">Osh</a> |
  <a href="#somsa">Somsa</a>
</p>

<h2 id="osh">Osh</h2>
<p>Kerak bo'ladi: guruch, sabzi, go'sht, piyoz va yog'.</p>
<p>Avval go'sht qovuriladi, keyin piyoz va sabzi qo'shiladi.</p>
<p>Oxirida guruch solinib, past olovda dam yediriladi.</p>

<h2 id="somsa">Somsa</h2>
<p>Kerak bo'ladi: xamir, qiyma, piyoz va ziravorlar.</p>
<p>Xamir yupqa yoyiladi, ichiga qiyma solinib, uchburchak qilib o'raladi.</p>
<p>Tandirda yoki duxovkada qizarguncha pishiriladi.</p>

<p><a href="#boshi">↑ Yuqoriga</a></p>

Amaliy topshiriq Ikki sahifali sayt

VS Code'da veb-sayt papkangizni oching. Unda index.html bor; yoniga about.html faylini va rasmlar papkasini yarating.
Istalgan rasmingizni rasmlar papkasiga nusxalang va nomini kichik harflar bilan, bo'sh joysiz yozing (masalan, men.jpg).
Ikkala sahifaning tepasiga darsdagidek menyu qo'ying: «Bosh sahifa» va «Men haqimda» havolalari.
about.html ga rasmingizni alt matni bilan qo'shing: <img src="rasmlar/men.jpg" alt="…" width="200">.
Live Server bilan oching (2-dars) va havolalar orqali sahifalar orasida yurib ko'ring. Rasm chiqmasa — yuqoridagi to'rt bandli ro'yxat bo'yicha tekshiring.

O'zingizni sinang

Ogohlantirish matnini ma'no jihatidan muhim deb belgilash uchun qaysi teg to'g'ri?

To'g'ri.  ham qalin ko'rinadi, lekin «muhim» degan ma'noni bermaydi.

alt atributi nima uchun kerak?

Rasmning o'lchamini belgilash uchun
Rasm faylining manzilini ko'rsatish uchun
Rasm ustiga yozuv chiqarish uchun
Rasmni ko'ra olmaydigan foydalanuvchi va brauzerga uning mazmunini so'z bilan aytish uchun

To'g'ri. Ekran o'quvchi dasturlar alt ni o'qiydi, rasm yuklanmasa esa uning o'rnida alt ko'rinadi.

index.html va about.html bitta papkada. index.html dan about.html ga havola qanday yoziladi?

<a href="about.html">
<a href="C:\sayt\about.html">
<a href="../about.html">
<a href="#about.html">

To'g'ri. Fayllar bir papkada bo'lsa, nisbiy manzil — shunchaki fayl nomi.

<a href="#narxlar">Narxlar</a> bosilganda nima bo'ladi?

narxlar.html sahifasi ochiladi
Yangi yorliq ochiladi
Shu sahifaning ichidagi id="narxlar" elementiga o'tiladi
Hech narsa bo'lmaydi

To'g'ri. # bilan boshlangan manzil sahifa ichidagi id ga olib boradi.

Logotip uchun qaysi format eng qulay: har qanday o'lchamda tiniq ko'rinadi va hajmi kichik?

JPG
SVG
GIF
Telefondan olingan katta fotosurat

To'g'ri. SVG — vektor format: u piksellardan emas, chiziq va shakllardan iborat, shuning uchun kattalashtirganda xiralashmaydi.

Xulosa

Matn teglari ma'no bo'yicha tanlanadi: strong — muhim, em — urg'u; mark, sub, sup, del, ins, code, small — maxsus vazifalar uchun.
< va & matnda < va & deb yoziladi.
Havola: <a href="manzil">matn</a>. Boshqa saytlarga — absolyut manzil, o'z sahifalaringizga — nisbiy manzil.
target="_blank" rel="noopener" — yangi yorliqda ochish; #id — sahifa ichiga; mailto:, tel: — pochta va telefon.
Rasm: <img src="…" alt="…" width="…">. alt — majburiy va ma'noli bo'lsin.
Fotosuratga — JPG yoki WebP, logotip va belgilarga — SVG yoki PNG. Rasmlarni rasmlar/ papkasida saqlang.
figure + figcaption — izohli rasm; <a> ichidagi <img> — rasmli havola.