HTML asoslari: 30 daqiqada birinchi veb-sahifangizni yarating

Har bir veb-sayt — Google ham, informatik.uz ham — HTML (HyperText Markup Language) asosida qurilgan. HTML dasturlash tili emas, balki belgilash tili: u brauzerga sahifada nima va qayerda turishini aytadi. Uni o‘rganish uchun faqat matn muharriri va brauzer kifoya.

Qadam 1: Fayl yarating

1. Notepad (yoki bepul VS Code) ni oching.
2. Quyidagi kodni yozing.
3. Fayl → Saqlash: nomi index.html, kodlash — UTF-8.
4. Faylga ikki marta bosing — u brauzerda ochiladi.

1<!DOCTYPE html>
2<html lang="uz">
3<head>
4  <meta charset="UTF-8">
5  <title>Mening birinchi sahifam</title>
6</head>
7<body>
8  <h1>Salom, dunyo!</h1>
9  <p>Bu mening birinchi veb-sahifam.</p>
10</body>
11</html>

Hujjat tuzilmasi

• <!DOCTYPE html> — bu HTML5 hujjat ekanini bildiradi.
• <head> — xizmat ma’lumotlari (sarlavha, kodlash) — sahifada ko‘rinmaydi.
• <body> — sahifada ko‘rinadigan barcha kontent.

Asosiy teglar

1<h1>Eng katta sarlavha</h1>
2<h2>Kichikroq sarlavha</h2>
3<p>Oddiy paragraf. <b>Qalin</b> va <i>kursiv</i> matn.</p>
4
5<a href="https://informatik.uz">Informatik.uz saytiga o‘tish</a>
6
7<img src="rasm.jpg" alt="Rasm tavsifi" width="300">
8
9<ul>
10  <li>Python</li>
11  <li>HTML</li>
12</ul>
13
14<ol>
15  <li>Birinchi qadam</li>
16  <li>Ikkinchi qadam</li>
17</ol>

Jadval yaratish

1<table border="1">
2  <tr>
3    <th>Fan</th>
4    <th>Baho</th>
5  </tr>
6  <tr>
7    <td>Informatika</td>
8    <td>5</td>
9  </tr>
10  <tr>
11    <td>Matematika</td>
12    <td>4</td>
13  </tr>
14</table>

Bir oz chiroy: CSS

HTML — sahifaning “skeleti”, CSS esa uning “kiyimi”. <head> ichiga qo‘shing:

1body { font-family: Arial, sans-serif; background: #f0f7ff; margin: 40px; }
2h1 { color: #1e3a8a; }
3p { font-size: 18px; line-height: 1.6; }

Bu kodni <style> ... </style> teglari orasiga joylashtiring.

Muhim qoidalar

• Ko‘pchilik teglar juft: ochiluvchi <p> va yopiluvchi </p>.
• Ba’zi teglar yakka: <img>, <br>, <meta>.
• Teglar to‘g‘ri ichma-ich joylashsin: <p><b>matn</b></p> — to‘g‘ri, <p><b>matn</p></b> — noto‘g‘ri.
• Rasmlarga har doim alt atributini yozing — ko‘zi ojiz foydalanuvchilar va SEO uchun muhim.

Amaliy topshiriq: “Men haqimda” sahifasi

O‘quvchilar quyidagilarni o‘z ichiga olgan sahifa yaratadi:

1. Ism-familiya (h1) va qisqacha o‘zi haqida (p).
2. Rasm (o‘zi yoki sevimli hayvoni).
3. Qiziqishlari ro‘yxati (ul).
4. Dars jadvali (table).
5. Sevimli saytga havola (a).

Keyingi qadam: CSS’ni chuqurroq o‘rganib, sahifani zamonaviy va mobil qurilmalarga moslashuvchan qiling. Shundan so‘ng JavaScript bilan sahifaga “jon” kiritish mumkin.