Kursning yakuniy moduli sahifani "kattalardek" yig’ishga bag’ishlandi: semantik maket, head bo’limi, media teglar, toza kod qoidalari va yakuniy loyiha.
Sahifa maketi va semantik teglar
Katta sahifalar odatda bir xil qismlardan iborat: tepada sarlavha va menyu, o’rtada asosiy kontent, pastda aloqa ma’lumotlari. HTML5 bu qismlar uchun "ma’noli" (semantik) teglar beradi:
<body>
<header>Sayt nomi va logotip</header>
<nav>Menyu havolalari</nav>
<main>
<section>
<article>Asosiy maqola</article>
</section>
<aside>Yon panel</aside>
</main>
<footer>Aloqa, mualliflik</footer>
</body>
Ko’rinishda bularning hammasi oddiy <div> kabi ishlaydi — farqi ma’noda, va bu ma’no uch joyda ish beradi: qidiruv tizimi sahifaning asosiy kontenti qayerdaligini aniq biladi (main), ekran o’quvchisi ko’zi ojiz foydalanuvchini to’g’ridan-to’g’ri menyuga (nav) olib o’ta oladi, dasturchi esa olti oydan keyin o’z kodini ochganda qaysi blok nima ekanini izohsiz tushunadi.
section bilan article farqi ko’p so’raladi: article — o’z boshiga mustaqil yashay oladigan kontent (maqola, yangilik, mahsulot kartasi), section — sahifaning shunchaki mavzuli bo’limi.
Tipik xato. Hamma narsani <div>ga o’rash ("div-soup"). Ishlaydi, lekin kodni o’qish qiyinlashadi, SEO esa yutqazadi. Qismning nomi aniq bo’lsa — semantik teg tanlang.
<head> bo’limi
<head> — sahifa haqidagi "pasport" ma’lumotlari:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sahifa haqida qisqa tavsif">
<title>Sahifa nomi</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">
</head>
title— brauzer tabidagi nom va qidiruv natijasidagi sarlavha.viewport— sahifa telefonda to’g’ri masshtabda ochilishi uchun; usiz mobil ko’rinish mayda bo’lib qoladi.description— qidiruv natijasida sarlavha ostida chiqadigan tavsif.link— tashqi fayllarni (CSS, favicon) ulaydi.
Har bir sahifaning titlei boshqacha bo’lishi kerak: "Bosh sahifa — Mening saytim", "Aloqa — Mening saytim". Bir xil titleli o’nta sahifa — qidiruv tizimi uchun ham, tabda adashgan foydalanuvchi uchun ham yomon belgi.
Audio, video va YouTube
<video src="dars.mp4" controls width="480"></video>
<audio src="qoshiq.mp3" controls></audio>
Natija: boshqaruv tugmalari (play, ovoz) bilan video va audio pleer.
Tipik xato. controls atributini unutish — video sahifada bor, lekin uni ishga tushiradigan tugma yo’q.
Foydali qo’shimcha atributlar: autoplay (o’zi boshlanadi — brauzerlar buni faqat muted bilan birga ruxsat beradi), loop (tugagach qaytadan boshlaydi), poster (video boshlanmasidan ko’rinadigan muqova rasmi).
YouTube videosi esa fayl emas — u <iframe> orqali joylanadi:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
Manzil oddiy watch?v= havola emas, maxsus embed/ havola bo’lishi kerak — tayyor kodni YouTube’ning Share → Embed bo’limidan olish mumkin.
Best practices — toza HTML qoidalari
- Teg va atributlarni kichik harfda yozing:
<P>emas,<p>. - Har bir rasmga mazmunli
altbering. - Ichma-ich teglarni chekinish (indent) bilan yozing — struktura ko’zga ko’rinsin.
- Ko’rinish uchun teg tanlamang: qalinlik kerak bo’lsa CSS bor, muhimlik bo’lsa
<strong>. - Ishni validator.w3.org orqali tekshiring — u yopilmagan teg va xatolarni ro’yxat qilib beradi.
Bu qoidalar "chiroyi uchun" emas: toza HTML’ni brauzer barqaror chizadi, qidiruv tizimi to’g’ri o’qiydi, jamoadagi boshqa dasturchi esa davom ettira oladi. Yomon HTML ham ko’pincha "ishlaydi" — muammolar keyin, loyiha kattarganda chiqadi.
Loyiha
Modulning yakuniy darsi barcha o’rganilganni bitta sahifaga birlashtiradi: skelet, semantik maket, matn, rasm, jadval, ro’yxat va forma. Videodagi loyihani tomosha qilgach, uni nusxalamasdan mustaqil qaytarib chiqing — mustaqil urinishda chiqqan xatolar eng ko’p narsa o’rgatadi.
Amaliyot
- Shaxsiy portfolio sahifasini boshlang:
headerda ismingiz,navda uchta havola,footerda aloqa ma’lumotlari. mainichiga "Men haqimda"sectionini qo’shing: matn va rasm.- "Ko’nikmalarim" jadvali va "Rejalarim" tartibli ro’yxatini joylang.
- Sevimli YouTube videongizni
iframebilan qo’shing. - Tayyor sahifani validator.w3.org’da tekshirib, barcha xatolarni tuzating.
Bu — kursning so’nggi moduli: testni ishlab kursni yakunlang. Keyingi qadam — CSS asoslari kursi.