Dars maqsadi:
- Ta’limiy: O’quvchilarga “HTML tushunchasi va veb-sahifani sozlash” mavzusini o’rgatish;
- Tarbiyaviy: O’quvchilarni vatanga sodiq va umummadaniy qadriyatlarimiz asosida tarbiyalash;
- Rivojlantiruvchi: O’quvchilarda “HTML tushunchasi va veb-sahifani sozlash” mavzusi bo’yicha bilim, ko’nikma, malaka va kompetensiyalarini rivojlantirish.
Dars uchun umumiy kompetensiya:
- Axborotlar bilan ishlash;
- O’z-o’zini rivojlantirish;
- Milliy va umummadaniy;
- Kompyuter savodxonlik.
Fanga oid kompetensiya:
O’quvchilarda “HTML tushunchasi va veb-sahifani sozlash” mavzusi yuzasidan ko’nikmalari rivojlangan. Ixtiyoriy kompyuterda veb-sahifa tayyorlab unda HTML buyruqlaridan foydalana oladi.
Darsning borishi:
- Tashkiliy qism:
- Salomlashish:
- Davomatni aniqlash:
- Siyosiy daqiqa (Bugungi kundagi axborot texnologiya yangiliklari)
Yangi mavzu bayoni:
Veb-saytlardan harxil maqsadlarda foydalanish mumkin. Masalan, ular orqali sevimli mavzular haqida o’qish, ijtimoiy tarmoqlarda suhbatlashish, musiqa yoki kinolarni yuklab olish yoki ij’ro ettirish, shuningdek, kompyuter o’yinlarini o’ynash mumkin. Har qanday veb-saytga doir qiziq holatlardan biri shuki, u qaysi maqsad uchun ishlatilishidan qat’i nazar, foydalanuvchilarga qulay dizaynga ega bo’lishi kerak. Hech veb-saytdan izlagan narsangizni topolmay xunob bo’lganmisiz?
Agar veb-saytning dizayni har tomonlama o’ylangan holda ishlab chiqilgan bo’lsa, foydalanuvchi (yoki auditoriya) uni ishlatishdan zavqlanadi. Yoki, aksincha, veb-sayt dizayni puxta yaratilmagan yoki undan ko’zlangan maqsad noaniq bo’lsa, bu foydalanuvchida yomon taassurot uyg’otadi.
Siz veb-sahifani HTML yordamida yaratishni o’rganasiz. Har bitta mayda tafsilotga diqqat qiling, chunki kodda kichik xatoga yo’l qo’yilsa, veb-sahifadagi elementlar to’g’ri aks etmasligi mumkin.
| Kalit so’z |
| Veb-sayt: veb- sahifalar majmui. Auditoriya: veb- sahifaga tashrif buyuruvchi kishilar. Maqsad: veb-sahifan yaratish sababi, masalan, vaqtni maroqli o’tkazish. Veb-sahifa: veb saytdagi bir sahifa. HTML: veb-sahifa yaratish uchun ishlatilgan til. |
HTML nima?
HTML – “Hypertext Markup Language” iborasining qisqartmasi. Bu veb-sahifa yaratish uchun ishlatiladigan dasturlash tillaridan biridir. Veb-sahifa yaratish uchun ishlatiladigan boshqa tillar qatoriga JavaScript, CSS va PHP kiradi. Ammo HTML eng eski va keng tarqalgan tillardan biridir.
Siz yozgan HTML kodni veb-brauzer aks ettiradi (o’qiydi). Veb-brauzer siz veb-saytda aks etishini istagan barcha matnlar va tasvirlarni namoyish qilishga xizmat qiladi. Veb-brauzer ularning to‘g‘ri formatlanishini ta’minlaydi. Veb-brauzer koddan har xil elementlarni qayerga joylash va ularning qanday bo’lishini aytib turadigan bayonot sifatida foydalanadi.
Veb-saytlar interfaol elementlarga ega bo’lishi, shuningdek, har xil ekranlar va qurilmalarda aks etishi uchun ular kodda yozilishi lozim. Uning muqobili sifatida foydalanuvchiga butun veb-sahifani katta tasvir sifatida yuborish mumkin. Bunday holatda qanday muammolar kuzatilgan bo’lar edi?
Ayrim odamlar veb-sahifa yaratish uchun shablonni ishlatadi. Bu ularga samarali dizayn yaratishga yordam beradi. Siz yangi veb-sahifani boshidan yaratishni o’rganasiz. Ushbu jarayon amaliy ko’nikmalarni egallashga va aynan o’zingiz istagan veb-sahifani yaratishga imkon beradi.
Veb-sahifani sozlash
Birinchi galda Notepad (Блокнот) dasturidan foydalanib, veb-sahifani sozlab olish kerak. Notepad (Блокнот) boshqa ko’plab kontentlar singari veb-sahifalar uchun ham ishlatilishi mumkin. Bu siz yaratayotgan veb-sahifa ekanini anglatish uchun muayyan HTML kodni yozish talab etiladi.
Siz yozadigan HTML kod veb-sahifaning manba kodi deb ataladi. Kodni yozish uchun Notepad (Блокнот) dasturini ishga tushurish kerak va yangi Notepad (Блокнот) fayliga quyidagi HTML kodni kiritish kerak.
Siz yozgan kod veb-sahifa uchun asosiy tuzilma hisoblanadi. Kodni juda aniqlik bilan yozish kerak. Biror mayda xatoga yo‘l qo’yilsa, veb-sahifa to‘g‘ri aks etmasligi mumkin. Deylik, burchak qavslar < > va ularning ichidagi matn orasida hech qanday bo‘sh joy bo’lmasligi kerak.
<!DOCTYPE html> dasturiy ta’minotga siz yaratayotgan hujjat HTML hujjat ekanini bildiradi.
Bu dasturiy ta’minotga u veb-sahifa bo’lishini bildiradi.
Koddagi har bir qatorning boshi va oxirida keladigan burchak qavslar (< >) teg yaratishga xizmat qiladi. Notepad (Блокнот) teglari dasturga aynan nimani va qay shaklda aks etishini bildirish uchun ishlatiladi.
<html> – ochish tegi. Bu dasturiy ta’minotga veb-sahifa qayerdan boshlanishini bildirish uchun ishlatiladi.
<head> – sarlavha qismi uchun ochish tegi. Bosh qism sahifa nomi kabi elementlar uchun ishlatiladi va veb-sahifaning yuqorisidagi satrda aks etadi.
</head> – sarlavha bo’limini yopish tegi. Yopish tegi o’ngga egilgan tikka chiziq (/) slesh bilan boshlanadi. Bu orqali uni ochish tegidan farqlash mumkin.
| Kalit so’z |
| Teg: veb-sahifaga kontent kiritish va uslubni qo’shish uchun ishlatiladigan kodning bir qismi. Ochish tegi: kontentning boshida joylashgan teg. Yopish tegi: kontentning oxirida joylashgan teg. |
<body> – asosiy qism uchun ochish tegi. Asosiy qism veb-sahifadagi barcha kontent yoziladigan bo’limdir.
</body> – asosiy qism uchun yopish tegi.
</html> – htmlni yopish tegi. Bu dasturiy ta’minotga veb-sahifa qayerda tugashini bildirish uchun ishlatiladi.
HTML kod orqali siz aks ettirishni istagan aksariyat elementlar ochish va yopish teglariga egadir.
Veb-sayt uchun tuzilmani sozlagandan keyin unga kontent kiritishni boshlash mumkin. Har bitta veb-sahifaga kiritilishi lozim bo’lgan elementlardan biri bu sarlavhadir. U haqiqiy sahifada aks etmaydi, balki veb-sahifa ochilganda, veb-brauzer panelida (sarlavha satrida) paydo bo’ladi.
Sarlavha kiritish
Veb-sahifa uchun quyidagi kodni bosh teglar orasiga yozing.
<title>Sinov sahifa</title>
U mana bunday ko’rinishda bo’lishi kerak:
Hujjatni veb-sahifa sifatida saqlash
Bu juda muhim:
O‘zingiz yaratgan veb-sahifani ochish uchun uni alohida usulda saqlashingiz kerak. U HTML fayl sifatida saqlanishi lozim.
1. Avval File (Файл) va shundan keyin Save As (Сохранить как…) buyrug’ini tanlang.
2. Veb-sahifa kerakli papkaga saqlanganiga ishonch hosil qiling.
3. Veb-sahifa uchun “.html” bilan tugaydigan mos nomni kiriting. Masalan: Mening_veb_sahifam.html
4. Fayl nomi kiritilgach, Save (Сохранить) tugmasini bosing.
Yozilayotgan kodda har gal faylga o’zgartirish kiritilganda, faylni saqlash talab etiladi. Buning uchun Fayl menyusidagi Save (Сохранить) buyrug’idan foydalanish mumkin.
Endi hujjatni veb-sahifa sifatida ochish mumkin. Agar hujjatlarga o’tib, saqlagan faylingizni topsangiz, uning yonida veb-brauzer ikonkasi borligiga guvoh bo’lasiz.
Faylning ustiga bosilganda, u veb-sahifani veb-brauzerda ochadi. Hali sahifaga hech qanday kontent kiritilmagani uchun unda hozircha hech narsa aks etmayapti. Kiritgan sarlavha tepadagi panel (sarlavha satrida) da aks etadi.
Yangi mavzuni mustahkamlash:
1-mashg‘ulot
Kompyuteringizda papka yarating va unga Website deb nom bering. Bu papka ichida boshqa papka yaratib, uni Images deb nomlang. Veb-sahifalarni Website deb atalgan papkaga, veb-saytga mo’ljallangan tasvirlarni esa Images deb nomlangan papkaga saqlash mumkin.
2-mashg‘ulot
Veb-sahifani “Bosh sahifa” nomi bilan sozlang. Bosh sahifa veb-saytning asosiy veb-sahifasi hisoblanadi. 1-amaliy ko‘nikmadagi kodni ishlating: Sarlavha kiritish sizga namuna sifatida yordam beradi. Kodni veb-sayt papkasida saqlashni unutmang.
Uyga vazifa:
Mavzuga oid atamalarni o’zlashtirish. Qo’shimcha ravishda mustaqil mashqlar bajarish.