AXV

HTML5 global atributlari va I bob yakuni

id, class, data-*, contenteditable, hidden, zamonaviy formalar

8-sinfWeb Full-stack3-hafta · 9-dars

Bugungi dars rejasi

01. Global atributlar

id, class, title, data-*, hidden va contenteditable xususiyatlari.

02. Yangi formalar

type="color", type="range", type="date" boshqaruv elementlari.

03. Katta loyiha

I bob bo'yicha to'liq shaxsiy interaktiv portfolio yaratish.

01

HTML5 Global atributlari

Barcha teglar bilan birga ishlaydigan universal parametrlar

Maxsus va Global atributlar farqi

Maxsus (Spesifik) atributlar Faqat muayyan tegda ishlaydi: <a href="..."> | <img src="..."> href ni img da yoki p da ishlatib bo'lmaydi Global atributlar Barcha teglarda istisnosiz ishlaydi: id, class, title, data-*, hidden p, h1, div, section, a, img — barchasiga qo'shiladi

id va class: Qaysi birini qachon ishlatamiz?

id (Yagona identifikator)

  • Sahifada faqat bitta elementga beriladi
  • Takrorlanmas yagona nom (Pasport kabi)
  • CSS da #nomi bilan, JavaScript da oson topiladi
Misol: id="asosiy-menyusi"

class (Sinf nomi)

  • Bir nechta elementlarga bir xil berilishi mumkin
  • Umumiy guruh yoki dizayn shabloni
  • Bitta elementda bir nechta class bo'lishi mumkin
Misol: class="card highlighted"

data-* orqali yashirin ma'lumot saqlash

HTML Element data-id="101" data-narx="950" data-toifa="smartfon" Dasturchi / JavaScript element.dataset.narx Ma'lumot bir zumda o'qiladi!

Sehrli atributlar: contenteditable va hidden

contenteditable="true"

Elementni brauzerda Word kabi to'g'ridan-to'g'ri tahrirlanadigan qiladi. Matnni o'chirish, qo'shish mumkin.

Google Docs yoki Notion kabi dasturlar asosida turadi

hidden

Mantiqiy atribut. Agar elementga yozilsa, u sahifada ko'rinmay turadi. JavaScript orqali ochib-yopish uchun qulay.

Vaqtinchalik xabarlarni berkitishda ishlatiladi
02

Yangi HTML5 forma boshqaruvlari

Rang tanlash, slayder va kalendarlar

HTML5 zamonaviy input turlari

type="color" Ranglar palitrasi Bir klikda tanlash type="range" Slayder boshqaruvi min="0" max="100" type="date" 2026-10-04 Kalendar oynasi Avtomatik sana type="number" 42 Faqat raqamlar min="1" max="100"

Eski usul vs HTML5 yangi forma

Faqat oddiy matn

Sana yoki rang kiritish uchun foydalanuvchi matn yozishga majbur edi (xatolar juda ko'p bo'lardi).

Og'ir JavaScript

Kalendar yoki rang tanlash uchun uchinchi tomon murakkab kutubxonalarini ulash talab qilingan.

Ichki brauzer imkoniyati

type="color", type="date" yozilishi bilan brauzer o'zining chiroyli boshqaruvini chiqaradi.

Avtomatik validatsiya

Noto'g'ri qiymat kiritilsa, brauzerning o'zi xatoni ko'rsatib formasini yuborishga yo'l qo'ymaydi.

03

I bob yakuniy loyihasi

Shaxsiy interaktiv veb-portfolio qurish

I bob: Biz bosib o'tgan me'morchilik yo'li

1. Asoslar Internet, DNS HTML strukturasi 2. Kontent Rasm, jadval, ro'yxat Interaktiv formalar 3. Semantika header, main, article Video, audio, details 4. Tayyor loyiha Global atributlar To'liq veb-sahifa!

Portfolio loyihasini yig'ish bosqichlari

1-qadam: Header va Profil

Logotip, navigatsiya va shaxsiy fotosurat (<figure> va <figcaption> bilan).

2-qadam: Ko'nikmalar va Multimedia

O'rganilgan texnologiyalar jadvali, <progress> va audio pleer.

3-qadam: Muloqot formasi

Ism, rang tanlash, uchrashuv sanasi va fikr-mulohaza maydoni.

Foydalanish qulayligi (UX)

tabindex atributi

Bosganda qoidani ko'ring

Qoida

Klaviaturadagi Tab tugmasi bosilganda fokus qaysi maydonga sakrashini boshqaradi. Tezkor forma to'ldirish uchun juda muhim.

Avtomatik validatsiya

Bosganda qoidani ko'ring

Qoida

required, min, max va pattern atributlari orqali foydalanuvchi xato kiritishini oldini olamiz.

I bob yutuqlari raqamlarda

0
HTML bo'yicha to'liq o'zlashtirilgan darslar
0
Amaliyotda o'rganilgan HTML teglari
0
II bob — CSS dizayniga to'liq tayyorgarlik
Tabriklaymiz! Siz veb-sahifaning mukammal semantik skeletini qurishni o'rgandingiz!

Portfolio loyihasi kodi

<section id="haqimda">
  <h2 contenteditable="true">Men haqimda</h2>
  <figure>
    <img src="avatar.jpg" alt="Jasur" width="200">
    <figcaption>Jasur Karimov — Front-end dasturchi</figcaption>
  </figure>
  <p>HTML darajam: <progress value="95" max="100"></progress></p>
  <input type="color" title="Rang tanlang">
</section>

O'zingizni sinab ko'ring

Dasturchiga HTML elementi ichida o'zining shaxsiy maxsus ma'lumotlarini xavfsiz saqlash imkonini beruvchi global atribut qaysi?

To'g'ri! data-* (masalan: data-id="10", data-narx="500") orqali istalgan shaxsiy ma'lumotni saqlash va keyin JavaScript bilan o'qish mumkin.
Amaliy topshiriq · 25 daqiqa

I bob yakuniy loyihasini quring

  1. O'zingiz haqida 1 sahifalik to'liq veb-sahifa (portfolio) yarating.
  2. Semantik bloklarni qo'llang (header, nav, main, footer).
  3. Surat va izohni <figure> bilan joylang.
  4. Muloqot formasida color va date inputlarini sinang.
  5. Sarlavhalardan biriga contenteditable="true" qo'shing.

I bob xulosasi va II bobga ko'prik

I bobda o'rganildi:

  • HTML hujjati arxitekturasi
  • Matnlar, jadvallar, formalar
  • HTML5 semantik teglari
  • Multimedia va global atributlar

Keyingi haftada (4-hafta):

II bob: CSS texnologiyasi va sahifa dizayni. Ranglar, shriftlar, selektorlar, box model va sahifalarni chiroyli stillashga kirishamiz!