Veb-sahifa qanday quriladi: HTML va CSS

HTML va CSS asoslari: birinchi HTML fayl, asosiy teglar, selektorlar, box model, Flexbox, mobil moslashuv, bepul hosting va amaliy loyiha.

Har kuni ochadigan saytlaringiz — yangiliklar, onlayn do’kon, maktab sahifasi — oddiy matnli fayllardan boshlanadi. Ularni yozishni o’rganish uchun qimmat kompyuter ham, maxsus ta’lim ham shart emas: bepul dastur, brauzer va bir necha kechalik mashq yetarli. Bu qo’llanmada brauzer sahifani qanday ko’rsatishini, kerakli vositalarni, birinchi HTML faylni, asosiy teglar va atributlarni, semantik HTML va qulaylikni, CSS’ni ulash, selektorlar, ranglar va shriftlarni, box model va Flexbox asoslarini, mobil moslashuvni va sahifani internetga chiqarishni ko’rib chiqamiz. Keyin bosqichma-bosqich “shaxsiy tanishuv sahifasi”ni to’liq kodi bilan quramiz, keng tarqalgan xatolarni tahlil qilamiz va oxirida amaliy mashq hamda tekshiruv ro’yxatini beramiz.

Brauzer sahifani qanday ko’rsatadi

Siz manzil kiritganingizda brauzer serverdan bir nechta fayl yuklab oladi va ularni o’qib, ekranda sahifa chizadi. Veb-sayt — shunday sahifalar to’plami. Har bir sahifa uch qatlamdan iborat bo’ladi, ularni uyga o’xshatish mumkin:

HTML — tuzilma. Uyning devorlari va xonalari: qayerda sarlavha, qayerda matn, rasm, ro’yxat va tugma turishini belgilaydi.
CSS — ko’rinish. Bo’yoq, mebel va bezak: ranglar, shriftlar, masofalar, elementlarning joylashuvi.
JavaScript — harakat. Elektr va eshik qo’ng’irog’i: tugma bosilganda nimadir sodir bo’lishi, menyuning ochilishi, formaning tekshirilishi.

Bu maqola birinchi ikki qatlamga bag’ishlangan. HTML va CSS — dasturlash tili emas, belgilash va uslub tillari, shuning uchun ular veb olamiga eng oson kirish yo’li. Foydalanuvchi ko’radigan bu qism frontend deb ataladi, server tomonidagi ma’lumotlar bilan ishlash esa backend.

Kerakli vositalar

Hammasi bepul:

Matn muharriri. Kod oddiy matn, lekin uni Word’da yozib bo’lmaydi — u yashirin formatlash qo’shadi. Eng qulay tanlov — bepul Visual Studio Code (VS Code): kodni rangli ko’rsatadi, teglarni avtomatik yopadi va xatolarga ishora qiladi. Kompyuter kuchsiz bo’lsa, Notepad++ ham ish beradi.
Brauzer. Chrome, Firefox yoki Edge. Natijani ikki xil brauzerda tekshirish foydali.
DevTools (dasturchi vositalari). Brauzerga o’rnatilgan. F12 ni bosing yoki sahifadagi istalgan element ustida o’ng tugmani bosib Inspect ni tanlang (macOS’da Cmd + Option + I). Elements yorlig’ida sahifaning HTML kodi, o’ng tomonda esa shu elementga qo’llangan CSS ko’rinadi. Qiymatlarni shu yerning o’zida o’zgartirib, natijani darhol ko’rish mumkin — sahifani yangilaganda o’zgarishlar yo’qoladi, asl fayl buzilmaydi.

Ishni tartibli boshlang: Hujjatlar (Documents) ichida tanishuv nomli papka oching va VS Code’da File → Open Folder orqali uni oching. Barcha fayllar shu papkada turadi.

Birinchi HTML fayl va asosiy teglar

Papkada index.html faylini yarating. index nomi tasodifiy emas: server papka ochilganda aynan shu faylni qidiradi. Ichiga quyidagini yozing:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mening birinchi sahifam</title>
</head>
<body>
  <h1>Salom, dunyo</h1>
  <p>Bu sahifani o'zim yozdim.</p>
</body>
</html>

Saqlang (Ctrl + S) va faylni brauzerga sudrab tashlang yoki ustiga ikki marta bosing. Har qatorning vazifasi:

<!DOCTYPE html> — brauzerga bu zamonaviy HTML ekanini aytadi.
<html lang="uz"> — butun sahifa, lang esa matn tilini bildiradi: ekran o’quvchi dasturlar va tarjimonlar uchun muhim.
<head> — ekranda ko’rinmaydigan xizmat qismi.
<meta charset="UTF-8"> — harflar to’g’ri chiqishi uchun. Usiz o’zbekcha tutuq belgisi yoki ruscha harflar “kvadratcha”larga aylanishi mumkin.
<meta name="viewport"> — telefonda sahifa kichraytirilmay, ekran kengligiga moslab chiqishi uchun.
<title> — brauzer yorlig’idagi va qidiruv natijalaridagi nom.
<body> — foydalanuvchi ko’radigan hamma narsa.

Teglarning ko’pi juft bo’ladi: ochiluvchi <p> va yopiluvchi </p>, ular orasida mazmun. <img> va <meta> kabi ba’zilari yopilmaydi.

Asosiy teglar

<h1>Sahifa sarlavhasi</h1>
<h2>Bo'lim sarlavhasi</h2>
<h3>Kichik bo'lim</h3>
<p>Oddiy matn abzatsi.</p>
<a href="https://example.com">Havola matni</a>
<img src="images/samarqand.jpg" alt="Registon maydoni kechqurun">
<ul>
  <li>Belgili ro'yxat bandi</li>
</ul>
<ol>
  <li>Raqamli ro'yxat bandi</li>
</ol>
<button type="button">Tugma</button>

h1–h3 — sarlavhalar darajasi. h1 sahifada bitta bo’ladi.
p — abzats; a — havola; img — rasm.
ul — tartibsiz (belgili), ol — tartibli (raqamli) ro’yxat, ikkalasida bandlar li.
div — mazmunsiz “quti”: elementlarni guruhlash va bezash uchun.
button — bosiladigan tugma. Boshqa sahifaga o’tish uchun esa a ishlatiladi.

Atributlar

Atribut — ochiluvchi teg ichidagi qo’shimcha ma’lumot: nom="qiymat". Eng ko’p uchraydiganlari: href (havola manzili), src (rasm fayli), alt (rasm tavsifi), class (CSS uchun nom), id (sahifadagi yagona nom) va lang. Qiymatni doim qo’shtirnoq ichida yozing.

Semantik HTML va qulaylik

Hamma narsani div bilan qurish mumkin, lekin to’g’ri emas. Semantik teglar mazmunni bildiradi: header — sahifa yoki bo’lim boshi, nav — menyu, main — asosiy mazmun, section — mavzuli bo’lim, footer — pastki qism. Ular qidiruv tizimlariga va ko’zi ojiz foydalanuvchilarning ekran o’quvchi dasturlariga sahifani tushunishga yordam beradi.

Qulaylik qoidalari:

Har bir mazmunli rasmga alt yozing: “rasm1” emas, rasmda nima borligini. Faqat bezak bo’lgan rasm uchun alt="" qoldiring.
Sarlavhalar tartibini buzmang: h1 dan keyin h2, undan keyin h3. Shriftni kattalashtirish uchun sarlavha tanlamang — bu CSS’ning ishi.
Havola matni tushunarli bo’lsin: “bu yerga bosing” emas, “Dasturlar ro’yxati”.

CSS: ulash, selektorlar, ranglar va shriftlar

Uslublarni alohida style.css faylida yozish eng to’g’ri yo’l: bitta fayl barcha sahifalarni bezaydi. head ichiga qo’shing:

<link rel="stylesheet" href="style.css">

CSS qoidasi uch qismdan iborat: selektor (qaysi elementga), xususiyat va qiymat:

p {
  color: #333333;
  font-size: 18px;
}

.izoh {
  background-color: #fff4d6;
}

#asosiy-rasm {
  width: 100%;
}

Teg selektori (p) — barcha abzatslarga qo’llanadi.
Class selektori (.izoh) — class="izoh" bo’lgan har qanday elementga. Bitta class’ni ko’p elementga berish mumkin.
Id selektori (#asosiy-rasm) — faqat bitta elementga.

Amaliyotda class’ni afzal ko’ring: u qayta ishlatiladi, id esa juda “kuchli” bo’lib, keyin uslubni o’zgartirishni qiyinlashtiradi. Class nomlarini lotin harflarida, bo’sh joysiz yozing: skills-list yoki konikmalar.

Ranglar nomi (red), hex kodi (#1c3d86) yoki rgb(28, 61, 134) bilan beriladi. Matn va fon orasida yetarli kontrast bo’lsin: och kulrang fonda och kulrang matnni hech kim o’qiy olmaydi.

Shriftlar font-family bilan beriladi, oxirida zaxira guruhi: font-family: Arial, Helvetica, sans-serif;. Birinchi shrift kompyuterda bo’lmasa, keyingisi olinadi. Matn uchun 16–18px va line-height: 1.5 atrofida qator oralig’i o’qishni osonlashtiradi.

Box model va Flexbox asoslari

Box model

Brauzer uchun har bir element — to’rtburchak quti. Uning qatlamlari ichkaridan tashqariga:

Content — matn yoki rasmning o’zi.
Padding — mazmun va chegara orasidagi ichki bo’shliq.
Border — chegara chizig’i.
Margin — qutidan qo’shni elementlargacha bo’lgan tashqi bo’shliq.

.card {
  padding: 20px;
  border: 1px solid #dddddd;
  margin-bottom: 16px;
}

Odatda element kengligiga padding va border qo’shiladi va hisob chalkashadi. Buning oldini olish uchun fayl boshiga * { box-sizing: border-box; } yoziladi — endi width butun qutini bildiradi. DevTools’dagi Computed yorlig’ida box model rangli sxema bo’lib ko’rinadi.

Flexbox

Flexbox elementlarni qator yoki ustun bo’ylab joylashtiradi. Masalan, menyu bandlarini yonma-yon qo’yish:

.menu {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

display: flex — ota elementni flex-konteynerga aylantiradi, uning bevosita bolalari bir qatorga tiziladi.
gap — bolalar orasidagi masofa (margin bilan ovora bo’lmaysiz).
justify-content — asosiy o’q bo’ylab joylashuv: flex-start, center, space-between.
align-items — ko’ndalang o’q bo’ylab tekislash; center balandligi har xil elementlarni o’rtaga keltiradi.
flex-direction: column — elementlarni ustun qilib tizadi; flex-wrap: wrap — joy yetmasa keyingi qatorga o’tkazadi.

Mobil moslashuv va sahifani internetga chiqarish

Media query asosi

Ko’pchilik saytlarni telefondan ochadi, shuning uchun sahifa tor ekranda ham qulay bo’lishi kerak. Birinchi qadam — yuqoridagi viewport meta tegi. Ikkinchisi — media query: ekran ma’lum kenglikdan tor bo’lganda qo’shimcha qoidalar:

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}

Tekshirish uchun DevTools’da telefon belgisini (Toggle device toolbar, Ctrl + Shift + M) bosing va turli ekran o’lchamlarini tanlang. Qat’iy kengliklar o’rniga max-width va foizlardan foydalanish ham moslashuvga yordam beradi.

Internetga chiqarish

Tayyor sahifani do’stlaringizga havola orqali ko’rsatish uchun hosting kerak. Statik sahifalar uchun bepul imkoniyat beruvchi xizmatlar bor:

GitHub Pages. GitHub’da repozitoriy ochasiz, fayllarni yuklaysiz, so’ng Settings → Pages bo’limida Branch sifatida main ni tanlab Save bosasiz. Bir necha daqiqadan keyin sahifa foydalanuvchi-nomi.github.io/repozitoriy-nomi/ manzilida ochiladi. Git bilan ishlashni Git asoslari maqolamizdan o’rganing.
Netlify. Ro’yxatdan o’tib, papkangizni sayt oynasiga sudrab tashlash kifoya — xizmat vaqtinchalik nomli manzil beradi.

Har ikkisida bosh sahifa fayli index.html deb nomlangan bo’lishi shart.

Amaliy loyiha: shaxsiy tanishuv sahifasi

Shartli qahramonimiz — namanganlik Aziza Yusupova. U kutubxonada ishlagan, hozir frontend’ni o’rganyapti va ish beruvchilarga yuborish uchun o’zi haqida sahifa qilmoqchi. Siz o’z ma’lumotlaringizni qo’yasiz.

1-qadam. Papka tuzilmasi. tanishuv papkasida: index.html, style.css va images papkasi, uning ichida kichik harflar bilan nomlangan aziza.jpg portreti. Rasm bo’lmasa, img qatorini olib tashlang.

2-qadam. HTML. index.html ga yozing:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aziza Yusupova - tanishuv sahifasi</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <img class="hero-photo" src="images/aziza.jpg" alt="Aziza Yusupovaning portreti">
    <div>
      <h1>Aziza Yusupova</h1>
      <p class="hero-role">Boshlovchi frontend dasturchi, Namangan</p>
    </div>
  </header>
  <main>
    <section class="card">
      <h2>Men haqimda</h2>
      <p>Ikki yil tuman kutubxonasida ishladim. Hozir veb-sahifa yaratishni o'rganyapman: kitobxonlar uchun qulay sayt qilish - mening maqsadim.</p>
    </section>
    <section class="card">
      <h2>Ko'nikmalarim</h2>
      <ul class="skills">
        <li>HTML</li>
        <li>CSS</li>
        <li>Flexbox</li>
        <li>Git asoslari</li>
      </ul>
    </section>
    <section class="card">
      <h2>Aloqa</h2>
      <p>Taklif yoki savolingiz bo'lsa, yozing:</p>
      <a class="button" href="mailto:aziza@example.com">Xat yozish</a>
    </section>
  </main>
  <footer class="footer">
    <p>2026, Aziza Yusupova</p>
  </footer>
</body>
</html>

mailto: havolasi bosilganda pochta dasturi ochiladi. example.com o’rniga o’z manzilingizni yozing.

3-qadam. CSS. style.css ga yozing:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #1f2937;
  background-color: #f7f5f0;
}

.hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px 24px;
  background-color: #1c3d86;
  color: #ffffff;
}

.hero-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
}

.hero h1 {
  margin: 0;
  font-size: 32px;
}

.hero-role {
  margin: 4px 0 0;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #e5e0d6;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.card h2 {
  margin-top: 0;
  color: #1c3d86;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.skills li {
  padding: 4px 14px;
  border-radius: 999px;
  background-color: #e0f2f1;
  color: #0b5f5c;
}

.button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: #0e8581;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.button:hover {
  background-color: #0b6b68;
}

.footer {
  text-align: center;
  padding: 16px;
  color: #6b7280;
}

@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero h1 {
    font-size: 26px;
  }
}

4-qadam. Tahlil. .hero h1 — “.hero ichidagi h1” degani. main ga berilgan max-width va margin: 0 auto mazmunni markazga olib, keng ekranda qatorlarni haddan tashqari cho’zilishdan saqlaydi. Ko’nikmalar ro’yxati Flexbox bilan “nishonchalar”ga aylandi, flex-wrap esa ular tor ekranda keyingi qatorga o’tishini ta’minlaydi. :hover — sichqoncha ustiga kelganda ishlaydigan holat. Media query telefonda rasm va ismni ustma-ust joylaydi.

5-qadam. Tekshirish va joylash. DevTools’da telefon ko’rinishini sinab ko’ring, so’ng sahifani GitHub Pages yoki Netlify’ga joylang. Tayyor havolani rezyumega qo’shish mumkin — bu haqda portfolio yaratish maqolasida batafsil.

Keng tarqalgan xatolar

Yopilmagan teg. </p> yoki </section> unutilsa, keyingi elementlar “ichkariga” kirib, sahifa kutilmagan ko’rinish oladi. VS Code’da qatorlarni chiroyli surib (Format Document) yozish xatoni topishni osonlashtiradi.
Fayl yo’li xatosi. src va href faylning HTML faylga nisbatan joyini ko’rsatadi. Rasm images papkasida bo’lsa, images/aziza.jpg deb yozish kerak, faqat aziza.jpg emas. Rasm chiqmasa, DevTools’ning Console yorlig’ida “404” xabarini qidiring.
Fayl nomidagi katta harflar. Windows Aziza.JPG va aziza.jpg ni bir xil deb biladi, hostingdagi server esa yo’q: kompyuterda ishlagan rasm internetda yo’qoladi. Fayl va papka nomlarini kichik lotin harflarida, bo’sh joysiz yozing.
Kesh. CSS’ni o’zgartirdingiz, lekin sahifa avvalgidek. Brauzer eski faylni eslab qolgan: Ctrl + F5 yoki Ctrl + Shift + R bilan to’liq yangilang.
CSS’dagi kichik xatolar. Unutilgan nuqtali vergul, nuqtasiz yozilgan class nomi (.card o’rniga card) yoki HTML’dagi class="card" bilan CSS’dagi .cards mos kelmasligi. DevTools’da noto’g’ri qoida ustidan chizilgan yoki ogohlantirish belgisi bilan ko’rinadi.
Faylni saqlashni unutish. VS Code yorlig’ida oq doiracha bo’lsa — fayl saqlanmagan. File → Auto Save ni yoqib qo’yish mumkin.

Amaliy mashq va tekshiruv ro’yxati

Yuqoridagi loyihani o’zingizga moslang:

O’z ismingiz, shahringiz va 3–4 gaplik ma’lumot yozing.
Ko’nikmalar ro’yxatiga kamida beshta band qo’shing.
“Men haqimda” dan keyin h2 sarlavhali yangi bo’lim qo’shing: “Qiziqishlarim” yoki “O’qiyotgan kurslarim”.
Asosiy rangni o’zgartiring: #1c3d86 ni boshqa rangga almashtiring va matn o’qilishini tekshiring.
Aloqa bo’limiga ikkinchi havola qo’shing (masalan, ijtimoiy tarmoqdagi profilingiz) va ikkala havolani Flexbox bilan yonma-yon joylang.
DevTools’da 375px kenglikda sahifani ko’rib chiqing.
Sahifani bepul hostingga joylab, havolani yaqiningizga yuboring va telefonidan ochib ko’rishini so’rang.

Checklist

DOCTYPE, lang, charset va viewport joyida.
Sahifada bitta h1, sarlavhalar tartib bilan.
Har bir mazmunli rasmda tushunarli alt.
Uslublar alohida style.css faylida, class selektorlari bilan.
Fayl nomlari kichik harflarda, yo’llar to’g’ri.
Telefonda gorizontal aylantirish paydo bo’lmaydi.
Barcha havolalar ishlaydi, sahifa internetda ochiladi.

HTML va CSS — veb-dasturlashning alifbosi. Bu sahifa sizning birinchi loyihangiz bo’lsin: har hafta unga bitta yangi narsa qo’shing va bilimlaringiz qanday o’sayotganini ko’rasiz. Keyingi qadamni tanlashda dasturlashni boshlash haqidagi maqolamiz yordam beradi.

Agar veb-dasturlashni o’qituvchi bilan tizimli o’rganmoqchi bo’lsangiz, assotsiatsiyamizning bepul dasturlash yo’nalishi va boshqa o’quv dasturlari bilan tanishing. Tayyor bo’lsangiz, ariza qoldiring — mutaxassislarimiz siz bilan bog’lanadi.