Chapter 0 — HTML Asoslari va Document Structure

HTML — veb-sahifaning skeletini (tuzilmasini) tashkil qiluvchi belgilash (markup) tili. Bu bob — har bir HTML hujjatining fundamental tuzilishini o'rgatadi.

---

0.1 HTML Nima?

Simple Explanation

HTML (HyperText Markup Language) — brauzerga "bu qism sarlavha, bu qism paragraf, bu qism rasm" deb aytadigan belgilash tili. U dasturlash tili emas — mantiq emas, faqat struktura va mazmunni tasvirlaydi.

Why Does It Exist?

Brauzer oddiy matnni qanday ko'rsatishni bilmaydi — unga qaysi qism nima ekanini aytish kerak. HTML — aynan shu vazifani bajaradi: mazmunga struktura beradi.

0.2 Asosiy Hujjat Strukturasi

Example

index.html
HTMLNusxalash
01<!DOCTYPE html>
02<html lang="uz">
03<head>
04  <meta charset="UTF-8">
05  <meta name="viewport" content="width=device-width, initial-scale=1.0">
06  <title>Sahifa Sarlavhasi</title>
07</head>
08<body>
09  <h1>Salom, Dunyo!</h1>
10</body>
11</html>

0.3 Meta Teglar

Example

index.html
HTMLNusxalash
01<meta charset="UTF-8">
02<meta name="viewport" content="width=device-width, initial-scale=1.0">
03<meta name="description" content="Sahifa haqida qisqacha tavsif">

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: To'liq, to'g'ri strukturaga ega (DOCTYPE, html, head, body) minimal HTML hujjatini yozing.

🟡 Exercise 2 — Medium

Task: Sahifangizga to'g'ri kodировка, viewport va SEO uchun description meta teglarini qo'shing.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<html>
02<body>
03  <h1>Salom</h1>
04</body>
05</html>

Your Task: Bu hujjatda nimalar yetishmayapti?

<details> <summary>Solution</summary> Yetishmayotgan qismlar: `<!DOCTYPE html>`, `<head>` (va ichidagi `<meta charset>`, `<title>`), `lang` atributi. To'g'ri versiya: ```html <!DOCTYPE html> <html lang="uz"> <head> <meta charset="UTF-8"> <title>Sarlavha</title> </head> <body> <h1>Salom</h1> </body> </html> ``` </details>

📌 Chapter Summary

HTML — mazmunga struktura beruvchi belgilash tili. Har bir hujjat DOCTYPE, <html>, <head> (metama'lumot) va <body> (ko'rinadigan kontent)dan iborat. Meta teglar — kodировка, viewport va SEO uchun muhim.

🎯 Key Takeaways

• HTML — struktura, CSS — stil, JavaScript — xatti-harakat
• Har bir hujjat <!DOCTYPE html> bilan boshlanadi
• <head> — ko'rinmas metama'lumot, <body> — ko'rinadigan kontent
• charset va viewport meta teglar — deyarli har doim kerak

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<!DOCTYPE html>
02<html lang="uz">
03<head>
04  <meta charset="UTF-8">
05  <meta name="viewport" content="width=device-width, initial-scale=1.0">
06  <title>...</title>
07</head>
08<body>...</body>
09</html>

---