HTML nima va veb-sahifa qanday tuziladi

Brauzerda ko’radigan sarlavha, matn, rasm, havola va tugmalar o’z-o’zidan paydo bo’lmaydi. Dasturchi ularning sahifadagi vazifasini HTML yordamida belgilaydi. Brauzer esa HTML kodini o’qib, foydalanuvchi ko’radigan sahifaga aylantiradi.

Bu dars yakunida siz:

• HTML nima uchun ishlatilishini tushuntira olasiz;
• teg, element va kontent orasidagi farqni bilasiz;
• oddiy HTML kodini yozib, natijasini brauzerda ko’ra olasiz;
• HTML, CSS va JavaScript vazifalarini bir-biridan ajrata olasiz.

HTML nima?

HTML — HyperText Markup Language, ya’ni gipermatnni belgilash tili. U veb-sahifadagi mazmunning tuzilishi va ma’nosini ifodalaydi.

Masalan, oddiy matnning o’zi brauzerga uning vazifasini aytmaydi:

HTML o'rganishni boshladim

Shu matnni <h1> tegi bilan belgilasak, brauzer uni sahifaning asosiy sarlavhasi deb tushunadi:

<h1>HTML o'rganishni boshladim</h1>

HTML brauzerga taxminan shunday ko’rsatmalar beradi:

• <h1> — bu asosiy sarlavha;
• <p> — bu paragraf;
• <a> — bu boshqa manzilga olib boruvchi havola;
• <img> — bu rasm;
• <button> — bu foydalanuvchi bosishi mumkin bo’lgan tugma.

Teg, element va kontent

HTML yozishda uchta atama tez-tez uchraydi: teg, element va kontent. Quyidagi misolni ko’ring:

<p>Bu mening birinchi paragrafim.</p>

Bu yerda:

Yopilish tegida teg nomidan oldin / belgisi yoziladi. Masalan, <h2> elementi </h2> bilan, <p> elementi esa </p> bilan yopiladi.

Birinchi HTML natijasi

Quyidagi kodda sarlavha, paragraf, kichik sarlavha, ro’yxat va havola bor. Kod ostidagi Natija oynasida brauzer ularni qanday ko’rsatishini darhol ko’rishingiz mumkin.

<h1>Mening birinchi sahifam</h1>
<p>Men HTML yordamida veb-sahifa tuzishni o'rganyapman.</p>

<h2>Bugungi rejam</h2>
<ul>
<li>Sarlavha yozish</li>
<li>Paragraf qo'shish</li>
<li>Natijani brauzerda ko'rish</li>
</ul>

<a href="#">Batafsil o'qish</a>

Brauzer teglarning o’zini ko’rsatmaydi. U teglar bildirgan ma’noga qarab natijani chizadi: <h1> katta sarlavha, <p> oddiy paragraf, <ul> esa belgili ro’yxat ko’rinishida chiqadi.

Hozircha natijaning shrift o’lchami va bo’shliqlarini brauzerning standart stili belgilayapti. Keyinchalik CSS yordamida bu ko’rinishni o’zimiz boshqaramiz.

Elementlar ichma-ich joylashadi

Haqiqiy sahifa bir nechta alohida tegdan emas, bir-birining ichiga joylangan elementlardan tuziladi. Masalan, maqola ichida sarlavha va paragraflar bo’lishi mumkin:

<article>
  <h2>HTML haqida</h2>
  <p>HTML sahifaning tuzilishini belgilaydi.</p>
</article>

Bu misolda <article> ota element, uning ichidagi <h2> va <p> esa farzand elementlar hisoblanadi. Ichma-ich yozilgan kodni o’qish oson bo’lishi uchun farzand elementlar odatda ikki bo’sh joy bilan ichkariga suriladi. Bu usul indentatsiya deyiladi.

Atribut elementga qo’shimcha ma’lumot beradi

Ba’zi elementlarga faqat teg nomi yetarli emas. Masalan, havola qayerga olib borishini ham ko’rsatish kerak. Bunday qo’shimcha ma’lumot atribut orqali yoziladi:

<a href="https://learncode.uz">LearnCode saytiga o'tish</a>

Bu yerda:

• a — havola elementining nomi;
• href — manzilni bildiradigan atribut;
• https://learncode.uz — atributning qiymati;
• LearnCode saytiga o'tish — foydalanuvchi ko’radigan havola matni.

Atribut ochilish tegi ichida yoziladi. Uning qiymatini qo’shtirnoq ichida yozish kodni aniq va barqaror qiladi.

HTML, CSS va JavaScript farqi

Frontend sahifa odatda uchta asosiy texnologiya bilan quriladi. Ularning vazifalari bir-biridan farq qiladi:

Buni uyga o’xshatish mumkin: HTML — xonalar va devorlar, CSS — bezak va joylashuv, JavaScript esa chiroq, eshik va boshqa ishlaydigan tizimlardir. Uchovining vazifasi boshqa-boshqa, lekin ular birgalikda to’liq veb-sahifa hosil qiladi.

HTML faylini qanday ochish mumkin?

Birinchi HTML faylingizni yaratish uchun murakkab dastur shart emas:

1. Kompyuteringizda oddiy matn muharririni oching.
2. Quyidagi kodni yozing: <h1>Salom, dunyo!</h1>.
3. Faylni index.html nomi bilan saqlang.
4. Fayl ustiga ikki marta bosib, uni brauzerda oching.
5. Kodni o’zgartirgandan keyin faylni saqlang va brauzerni yangilang.

.html kengaytmasi operatsion tizim va brauzerga bu oddiy matn emas, HTML hujjati ekanini bildiradi. Ko’p loyihalarda bosh sahifa fayli index.html deb nomlanadi.

Ko’p uchraydigan xatolar

• yopilish tegidagi / belgisini unutish: <p>Matn<p>;
• teg nomini xato yozish: <paragraf> o’rniga <p> ishlatiladi;
• elementlarni noto’g’ri tartibda yopish;
• faylni index.html.txt ko’rinishida saqlab qo’yish;
• kod o’zgargach, faylni saqlamasdan brauzerni yangilash.

Brauzer ayrim xatolarni o’zi tuzatishga urinadi. Lekin sahifa ko’rinib turgani kod mutlaqo to’g’ri degani emas. Teglarni tartibli yozish keyingi darslarda murakkabroq sahifalarni tushunishni osonlashtiradi.

Qisqacha xulosa

• HTML veb-sahifaning tuzilishi va mazmun ma’nosini belgilaydi.
• Teg elementning boshlanishi yoki tugashini bildiradi.
• Element ochilish tegi, kontent va ko’pincha yopilish tegidan tuziladi.
• Elementlar bir-birining ichiga joylashishi mumkin.
• Atribut elementga manzil kabi qo’shimcha ma’lumot beradi.
• HTML tuzilish, CSS ko’rinish, JavaScript esa xatti-harakat uchun ishlatiladi.

Keyingi darsda HTML hujjat tuzilishi bilan tanishib, <!doctype html>, <html>, <head> va <body> qismlaridan iborat to’liq sahifa skeletini yozamiz.