Birinchi HTML sahifa - HTML va CSS

Endi nazariyadan amaliyotga o'tamiz. Bu bo'lim oxirida sizda brauzerda ochiladigan haqiqiy sahifa bo'ladi.

Muhitni tayyorlash #

Notepad++ sozlamalari #

notepad-plus-plus.org dan yuklab o'rnating.
Settings → Preferences → New Document → Encoding = UTF-8.
Language → H → HTML (yoki faylni .html saqlaganda avtomatik tanlanadi).
Settings → Preferences → Language → Replace by space, hajmi 4.

Faylni brauzerda ochish uchun: Ctrl + Alt + Shift + R (Chrome).

Sublime Text sozlamalari #

Preferences → Settings bo'limiga qo'shing:

JSON

{
    "translate_tabs_to_spaces": true,
    "tab_size": 4,
    "default_encoding": "UTF-8",
    "auto_complete": true,
    "highlight_line": true
}

Emmet - juda katta vaqt tejaydi

Sublime Text uchun Emmet paketini o'rnating (Ctrl+Shift+P → Install Package → Emmet). So'ng ! yozib Tab bossangiz, to'liq HTML shabloni avtomatik yoziladi. ul>li*3 yozib Tab bossangiz - uchta elementli ro'yxat hosil bo'ladi.

Ish papkasini yaratish #

Natija

mening-saytim/
├── index.html          <- bosh sahifa
├── css/
│   └── uslub.css
├── rasmlar/
└── js/

Fayl nomlari qoidalari

Qoida	To'g'ri	Noto'g'ri
Kichik harflar	`index.html`	`Index.HTML`
Bo'shliqsiz	`biz-haqimizda.html`	`biz haqimizda.html`
Lotin harflari	`mahsulotlar.html`	`маҳсулотлар.html`
Bosh sahifa nomi	`index.html`	`bosh.html`

Serverlar index.html faylini avtomatik ochadi. Bo'shliqlar esa URL da %20 ga aylanib, manzilni xunuk qiladi.

HTML hujjat tuzilishi #

index.html faylini yarating va yozing:

HTML

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

    <h1>Salom, dunyo!</h1>
    <p>Bu mening birinchi veb-sahifam.</p>

</body>
</html>

Faylni saqlab, brauzerda oching. Tabriklaymiz - siz veb sahifa yaratdingiz!

Har bir satr nima qiladi? #

Satr	Vazifasi
`<!DOCTYPE html>`	Brauzerga "bu HTML5 hujjat" deb aytadi
`<html lang="uz">`	Butun hujjatning ildizi, tili o'zbekcha
`<head>`	Ko'rinmaydigan ma'lumot: sarlavha, kodlash, uslublar
`<meta charset="UTF-8">`	O'zbekcha harflar to'g'ri ko'rinishi uchun
`<meta name="viewport" ...>`	Telefonda to'g'ri masshtablanish uchun
`<title>`	Brauzer yorlig'idagi matn
`<body>`	Ko'rinadigan hamma narsa shu yerda

head - brauzer uchun, body - foydalanuvchi uchun

Teg nima? #

Teg - burchakli qavslar ichidagi buyruq. Ko'pchilik teglar juft bo'ladi:

HTML

<p>Bu paragraf matni</p>

Qism	Nomi
`<p>`	Ochuvchi teg
`Bu paragraf matni`	Mazmun
`</p>`	Yopuvchi teg (`/` bilan)

Ba'zi teglar yolg'iz (self-closing) - ularda mazmun yo'q:

HTML

<br>            <!-- yangi satr -->
<hr>            <!-- gorizontal chiziq -->
<img src="rasm.jpg" alt="Tavsif">
<meta charset="UTF-8">

Teglarni to'g'ri yoping

HTML

<!-- NOTO'G'RI: teglar kesishgan -->
<p>Bu <strong>matn</p></strong>

<!-- TO'G'RI: ichma-ich -->
<p>Bu <strong>matn</strong></p>

Oxirgi ochilgan teg birinchi yopilishi kerak - xuddi qavslar kabi (5-bo'lim, Stek).

Atributlar #

Atributlar tegga qo'shimcha ma'lumot beradi. Ular ochuvchi tegda yoziladi:

HTML

<a href="https://softromeda.uz" target="_blank">Saytga o'tish</a>
<img src="rasmlar/logo.png" alt="Kompaniya logotipi" width="200">
<p class="muhim-matn" id="birinchi-paragraf">Matn</p>

Atribut	Vazifasi	Qayerda
`href`	Havola manzili	`<a>`
`src`	Fayl manzili	`<img>`, `<script>`
`alt`	Rasm tavsifi	`<img>`
`class`	CSS uchun guruh nomi	Har qanday teg
`id`	Yagona identifikator	Har qanday teg
`title`	Sichqoncha ustiga kelganda maslahat	Har qanday teg
`lang`	Til	Har qanday teg

class va id farqi

class - ko'p elementda takrorlanishi mumkin. "Bu guruhga tegishli".
id - butun sahifada faqat bitta marta ishlatiladi. "Bu aynan o'sha element".

Amalda 95% hollarda class ishlatiladi. id faqat sahifa ichidagi havolalar (#bolim-2) va JavaScript uchun kerak bo'ladi.

Izohlar #

Brauzer ko'rsatmaydigan eslatmalar:

HTML

<!-- Bu izoh, u sahifada ko'rinmaydi -->

<!--
    Ko'p satrli izoh.
    Bo'lim tuzilmasini tushuntirish uchun qulay.
-->

<!-- Asosiy menyu boshlanishi -->
<nav>
    <a href="/">Bosh sahifa</a>
</nav>
<!-- Asosiy menyu tugashi -->

Izohda maxfiy ma'lumot yozmang

HTML izohlari foydalanuvchiga yuboriladi - Ctrl + U bilan har kim ko'ra oladi. Parol, API kalit yoki ichki eslatmalarni u yerga yozmang.

To'liq misol #

HTML

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Husanboy Qodirovning shaxsiy sahifasi">
    <title>Husanboy Qodirov | Frontend dasturchi</title>
</head>
<body>

    <!-- Sarlavha qismi -->
    <header>
        <h1>Husanboy Qodirov</h1>
        <p>Frontend dasturchi &middot; Namangan</p>
    </header>

    <!-- Asosiy mazmun -->
    <main>
        <h2>Men haqimda</h2>
        <p>
            Salom! Men veb-saytlar yarataman. Hozirda
            <strong>HTML</strong>, <strong>CSS</strong> va
            <strong>JavaScript</strong> o'rganmoqdaman.
        </p>

        <hr>

        <h2>Bog'lanish</h2>
        <p>
            Email: <a href="mailto:[email protected]">[email protected]</a><br>
            Telegram: <a href="https://t.me/husanboy">@husanboy</a>
        </p>
    </main>

    <!-- Sahifa pasti -->
    <footer>
        <p>&copy; 2026 Husanboy Qodirov</p>
    </footer>

</body>
</html>

Uslubsiz (CSS siz) sahifa shunday ko'rinadi - brauzerning standart ko'rinishi

Nima uchun bunday oddiy ko'rinadi?

Chunki hali CSS yo'q. Brauzer o'zining standart uslublarini qo'llaydi: sarlavhalar qalin va katta, havolalar ko'k va tagi chizilgan. 8-bo'limdan boshlab buni o'zgartiramiz.

Xatolarni topish #

HTML kechirimli til - xato bo'lsa ham sahifa ochiladi, lekin noto'g'ri ko'rinadi.

HTML

<!-- 1. Yopilmagan teg -->
<p>Birinchi paragraf
<p>Ikkinchi paragraf

<!-- 2. Noto'g'ri ichma-ichlik -->
<strong><p>Matn</strong></p>

<!-- 3. Tirnoq yopilmagan -->
<a href="sahifa.html>Havola</a>

Validator ishlating

validator.w3.org saytiga kodingizni joylashtiring - u barcha xatolarni ko'rsatadi. Bu boshlovchi uchun juda foydali odat.

Foydali klaviatura kombinatsiyalari #

Amal	Notepad++	Sublime Text	Brauzer
Saqlash	`Ctrl`+`S`	`Ctrl`+`S`	-
Izohga olish	`Ctrl`+`Q`	`Ctrl`+`/`	-
Qidirish	`Ctrl`+`F`	`Ctrl`+`F`	`Ctrl`+`F`
Sahifani yangilash	-	-	`F5`
Keshsiz yangilash	-	-	`Ctrl`+`F5`
DevTools	-	-	`F12`
Manba kodni ko'rish	-	-	`Ctrl`+`U`

Amaliy topshiriq

index.html faylini yarating va o'zingiz haqingizda sahifa yozing:

To'g'ri <!DOCTYPE html> va <head> bo'limi bo'lsin.
<title> da ismingiz yozilsin - brauzer yorlig'ida tekshiring.
<h1> da ismingiz, <h2> da kamida ikkita bo'lim sarlavhasi bo'lsin.
Kamida uchta <p> paragraf yozing.
<strong> va <em> bilan ba'zi so'zlarni ajratib ko'rsating.
Har bir bo'limga HTML izoh qo'shing.
Kodni validator.w3.org da tekshiring - xato bo'lmasin.

Xulosa #

Har bir HTML fayl <!DOCTYPE html> bilan boshlanadi.
<head> - brauzer uchun ma'lumot, <body> - foydalanuvchi ko'radigan mazmun.
<meta charset="UTF-8"> o'zbekcha harflar uchun majburiy.
Teglar juft (<p></p>) yoki yolg'iz (<br>) bo'ladi va to'g'ri ichma-ich joylashishi kerak.
Atributlar ochuvchi tegda yoziladi: class, id, href, src, alt.
Fayl nomlari kichik harf, bo'shliqsiz, lotin harflarida bo'lsin.
Kodni validator orqali tekshirish yaxshi odat.

Keyingi bo'limda matn bilan ishlaydigan barcha HTML elementlarini o'rganamiz.

Muhitni tayyorlash #

Notepad++ sozlamalari #

Sublime Text sozlamalari #

Ish papkasini yaratish #

HTML hujjat tuzilishi #

Har bir satr nima qiladi? #

Teg nima? #

Atributlar #

Izohlar #

To'liq misol #

Xatolarni topish #

Foydali klaviatura kombinatsiyalari #

Xulosa #

Xatolik topdingizmi?