HTML canvas, image map, embed va object: kam ishlatiladigan joylash teglari

Qisqacha: canvas — JavaScript chizadigan "bo'sh mato": grafiklar, o'yinlar, rasm tahrirlash uchun. Uning ichiga yozilgan matn — chizmani ko'ra olmaydiganlar uchun zaxira. map va area rasmning ma'lum hududlarini havolaga aylantiradi. embed va object esa PDF kabi tashqi faylni sahifa ichida ko'rsatadi. Bu teglar kam ishlatiladi — ularni bilish, lekin kerak bo'lmaganda zamonaviy muqobilni tanlash muhim.

Bu darsda

• canvas nima uchun kerakligini va nega unga zaxira kontent yozish shartligini tushunasiz.
• map va area bilan rasmda bosiladigan hududlar yasaysiz.
• PDF faylni object bilan zaxirali qilib joylaysiz.
• embed va object farqini bilasiz.
• Eskirgan plaginlar (Flash) tarixini va nega ular yo'qolganini bilasiz.

Oldin bilishingiz kerak: SVG HTML ichida va ikonkalar, Yaxshi alt matn yozish.

1. Nega bu kerak?

Rasm qo'yishning asosiy usullarini o'rgandik: img, picture, SVG. Lekin HTML'da sahifaga "narsa joylaydigan" yana bir nechta teg bor. Ular kundalik ishda kam uchraydi, lekin:

• Ular kerak bo'lgan joyda boshqa hech narsa ularni almashtira olmaydi (masalan, canvas da o'yin).
• Boshqalarning kodida ularni albatta ko'rasiz va nima ekanini bilishingiz kerak.
• Ba'zilari noto'g'ri tanlansa, sayt telefonda yoki ekran o'quvchida ishlamay qoladi.

Bu dars — qisqa sayohat: har bir teg nima qiladi, qachon kerak va qachon undan qochish kerak.

2. canvas — JavaScript uchun mato

2.1 Nima u

canvas ("mato", "xolst") — sahifadagi bo'sh to'rtburchak soha. HTML uning faqat o'lchamini beradi. Ichidagi rasmni esa JavaScript chizadi: chiziqlar, shakllar, matnlar, rasmlar — piksellar bo'yicha.

<canvas id="grafik" width="400" height="200">
  <p>Haftalik savdo: dushanba — 80, juma — 210 porsiya.</p>
</canvas>

width va height — mato o'lchami pikselda. Ular berilmasa, standart o'lcham — 300 ga 150.

Ichida chizish uchun JavaScript kerak. Hozircha uni tushunish shart emas — faqat qanday ko'rinishini ko'ring:

const mato = document.querySelector("#grafik");
const qalam = mato.getContext("2d");
qalam.fillStyle = "orange";
qalam.fillRect(20, 120, 60, 80); // dushanba ustuni
qalam.fillRect(120, 20, 60, 180); // juma ustuni

Brauzer to'q sariq ikkita ustun chizadi — oddiy grafik. JavaScript qismida canvas bilan ishlashni o'rganasiz.

2.2 canvas nima uchun ishlatiladi

• Grafik va diagrammalar — ko'p grafik kutubxonalari (masalan, Chart.js) natijani canvas ga chizadi.
• O'yinlar — brauzerdagi 2D o'yinlarning ko'pchiligi.
• Rasm tahrirlash — filtrlar, kesish, rasmga yozuv qo'shish.
• Imzo qo'yish maydoni — yetkazib berish ilovalaridagi "shu yerga imzo qo'ying".

2.3 Eng katta kamchilik: ichi "ko'r"

canvas ichidagi rasm — faqat piksellar. Ekran o'quvchi u yerda nima chizilganini bilmaydi. Google ham. Matnni belgilab nusxalab bo'lmaydi.

Shuning uchun canvas ning ichiga yozilgan kontent muhim. U ikki holatda ishlaydi:

• Brauzer canvas ni ko'rsata olmasa (juda eski yoki JavaScript o'chirilgan) — foydalanuvchi ichidagi matnni ko'radi.
• Ekran o'quvchilar va boshqa vositalar uchun — chizmaning ma'nosi.

Qoida: canvas ichiga chizmaning ma'nosini yozing. Grafik bo'lsa — asosiy raqamlar, yaxshisi jadval bilan. "Brauzeringiz canvas'ni qo'llamaydi" — foydasiz zaxira: u foydalanuvchiga hech narsa bermaydi.

Maslahat: Grafik uchun canvas yoki SVG? Oddiy qoida: kam element va tiniqlik muhim bo'lsa (bir necha o'nlab ustun, chiziq) — SVG: u har bir element bilan ishlaydi va accessibility'ga yaqinroq. Minglab nuqtali, tez o'zgaruvchan tasvir (o'yin, katta ma'lumot) — canvas.

Tekshirib ko'ring: canvas da choyxonaning oylik daromad grafigi. Ichidagi zaxira kontentga nima yozasiz?

3. Image map: rasmda bosiladigan hududlar

3.1 Qanday ishlaydi

Choyxona zali sxemasining rasmi bor. Mijoz stolni tanlash uchun sxemadagi stolni bosishi kerak. Har bir stol — boshqa havola.

Buni image map ("rasm xaritasi") qiladi: map elementi ichida area lar — rasmning bosiladigan hududlari:

<img src="zal-sxema.png" alt="Choyxona zali sxemasi: uchta stol"
     usemap="#zal" width="600" height="400">

<map name="zal">
  <area shape="rect" coords="20,20,180,120"
        href="stollar/1.html" alt="1-stol, 4 kishilik">
  <area shape="circle" coords="300,200,60"
        href="stollar/2.html" alt="2-stol, dumaloq">
  <area shape="poly" coords="400,50,580,50,580,180"
        href="stollar/3.html" alt="3-stol, supa">
</map>

• img dagi usemap="#zal" — "shu rasmga zal nomli xaritani bog'la".
• map name="zal" — xarita.
• Har bir area — bitta hudud: shape (shakl), coords (koordinatalar), href (qayerga olib boradi) va alt (hududning nomi).

Shakllar:

Koordinatalar — rasmning asl o'lchamidagi piksellar, chap yuqori burchakdan hisoblanadi.

area dagi alt — majburiy (agar href bo'lsa). U funksional rasm qoidasi bo'yicha yoziladi: hudud qayerga olib borishini aytadi. Ekran o'quvchi image map'ni havolalar ro'yxati sifatida o'qiydi.

3.2 Nega kam ishlatiladi

Image map 1990-yillardan qolgan va bitta katta kamchiligi bor: koordinatalar piksellarda. Rasm telefonda kichrayganda (CSS bilan), hududlar joyida qoladi va rasm bilan birga kichraymaydi. Bosiladigan joylar noto'g'ri joyda qoladi.

Zamonaviy muqobillar:

• SVG — shakllarning o'zini havola qilish mumkin. SVG darsida ko'rgandek, u istalgan o'lchamda to'g'ri masshtablanadi.
• CSS bilan rasm ustiga joylashtirilgan oddiy havolalar yoki tugmalar.

Image map'ni eski saytlarda va HTML email'larda uchratasiz. Yangi loyihada esa odatda SVG afzal.

4. embed va object — tashqi fayllarni joylash

4.1 PDF'ni sahifa ichida ko'rsatish

Choyxona menyusi PDF faylda. Uni sahifaning o'zida ko'rsatmoqchisiz. Buning uchun object:

<object data="assets/files/menyu.pdf" type="application/pdf"
        width="600" height="800">
  <p>Brauzeringiz PDF'ni ko'rsata olmadi.
  <a href="assets/files/menyu.pdf">Menyuni yuklab oling
  (PDF, 250 KB)</a>.</p>
</object>

• data — fayl manzili.
• type — MIME turi (picture darsida ko'rgan type kabi).
• Ichidagi kontent — zaxira: fayl ko'rsatilmasa, u chiqadi.

Kompyuter brauzerlarida PDF sahifa ichida ochiladi. Ko'p telefonlarda esa ichki PDF ko'rinmaydi — va aynan shu yerda zaxira havola foydalanuvchini qutqaradi.

4.2 embed

embed — xuddi shu vazifa, lekin soddaroq va zaxirasiz:

<embed src="assets/files/menyu.pdf" type="application/pdf"
       width="600" height="800" title="Choyxona menyusi (PDF)">

U bo'sh element — ichiga zaxira matn yozib bo'lmaydi. Fayl ko'rinmasa, foydalanuvchi bo'sh to'rtburchakni ko'radi. title — ekran o'quvchi uchun nom (html-validate buni talab qiladi).

4.3 Eng yaxshi yechim — ko'pincha oddiy havola

Halol aytganda, PDF'ni sahifaga joylash ko'pincha kerak emas. Telefonda u noqulay, katta fayl sekin yuklanadi, ekran o'quvchi bilan ishlash qiyin.

Ko'p holatda eng yaxshisi — download havolasi ("Menyuni yuklab olish, PDF, 250 KB") va muhim ma'lumotning o'zini oddiy HTML qilib yozish. Menyu — HTML sahifa, PDF esa — chop etish uchun qo'shimcha.

Boshqa saytlarni (YouTube, xarita) joylash uchun esa iframe bor — uni iframe darsida ko'ramiz.

5. Tarix: plaginlar davri tugadi

2000-yillarda embed va object asosan plaginlar uchun ishlatilardi — brauzerga qo'shimcha o'rnatiladigan dasturlar. Eng mashhuri — Adobe Flash: animatsiyalar, o'yinlar, video pleyerlar. YouTube ham dastlab Flash'da ishlagan. Java appletlari va Silverlight ham bor edi.

Plaginlar xavfsizlik teshiklarining asosiy manbai edi va telefonlarda ishlamasdi. HTML'ning o'zi rivojlanib, ularning o'rnini egalladi:

Flash'ni qo'llab-quvvatlash 2020-yil oxirida butunlay to'xtatildi. Eski kodda <embed src="...swf"> ni ko'rsangiz — bu tarix, u endi hech qayerda ishlamaydi.

6. Ko'p uchraydigan xatolar

6.1 canvas da foydasiz zaxira

<canvas id="grafik" width="400" height="200">
  Brauzeringiz canvas'ni qo'llamaydi.
</canvas>

Ekran o'quvchi foydalanuvchisi grafikning mazmunini bilmaydi. Tuzatish: zaxirada ma'lumotning o'zini bering — raqamlar yoki jadval.

6.2 area da alt yo'q

<area shape="rect" coords="0,0,100,100" href="stollar/1.html">

Nu HTML Checker:

Error: Element “area” is missing required attribute “alt”.

Tarjimasi: "area elementida majburiy alt atributi yo'q." Ekran o'quvchi bu havolani nomsiz o'qiydi. Tuzatish: alt="1-stol, 4 kishilik".

6.3 Telefonda image map "siljidi"

Kompyuterda hududlar to'g'ri, telefonda esa stolni bossangiz — boshqa stol ochiladi. Sabab — rasm kichraydi, coords esa asl piksellarda qoldi. Tuzatish: SVG'ga o'ting yoki rasm o'lchamini qat'iy qoldiring.

6.4 Zaxirasiz PDF

embed bilan PDF — telefonda bo'sh joy. Tuzatish: object va ichida yuklab olish havolasi, yoki umuman oddiy havola.

7. Mashqlar

1-mashq (oson): Qaysi teg?

1. JavaScript bilan chiziladigan o'yin maydoni →
2. Rasmning bosiladigan hududlari →
3. PDF'ni zaxira havola bilan joylash →

2-mashq (o'rta): Kodni yaxshilang

<canvas width="400" height="200">Canvas yo'q</canvas>
<embed src="menyu.pdf" width="600" height="800">
<map name="zal">
  <area shape="rect" coords="0,0,100,100" href="stol-1.html">
</map>
<img src="zal.png" usemap="#zal">

Canvas'da haftalik mehmonlar grafigi chiziladi (dushanba — 80, juma — 210).

<canvas id="mehmonlar" width="400" height="200">
  <p>Haftalik mehmonlar: dushanba — 80, juma — 210.</p>
</canvas>
<object data="menyu.pdf" type="application/pdf"
        width="600" height="800">
  <p><a href="menyu.pdf">Menyuni yuklab oling (PDF)</a></p>
</object>
<img src="zal.png" alt="Zal sxemasi: bitta stol" usemap="#zal"
     width="600" height="400">
<map name="zal">
  <area shape="rect" coords="0,0,100,100" href="stol-1.html"
        alt="1-stol, 4 kishilik">
</map>

3-mashq (qiyin): Stol band qilish sahifasi

choyxona/band-qilish/index.html sahifasini yarating:

1. Zal sxemasi rasmi (o'zingiz oddiy dasturda chizing: 3 ta stol) va image map: har bir stol o'z sahifasiga (stollar/1.html, stollar/2.html, stollar/3.html) olib boradi.
2. Sxema ostida xuddi shu havolalarning oddiy ro'yxati — image map ishlamagan holat va telefon uchun.
3. PDF qoidalar fayli uchun object va zaxira havola.
4. npx html-validate — xato 0.

<h1>Stol band qilish</h1>
<img src="../assets/images/zal-sxema.png"
     alt="Zal sxemasi: uchta stol" usemap="#zal"
     width="600" height="400">
<map name="zal">
  <area shape="rect" coords="20,20,180,120"
        href="../stollar/1.html" alt="1-stol, 4 kishilik">
  <area shape="circle" coords="300,200,60"
        href="../stollar/2.html" alt="2-stol, dumaloq">
  <area shape="poly" coords="400,50,580,50,580,180"
        href="../stollar/3.html" alt="3-stol, supa">
</map>

<h2>Yoki ro'yxatdan tanlang</h2>
<ul>
  <li><a href="../stollar/1.html">1-stol, 4 kishilik</a></li>
  <li><a href="../stollar/2.html">2-stol, dumaloq</a></li>
  <li><a href="../stollar/3.html">3-stol, supa</a></li>
</ul>

8. Real ishda

• Grafiklar. Analitika panellari (dashboard) va hisobotlardagi grafiklarning ko'pi canvas yoki SVG. Chart.js kabi kutubxonalar bilan ularni keyinroq yasaysiz.
• Brauzer o'yinlari va rasm muharrirlari — canvas ning asosiy maydoni. Figma kabi murakkab ilovalar ham chizish uchun shu texnologiyalarga tayanadi.
• HTML email'lar — image map hali ham ishlatiladigan kam joylardan biri.
• Eski loyihalarni yangilash. Kompaniyada eski saytni zamonaviylashtirish vazifasi berilsa, embed bilan Flash, jadvallardagi image map'lar — birinchi almashtiriladigan narsalar.

Xulosa

• canvas — JavaScript chizadigan piksel matosi; ichiga chizma ma'nosini zaxira sifatida yozing.
• Kam elementli grafik — SVG, minglab nuqtali tez tasvir — canvas.
• map + area — rasmda bosiladigan hududlar (rect, circle, poly); har bir area ga alt.
• Image map telefonda masshtablanmaydi — yangi loyihalarda SVG afzal.
• PDF uchun object (zaxira bilan) embed dan afzal; ko'pincha oddiy yuklab olish havolasi eng yaxshisi.
• Flash va boshqa plaginlar davri tugagan; ularning o'rnini video, canvas, CSS va SVG egallagan.

Keyingi dars: video va audio — sahifaga video va ovoz qo'yish, brauzer pleyeri va autoplay qoidalari.

Manbalar

• MDN: <canvas>, <map>, <area>, <object>, <embed> — developer.mozilla.org
• MDN: "Canvas tutorial" — developer.mozilla.org
• WHATWG HTML: "Embedded content" — html.spec.whatwg.org