IlmHamroh
JavaScript Full-stack/4-qism. HTML11/86-dars9 daqiqa
Mundarija (26)

HTML'da kodni ko'rsatish: code, pre, kbd, samp va var

Qisqacha: Sahifada dastur kodini ko'rsatish uchun code ishlatiladi: gap ichida — yolg'iz, ko'p qatorli kod uchun — pre ichida. Klaviatura tugmalari kbd, dastur chiqargan natija samp, o'zgaruvchi nomi var bilan belgilanadi. Kod ichidagi < belgisini &lt; deb yozish kerak, aks holda brauzer uni haqiqiy teg deb o'qiydi.

Bu darsda

  • Gap ichidagi va ko'p qatorli kodni to'g'ri belgilaysiz.
  • kbd, samp va var farqini bilasiz.
  • Kod ichidagi < va & belgilarini escape qilishni o'rganasiz.
  • Kod bloklarini ranglash (syntax highlight) qanday ishlashini tushunasiz.
  • Kod ko'rsatishdagi tipik xatolarni taniysiz.

Oldin bilishingiz kerak: Bo'sh joylar va qator uzish qoidasi, Urg'u va ahamiyat teglari.

1. Nega bu kerak?

Jasur choyxona saytini yasab bo'ldi va endi o'z blogida bu haqda yozmoqchi: "Sahifa tilini qanday belgiladim". Blogda HTML kodini ko'rsatishi kerak.

Birinchi urinish — kodni to'g'ridan-to'g'ri paragrafga yozish:

html
<p>Skeletning ikkinchi qatori: <html lang="uz"></p>

Brauzerda: "Skeletning ikkinchi qatori:" — va boshqa hech narsa! Kod yo'qoldi. Brauzer <html lang="uz"> ni ko'rsatish kerak bo'lgan matn deb emas, haqiqiy teg deb o'qidi.

Bu darsda ikki masalani hal qilamiz: kodni ko'rinadigan qilish va unga "bu kod" degan ma'no berish. Siz o'qiyotgan IlmHamroh darslaridagi har bir kod bloki aynan shu teglar bilan qurilgan.

2. code — gap ichidagi kod

code — "bu dastur kodi yoki uning bir qismi": teg nomi, fayl nomi, buyruq, atribut.

html
<p>Sahifa tilini <code>lang</code> atributi belgilaydi.</p>
<p>Bosh sahifa odatda <code>index.html</code> deb nomlanadi.</p>

Brauzer code ni bir xil kenglikdagi (monospace) shriftda ko'rsatadi. O'tgan darsda pre ning ham shunday shriftini ko'rgan edik. Shu shrift tufayli o'quvchi darrov ko'radi: bu oddiy so'z emas, kod.

code ichida bo'sh joylar oddiy matndagidek yig'iladi. Shuning uchun u faqat qisqa, bir qatorli kod uchun.

3. pre va code — ko'p qatorli kod

Ko'p qatorli kodda chekinishlar muhim. code ularni yig'ib yuboradi. pre esa, eslaysiz, bo'sh joylarni aynan saqlaydi.

Shuning uchun kod bloki ikkala tegning birikmasi: pre ichida code.

html
<pre><code>function salom() {
  console.log("Salom!");
}</code></pre>

Har biri o'z ishini qiladi:

  • pre — bo'sh joy va qatorlarni saqlaydi (ko'rinish).
  • code — "bu kod" degan ma'noni beradi (semantika).

Faqat pre yozsangiz, chekinishlar saqlanadi, lekin ma'no yo'qoladi — bu chek yoki she'r bo'lishi ham mumkin. Faqat code yozsangiz, ma'no bor, lekin chekinishlar yo'qoladi.

3.1 Kod tilini ko'rsatish

Kod qaysi tilda ekanini class atributi bilan aytish odat tusiga kirgan:

html
<pre><code class="language-js">console.log("Salom!");</code></pre>

language- dan keyin til nomi: language-html, language-css, language-js. Bu nom HTML standartining o'zida tavsiya qilingan. Brauzer uni o'zgartirmaydi, lekin ranglash vositalari aynan shu nomdan kod tilini aniqlaydi (6-bo'lim).

4. Kod ichidagi maxsus belgilar: escape qilish

4.1 Muammo

1-bo'limdagi yo'qolgan kodni eslang. Yoki bundan ham yomoni:

html
<p>Teg yozing: <code><p>Salom</p></code></p>

Brauzer code ichidagi <p> ni haqiqiy paragraf deb qabul qiladi. Tashqi paragraf yopiladi va sahifa tuzilmasi buziladi. Elements panelida shunday "tuzatilgan" DOM'ni ko'rasiz:

html
<p>Teg yozing: <code></code></p>
<p><code>Salom</code></p>
<p></p>

"Salom" yangi paragrafga tushdi, bo'sh code va bo'sh p paydo bo'ldi. Teglarning o'zi esa ko'rinmaydi.

4.2 Yechim: &lt; va &gt;

< belgisini sahifada belgi sifatida ko'rsatish uchun uni maxsus yozuv bilan almashtiramiz — &lt; (less than — "kichik"). > uchun — &gt; (greater than — "katta"):

html
<p>Teg yozing: <code>&lt;p&gt;Salom&lt;/p&gt;</code></p>

Brauzerda:

text
Teg yozing: <p>Salom</p>

Endi brauzer <p> ni teg deb emas, oddiy belgilar deb ko'rsatadi. Belgini boshqa yozuv bilan almashtirish escape qilish deyiladi.

Qoida: kod ichida < ni doim &lt; ga almashtiring. > ni almashtirish har doim ham shart emas, lekin simmetriya uchun &gt; yozish odat.

4.3 & belgisi

&lt; ning o'zi & bilan boshlanadi. Unda sahifada aynan "&lt;" yozuvini ko'rsatish kerak bo'lsa-chi? Masalan, bu darsning o'zi kabi — escape haqida yozayotganda.

Buning uchun & ning o'zini escape qilamiz — &amp; (ampersand):

html
<p>Kichik belgisi HTML'da <code>&amp;lt;</code> deb yoziladi.</p>

Brauzerda: "Kichik belgisi HTML'da &lt; deb yoziladi."

Bunday yozuvlar entity deyiladi. Ularning hammasini Maxsus belgilar darsida batafsil ko'ramiz. Kod ko'rsatish uchun uchtasi yetarli: &lt;, &gt;, &amp;.

Tekshirib ko'ring: Blogda <br> tegini ko'rsatmoqchisiz. HTML kodida uni qanday yozasiz?

Javob

<code>&lt;br&gt;</code>. Agar <code><br></code> yozsangiz, brauzer haqiqiy qator uzilishini qo'yadi va hech narsa ko'rinmaydi.

5. kbd, samp va var

5.1 kbd — foydalanuvchi bosadigan tugma

kbd (keyboard — klaviatura) — foydalanuvchi kiritadigan narsa: tugma, tugmalar birikmasi yoki yoziladigan buyruq.

html
<p>Faylni saqlash uchun <kbd>Ctrl</kbd> + <kbd>S</kbd> bosing.</p>

Standart tugmalar birikmasi uchun ichma-ich kbd ni tavsiya qiladi. Tashqi kbd — butun birikma, ichkilari — alohida tugmalar:

html
<p>Qattiq yangilash:
<kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></kbd></p>

Ko'p saytlar kbd ni CSS bilan haqiqiy klaviatura tugmasiga o'xshatib bezaydi — ramkali, soyali. Brauzer esa uni shunchaki monospace shriftda ko'rsatadi.

5.2 samp — dastur chiqargan natija

samp (sample output — namunaviy chiqish) — dastur, terminal yoki sayt chiqargan matn:

html
<p>Buyruqdan keyin terminalda
<samp>✖ 2 problems (2 errors, 0 warnings)</samp> chiqdi.</p>

Validatsiya darsidagi html-validate xabarini eslaysizmi? Bu — samp uchun ideal misol.

Farqni eslab qolish: kbd — siz kompyuterga berasiz, samp — kompyuter sizga qaytaradi, code — dasturning o'zi.

5.3 var — o'zgaruvchi

var (variable) — matematik yoki dasturiy o'zgaruvchi nomi:

html
<p>Umumiy narx: <var>narx</var> × <var>soni</var>.</p>
<p>Agar <var>n</var> 10 dan katta bo'lsa, chegirma beriladi.</p>

Brauzer var ni kursivda ko'rsatadi — matematika kitoblaridagi kabi.

Tekshirib ko'ring: Qaysi tegni tanlaysiz?

  1. Terminalga yoziladigan npx prettier --write index.html buyrug'i.
  2. Brauzer konsolidagi 'CSS1Compat' javobi.
  3. Formuladagi x.
Javob
  1. kbd — foydalanuvchi yozadi. (Ko'p saytlar bunday buyruqlarni code bilan ham belgilaydi — bu ham xato emas, chunki buyruq ham kod.)
  2. samp — kompyuter chiqargan javob.
  3. var — o'zgaruvchi.

6. Sintaksis ranglash (syntax highlight)

Darsliklarda kod rangli: kalit so'zlar bir rangda, matnlar boshqa rangda. Bu sintaksis ranglash (syntax highlighting) deyiladi. Rangli kodni o'qish ancha oson.

HTML'ning o'zida bunday imkoniyat yo'q. Ranglashni maxsus kutubxonalar qiladi:

  • Prism va highlight.js — brauzerda JavaScript bilan ishlaydi.
  • Shiki — kodni oldindan, sayt yig'ilayotganda ranglaydi.

Hozir ularni o'rnatish shart emas — ularni JavaScript va sayt yig'ish vositalarini o'rgangach ishlatasiz. Lekin g'oyasini bilib qo'ying. Kutubxona language-js klassli code ni topadi va har bir so'zni o'z klassli span ga o'raydi. Masalan, const narx = 35000; qatori code ichida shunday bo'lib qoladi:

html
<span class="token keyword">const</span> narx =
<span class="token number">35000</span>;

Keyin CSS har bir klassga rang beradi: keyword — binafsha, number — to'q sariq. span — ma'nosiz "qobiq", uni div va span darsida ko'ramiz.

Kodni ranglash — ko'rinish. Asosi esa siz yozgan to'g'ri pre va code.

7. Ko'p uchraydigan xatolar

7.1 Escape qilinmagan <

1-bo'limda ko'rdik: kod yo'qoladi yoki sahifa tuzilmasi buziladi. Validator buni har doim ham xato demaydi — chunki brauzer uchun bu haqiqiy teglar. Tuzatish: kod ichidagi har bir < ni &lt; ga almashtiring. Ko'p kodni qo'lda almashtirish qiyin — bunday vaziyatda VS Code'ning Find/Replace oynasi (Ctrl + H) yordam beradi.

7.2 Kod blokida qo'shimcha chekinish

html
<body>
  <pre><code>
    function salom() {
      console.log("Salom!");
    }
  </code></pre>
</body>

Sahifada kod 4 bo'sh joy surilgan va tepasida bo'sh qator bilan chiqadi. Chunki pre hamma bo'sh joyni saqlaydi. Brauzer faqat <pre> dan keyingi birinchi yangi qatorni tashlaydi. Bu yerda esa yangi qator <code> dan keyin kelgan, shuning uchun u qoladi. Tuzatish: kodni <pre><code> bilan bir qatordan va chap chetdan boshlang.

7.3 "Aqlli" qo'shtirnoqlar

Kodni Word yoki Telegram'dan ko'chirsangiz, oddiy qo'shtirnoq " chiroyli “ ” ga aylanib qolishi mumkin. Sahifada farq sezilmaydi. Lekin o'quvchi kodni nusxalab ishga tushirsa — xato oladi, chunki dasturlash tillari faqat oddiy " ni tushunadi. Tuzatish: kodni doim VS Code'dan ko'chiring.

7.4 Eskirgan xmp tegi

Eski maqolalarda <xmp> tegini uchratishingiz mumkin. U ichidagi kodni escape qilmasdan ko'rsatadi. Qulay tuyuladi, lekin tegi standartdan olib tashlangan — pre, code va &lt; ishlating.

8. Mashqlar

1-mashq (oson): To'g'ri teg

  1. "Saqlash: Ctrl + S" dagi tugmalar →
  2. "Terminal command not found deb javob berdi" dagi javob →
  3. "index.html faylini oching" dagi fayl nomi →
Yechim
  1. kbd — foydalanuvchi bosadi. Birikma uchun: <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
  2. samp — dastur chiqargan matn.
  3. code — fayl nomi kodga oid.

2-mashq (o'rta): Blog uchun escape

Jasurning blogiga shu paragrafni qo'shing, u brauzerda aynan shunday ko'rinishi kerak:

text
Sahifa tilini belgilash uchun <html lang="uz"> yozing.

Kod qismi code ichida bo'lsin.

Yechim
html
<p>Sahifa tilini belgilash uchun
<code>&lt;html lang="uz"&gt;</code> yozing.</p>

< va > escape qilindi. Qo'shtirnoqlarni escape qilish shart emas — ular atribut ichida emas, oddiy matnda.

3-mashq (qiyin): "Birinchi sahifa" qo'llanmasi

choyxona/blog.html sahifasini yarating. Unda qisqa qo'llanma bo'lsin:

  1. h1: "Birinchi HTML sahifani qanday yasadim".
  2. Paragraf: faylni saqlash uchun Ctrl + S bosish (ichma-ich kbd).
  3. Kod bloki (pre + code, class="language-html"): uch qatorli kod — h1 va p bilan choyxona sarlavhasi va ish vaqti. Teglar escape qilingan.
  4. Paragraf: npx html-validate blog.html buyrug'i va uning javobi (xato bo'lmasa hech narsa chiqmaydi — shuni samp bilan yozing: "hech qanday xabar yo'q").
Yechim
html
<h1>Birinchi HTML sahifani qanday yasadim</h1>

<p>Faylni saqlash uchun <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>
bosing.</p>

<pre><code class="language-html">&lt;h1&gt;Choyxona «Bahor»&lt;/h1&gt;
&lt;p&gt;Har kuni 7:00 dan 23:00 gacha&lt;/p&gt;
&lt;p&gt;Chilonzor, 7-mavze&lt;/p&gt;</code></pre>

<p>Tekshirish uchun <kbd>npx html-validate blog.html</kbd> yozing.
Xato bo'lmasa, javob — <samp>hech qanday xabar yo'q</samp>.</p>

Kod bloki <pre><code ...> bilan bir qatordan boshlanadi — ortiqcha bo'sh qator va chekinish yo'q. Har bir < va > escape qilingan.

9. Real ishda

  • Texnik hujjatlar va bloglar — MDN, GitHub README, Stack Overflow, IlmHamroh — hammasi kodni pre va code bilan ko'rsatadi. Siz ham portfolio yoki blog yozsangiz, shu teglar kerak.
  • Markdown'dan HTML'ga. Markdown darsida ko'rgan, uchta teskari tirnoq belgisi bilan yozilgan kod bloki saytga chiqqanda aynan <pre><code class="language-..."> ga aylanadi.
  • Xavfsizlik. Escape qilish — faqat chiroy uchun emas. Foydalanuvchi yozgan matnni sahifaga escape qilmasdan qo'ysangiz, u yerdagi <script> ishga tushib ketishi mumkin. Bu XSS deb ataladigan jiddiy hujum. Uni HTML darajasidagi xavfsizlik darsida va JavaScript qismida chuqur ko'ramiz.
  • Dokumentatsiya — kbd bilan yozilgan yorliqlar va samp bilan ko'rsatilgan xabarlar qo'llanmani o'qishni ancha osonlashtiradi.

Xulosa

  • code — gap ichidagi kod; ko'p qatorli kod — <pre><code>.
  • Kod tili class="language-js" kabi yoziladi — ranglash vositalari shundan foydalanadi.
  • Kod ichidagi < → &lt;, > → &gt;, & → &amp; — aks holda brauzer teglarni bajarib yuboradi.
  • kbd — foydalanuvchi kiritadigan narsa, samp — dastur chiqargan natija, var — o'zgaruvchi.
  • Sintaksis ranglash — kutubxonalar ishi (Prism, highlight.js, Shiki); asos — to'g'ri pre va code.

Keyingi dars: Maxsus belgilar va HTML entity'lar — &lt; va &amp; dan tashqari yana qanday entity'lar bor va UTF-8 davrida qaysilari haqiqatan kerak.

Manbalar

  • MDN: <code>, <pre>, <kbd>, <samp>, <var> — developer.mozilla.org
  • WHATWG HTML: "The code element" (til klassi tavsiyasi) — html.spec.whatwg.org
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML'da kodni ko'rsatish: code, pre, kbd, samp va var — IlmHamroh