Havolalar va rasmlar - HTML va CSS

Havolalar - vebni "veb" qiladigan narsa. Rasmlar esa sahifani jonlantiradi.

Havola yaratish #

HTML

<a href="https://softromeda.uz">Softromeda saytiga o'tish</a>

<a> - anchor (langar) so'zidan. href - hypertext reference.

Havola turlari #

HTML

<!-- Tashqi sayt -->
<a href="https://python.org">Python rasmiy sayti</a>

<!-- Saytning boshqa sahifasi -->
<a href="biz-haqimizda.html">Biz haqimizda</a>

<!-- Papka ichidagi sahifa -->
<a href="darsliklar/python.html">Python darsligi</a>

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

<!-- Saytning ildizidan -->
<a href="/kontakt.html">Aloqa</a>

<!-- Shu sahifaning bo'limiga -->
<a href="#xulosa">Xulosaga o'tish</a>

<!-- Email -->
<a href="mailto:[email protected]">Xat yozish</a>

<!-- Telefon (mobil qurilmalarda ishlaydi) -->
<a href="tel:+998901234567">+998 90 123 45 67</a>

<!-- Fayl yuklab olish -->
<a href="hisobot.pdf" download>Hisobotni yuklab olish</a>

Nisbiy va mutlaq yo'llar #

Nisbiy yo'l joriy fayl joylashuviga qarab o'zgaradi

Yozuv	Ma'nosi
`fayl.html`	Shu papkadagi fayl
`papka/fayl.html`	Ichki papkadagi fayl
`../fayl.html`	Bitta yuqoridagi papkada
`../../fayl.html`	Ikki daraja yuqorida
`/fayl.html`	Sayt ildizidan
`https://...`	To'liq (mutlaq) manzil

Qaysi birini tanlash?

Nisbiy yo'l (darsliklar/python.html) - o'z saytingiz ichida. Saytni boshqa papkaga ko'chirsangiz ham ishlaydi.
Ildizdan (/darsliklar/python.html) - katta saytlarda qulay, lekin server kerak. Faylni ikki marta bosib ochsangiz ishlamaydi.
Mutlaq (https://...) - faqat tashqi saytlar uchun.

Havola atributlari #

HTML

<!-- Yangi oynada ochish -->
<a href="https://python.org" target="_blank" rel="noopener noreferrer">
    Python sayti
</a>

<!-- Maslahat matni -->
<a href="/yordam.html" title="Tez-tez so'raladigan savollar">Yordam</a>

<!-- Qidiruv tizimlariga "bu havolaga ishonmayman" -->
<a href="https://boshqa-sayt.uz" rel="nofollow">Reklama havolasi</a>

target="_blank" bilan rel="noopener" majburiy

target="_blank" bilan ochilgan sahifa JavaScript orqali sizning sahifangizni boshqarishi mumkin (tabnabbing hujumi). rel="noopener noreferrer" buni bloklaydi.

Zamonaviy brauzerlar buni avtomatik qiladi, lekin eski brauzerlar uchun yozib qo'ying.

Sahifa ichidagi navigatsiya #

HTML

<!-- Mundarija -->
<nav>
    <ul>
        <li><a href="#kirish">Kirish</a></li>
        <li><a href="#asosiy-qism">Asosiy qism</a></li>
        <li><a href="#xulosa">Xulosa</a></li>
    </ul>
</nav>

<!-- Bo'limlar -->
<h2 id="kirish">Kirish</h2>
<p>...</p>

<h2 id="asosiy-qism">Asosiy qism</h2>
<p>...</p>

<h2 id="xulosa">Xulosa</h2>
<p>...</p>

<!-- Yuqoriga qaytish -->
<a href="#">&uarr; Yuqoriga</a>

Ayni o'qiyotgan sahifangizning o'ng tomonidagi mundarija ham shunday ishlaydi.

Rasmlar #

HTML

<img src="rasmlar/logo.png" alt="Softromeda logotipi">

Atribut	Majburiymi	Vazifasi
`src`	Ha	Rasm manzili
`alt`	Ha	Matnli tavsif
`width`	Yo'q	Kengligi (piksel)
`height`	Yo'q	Balandligi (piksel)
`loading`	Yo'q	`lazy` - kerak bo'lganda yuklash
`title`	Yo'q	Sichqoncha maslahati

HTML

<img src="rasmlar/manzara.jpg"
     alt="Chimyon tog'lari qishda"
     width="800"
     height="600"
     loading="lazy">

alt atributi - eng ko'p unutiladigan narsa

alt uchta muhim vazifani bajaradi:

Rasm yuklanmasa - uning o'rniga matn ko'rinadi.
Ko'zi ojiz foydalanuvchilar - ekran o'quvchisi shu matnni o'qiydi.
Qidiruv tizimlari - rasm mazmunini faqat alt orqali tushunadi.

HTML

<!-- Yomon -->
<img src="img1.jpg" alt="rasm">
<img src="img2.jpg" alt="">

<!-- Yaxshi -->
<img src="jamoa.jpg" alt="Softromeda jamoasi 2026-yilgi uchrashuvda">

Istisno: rasm faqat bezak bo'lsa, alt="" (bo'sh) yozing - shunda ekran o'quvchisi uni butunlay o'tkazib yuboradi.

Rasm formatlari #

Format	Qachon ishlatiladi	Hajmi
JPG	Fotosuratlar, ko'p rangli	O'rtacha
PNG	Shaffof fon, logotip, skrinshot	Katta
WebP	Zamonaviy universal format	Kichik
SVG	Ikonka, logotip, diagramma	Juda kichik
GIF	Oddiy animatsiya	Katta
AVIF	Eng yangi, eng samarali	Eng kichik

SVG - vektorli format

SVG piksellardan emas, matematik shakllardan iborat. Shuning uchun:

Istalgan o'lchamda aniq ko'rinadi (kattalashtirsangiz ham buzilmaydi)
Hajmi juda kichik
CSS bilan rangini o'zgartirish mumkin

Ushbu darslikdagi barcha diagrammalar - SVG.

`width` va `height` nima uchun kerak? #

HTML

<!-- O'lchamsiz: sahifa yuklanayotganda "sakraydi" -->
<img src="katta-rasm.jpg" alt="Manzara">

<!-- O'lchamli: brauzer joyni oldindan ajratadi -->
<img src="katta-rasm.jpg" alt="Manzara" width="1200" height="800">

Brauzer rasm o'lchamini bilsa, uning uchun joyni oldindan ajratadi va matn "sakramaydi". Bu foydalanuvchi tajribasi uchun muhim ko'rsatkich (CLS).

Moslashuvchan rasmlar #

Turli ekranlar uchun turli rasm:

HTML

<!-- Ekran zichligiga qarab -->
<img src="logo.png"
     srcset="logo.png 1x, [email protected] 2x"
     alt="Logotip">

<!-- Ekran kengligiga qarab -->
<img src="manzara-800.jpg"
     srcset="manzara-400.jpg 400w,
             manzara-800.jpg 800w,
             manzara-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Chimyon tog'lari">

<!-- To'liq nazorat: turli formatlar va o'lchamlar -->
<picture>
    <source srcset="manzara.avif" type="image/avif">
    <source srcset="manzara.webp" type="image/webp">
    <img src="manzara.jpg" alt="Chimyon tog'lari">
</picture>

<picture> qanday ishlaydi?

Brauzer <source> larni yuqoridan pastga tekshiradi va o'zi qo'llab-quvvatlaydigan birinchisini tanlaydi. Hech biri mos kelmasa - oxirgi <img> ishlatiladi.

Bu eski brauzerlarni qo'llab-quvvatlagan holda yangi formatlardan foydalanish imkonini beradi.

Rasm va izoh #

HTML

<figure>
    <img src="rasmlar/dom-daraxti.svg" alt="DOM daraxti tuzilmasi">
    <figcaption>
        1-rasm. Brauzer HTML dan hosil qiladigan DOM daraxti
    </figcaption>
</figure>

<figure> - mustaqil mazmun (rasm, diagramma, kod), <figcaption> - uning izohi.

Rasm havola sifatida #

HTML

<a href="/">
    <img src="rasmlar/logo.svg" alt="Bosh sahifa">
</a>

Audio va video #

HTML

<!-- Audio -->
<audio controls>
    <source src="dars.mp3" type="audio/mpeg">
    <source src="dars.ogg" type="audio/ogg">
    Brauzeringiz audio elementini qo'llab-quvvatlamaydi.
</audio>

<!-- Video -->
<video controls width="640" poster="rasmlar/oldindan-korish.jpg">
    <source src="dars.mp4" type="video/mp4">
    <source src="dars.webm" type="video/webm">
    <track src="subtitr-uz.vtt" kind="subtitles" srclang="uz" label="O'zbekcha">
    Brauzeringiz video elementini qo'llab-quvvatlamaydi.
</video>

<!-- YouTube joylashtirish -->
<iframe width="560" height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Video sarlavhasi"
        frameborder="0"
        allowfullscreen>
</iframe>

Video atributi	Vazifasi
`controls`	Boshqaruv tugmalarini ko'rsatadi
`autoplay`	Avtomatik boshlaydi (ovozsiz bo'lishi shart)
`muted`	Ovozsiz
`loop`	Takrorlaydi
`poster`	Boshlanishdagi rasm
`preload`	`none`, `metadata`, `auto`

Avtomatik ijro

Brauzerlar ovozli avtomatik ijroni bloklaydi - bu foydalanuvchini bezovta qiladi. autoplay faqat muted bilan birga ishlaydi:

HTML

<video autoplay muted loop playsinline>
    <source src="fon-video.mp4" type="video/mp4">
</video>

To'liq amaliy misol #

HTML

<article>
    <h1>Chimyon tog'lariga sayohat</h1>

    <nav>
        <p><strong>Mundarija:</strong></p>
        <ul>
            <li><a href="#yol">Yo'l</a></li>
            <li><a href="#manzara">Manzaralar</a></li>
            <li><a href="#maslahatlar">Maslahatlar</a></li>
        </ul>
    </nav>

    <h2 id="yol">Yo'l</h2>
    <p>
        Toshkentdan Chimyongacha 85&nbsp;km. Batafsil marshrutni
        <a href="https://yandex.uz/maps" target="_blank" rel="noopener noreferrer">
            Yandex Xaritalar
        </a> da ko'rishingiz mumkin.
    </p>

    <h2 id="manzara">Manzaralar</h2>

    <figure>
        <picture>
            <source srcset="rasmlar/chimyon.webp" type="image/webp">
            <img src="rasmlar/chimyon.jpg"
                 alt="Chimyon tog'lari qishda, qor bilan qoplangan cho'qqilar"
                 width="800" height="533" loading="lazy">
        </picture>
        <figcaption>1-rasm. Chimyon cho'qqisi, yanvar oyi</figcaption>
    </figure>

    <h2 id="maslahatlar">Maslahatlar</h2>
    <ol>
        <li>Iliq kiyining - tog'da harorat 10&nbsp;daraja pastroq</li>
        <li>Suv va yengil ovqat oling</li>
        <li>Telefonni to'liq zaryadlang</li>
    </ol>

    <p>
        Savollar bo'lsa: <a href="mailto:[email protected]">[email protected]</a>
        yoki <a href="tel:+998901234567">+998&nbsp;90&nbsp;123&nbsp;45&nbsp;67</a>
    </p>

    <p><a href="#">&uarr; Yuqoriga qaytish</a></p>
</article>

Amaliy topshiriq

O'zingiz yoqtirgan shahar haqida sahifa yarating:

Boshida <nav> bilan sahifa ichi mundarijasi bo'lsin (# havolalar).
Kamida uchta bo'lim, har birida id bo'lsin.
Kamida ikkita rasm qo'shing - alt, width, height va loading="lazy" bilan.
Bitta rasmni <figure> va <figcaption> ichiga oling.
Tashqi saytga havola qo'shing (target="_blank" va rel bilan).
Email va telefon havolalarini qo'shing.
Sahifa oxirida "Yuqoriga qaytish" havolasi bo'lsin.
Rasm topolmasangiz, https://picsum.photos/800/600 manzilidan foydalaning.

Xulosa #

<a href="..."> havola yaratadi; href mutlaq, nisbiy yoki #id bo'lishi mumkin.
../ bitta papka yuqoriga, / sayt ildiziga ishora qiladi.
target="_blank" bilan rel="noopener noreferrer" yozish xavfsizlik talabi.
<img> da alt majburiy - ko'rish imkoniyati va SEO uchun.
width va height sahifaning "sakrashi"ni oldini oladi.
SVG - ikonka va diagrammalar uchun, WebP - fotosuratlar uchun eng yaxshi tanlov.
<picture> turli formatlar orasidan brauzer qo'llab-quvvatlaydiganini tanlaydi.

Keyingi bo'limda jadvallar bilan ishlashni o'rganamiz.

Havola yaratish #

Havola turlari #

Nisbiy va mutlaq yo'llar #

Havola atributlari #

Sahifa ichidagi navigatsiya #

Rasmlar #

Rasm formatlari #

width va height nima uchun kerak? #

Moslashuvchan rasmlar #

Rasm va izoh #

Rasm havola sifatida #

Audio va video #

To'liq amaliy misol #

Xulosa #

Xatolik topdingizmi?

`width` va `height` nima uchun kerak? #