Muhammad al-Xorazmiy nomidagi Toshkent axborot texnologiyalari universiteti
2-Texnik topshiriq
Sportovar veb-sayti uchun 2-texnik topshiriq
To‘ldiruvchi: Abdurashidov Bexruz
Guruh:316_21
Qabul qildi: Ishmuhamedov A.
Toshkent 2023
REJA:
Kirish
Sayt sahifalari haqida ma’lumotlar
Navigatsiya paneli kodlari
HTML, CSS va Java Script haqida ma’lumotlar
Xulosa
Sportovar veb-sayti uchun 2-texnik topshiriq
Kirish:
2-amaliy ishda siz Sporttovarlar web saytining ba’zi bir qism kodlari hamda ularning vazifalari bilan tanishishingiz mumkin. Xususan hozirgi kunda ko’plab web saytlar HTML, CSS hamda Java Script orqali yoziladi.
HTML, CSS va JavaScript veb-saytlar va veb-ilovalarni yaratish uchun ishlatiladigan uchta muhim texnologiyadir.
HTML (Hypertext Markup Language) veb-sahifa mazmuni va tuzilishini yaratish uchun ishlatiladi. Bu veb-sahifadagi sarlavhalar, paragraflar, rasmlar, havolalar va boshqalar kabi turli elementlarni belgilash uchun teglardan foydalanadigan belgilash tilidir.
CSS (Cascading Style Sheets) HTML tarkibini uslublash va formatlash uchun ishlatiladi. U veb-sahifaga ranglar, shriftlar, tartiblar va boshqa vizual elementlarni qo'shish usulini taqdim etadi. CSS HTML hujjatiga ichki, ichki yoki tashqaridan qo'llanilishi mumkin.
JavaScript - bu veb-sahifaga interaktivlik va dinamik xatti-harakatlarni qo'shish uchun ishlatiladigan dasturlash tili. U animatsiyalarni yaratish, foydalanuvchi kiritishini tekshirish, dinamik tarkibni yaratish va boshqalar uchun ishlatilishi mumkin. JavaScript brauzerda ham, server tomonida ham ishlatilishi mumkin (Node.js yordamida).
HTML, CSS va JavaScript birgalikda zamonaviy veb-ishlanmaning asosini tashkil qiladi va butun dunyo bo'ylab ishlab chiquvchilar tomonidan chiroyli, funktsional va interaktiv veb-saytlar va ilovalar yaratish uchun foydalaniladi.
Bu topshiriqda siz proectning bir qism kodlari bilan tanishishingiz mumkin.
Texnik topshiriq: Sport tovarlari veb-sayti
Ushbu texnik topshiriqda siz HTML, CSS va JavaScript-dan foydalangan holda sport tovarlari veb-saytini yaratasiz. Veb-saytda bosh sahifa, mahsulot sahifalari va xarid qilish savati bo'ladi. Bu erda har bir bo'lim uchun talablar:
Bosh sahifa:
Bosh sahifada veb-sayt logotipi va navigatsiya menyusi bilan sarlavha bo'lishi kerak.
Sarlavha ostida fon tasviri va harakatga chaqiruv tugmasi bo'lgan qahramon bo'limi bo'lishi kerak.
Qahramon bo'limi ostida kamida uchta mahsulot tasviri va ularning tavsifi bo'lgan taniqli mahsulotlar bo'limi bo'lishi kerak.
Nihoyat, ijtimoiy tarmoqlarga va veb-saytning boshqa sahifalariga havolalar bilan pastki qism bo'lishi kerak.
Mahsulot sahifalari:
Har bir mahsulot sahifasida veb-sayt logotipi va navigatsiya menyusi bilan sarlavha bo'lishi kerak.
Sarlavha ostida mahsulot tasviri, uning nomi, narxi va tavsifi bo'lishi kerak.
Mahsulot haqida ma'lumot ostida miqdorni kiritish va savatga qo'shish tugmasi bo'lishi kerak.
Nihoyat, ijtimoiy tarmoqlarga va veb-saytning boshqa sahifalariga havolalar bilan pastki qism bo'lishi kerak.
Xarid savati:
Savat sahifasida veb-sayt logotipi va navigatsiya menyusi bilan sarlavha bo'lishi kerak.
Sarlavha ostida, savatga qo'shilgan barcha mahsulotlar bilan jadval bo'lishi kerak.
Jadvalda mahsulot nomi, narxi, miqdori va oraliq jami ko'rsatilishi kerak.
Jadval ostida, savatdagi barcha mahsulotlarning umumiy narxini ko'rsatadigan umumiy bo'lim bo'lishi kerak.
Nihoyat, to'lov tugmasi bo'lishi kerak.
Bu erda HTML, CSS va JavaScript kodlari:
1.HTML
Ushbu yuqoridagi kodlar navigatsiya paneli uchun ishlatiladi:
Veb-sahifaning navigator paneli odatda sahifa mazmunini tuzish va tartibga solish uchun ishlatiladigan bir qator teglarni o'z ichiga oladi. Bu erda siz ko'rishingiz mumkin bo'lgan ba'zi umumiy teglar:
: Bu teg HTML hujjatining boshlanishini ko'rsatish uchun ishlatiladi.
: Bu teg sahifaning o'zida ko'rinmaydigan hujjat haqidagi ma'lumotlarni o'z ichiga olishi uchun ishlatiladi, masalan, sahifaning sarlavhasi, uslublar jadvallari va skriptlarga havolalar va meta-ma'lumotlar.
: Bu teg brauzerning sarlavha satrida paydo bo'ladigan va ko'pincha xatcho'plar uchun matn sifatida ishlatiladigan sahifa sarlavhasini belgilash uchun ishlatiladi.
<br />
<br />
<br /><body>: Bu teg matn, tasvirlar va boshqa media kabi sahifaning ko'rinadigan mazmunini o'z ichiga olish uchun ishlatiladi.
<br />
<br />
<br /><header>: Bu teg odatda logotip yoki sayt navigatsiyasini o'z ichiga olgan sahifaning yuqori qismidagi bo'limni aniqlash uchun ishlatiladi.
<br />
<br />
<br /><nav>: Bu teg navigatsiya havolalarini o'z ichiga olgan sahifa qismini belgilash uchun ishlatiladi.
<br />
<br />
<br /><main>: Bu teg sahifaning asosiy mazmunini aniqlash uchun ishlatiladi.
<br />
<br />
<br /><section>: Bu teg sahifa mazmunini bo'limlarga bo'lish uchun ishlatiladi.
<br />
<br />
<br /><article>: Bu teg blog posti yoki yangiliklar maqolasi kabi mustaqil tarkibni aniqlash uchun ishlatiladi.
<br />
<br />
<br /><aside>: Bu teg yon panel kabi asosiy tarkibga tegishli tarkibni o'z ichiga olgan sahifa bo'limini belgilash uchun ishlatiladi.
<br />
<br />
<br /><footer>: Bu teg odatda mualliflik huquqi ma'lumotlari va tegishli saytlarga havolalarni o'z ichiga olgan sahifaning pastki qismidagi bo'limni aniqlash uchun ishlatiladi.
<br />
<p>Bu teglar, bu yerda tilga olinmagan boshqalar bilan bir qatorda, veb-sahifa mazmunini tuzishga yordam beradi va uni foydalanuvchilar va qidiruv tizimlari uchun qulayroq qiladi.</p>
<br />
<p>2.CSS
<br /></p>
<br />
<br />
<br />
<p>Navigatsiya paneli veb-saytning asosiy qismidir va CSS-dan uning turli komponentlarini uslublash uchun foydalanish mumkin. Navigatsiya panelini shakllantirish uchun bir nechta tez-tez ishlatiladigan CSS teglari:</p>
<br />
<p>displey: flex;: Bu teg navigatsiya paneli elementlarini bir qatorda ko'rsatish uchun ishlatiladi, bu ularni tekislashni osonlashtiradi.</p>
<br />
<p>justify-content: center;: Bu teg navigatsiya panelidagi elementlarni gorizontal ravishda markazlashtirish uchun ishlatiladi.</p>
<br />
<p>align-items: center;: Bu teg navigatsiya panelidagi elementlarni vertikal ravishda markazlashtirish uchun ishlatiladi.</p>
<br />
<p>list-style: none;: Bu teg navigatsiya panelini yaratishda foydalaniladigan tartibsiz roʻyxatdagi nuqtalarni yoki raqamlashni olib tashlash uchun ishlatiladi.</p>
<br />
<p>padding: 0;: Bu teg tartibsiz roʻyxatdagi har qanday toʻldirishni olib tashlash uchun ishlatiladi.</p>
<br />
<p>margin: 0;: Bu teg tartibsiz roʻyxatdagi istalgan chetni olib tashlash uchun ishlatiladi.</p>
<br />
<p>background-color: #333;: Bu teg navigatsiya panelining fon rangini o'rnatish uchun ishlatiladi.</p>
<br />
<p>rang: #fff;: Bu teg navigatsiya paneli elementlarining matn rangini o'rnatish uchun ishlatiladi.</p>
<br />
<p>text-decoration: none;: Bu teg navigatsiya paneli elementlari matnidan har qanday tagiga chiziqni olib tashlash uchun ishlatiladi.</p>
<br />
<p>font-size: 16px;: Bu teg navigatsiya paneli elementlarining shrift hajmini belgilash uchun ishlatiladi.</p>
<br />
<p>Bular navigatsiya panelini shakllantirish uchun tez-tez ishlatiladigan CSS teglari. Biroq, navigatsiya panelini sizning xohishingizga ko'ra sozlash uchun ishlatilishi mumkin bo'lgan ko'plab boshqa teglar va xususiyatlar mavjud.</p>
<br />3.Java <a href="/htmlda-freymlar.html">Script
</a><br />
<br />
<p>JavaScript kodi havola bosilganda <nav> elementidagi sinfni almashtirish orqali navigatsiya paneliga funksionallikni qoʻshadi, undan qoʻshimcha navigatsiya imkoniyatlarini jonlantirish yoki ochish uchun foydalanish mumkin. QuerySelector va querySelectorAll usullari DOM dan elementlarni tanlash uchun ishlatiladi va addEventListener usuli har bir havolaga bosish hodisasi tinglovchisini biriktirish uchun ishlatiladi.</p>
<br />
<br />
<br /><b>Xulosa:</b>
<br />
<p>Ushbu kodlar sport tovarlari veb-sayti uchun navigatsiya panelini yaratish va uning uslubi va xatti-harakatlarini sozlash uchun ishlatilishi mumkin. HTML, CSS va JavaScript-dan foydalanib, biz dizaynni mijozga yanada moslashtirilgan va chiroyli qilishimiz mumkin.</p>
<br />
<p>HTML kodi <nav> tegi bilan navigatsiya paneli va <ul> va <li> teglari bilan ro'yxat yaratadi. Ushbu ro'yxat veb-saytdagi turli sahifalar yoki bo'limlarga havolalarni o'z ichiga oladi.</p>
<br />
<p>CSS kodi navigatsiya paneli va havolalarning ko'rinishini aniqlaydi. Masalan, <a href="/liquid-crystal-displays.html">fon rangi</a>, shrift o'lchami, matn rangi va ramka kabi xususiyatlarni sozlash mumkin. CSS shuningdek, turli qurilmalar uchun navigatsiya panelining ko'rinishini moslashtirish uchun media so'rovlaridan foydalanishi mumkin.</p>
<br />
<p>JavaScript kodi navigatsiya paneliga dinamizm qo'shadi. Misol uchun, navigatsiya panelini ochish va yopish uchun tugma yoki gamburger menyusini qo'shishimiz mumkin. Ushbu kod har bir havola bosilganda toggleNav() funksiyasini chaqirish orqali navigatsiya paneli sinfini o'zgartiradi. Bu CSS-da nav-open sinfini almashtirish uchun ishlatiladi.</p>
<br />
<br />
<br />Kod namunalarida keltirilgan HTML, CSS va JavaScript kodlarini veb-saytingiz ehtiyojlariga moslashtirishingiz mumkin. Ushbu kodlar veb-saytning qulayligi va dizaynini yaxshilash uchun turli xil texnika va vositalardan faqat bir nechtasi.</nav></nav></footer></aside></article></section></main></nav></header></body>
Do'stlaringiz bilan baham: |
