Animal Trading cards



Download 5,19 Mb.
bet50/64
Sana06.09.2021
Hajmi5,19 Mb.
#167002
1   ...   46   47   48   49   50   51   52   53   ...   64
Bog'liq
FrontEnd uz Final

45. Dizaynni takrorlash


Mashq: Dizaynni takrorlash

Quyidagi ish maydonida videoda ko‘rsatilgan "tic-tac-toe" doska dizaynini qayta yaratishga harakat qiling. Bundan tashqari, ish maydonining pastki qismida rasmning nusxasi mavjud.

Buning uchun "CSS" qoidalarini tictactoe.css fayliga qo‘shing. "HTML" faylini tahrirlashingiz umuman hojat yo‘q!




46. Xulosa



Laboratoriya: Animal Trading Cards


HTML va CSS haqidagi bilimlaringizdan foydalanib, sevimli hayvoningiz tasvirlangan vebga asoslangan savdo kartasini yaratish.

1. Laboratoriya bilan tanishish


Boshlab olishingiz uchun nimalarni bilishingiz kerak?

To be successful in this Lab, you'll need to have skills in:



  • "HTML"ga doir bilim va ko‘nikmalar

    • Elementga klass atributini qo‘shish

    • Matn tarkibini o‘zgartirish

  • "CSS"ga doir bilim va ko‘nikmalar

    • Chegara qo‘shish

    • Ichki chegara(padding) qo‘shish

    • Matnni kursiv ko‘rinishiga keltirish

    • Ro‘yxat elementining ko‘rsatkichlarini o‘zgartirish

"Laboratoriya quyidagi fayllardan boshlanadi:

card.html clownfish.jpg design-prototype.jpg styles.css Sizning vazifangiz - ""design-prototype.jpg"" faylida ko‘rganlaringizni sinab ko‘rish va yangidan yaratish. Atributlarni qo‘shish va muayyan elementlarga stil berish uchun CSS selektorlardan foydalanish uchun ""card.html"" faylini o‘zgartirishingiz kerak bo‘ladi.

⚠️ Muhim ⚠️ Iltimos, ""card.html"" faylida mavjud id atributlarini olib tashlamang yoki o‘zgartirmang.

""card.html"" fayli ba’zi boshlang‘ich HTML bilan birga keladi. Ba’zi HTML elementlari allaqachon id atributlariga ega. Tekshirish kodi ushbu aniq elementlarda aniq identifikatorlarni talab qiladi, shuning uchun ularni olib tashlamang, aks holda tekshirish muvaffaqiyatsiz bo‘ladi.

🛠 Kerakli o‘zgartirishlar ⚙️ ""card.html"" fayliga quyidagi o‘zgarishlarni kiriting:

Sarlavhani sevimli hayvoningizning ismiga o‘zgartiring To‘ldiruvchi rasmni sevimli hayvoningizning surati bilan almashtiring.

Shuningdek, rasmning ""alt"" atributini hayvoningizning ismiga o‘zgartiring. Shunday qilib, alt = ""sizning hayvoningizning nomi"" sizning hayvoningizning haqiqiy nomi bilan almashtirilishi kerak.

Eslatma: 300 piksel kengligida rasmdan foydalanasiz. Agar sizning rasmingiz kattaroq bo‘lsa, CSS-da rasm kengligini 300 pikselga o‘rnatishingiz mumkin, ammo shuni yodda tutingki, sizning rasmingiz qisqarishi yoki buzilishi mumkin. Keyinchalik, moslashuvchan rasmlardan foydalanib, bu muammoni qanday hal qilish haqida gaplashamiz.

Qiziqarli fakt paragrafini tahrirlang

Asosiy xususiyatlarni tahrirlang Ma’lumot paragrafini tahrirlang 💃 Sahifaga stil bering 🕺 Dizayn prototipiga mos kelish uchun CSS ushbu uslublarni qo‘llashi kerak:

styles.css faylini HTMLga bog‘lang yoki aks holda CSS qo‘llanilmaydi. Qiziqarli faktlar id = ""card"" bilan

uchun ""animal-info"" CSS class qo‘shing. Hayvon haqida qiziqarli fakt matnini kursiv qiling Hayvonlar ro‘yxatidagi yorliqlarni qalin qilib belgilang (m-n, ""Habitat"") Hayvonlar ro‘yxatidagi bandlardan nuqtalarni olib tashlang Hayvonning nomi, tasviri va ma’lumotlari atrofida chegara qo‘shing hayvon to‘g‘risidagi ma’lumot atrofida chegara qo‘shing hayvonning nomi, tasviri va ma’lumotlari orasidagi bo‘sh joy qo‘shing (siz ""padding"" xusuiyatidan foydalanishingiz kerak bo‘ladi). ✅ Kodingizni sinab ko‘ring ❌ Laboratoriyadan o‘tish, ""card.html"" faylida dizayn-prototip.jpg kabi ko‘rinishga ega sahifani hosil qilish uchun yuqoridagi ko‘rsatmalarga rioya qiling.

Sizning qanchalik maqsadga yaqinligingizni ko‘rish uchun Ish maydonining pastki o‘ng qismida joylashgan ""RUN CODE"" tugmachasini bosing. Bu sizning kodingizda tekshiruvchini ishga tushiradi. Popup oyna paydo bo‘ladi va barcha sinovlardan o‘tadi. Agar biror narsa qilish kerak bo‘lsa, u ushbu oynada qizil rangda ko‘rinadi. Bundan tashqari, ""RUN CODE"" imkoniyatidan cheklanmagan sonda foydalanishingiz mumkin, shuning uchun undan o‘tguningizcha foydalanib turing! "


Download 5,19 Mb.

Do'stlaringiz bilan baham:
1   ...   46   47   48   49   50   51   52   53   ...   64




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish