Birinchi veb-sahifa

Bu darsda haqiqiy veb-sahifani o'z kompyuteringizda, noldan yaratasiz: papka ochasiz, index.html faylini yozasiz va uni brauzerda ko'rasiz. Oxirida esa har saqlaganingizda sahifani o'zi yangilab turadigan qulay usulni — Live Serverni o'rnatamiz.

1-qadam. Loyiha papkasi

Har bir sayt — bu oddiy papka, ichida esa fayllar: HTML sahifalar, CSS uslublar, JavaScript kodlar va rasmlar. Shuning uchun ish papka yaratishdan boshlanadi.

1. Kompyuteringizda qulay joyda (masalan, Hujjatlar yoki Ish stolida) yangi papka yarating va uni veb-sayt deb nomlang. Nomda bo'sh joy va o'zbekcha maxsus belgilar ishlatmang — bu keyinchalik muammolardan saqlaydi (fayllar va papkalar darsini eslang).
2. VS Code'ni oching va File → Open Folder... ni tanlang. veb-sayt papkasini topib, Select Folder tugmasini bosing.
3. «Do you trust the authors...?» degan savol chiqsa — Yes, I trust the authors ni bosing (papkani o'zingiz yaratdingiz).

Endi chap tomondagi Explorer bo'limida VEB-SAYT degan bo'sh papka ko'rinadi.

2-qadam. index.html fayli

Explorer sarlavhasidagi New File (yangi fayl) belgisini bosing va fayl nomini index.html deb yozib, Enter ni bosing. Fayl muharrirda ochiladi.

Emmet: bitta belgi — tayyor qolip

Har bir HTML sahifa bir xil «skelet» bilan boshlanadi. Uni har safar qo'lda yozish shart emas: VS Code'da Emmet degan yordamchi o'rnatilgan. Bo'sh index.html faylida undov belgisini — ! — yozing. Pastda taklif oynachasi chiqadi:

1. 1Yangi yaratilgan index.html fayli. Uning yonidagi <> belgisi — bu HTML fayl ekanini bildiradi.
2. 2Faylga faqat bitta belgi yozildi: !
3. 3Emmet Abbreviation («Emmet qisqartmasi») taklifi. Tab yoki Enter ni bossangiz, ! o'rniga to'liq HTML qolip paydo bo'ladi.

Natijada fayl mana bunday ko'rinishga keladi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Bu qatorlarning har birini keyingi darsda batafsil o'rganamiz. Hozircha qisqacha:

3-qadam. Sahifaga mazmun yozamiz

Qolipda ikki o'zgarish qiling: lang="en" ni lang="uz" ga, Document ni Mening saytim ga almashtiring. Keyin <body> ichiga sarlavha va matn yozing:

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

<h1> — katta sarlavha, <p> — matn xatboshisi (inglizcha paragraph). Endi faylni saqlang: Ctrl + S (macOS'da Cmd + S).

4-qadam. Brauzerda ochamiz

Eng oddiy usul: kompyuteringizdagi veb-sayt papkasini oching va index.html faylini ikki marta bosing. U standart brauzeringizda ochiladi:

1. 1Manzil file:/// bilan boshlanyapti: brauzer sahifani internetdan emas, to'g'ridan-to'g'ri kompyuteringizdagi fayldan ochdi. Sahifani hozircha faqat siz ko'ra olasiz.

Tabriklaymiz — bu sizning birinchi veb-sahifangiz! Endi ish sikli quyidagicha bo'ladi:

1. VS Code'da kodni o'zgartirasiz;
2. saqlaysiz (Ctrl + S);
3. brauzerga o'tib, sahifani yangilaysiz (F5 yoki Ctrl + R).

Sinab ko'ring: sarlavhaga ismingizni yozing, saqlang va brauzerni yangilang.

5-qadam. Live Server — sahifa o'zi yangilanadi

Har safar brauzerga o'tib F5 bosish tez orada zeriktiradi. Live Server kengaytmasi buni o'zi qiladi: faylni saqlashingiz bilan brauzerdagi sahifa avtomatik yangilanadi. Bundan tashqari, u sahifani xuddi haqiqiy saytdek — kichik veb-server orqali ochadi.

O'rnatish

1. Chapdagi faollik panelida kengaytmalar belgisini bosing (yoki Ctrl + Shift + X).
2. Qidiruv maydoniga live server deb yozing.
3. Muallifi Ritwick Dey bo'lgan Live Server kengaytmasini tanlab, Install tugmasini bosing.

1. 1Kengaytmalar (Extensions) bo'limi belgisi.
2. 2Qidiruv maydoni: live server.
3. 3Install — o'rnatish. Bir necha soniyada tayyor bo'ladi, VS Code'ni qayta ishga tushirish shart emas.

Ishga tushirish: «Go Live»

O'rnatilgach, VS Code oynasining eng pastki chizig'ida — holat satrida — Go Live degan yozuv paydo bo'ladi. index.html ochiq turganida shuni bosing:

Brauzer o'zi ochiladi va sahifangiz endi boshqacha manzilda ko'rinadi:

1. 1127.0.0.1 — «shu kompyuterning o'zi» degan maxsus manzil (uni localhost deb ham yozish mumkin). Ya'ni server ham, brauzer ham — sizning kompyuteringizda. 1-darsdagi «brauzer so'raydi — server javob beradi» sxemasi aynan shu yerda, bitta kompyuter ichida ishlayapti.
2. 25500 — port: bitta kompyuterda bir nechta server ishlashi mumkin, port esa ularni ajratib turadigan «eshik raqami».

Endi sehrni ko'ring: VS Code va brauzerni yonma-yon qo'ying, sarlavha matnini o'zgartirib Ctrl + S bosing — brauzerdagi sahifa o'zi yangilanadi.

HTML'ni tez yozish uchun VS Code imkoniyatlari

Emmet faqat ! bilan cheklanmaydi. Qisqartma yozib Tab bossangiz, u to'liq kodga aylanadi:

Yana bir nechta foydali imkoniyat:

• Teglarni avtomatik yopish. <h1> deb yozsangiz, VS Code yopuvchi </h1> ni o'zi qo'shadi. Ochuvchi tegni o'zgartirsangiz, yopuvchisi ham o'zgaradi.
• Kodni tekislash: Shift + Alt + F (Format Document) — chekinishlarni tartibga keltiradi.
• Izohga aylantirish: qatorni tanlab Ctrl + / — u <!-- --> ichiga olinadi va brauzerda ko'rinmaydi.
• Teg ustida kutish: sichqonchani teg ustida ushlab tursangiz, uning qisqacha tavsifi chiqadi.

Bu saytdagi muharrir

Kurs davomida ko'p misollar shu sahifaning o'zida, jonli muharrirda bo'ladi. U xuddi Live Server kabi ishlaydi: kodni o'zgartirasiz — pastdagi natija darhol yangilanadi. Sinab ko'ring: ismni o'zgartiring yoki yangi qator qo'shing.

<h1>Salom, dunyo!</h1>
<p>Mening ismim Aziz. Men veb-dasturlashni o'rganyapman.</p>
<p>Bugun birinchi sahifamni yaratdim!</p>

E'tibor bering: bu yerda <!DOCTYPE>, <head> va <body> yozilmagan. Qisqa misollarda muharrir ularni o'zi qo'shadi. Lekin kompyuteringizdagi haqiqiy fayllarda to'liq qolipdan foydalaning.

Ko'p uchraydigan muammolar

Mashqlar

<!-- Shu yerga yozing -->

<h1>Men haqimda</h1>
<p>Mening ismim Malika. Men Samarqandda yashayman.</p>
<p>Men chiroyli saytlar yaratishni o'rganyapman.</p>

O'zingizni sinang