|
Veb sahifani HTML qismini tayyorlash
|
| bet | 7/9 | | Sana | 10.11.2023 | | Hajmi | 6.11 Mb. | | #97092 |
Bog'liq Induvidual loyiha Mirgulshanov Muhsinjon 1 Muhsinjon amaliy iahi 1 kompyuter animatisa fanidan2.2. Veb sahifani HTML qismini tayyorlash
Veb sahifamizni HTML qismini tayyorlash uchun biz veb sahifamizni sectionlarga bo’lib olamiz. Bunda veb sahifa eng tepasidagi qism “header” undan keyingi bo’lim intro bo’limi va o’rtadagi bo’limlar esa veb sahifa asosiy qismi “main” bo’limi deb nomlanadi va veb sahifamizning eng pastdagi qismi esa “footer” deb nomlanadi.
Birinchi navbatda header qismini qilib olamiz. Bizda header qismi uchun alohida header tegimiz bor. Headerimiz ichida logo uchun img tegini ochamiz va navbar qismi uchun esa nav tegimizdan foydalanamiz va teglarimiz uchun class lar berib olamiz (2.8-rasm).
2.8-rasm. Header section
Header qismidan keyin veb sahifamizning intro qismini qilib olamiz. Buning uchun intro tegimiz yoq bo’lganligi uchun div ochib olamiz va unga intro deb class beramiz. Intro qismimizda bizda text va rasm borligi uchun textlarimiz uchun yana alohida div ochib olamiz (2.9-rasm).
2.9-rasm. Intro section
Main qismimizning ichida ham bo’limlarimizni alohida sectionlarga bo’lib chiqamiz. Birinchi keladigan bo’limimizni services deb nomlaymiz. Services sectionimizda bizda tartiblanmagan ro’yxat borligi uchun ul tegidan foydalanib link uchun a tegidan foydalanamiz (2.10-rasm).
2.10-rasm. Services section
Keyingi sectionni providers deb nomlab ochib olamiz. Providers sectionimizda ham tartiblanmagan ro’yxat borligi uchun ul tegidan foydalanib va royxatimiz ichida rasm va textlarimiz borligi uchun img va div teglaridan foydalanamiz (2.11-rasm).
2.11-rasm. Providers section
Navbatdagi sectionimiz esa customer deb nomlab olamiz. Bu sectionimizda orqa fonga gradient orqali rang berilgan ekan shu sababli orqa fon uchun alohida div ochib olamiz. Va div ichida p tegi va pastdagi textlar uchun alohida div ochib olib uni ichida rasm va blockquote teglaridan foydalanamiz.
Blockquote tegi bizga sharhlar, fikrlar aytilganda ishlatiladi.
Customer sectionimiz ostidagi tugmalarni button tegi orqali yasab olamiz. Buning uchun ul tegidan foydalanib ro’yxat qilib olamiz va royxatimiz ichiga button larni joylashtirib olamiz (2.12-rasm).
2.12-rasm. Customer section
Main bo’limimizning oxirgi sectionini article deb nomlab olamiz. Article sectionda ham tartiblanmagan ro’yxat borligi uchun ul tegidan foydalanib va ro’yxatimiz ichida img va div teglaridan foydalanamiz (2.13-rasm).
2.13-rasm. Article section
Oxirgi qismimiz ya’ni footer qismiga ham yetib keldik. Footer qismining chap tarafida textlar uchun alohida div ochib olamiz, o’ng tarafda esa tartiblanmagan ro’yxat borligi uchun ul tegidan foydalanamiz. Va har bitta ro’yxatimiz ichida bo’lim nomi uchun h3 tegi va yana alohida ul tegidan foydalanamiz (2.14-rasm).
2.14-rasm. Footer section
` Shu bilan ushbu veb sahifamizning html qismini tugatib oldik. Agar bu faylimizni browser orqali ochib ko’rsak qilgan veb sahifamiz tana qismini ko’rishimiz mumkin. Veb sahifamizga go’zallik berish uchun esa bizga css yordamga keladi. Css orqali biz veb sahifamizni yanada chiroyli va foydalanuvchi uchun qulay qilishimiz mumkin.
|
| |
