HTML 0 dan: To‘liq Darslik
📌 Mundarija
1) HTML nima?
HTML (HyperText Markup Language) — web sahifa tuzilishini belgilaydigan belgilash tili. HTML — dizayn emas (CSS), funksionallik emas (JavaScript). HTML — “skelet”.
🎯 Maqsad
Bu sahifada HTML ni 0 dan o‘rganib, oxirida kichik “Portfolio + Darslik” sahifasini yig‘amiz.
2) Kerakli dasturlar
- VS Code (kod yozish)
- Chrome (tekshirish)
- Fayllar:
index.html,style.css,app.js
3) HTML skeleti
<!DOCTYPE html> <html lang="uz"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mening sahifam</title> </head> <body> <h1>Salom!</h1> </body> </html>
4) Matn va sarlavhalar
<h1>...</h1>— eng katta sarlavha (1 ta bo‘lishi yaxshi)<h2>...</h2>— bo‘lim sarlavhasi<p>...</p>— paragraf<strong>,<em>— urg‘u
5) Link va rasm
<a href="https://example.com" target="_blank">Saytga o‘tish</a> <img src="rasm.jpg" alt="Tavsif" width="300">
🧠 Eslatma
alt — accessibility (ko‘rish qiyin bo‘lganlar) va SEO uchun juda muhim.
6) Ro‘yxatlar
UL (nuqtali)
<ul> <li>Birinchi</li> <li>Ikkinchi</li> </ul>
OL (raqamli)
<ol> <li>Qadam 1</li> <li>Qadam 2</li> </ol>
7) Jadval
<table>
<thead>
<tr><th>Ism</th><th>Yosh</th></tr>
</thead>
<tbody>
<tr><td>Ali</td><td>20</td></tr>
</tbody>
</table>8) Forma (input)
Forma — foydalanuvchi ma’lumot kiritadigan joy. Masalan: login, signup, feedback.
<form>
<label>Ism:
<input type="text" name="ism" required>
</label>
<label>Parol:
<input type="password" name="parol" minlength="8">
</label>
<button type="submit">Yuborish</button>
</form>9) Semantik teglar
<header>,<nav>,<main>,<section>,<article>,<footer>
Semantik teglar sahifani tartibli qiladi va SEO/accessibility ni yaxshilaydi.
10) Media va iframe
<audio controls src="audio.mp3"></audio> <video controls width="520"> <source src="video.mp4" type="video/mp4"> </video> <iframe src="https://example.com" width="520" height="300"></iframe>
11) Mini-loyiha: “1 sahifalik portfolio”
- Sarlavha: Ism/Familiya
- Skills: HTML/CSS/JS
- Projectlar: 3 ta karta
- Aloqa: Telefon + Telegram
✅ Natija
Hozirgi sayt uslubida, lekin o‘zingning kontenting bilan “portfolio” tayyor bo‘ladi.
12) Mashqlar
- 3 ta bo‘limli sahifa tuz: “Kirish”, “Darslar”, “Kontakt”.
- Forma qo‘sh: ism, email (xohlasang), xabar.
- Jadval: 5 ta buyruq/izoh jadvali.
📞 Aloqa
Savollar bo‘lsa yozing: