HTML matn formatlash (b, i, strong, em)

Sarlavha va paragraflar matnning umumiy tuzilishini yaratadi. Paragraf ichidagi ayrim so’zlar esa boshqalaridan muhimroq, urg’uliroq yoki boshqa turdagi matn bo’lishi mumkin. HTML bunday farqlarni faqat ko’rinish bilan emas, ma’no bilan belgilash imkonini beradi.

Bu dars yakunida siz:

• <strong> va <em> elementlarining semantik ma’nosini tushunasiz;
• <b> va <i> qaysi vaziyatlarda mos kelishini bilasiz;
• bir xil ko’ringan elementlarning vazifasi nega farq qilishini izohlaysiz;
• qo’shimcha matn elementlarini amaliy misollarda ishlata olasiz.

<strong> — kuchli muhimlik

<strong> matnning bir qismi jiddiy yoki muhim ekanini bildiradi. Brauzerlar uni odatda qalin ko’rsatadi:

<p>Parolingizni <strong>hech kimga bermang</strong>.</p>

Bu jumlada qalin ko’rinish tasodifiy bezak emas. Ajratilgan qismni o’tkazib yuborish foydalanuvchi uchun salbiy oqibatga olib kelishi mumkin. Ekran o’quvchi kabi yordamchi texnologiyalar ham bu semantikani hisobga olishi mumkin.

Bir qism yanada kuchli muhimlikka ega bo’lsa, <strong> elementlarini ichma-ich yozish mumkin. Amalda bunday holat kam uchraydi va ortiqcha ta’kiddan qochish kerak.

<em> — ovozdagi urg’u

<em> (emphasis) jumlaning ma’nosini urg’u orqali o’zgartiradigan so’z yoki iborani belgilaydi. Brauzer uni odatda qiya ko’rsatadi:

<p>Bu vazifani <em>bugun</em> tugatish kerak.</p>

Bu yerda urg’u bugun so’ziga tushadi. Agar <em> boshqa so’zga qo’yilsa, jumlaning mazmuniy urg’usi ham o’zgaradi:

<p><em>Men</em> faylni yubordim.</p>
<p>Men <em>faylni</em> yubordim.</p>

Birinchi jumlada kim yuborgani, ikkinchisida esa aynan nima yuborilgani ta’kidlanadi.

<b> va <i> faqat bezak emas

<b> va <i> tarixan qalin va qiya ko’rinish bilan bog’langan. Zamonaviy HTML’da ular ham ma’lum vazifaga ega:

Masalan, mahsulot nomi yoki maqoladagi kalit so’zni <b> bilan, texnik atama yoki boshqa tildagi iborani <i> bilan belgilash mumkin:

<p>Yangi mavzu: <b>HTML semantikasi</b>.</p>
<p><i>Responsive design</i> — turli ekranlarga mos dizayn.</p>

Natijalarni solishtiring

Quyidagi misolda elementlarning standart brauzer ko’rinishi va gap ichidagi vazifasini taqqoslang:

<h1>Matnni mazmuniga qarab belgilang</h1>

<p><strong>Muhim:</strong> o'zgarishlarni saqlashni unutmang.</p>
<p>Topshiriqni <em>mustaqil</em> bajarishga harakat qiling.</p>
<p>Bugungi kalit so'z: <b>semantika</b>.</p>
<p><i>Markup language</i> o'zbekchada belgilash tili deyiladi.</p>

<p>Qidiruv natijasi: <mark>HTML formatlash</mark></p>
<p>Eski narx: <del>120 000 so'm</del> — yangi narx: 95 000 so'm.</p>
<p>Suv formulasi: H<sub>2</sub>O. Kvadrat: 5<sup>2</sup> = 25.</p>

Brauzerning standart stili elementlar farqini ko’rishga yordam beradi. Lekin asosiy qaror tashqi ko’rinishga emas, matnning vazifasiga qarab qabul qilinadi.

Boshqa foydali matn elementlari

HTML matnning boshqa ma’nolarini ham belgilay oladi:

• <mark> — joriy kontekstda ajratib ko’rsatilgan matn, masalan qidiruv so’zi;
• <small> — izoh, mualliflik huquqi yoki mayda yozuv kabi yordamchi matn;
• <del> — hujjatdan o’chirilgan yoki endi amal qilmaydigan qism;
• <ins> — keyin qo’shilgan qism;
• <sub> — pastki indeks, masalan H₂O;
• <sup> — yuqori indeks, masalan m²;
• <code> — kod nomi, buyruq yoki qisqa kod bo’lagi.

<p><mark>CSS</mark> so'zi topildi.</p>
<p><small>Narxga yetkazib berish kiritilmagan.</small></p>
<p><del>Dushanba</del> <ins>Seshanba</ins> kuni uchrashamiz.</p>
<p>Fayl nomi: <code>index.html</code></p>

Bu elementlarni ham faqat standart ko’rinishi uchun emas, mazmun mos kelganda ishlatish kerak.

Elementlarni ichma-ich yozish

Bitta matn bir vaqtning o’zida muhim va urg’uli bo’lishi mumkin:

<p><strong>Faylni <em>hozir</em> saqlang.</strong></p>

Ichkarida oxirgi ochilgan element birinchi yopiladi:

<!-- To'g'ri -->
<strong><em>Muhim matn</em></strong>

<!-- Noto'g'ri -->
<strong><em>Muhim matn</strong></em>

Teglarning to’g’ri joylashuvi brauzer yaratadigan hujjat daraxtini aniq saqlaydi.

Amaliy mashq

Ikki paragrafdan iborat e’lon yozing. Unda:

1. muhim muddatni <strong> bilan belgilang;
2. urg’u tushadigan bitta so’zni <em> bilan yozing;
3. eski sanani <del>, yangi sanani <ins> bilan ko’rsating;
4. fayl nomini <code> elementi ichiga joylang.

Natijani o’qib, har bir ajratishning mazmuniy sababi borligini tekshiring.

Qisqacha xulosa

• <strong> kuchli muhimlikni, <em> esa mazmuniy urg’uni bildiradi.
• <b> qo’shimcha muhimliksiz e’tibor qaratiladigan kalit so’z uchun mos.
• <i> atama, boshqa ohang yoki boshqa tildagi ibora uchun ishlatilishi mumkin.
• <mark>, <del>, <ins>, <sub>, <sup> va <code> maxsus ma’no beradi.
• Teglar ichkaridan tashqariga qarab to’g’ri tartibda yopiladi.
• Faqat vizual bezak kerak bo’lsa, CSS ishlatiladi.

Keyingi darsda HTML havolalar va rasmlar orqali sahifalarni bog’lash va mazmunga tasvir qo’shishni o’rganamiz.