Bu modulda sahifaning "qurilish g’ishtlari" o’rganildi: havolalar, rasmlar, jadvallar va ro’yxatlar.
Havolalar
Havola <a> tegi bilan yaratiladi, manzil href atributida ko’rsatiladi:
<a href="https://ochiqkurs.uz">Ochiq Kursga o’tish</a>
<a href="about.html">Biz haqimizda</a>
<a href="https://youtube.com" target="_blank">Yangi tabda ochiladi</a>
Natija: uchta bosiladigan ko’k havola; oxirgisi yangi tabda ochiladi.
href ikki xil bo’ladi: to’liq (absolyut) manzil boshqa saytga olib boradi va doim https:// bilan boshlanadi; nisbiy yo’l esa o’z loyihangiz ichidagi faylga ishora qiladi — about.html yonma-yon fayl, sahifalar/about.html ichki papkadagi fayl. target="_blank" havolani yangi tabda ochadi — tashqi saytlarga qulay, ichki sahifalarda esa shart emas.
Tipik xato. <link> tegini havola deb o’ylash. <link> faqat <head>da tashqi fayl (masalan CSS) ulash uchun; sahifadagi bosiladigan havola — har doim <a>.
Rasmlar
<img src="tog.jpg" alt="Tog' manzarasi" width="400">
Natija: sahifada 400 piksel enlikdagi rasm.
<img> — void element, yopuvchi tegi yo’q. src — rasm fayliga yo’l, alt — rasm ochilmaganda chiqadigan va ekran o’quvchilari o’qiy oladigan matn. altni hech qachon bo’sh qoldirmang: bu ham foydalanuvchiga, ham SEO’ga xizmat qiladi.
Rasm formatlari haqida qisqacha: JPG — foto uchun (kichik hajm), PNG — shaffof fonli rasm va skrinshot uchun, SVG — logotip va ikonkalar uchun (istalgancha kattalashtirsa ham sifat yo’qolmaydi), GIF — sodda animatsiya. width yoki heightdan faqat bittasini bersangiz, brauzer ikkinchisini proporsional o’zi hisoblaydi — rasm cho’zilib ketmaydi.
Tipik xato. Rasm o’rnida "singan" belgi chiqishi — deyarli har doim src yo’li noto’g’ri: fayl nomini, papkani va katta-kichik harflarni tekshiring (Rasm.JPG bilan rasm.jpg — boshqa-boshqa fayllar).
Jadvallar
Jadval qatorlardan (<tr>), qator esa kataklardan (<th> — sarlavha, <td> — oddiy) yig’iladi:
<table>
<tr><th>Kurs</th><th>Davomiyligi</th></tr>
<tr><td>HTML</td><td>4 soat</td></tr>
<tr><td>CSS</td><td>6 soat</td></tr>
</table>
Natija: ikki ustunli jadval — birinchi qatori qalin sarlavha, ostida ikki qator ma’lumot.
Standart holatda jadval chegarasiz ko’rinadi; chiziqlar CSS’dagi border xususiyati bilan beriladi:
<style>
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
}
</style>
Natija: har bir katak atrofida bitta ingichka kulrang chiziq (border-collapse qo’shni chiziqlarni bittaga birlashtiradi — usiz chiziqlar "ikki qavat" bo’lib chiqadi).
Tipik xato. Katak sonini qatorlarda har xil qilish — bir <tr>da uchta <td>, keyingisida ikkita bo’lsa, jadval "qiyshayib" chiqadi.
Ro’yxatlar
<ul> |
<ol> |
|
|---|---|---|
| Nomi | Tartibsiz ro’yxat | Tartibli ro’yxat |
| Belgisi | Nuqta (•) | Raqam (1, 2, 3…) |
| Qachon | Tartib muhim emas | Ketma-ketlik muhim |
<ul>
<li>Non</li>
<li>Sut</li>
</ul>
<ol>
<li>VS Code’ni oching</li>
<li>Yangi fayl yarating</li>
<li>Skeletni yozing</li>
</ol>
Natija: birinchi ro’yxat nuqtali, ikkinchisi 1-2-3 raqamlangan.
Ro’yxat ichiga yana ro’yxat joylash mumkin: <li> ichida yangi <ul> ochiladi — menyu va mundarijalarda ko’p uchraydi:
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
Natija: "Frontend" bandining ostida ichkariga surilgan HTML va CSS bandlari, so’ng "Backend".
Tipik xato. <li>ni ro’yxat tegidan tashqarida yozish yoki <ul> ichiga <li>siz matn qo’yish — belgilar va joylashuv buziladi. Ro’yxat elementlari faqat <li> ichida yashaydi.
Amaliyot
- "Sevimli saytlarim" ro’yxatini tuzing: 5 ta havola, hammasi yangi tabda ochilsin.
- Sahifangizga bitta rasm qo’ying — mazmunli
altbilan. - Haftalik dars jadvalini
<table>bilan yasang: kunlar sarlavha (<th>), darslar kataklarda. - Retsept sahifasi tuzing: masalliqlar —
<ul>, tayyorlash bosqichlari —<ol>. - Jadval katagi ichiga havola va rasm joylashtirib ko’ring — teglar bir-birining ichida bemalol ishlaydi.
Modulni test bilan yakunlang — keyingi modulda elementlarga nom berib, CSS bilan nishonga olish o’rganiladi.