IlmHamroh
JavaScript Full-stack/4-qism. HTML5/86-dars11 daqiqa
Mundarija (31)

Emmet: HTML'ni qisqartmalar bilan tez yozish

Qisqacha: Emmet — qisqa yozuvni to'liq HTML'ga aylantiradigan vosita. ! yozib Tab bossangiz, butun sahifa skeleti paydo bo'ladi. h1+p*3 esa bitta sarlavha va uchta paragrafga aylanadi. Emmet VS Code'ga o'rnatilgan — hech narsa yuklash shart emas.

Bu darsda

  • ! bilan sahifa skeletini bir soniyada yaratasiz.
  • >, +, *, ^ va () bilan elementlar tuzilmasini yozasiz.
  • {}, $, ., #, [] bilan matn, raqam va atributlar qo'shasiz.
  • Tayyor matnni "Wrap with Abbreviation" bilan teglarga o'raysiz.
  • VS Code'dagi Emmet sozlamalarini o'zingizga moslaysiz.

Oldin bilishingiz kerak: Hujjat skeleti: DOCTYPE, html, head, body, VS Code'da tez tahrirlash.

1. Nega bu kerak?

O'tgan darsda to'liq skeletni qo'lda yozdik. Hisoblab ko'ring: 11 qator, 20 dan ortiq burchakli qavs, har bir teg ikki marta. Boshlovchiga buning uchun ikki-uch daqiqa kerak. Bitta qavs tushib qolsa — xato.

Endi tasavvur qiling: menyu sahifasida 20 ta taom bor. Har biri uchun <p> va </p> yozasiz. Zerikarli va xato qilish oson.

Emmet bu muammoni hal qiladi. Siz qisqa "formula" yozasiz, Emmet uni to'liq HTML'ga aylantiradi. Xuddi SMS'dagi qisqartmalar kabi: "rahmat" o'rniga "rhmt" yozasiz, telefon esa uni to'liq so'zga aylantiradi. Faqat Emmet hech qachon adashmaydi.

2. Birinchi qisqartma: !

  1. choyxona papkasida yangi aloqa.html faylini yarating.
  2. Bo'sh faylga undov belgisini yozing: !
  3. Kichik taklif oynasi chiqadi, yonida "Emmet Abbreviation" yozuvi bor.
  4. Tab yoki Enter bosing.

Natija:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Bu — o'tgan darsdagi skeletning aynan o'zi. Faqat ikki joyni o'zingiz o'zgartirasiz:

  • lang="en" → lang="uz".
  • Document → sahifaning haqiqiy nomi.

Emmet kursorni avtomatik tarzda keyingi to'ldiriladigan joyga qo'yadi. Tab bosib, bo'sh joylar orasida sakrashingiz mumkin. Pastroqda lang ni doim uz qilib yaratadigan sozlamani ham ko'rsatamiz.

Diqqat: Emmet faqat HTML fayllarda o'z-o'zidan ishlaydi. VS Code'ning pastki o'ng burchagiga qarang: u yerda HTML yozilgan bo'lishi kerak. "Plain Text" bo'lsa, fayl hali saqlanmagan yoki kengaytmasi .html emas.

3. Asosiy belgilar

Emmet'ni bitta-bittadan o'rganamiz. Har bir qisqartmani o'zingiz yozib, Tab bosib ko'ring.

3.1 Teg nomi

Eng oddiy qisqartma — tegning nomi:

Yozasiz Olasiz
p <p></p>
h1 <h1></h1>
a <a href=""></a>
img <img src="" alt="">

E'tibor bering: Emmet a va img uchun kerakli atributlarni ham qo'shib qo'ydi. U har bir teg uchun odatiy atributlarni biladi.

3.2 > — ichiga (bola element)

> — "keyingisini ichiga qo'y":

text
p>strong
html
<p><strong></strong></p>

Teg, element va atribut darsidagi ota va bola elementlarni eslang. > aynan shu munosabatni yozadi.

3.3 + — yoniga (qo'shni element)

+ — "keyingisini yoniga qo'y":

text
h1+p
html
<h1></h1>
<p></p>

3.4 * — ko'paytirish

* va son — "shuncha marta takrorla":

text
p*3
html
<p></p>
<p></p>
<p></p>

3.5 {} — ichidagi matn

Jingalak qavs ichidagi yozuv elementning matni bo'ladi:

text
h1{Choyxona «Bahor»}
html
<h1>Choyxona «Bahor»</h1>

Matn ichida bo'sh joy bo'lishi mumkin — jingalak qavs uni himoya qiladi.

3.6 $ — tartib raqami

* bilan birga $ har bir takrorda raqamga aylanadi:

text
p{Taom $}*3
html
<p>Taom 1</p>
<p>Taom 2</p>
<p>Taom 3</p>

Qo'shimcha imkoniyatlar:

  • $$ — ikki xonali raqam: 01, 02, 03.
  • $@3 — 3 dan boshlash: 3, 4, 5.
  • $@- — teskari tartib: 3, 2, 1.

Bo'sh joyni to'ldiring: p{Kun $}*2 qanday ikkinchi paragraf beradi? <p>Kun </p>

3.7 ^ — bir pog'ona yuqoriga

> bilan ichkariga tushdingiz. Endi tashqariga qaytish kerak bo'lsa — ^:

text
p>strong{Osh}^p{Kabob}
html
<p><strong>Osh</strong></p>
<p>Kabob</p>

^ bo'lmasa, ikkinchi p birinchi strong ning yoniga, ya'ni birinchi paragraf ichiga tushib qolardi. ^^ — ikki pog'ona yuqoriga.

3.8 () — guruh

Qavslar bir nechta elementni bitta "blok" qiladi. Bu ^ dan ko'ra tushunarliroq:

text
(h2{Kun $}+p)*2
html
<h2>Kun 1</h2>
<p></p>
<h2>Kun 2</h2>
<p></p>

Guruh butunligicha ikki marta takrorlandi.

Tekshirib ko'ring: h1+p*2 va (h1+p)*2 ning farqi nima?

Javob

h1+p*2 — bitta h1 va ikkita p. *2 faqat o'zidan oldingi p ga tegishli. (h1+p)*2 esa ikkita h1 va ikkita p: qavs ichidagi juftlik butunligicha takrorlanadi — h1, p, h1, p.

4. Atributlar: ., # va []

4.1 . va # — class va id

Real sahifalarda elementlarga ko'pincha class va id atributlari qo'yiladi. Ular elementga nom beradi — keyinchalik CSS va JavaScript elementni shu nom bilan topadi. Ularni Global atributlar darsida va CSS qismida batafsil o'rganamiz. Hozircha Emmet'da qanday yozilishini ko'ring:

Yozasiz Olasiz
p.narx <p class="narx"></p>
p.narx.aksiya <p class="narx aksiya"></p>
h1#sarlavha <h1 id="sarlavha"></h1>
.karta <div class="karta"></div>

Oxirgisi qiziq: teg nomini yozmasangiz, Emmet div qo'yadi. div — "nomsiz quti", u haqida div va span darsida gaplashamiz.

4.2 [] — istalgan atribut

Kvadrat qavs ichida istalgan atributni yozasiz:

text
a[href=menyu.html]{Menyu}
html
<a href="menyu.html">Menyu</a>

Qiymatda bo'sh joy bo'lsa, uni qo'shtirnoqqa oling:

text
p[title="Dam olish kunlari ham"]{Har kuni ochiqmiz}
html
<p title="Dam olish kunlari ham">Har kuni ochiqmiz</p>

5. lorem — vaqtinchalik matn

Sahifa tuzilmasini yasayotganda haqiqiy matn hali tayyor bo'lmaydi. Bunda lorem ipsum — ma'nosiz lotincha matn ishlatiladi:

  • lorem — 30 so'zli matn.
  • lorem5 — 5 so'zli matn.
  • p*3>lorem10 — har birida 10 so'zdan uchta paragraf.
text
lorem5
text
Lorem ipsum dolor sit amet.

Lorem ipsum — matbaachilar va dizaynerlar uzoq yillardan beri ishlatib kelayotgan namuna matn. U Rim notiqi Tsitseronning asaridan olingan va ataylab buzilgan. Maqsad — o'quvchi ma'noga emas, sahifa ko'rinishiga qarasin. Keyingi so'zlar har safar tasodifiy bo'ladi.

Diqqat: Lorem ipsum — faqat vaqtinchalik. Saytni internetga chiqarishdan oldin uni qidirib, haqiqiy matn bilan almashtiring. Internetda "Lorem ipsum dolor" yozuvi qolib ketgan haqiqiy saytlar ko'p — bu shoshilishning belgisi.

6. Hammasi birga: menyu sahifasi bir qatorda

menyu.html ni oching va body ichiga shu qisqartmani yozing:

text
h1{Bugungi menyu}+(h2{Issiq taomlar}+p*2)+(h2{Ichimliklar}+p*2)

Tab bosing:

html
<h1>Bugungi menyu</h1>
<h2>Issiq taomlar</h2>
<p></p>
<p></p>
<h2>Ichimliklar</h2>
<p></p>
<p></p>

h2 — ikkinchi darajali sarlavha, uni keyingi darslardan birida batafsil ko'ramiz. Endi Tab bilan bo'sh paragraflar orasida sakrab, taomlarni yozib chiqasiz.

Qo'lda yozganda 7 qator va 14 ta teg. Emmet bilan — bitta qator.

Tekshirib ko'ring: Quyidagi natijani qanday qisqartma beradi?

html
<h2>Menyu</h2>
<p class="narx">35 000</p>
<p class="narx">35 000</p>
Javob

h2{Menyu}+p.narx{35 000}*2. h2 va p qo'shni, shuning uchun +. p ga class .narx, matn {35 000} va ikki marta takrorlash *2.

7. Tayyor matnni o'rash: Wrap with Abbreviation

Ba'zan matn tayyor, faqat teglarga o'rash kerak. Masalan, buyurtmachi taomlar ro'yxatini Telegram'da yubordi:

text
Osh — 35 000 so'm
Kabob — 25 000 so'm
Lag'mon — 28 000 so'm
  1. Uchala qatorni belgilang (sichqoncha bilan tanlang).
  2. Ctrl + Shift + P (macOS'da Cmd + Shift + P) bosib, buyruqlar oynasini oching.
  3. Emmet: Wrap with Abbreviation ni tanlang.
  4. p* deb yozing va Enter bosing.

Natija:

html
<p>Osh — 35 000 so'm</p>
<p>Kabob — 25 000 so'm</p>
<p>Lag'mon — 28 000 so'm</p>

Oxiridagi * — "har bir qatorni alohida o'ra" degani. Yulduzchasiz p yozsangiz, uchala qator bitta paragrafga tushadi.

7.1 Yana foydali Emmet buyruqlari

Buyruqlar oynasida Emmet deb yozsangiz, hamma buyruqlarni ko'rasiz. Eng foydalilari:

  • Emmet: Remove Tag — tegni o'chiradi, ichidagi matnni qoldiradi.
  • Emmet: Update Tag — tegni boshqasiga almashtiradi (masalan, p ni h2 ga), ochuvchi va yopuvchini birga.
  • Emmet: Balance (outward) — kursor turgan elementni butunligicha belgilaydi. Har bosishda bir pog'ona kengayadi.
  • Emmet: Go to Matching Pair — ochuvchi tegdan yopuvchisiga sakraydi.

Tez-tez ishlatadiganingizga o'z tugmalar birikmangizni biriktiring. VS Code sozlamalari darsida keybindings.json ni ko'rgansiz.

8. Emmet sozlamalari

VS Code'da Ctrl + Shift + P → Preferences: Open User Settings (JSON) ni oching va quyidagilarni qo'shing:

json
{
  "emmet.variables": { "lang": "uz" },
  "emmet.triggerExpansionOnTab": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": { "javascript": "javascriptreact" }
}

Har bir qator nima qiladi:

  • emmet.variables — ! endi darhol lang="uz" yozadi. Har safar almashtirish shart emas.
  • emmet.triggerExpansionOnTab — taklif oynasi chiqmasa ham, Tab qisqartmani ochadi.
  • emmet.showExpandedAbbreviation — Emmet takliflarini hamma fayl turlarida ko'rsatish.
  • emmet.includeLanguages — Emmet'ni boshqa tillarda ham yoqish. Bu yerda JavaScript fayllarida — React qismida kerak bo'ladi.

Maslahat: VS Code'da editor.linkedEditing sozlamasini ham yoqing: "editor.linkedEditing": true. Shunda ochuvchi teg nomini o'zgartirsangiz, yopuvchisi ham o'zi o'zgaradi. Bu Emmet emas, lekin u bilan juda yaxshi ishlaydi.

9. Ko'p uchraydigan xatolar

9.1 Qisqartma ichida bo'sh joy

text
h1 + p

Bu kutilgandek ishlamaydi. Emmet kursordan chap tomondagi so'zni birinchi bo'sh joygacha o'qiydi. Natijada faqat p ochiladi, h1 + esa oddiy matn bo'lib qoladi. Tuzatish: belgilar orasida bo'sh joy qoldirmang: h1+p. Bo'sh joy faqat {} va qo'shtirnoq ichida mumkin.

9.2 Taklif oynasi chiqmayapti

Sabablari va yechimlari:

  1. Fayl turi HTML emas — pastki o'ng burchakni tekshiring, faylni .html bilan saqlang.
  2. Boshqa kengaytmaning takliflari ustun chiqdi — Ctrl + Space bosib, ro'yxatdan "Emmet Abbreviation" ni tanlang.
  3. Qisqartmada xato bor (masalan, yopilmagan {) — Emmet uni tanimaydi, taklif ham chiqmaydi.

9.3 ^ bilan adashish

text
p>strong{Osh}+p{Kabob}

Siz ikkita paragraf kutdingiz. Lekin ikkinchi p birinchi paragraf ichiga tushdi:

html
<p>
  <strong>Osh</strong>
  <p>Kabob</p>
</p>

Paragraf ichida paragraf bo'lishi mumkin emas — brauzer buni o'zicha "tuzatadi". Tuzatish: ^ bilan tashqariga chiqing (p>strong{Osh}^p{Kabob}) yoki guruh ishlating ((p>strong{Osh})+p{Kabob}).

10. Mashqlar

1-mashq (oson): Qisqartmani yozing

Har bir natija uchun Emmet qisqartmasini yozing:

  1. <h1></h1> va uning yonida <p></p> →
  2. To'rtta bo'sh <p></p> →
  3. <h2>Ichimliklar</h2> →
Yechim
  1. h1+p — + qo'shni elementlar uchun.
  2. p*4 — * takrorlash uchun.
  3. h2{Ichimliklar} — {} matn uchun.

2-mashq (o'rta): Natijani oldindan ayting

Qisqartmani VS Code'da yozmasdan oldin natijani qog'ozga yozing. Keyin tekshiring.

text
h2{Choy}+p.narx{Qora choy — $ 000 so'm}*3
Yechim
html
<h2>Choy</h2>
<p class="narx">Qora choy — 1 000 so'm</p>
<p class="narx">Qora choy — 2 000 so'm</p>
<p class="narx">Qora choy — 3 000 so'm</p>

$ har bir takrorda 1, 2, 3 ga aylandi. Matn ichidagi $ ham ishlaydi. Agar narxlar haqiqiy bo'lishi kerak bo'lsa, $ o'rniga har birini qo'lda yozasiz.

3-mashq (qiyin): Aloqa sahifasi — faqat Emmet bilan

choyxona/aloqa.html faylini yarating. Faqat Emmet ishlatib quyidagini yasang:

  1. ! bilan skelet. lang va title ni to'g'rilang.
  2. body ichiga bitta qisqartma bilan: h1 "Biz bilan bog'laning", undan keyin ikkita h2 — "Manzil" va "Telefon", har birining ostida bittadan p.
  3. Menyu sahifasiga havola: a elementi, href="menyu.html", matni "Menyuni ko'rish".
Yechim

2-qadam uchun qisqartma:

text
h1{Biz bilan bog'laning}+(h2{Manzil}+p)+(h2{Telefon}+p)

3-qadam uchun:

text
a[href=menyu.html]{Menyuni ko'rish}

Yakuniy body:

html
<body>
  <h1>Biz bilan bog'laning</h1>
  <h2>Manzil</h2>
  <p>Toshkent, Chilonzor, 7-mavze</p>
  <h2>Telefon</h2>
  <p>+998 90 000 00 00</p>
  <a href="menyu.html">Menyuni ko'rish</a>
</body>

Paragraflarga matnni Tab bilan sakrab yozdingiz. Jami bir necha soniya.

11. Real ishda

  • Emmet — frontend dasturchining standart vositasi. VS Code, WebStorm va CodePen'da o'rnatilgan, boshqa muharrirlarga kengaytma sifatida qo'shiladi.
  • React'da ham ishlaydi. emmet.includeLanguages sozlamasi bilan JSX'da (React'ning HTML'ga o'xshash yozuvi) ham qisqartmalar ochiladi. Emmet u yerda class o'rniga o'zi className yozadi.
  • CSS uchun ham qisqartmalar bor. Masalan, m10 → margin: 10px;. Ularni CSS qismida ko'rasiz.
  • Tezlik — lekin tushunish birinchi. Emmet yozishni tezlashtiradi, lekin nima yozayotganingizni bilishingiz kerak. Shuning uchun biz avval skeletni qo'lda yozdik, keyin qisqartmani o'rgandik.

Xulosa

  • Emmet qisqa formulani to'liq HTML'ga aylantiradi; VS Code'da o'rnatilgan, Tab yoki Enter bilan ochiladi.
  • ! — butun skelet; keyin lang va title ni to'g'rilang.
  • > ichiga, + yoniga, ^ yuqoriga, * takrorlash, () guruh.
  • {} matn, $ raqam, . class, # id, [] istalgan atribut, lorem vaqtinchalik matn.
  • "Wrap with Abbreviation" tayyor matnni teglarga o'raydi; p* — har bir qatorni alohida.
  • emmet.variables bilan ! doim lang="uz" yozadi.

Keyingi dars: HTML'ni formatlash va validatsiya qilish — kodni avtomatik tekislash va brauzer jimgina "kechirgan" xatolarni topish.

Manbalar

  • VS Code hujjatlari: "Emmet in Visual Studio Code" — code.visualstudio.com
  • Emmet rasmiy hujjati: "Abbreviations syntax" — docs.emmet.io
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Emmet: HTML'ni qisqartmalar bilan tez yozish — IlmHamroh