1-bo‘lim
Veb qanday ishlaydi?
Brauzer manzilni kiritganingizdan sahifa ko'ringunicha nima sodir bo'ladi: mijoz-server, HTTP, DNS va HTML/CSS/JavaScript rollari.
Ushbu bo‘lim mundarijasi
Sayt yaratishni o'rganishdan oldin, internetning qanday ishlashini tushunib olish kerak. Bu bilim keyinchalik ko'p savollarga javob beradi.
Manzilni kiritganingizda nima bo'ladi? #
Brauzerga softromeda.uz deb yozib Enter bosganingizda, bir soniyadan kamroq vaqt ichida quyidagilar sodir bo'ladi:
| Qadam | Nima sodir bo'ladi |
|---|---|
| 1-2 | DNS domen nomini IP manzilga aylantiradi |
| 3 | Brauzer serverga HTTP so'rov yuboradi |
| 4 | Server HTML, CSS, JS fayllarini qaytaradi |
| 5 | Brauzer ularni o'qib, ekranda sahifa quradi |
Kompyuterlar softromeda.uz kabi nomlarni tushunmaydi - ular faqat IP manzillar
(93.184.216.34) bilan ishlaydi. DNS aynan shu tarjimani bajaradi. Odam telefon
raqamini emas, ismni eslab qolgani kabi.
Mijoz va server #
| Mijoz (client) | Server | |
|---|---|---|
| Nima | Brauzer, telefon ilovasi | Doim yoqiq kompyuter |
| Vazifasi | So'rov yuborish, natijani ko'rsatish | So'rovga javob berish |
| Qayerda | Sizning qurilmangizda | Ma'lumot markazida |
| Tillari | HTML, CSS, JavaScript | PHP, Python, Node.js, Java |
- Frontend - foydalanuvchi ko'radigan qism: HTML, CSS, JavaScript. Brauzerda ishlaydi.
- Backend - ko'rinmaydigan qism: server mantiqi, ma'lumotlar bazasi. Serverda ishlaydi.
Ushbu darslik frontend ning poydevori haqida. Ayni o'qiyotgan sahifangiz ham HTML va CSS bilan yaratilgan.
Uchta til, uchta vazifa #
Veb sahifa uch qatlamdan iborat. Ularni odamga qiyoslash mumkin:
Bir xil sahifaning uch qatlami:
<!-- HTML: nima bor -->
<button class="asosiy-tugma">Yuborish</button>/* CSS: qanday ko'rinadi */
.asosiy-tugma {
background: #2563eb;
color: white;
padding: 12px 24px;
border-radius: 8px;
}// JavaScript: nima qiladi
document.querySelector(".asosiy-tugma").addEventListener("click", function () {
alert("Xabaringiz yuborildi!");
});HTML nima? #
HTML - HyperText Markup Language, ya'ni "gipermatnli belgilash tili".
Unda sikl, shart yoki o'zgaruvchi yo'q. HTML - belgilash tili: u mazmunni tavsiflaydi, hisoblamaydi. "Bu sarlavha", "bu paragraf", "bu rasm" deb aytadi, xolos.
Bu kamchilik emas - bu uning vazifasi.
Uni yaratuvchi bilan tanishing:
Tim Berners-Lee
World Wide Web asoschisi. Britaniyalik olim. 1989-yilda Shveytsariyadagi CERN laboratoriyasida ishlaganda olimlar o'rtasida hujjat almashish tizimini o'ylab topdi. HTML, HTTP va birinchi brauzerni yaratdi. Eng muhimi - ixtirosini bepul va ochiq qoldirdi. Agar u patent olganida, internet bugungidek bo'lmasdi.
Vebning qisqacha tarixi #
| Yil | Voqea |
|---|---|
| 1989 | Tim Berners-Lee vebni taklif qiladi |
| 1991 | Birinchi veb-sayt ishga tushadi |
| 1995 | JavaScript yaratiladi (10 kunda!) |
| 1996 | CSS 1 standarti chiqadi |
| 2008 | Birinchi smartfon brauzerlari - mobil davr boshlanadi |
| 2014 | HTML5 rasmiy standart bo'ladi |
| Bugun | HTML Living Standard - doimiy yangilanadigan |
Dunyodagi eng birinchi veb-sayt bugun ham ochiladi: info.cern.ch. U faqat matn va havolalardan iborat - CSS hali yo'q edi.
Brauzer sahifani qanday quradi? #
<html>
<body>
<h1>Salom</h1>
<p>Bu <strong>matn</strong></p>
</body>
</html>Brauzer buni DOM daraxti ga aylantiradi:
html
└── body
├── h1
│ └── "Salom"
└── p
├── "Bu "
└── strong
└── "matn"8-bo'limda ko'rganimizdek, bu oddiy daraxt ma'lumotlar tuzilmasi. CSS shu daraxtdagi tugunlarni tanlab, ularga uslub beradi. JavaScript esa uni o'zgartiradi.
Sizga nima kerak? #
Frontend o'rganish uchun atigi ikki narsa yetarli:
| Vosita | Vazifasi | Tavsiya |
|---|---|---|
| Matn muharriri | Kod yozish | Notepad++, Sublime Text |
| Brauzer | Natijani ko'rish | Chrome, Firefox |
Server, dasturlash muhiti yoki pullik dastur kerak emas. .html faylni ikki marta bosib, brauzerda ochasiz.
F12 tugmasini bosing - DevTools ochiladi. Bu frontend dasturchining eng muhim quroli:
- Elements - sahifa HTML va CSS tuzilishi
- Console - JavaScript xatolari
- Network - yuklangan fayllar
Istalgan saytda F12 bosib, u qanday qurilganini ko'rishingiz mumkin. Bu o'rganishning eng tez yo'li.
Hali kod yozmaymiz - avval kuzatamiz:
- Sevimli saytingizni oching va F12 bosing.
- Elements bo'limida HTML tuzilmasini ko'ring.
<h1>,<p>,<div>teglarini toping. - Biror matn ustiga bosing va o'ng tomonda unga qanday CSS qo'llanganini kuzating.
- Network bo'limini oching va sahifani yangilang - nechta fayl yuklanishini ko'ring.
- Qog'ozga o'zingiz yaratmoqchi bo'lgan saytning taxminiy tuzilmasini chizing.
Xulosa #
- Brauzer manzilni DNS orqali IP ga aylantiradi, so'ng serverga HTTP so'rov yuboradi.
- Server HTML, CSS va JavaScript fayllarini qaytaradi, brauzer ularni sahifaga aylantiradi.
- HTML - tuzilma, CSS - ko'rinish, JavaScript - xatti-harakat.
- HTML dasturlash tili emas, belgilash tili.
- Vebni 1989-yilda Tim Berners-Lee yaratgan va uni bepul qoldirgan.
- Boshlash uchun faqat matn muharriri va brauzer kerak.
Keyingi bo'limda muhitni sozlab, birinchi HTML sahifamizni yozamiz.
O‘qish tarixini saqlamoqchimisiz?
Tizimga kirsangiz, tugatgan bo‘limlaringiz saqlanadi va qoldirgan joyingizdan davom etasiz.
Xatolik topdingizmi?
Imlo xatosi, ishlamaydigan kod yoki noto‘g‘ri ma‘lumotni ko‘rsangiz - bizga xabar bering. Har bir xabar administrator tomonidan ko‘rib chiqiladi.