1-modul · Kirish

1.2-dars — Veb-dasturlash nima

Ushbu darsda biz veb-dasturlash nima, internet qanday ishlaydi, frontend va backend dasturchilari nima bilan shug'ullanishini va HTML'da teg hamda atributlar nima ekanini bilib olamiz.

🌐

Internet qanday ishlaydi

Internet umuman qanday ishlaydi? Siz brauzerni ochasiz, sayt manzilini kiritasiz — va bir soniyadan so'ng sahifani ko'rasiz. Bu ikki lahza orasida nima sodir bo'ldi?

Restoranni tasavvur qiling. Siz (mehmon) ofitsiantga buyurtma berasiz, u buyurtmani oshxonaga olib boradi, oshpaz tayyorlaydi, ofitsiant olib keladi. Internetda ham deyarli xuddi shunday, faqat odamlar o'rniga kompyuterlar ishlaydi.

🖥️

Klient — bu sizning kompyuteringiz yoki telefoningiz. Aniqrog'i, undagi brauzer (Chrome, Safari, Firefox). Klient — bu ma'lumot so'rovchi tomon. Restoranda mehmon kabi.

🗄️

Server — bu saytni saqlaydigan kuchli kompyuter. U doim yoqilgan va internetga ulangan. Server klientdan so'rov olganda, u sayt fayllarini qaytarib jo'natadi: HTML, CSS, rasmlar. Oshxonadagi oshpaz kabi.

🌍

Internet — bu simlar va routerlar tarmog'i. Ma'lumot ular orqali elektr signallari ko'rinishida sayohat qiladi. Hammasi juda tez — soniyaning bir necha ulushida sodir bo'ladi.

Siz manzil satriga google.com deb kiritganingizda, quyidagilar sodir bo'ladi:

1. Brauzeringiz DNS-serverdan (bu internetning telefon kitobiga o'xshaydi) so'raydi: «google.com qayerda joylashgan?»

2. DNS javob beradi: «google.com'ning IP-manzili — 142.250.185.46». (Har bir saytda shunday raqamli manzil bor.)

3. Brauzer Google serveriga so'rov yuboradi: «Menga o'z bosh sahifangni jo'nat».

4. Google serveri sahifaning HTML kodini, CSS stillarini, rasmlarni va boshqa fayllarni qaytarib jo'natadi.

5. Brauzeringiz barcha ushbu fayllarni konstruktor kabi yig'ib, tayyor sahifani ko'rsatadi.

💡 Xat bilan o'xshashlik

Klient — bu xat yozayotganingizda siz. Server — javob beradigan do'stingiz. DNS-server — bu telefon kitobi: do'stingizga xat jo'natish uchun uning manzilini qarayapsiz. HTTP — bu xatlarni u yoqdan bu yoqqa yetkazib beradigan pochtachi. Hammasi oddiy, shunday emasmi?

⚡

Frontend va Backend — sodda o'xshashlik

Veb-dasturlash ikkita katta sohaga bo'linadi: frontend va backend. Agar ularni bitta jumla bilan ta'riflasak:

🎨 Frontend — bu foydalanuvchi ko'radigan hamma narsa

Frontend («frontend» deb o'qiladi) — bu saytning tashqi qismi. Brauzerda ko'radiganingiz: tugmalar, rasmlar, menyular. Frontend dasturchisi elementlar joylashuvi, ranglar, shriftlar uchun javobgar. Boshqacha aytganda — saytning qanday ko'rinishi uchun.

⚙️ Backend — bu «kapot ostida» ishlaydigan qism

Backend («bekend» deb o'qiladi) — bu saytning ichki qismi. Server, ma'lumotlar bazasi, mantiq. Siz ro'yxatdan o'tayotganingizda, ma'lumotlaringiz tekshiriladi va saqlanadi — bu backend. Foydalanuvchi uni ko'rmaydi, lekin usiz kirish, qidiruv yoki formalarni yuborish bo'lmaydi.

Yana fullstack-dasturchi ham bor — bu ham frontend'ni, ham backend'ni biladigan odam. U saytni boshidan oxirigacha to'liq yarata oladi. Lekin frontend'dan boshlash yaxshiroq — bu osonroq, ko'rgazmaliroq va natija darhol ko'rinadi.

Bizning kursimiz — frontend-dasturlashga kirish. Biz saytlarning tashqi qismini yaratishni o'rganamiz. Lekin yaxshi frontend-dasturchi, hatto u bilan bevosita shug'ullanmasa ham, server qanday ishlashini albatta tushunadi. Shuning uchun biz ikkala sohaning ham asosiy bilimlarini beramiz.

	Frontend	Backend
Nima qiladi	Interfeys, tashqi ko'rinishni yaratadi	Ma'lumotlar va mantiq bilan ishlaydi
Qayerda ishlaydi	Brauzerda (foydalanuvchi kompyuterida)	Serverda (data-markazda)
Texnologiyalar	HTML, CSS, JavaScript	PHP, Python, Node.js, SQL
Misol	Tugma, menyu, kirish formasi	Hisobga kirish, sayt bo'ylab qidiruv
Foydalanuvchiga ko'rinadimi?	Ha	Yo'q

🏠

HTML, CSS, JavaScript — veb'ning uch ustuni

Har qanday veb-sahifa uchta texnologiya asosida quriladi. Uy bilan bog'liq bu o'xshashlikni eslab qoling — u juda ko'rgazmali:

🏗️ HTML — uyning karkasi (TUZILMA)

HTML (HyperText Markup Language) sahifa qanday qismlardan iboratligini belgilaydi. Mana sarlavha, mana matn abzatsi, mana rasm, mana havola. HTML — bu saytning «skeleti». Usiz sahifa mavjud bo'lmaydi. HTML — dasturlash tili emas, balki razmetka (belgilash) tili. Siz shunchaki matnni «belgilaysiz»: brauzerga nima sarlavha, nima esa oddiy abzats ekanini aytasiz.

🎨 CSS — uyning pardozi (CHIROY)

CSS (Cascading Style Sheets) tashqi ko'rinish uchun javobgar. Ranglar, shriftlar, o'lchamlar, bo'shliqlar, elementlar joylashuvi, animatsiyalar. CSS'siz sahifa qoralama kabi ko'rinadi: kulrang fon, qora matn, hammasi bitta ustunda. CSS «chiroy kiritadi». CSS'ni HTML uchun kiyim deb aytish mumkin.

⚡ JavaScript — uyning elektr tarmog'i (XULQ-ATVOR)

JavaScript (JS) interaktivlik qo'shadi. Bosilganda ochiladigan menyu, rasmlar bilan slayder, yuborishdan oldin formani tekshirish, sahifani qayta yuklamasdan yangi kontentni yuklash — bularning barchasini JavaScript qiladi. Agar HTML skelet bo'lsa, CSS teri bo'lsa, u holda JS — bu mushaklar va nervlar. Ular saytni harakatga keltiradi va foydalanuvchi harakatlariga munosabat bildiradi.

Ushbu kursda biz HTML va CSS'ni o'rganamiz. Bu har qanday veb-dasturchi boshlaydigan asos. JavaScript'ni biz o'tmaymiz — bu asoslardan keyin o'rganiladigan alohida katta til. Kursimizni o'tar ekansiz, siz JavaScript'ni yoki veb-dasturlashning boshqa istalgan yo'nalishini keyingi o'rganish uchun mustahkam poydevor qo'yasiz.

💡 Yana bir o'xshashlik: inson tanasi

HTML — bu skelet. U shakl va tuzilmani belgilaydi. CSS — bu teri, sochlar, kiyim. Bu tashqi ko'rinish. JavaScript — bu mushaklar va asab tizimi. Ular harakatlanish va munosabat bildirish imkonini beradi. Uchala qism ham to'laqonli sayt uchun bir xil darajada muhim.

🏷️

HTML tegi nima

Teg (ingliz tilidagi tag — «yorliq», «belgi» so'zidan) — bu brauzer uchun buyruq. Har bir teg brauzerga mazmunni qanday ko'rsatishni aytadi. Keling, misolda ko'rib chiqamiz.

Kelib <h1> tegini olaylik. h harfi heading (sarlavha) degani, 1 raqami esa eng muhim, birinchi darajani bildiradi. Mana u qanday ko'rinadi:

HTML · h1 tegi misoli

<h1>Bu eng asosiy sarlavha</h1>

Qismlarga bo'lib ko'ramiz:

<h1> — bu ochuvchi teg. U brauzerga aytadi: «Diqqat, hozir sarlavha boshlanadi».

Bu eng asosiy sarlavha — bu tegning mazmuni. Sahifada ko'radigan narsangiz.

</h1> — bu yopuvchi teg. U brauzerga aytadi: «Sarlavha tugadi». Nom oldidagi qiya chiziqqa (slesh) e'tibor bering — bu yopuvchi tegning belgisi.

HTML'dagi ko'pchilik teglar juftlashgan. Ularda ochuvchi va yopuvchi teg bor, ular orasida esa — mazmun. Teg — bu qutiga solgandek mazmun joylashtiradigan konteyner.

💡 Ochuvchi tegni yopuvchisidan qanday ajratish mumkin

Ochuvchi: <h1> — shunchaki qavslar ichida harf. Yopuvchi: </h1> — sleshli harf. Slesh — «yopilgan» belgisi. Shunchaki eslab qoling: agar slesh bo'lsa — teg yopiladi. Bo'lmasa — ochiladi.

Mana yana bir misol — <p> tegi (paragraph — abzats):

HTML · p tegi misoli

<p>Bu oddiy matn abzatsi. Brauzer uni tepasi va pastida bo'shliqlari bilan alohida blok sifatida ko'rsatadi.</p>

Bu birgalikda qanday ko'rinishini ko'ring:

HTML · Sarlavha va abzats birgalikda

<h1>Mening birinchi saytim</h1>
<p>Bu mening birinchi matn abzatsim. Men veb-sahifalar yaratishni endigina o'rganyapman.</p>

Ushbu kodni index.html fayliga saqlab, brauzerda ochib ko'ring. Siz qalin va yirik shriftdagi sarlavhani va uning ostida matn abzatsini ko'rasiz. Tabriklayman — siz hozirgina haqiqiy HTML kod yozdingiz!

🏷️

Teg atributi nima

Atribut (ingliz tilidagi attribute — «xususiyat» so'zidan) — bu teg uchun qo'shimcha ma'lumot. Teglarda tegning aynan qanday ishlashi kerakligini ko'rsatuvchi atributlar bo'lishi mumkin.

Atributlar ochuvchi teg ichida, teg nomidan keyin yoziladi. Misol:

HTML · lang atributi bilan teg

<html lang="uz">

Bu yerda lang — bu atribut, "uz" esa — uning qiymati. Ushbu atribut brauzerga aytadi: «Ushbu sahifaning mazmuni o'zbek tilida». Nima uchun bu muhim? Imloni to'g'ri tekshirish uchun, ekran o'quvchilari (ko'r odamlar uchun dasturlar) uchun, qidiruv tizimlari uchun.

Keling, atribut tuzilmasini ko'rib chiqamiz:

lang — bu atribut nomi. Belgilamoqchi bo'lgan xususiyat nomi.

= — tenglik belgisi. U atribut nomini uning qiymati bilan bog'laydi.

"uz" — bu atribut qiymati. U har doim tirnoq ichida (odatda qo'sh tirnoq). Qiymat — bu biz ushbu atributga aytadigan narsa.

Bitta tegda bir nechta atribut bo'lishi mumkin. Mana misol:

HTML · Bir nechta atribut

<html lang="uz" dir="ltr">

Bu yerda ikkita atribut bor: lang="uz" (til — o'zbekcha) va dir="ltr" (matn yo'nalishi — chapdan o'ngga). Atributlar bo'sh joy bilan ajratiladi.

Hozircha biz atributlarni batafsil o'rganmaymiz — ularga keyingi darslarda qaytamiz. Eng muhimi shuni eslab qolish: atributlar — bu tegning qo'shimcha sozlamalari. Ular ochuvchi teg ichida yoziladi va nom="qiymat" ko'rinishida bo'ladi.

💡 Atributlardagi tirnoqlar

Atribut qiymatlari har doim tirnoq ichiga olinadi. Qo'sh (" ") yoki yakka (' ') tirnoqdan foydalanish mumkin. Qo'sh tirnoq — standart. Agar qiymat ichida qo'sh tirnoq bo'lsa, yakka tirnoqdan foydalaning. Lekin boshlang'ich bosqichda hamma narsa uchun shunchaki qo'sh tirnoqdan foydalaning.

🔧

Dasturchi vositalari (DevTools)

Har bir zamonaviy brauzerda o'rnatilgan dasturchi vositalari — DevTools (Developer Tools qisqartmasi) mavjud. Bu istalgan veb-sahifa qanday qismlardan iboratligini ko'rsatadigan sehrli panel. Uning yordamida quyidagilarni qilish mumkin:

🔍 Istalgan sahifaning HTML kodini ko'rish

✏️ Matnni, sarlavhalarni, stillarni to'g'ridan-to'g'ri brauzerda o'zgartirish (o'zgarishlar vaqtinchalik — sahifa yangilanganda ular yo'qoladi)

📱 Sahifa turli qurilmalarda (telefon, planshet) qanday ko'rinishini ko'rish

🐞 Koddagi xatolarni topish

DevTools qanday ochiladi?

Windows: F12 yoki Ctrl + Shift + I tugmalarini bosing

Mac: Cmd + Option + I tugmalarini bosing

Hozir istalgan saytda DevTools'ni ochib ko'raylik. Istalgan saytga kiring (masalan, yandex.ru), F12'ni bosing va kod bilan panelni ko'rasiz. Bu hozir ko'rayotgan sahifangizning HTML kodi. Kod qatorlariga sichqonchani olib borsangiz — brauzerda sahifadagi tegishli element yoritiladi.

Hozir sinab ko'ring:

1. Chrome'da istalgan saytni oching.

2. F12'ni bosing. O'ngda yoki pastda panel paydo bo'ladi.

3. «Elements» (yoki «Elementlar») bo'limini toping. U yerda sahifaning HTML kodini ko'rasiz.

4. Sichqonchani istalgan tegga olib boring — sahifada tegishli qism yoritiladi.

5. Elements panelida biror matnni ikki marta bosib, uni o'zgartirib ko'ring. O'zgarishlar darhol sahifada aks etadi! (Xavotir olmang — bu faqat sizning ekraningizda, sayt o'zgarmaydi.)

💡 Tajriba: istalgan saytni «buzing»

Istalgan saytda DevTools'ni oching, sarlavhani (h1 tegini) toping, uni ikki marta bosing va matnni kulgili biror narsaga o'zgartiring. Sahifa aynan ko'z oldingizda o'zgaradi. Bu «buzish»ga o'xshaydi, lekin aslida siz sahifaning faqat o'z brauzeringizdagi mahalliy nusxasini o'zgartiryapsiz. Boshqa hech kim buni ko'rmaydi. Aksincha, siz HTML kodi ekranda ko'rayotgan narsa bilan qanday bog'liqligini tushunasiz.

DevTools butun kurs davomida sizning eng yaxshi do'stingizga aylanadi. Biz sahifalar tuzilmasini ko'rish, xatolarni tekshirish va tajriba o'tkazish uchun uni tez-tez ishlatamiz.

🌍

Brauzer nima va u HTML'ni qanday o'qiydi

Brauzer — bu HTML kodni o'qiy oladigan va uni chiroyli sahifa ko'rinishida ko'rsata oladigan dastur. Eng ommabop brauzerlar: Chrome (~65% foydalanuvchi), Safari (Apple qurilmalarida), Firefox, Edge.

Siz HTML faylni brauzerda ochganingizda, quyidagilar sodir bo'ladi:

1. Brauzer HTML faylni yuqoridan pastga o'qiydi.

2. U teglardan «daraxt» quradi — bu DOM (Document Object Model) deb ataladi.

3. Qaysi elementlar qayerda, qaysi tartibda joylashganini tushunadi.

4. Agar bo'lsa, stillarni (CSS) qo'llaydi.

5. Sahifani ekranda chizadi.

Shuni tushunish muhim: brauzer kodingizdagi xatolarni «tuzatmaydi». Agar nimadir noto'g'ri yozgan bo'lsangiz, brauzer sahifani noto'g'ri ko'rsatishi yoki umuman ko'rsatmasligi mumkin. Shuning uchun kodni diqqat bilan yozish kerak. Lekin xavotir olmang — xatolar bu normal. Hamma ularni qiladi. Shunchaki har bir o'zgarishdan keyin natijani brauzerda tekshiring.

⚠️ Turli brauzerlar bir xil narsani turlicha ko'rsatishi mumkin

Chrome, Firefox, Safari va Edge sahifalarni ko'rsatish uchun turli xil «dvigatel»lardan foydalanadi. Shuning uchun bir xil kod turli brauzerlarda biroz boshqacharoq ko'rinishi mumkin. Biz asosni o'rganayotganimizda, bu farqlar minimal bo'ladi. Lekin kelajakda, siz professional versstka mutaxassisiga aylanganingizda, saytni barcha ommabop brauzerlarda tekshirish kerak bo'ladi. Bu «kross-brauzer moslik» deb ataladi.

📄

Veb-sahifa qanday qismlardan iborat

Veb-sahifaga qaraganingizda, siz tayyor natijani ko'rasiz. Lekin sahna ortida bir necha xil fayllar yashiringan. Keling, sayt odatda qanday qismlardan iboratligini ko'rib chiqamiz:

📄

HTML fayllar (.html kengaytmasi) — sahifaning tuzilmasi va mazmunini o'z ichiga oladi. Bu asos. Odatda bosh sahifa index.html deb ataladi.

🎨

CSS fayllar (.css kengaytmasi) — stillarni o'z ichiga oladi: ranglar, shriftlar, o'lchamlar, joylashuv.

🖼️

Rasmlar (jpg, png, svg, gif) — suratlar, ikonkalar, logotiplar, fotosuratlar.

⚡

JavaScript fayllar (.js kengaytmasi) — xulq-atvor va interaktivlik uchun javobgar kod.

Ushbu kursda biz faqat HTML fayllar (va oxirida bir oz CSS) yaratamiz. Asoslarni o'rganish uchun bu yetarli. JavaScript'ga tegmaymiz — bu alohida katta mavzu.

📌

Ushbu darsdan nimalarni yodda saqlash muhim

1️⃣

Internet «klient-server» tamoyili bo'yicha ishlaydi. Klient (brauzer) sahifani so'raydi, server uni beradi.

2️⃣

Frontend — bu foydalanuvchi ko'radigan qism (tashqi ko'rinish). Backend — bu server qismi (mantiq).

3️⃣

HTML = tuzilma (karkas). CSS = chiroy (pardoz). JavaScript = xulq-atvor (elektr tarmog'i).

4️⃣

Teg — bu brauzer uchun buyruq. Juftlashgan teg: <h1>matn</h1>. Ochuvchi + mazmun + yopuvchi.

5️⃣

Atribut — bu tegning sozlamasi. Ochuvchi teg ichida yoziladi: <html lang="uz">.

6️⃣

DevTools (F12) — bu dasturchi vositasi. Istalgan saytda uni oching va uning ichdan qanday tuzilganini ko'ring.

✏️

Amaliy topshiriq

Materialni mustahkamlash uchun uchta narsani bajaring:

📝 1-topshiriq. HTML sahifa yarating

about.html faylini yarating. Unda «Men haqimda» matnli <h1> sarlavhasini va o'zingiz haqingizda (kimsiz, nima uchun veb-dasturlashni o'rganishga qaror qildingiz) ikkita <p> abzatsini yozing. Saqlang, brauzerda oching. Tayyor!

🔍 2-topshiriq. Saytni DevTools orqali tadqiq qiling

Istalgan saytni oching (masalan, wikipedia.org). F12'ni bosing, «Elements» bo'limini toping. Sahifadagi <h1> tegini toping. Uning ichidagi matnni ikki marta bosib, o'zingizga xos narsaga o'zgartiring. Sahifa qanday o'zgarishini kuzating. Keyin sahifani yangilang (F5) — o'zgarishlar yo'qoladi.

🧠 3-topshiriq. O'z so'zlaringiz bilan tushuntiring

Daftarga (yoki telefonga) quyidagi savollarga javob yozing: «Teg nima?», «HTML CSS'dan nimasi bilan farq qiladi?», «Frontend nima?». Xuddi do'stingizga tushuntirayotgandek, o'z so'zlaringizdan foydalaning. Bu hammasini tushunganingizni tekshirishning eng yaxshi usuli.

🚀

Keyingi darsda ko'rishguncha!

Ushbu darsda biz internet qanday tuzilganini, frontend va backend dasturchilari nima bilan shug'ullanishini, HTML, CSS va JavaScript nima ekanini bilib oldik, shuningdek teglar, atributlar va DevTools bilan tanishdik. Keyingi darsda biz amaliyotga o'tamiz va o'zimizning birinchi haqiqiy HTML sahifamizni yaratamiz.

Siz ajoyib ishladingiz! 2.1-darsda ko'rishguncha.