HTML (HyperText Markup Language) β bu veb-saytlarning fundamental tili. Har web sahifa HTML bilan boshlanadi. Bu programlash tili emas, balki belgilash tili (markup language) β sahifa kontentini strukturalashtirishga xizmat qiladi. HTML'ni o'rganish veb-rivojlanish (web development) yo'lining birinchi qadami. Bu qo'llanma sizga HTML'ning asosiy tushunchalarini va birinchi sahifangizni qurishni o'rgatadi.
HTML qanday ishlaydi
HTML kod oddiy matn fayl (.html kengaytmali) bo'lib, brauzer uni o'qib veb sahifa yaratadi. Foydalanuvchi siteni ochsa, brauzer HTML kod ichidagi taglarni \"render\" qiladi va vizual sahifa ko'rsatadi.
Misol: HTML kodda <h1>Salom!</h1> yozsangiz, brauzer buni katta sarlavha sifatida ko'rsatadi. <p>Bu paragraf.</p> β oddiy matn paragrafi sifatida.
HTML hujjat strukturasi
Har HTML hujjat standart strukturaga ega:
<!DOCTYPE html>
<html lang=\"uz\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<title>Mening birinchi sahifam</title>
</head>
<body>
<h1>Salom dunyo!</h1>
<p>Bu mening birinchi veb sahifam.</p>
</body>
</html>
DOCTYPE β brauzerga \"bu HTML5 hujjat\" deb signal. html tag butun sahifani o'rab oladi. head β metadata (sahifa nomi, meta teglar). body β foydalanuvchi ko'radigan kontent.
Asosiy HTML taglari
Sarlavhalar: <h1>'dan <h6>'gacha. h1 eng katta, h6 eng kichik. Bir sahifada bitta h1 bo'lishi tavsiya etiladi.
Paragraflar: <p>Matn</p>. Oddiy matn bloki.
Havolalar: <a href=\"https://sayt.uz\">Sayt.uz</a>. href attribut havola URL'i.
Rasmlar: <img src=\"rasm.jpg\" alt=\"Rasm tavsifi\">. src β rasm yo'li, alt β accessibility uchun matn.
Ro'yxatlar: <ul> (tartibsiz, bullet), <ol> (tartibli, raqamli), ichida <li> har element uchun.
Semantic HTML
Semantic HTML β bu kontent ma'nosini ko'rsatuvchi taglar ishlatish. Eski yondashuv <div> bilan hamma narsa qilardi. Semantic HTML aniqroq:
<header> β sahifa boshi (logo, menyu). <nav> β navigatsiya. <main> β asosiy kontent. <article> β alohida maqola. <section> β sahifa bo'limi. <aside> β yon panel. <footer> β sahifa pastki qismi.
Semantic HTML SEO uchun ham foydali (Google sahifa strukturasini yaxshi tushunadi) va accessibility uchun (screen reader'lar foydalanuvchiga to'g'ri tushuntiradi).
Forma elementlari
Forma foydalanuvchidan ma'lumot olish uchun. Asosiy elementlar:
<form> β formani o'rab oladi. <input> β matn maydoni, raqam, parol va h.k. (type attribut bilan). <textarea> β uzun matn maydoni. <select> β dropdown. <button> β tugma.
Misol oddiy forma:
<form action=\"/submit\" method=\"POST\">
<label for=\"ism\">Ism:</label>
<input type=\"text\" id=\"ism\" name=\"ism\" required>
<button type=\"submit\">Yuborish</button>
</form>
Attributlar
Attributlar β tag haqida qo'shimcha ma'lumot. Misol: <a href=\"...\">, <img src=\"...\" alt=\"...\">.
Asosiy attributlar: id (unik identifikator), class (CSS uchun guruh), style (inline CSS), data-* (custom data).
Birinchi sahifa qurish
Birinchi sahifa qurish uchun: 1) Text editor (VS Code, Sublime Text, hatto Notepad). 2) index.html nomli fayl yaratish. 3) Yuqorida ko'rsatilgan standart strukturani yozish. 4) Brauzerda ochish (faylga ikki marta bosing yoki o'ng tugma β \"Brauzerda ochish\").
Faylni yangilash uchun β kodni o'zgartiring va brauzerni qaytadan yuklang (F5).
HTML va CSS bog'liqligi
HTML faqat kontent strukturasi. Vizual dizayn (rang, shrift, joylashuv) β CSS (Cascading Style Sheets) ning ishi. Ikkalasi birga ishlaydi.
Inline CSS: <p style=\"color: red;\">Qizil matn</p>. Internal CSS: <style> tag head ichida. External CSS: alohida .css fayl, <link> bilan ulangan.
Eng yaxshi amaliyot β external CSS. Bu kontent va stylni alohida saqlaydi.
HTML va JavaScript
HTML β strukturasi. CSS β dizayni. JavaScript β interaktivlik. Tugma bosilganda nima sodir bo'lishi, form validatsiya, dinamik kontent β barchasi JavaScript.
<script> tag bilan JavaScript HTML'ga qo'shiladi. Yoki <script src=\"app.js\"></script> bilan tashqi fayl.
Sayt.uz va HTML
Sayt.uz custom CMS PHP'ga asoslangan, lekin oxirgi natija β HTML. Brauzerga yuboriladigan har sahifa HTML5 strukturasida. Semantic HTML keng ishlatilgan, Schema markup bilan boyitilgan.
Yangi boshlovchilar uchun: HTML'ni o'rganishni ham bizning bloglar (asoslar va amaliy misollar) orqali qila olasiz. HTML β birinchi qadam, keyin CSS, JavaScript, va modern framework'lar (React, Vue).