YouTube  Qo'shilish
Bosh sahifa Wiki HTML

HTML

HTML — web sahifalarning tuzilmasini yaratish uchun ishlatiladigan belgilash tili. HTML inglizcha HyperText Markup Language so‘zlarining qisqartmasi bo‘lib, brauzerga sahifadagi matn, sarlavha, rasm, havola, forma va boshqa elementlar qanday joylashishini bildiradi.

HTML dasturlash tili emas, balki markup language hisoblanadi. U sahifaning mantiqiy tuzilmasini belgilaydi. Dizayn ko‘rinishi CSS orqali, interaktiv harakatlar esa JavaScript orqali boshqariladi.

Vazifasi

HTML web sahifadagi asosiy elementlarni tuzish uchun ishlatiladi.

HTML orqali quyidagilar yaratiladi:

  • sarlavhalar;
  • paragraflar;
  • havolalar;
  • rasmlar;
  • ro‘yxatlar;
  • jadvallar;
  • formalar;
  • tugmalar;
  • sahifa bo‘limlari;
  • video va audio elementlar;
  • metadata;
  • semantic layout.

Masalan, maqola sahifasida sarlavha, matn, muallif nomi, rasm va havolalar HTML elementlari orqali yoziladi.

HTML qanday ishlaydi?

Brauzer serverdan HTML faylni oladi va uni o‘qib sahifa ko‘rinishiga aylantiradi. HTML elementlari brauzerga qaysi qism sarlavha, qaysi qism matn, qaysi qism rasm yoki havola ekanini bildiradi.

Oddiy jarayon:

  • foydalanuvchi saytga kiradi;
  • brauzer serverdan HTML faylni oladi;
  • HTML kod tahlil qilinadi;
  • brauzer DOM daraxtini yaratadi;
  • CSS yordamida ko‘rinish beriladi;
  • JavaScript orqali interaktivlik qo‘shiladi;
  • foydalanuvchiga tayyor sahifa ko‘rsatiladi.

HTML web sahifaning skeleti vazifasini bajaradi.

HTML element

HTML element — sahifadagi alohida qismni bildiradigan markup birligi. Element odatda ochuvchi tag, kontent va yopuvchi tagdan iborat bo‘ladi.

Misol:

<p>Bu paragraf matni</p>

Bu yerda:

  • <p> — ochuvchi tag;
  • Bu paragraf matni — kontent;
  • </p> — yopuvchi tag.

Ba’zi HTML elementlar yopuvchi tag talab qilmaydi. Masalan, rasm chiqarish uchun ishlatiladigan <img> elementi.

Tag

Tag — HTML elementni belgilash uchun ishlatiladigan maxsus yozuv. Taglar burchakli qavslar ichida yoziladi.

Keng ishlatiladigan HTML taglar:

  • <html> — HTML hujjatning asosiy elementi;
  • <head> — sahifa haqida metadata saqlaydi;
  • <body> — foydalanuvchiga ko‘rinadigan qism;
  • <h1> — asosiy sarlavha;
  • <p> — paragraf;
  • <a> — havola;
  • <img> — rasm;
  • <div> — umumiy blok;
  • <span> — inline element;
  • <form> — forma.

Taglar sahifa tuzilmasini brauzerga tushunarli qiladi.

HTML hujjat tuzilmasi

Oddiy HTML hujjat bir nechta asosiy qismlardan iborat bo‘ladi.

Asosiy tuzilma:

<!DOCTYPE html>

<html>

<head>

<title>Sahifa nomi</title>

</head>

<body>

<h1>Salom</h1>

</body>

</html>

Bu tuzilmada head qismi sahifa haqida ma’lumot saqlaydi, body qismi esa foydalanuvchiga ko‘rinadigan kontentni o‘z ichiga oladi.

Head — HTML hujjatning metadata saqlanadigan qismi. Bu qismdagi ma’lumotlar odatda sahifaning o‘zida to‘g‘ridan-to‘g‘ri ko‘rinmaydi, lekin brauzer, qidiruv tizimlari va boshqa xizmatlar uchun muhim.

head ichida quyidagilar bo‘lishi mumkin:

  • sahifa nomi;
  • meta description;
  • charset;
  • viewport sozlamasi;
  • CSS fayl havolasi;
  • favicon;
  • Open Graph ma’lumotlari;
  • SEO bilan bog‘liq metadata.

Masalan, <title> elementi brauzer tabida ko‘rinadigan sahifa nomini belgilaydi.

Body

Body — foydalanuvchiga ko‘rinadigan sahifa kontenti joylashadigan qism. Matn, rasm, tugma, forma, jadval va boshqa elementlar body ichida yoziladi.

body ichida quyidagilar bo‘lishi mumkin:

  • header;
  • navbar;
  • main content;
  • sectionlar;
  • articlelar;
  • sidebar;
  • footer;
  • forma;
  • rasm va video;
  • scriptlar.

Brauzer foydalanuvchiga asosan body ichidagi kontentni ko‘rsatadi.

Sarlavhalar

HTML’da sarlavhalar <h1> dan <h6> gacha bo‘lgan taglar bilan belgilanadi.

Sarlavha taglari:

  • <h1> — eng asosiy sarlavha;
  • <h2> — katta bo‘lim sarlavhasi;
  • <h3> — ichki bo‘lim sarlavhasi;
  • <h4> — kichikroq bo‘lim;
  • <h5> — yanada kichik sarlavha;
  • <h6> — eng kichik sarlavha darajasi.

Sarlavhalar sahifa tuzilmasini tartibga soladi va SEO uchun ham ahamiyatga ega.

Paragraf va matn

Matnli kontent HTML’da odatda <p> elementi orqali yoziladi. Bu element paragrafni bildiradi.

Matn bilan ishlashda quyidagi taglar ham uchraydi:

  • <strong> — muhim matn;
  • <em> — urg‘u berilgan matn;
  • <br> — yangi qator;
  • <blockquote> — iqtibos;
  • <code> — kod ko‘rinishidagi matn;
  • <pre> — oldindan formatlangan matn.

HTML matnning tuzilmasini belgilaydi, uning rangi, o‘lchami va shriftini esa CSS boshqaradi.

Havola

HTML’da havola <a> elementi orqali yaratiladi. Havola foydalanuvchini boshqa sahifa, fayl yoki saytga olib o‘tadi.

Misol:

<a href="https://uzbekdevs.uz">UzbekDevs</a>

Bu yerda:

  • <a> — havola elementi;
  • href — manzil atributi;
  • UzbekDevs — foydalanuvchiga ko‘rinadigan matn.

Havolalar ichki sahifalar, tashqi saytlar, email manzillar va fayl yuklash manzillariga yo‘naltirishi mumkin.

Rasm

HTML’da rasm <img> elementi orqali chiqariladi.

Misol:

<img src="logo.png" alt="Sayt logotipi">

Bu yerda:

  • src — rasm manzili;
  • alt — rasm chiqmasa yoki screen reader ishlatilsa ko‘rinadigan matn.

alt atributi accessibility va SEO uchun muhim hisoblanadi.

Ro‘yxatlar

HTML’da ro‘yxatlar tartibli yoki tartibsiz bo‘lishi mumkin.

Ro‘yxat turlari:

  • <ul> — tartibsiz ro‘yxat;
  • <ol> — tartibli ro‘yxat;
  • <li> — ro‘yxat elementi.

Misol:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

Ro‘yxatlar menyu, punktlar, qadamlar va ma’lumotlarni tartib bilan ko‘rsatishda ishlatiladi.

Jadval

HTML’da jadval ma’lumotlarni qator va ustun ko‘rinishida berish uchun ishlatiladi.

Jadval taglari:

  • <table> — jadval;
  • <thead> — jadval sarlavha qismi;
  • <tbody> — jadval asosiy qismi;
  • <tr> — jadval qatori;
  • <th> — sarlavha ustuni;
  • <td> — oddiy katak.

Jadvallar narxlar, statistikalar, ro‘yxatlar va solishtirish ma’lumotlarini ko‘rsatishda ishlatiladi.

Forma

HTML formalar foydalanuvchidan ma’lumot olish uchun ishlatiladi. Login, ro‘yxatdan o‘tish, qidiruv, aloqa va buyurtma sahifalarida forma ko‘p uchraydi.

Forma elementlari:

  • <form> — forma konteyneri;
  • <input> — kiritish maydoni;
  • <textarea> — ko‘p qatorli matn maydoni;
  • <select> — tanlash ro‘yxati;
  • <option> — select ichidagi variant;
  • <button> — tugma;
  • <label> — input nomi.

Masalan, login formasi email va parol kiritish maydonlaridan iborat bo‘ladi.

Input

Input — foydalanuvchidan ma’lumot olish uchun ishlatiladigan element.

Input turlari:

  • text — oddiy matn;
  • email — email;
  • password — parol;
  • number — son;
  • date — sana;
  • checkbox — belgilash katagi;
  • radio — variant tanlash;
  • file — fayl yuklash;
  • submit — forma yuborish.

Input turlari brauzerga kiritilayotgan ma’lumot shaklini tushunishga yordam beradi.

Attribute

Attribute — HTML elementga qo‘shimcha ma’lumot beradigan xususiyat. Attribute ochuvchi tag ichida yoziladi.

Misol:

<input type="email" placeholder="Email kiriting" required>

Bu yerda:

  • type — input turi;
  • placeholder — ko‘rsatma matni;
  • required — majburiy maydon.

Keng ishlatiladigan atributlar:

  • id;
  • class;
  • src;
  • href;
  • alt;
  • title;
  • type;
  • name;
  • value;
  • required.

Semantic HTML

Semantic HTML — sahifa qismlarini ma’nosiga mos taglar bilan yozish usuli. Bu brauzer, qidiruv tizimi va yordamchi texnologiyalarga sahifa tuzilmasini yaxshiroq tushunishga yordam beradi.

Semantic taglar:

  • <header> — yuqori qism;
  • <nav> — navigatsiya;
  • <main> — asosiy kontent;
  • <section> — bo‘lim;
  • <article> — mustaqil maqola yoki kontent;
  • <aside> — yon kontent;
  • <footer> — pastki qism.

Masalan, maqola sahifasida asosiy matn <article> ichida joylashishi mumkin.

HTML va SEO

HTML sahifaning qidiruv tizimlari tomonidan tushunilishiga ta’sir qiladi. To‘g‘ri sarlavha tuzilmasi, semantic taglar, meta ma’lumotlar va alt atributlari SEO’da muhim o‘rin tutadi.

HTML’da SEO bilan bog‘liq qismlar:

  • <title>;
  • meta description;
  • heading taglar;
  • canonical link;
  • semantic structure;
  • image alt;
  • internal links;
  • structured data;
  • sahifa tezligiga ta’sir qiluvchi markup.

Qidiruv tizimlari HTML tuzilmasi orqali sahifadagi asosiy mavzu va kontentni aniqlaydi.

HTML va accessibility

Accessibility — web sahifadan turli imkoniyatga ega foydalanuvchilar ham foydalana olishini ta’minlash yondashuvi. HTML accessibility uchun muhim asos yaratadi.

Accessibility bilan bog‘liq HTML qismlar:

  • alt atributi;
  • to‘g‘ri heading tartibi;
  • label bilan bog‘langan inputlar;
  • semantic taglar;
  • button va linklardan to‘g‘ri foydalanish;
  • formadagi xatoliklarni aniq ko‘rsatish;
  • keyboard orqali ishlash imkoniyati.

Masalan, <label> elementi input nima uchun ishlatilishini tushuntiradi.

HTML va CSS

HTML sahifa tuzilmasini, CSS esa sahifa ko‘rinishini boshqaradi.

Farqlar:

  • HTML — kontent va tuzilma;
  • CSS — dizayn va joylashuv;
  • HTML sarlavha, matn, rasm va formalarni belgilaydi;
  • CSS rang, o‘lcham, masofa, layout va animatsiyalarni belgilaydi.

Masalan, HTML tugmani yaratadi, CSS esa uning rangi va shaklini belgilaydi.

HTML va JavaScript

HTML sahifadagi elementlarni yaratadi, JavaScript esa ularni interaktiv qiladi.

JavaScript HTML elementlar bilan quyidagi amallarni bajarishi mumkin:

  • element matnini o‘zgartirish;
  • tugma bosilishini kuzatish;
  • forma qiymatini olish;
  • yangi element qo‘shish;
  • elementni yashirish yoki ko‘rsatish;
  • API’dan kelgan ma’lumotni sahifaga chiqarish.

Brauzer HTML asosida DOM yaratadi, JavaScript esa DOM bilan ishlaydi.

Dasturlashdagi o‘rni

HTML frontend dasturlashning asosiy texnologiyalaridan biridir. Har qanday web sahifa HTML tuzilmasiga ega bo‘ladi.

HTML quyidagi joylarda ishlatiladi:

  • landing page;
  • blog sahifasi;
  • internet do‘kon;
  • admin panel;
  • forma sahifalari;
  • dokumentatsiya;
  • email template;
  • frontend componentlar;
  • SEO sahifalar;
  • web ilovalar.

HTML CSS va JavaScript bilan birga zamonaviy web interfeyslarning asosini tashkil qiladi.

Bog‘liq tushunchalar

Frontend, CSS, JavaScript, Browser, DOM, SEO, Accessibility, UI, Web sahifa, URL, HTTP, Responsive dizayn