HTML teg, element va atribut: HTML'ning grammatikasi

Qisqacha: Teg — burchakli qavsdagi belgi, masalan <p>. Element — ochuvchi teg, ichidagi kontent va yopuvchi teg birgalikda: <p>Salom</p>. Atribut — ochuvchi tegga yoziladigan qo'shimcha ma'lumot: <a href="menyu.html">. HTML sahifa shu uch g'ishtdan quriladi.

Bu darsda

• Teg, element va atribut farqini aniq ayta olasiz.
• Elementlarni to'g'ri tartibda ichma-ich joylay olasiz.
• Bo'sh (void) elementlarni taniysiz va ularni to'g'ri yozasiz.
• Boolean atribut va atribut qiymatidagi qo'shtirnoq qoidalarini bilasiz.
• HTML'da izoh yozasiz va nega uni ehtiyot bilan ishlatish kerakligini tushunasiz.

Oldin bilishingiz kerak: Birinchi sahifa: yaratish, ochish va ko'rish.

1. Nega bu kerak?

O'tgan darsda h1 va p bilan birinchi sahifani yasadik. Ularni ko'chirib yozdik, lekin qoidalarini bilmasdan.

Tilni o'rganishda avval so'zlar, keyin grammatika keladi. HTML'da ham shunday. Bu dars — HTML grammatikasi. U atigi bir nechta qoidadan iborat. Ularni bilsangiz, har qanday sahifaning kodini o'qiy olasiz: Uzum'niki ham, Google'niki ham.

Bundan keyingi hamma darslar shu qoidalarga tayanadi. Shuning uchun sekin, bittama-bitta ko'ramiz.

2. Teg

Teg (tag) — burchakli qavslar < > ichiga yozilgan nom. U brauzerga "bu yerdan boshlab mana bu narsa" deydi.

Teglar odatda juft bo'ladi:

• Ochuvchi teg — <p>. Kontent shu yerdan boshlanadi.
• Yopuvchi teg — </p>. Nom oldida qiya chiziq / turadi. Kontent shu yerda tugaydi.

Oddiy yozuvdagi qo'shtirnoqni eslang. Qo'shtirnoq ochiladi, gap yoziladi, keyin qo'shtirnoq yopiladi. Teglar ham matnni shunday "o'rab" oladi. Faqat qo'shtirnoqdan farqli, ular matnga ma'no beradi.

<p>Osh tayyor bo'ldi.</p>

Bu yerda <p> — ochuvchi, </p> — yopuvchi teg.

3. Element

Element — ochuvchi teg, uning ichidagi kontent va yopuvchi teg birgalikda. Ya'ni butun qator.

Kundalik gapda dasturchilar ko'pincha "p tegi" deyishadi va elementni nazarda tutishadi. Bu xato emas. Lekin intervyuda "teg va element farqi nima?" deb so'rashsa, aniq javob bering: teg — belgi, element — butun birlik.

Bo'sh joyni to'ldiring: <h1>Menyu</h1> elementining kontenti qaysi so'z?

4. Ichma-ich joylash

4.1 Element ichida element

Element ichiga faqat matn emas, boshqa element ham qo'yish mumkin. Masalan, strong — "bu muhim" degan teg (uni Urg'u teglari darsida batafsil ko'ramiz):

<p>Bugun <strong>osh bepul</strong>!</p>

Brauzerda:

Bugun osh bepul!          ← "osh bepul" qalin

Bu yerda strong elementi p elementining ichida. Bunday munosabatning nomlari bor:

• p — ota element (parent).
• strong — bola element (child).
• Bir ota ichida yonma-yon turgan elementlar — qo'shni elementlar (siblings).

Fayl tizimi darsidagi papkalar daraxtini eslang: papka ichida papka. HTML ham xuddi shunday daraxt. Brauzer undan DOM quradi.

4.2 Qoida: oxirgi ochilgan — birinchi yopiladi

Qutichalarni tasavvur qiling. Katta quti ichiga kichigini qo'ydingiz. Yopishda avval kichigini yopasiz, keyin kattasini. Aksincha qilib bo'lmaydi.

To'g'ri — ichkaridagi strong avval yopildi:

<p>Bugun <strong>osh bepul</strong>!</p>

Noto'g'ri — p yopildi, strong esa hali ochiq:

<p><strong>Osh</p> tayyor</strong>

Brauzer bunda xato chiqarmaydi. U o'zicha "tuzatadi". Elements panelida shunday natijani ko'rasiz:

<p><strong>Osh</strong></p><strong> tayyor</strong>

Brauzer strong ni ikkiga bo'ldi va " tayyor" so'zi ham qalin bo'lib qoldi. Katta sahifada bunday "tuzatish" butun bo'limni buzib yuborishi mumkin.

4.3 Chekinish (indent) — daraxtni ko'rinadigan qilish

Bola elementni otasidan 2 bo'sh joy ichkariga suramiz. Brauzer uchun farqi yo'q, lekin odam daraxtni darrov ko'radi:

<p>
  Bugun
  <strong>osh bepul</strong>!
</p>

VS Code'da Tab tugmasi chekinish qo'shadi, Shift + Tab esa olib tashlaydi. Kodni avtomatik tekislashni Formatlash va validatsiya darsida o'rganamiz.

Tekshirib ko'ring: Qaysi qator to'g'ri yopilgan?

1. <p>Narxi: <strong>35 000</p></strong>
2. <p>Narxi: <strong>35 000</strong></p>

5. Atribut

5.1 Atribut nima?

Ba'zan tegning o'zi yetmaydi. Masalan, havola: "bu havola" deyish kam — qayerga olib borishini ham aytish kerak.

Atribut (attribute) — elementga qo'shimcha ma'lumot beradigan yozuv. U doim ochuvchi tegga yoziladi, nom="qiymat" shaklida:

<a href="menyu.html">Menyuni ko'rish</a>

• a — havola tegi (anchor). Uni Havola asoslari darsida batafsil ko'ramiz.
• href — atribut nomi: "qayerga olib boradi".
• "menyu.html" — atribut qiymati.

Xuddi odamning pasportidagidek: odam — element, "Ism: Ali", "Tug'ilgan yili: 2005" — atributlar.

5.2 Bir nechta atribut

Atributlar orasiga bitta bo'sh joy qo'yiladi. Tartibi muhim emas:

<img src="osh.jpg" alt="Bir tarelka osh">

img — rasm tegi. src — rasm fayli qayerda, alt — rasm ko'rinmasa, uning o'rniga chiqadigan matn. Rasmlarni img asoslari darsida o'rganamiz.

Deyarli har qanday elementga qo'yiladigan atributlar ham bor. Masalan, title — sichqoncha ustiga olib borilganda chiqadigan yozuv:

<p title="Dam olish kunlari ham">Har kuni ochiqmiz.</p>

Kursorni paragraf ustida bir soniya ushlab turing — kichik oynada "Dam olish kunlari ham" chiqadi.

5.3 Qo'shtirnoq qoidalari

Qiymat odatda qo'shtirnoq " ichida yoziladi. Bittalik tirnoq ' ham to'g'ri:

<p title="Kechqurun 23:00 gacha">Ochiqmiz</p>
<p title='Kechqurun 23:00 gacha'>Ochiqmiz</p>

Bittalik tirnoq qiymat ichida qo'shtirnoq bo'lsa asqotadi: title='Choyxona "Bahor"'. Lekin odatiy qoida — doim qo'shtirnoq ".

HTML qo'shtirnoqsiz qiymatga ham ruxsat beradi — agar unda bo'sh joy bo'lmasa. Lekin bu tuzoq. Qarang:

<p title=Choyxona Bahor>Salom</p>

Brauzer buni shunday tushunadi: title qiymati — faqat Choyxona. Bahor esa alohida, noma'lum atribut. Doim qo'shtirnoq qo'ying — shunda bunday savol umuman tug'ilmaydi.

Tekshirib ko'ring: <a href="tel:+998900000000" title="Qo'ng'iroq qilish">Telefon</a> da nechta atribut bor? Ularning nomlari qanday?

6. Bo'sh (void) elementlar

Ba'zi elementlarning ichiga hech narsa qo'yib bo'lmaydi. Masalan, qator uzish br yoki rasm img. Rasmning "ichi" bo'lmaydi — u o'zi bir butun narsa.

Bunday elementlar bo'sh elementlar (void elements) deyiladi. Ularda faqat ochuvchi teg bor, yopuvchi teg yozilmaydi:

<p>Toshkent,<br>Chilonzor, 7-mavze</p>
<img src="osh.jpg" alt="Bir tarelka osh">
<hr>

HTML'da bo'sh elementlar ro'yxati qat'iy — jami 13 ta:

Bularni yodlash shart emas. Har birini o'z darsida uchratasiz va o'sha yerda eslab qolasiz.

6.1 <br> mi yoki <br /> mi?

Eski kodlarda va ba'zi vositalarda oxirida qiya chiziqli yozuvni ko'rasiz: <br />, <img ... />. Bu XHTML degan eski standartdan qolgan odat.

Zamonaviy HTML'da ikkalasi ham to'g'ri. Brauzer qiya chiziqni shunchaki e'tiborsiz qoldiradi. Masalan, Prettier formatlovchisi <br /> yozadi. Qaysi birini tanlasangiz ham, bitta loyihada bir xil yozing.

7. Boolean atributlar

Ba'zi atributlarning qiymati umuman kerak emas. Ularning borligining o'zi "ha" degani. Bunday atributlar boolean atributlar deyiladi.

Masalan, hidden — elementni yashiradi:

<p>Osh bor.</p>
<p hidden>Bu matn ko'rinmaydi.</p>

Yoki disabled — tugmani o'chiradi, uni bosib bo'lmaydi:

<button disabled>Buyurtma berish</button>

Mana eng katta tuzoq. Qarang:

<p hidden="false">Bu matn ham ko'rinmaydi!</p>

Mantiqan "false" — "yo'q" degani. Lekin brauzer qiymatni o'qimaydi, faqat atribut bor-yo'qligiga qaraydi. hidden yozildimi — element yashirinadi. Elementni ko'rsatish uchun atributni butunlay olib tashlash kerak.

Boolean atributni uch xil yozish mumkin va uchalasi ham bir xil ishlaydi: hidden, hidden="", hidden="hidden". Eng qisqasi — birinchisi.

Tekshirib ko'ring: <button disabled="no">Yuborish</button> — tugmani bosa olasizmi?

8. Izohlar

Izoh (comment) — brauzer ekranda ko'rsatmaydigan yozuv. U kod o'quvchi odam uchun:

<!-- Menyu bo'limi: har dushanba yangilanadi -->
<p>Osh — 35 000 so'm</p>

Izoh <!-- bilan boshlanadi va --> bilan tugaydi. VS Code'da qatorni izohga aylantirish uchun Ctrl + / bosing (macOS'da Cmd + /). VS Code'da tez tahrirlash darsida bu yorliqni ko'rgansiz.

Izohlar haqida ikki muhim fakt:

1. Izoh ichida izoh yozib bo'lmaydi. Birinchi uchragan --> izohni yopadi. Qolgan qismi sahifada oddiy matn bo'lib chiqib qoladi.
2. Izoh yashirin emas. Ekranda ko'rinmaydi, lekin Ctrl + U bosgan har kim uni o'qiy oladi.

Diqqat: HTML izohiga hech qachon parol, maxfiy kalit yoki ichki ma'lumot yozmang. Masalan, <!-- admin paroli: ... --> — sahifani ochgan istalgan odam buni ko'radi. Hujumchilar aynan shunday izohlarni qidiradi.

9. Kichik harflar

HTML katta-kichik harfni farqlamaydi. <P>, <p> va <P CLASS="narx"> — brauzer uchun bir xil. U hammasini kichik harfga aylantiradi.

Lekin zamonaviy qoida — teg va atribut nomlari doim kichik harflarda. Sabablari:

• Hamma zamonaviy kod shunday yozilgan, jamoada o'qish oson.
• Kichik harflar ko'zga yumshoqroq, <P> go'yo "baqirayotgandek" ko'rinadi.

Atribut qiymati esa boshqa masala. src="Osh.jpg" va src="osh.jpg" — serverda ikki xil fayl bo'lishi mumkin. Fayl ruxsatlari darsida ko'rdik: Linux fayl nomlarida katta-kichik harfni farqlaydi. Ko'p saytlar esa aynan Linux serverlarda ishlaydi.

10. Ko'p uchraydigan xatolar

Brauzer HTML xatolarida qizil xabar chiqarmaydi. U jimgina "tuzatadi". Shuning uchun natijaga qarab xatoni tanish kerak. Xabarlarni ko'rsatadigan vositalarni Formatlash va validatsiya darsida o'rnatamiz.

10.1 Yopilmagan qo'shtirnoq — sahifaning yarmi yo'qoldi

<p>Menyu: <a href="menyu.html>Menyu</a></p>
<p>Manzil: Chilonzor</p>
<p title="x">Oxiri</p>

Brauzerda faqat bitta qator qoladi — "Menyu: Oxiri", ikkinchi so'zi havola bo'lib. "Manzil" paragrafi yo'qoldi!

Sabab: href qiymatining yopuvchi qo'shtirnog'i yo'q. Brauzer keyingi " belgisigacha hammasini — ikkala paragrafni ham — manzilning bir qismi deb o'yladi. Tuzatish: qo'shtirnoqni yoping: href="menyu.html". VS Code bunday xatoni rang bilan ko'rsatadi: satrning qolgan qismi bir xil "qiymat rangi"ga bo'yalib qoladi.

10.2 Yopuvchi teg yozilmagan

<p>Bugun <strong>osh bepul!</p>
<p>Ertaga kabob.</p>

"Ertaga kabob." ham qalin bo'lib chiqadi. strong yopilmagani uchun brauzer uning ta'sirini keyingi paragrafga ham o'tkazdi. Tuzatish: </strong> ni qo'shing.

10.3 Bo'sh elementga yopuvchi teg

<img src="osh.jpg" alt="Osh"></img>
<br></br>

</img> ni brauzer shunchaki tashlab yuboradi. </br> esa qiziqroq: brauzer uni yana bitta <br> deb tushunadi. Natijada kutilmagan bo'sh qator paydo bo'ladi. Tuzatish: bo'sh elementlarga yopuvchi teg yozmang.

10.4 Tegdagi imlo xatosi

<pp>Salom</pp>

Brauzer xato bermaydi — noma'lum pp elementini yaratib, matnni oddiy ko'rsatadi. Lekin bu endi paragraf emas: Google ham, ekran o'quvchi ham uni tanimaydi. Tuzatish: teg nomini tekshiring. VS Code noma'lum teglar uchun avtomatik to'ldirish taklif qilmaydi — bu ham belgi.

11. Mashqlar

1-mashq (oson): Qismlarni ajrating

Quyidagi elementni qismlarga ajrating:

<a href="https://t.me/sizning_kanal" title="Telegram">Kanalimiz</a>

1. Teg nomi:
2. Nechta atribut bor?
3. Foydalanuvchi ekranda qaysi matnni ko'radi?

2-mashq (o'rta): Xatolarni toping

Bu kodda to'rtta xato bor. Toping va tuzating:

<P>Bugun <strong>osh</P></strong>
<img src="osh.jpg" alt="Osh"></img>
<p title=Kechki menyu>Kabob</p>
<p hidden="false">Yangi taomlar tez orada</p>

<p>Bugun <strong>osh</strong></p>
<img src="osh.jpg" alt="Osh">
<p title="Kechki menyu">Kabob</p>
<p>Yangi taomlar tez orada</p>

3-mashq (qiyin): Choyxona e'loni

choyxona/index.html ga quyidagilarni qo'shing:

1. p ichida strong bilan belgilangan so'z: "Juma kuni palov bepul".
2. title atributli paragraf: ustiga kursor olib borilganda "Faqat 12:00 gacha" chiqsin.
3. Izoh: "Aksiya — sentyabr oxirigacha".
4. hidden bilan yashirilgan paragraf: "Yangi filial tez orada". Keyin DevTools'ning Elements panelida hidden atributini o'chirib ko'ring.

<h1>Choyxona «Bahor»</h1>
<p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>

<!-- Aksiya — sentyabr oxirigacha -->
<p>Juma kuni <strong>palov</strong> bepul</p>
<p title="Faqat 12:00 gacha">Tushlik vaqtida chegirma bor.</p>

<p hidden>Yangi filial tez orada</p>

12. Real ishda

• DevTools'da begona kod. Dasturchi har kuni boshqa saytlar va o'z loyihasining HTML'ini Elements panelida o'qiydi. Teg, element va atributni ajrata olish — buning asosi.
• React va boshqa freymvorklar ham shu grammatikani ishlatadi. Faqat ba'zi atribut nomlari o'zgaradi (masalan, class o'rniga className). Bu farqlarni React qismida ko'ramiz.
• Xavfsizlik tekshiruvi. Pentest (xavfsizlikni sinash) mutaxassislari sahifa manbasidagi izohlarni birinchi ko'radiganlardan. U yerda unutilgan manzil yoki parol topilishi mumkin.
• Intervyu savollari: "Teg va element farqi?", "Void element nima?", "Boolean atributga false yozsa nima bo'ladi?".

Xulosa

• Teg — <p> kabi belgi; element — ochuvchi teg, kontent va yopuvchi teg birgalikda.
• Elementlar ichma-ich joylashadi; oxirgi ochilgan birinchi yopiladi.
• Atribut ochuvchi tegda nom="qiymat" shaklida yoziladi; qiymatni doim qo'shtirnoqqa oling.
• Bo'sh (void) elementlarda (br, img, hr...) yopuvchi teg yo'q.
• Boolean atributning borligi "ha" degani: hidden="false" ham yashiradi.
• Izoh <!-- --> ekranda ko'rinmaydi, lekin sahifa manbasida hammaga ochiq.

Keyingi dars: Hujjat skeleti: DOCTYPE, html, head, body — har bir haqiqiy sahifa boshlanadigan majburiy qatorlar va ularning har biri nega kerakligi.

Manbalar

• MDN: "Getting started with HTML" va "Void element" — developer.mozilla.org
• WHATWG HTML: "Syntax" bo'limi — html.spec.whatwg.org