Veb qanday ishlaydi?

Har kuni o'nlab saytlarni ochasiz: yangiliklar, video, onlayn do'kon. Lekin manzil satriga yozib, Enter bosganingizdan keyin bir soniyada nima sodir bo'ladi? Bu darsda veb qanday ishlashini va har bir sayt nimalardan qurilishini tushunib olamiz.

Internet va veb — bir narsa emas

Internet — butun dunyodagi kompyuterlarni bog'lab turuvchi ulkan tarmoq: simlar, kabellar, Wi-Fi, mobil aloqa. Veb (inglizcha World Wide Web — «butun dunyo o'rgimchak to'ri») esa internet ustida ishlaydigan xizmatlardan biri: bir-biriga havolalar orqali bog'langan sahifalar to'plami.

Brauzer va server

Vebda har doim ikki tomon bor:

• Brauzer (inglizcha browser) — sahifalarni ochib ko'rsatadigan dastur: Chrome, Firefox, Edge, Safari. Brauzer — mijoz, u so'raydi.
• Server — sayt fayllari saqlanadigan va kun-u tun yoqiq turadigan kompyuter. Server — xizmat ko'rsatuvchi, u javob beradi.

Manzil satriga sayt nomini yozib, Enter bosganingizda:

1. Brauzer sayt nomi bo'yicha server qayerda joylashganini aniqlaydi (buni internetning «telefon kitobi» — DNS qiladi).
2. Serverga so'rov yuboradi: «Menga shu sahifani bering». So'rov va javob HTTP (yoki xavfsiz HTTPS) degan qoidalar asosida yuboriladi.
3. Server javob sifatida sahifa fayllarini qaytaradi: HTML, CSS, JavaScript va rasmlar.
4. Brauzer fayllarni o'qib, ulardan sahifani «yig'adi» va ekranga chizadi.

Bularning hammasi odatda bir soniyadan kamroq vaqtda sodir bo'ladi.

URL — sahifaning manzili

Har bir sahifaning o'z manzili bor — URL. U bir necha qismdan iborat:

1. 1Protokol — brauzer va server qanday «gaplashishi». https — xavfsiz, shifrlangan aloqa (qulf belgisi). Parol va karta ma'lumotlarini faqat https saytlarga kiriting.
2. 2Domen — saytning nomi. O'zbekiston saytlari ko'pincha .uz bilan tugaydi.
3. 3Yo'l — sayt ichidagi aniq sahifa yoki fayl. Xuddi kompyuterdagi papka yo'li kabi (fayllar haqidagi dars).

Saytning uch qatlami

Har bir veb-sahifa uchta texnologiyadan quriladi. Ularni uy qurilishiga o'xshatish mumkin:

Buni amalda ko'raylik. Quyidagi uchta muharrirda bitta sahifa bosqichma-bosqich qurilgan. Har birida natija darhol pastda ko'rinadi.

1. Faqat HTML

<h1>Mening birinchi sahifam</h1>
<p>Bu sahifa hozircha faqat HTML'dan iborat.</p>
<button>Meni bosing</button>

Hamma narsa bor — sarlavha, matn, tugma — lekin ko'rinishi juda oddiy, tugma esa hech narsa qilmaydi.

2. HTML + CSS

<style>
  body { font-family: sans-serif; text-align: center; background: #f0f6ff; }
  h1 { color: #1f4fa8; }
  button { background: #1f4fa8; color: white; border: none;
           padding: 10px 20px; border-radius: 8px; font-size: 16px; }
</style>

<h1>Mening birinchi sahifam</h1>
<p>Endi CSS ham bor — sahifa chiroyli ko'rinadi.</p>
<button>Meni bosing</button>

Mazmun o'sha, lekin endi ranglar, shrift va bezatilgan tugma bor. Tugma esa haligacha «jim».

3. HTML + CSS + JavaScript

<style>
  body { font-family: sans-serif; text-align: center; background: #f0f6ff; }
  h1 { color: #1f4fa8; }
  button { background: #1f4fa8; color: white; border: none;
           padding: 10px 20px; border-radius: 8px; font-size: 16px; }
</style>

<h1>Mening birinchi sahifam</h1>
<p>Tugma necha marta bosildi: <b id="son">0</b></p>
<button id="tugma">Meni bosing</button>

<script>
  let soni = 0;
  document.querySelector("#tugma").addEventListener("click", function () {
    soni = soni + 1;
    document.querySelector("#son").textContent = soni;
  });
</script>

Tugmani bir necha marta bosing — hisoblagich ishlayapti! Bu kodning hammasini hozir tushunish shart emas: kurs davomida har bir qatorni batafsil o'rganamiz.

Frontend va backend

Veb-dasturchilar odatda ikki guruhga bo'linadi:

• Frontend («old tomon») — foydalanuvchi ko'radigan va bosadigan qism: HTML, CSS, JavaScript. Brauzerda ishlaydi. Bu kurs aynan shu haqida.
• Backend («orqa tomon») — serverda ishlaydigan qism: ma'lumotlar bazasi, ro'yxatdan o'tish, to'lovlar. Python (Django, FastAPI), JavaScript (Node.js) va boshqa tillarda yoziladi.

Ikkalasini ham biladigan dasturchi full-stack («to'liq stek») dasturchi deyiladi.

Har qanday saytning kodini ko'rish mumkin

Veb ochiq: brauzer serverdan olgan HTML, CSS va JavaScript'ni siz ham ko'ra olasiz. Bu o'rganish uchun ajoyib imkoniyat.

• Ctrl + U — sahifaning dastlabki HTML kodini ochadi.
• F12 (yoki sahifada o'ng tugma → Inspect / «Tekshirish») — dasturchi vositalari (DevTools). Elements bo'limida sahifa elementlarini ko'rasiz, Console bo'limida esa JavaScript xabarlarini. Sichqonchani elementlar ustida yurgizsangiz, sahifaning tegishli qismi belgilanadi.

DevTools'da qilgan o'zgarishlaringiz faqat sizning ekraningizda va sahifani yangilaguncha saqlanadi — saytning o'ziga hech narsa bo'lmaydi. Shuning uchun bemalol tajriba qiling.

Mashq

O'zingizni sinang