📜

HTML Darslari bo'yicha Qaydlar

Aug 3, 2024

HTML Darslari bo'yicha Deyv Greyning qaydlari

Kirish

  • O‘qituvchi: Deyv Grey
  • Tarkib: 4 soatlik HTML darslari
  • Tuzilishi: kitob bo‘limlariga o‘xshash birin-ketin 10 ta dars
  • Resurslar: video tavsifida mavjud GitHub linki

HTML nima?

  • HTML: Hypertext Markup Language (Gipertekst Markup Tili)
  • Vebning asosiy qurilish bloki
  • Veb mazmunining ma'nosi va tuzilishini aniqlaydi
  • Gipertekst veb-sahifalarni bog‘lovchi havolalarga ishora qiladi
  • Matn, rasm va boshqa mazmunni veb-brauzerda ko'rsatish uchun belgilaydi

Boshlash

  • Kerakli vositalar:
    • Veb-brauzer: Google Chrome tavsiya etiladi
    • Kod muharriri: Visual Studio Code tavsiya etiladi
    • Kengaytmalar: Dark New Tab, Prettier, VS Code Icons, Live Server
  • Fayl tuzilishi: HTML kurs fayllari uchun bir papka yarating

Birinchi HTML sahifangizni yaratish

  1. Asosiy tuzilma:
    • <!DOCTYPE html> bilan boshlang
    • Tuzilish: html, head va body
    • head ichida title ni qo‘shing
  2. Asosiy bo‘limlar:
    • Head bo‘limi: Metama'lumotlar, title va bog‘langan resurslar
    • Body bo‘limi: Ko‘rinadigan mazmun
  3. HTML elementlar:
    • Asosiy sarlavha uchun <h1>, kichik sarlavhalar uchun <h2>, paragraflar uchun <p>
    • Har bir sahifada faqat bitta <h1> tavsiya etilayapti

Formatlash va Stil (Ixtiyoriy)

  • Stil uchun CSS-dan foydalaning (kelajakdagi darslarda qoplanadi)
  • Semantik elementlar va validatsiyaga e'tibor berish tavsiya etiladi

Validatsiya va Xatolar

  • Xatolarni tekshirish uchun W3C Markup Validation Service dan foydalaning
  • Fayllar uchun nomlash konventsiyalariga rioya qiling va fayl nomlarida bo‘sh joylardan qoching

Ro'yxatlar yaratish

  • Ro'yxat turlari:
    • Tartibli ro‘yhat (<ol>): raqamli
    • Tartibsiz ro‘yhat (<ul>): nuqtali
    • Tavsif ro‘yhat (<dl>): atamalar va tavsiflar

Giperbog‘lanmalar

  • Giperbog‘lanmalar yaratish uchun ankertaglardan (<a>) foydalaning
  • Mutlaq va nisbiy URL-larni tushuning
  • Sayt ichida bog‘lash uchun <a href="about.html">Biz haqimizda</a> ni ishlating

Rasmlar va Multimedia

  • src va alt atributlari bilan <img> rasmlarini ishlating
  • alt matni bilan rasmga kirish imkoniyatini yaxshilang

Semantik HTML

  • <header>, <footer>, <main>, <article>, <section>, va <aside> kabilar kabi semantik elementlarni ishlatishning ahamiyati
  • Bu imkoniyatga kirishni osonlashtiradi va hujjatning tuzilishini yaxshilaydi

Formlar

  • <form> tegi va turli kirish tiplaridan foydalanib formalarni tuzing:
    • Matn, Parol, Email, Checkbox, Radio, Select, Textarea
  • Kirish uchun yashiklar (label) dan foydalaning imkoniyatni oshirish uchun
  • Zarur maydonlar uchun validatsiya

Loyiha Ko'rib chiqish: Little Taco Shop Veb-sayti

  • Uch sahifa yarating: Bosh sahifa, Ish vaqti, Biz bilan bog'laning
  • Navigatsiya, mazmun bo'limlari, foydalanuvchidan ma'lumot yig'ish formalarini amalga oshirish
  • Saytni shakllantirish uchun ilgari o'rganilgan HTML va CSS prinsiplardan foydalanish

Xulosa

  • Yakuniy loyihani ko‘rib chiqing va har bir sahifani validatsiya qiling
  • Barcha havolalar, formalar va rasmlar to‘g‘ri ishlashini ta'minlash
  • Kelgusidagi loyihalar uchun toza, semantik kodning ahamiyatini ta'kidlash

Full transcript