Документ

Всего документов: 5844
Число пользователей: 15259

Информация о документе

Цена	25000UZS
Размер	6.3MB
Покупки	1
Дата загрузки	14 Февраль 2025
Расширение	docx
Категория	Информатика и ИТ

Mehmonxona web sayti

O ‘ ZBEKISTON RESPUBLIKASI
OLIY TA’LIM, FAN VA INNAVATSIYALAR VAZIRLIGI
SHAROF RASHIDOV
NOMIDAGI SAMARQAND DAVLAT UNIVERSITETI
MATEMATIKA FAKULTETI
AMALIY MATEMATIKA YO‘NALISHI
_____-GURUH TALABASI
___________________________________NING
KOMPYUTER GRAFIKASI VA WEB DIZAYN
FANIDAN
KURS ISHI

Mavzu: Mehmonxona web sayti
Bajardi: .
Qabul qildi: .
Samarqand- 2025

Foydalanilgan adabiyotlar
1.M.M.Aripov va boshqalar. Informatika. Axborot texnologiyalari. o‘quv
qo‘llanmasi, 1-2 qism. Toshkent, 2003.
2.Yuldashev ulmasbek Abdubanapovich.Web Dizayndan O’quv Qo’llanma.
Guliston-2022
3. M.Aripov, Yu.Pudovchenko, K.Aripov. «Osnovi Internet» T.: O‘zMU 2002.
4. M. Aripov. «Informatika va hisoblash texnikasi asoslari». Toshkent,2001 .
5. https://www.nuu.uz - Informatika o‘qitish metodikasi kursidan distantsion kurs.
O‘zbekiston Milliy universiteti.
6.https://www.bitpro.ru/ITO/index.html-«Informatsionnie texnologii
vobrazovanii» konferentsiya sayti.
7. https://www.ziyonet.uz – O‘zbekiston Respublikasi Axborot-ta’lim tarmog‘i.
8. https://www.infomicer.net – Elektron darsliklar, entsiklopediyalar, multimedia
materiallari va boshqalar.
9. https://github.com/

42

Xulosa
Mehmonxona uchun veb-sayt yaratish biznesni rivojlantirish va mijozlarga
qulaylik yaratishda muhim vosita hisoblanadi. Ushbu kurs ishi davomida veb-sayt
yaratish jarayonining nazariy va texnik jihatlari chuqur o‘rganildi.
Vebsaytni tuzishda asosan HTML, CSS va PHP foydalandim. Saytni
tuzishda quyidagi HTML semantik elementlaridan foydalanildi: <header>, <nav>,
<section> hamda <footer> lardan foydalangan holda tuzildi. Hamda asosan <div>,
<h2>, <h3>, <h4>, <h5>, <p>, <img>, <li>, <ul>, <a>, <i>, <span>, <br>,
<button> va boshqa HTML teglari orqali veb sayt tuzildi. Shuningdek, asosan
classlar orqali saytga style (dizayn) berildi. Css fayllarda saytni bezash uchun turli
kodlar yozildi. OS panel orqali bazaga bog’langan.
 Sayt uchun domen nomi (domen): Sayt yaratish uchun texnik
topshiriqlarni tayyorlash bosqichida ham sayt uchun domen nomi to‘g‘risida qaror
qabul qilish maqsadga muvofiqdir. Agar domen oldindan ro‘yxatdan o‘tmagan
bo‘lsa, unda siz mos bo‘lgan bepul domen nomini tanlashingiz va uni ro‘yxatdan
o‘tkazishingiz kerak.
 Saytning tuzilishi: Saytni ishlab chiqish bo‘yicha texnik topshiriq
doirasida saytning kelajakdagi tuzilishini (saytning asosiy bo‘limlari, bo‘limlari va
sarlavhalari, ularning mazmuni, xizmatlari) aniqlash kerak, shu bilan birga resursni
yanada rivojlantirish imkoniyatlari.
 Sayt navigatsiyasi: Saytning navigatsiya menyusini tashkil qilishning
oqilona shaklini aniqlash, saytning qulayligini yaxshilashga yordam beradigan
ba’zi parametrlarni hisobga olish kerak.
 Web-sayt dizayni: Saytni yaratish bo‘yicha texnik topshiriqda saytni
loyihalash uchun barcha asosiy talablar belgilanadi: optimal o‘lchamlari,
brauzerlararo muvofiqligi va boshqalar. Agar sayt etarlicha murakkab bo‘lsa, sayt
sahifalarining prototiplari yaratiladi (sahifa sxemasining sxematik versiyasi).
41

Helvetica shriftida ko'rsatilishini aniqlash uchun CSS-dan foydalanishingiz
mumkin. Bundan farqli o'laroq, "What you see is what you" (WYSIWYG)
dasturidan foydalanadigan veb-sayt quruvchilari foydalanuvchidan hech qanday
tavsif kodini kiritishni talab qilmaydi - barchasi platformaga o'rnatilgan.
CSS qoidalari hujjatda ma'lum bir ustuvorlik tartibida o'qiladi (va shuning uchun
kaskadli uslublar jadvallarida "kaskad" so'zi). Odatda, CSS hujjatida keyinroq
bo'lgan qoida g'olib hisoblanadi - agar birinchi qoida aniqroq bo'lmasa. Misol
uchun, sizning CSS faylingizda ikkita qoidaga zid bo'lishi mumkin, masalan,
asosiy shriftni ko'k va paragraf shriftini yashil rangga o'rnatish. Bunday holda,
g'olib qoida paragraf shrifti bo'ladi, chunki u asosiy shriftdan ko'ra aniqroq.
CSS turlari
Inline CSS
Inline CSS to'g'ridan-to'g'ri HTML elementlariga "style" atributidan foydalangan
holda CSS qo'shishni o'z ichiga oladi. Ushbu yondashuv muayyan elementlarga
noyob uslublarni qo'llash uchun foydalidir. Biroq, bu odatda keng ko'lamli uslublar
uchun tavsiya etilmaydi, chunki u kamroq qo'llab-quvvatlanadigan kodga va
tashvishlarning qisqarishiga olib kelishi mumkin.
Misol:
``` html
<p style="color: blue; font-size: 16px;">Bu ko'k paragraf.</p>
```
Ichki yoki o'rnatilgan CSS
Ichki yoki o'rnatilgan CSS HTML hujjatining `<head>` bo'limidagi `<style>`
elementiga joylashtirilgan. U ushbu sahifadagi muayyan HTML elementlariga
uslublarni qo'llaydi. U ichki CSS-dan ko'ra ko'proq tashkilotni taklif qilsa-da, u
hali ham maxsus HTML fayli bilan cheklangan.
Misol:
``` html
<head>
<uslub>
8


 ?>
Butun boshli kodli faylni vaqtincha /* */ orasiga joylab qo'yish mumkin.
Fronted va Backend haqida tushuncha
Dasturiy ta minot muhandisligidaʼ frontend va backend yoki back-end deb
ataladi. Ushbu atamalar dasturiy ta minotning
ʼ taqdimot qatlami ( frontend ) va
ma lumotlarga kirish qatlami (
ʼ backend ) o rtasidagi farqlarni ajratishni ʻ
anglatadigan apparat . Server modelida tashqi ko rinish
ʻ odatda frontend hisoblanadi
va frontendning o zida ba zi
ʻ ʼ taqdimot ishlari amalga oshirilgan bo lsa ham, ʻ
backend hisoblanadi.
Dasturiy ta minot tizimida apparat va foydalanuvchi o rtasida ko plab ma lumotlar
ʼ ʻ ʻ ʼ
bo lishi
ʻ mumkin. Old qismi mavhum bo lib, foydalanuvchilarga ʻ
qulay interfeysni ta minlaydi. Orqa tomon
ʼ esa odatda ma lumotlarni saqlash ʼ
va biznes mantig ini
ʻ boshqaradi.
Telekommunikatsiyada old tomonni qurilma yoki xizmat deb hisoblansa, orqa
tomon esa xizmat ko rsatadigan
ʻ infratuzilmadir.
Asosiy qoida shundaki, old tomondagi (yoki „frontend“) kod foydalanuvchi
tomonidan boshqariladigan har qanday komponentni o z ichiga oladi. Server
ʻ
tomonidagi (yoki „backend“) kod odatda serverda joylashgan bo lib, ko pincha
ʻ ʻ
foydalanuvchidan jismoniy jihatdan uzoqroq bo ladi.
ʻ
Kontentni boshqarish sistemalarida frontend va backend atamalari mos ravishda
CMS va ma muriy ko rinishlarning foydalanuvchiga ko ringan qismlariga ishora
ʼ ʻ ʻ
qilishi mumkin.
Nutq sintezida frontend qism sintez tizimining kiritilgan ma lumotni
ʼ
ramziy fonetik tasvirga aylantiradigan qismi, orqa tomon ya ni backend qism esa
ʼ
ramziy fonetik tasvirni haqiqiy tovushlarga aylantiradigan qismi hisoblanadi.
13

I BOB WEB-SAHIFA HAQIDA MA’LUMOTLAR
Web-sahifa va Web sayt haqida tushuncha
Ko'pchilik internet haqida o'ylashganda, ular veb-saytlarni o'ylaydi. Ammo
veb-sayt va veb-sahifa o'rtasidagi farq nima? Veb-sayt veb-sahifalar to'plamidir,
veb-sahifa esa veb-saytda joylashgan yagona hujjatdir. Veb-sayt - bu bir-biriga
bog'langan veb-sahifalar to'plami. Veb-manzilni (URL sifatida ham tanilgan)
kiritganingizda brauzeringiz veb-sayt joylashgan serverga ulanadi va ushbu sayt
uchun barcha veb-sahifalarni yuklab oladi. Veb-saytga tashrif buyurganingizda
ko'radigan veb-sahifa odatda bosh sahifa bo'lib, bu saytga tashrif buyurganingizda
yuklanadigan birinchi sahifadir.
Veb-saytning bosh sahifasida odatda sayt tavsifi, shuningdek, saytdagi barcha
boshqa sahifalarga havolalar mavjud. Bundan tashqari, ko'pgina veb-saytlarda sayt
nomini ko'rsatadigan logotip yoki banner mavjud.
Veb-sahifa veb-saytda joylashgan yagona hujjatdir. Veb-sahifaga havolani
bosganingizda, brauzeringiz veb-sahifa joylashgan serverga ulanadi va sahifani
yuklab oladi. Sahifani yuklab olgandan so'ng, uni internetga ulanmasdan oflayn
rejimda ko'rishingiz mumkin.
Veb-sahifalar odatda HTML (Hypertext Markup Language) da yoziladi, bu til veb-
sahifalarni yaratish uchun ishlatiladi. HTML juda oddiy til bo'lib, veb-
sahifalaringizni yaratish uchun kodlashni bilishingiz shart emas.
Veb-sayt va veb-sahifa o'rtasidagi asosiy farqlar
 Ma'nosi: Veb-sayt veb-sahifalar to'plamidir, veb-sahifa esa bitta hujjatdir
 Bo'lim: Veb-saytlar odatda bo'limlarga bo'linadi, ularning har biri o'zining
bosh sahifasiga ega. Veb-sahifalar bo'limlarga bo'linmaydi
 Ichki sozlamalar: Veb-sayt yaratish uchun sizda domen nomi va xosting
bo'lishi kerak. Veb-sahifa yaratish uchun sizga bu narsalar kerak emas
 Shakllanish qulayligi: veb-saytlar odatda veb-sahifalarga qaraganda
murakkabroq va ularni yaratish ko'proq vaqt talab etadi
4

 Navigatsiya oddiy va tushunarli bo’lishi kerak. Masalan, "Xizmatlar", "Bron
qilish", "Biz bilan bog’lanish" kabi menyular.
5. Mehmonxona sayti uchun zarur bo’lgan modullar
 Bron qilish tizimi: Foydalanuvchi kirish va chiqish sanasini tanlab,
mehmonxona xonalarini bron qilishi mumkin.
 Galereya: Xonalar va xizmatlar haqida sifatli tasvirlarni joylashtiring.
 Xarita: Mehmonxonangiz joylashgan hududni ko’rsatish uchun Google
Xaritalar API ishlatishingiz mumkin.
 Aloqa shakli: Mijozlar savollarini qoldirishi uchun aloqa bo’limida shakl
bo’lishi kerak.
II BOB WEB SAYT
Mehmonxona web saytining kod qismi
HTML kodlari : Index.html
18

 Foydalanish qulayligi: Veb-sahifalarni WordPress yoki Dreamweaver kabi
WYSIWYG (What You See Is What You Get) muharrirlari yordamida tez
va oson yaratish mumkin. Mavjud veb-saytga o'zgartirish kiritish qiyin.
Mavjud veb-sahifaga o'zgartirish kiritish oson
 Xosting: Veb-saytlar serverlarda, veb-sahifalar esa kompyuteringizda yoki
uchinchi tomon serverida joylashtirilishi mumkin.
 Indekslash: Veb-saytlar qidiruv tizimlari tomonidan indekslanadi, veb-
sahifalar esa yo'q
 Yangilash: Veb-saytlar muntazam ravishda yangilanishi kerak, veb-
sahifalar esa kerak bo'lganda yangilanishi mumkin
Bular veb-saytlar va veb-sahifalar o'rtasidagi asosiy farqlardir.
5

Asosiy kompyuterning quyi tizimlarida grafik fayl boshqaruvchisi kompyuterning
fayl tizimining old tomoni hisoblanib, operatsion tizim bilan ko rinib turgan qismiʻ
hisoblanadi. Frontend foydalanuvchiga yuzma-yuz ko rinib turib, backend esa
ʻ
javoban operatsion tizim dasturlarini ishga tushiradi.
Kompilyatorlarda frontend qism manba qismini oraliq ko rinishgacha tarjima
ʻ
qiladi va backend qism kompyuter tilida kod ishlab chiqarish uchun oraliq qism
bilan ishlaydi. Backend asosan tezroq ishlaydigan kod ishlab chiqarish
uchun optimallashtiradi . Frontend va backendning farqi manba kodi bilan
ishlaydigan tahlil qiluvchi bo limni va kodni yaratadigan va optimallashtiradigan
ʻ
backend qismni ajratishi mumkin. GCC kabi boshqa dizaynlar bir nechta
frontendlar (turli manba tillarini tahlil qilish) yoki backendlar (turli
maqsadli protsessorlar uchun kod yaratish) o rtasidagi xizmatlarni taklif qiladi.
ʻ
Ikkalasining o rtasidagi farqni tushunishning boshqa bir yo li frontend va backend
ʻ ʻ
dasturiy ta minot ishlab chiqaruvchisiga kerak bo lgan bilimlarni tushunishdir.
ʼ ʻ
Quyidagi ro yxat misol sifatida veb-ishlab chiqishga qaratilgan:
ʻ
Ikkalasi ham
 Git , Mercurial yoki Subversiya kabi versiyalarni boshqarish vositalari
 FTP yoki rsync kabi fayllarni uzatish vositalari va protokollari
Frontend diqqat markazida quyidagilarni o z ichiga oladi:
ʻ
 HTML , CSS , JavaScript kabi veb dasturlash tillari
hamda Sass yoki Query kabi tillarda ko p ishlatiladigan yordamchi kutubxonalar
ʻ
 Asinxron so rovlarni qaytadan ishlash va
ʻ AJAX
 Bir sahifali ilovalar ( React , Angular yoki Vue.js kabi ramkalar bilan)
 Veb ishlashi (eng katta mazmunli bo yoq, interaktiv vaqt,
ʻ
60 FPS animatsiyalar va o zaro ta sirlar, xotiradan foydalanish va hokazo)
ʻ ʼ
 Responsiv veb-dizayn
 Brauzerlar o rtasidagi muvofiqlikdagi muammolar va vaqtinchalik
ʻ
yechimlar
 Boshsiz brauzer bilan oxirigacha sinov
14

HTML va CSS roli
Kaskadli uslublar jadvallari (CSS) - bu veb-sahifani ko'rsatish bilan bog'liq
barcha tegishli ma'lumotlarni o'z ichiga olgan dasturlash dizayn tili. CSS veb-sayt
yoki sahifaning uslubi va formatini, jumladan tartibini, ranglarini, shriftlarini,
to'ldirishni (har bir element atrofidagi bo'sh joy) va boshqalarni belgilaydi.
HTML va Javascript bilan birgalikda CSS internet qanday ishlashining asosini
tashkil qiladi va veb-saytlarni ishlab chiqish dunyosida muhim rol o'ynaydi .
Uchalasiga ham standartlar va spetsifikatsiyalar World Wide Web Consortium
(W3C) tomonidan yuritiladi.
CSS ning qisqacha tarixi
Internetning dastlabki kunlarida (1980-yillarning oxiri va 1990-yillarning
boshlarida) veb-saytlar asosan minimal formatlash imkoniyatlariga ega oddiy matn
edi. HTML ning kiritilishi `<font>` va `<b>` kabi teglar yordamida asosiy
formatlash imkonini berdi.
1994-yilda CERNda ishlaydigan Håkon Wium Lie va Bert Bos CSS
kontseptsiyasini "Cascading HTML styles sheets: a proposal" nomli maqolada
taqdim etdilar. Ular veb-hujjatlarning mazmuni va tuzilishini ularning vizual
taqdimotidan ajratishni yoqladilar.
CSS 1 darajasi 1996 yil dekabr oyida World Wide Web Consortium (W3C)
tomonidan rasmiy tavsiyaga aylandi. U ranglar, shriftlar, chekka va joylashishni
aniqlash kabi asosiy uslub xususiyatlarini taqdim etdi.
CSS 2-darajasi (1998-2007) CSS1-ga yanada rivojlangan uslublar, jumladan
yaxshilangan joylashishni aniqlash, chegaralar, fon va media turlarini qo'llab-
quvvatlash orqali kengaytirildi. Biroq, ba'zi CSS2 xususiyatlarining amalga
oshirilishi turli brauzerlarda farq qilar edi, bu esa renderlash va kontentni
ko'rsatishda nomuvofiqliklarga olib keldi.
1990-yillarning oxiri va 2000-yillarning boshi Internet Explorer va Netscape
Navigator veb-hukmronligi uchun raqobatlashadigan " Brauzer urushlari " bilan
nishonlandi. Ushbu davr brauzerlar bo'ylab CSS-ni qo'llab-quvvatlashning
6

nomuvofiqligini ko'rdi va bu izchil dizaynga erishish uchun murakkab vaqtinchalik
echimlarni talab qildi.
2003 yilda CSS Zen Garden loyihasi bir xil HTML tarkibini asosiy tuzilmani
o'zgartirmasdan ko'plab ijodiy usullarda qanday uslublash mumkinligini ko'rsatib,
CSS kuchini namoyish etdi. Ushbu loyiha kontent va taqdimotni ajratish
muhimligini ta'kidladi.
CSS 3-darajali (2001-2017) yangi xususiyatlar va modullarning keng doirasini
taqdim etdi, jumladan yumaloq burchaklar, gradientlar, animatsiyalar, o'tishlar va
moslashuvchan quti tartibi. Biroq, CSS3 ning modulli tabiati asta-sekin qabul
qilinishiga olib keldi, turli xil xususiyatlar turli vaqtlarda mavjud bo'ldi.
CSS4 deb nomlanuvchi rasmiy spetsifikatsiya mavjud bo'lmasa-da, bu atama CSS3
modullaridan tashqari CSS-ning davom etayotgan rivojlanishiga ishora qilish
uchun ishlatilgan. W3C turli xil CSS xususiyatlarini mustaqil ishlab chiqish va
amalga oshirish imkonini berish uchun modullashtirishga o'tdi.
CSS vebning vizual dizaynini shakllantirishda asosiy texnologiya bo'lib kelgan.
Uning evolyutsiyasi veb-ishlab chiqishdagi tashvishlarni ajratishga hissa qo'shdi,
bu sezgir, kirish mumkin va vizual jozibador veb-saytlarni yaratishni osonlashtirdi.
CSS va HTML qanday birga ishlaydi
CSS faqat veb-sahifa dizayniga taalluqlidir, sahifaning mazmuni esa HTML
kabi belgilash tili yordamida aniqlanadi. Uslub va tarkibning bunday ajratilishi
juda ko'p afzalliklarga ega, ular orasida yaxshilangan foydalanish imkoniyati va
veb-dizayn ustidan ko'proq nazorat mavjud.
CSS hujjatlari veb-sahifa uslubini aniqlash uchun ishlatiladi va keyin sahifaning
mazmuni va tuzilishini o'z ichiga olgan HTML hujjatiga (yoki turli belgilash
tilidagi hujjat) bog'lanadi. Uslubni to'g'ridan-to'g'ri HTML hujjatida o'rnatish
mumkin, lekin tavsiya etilmaydi.
CSS qanday ishlaydi?
CSS-da veb-brauzer o'z mazmunini to'g'ri ko'rsatish uchun veb-sahifa tarkibiga
qo'llashi mumkin bo'lgan qoidalar va qiymatlarni o'z ichiga oladi. Masalan,
sahifaning asosiy qismi ko'k fonga ega ekanligini va matn 18px o'lchamdagi oq
7

Shuningdek, PHP da <?php ?> ko'rinishidan tashqari quyidagi uslubda ham kod
yozish mumkin:
 <?
 echo "Salom dunyo";
 ?>
Bundan foydalanish oldingisiga qaraganda aniq emas. Uni ishlatish XML bilan
mutanosib emas.
Biror faylda faqat PHP koddan foydalangan bo'lsangiz yakunlovchi ?> tegini
yozish shart emas. Bu PHP kod yozishda va uni saqlashda ortiqcha joy ajratmaslik
uchun juda yaxshi amaliyot bo'ladi.
PHP da izohlar yozishning ikki usuli mavjud.
1. Ikki slesh (//) orqali undan keyingi qaror to'la izoh bo'ladi va bu faqat shu
qatorgagina ta'sir etadi:
// Bu izoh qatori
Bu izoh yozishning ajoyib turi bo'lib, xatoliklar berayotgan qatorni vaqtincha
saqlab turish imkonini beradi:
 // echo "X stringi $x ga teng";
Shuningdek, izohning bu turini biror kod qatori qanday ishlashini tushuntirish
uchun ham kiritishingiz mumkin:
 $x += 10; // $x 10ga inkrement
Agar sizga bir necha qatorli izoh keral bo'lsa quyidagi koddan foydalanasiz:
 <?php

 /* Bu bir necha

 qatorli izoh

 yozish uchun */
12

Dinamik web sayt yaratishda PHP dasturlash tili
PHP dasturlash tili veb-saytlar yaratishda juda keng miqyosda ishlatiladi. Lekin
faqatgina PHP da butun saytni dasturlash imkonsiz. Sayt yaratishda HTML va
JavaScript dasturlash tillarining ham alohida o'rni bor. Ular saytning turli
vazifalarini o'z ichiga oladi. Agar veb-saytni odam tanasiga o'xshatsak, HTML bu
o'rinda suyaklar, PHP esa mushaklar vazifasini o'taydi. Bu tillarda yozilgan kodlar
ba'zi ma'lumotlarning uzatilishi va almashinishi jarayonida ma'lumotlar
bazasi(MySQL) ga tayanadi. Uni esa energiyaga qiyoslash mumkin. Har qanday
harakat suyaklar, mushaklar va energiya natijasida yuzaga keladi.
PHP kodida yozilagan kichik yoki butun bir dastur saqlanayotgan fayl nomidan
so'ng ".php" deb yozib keyin saqlash tugmasini bosish lozim. Bunda veb-server
xuddi shunday yakunlangan faylga duch kelsa, PHP protsessorga o'tadi. Ba'zi
dasturchilar o'z fayllarini ".htm" yoki ".html" deb yakunlaydilar. Bu PHP dan
foydalanmaganliklarini ko'rsatish uchun ishlatiladi. Siz "index.php" nomli faylni
"index.html" ko'rinishiga ham o'zgartirishingiz mumkin. Bunda dasturga hech
qanday salbiy ta'sir bo'lmaydi. PHP kodi <?php bilan boshlanadi va dasturning
qolgan qismi uning davomidan yoziladi hamda kod yozib bo'lingach uni yakunlash
uchun ?> yoziladi.
Ko'pgina tillarda bo'lgani kabi ilk PHP dasturi quyidagicha:
 <?php
 echo "Salom dunyo";
 ?>
Kodning boshlanishi va oxirida yoziladigan teglardan foydalanish ancha
moslashuvchan. Uning tarkibida HTML kodlarni ham bemalol kiritish mumkin.
Boshqa dasturchilar butun kodni HTML da yozib dinamik kodlar yozilishi kerak
bo'lgan o'rinlardagina ochuvchi va yopuvchi teglarni ishga tushirib, PHP kodni
kiritishadi. Bu uslubni ko'pchilik yangi dasturchilar ishlatib bunda tezlik bir qancha
miqdorda oshishini ta'kidlaydi. Biroq anchadan beri shu soha odamlari bo'lgan
kishilar bunday PHP o'tkazib chiqaraverish juda kam foyda berishini da'vo qiladi.
11

Kirish
Web dizayn (inglizchadan web design) — vebsaytlar , veb-ilovalar uchun
veb-foydalanuvchi interfeyslari loyihalanadigan dizayn turi. Internetda katta
miqdordagi foydalanuvchi oqimiga erishish uchun bo lgan raqobat veb-ʻ
dizaynerlarga bo lgan talabning ortishiga sabab bo lmoqda.
ʻ ʻ
Web-dizayn web-saytlarni ishlab chiqarish va ularga xizmat ko rsatishda ko plab
ʻ ʻ
turli ko nikmalar va fanlarni o z ichiga oladi. Web-dizayn turli sohalarni o z ichiga
ʻ ʻ ʻ
oladi: foydalanuvchi interfeysi dizayni (UI dizayni), standartlashtirilgan kod va
xususiy dasturiy ta minotni o z ichiga olgan mualliflik, foydalanuvchi tajribasi
ʼ ʻ
dizayni (UX dizayni) va qidiruv tizimini optimallashtirish .
Asosan, dizaynerlar veb-dizaynning ko plab sohalarini biriktirgan jamoalarda
ʻ
ishlashadi. Ya ni jamoada har bir soha odami ishlaydi, fikr almashadi.
ʼ
Insonlar uchun qulay va foydali vebsayt dizaynini yaratish uchun malakali veb-
dizayner eng so ngi texnologik(grafika yo nalishi yoki dasturlash bo yicha)
ʻ ʻ ʻ
yangiliklardan boxabar bo lishi darkor. Aksariyat hollarda malakali dizaynerlar
ʻ
dizayn studiyalarida faoliyat olib borishadi.
Veb-saytlar bugungi kunda turli sohalarda, jumladan, mehmonxonalar faoliyatida
ham muhim o‘rin tutadi. Mehmonxona veb-sayti mijozlar bilan aloqani
kuchaytirish, xizmatlarni ommalashtirish va biznes jarayonlarini
avtomatlashtirishga xizmat qiladi. Ushbu kurs ishi doirasida mehmonxona uchun
veb-sayt yaratishning nazariy va amaliy jihatlari yoritiladi
3

p {
rang: qizil;
shrift o'lchami: 18px;
}
</style>
</head>
<tana>
<p>Bu qizil paragraf.</p>
</body>
```
Tashqi CSS
Tashqi CSS barcha uslublar bilan alohida CSS faylini yaratish va uni `<head>`
bo`limidagi `<link>` elementi yordamida HTML fayliga ulashni o`z ichiga oladi.
Ushbu yondashuv tashvishlarni ajratishga yordam beradi va bir xil uslublarni bir
nechta HTML fayllariga qo'llash imkonini beradi.
Misol (style.css):
``` css
/* style.css */
p {
rang: yashil;
shrift o'lchami: 20px;
}
```
``` html
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<tana>
<p>Bu yashil paragraf.</p>
9

 Webpack va Gulp.js kabi vositalar yordamida JavaScript fayllarini
o‘zgartirish va to‘plash, tasvir o‘lchamlarini va boshqa jarayonlarni o zgartirishʻ
uchun avtomatlashtirishni yaratish
 Qidiruv tizimini optimallashtirish
 Foydalanish imkoniyati bilan bog liq muammolar
ʻ
 GIMP yoki Photoshop kabi tasvirlarni tahrirlash vositalaridan asosiy
foydalanish
 Foydalanuvchi interfeysi
Backend fokuslangan ko rinishlari
ʻ
 PHP , Python , Ruby ,Perl, Node.js kabi skript
tillari yoki C# , Java yoki Go kabi kompilyatsiya tillari
 Foydalanilayotgan til uchun avtomatlashtirilgan sinov ramkalari
 Ilova ma lumotlariga kirish
ʼ
 Ilova biznes mantiq
 Ma lumotlar bazasini boshqarish
ʼ
 Masshtablilik
 Yuqori mavjudligi
 Xavfsizlik muammolari, autentifikatsiya va avtorizatsiya
 Dasturiy ta minot arxitekturasi
ʼ
 Ma lumotlarni o zgartirish
ʼ ʻ
 Zaxiralash usullari va dasturiy ta minot
ʼ
Ikkala pozitsiya ham bitta mahsulot ustida ishlashiga qaramay, juda aniq
ko nikmalarga ega hisoblanadi.
ʻ
Frontend API orqali backend qism bilan bog lanadi. Veb va mobil frontendlarda
ʻ
API odatda HTTP so rovi javobiga asoslanadi. API ba zan „
ʻ ʼ Backend for
Frontend “ (BFF) uslubidan foydalangan holda ishlab chiqilgan bo lib, u frontend
ʻ
qismda o zgartirish kiritishni osonlashtirish uchun xizmat qiladi.
ʻ
15

Mundarija
Kirish ........................................................................................... 3
1. Dizayn g'oyalari ............................................................................................................................ 16
2. Kompyuter grafigiga oid ma'lumotlar .......................................................................................... 16
3. HTML, CSS, JavaScript kod namunalari ........................................................................................ 16
4. SEO va foydalanuvchi tajribasi (UX/UI) bo’yicha tavsiyalar .......................................................... 17
5. Mehmonxona sayti uchun zarur bo’lgan modullar ...................................................................... 18
II BOB WEB SAYT .................................................................. 18
Mehmonxona web saytining kod qismi ..................................... 18
Coffee shop web saytining CSS kodlari .................................... 26
Mehmonxona web saytining dizayn qismi ................................ 37
Xulosa ........................................................................................ 41
Foydalanilgan adabiyotlar .......................................................... 42
2

Coffee shop web saytining CSS kodlari
26

</body>
```
Har bir CSS turi o'zining afzalliklari va foydalanish holatlariga ega. Inline CSS tez
va o'ziga xos uslublar uchun mos keladi, ichki CSS kichik o'lchamli loyihalar yoki
muayyan sahifalar uchun foydalidir va tashqi CSS kattaroq loyihalar uchun tavsiya
etiladi va bir nechta sahifalarda izchil uslublarni saqlab qoladi.
CSS ning afzalliklari va undan nima uchun foydalanish
 Tezroq yuklash vaqti: saytingiz qancha ko'p kodga ega bo'lsa, u shunchalik
og'irroq bo'ladi va yuklash uchun ko'proq vaqt ketadi. CSS yordamida siz
HTML-ning ko'p joylariga kod qo'shish o'rniga faqat bir marta kod yozasiz -
shuning uchun veb-saytingiz engilroq va tezroq bo'ladi.
 Xizmat qilish va qayta ishlatish oson: barcha uslublaringiz bir joyda,
shuning uchun uni ko'plab sahifalarda qayta ishlatishingiz mumkin. Agar siz
keyinroq biror narsani o'zgartirishga qaror qilsangiz, masalan, saytingizdagi
barcha paragraflarda ishlatiladigan shrift - buni CSS faylingizda bir marta
o'zgartirishingiz mumkin va u avtomatik ravishda barcha sahifalarda
qo'llaniladi.
 Ko'proq uslublar variantlari: CSS sizga ko'plab ilg'or xususiyatlarni taqdim
etadi, bu esa veb-saytingiz vizual ko'rinishining belgilash tillariga qaraganda
ko'proq jihatlarini nazorat qilish imkonini beradi.
 Mobil optimallashtirish: CSS yordamida siz telefonlar va planshetlar kabi
turli xil qurilmalar uchun veb-saytingiz ekranini o'zgartirishingiz mumkin.
Xuddi shu xususiyat saytingizning kirish imkoniyati uchun ham foydalidir,
chunki u ekranni o'qiydiganlar saytingiz bilan qanday aloqada bo'lishini
ko'proq nazorat qilish imkonini beradi.
 Saytingiz kelajakka mos: HTML-dagi ko'plab xususiyatlar allaqachon
eskirgan va bu tendentsiya davom etishi mumkin. Styling uchun CSS dan
foydalansangiz, bu funksiyalar HTML-dan bir kun o chirilgan bo lsa, sizgaʻ ʻ
ta sir qilmaydi.
ʼ
10

< input type = "number" id = "guests" name = "guests"
min = "1" >

< button type = "submit" > Bron qilish </ button >
</ form >
 CSS : Saytni bezatishda ishlatiladi.
css
КопироватьРедактировать
body {
font-family : 'Arial' , sans-serif;
background-color : #f5f5f5 ;
color : #333 ;
}
button {
background-color : #ff6f61 ;
color : #fff ;
border : none;
padding : 10px 20px ;
cursor : pointer;
border-radius : 5px ;
}
button :hover {
background-color : #e0554f ;
}
 JavaScript : Interaktivlik qo’shish uchun. Masalan, foydalanuvchi tugmani
bosganda animatsiya yoki xabar chiqishi uchun:
javascript
КопироватьРедактировать
document . querySelector ( 'button' ). addEventListener ( 'clic
k' , function () {
alert ( 'Bron qilish muvaffaqiyatli amalga
oshirildi!' );
});
4. SEO va foydalanuvchi tajribasi (UX/UI) bo’yicha tavsiyalar
 Har bir sahifada maqsadli kalit so’zlardan foydalaning. Masalan,
"mehmonxona bron qilish", "arzon mehmonxona", "toshkent
mehmonxonalari".
 Sayt mobil qurilmalar uchun mos bo’lishi kerak (responsiv dizayn).
 Sahifalar tez yuklanishi uchun rasm va kodlarni optimallashtiring.
17

1. Dizayn g'oyalari
 Mehmonxona veb - sayti odatda chiroyli va jozibador ko ' rinishga ega bo ' lishi
kerak . Foydalanuvchi saytga kirganda o ’ zini mehmonxonada bo ' lgandek his
qilishi kerak .
 Rang palitrasi : Odatda oq , oltin , ko ’ k yoki yashil kabi tinchlantiruvchi va
ishonch uyg ' otuvchi ranglardan foydalaning .
 Asosiy bloklar:
o Bosh sahifa (Qulay qidiruv oynasi va katta, sifatli fon rasmi).
o Xizmatlar sahifasi (Toza va aniq ma'lumotlar).
o Mehmonxona xonalari haqida ma'lumot (Rasmlar, narxlar va
tavsiflar).
o Bron qilish tizimi (Soddaligi va qulayligi muhim).
o Biz haqimizda va Aloqa bo’limlari.
2. Kompyuter grafigiga oid ma'lumotlar
 SVG grafikalar: Saytni tez ishlashi uchun vektorli tasvirlardan foydalanish
kerak. Masalan, piktogramma (icon) yoki dekorativ elementlar uchun.
 Rasmlar optimallashtirish:
o JPG formatdagi rasmlar xonalarning yoki mehmonxonaning sifatli
ko’rinishini aks ettiradi.
o PNG formatidan shaffof fonli logotiplar yoki boshqa elementlar
uchun foydalaning.
o Rasm hajmini optimallashtirish uchun TinyPNG yoki Compressor.io
kabi xizmatlardan foydalanish mumkin.
 CSS animatsiyalar: Soddaligi uchun sahifadagi tugmalar yoki menyularga
kichik animatsiyalar qo’shib, saytni yanada interaktiv qilish mumkin.
3. HTML, CSS, JavaScript kod namunalari
 HTML : Saytning tuzilishini yaratishda ishlatiladi. Masalan, "Bron qilish"
uchun quyidagi shakl (forma) namunasi:
html
КопироватьРедактировать
< form >
< label for = "checkin" > Kirish sanasi: </ label >
< input type = "date" id = "checkin" name = "checkin" >

< label for = "checkout" > Chiqish sanasi: </ label >
< input type = "date" id = "checkout" name = "checkout" >

< label for = "guests" > Mehmonlar soni: </ label >
16

Mehmonxona web saytining dizayn qismi
37

Mehmonxona web sayti kurs ishi

Купить