Bosh sahifa / Sayt tayyorlash / HTMLning siz bilmagan 5 ta imkoniyati

HTMLning siz bilmagan 5 ta imkoniyati

HTML5 o’zining ajoyib imkoniyatlari bilan frontendga yangi kuch bag’ishlagan. Umuman, HTML5gacha ham HTMLning siz bilmasligingiz mumkin bo’lgan bir nechta foydali imkoniyatlari mavjud bo’lib kelgan. Bu imkoniyatlarning eng ajoyib 5 tasini o’zim o’qigan maqolalardan biri asosida Sizga ham tanishtirishga harakat qilaman. HTMLning kamdan-kam ishlatiladigan, balki Siz umuman bilmaydigan eng ajoyib imkoniyatlaridan ba’zilari quyidagilar:

1. IMLOVIY XATOLARNI TEKSHIRISH. Spell cheker haqida bilasiz. HTMLda brauzerning imloviy xatolarni tekshirish imkoniyatini ishga solish mumkin. spellcheck bilan belgilangan input foydalanuvchi tomonidan kiritilayotgan matn yoki har qanday yozuvning imloviy xatolarga tekshirilishi kerakligini anglatadi. spellcheck har qanday HTML tegda ishlatilishi mumkin. Lekin asosan bu atribyut faqat yozuv kiritiladigan elementlarda ish beradi. Uning boshqa teglarda ishlatilishining bitta foydali tomoni bor. Masalan, spellcheck asosiy divga berilsa, shu div ichidagi barcha inputlarda imlo tekshirish ishga tushadi.

Quyidagi misolda contenteditablebo’lgan paragrafda imloviy xatolarni tekshirish imkoniyatini yoqamiz. Buning uchun spellcheck atribyuti bo’sh yoki true qiymati bilan berilishi kerak (agar false qiymat berilsa, imlo tekshirish o’chiriladi):
<input type="text" spellcheck="true"
placeholder="Matnni shu yerga yozing">
<p contenteditable="true" spellcheck="true">
Matnni shu yerga yozing
</p>

Yuqoridagi misolda matn kiritish formasidagi yozuvning ham, natijani ko’rsatadigan yozuvning ham imlosi tekshiriladi. Agar spellcheck qiymati false qilib berilsa, atribyut tegga qo’shilganligiga qaramasdan imlo xatolari tekshirilishi ishlamaydi.

2. O’ZGARTIRILGAN CDN RESURSLARIDAN HIMOYA. Content Delivery Network orqali sahifalarimizga JavaScript yoki CSS kabi qo’shimcha fayllarni qulay tarzda yuklashimiz mumkin. Bu fayllar boshqa bir serverdan saytingiz sahifasiga yuklanar ekan, uning xavfsizligi har doim ham 100% kafolatlangan bo’lmaydi. CDN serveri xujumga uchrashi, Sizning saytingizga kelayotgan fayllar tarkibi o’zgartirilishi yoki butunlay boshqa bir fayl jo’natilishi, natijada esa saytingiz zararlanishi mumkin. Bunday xavflarning oldini olish maqsadida HTMLda CDN orqali kelayotgan fayllarni tekshirish imkoniyati yaratilgan.

Bu integrity atribyuti yordamida amalga oshiriladi. Saytingizga example.com CDNi orqali example.js fayli kelayotgan bo’lsa, quyidagi tartibda himoyalanish mumkin:

<script src="https://example.com/example.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHm"
crossorigin="anonymous"></script>

Bu koddagi integrity qiymati ko’pchilik CDNlar tomonidan avtomatik taqdim etiladi. Agar taqdim etilmasa, faylning kodini SriHash sayti orqali olishingiz mumkin.

Bu usulda CDNdan kelayotgan fayl birinchi navbatda integrity qiymati asosida taqqoslanadi. Agar fayl kodga mos bo’lsa, u sahifangizda yuklanadi. Fayl kodga mos bo’lmasdan, uning tarkibi o’zgartirilgan, yoki butunlay boshqa bir fayl jo’natilgan bo’lsa, CDNdan kelayotgan fayl sahifangizga yuklanmaydi. Bu o’ziga xosh qo’shimcha himoyani taqdim etadi.

3. YUBORISH TUGMASIDAGI TARGETNI O’ZGARTIRISH. HTMLda target atribyutini ishlatgansiz. Target linkning qayerda ochilishini (o’zida, yangi oynada) hal qiladi. HTML5da aynan formalardagi yuborish tugmasining targetini o’zgartirish uchun formtarget atribyuti ishlatiladi. Quyidagi kodga e’tibor qarating:

<form action="/save" target="_self" >
 <input type="submit" name="save" />
 <input type="submit" name="print" formaction="/print"
 formtarget="_blank" />
</form>

Formaning o’zida target yuborilgan ma’lumot joriy sahifada ochilishi kerakligini (_self) ko’rsatayapti, lekin yuborish tugmasidagi formtarget esa ma’lumot yangi oynada (_blank) ochilishi kerakligini talab qilgan. Bunday holatda formtarget ustun keladi va formada yuborilgan ma’lumot natijasi yangi oynada ko’rsatiladi.

4. ELEMENTLARNI YASHIRISH. CSS bilan qaysidir elementni yashirish uchun display: none; ishlatishimiz mumkin. HTMLda hidden atribyuti ham huddi shu vazifani bajaradi. Ammo CSSdan farqli ravishda u yashirgan element to’liq yashiriladi. HTMLning hidden atribyuti hech bir CSS fayl yoki brauzerga tobe bo’lmaydi. U hatto televizor, proektor va boshqa qurilmalarda ham, CSS fayli umuman yuklanmavan vaqtda ham elementni yashira oladi. Ishlatilishi esa quyidagicha juda oson:

<div hidden>Bu div ko'rinmaydi, yashirilgan bo'ladi.</div>

5. KLAVIATURA QISQA TUGMASINI QO’SHISH. HTMLning accesskey atribyuti ordamida qaysidir vazifani bajaruvchi qisqa tugmani yaratish mumkin. Quyidagi kodga e’tibor qarating:

<button accesskey="v" onclick="alert('Ko\'rish tugmasi bosildi!')">
Ko'rish
</button>

Yuqorida keltirilgan koddagi tugma bosilganda «Ko’rish tugmasi bosildi!» xabari ko’rsatiladi. Muqobil tarzda Alt + Shift + V qisqa tugmalari bosilganda huddi tugmaning o’zi bosilgandek natija beradi. Saytda qisqa tugmalarning ishlatilishi, ulardan qanday foydalanish mumkinligi haqida sayt foydalanuvchilari uchun kichik eslatma yozib qo’yishingiz tavsiya etiladi.

Abituriyentlar uchun test formulalari

5 ta fikr

  1. Juda foydali maqola yozibsiz, bularning hech biridan habarim yo’q ekan, lekin agar shu maqolaga o’sha elementlarning o’zini ham qo’ysangiz yanada tushinarliroq bo’lar edi, ahir dasturchilikda amaliyot yuqori o’rin tutadiku. haliyam kech emas izmenit qilib qo’shib qo’yishga.

  2. Bu div ko’rinmaydi, yashirilgan bo’ladi.

    ko`rinmaydi ekan, lekin brauser orqali html kodni ko`rsa kodni ichida yozilgani ko`rinib turibti, brauserdan html kodni ko`rganda ham ko`rinmaydigan qilsa bo`ladimi

    • Maqsad divni yaxshirish emas, yashieilgan holat talab qilinganda yechim taqdim etish.
      Kodning o’zida JavaScript bilan yashirish mumkin (js orqali kiritiladigan qilib). Amma bunga ehtiyoj bormi?
      Siz aytgan tarzda yashirishning nima keragi bor?

Javob qoldirish

Email manzilingiz hech kimga ko'rsatilmaydi.Majburiy bo'limlar belgilangan *

*