Birinchi HTML sahifa: yaratish, brauzerda ochish va ko'rish

Qisqacha: HTML sahifa — .html kengaytmali oddiy matnli fayl. Uni VS Code'da yozib saqlaysiz, keyin brauzerda ochasiz. O'zgartirgach, faylni saqlab, brauzerni yangilaysiz. Live Server kengaytmasi bu yangilashni o'zi qiladi.

Bu darsda

• Loyiha papkasi va index.html faylini yarata olasiz.
• HTML faylni brauzerda uch xil usulda ochasiz.
• file:// va http://localhost manzillari farqini tushuntira olasiz.
• Live Server bilan sahifani avtomatik yangilanadigan qilasiz.
• View Source va Inspect nimasi bilan farq qilishini bilasiz.

Oldin bilishingiz kerak: HTML nima, VS Code bilan tanishuv, Chrome DevTools I: Elements va Console.

1. Nega bu kerak?

O'tgan darsda HTML nima ekanini bildik. Endi eng qiziq qadam: o'z sahifangizni o'z ko'zingiz bilan ko'rasiz.

Bu dars davomida bitta kichik loyiha boshlaymiz — «Bahor» choyxonasining sayti. Keyingi darslarda unga yangi qismlar qo'shib boramiz. HTML qismi oxirida esa uni internetga chiqarasiz.

Bugun uchta ko'nikma olasiz. Birinchisi — fayl yaratish. Ikkinchisi — uni brauzerda ochish. Uchinchisi — o'zgartirib, natijani darhol ko'rish. Dasturchi kuni shu uch qadamning takroridan iborat.

2. Loyiha papkasini yaratish

2.1 Papka — loyihaning uyi

Har bir sayt alohida papkada yashaydi. Unda HTML fayllar, keyinroq rasmlar va CSS fayllar turadi. Fayl nomlash darsidagi qoidani eslang: nomda bo'sh joy va katta harf ishlatmang.

Papkani Explorer'da (macOS'da Finder'da) sichqoncha bilan yaratishingiz mumkin. Lekin terminalda tezroq. Hujjatlar papkasida choyxona papkasini yaratamiz.

Git Bash, macOS yoki Linux terminalida:

cd ~/Documents
mkdir choyxona
cd choyxona
touch index.html
code .

Windows PowerShell'da:

cd ~/Documents
mkdir choyxona
cd choyxona
New-Item index.html
code .

Qatorma-qator:

• cd ~/Documents — Hujjatlar papkasiga o'tish.
• mkdir choyxona — yangi papka yaratish.
• touch index.html yoki New-Item index.html — bo'sh fayl yaratish.
• code . — joriy papkani VS Code'da ochish. Nuqta "shu papka" degani.

Maslahat: code . ishlamasa, VS Code o'rnatilganda "Add to PATH" belgilanmagan bo'lishi mumkin. VS Code darsida buni ko'rgansiz. Unda VS Code'ni oching va File → Open Folder orqali choyxona papkasini tanlang.

2.2 Nega aynan index.html?

Fayl nomi istalgancha bo'lishi mumkin. Lekin bosh sahifa deyarli har doim index.html deb nomlanadi.

Sabab — serverlar odati. Client–server darsida ko'rdik: brauzer serverdan manzil so'raydi. Agar manzil papkani ko'rsatsa (ilmhamroh.uz/), server shu papkadagi index.html ni qidiradi va uni yuboradi. Shuning uchun bosh sahifaga boshqa nom bersangiz, sayt internetda ochilmay qolishi mumkin.

Bo'sh joyni to'ldiring: saytning bosh sahifasi odatda qanday nomlanadi?

3. Birinchi kod

VS Code'ning chap panelida (Explorer) index.html ni bosing va quyidagini yozing:

<h1>Choyxona «Bahor»</h1>
<p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>

Bu ikki tegni o'tgan darsda ko'rdingiz: h1 — asosiy sarlavha, p — paragraf. Hozircha shu ikkisi yetarli.

Diqqat: Bu hali to'liq HTML sahifa emas. Haqiqiy sahifada yana bir nechta majburiy qator bo'ladi. Ularni Hujjat skeleti darsida qo'shamiz. Bugun brauzer ularsiz ham ko'rsatadi — nega shunday ekanini 7-bo'limda ko'rasiz.

Endi faylni saqlang: Ctrl + S (macOS'da Cmd + S).

Saqlanmagan faylning yorlig'ida (tab) nom yonida oq nuqta ● turadi. Saqlagach, nuqta yo'qoladi. Bu nuqtaga qarashni odat qiling — "o'zgartirdim, lekin natija yo'q" muammosining yarmi saqlanmagan fayldan.

Maslahat: File → Auto Save ni yoqsangiz, VS Code faylni o'zi saqlab turadi. Ko'p dasturchilar shunday ishlaydi.

4. Sahifani brauzerda ochish

4.1 Uch usul

1. Ikki marta bosish. Explorer'da (Finder'da) index.html ni ikki marta bosing. U standart brauzerda ochiladi.
2. Sudrab tashlash. Faylni ochiq brauzer oynasiga sudrab olib keling.
3. Terminaldan. Loyiha papkasida turib buyruq bering:

start index.html      # Windows: Git Bash yoki PowerShell
open index.html       # macOS
xdg-open index.html   # Linux

Qaysi usul bo'lmasin, brauzerda shunday ko'rinadi:

Choyxona «Bahor»                               ← katta, qalin
Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.

Tabriklaymiz — bu sizning birinchi veb-sahifangiz!

4.2 Manzil qatoriga qarang

Brauzerning manzil qatorida taxminan shunday yozuv bo'ladi:

file:///C:/Users/Aziz/Documents/choyxona/index.html

URL anatomiyasi darsida URL qaysi qismlardan iboratini ko'rgan edik. Bu yerda sxema — file. Ya'ni brauzer faylni internetdan emas, to'g'ridan-to'g'ri kompyuteringiz diskidan o'qidi. Hech qanday server ishtirok etmadi.

5. Saqlash — yangilash sikli

Sahifaga yangi qator qo'shamiz:

<h1>Choyxona «Bahor»</h1>
<p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>
<p>Manzil: Toshkent, Chilonzor, 7-mavze.</p>

Brauzerga qarang — yangi qator yo'q. Chunki brauzer faylni ochgan paytdagi holatini ko'rsatib turibdi. U fayl o'zgarganini o'zi bilmaydi.

Har safar shu uch qadam:

macOS'da Cmd + S va Cmd + R.

5.1 Qattiq yangilash: Ctrl + Shift + R

Ba'zan F5 bosasiz, lekin eski ko'rinish qoladi. Sabab — kesh. HTTP sarlavhalari darsida ko'rdik: brauzer fayllarning nusxasini saqlab qo'yadi va qayta yuklamaydi.

Bunda qattiq yangilash (hard reload) yordam beradi. U keshni chetlab o'tib, hamma narsani qaytadan yuklaydi:

• Windows va Linux: Ctrl + Shift + R (yoki Ctrl + F5).
• macOS: Cmd + Shift + R.

Hozir, bitta HTML faylda, bu kam kerak bo'ladi. CSS va rasm qo'shganimizda esa tez-tez asqotadi.

Tekshirib ko'ring: Siz kodni o'zgartirib, brauzerda F5 bosdingiz, lekin hech narsa o'zgarmadi. Birinchi navbatda nimani tekshirasiz?

6. Live Server: avtomatik yangilanish

Har safar F5 bosish charchatadi. Live Server kengaytmasi buni o'zi qiladi: faylni saqlashingiz bilan brauzer yangilanadi.

6.1 O'rnatish va ishga tushirish

1. VS Code'da chap paneldagi Extensions bo'limini oching (Ctrl + Shift + X).
2. Qidiruvga Live Server deb yozing.
3. Muallifi Ritwick Dey bo'lgan kengaytmani o'rnating. Kengaytmalar darsidagi qoidani eslang: muallif va yuklanishlar sonini tekshiring.
4. index.html ni oching. Pastki holat qatorida Go Live tugmasi paydo bo'ladi. Uni bosing. Yoki kod ichida sichqonchaning o'ng tugmasini bosib, Open with Live Server ni tanlang.

Brauzerda sahifa ochiladi. Manzil qatoriga qarang:

http://127.0.0.1:5500/index.html

Endi VS Code'da matnni o'zgartiring va Ctrl + S bosing. Brauzer o'zi yangilanadi — F5 kerak emas.

To'xtatish uchun holat qatoridagi Port : 5500 yozuvini bosing.

6.2 Bu manzil nima?

Live Server kompyuteringizda kichik server ishga tushiradi. Endi brauzer faylni diskdan emas, shu serverdan so'rab oladi — xuddi haqiqiy saytdagidek.

• 127.0.0.1 — "shu kompyuterning o'zi" degan maxsus IP manzil. Uning nomi — localhost. IP manzil va port darsida ko'rgansiz.
• 5500 — port, ya'ni server shu kompyuterdagi qaysi "eshik"da tinglayotgani.

Hozir, oddiy HTML uchun, ikkalasi ham bir xil ishlaydi. Lekin JavaScript qismida ba'zi imkoniyatlar (modullar, serverdan ma'lumot olish) file:// da ishlamaydi. Shuning uchun boshidanoq Live Server bilan ishlashni odat qiling.

Maslahat: Microsoft'ning Live Preview kengaytmasi ham bor. U sahifani to'g'ridan-to'g'ri VS Code ichidagi panelda ko'rsatadi. Qaysi birini tanlash — didingizga bog'liq. Bu kursda Live Server'dan foydalanamiz.

Tekshirib ko'ring: Manzil qatorida http://127.0.0.1:5500/menyu.html yozilgan. Sahifani disk o'qiyaptimi yoki server beryaptimi?

7. View Source va Inspect: ikki xil "rentgen"

Sahifaning ichiga qarashning ikki yo'li bor. Ular o'xshaydi, lekin bir xil emas.

7.1 View Source — fayl qanday yuborilgan

Sahifada Ctrl + U bosing (macOS'da Cmd + Option + U). Yangi yorliqda sahifaning manba kodi (source) ochiladi. Bu — server yuborgan faylning aynan o'zi, bitta harfi ham o'zgarmagan.

Bizning faylimiz uchun u shunday:

<h1>Choyxona «Bahor»</h1>
<p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>
<p>Manzil: Toshkent, Chilonzor, 7-mavze.</p>

7.2 Inspect — brauzer nimani qurdi

Endi F12 bosing (macOS'da Cmd + Option + I) va Elements panelini oching. Yoki sarlavha ustida o'ng tugmani bosib, Inspect ni tanlang. Siz boshqacha manzarani ko'rasiz:

<html>
  <head></head>
  <body>
    <h1>Choyxona «Bahor»</h1>
    <p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>
    <p>Manzil: Toshkent, Chilonzor, 7-mavze.</p>
  </body>
</html>

Biz html, head va body deb yozmagan edik. Ularni brauzerning o'zi qo'shdi.

Sababini HTML'dan pikselgacha darsida ko'rgan edik: brauzer HTML'ni o'qib, DOM daraxtini quradi. Qurish paytida u yetishmagan qismlarni o'zi to'ldiradi. Elements paneli — faylni emas, aynan shu tirik DOMni ko'rsatadi.

Nega brauzer yetishmagan qismlarni qo'shadi va bu qachon xavfli — Brauzer HTML'ni qanday tahlil qiladi darsida chuqur ko'ramiz.

Diqqat: Elements panelida matnni o'zgartirsangiz, sahifada ham o'zgaradi. Lekin bu faqat brauzer xotirasida. F5 bosishingiz bilan hammasi asl holiga qaytadi. Faylni o'zgartirish uchun doim VS Code'dan foydalaning.

8. Ko'p uchraydigan xatolar

8.1 Brauzerda teglar ko'rinib qoldi

Sahifada chiroyli sarlavha o'rniga shu matn chiqdi:

<h1>Choyxona «Bahor»</h1> <p>Har kuni soat 7:00 dan ...

Sabab: faylingiz aslida index.html.txt. Windows odatda fayl kengaytmalarini yashiradi. Notepad kabi dasturda "index.html" deb saqlasangiz, oxiriga .txt qo'shilib qolishi mumkin. Brauzer .txt faylni oddiy matn deb ko'rsatadi.

Tuzatish: Explorer'da kengaytmalarni ko'rinadigan qiling. Windows 11'da: View → Show → File name extensions. Keyin faylni index.html ga qayta nomlang. VS Code'da yaratilgan faylda bu muammo bo'lmaydi.

8.2 O'zgarish ko'rinmayapti

Uch sababdan biri:

1. Fayl saqlanmagan — yorliqda ● bor.
2. Siz boshqa faylni tahrirlayapsiz. Masalan, Yuklanmalar papkasidagi nusxani, brauzerda esa Documents dagisi ochiq. Manzil qatoridagi yo'lni VS Code'dagi yo'l bilan solishtiring.
3. Kesh — Ctrl + Shift + R bosing.

8.3 Manzilda %20 paydo bo'ldi

Papka nomi mening saytim bo'lsa, manzil shunday bo'ladi:

file:///C:/Users/Aziz/Documents/mening%20saytim/index.html

%20 — URL ichidagi bo'sh joy. Bu xato emas, sahifa ishlaydi. Lekin manzil xunuk bo'ladi va keyinroq serverlarda muammo chiqarishi mumkin. Nomlarda bo'sh joy o'rniga - ishlating: mening-saytim.

9. Mashqlar

1-mashq (oson): Ikkinchi sahifa

choyxona papkasida menyu.html faylini yarating. Unga h1 bilan "Bugungi menyu" sarlavhasini va p bilan ikkita taomni yozing. Faylni brauzerda oching.

<h1>Bugungi menyu</h1>
<p>Osh — 35 000 so'm</p>
<p>Kabob — 25 000 so'm</p>

2-mashq (o'rta): Ikki manzil

index.html ni avval ikki marta bosib, keyin Live Server orqali oching. Ikkala manzilni ham yozib oling. Keyin har birida matnni o'zgartirib, Ctrl + S bosing. Qaysi birida sahifa o'zi yangilandi?

file:///C:/Users/Aziz/Documents/choyxona/index.html
http://127.0.0.1:5500/index.html

3-mashq (qiyin): Brauzer nimani qo'shdi?

index.html ning View Source (Ctrl + U) va Elements (F12) ko'rinishlarini solishtiring. Qaysi teglar faqat Elements'da bor? Keyin Elements'da sarlavha matnini "Choyxona «Navro'z»" ga o'zgartiring va F5 bosing. Nima bo'ldi va nega?

10. Real ishda

• Har kuni shu sikl. Katta loyihalarda ham ish "o'zgartir → saqla → natijani ko'r" siklida ketadi. Faqat Live Server o'rniga boshqa vositalar ishlaydi. Masalan, React loyihalarida Vite (kursda alohida o'rganamiz) sahifani http://localhost:5173 da ko'rsatadi va xuddi shunday o'zi yangilaydi.
• "Menda ishlayapti" muammosi. Mijoz "saytda eski narsa turibdi" desa, tajribali dasturchining birinchi maslahati — Ctrl + Shift + R.
• View Source va Inspect — boshqa saytlar qanday qurilganini o'rganishning eng tez yo'li. Ko'p dasturchilar o'zlarining birinchi HTML'ini shunday o'rgangan.

Xulosa

• HTML sahifa — .html kengaytmali oddiy matnli fayl; bosh sahifa odatda index.html.
• Ish sikli: o'zgartirish → Ctrl + S → brauzerda F5; kesh xalaqit bersa — Ctrl + Shift + R.
• file:// — brauzer faylni diskdan o'qiydi; http://127.0.0.1:5500 — kompyuterdagi server beradi.
• Live Server faylni saqlashingiz bilan sahifani o'zi yangilaydi.
• View Source — server yuborgan fayl; Inspect (Elements) — brauzer qurgan tirik DOM.

Keyingi dars: Teg, element va atribut — HTML'ning "grammatikasi": teg qanday yoziladi, element nima va atribut unga qanday ma'lumot qo'shadi.

Manbalar

• MDN: "Creating your first website" va "What is a URL?" — developer.mozilla.org
• VS Code hujjatlari: "HTML in Visual Studio Code" — code.visualstudio.com