Web-sahifa haqida ma’lumotlar

Dokument ma'lumotlari

Narxi	2000UZS
Hajmi	3.3MB
Xaridlar	0
Yuklab olingan sana	07 Noyabr 2026
Kengaytma	docx
Bo'lim	Referatlar
Fan	Informatika va AT

Web-sahifa haqida ma’lumotlar

Sotib olish

3KIRISH
Web dasturlash haqida, Frontend nima?
Dasturlash juda qiziqarli va har tomonlama foydali mashg‘ulot. Dasturlashni
o‘rganish juda oson. Qiziqish va yangi bilimlarni o‘zlashtirishga bo‘lgan yuqori
darajadagi istak bilan bir necha oylik mehnat orqali har kim malakali dasturchiga
aylanishi mumkin. Web dasturlash mening sevimli mashg‘ulotlarimdan biri.
Web dasturlash brauzeringiz orqali ko‘rishingiz va foydalanishingiz mumkin
bo‘lgan barcha web dasturlarni tayyorlash jarayonini o‘z ichiga oladi. Web
dasturlash ham juda qiziqarli va katta daromad keltiradigan soha hisoblanadi.
Malakali dasturchilarga bo‘lgan talab bugungi kunda har doimgidan ham yuqori.
Agar qachondir web dasturlashni o‘rganish haqida o‘ylab ko‘rgan bo‘lsangiz, hozir
bu niyatingizni amalga oshirish uchun kirishishning ayni vaqti!
Web dasturlash haqida, Frontend nima?
Avvalo “frontend” va “backend” so‘zlarining o‘zbek tilidagi ma’nolari bilan
tanishib chiqaylik. “Frontend” (front end, front-end) o‘zbek tilida “Oldindagi
(ustki) tomon” degan ma’noni anglatadi. Biz bu so‘z bilan u yoki bu narsaning
tashqi, hammaga ko‘rinib turadigan qismini nazarda tutamiz. Backend (back end,
back-end) esa Frontendning aksi hisoblanib, qaysidir narsaning ichki, yoki orqa
tomoni degan ma’noni anglatadi. Bu bilan biz qaysidir narsaning hammaga
ko‘rinmaydigan, yashiring, ichki yoki orqa tomonini nazarda tutgan bo‘lamiz.
Frontend - Bu o‘zi nima va yuqoridagi gaplarga buning nima bog‘liqligi
bor?» dersiz, bu savolingizga ushbu maqolada javob topasiz degan umiddamiz.
Frontend - «tashqi interfeys degan ma’noni bildirib, veb texnologiyalarning biridir.
Bu texnologiya yordamida veb sahifalarning insonga ko‘rinib turuvchi, ma’lumot
beruvchi vizual qismi yaratiladi. Frontend texnologiyalarini o‘rgangan inson o‘z
ijodkorligi, kretiv yondoshuvi orqali turli g‘oyalarini veb sahifalar, dasturlar
shaklida ro‘yobga chiqarishi mumkin bo‘ladi.
Bugungi kunda shaxsiy veb sahifaga ega bo‘lish o‘ziga xos elektron vizitka,
passport vazifasini bajaribgina qolmay, balki sayt orqali ko‘plab foydali ishlarni
amalga oshirish mumkin bo‘lib qoldi. Masalan, jurnalist, shoir, yozuvchi o‘z ijodi
va izlanishlarinini veb sahifasi orqali yoritib borishi mumkin.

4I BOB WEB-SAHIFA HAQIDA MA’LUMOTLAR
1. HTML dasturlash tili haqida tushuncha
HTML: har qanday web-saytning asosi. HTML (Hyper Text Mark-up
LanguYoshi) - bu har qanday web-saytni birlashtiruvchi elim. Uy qurish kabi, siz
har doim birinchi navbatda mustahkam poydevor qurasiz. Har qanday sayt uchun
HTML bu asosdir. HTML - bu oson o‘rganiladigan va undan foydalanishni
boshlash uchun hech qanday chiroyli (yoki qimmat!) Paketlarni talab qilmaydigan
ochiq manba tili (ya’ni hech kimga tegishli emas). Sizga kerak bo‘lgan narsa -
Windows Notepad, Visual Studio Code kabi dasturlarda yozish kerak bo‘lgan
teglar, ko‘p vaqt va sabr. HTML "teg" tizimida ishlaydi, bu yerda har bir teg ushbu
teg ichiga joylashtirilgan tarkibga ta’sir qiladi, masalan teg qanday ta’sir qiladi .
O‘z-o‘zidan nisbatan cheklangan bo‘lsada, bu HTML ning moslashuvchanligi
web-saytlarning murakkabligini oshirishga imkon beradi. Uyingizning poydevori
singari, HTML ham HTML-sahifalaringizda birlashtirilgan turli xil tillarni
qo‘llabquvvatlash uchun yetarlicha kuchli.
2. CSS dasturlash tili haqida tushuncha
CSS (Cascading Style Sheets) - bu HTML ning cheklangan uslub
xususiyatlarini kengaytirish uchun mo‘ljallangan nisbatan yangi til. O‘rganish va
amalga oshirish oson, CSS - bu sizning saytingiz uslubini, masalan, o‘lcham, rang
va shrift kabi matn uslublarini boshqarishning eng yaxshi usuli. CSS HTML-
sahifaning ichiga yoki alohida fayllarga joylashtirilishi mumkin. Bitta CSS faylida
butun saytingiz uchun barcha uslubiy xususiyatlarga ega bo‘lishning haqiqiy
afzalligi shundaki, siz har bir HTML faylini birma-bir ko‘rib chiqishingizga emas,
balki butun faylni o‘zgartirishingiz uchun ushbu bitta faylni tahrirlashingiz
mumkin. Shu sababli, ehtimol bu eng foydali web-texnologiya va, albatta, mening
sevimlilarimdan biri.

53. PHP dasturlash tili haqida tushuncha
Ko’pgina boshqa dasturlash tillaridan farqli ravishda, PHP qandaydir
tashkilot yoki kuchli dasturchi tomonidan yaratilgan emas. Uni oddiy
foydalanuvchi Rasmus Lеrdorf 1994 yili o’zining bosh sahifasini intеraktiv
uslubda ko’rsatish uchun yaratgan. Unga Personal Home Page (PHP – shaxsiy
bosh sahifa) dеb nom bеrgan.
PHP – wеb tеxnologiya tili. PHPni o’rganish uchun avval HTML va dasturlash
tilidan habardor bo’lish talab qilinadi. PHPning vazifasi HTML faylini yaratib
bеrish. PHPda yozilgan kod sеrvеrning o’zida bajarilib, mijozga HTML shaklida
yеtib boradi. Bu havfsizlik jihatdan ancha maqsadga muvofiq.
PHP dаsturlаri ikki usuldа bаjаrilishi mumkin: Web-server tоmоnidаn stsenаriy
ilоvаsi vа kоnsоl dаsturi sifаtidа.

6II BOB WEB- SAYTI HAQIDA MA’LUMOTLAR
2.1 HTML dagi asosiy kodlar
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
Bu HTML metatagi Internet Explorer brauzeriga sahifada qanday ishlov
berllishi haqida ma lumot beradi. Compatible metatagi brauzerda qaysi versiyaʼ
yoki modeda ishlash kerakligini aniqlaydi. Misol uchun, IE=edge qiymati brauzer
da eng yaxshi HTML rendirini ishlatishni ta minlaydi.
ʼ
HTML kodining "viewport" atamasi sahifangizni kichik ekranga ega qurilma
larda to'g'ri ko'rsatish uchun moslashtirishning bir usuli. Bu atama orqali, sahifa-
ning o'lchami kichraytiriladi va qurilma o'lchamiga moslashtiriladi. Bunda, mini-
mum va maksimum moslashuvchanliklar ham aniqlangan. Bu HTML kodini
quvvatlash orqali, siz o'zingizning sahifangizni kichraytirish, yoki katta ekranga
moslashish kerak bo’lgan holatlarda moslashtirishingiz mumkin.
Bu HTML kodida sahifa sarlavhasi, kalit so'zlar, sahifa haqida qisqa matn va
sahifa muallifi haqida ma'lumot qo'shilgan.
<title> tegi sahifa sarlavhasini ko'rsatadi. Bu qisqa matnda sahifa mavzusini
ifodalaydi va foydalanuvchilarning sahifa haqida tushunarli ma'lumot olishiga yor
dam beradi.<meta name="keywords" content=""> bu yerga siz sahifangiz
uchun kalit so’zlar to'plamini qo'yishingiz mumkin. Bu yordamida, foyda-
lanuvchilar qidirish so'rovlarida sizning sahifangizning ko'rsatilish ehtimoli oshadi.< title > Sog'lomlashtirsh markazi </ title >
< meta name = "keywords" content = "" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >< meta name = "viewport" content = "width=device-width, minimum-scale=1.0,
maximum-scale=1.0, user-scalable=no" >

7<meta name="description" content=""> bu qisqa matnda sahifangizning tavsi
fi beriladi. Bu qisqa matnning mohiyati sahifaning tavsifi yuzasidan to'g'ri keladi
va foydalanuvchilar uchun qulayligini oshiradi.<meta name="author"
content="">bu esa sahifa muallifining ismini ko'rsatadi. Bu ma'lumot sahifa
muallifining kimligini aniqlash uchun kerak bo'lishi mumkin.
Bu HTML kodida sahifaning belgilash tugmalari uchun havolalar (links) qo'
shilgan.<link rel="shortcut icon" href="images/favicon.ico" type="image/x-
icon"> Bu havola sahifa bo'yicha xizmat qiladigan yopiq belgilash tugmasi uch
un ishlatiladi.rel="shortcut icon" atamasi belgilash tugmasining URL'ini aniqlaydi
va type="image/x-icon" esa belgilash tugmasi rasmini aniqlaydi.
<link rel="apple-touch-icon"
Bu yerda sahifaning iOS qurilmalarida ishlovchi belgilash tugmasi uchun
havola (links) ko'rsatilgan. iOS qurilmalarida ishlovchi belgilash tugmasi
sahifa saqlash sahifasi yoki asosiy menudagi sahifalardagi sahifa nomini ko'rsatis
mumkin. rel="apple-touch-icon" atamasi belgilash tugmasining URL'ini aniqlaydi.
< link rel = "stylesheet" href = "css/bootstrap.min.css" >
HTML kodida bootstrap.min.css nomli stil jadvallari fayli sahifaga havola (link) si
fatida qo'shilgan. Bootstrap, CSS va JavaScript kutubxonasidir, u yordamida siz
Vebsaytingizga amalda qulaylik keltirishingiz mumkin. Bootstrap, "responsive"
(moslashuvchan) veb-dizaynlarni yaratishda keng qo'llaniladi. "responsive" veb-
dizayni qurilmasi, ba'zi moslamalar orqali, ko'proq qurilma ekrani o'lchamiga
moslashtiriladi. Bootstrap, eng oddiy veb-sahifalardan boshlab, katta va kichik
bizneslar uchun veb-saytlarni yaratishga qulaydir.< link rel = "shortcut icon" href = "images/favicon.ico" type = "image/x-icon" >
< link rel = "apple-touch-icon" href = "images/apple-touch-icon.png" >

8 < link rel = "stylesheet" href = "css/pogo-slider.min.css" >
Bu kodda, "pogoslider.min.css" nomli stil jadvalidagi fayl HTML sahifaga
havola (link) sifatida qo'shilgan. "Pogo Slider" nomli kutubxona, animatsiya va
kutubxonalar yordamida saytga yangi shakllar kiritish imkoniyatini ta'minlaydi.
Pogo Slider, sahifalarga qiziqarli animatsiyalar qo'shish uchun ishlatiladi. Bu
kutubxona sizni sahifangizning ko'rinishini engil qilishga, talab va talablariga mos
javob berishga yordam beradi. "Pogo Slider" birinchi xil ko'rinishlarni yaratishda
va sahifangizni talablariga mos belgilangan talab va talablar uchun tayyorlashda
yordam beradi.
< link rel = "stylesheet" href = "css/style.css" >
Bu HTML kodida, style.css nomli stil jadvalidagi faylga havola (link) qo'shil
gan. style.css fayli sahifangizning o'zgaruvchanligini va ko'rinishini o'zgartirishni
ta'minlaydi. Bu faylda siz sahifangizda o'zgarishi kerak bo'lgan ma'lumotlar va
xususiyatlarni aniqlash va o'zgartirish uchun CSS kodlarini yozishingiz mumkin.
CSS yordamida, siz sahifangizni kengaytirishingiz va moslashitirishingiz mumkin.
< link rel = "stylesheet" href = "css/responsive.css">
HTML kodida, responsive.css nomli stil jadvalidagi faylga havola (link)
qo'shilgan. responsive.css fayli, saytingizning moslashuvchan (responsive) ko'rini
shini aniqlash va moslashitirish uchun yozilgan CSS kodlarini o'z ichiga oladi.
Moslashuvchan dizayn, veb-sahifalarni kichik ekranli qurilmalardan katta
ko'rinishli ekranlarga moslashtirishni ta'minlaydi.responsive.css fayliga yozilgan
CSS kodlari boshqa fayllar bilan birga ishlatiladi va saytingizni moslashuvchan
ko'rinishga keltirishga qaratilgan bo'lsa, sizning saytingizning ko'rinishi, qurilma
ekranining o'lchamiga moslashtiriladi. Bu katta qurilmalarda va mobil qurilmalar
da saytingizning ko'rinishi to'g'ri ko'rinadi

9Bu HTML kodida, custom.css nomli faylga havola (link) qo'shilgan.
custom.css fayli sizning saytingizning shaklini yaratishda, moslashuvchan ko'ri
nishini aniqlashda yoki boshqa CSS kodlarini yuklashga yordam beradi. Bu fayl,
sizning xususiy talablaringizga mos ravishda HTML kodlarini va stil jadvallarini
o'zgartirish imkonini beradi. custom.css faylida siz o'z CSS kodlarini yozishingiz
mumkin va saytingizning ko'rinishi va ishlashi, engil qilinadi.
Agar sizda custom.css fayliga o'zgartirishlar kiritish kerak bo'lsa, faylni ochib,
kerakli o'zgartirishlarni kiritishingiz mumkin. Bu faylni yozishda, sizning saytin
gizning ko'rinishini va ishlashini yaxshilash uchun qulaylik yaratadi.
HTML kodida, body tagiga id="home" atributi qo'shilgan. Bu atribut,
HTML sahifasida "home" nomli bo'limni aniqlash uchun ishlatiladi.
dataspy="scroll" atributi, sahifa bo'yicha "scrollspy" funktsiyasini yoqish
uchun ishlatiladi. Bu, sahifadagi elementlarni ko'rib chiqish uchun ishlatiladi va
foydalanuvchining sahifadagi navigatsiyani ochirishiga yordam beradi.
Data-target="#navbar-wd" atributi, "scrollspy" funktsiyasini faollashtirish uchun
ishlatiladi. "#navbar-wd" atributi sahifadagi orqa navigatsiyaga (navbar) havola
(link) qo'yishni ta'minlaydi. Bu, foydalanuvchilarga sahifadagi bo'limlarga tezroq
o'tish imkonini beradi.data-offset="98" atributi, "scrollspy" funktsiyasining
o'zgaruvchanlarini aniqlaydi. Bu, sahifa bo'yicha bo'shliqni yoki orqa navigatsiya
qismidagi uzoqligini belgilaydi. data-offset atributi, "scrollspy"ning qaysi
elementlarni ko'rishga boshlashi kerakligini aniqlaydi.< body id = "home" data-spy = "scroll" data-target = "#navbar-wd" data-offset = "98" >< link rel = "stylesheet" href = "css/custom.css" >
< div class = "left-top" >
< a class = "new-btn-d br-2" href = "#" >< span > ISH
VAZIFAMIZ </ span ></ a >

10HTML kodida, div tagi bilan left-top nomli sinf aniqlangan va unda matnli
tugmalarni joylashtirish uchun kodlar yozilgan.
<a class="new-btn-d br-2" href="#"><span>ISH VAZIFAMIZ<
/span></a> - bu kodda, "ISH VAZIFAMIZ" yozuvli tugma (button)
ko'rsatilgan. class="new-btn-d br-2" ko'rinishi tugma uchun ko'rsatilgan
stil jadvalini (CSS) aniqlaydi. href="#" atributi tugmani bosishga imkoniyat beradi
va foydalanuvchini ma'lum bir sahifaga o'tkazmaydi.
<div class="mail-b"><a href="#"><i class="fa fa-envelope-o"
aria-hidden="true"></i> sitoraraimovamatematik@gmail.com&lt ;
/a></div> - bu kodda, mail-b nomli sinf aniqlangan va unda electron
pochta manzilini ko'rsatuvchi element yaratilgan. <i> tagida "fa fa-envelope"
ikonasi ko'rsatilgan va aria-hidden="true" atributi yoritilmagan ikonani aks
etmasligini ta'minlaydi.
HTML kodida div tagi bilan right top nomli sinf aniqlangan va unda ikkita
HTML elementi yaratilgan.
<ul> tagi, raqamli ro'yxatni yaratish uchun ishlatiladi. Bu yerda, fa fa-
facebook, fa fa-twitter, fa fa-instagram, va fa fa-youtubeplay nomli ikonalar< div class = "right-top" >
< ul >
< li >< a href = "#" >< i class = "fa fa-facebook" aria-
hidden = "true" ></ i ></ a ></ li >
< li >< a href = "#" >< i class = "fa fa-twitter" aria-
hidden = "true" ></ i ></ a ></ li >
< li >< a href = "#" >< i class = "fa fa-instagram" aria-
hidden = "true" ></ i ></ a ></ li >
< li >< a href = "#" >< i class = "fa fa-youtube-play" aria-
hidden = "true" ></ i ></ a ></ li >
</ ul >< div class = "mail-b" >< a href = "#" >< i class = "fa fa-envelope-o" aria-
hidden = "true" ></ i > sitoraraimovamatematik@gmail.com </ a ></ div >
</ div >

11ro'yxatining har bir qatorida li tagi bilan birgalikda ko'rsatilgan. Href atributi
orqali foydalanuvchi ma'lum bir saytga o'tish imkoniyatiga ega bo'ladi.
< header class = "top-header" >
HTML kodida header tagi bilan top header nomli sinf aniqlangan. Header
tagi, sahifadagi yuqori qismni belgilash uchun ishlatiladi.
class="top header" kabi atributlar yordamida, stil jadvalidagi CSS kodlariga
tayyorlash uchun ushbu sinf aniqlanadi. Topheader sinfi, sahifaning yuqori
qismiga aloqador bo'lgan elementlarni o'rnatish uchun ishlatiladi.HTML da
header tagi, sahifadagi yuqori qismni yaratishda yordam beradi. Bu sahifaning
ko'rinishini aniqlashda o'z vazifasini bajaradi va foydalanuvchilarga kerakli navi-
gatsiyani taqdim etishga yordam beradi.
< nav class = "navbar header-nav navbar-expand-lg" >
HTML kodida nav tagi bilan navbar header-nav navbar-expand lg nomli
sinf aniqlangan. nav tagi, sahifaning navigatsiyasini yaratishda ishlatiladi.
class="navbar header-nav navbar-expand-lg" kabi atributlar yordamida, stil
jadvalidagi CSS kodlariga tayyorlash uchun ushbu sinf aniqlanadi. header-
nav sinfi, navigatsiyaga aloqador bo'lgan elementlarni o'rnatish uchun ishlatiladi.
navbar-expand-lg sinfi, navigatsiyani kichik ekranli qurilmalarda ham
kengaytirish uchun ishlatiladi.Navbar classi, sahifaning navigatsiyasini yaratish
uchun ishlatiladi va header-nav sinfi bilan birlashtiriladi. navbar-expand-lg sinfi,
katta ekranli qurilmalarda navigatsiyani kengaytirib ko'rsatish uchun ishlatiladi.
< div class = "ulockd-home-slider" >
HTML kodida div tagi bilan ulockd-home-slider nomli sinf aniqlangan.

12Bu sinf, sahifadagi slider (slyder) uchun ishlatiladi.Slider, sahifadagi rasmli
boshqa elementlarni avtomatik ravishda to'g'irlaydigan va foydalanuchilarga
ko'proqma'lumot taqdim etish imkonini beradigan interfeys elementidir. Slider,
HTML, CSS va JavaScript tilida yozilgan va sahifadagi bir nechta rasm yoki
boshqa elementlarni ko'rsatish uchun qo'llaniladi.
Bu sinf, sliderning HTML kodlarini yig'ish uchun ishlatiladi. Slider yaratish
uchun,stil jadvalida ham CSS kodlari yozilishi kerak. Slider, sahifaning ko'rinishini
chiroyli qilish va foydalanuvchilarga ko'proq ma'lumot taqdim etish uchun
foydali bo'ladi.
< div class = "container" >
HTML kodida div tagi bilan container nomli sinf aniqlangan. Bu sinf, sahifa
dagi barcha elementlarni o'rab turish uchun ishlatiladi.
class="container" kabi atributlar yordamida, stil jadvalidagi CSS kodlariga tayyor
lash uchun ushbu sinf aniqlanadi. container sinfi, sahifadagi barcha elementlarni
yig'ish uchun foydalaniladi.container sinfi, sahifadagi barcha elementlarni to'g'ri
joylash uchun zarur bo'lgan kerakli bo'shliqlarni belgilash uchun ham ishlatiladi.
Bunday sinf, sahifaning ko'rinishini yaxshilash uchun juda muhimdir
< div class = "row" >
HTML kodida div tagi bilan row nomli sinf aniqlangan. row sinfi, Bootstrap
CSS jadvalida ishlatiladigan bir sinfdir.
class="row" kabi atributlar yordamida, stil jadvalidagi CSS kodlariga tayyorlash
uchun ushbu sinf aniqlanadi. row sinfi, sahifadagi barcha elementlarni bir-biri
bilan to'g'ri joylash uchun ishlatiladi.Row sinfi, sahifadagi barcha elementlarni
to'g'ri joylash uchun zarur bo'shliqlarni belgilash uchun ham ishlatiladi.
Bu sinf, sahifaning ko'rinishini yaxshilash uchun juda muhimdir.
Row sinfi, sahifadagi elementlarni birlashtirish va ko'rsatish uchun ishlatilgan. Bu
sinf, sahifaning ko'rinishini chiroyli va juda chiroyli qilish uchun ishlatiladi.

13HTML kodida div tagi bilan col-lg-6 nomli sinf aniqlangan. Bootstrap CSS
jadvalida ishlatilgan bu sinf, sahifadagi ko'rinishni yaxshilash uchun ishlatiladi.
class="col-lg-6" kabi atributlar yordamida, stil jadvalidagi CSS kodlariga
tayyorlash uchun ushbu sinf aniqlanadi. col-lg 6 sinfi, sahifadagi boshqa
elementlar bilan to'g'ri keladi va ularni birlashtirish uchun ishlatiladi.Bu kodlarda,
left-top nomli sinf bilan birgalikda div tagi yaratilgan. left-top sinfi,
"ISH VAZIFAMIZ" yozuvli tugma va elektron pochta manzilini ko'rsatuvchi
elementni o'rab turish uchun ishlatilgan.
col-lg-6 sinfi, sahifadagi elementlarni birlashtirish va ko'rsatish uchun ishlatilgan.
lg - bu ekran kengligi (width) bo'yicha ekran o'lchamini bildiradi, bu esa katta
ekranli qurilmalarda ishlaydi. 6 soni, sahifadagi o'z yo'lida qancha joy olganini
bildiradi va ekran yarimli qilinadi.Bu kod qatoridagi idora sinfida aytib o'tilgan hol
atda "ISH VAZIFAMIZ" nomli tugma va elektron pochta manzilini ko'rsatish
uchun HTML elementlarini yaratish uchun ishlatilgan.
< div class = "col-lg-6" >
< div class = "wel-nots" >
< p > Xush kelibsiz! </ p >
</ div >
< div class = "right-top" >
< ul >
< li >< a href = "#" >< i class = "fa fa-facebook" aria-
hidden = "true" ></ i ></ a ></ li >
< li >< a href = "#" >< i class = "fa fa-twitter" aria-
hidden = "true" ></ i ></ a ></ li >< div class = "col-lg-6" >
< div class = "left-top" >
< a class = "new-btn-d br-2" href = "#" >< span > ISH
VAZIFAMIZ </ span ></ a >
< div class = "mail-b" >< a href = "#" >< i class = "fa fa-envelope-o" aria-
hidden = "true" ></ i > sitoraraimovamatematik@gmail.com </ a ></ div >
</ div >
</ div >

14HTML kodida div tagi bilan col-lg 6 nomli sinf aniqlangan. Bootstrap CSS
jadvalida ishlatilgan bu sinf, sahifadagi ko'rinishni yaxshilash uchun ishlatiladi.
class="col-lg-6" kabi atributlar yordamida, stil jadvalidagi CSS kodlariga
tayyorlash uchun ushbu sinf aniqlanadi. col-lg 6 sinfi, sahifadagi boshqa
elementlar bilan to'g'ri keladi va ularni birlashtirish uchun ishlatiladi.Bu kodlarda
wel-nots va right-top nomli sinflar bilan birgalikda div tagi yaratilgan. wel-nots
sinfi, salomlashuvni ko'rsatish uchun ishlatiladi. Right top sinfi esa ijtimoiy
tarmoqlarga havola qilish uchun yaratilgan ro'yxatni ko'rsatish uchun ishlatilgan.
col-lg-6 sinfi, sahifadagi elementlarni birlashtirish va ko'rsatish uchun ishlatilgan.
lg bu ekran kengligi (width) bo'yicha ekran o'lchamini bildiradi, bu esa katta ekran
qurilmalarda ishlaydi. 6 soni, sahifadagi o'z yo'lida qancha joy olganini bildiradi va
ekran yarimli qilinadi.Ul tagi, HTML-da raqamli ro'yxatni yaratish uchun
ishlatiladi.Bu yerda, fa fa-facebook, fa fa-twitter, fa fa-instagram, va fa fa-youtube-
play nomli ikonalar ro'yxatining har bir qatorida li tagi bilan birgalikda ko'rsatilgan
Href atributi orqali, foydalanuvchi ma'lum bir saytga o'tish imkoniyatiga ega bo'la-
di.Bu kod qatoridagi idora sinfida aytib o'tilgan holatda salomlashuv va ijtimoiy tar
moqlarga havola qilish uchun HTML elementlarini yaratish uchun ishlatilgan.
HTML kodida button tagi bilan navbar-toggler nomli sinf aniqlangan.Bu sinf,
Bootstrap frameworkining bir qismi hisoblanadi.< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-
target = "#navbar-wd" aria-controls = "navbar-wd" aria-expanded = "false" aria-
label = "Toggle navigation" >
< span ></ span >
< span ></ span >
< span ></ span >
</ button >< li >< a href = "#" >< i class = "fa fa-instagram" aria-
hidden = "true" ></ i ></ a ></ li >
< li >< a href = "#" >< i class = "fa fa-youtube-play" aria-
hidden = "true" ></ i ></ a ></ li >
</ ul >
</ div >
</ div >

15class="navbar-toggler" kabi atributlar yordamida, stil jadvalidagi CSS kodlariga
tayyorlash uchun ushbu sinf aniqlanadi. navbar-toggler sinfi, mobil qurilmalarda
menuni ochish va yoping uchun tugmani ko'rsatish uchun ishlatiladi.Data-toggle,
data-target, aria-controls, aria-expanded, va aria-label atributlari, Bootstrap
frameworkining collapse va toggle funksiyalarini ishga tushirish uchun ishlatiladi.
<span></span> taglari tugmani stilini belgilaydigan ishoralar hisoblana
di. Bu ishoralar, tugmani uchta chiziqcha ko'rinishiga keltiradi.
HTML kodida div tagi bilan lbox-details nomli sinf aniqlangan. Bu sinf,
sahifadagi barcha elementlarni o'rab turish uchun ishlatiladi.Bu kod qatorida,h1
tagi bilan birlikda "Bizning sog'lomlashtirish markazimizga xush kelibsiz!" nomli
sarlavhaning yaratilgan.A tagi orqali "Sayt haqida" nomli tugma yaratilgan va
class="btn"kabi atributlar yordamida tugma stilini belgilash uchun ishlatilgan.
"Services-box" nomli HTML sinfi HTML-da blokning ko'rinishini aniqlash
uchun ishlatiladi. Bu sinfning "id" atributi "services" ga teng. Sizning kodlaringiz-
da "services" nomli bir id-ning mavjudligini ko'rsatadi, shu sababli, HTML-da
"services" id-siga ega bo'lgan HTML elementi aniqlanadi.< ul class = "navbar-nav" >
< li >< a class = "nav-link active" href = "#home" > Bosh sahifa </ a ></ li >
< li >< a class = "nav-link" href = "#about" > Sayt haqida </ a ></ li >
< li >< a class = "nav-link" href = "#services" > Xizmatlar </ a ></ li >
< li >< a class = "nav-link" href = "#appointment" > Vazifamiz </ a ></ li >
< li >< a class = "nav-link" href = "#gallery" > Ish jarayonidan
fotolar </ a ></ li >
< li >< a class = "nav-link" href = "#team" > Shifokorlar </ a ></ li >
< li >< a class = "nav-link" href = "#contact" > Mijozlar </ a ></ li >
</ ul >
< div id = "services" class = "services-box" >

16HTML kodlarida "row" nomli sinf bir yozuvning qator shaklini bildiradi.
"col-lg-12" sinfi, kattalashtirilgan bo'limni aks ettiradi va bir satrning butun enini
egallaydi. "title box" sinfi esa sarlavhani ko'rsatadi. "h2" tegi, sarlavha matnini
ko'rsatadiva "p" tegi esa bo'sh matn kiritadi. Agar sizning loyiha ko'dlaringizda
bularni ko'rib chiqqan foydalanuvchi uchun "Xizmatlar" nomli sahifa bo'limining
sarlavhasi ekranga chiqadi.
HTML kodida "item" nomli sinf bir elementni bildiradi. "serviceBox" nomli
sinf esa ma'lum bir xizmatni ko'rsatuvchi bitta blokni ifodalaydi. "service-icon"
sinfi, blokning boshqa elementlari bilan birga ishlatiladi va "fa fa-h-square"< div class = "item" >
< div class = "serviceBox" >
< div class = "service-icon" >< i class = "fa fa-h-square" aria-
hidden = "true" ></ i ></ div >
< h3 class = "title" > Bizning maqsadimiz </ h3 >
< p class = "description" >
Bizning maqsadimiz insonlarni davolash va sifatli xizmat
ko'rsatish
</ p >
< a href = "#" class = "new-btn-d br-2" > Ko'proq o'qish </ a >
</ div >
</ div >< div class = "row" >
< div class = "col-lg-12" >
< div class = "title-box" >
< h2 > Xizmatlar </ h2 >
< p > </ p >
</ div >
</ div >
</ div >

17sinfi yordamida ma'lum bir belgi yuklanadi. "title" sinfi sarlavhani bildiradi,
"description" sinfi esa xizmat tavsifi bilan to'ldiradi. "new-btn-d br-2" sinfi esa
"Ko'proq o'qish" tugmasini ko'rsatadi. Agar sizning loyiha ko'dlaringizda bularni
ko'rib chiqqan foydalanuvchi uchun "Bizning maqsadimiz" nomli bo'limda xizmat-
lar tavsiflanadi.
HTML kodida "serviceBox" nomli sinf ma'lum bir xizmatni ko'rsatuvchi bitta
blokni ifodalaydi. "service-icon" sinfi, blokning boshqa elementlari bilan birga
ishlatiladi va "fa fa-heart" sinfi yordamida ma'lum bir belgi yuklanadi. "title" sinfi
sarlavhani bildiradi, "description" sinfi esa xizmat tavsifi bilan to'ldiradi.
"new-btn-d br-2" sinfi esa "Ko'proq o'qish" tugmasini ko'rsatadi. Agar sizning
loyiha ko'dlaringizda bularni ko'rib chiqqan foydalanuvchi uchun "Bizning maqsa
dimiz" nomli bo'limda xizmatlar tavsiflanadi, lekin "fa fa-h-square" belgisi o'rniga
"fa fa-heart" belgisi ishlatilgan.< div class = "serviceBox" >
< div class = "service-icon" >< i class = "fa fa-heart" aria-
hidden = "true" ></ i ></ div >
< h3 class = "title" > Bizning maqsadimiz </ h3 >
< p class = "description" >
Bizning maqsadimiz insonlarni davolash va sifatli xizmat
ko'rsatish
</ p >
< a href = "#" class = "new-btn-d br-2" > Ko'proq o'qish </ a >
</ div >

18HTML kodida "serviceBox" nomli sinf ma'lum bir xizmatni ko'rsatuvchi
bitta blokni ifodalaydi. "service-icon" sinfi, blokning boshqa elementlari bilan
birga ishlatiladi va "fa fa-hospital-o" sinfi yordamida tibbiyot sohasini
belgilovchi
belgi yuklanadi. "title" sinfi sarlavhani bildiradi, "description" sinfi esa xizmat tav-
sifi bilan to'ldiradi. "new-btn-d br2" sinfi esa "Ko'proq o'qish" tugmasini ko'rsatadi.
Agar sizning loyiha ko'dlaringizda bularni ko'rib chiqqan foydalanuvchi uchun
"Bizning maqsadimiz" nomli bo'limda xizmatlar tavsiflanadi, lekin "fa fa-heart"
belgisi o'rniga "fa fa-hospital-o" belgisi ishlatilgan
< div class = "serviceBox" >
< div class = "service-icon" >< i class = "fa fa-stethoscope" aria-
hidden = "true" ></ i ></ div >
< h3 class = "title" > Bizning maqsadimiz </ h3 >
< p class = "description" >
Bizning maqsadimiz insonlarni davolash va sifatli xizmat
ko'rsatish
</ p >
< a href = "#" class = "new-btn-d br-2" > Ko'proq o'qish </ a >
</ div >< div class = "serviceBox" >
< div class = "service-icon" >< i class = "fa fa-hospital-o" aria-
hidden = "true" ></ i ></ div >
< h3 class = "title" > Bizning maqsadimiz </ h3 >
< p class = "description" >
Bizning maqsadimiz insonlarni davolash va
sifatli xizmat ko'rsatish
</ p >
< a href = "#" class = "new-btn-d br-2" > Ko'proq
o'qish </ a >
</ div >

19HTML kodida "serviceBox" nomli sinf ma'lum bir xizmatni ko'rsatuvchi bitta
blokni ifodalaydi. "service-icon" sinfi, blokning boshqa elementlari bilan birga
ishlatiladi va "fa fastethoscope" sinfi yordamida tibbiyot sohasini belgilovchi belgi
yuklanadi. "title" sinfi sarlavhani bildiradi, "description" sinfi esa xizmat tavsifi
bilan to'ldiradi. "new-btn-d br-2" sinfi esa "Ko'proq o'qish" tugmasini ko'rsatadi.
Agar sizning loyiha ko'dlaringizda bularni ko'rib chiqqan foydalanuvchi uchun
"Bizning maqsadimiz" nomli bo'limda xizmatlar tavsiflanadi, lekin belgisi o'rniga
"fa fa-stethoscope" belgisi ishlatilgan.
HTML kodida "serviceBox" nomli sinf ma'lum bir xizmatni ko'rsatuvchi bitta blok
ni ifodalaydi. "serviceicon" sinfi, blokning boshqa elementlari bilan birga ishlatila
diva "fa fa-wheelchair" sinfi yordamida sog'liqni saqlash sohasini belgilovchi belgi
yuklanadi. "title" sinfi sarlavhani bildiradi, "description" sinfi esa xizmat tavsifi
bilan to'ldiradi. "new-btn-d br-2" sinfi esa "Ko'proq o'qish" tugmasini ko'rsatadi.
Agar sizning loyiha ko'dlaringizda bularni ko'rib chiqqan foydalanuvchi uchun
"Bizning maqsadimiz" nomli bo'limda xizmatlar tavsiflanadi, lekin "fa fa-
stethoscope" belgisi o'rniga "fa fa-wheelchair" belgisi ishlatilgan.< div class = "serviceBox" >
< div class = "service-icon" >< i class = "fa fa-wheelchair" aria-
hidden = "true" ></ i ></ div >
< h3 class = "title" > Bizning maqsadimiz </ h3 >
< p class = "description" >
Bizning maqsadimiz insonlarni davolash va sifatli xizmat
ko'rsatish
</ p >
< a href = "#" class = "new-btn-d br-2" > Ko'proq o'qish </ a >
</ div >

21CSS kodida "body" nomli elementga turli xususiyatlar berilgan. "color" xususiyati
esa matnni ko'rsatadigan rangni belgilaydi. "#666666" soni esa mavjud matnni oq
rangda ko'rsatadi. "font-size" xususiyati, matnning o'lchamini belgilaydi.
"15px" soni esa matn o'lchamini belgilaydi. "font-family" xususiyati esa matnning
shrift turini belgilaydi. "Catamaran", sans-serif" esa matn shrift turidir. "line-
height" xususiyati esa satr orqali yozilgan matnni chegarasiga qarab qatorlar orasid
agi balandlikni belgilaydi. "1.80857" soni esa "line-height"ni belgilaydi.
Agar sizning loyiha kodlaringizda bularni ko'rib chiqqan foydalanuvchi uchun ,
ushbu kodlar saytni dizayn va ko'rinishini belgilaydi
CSS kodida "a" nomli elementga turli xususiyatlar berilgan. "color" xususiya
ti esa havolani ko'rsatadigan rangni belgilaydi. "#1f1f1f" soni esa mavjud havolani
oq rangda ko'rsatadi. "textdecoration" xususiyati havola matnini ostiga chiziqa {
color: #1f1f1f;
text-decoration: none !important;
outline: none !important;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

22chizishni belgilaydi. "!important" kalit so'zi esa ushbu xususiyatning o'zgarishini
asosiy (asosiy olmaydigan) qiladi. "outline" xususiyati esa havolani qayta belgilash
tugmasini o'chiradi. "transition" xususiyati esa tanlangan element yoki klassning
o'zgarishlarini animatsiyalar bilan ko'rsatishni belgilaydi. Ushbu kodlarda -webkit-
transition, -moz-transition, -ms-transition va -otransition esa turli brauzerlar uchun
talab qilinadigan kodlardir. Agar sizning loyiha kodlaringizda bularni ko'rib chiq-
qan foydalanuvchi uchun, ushbu kodlar havolalar uchun stil va animatsiyalar bera-
di.
letter-spacing: 0;
font-weight: normal;
position: relative;
padding: 0 0 10px 0;
font-weight: normal;
line-height: 120% !important;
color: #1f1f1f;
margin: 0
}
h1 {
font-size: 24px
}
h2 {
font-size: 22px

23CSS kodida "h1", "h2", "h3", "h4", "h5", "h6" nomli sarlavha elementlarga turli
xususiyatlar berilgan. "letter-spacing" xususiyati esa harflar orasidagi masofani
belgilaydi. "0" soni esa harflar orasidagi masofani yo'qotadi. "font-weight"
xususiyati esa matnning qalinligini belgilaydi. "position" xususiyati, sarlavha ele-
mentining o'rnini belgilaydi. "relative" soni esa sarlavhalar elementining ma'lum
joyda joylashganligini bildiradi. "padding" xususiyati esa sarlavhaning ichki o'lcha
mini belgilaydi. "0 0 10px 0" soni esa sarlavha matnining yuqorisidan, o'ngidan va
chapidan 0 piksel, pastidan 10 piksellik masofani belgilaydi. "line-height"}
h3 {
font-size: 18px
}
h4 {
font-size: 16px
}
h5 {
font-size: 14px
}
h6 {
font-size: 13px
}

24xususiyati esa satr orqali yozilgan matnni chegarasiga qarab qatorlar orasidagi bala
ndlikni belgilaydi. "120% !important" soni esa "line-height"ni belgilaydi.
"color" xususiyati esa sarlavhaning rangini belgilaydi. "#1f1f1f" soni esa oq rangni
ifodalaydi. "margin" xususiyati esa sarlavha elementining har tomonidagi bo'shlik
ni belgilaydi. "0" soni esa bo'shlik yo'qotadi. "font-size" xususiyati esa sarlavha
elementining shrift o'lchamini belgilaydi. Agar sizning loyiha kodlaringizda bular
ni ko'rib chiqqan foydalanuvchi uchun, ushbu kodlar sarlavhalar uchun stil beradi
va ularning o'lchamlarini belgilaydi.
CSS kodida "h1 a", "h2 a", "h3 a", "h4 a", "h5 a", "h6 a" nomli elementlarga
turli xususiyatlar berilgan. Bu kodlar, HTML sarlavhalarining ichida joylashgan ha
volalarga stil berish uchun ishlatiladi. "color" xususiyati esa havolani ko'rsatadigan
rangni belgilaydi. "#212121" soni esa mavjud havolani qora rangda ko'rsatadi.
"text-decoration" xususiyati havola matnini ostiga chiziq chizishni belgilaydi.
"!important" kalit so'zi esa ushbu xususiyatning o'zgarishini asosiy (asosiy olmaydi
gan) qiladi. "opacity" xususiyati esa elementning nozikligini belgilaydi. "1" soni
esa elementni nozikligini o'zgartirmaydi (to'la noziklik). Agar sizning loyiha kodla
ringizda bularni ko'rib chiqqan foydalanuvchi uchun, ushbu kodlar sarlavhalar
ichidagi havolalarga stil beradi.color: #212121;
text-decoration: none!important;
opacity: 1
}

25CSS kodida "h1 a:hover", "h2 a:hover", "h3 a:hover", "h4 a:hover", "h5 a:ho
ver", "h6 a:hover" nomli elementlarga turli xususiyatlar berilgan. Bu kodlar, HTM
L sarlavhalarining ichida joylashgan havolalarga stil berish uchun ishlatiladi, shuni
ngdek, foydalanuvchi havolaga ko'rsatganda mazmunining o'zgarishi bilan yuzaga
keladigan animatsiyani belgilaydi. "opacity" xususiyati esa elementning nozikligini
belgilaydi. ".8" soni esa elementni nozikligini o'zgartiradi (to'la noziklikdan qisma
tga). Agar sizning loyiha kodlaringizda bularni ko'rib chiqqan foydalanuvchi uchun
, ushbu kodlar sarlavhalar ichidagi havolalar foydalanuvchi hover qilganda nozikli
gini o'zgartiradi.
CSS kodida "color", "text-
decoration" va "outline" nomli xususiyatlar "h1 a", "h2 a", "h3 a", "h4 a", "h5 a", "
h6 a" nomli elementlarga berilgan. "color" xususiyati havolani ko'rsatadigan rangnicolor: #1f1f1f;
text-decoration: none;
outline: none;
}h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
opacity:

26belgilaydi. "#1f1f1f" soni esa oq rangni ifodalaydi. "text-
decoration" xususiyati havola matnini ostiga chiziq chizishni belgilaydi. "none" so
ni esa havolani orqa chiziqlashni yo'qotadi. "outline" xususiyati esa havolaga fokus
lanishda chiziqlashni belgilaydi. "none" soni esa havolani fokuslanishida chiziqlas
hni yo'qotadi. Agar sizning loyiha kodlaringizda bularni ko'rib chiqqan foydalanuv
chi uchun, ushbu kodlar sarlavhalar ichidagi havolalarga stil beradi va uchlarining
ostidagi chiziqlash va fokuslanishni yo'qotadi.
CSS kodida "text decoration", "outline" va "transition" nomli xususiyatlar
"h1 a:hover","h2 a:hover", "h3 a:hover", "h4 a:hover", "h5 a:hover", "h6 a:hover"
nomli elementlarga berilgan. "text-decoration" xususiyati havola matnini ostiga
chiziq chizishni belgilaydi. "!important" kalit so'zi esa ushbu xususiyatning o'zgari
shini asosiy (asosiy olmaydigan) qiladi. "outline" xususiyati esa havolaga fokusla
nishda chiziqlashni belgilaydi. "transition" xususiyati esa stil o'zgarishlari bo'lgan
elementlarga animatsiyalar beradi. "-webkit-transition", "-moz-transition",text-decoration: none !important;
outline: none !important;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}

27qilganda chiziqsiz yoki animatsiyali o'zgarishlar ko'rsatadi. "-ms-transition" va "-o-
transition" kodlari esa turli brauzerlar uchun talab
qilinadigan kodlardir. "all" soni esa animatsiyani barcha xususiyatlar, masalan,
rang, hajm, ko'rsatkichlar, matn, o'lcham kabi hamma xususiyatlar uchun amalga
oshiradi. "0.5s" soni esa animatsiyani davomiyligi yoki muddati. "ease-in-out"
soni esa animatsiya boshlang'ich tezligini va tugash tezligini belgilaydi. "0s"
soni
esa animatsiya boshlanishining kechiktirilmaganligini yoki boshlang'ich kechikish
ni belgilaydi. Agar sizning loyiha kodlaringizda bularni ko'rib chiqqan foydalanuv
chi uchun, ushbu kodlar sarlavhalar ichidagi havolalar foydalanuvchi hover
CSS kodida "margin-top", "background-color", "border", "padding" va "font-
size" nomli xususiyatlar nomalum bir elementga berilgan. Bu kodlardan "margin-
top" xususiyati elementning yuqorisidagi bo'shliqni va o'sha elementdan yuqori
qismni belgilaydi. "20px" soni esa yuqoridagi bo'shligi 20 piksellik bo'shlik bilan
belgilaydi. "background-color" xususiyati elementning fon rangini belgilaydi.margin-top: 20px;
background-color: transparent !important;
border: 2px solid #ddd;
padding: 12px 40px;
font-size: 16px;
}

29</
div
>
</
div> </div>
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
<nav class="navigation navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarsExample04" aria-
controls="navbarsExample04" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>

30</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#about">SAMARQAND</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">MEHMONXONA</a>
</li>
</ul>
<div class="sign_btn"><a href="#">SAMARQAND</a></div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- end header inner -->
<!-- end header -->
<!-- banner -->
<section class="banner_main">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-bg">
<div class="padding_lert">
<h1>SAMARQAND MEHMONXONALARIGA XUSH
KELIBSIZ </h1>
<span>Biz siz uchun ochildik 2023</span>
<p>Bekor qilish va oldindan to'lov siyosati
xonaning narxiga qarab farq qiladi.
Iltimos, yashash vaqtingizni kiriting
va siz tanlagan xonaga qanday sharoitlar
mos kelishini tekshiring.</p>
<a href="#">MA'LUMOT</a>
</div>
</div>
</div>

31</div>
</div>
</section>
<!-- end banner -->
<!-- form_lebal -->
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form_book">
<div class="row">
<div class="col-md-3">
<label class="date">KELICH.VAQTI</label>
<input class="book_n" type="date" >
</div>
<div class="col-md-3">
<label class="date">KETISH.VAQTI</label>
<input class="book_n" type="date" >
</div>
<div class="col-md-3">
<label class="date">ODAM SONI</label>
<input class="book_n" placeholder="2" type="type" name="2">
</div>
<div class="col-md-3">
<button class="book_btn">BAND QILISH</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- end form_lebal -->
<!-- choose section -->
<div class="choose">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="choose_box">

32<div class="titlepage">
<h2><span class="text_norlam">ENG QULAY</span>
<br>SAMARQAND MEHMONXONA</h2>
</div>
<p>Rayyan Samarqand mehmonxonasi Samarqand
shahrida joylashgan. Mehmonxonada bir ,
ikki , to'rt va oilaviy xonalar mavjud.
Har bir xona tekis ekranl. . . . </p>
<a class="read_more" href="#">BATAFSIL</a>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="img_box">
<figure><img src="images/img1.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<div class="img_box">
<figure><img src="images/img2.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<div class="img_box">
<figure><img src="images/img3.png" alt="#"/></figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end choose section -->
<!-- our section -->
<div class="our">
<div class="container">
<div class="row d_flex">
<div class="col-md-6">

33<div class="img_box">
<figure><img src="images/img4.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<div class="our_box">
<div class="titlepage">
<h2><span class="text_norlam">Bizning eng mazali </span>
<br>NONUSHTALARIMIZ</h2>
</div>
<p>Tayyorlanishi oson bo’lgan , ta’mi ham pechenye,
ham keks, ham sutli korjikga o’xshash – tashqi
qattiq ichi esa yumshoq, ajoyib pishiriq.
Ertalabgi choy yoki qahva uchun mukammal shirinlik. </p>
<a class="read_more" href="#">BATAFSIL</a>
</div>
</div>
</div>
</div>
</div>
<!-- end our section -->
<!-- about -->
<div id="about" class="about">
<div class="container-fluid">
<div class="row d_flex">
<div class="col-md-6">
<div class="about_text">
<div class="titlepage">
<h2>Samarqand Mehmonxonamiz haqida</h2>
<p>Samarkand Mehmonxonasi mehmonxonasi alohida talablarni
bajaradi </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="about_img">
<figure><img src="images/about_img.jpg" alt="#"/></figure>
</div>
</div>

34</div>
</div>
</div>
<!-- end about -->
<!-- testimonial -->
<div class="testimonial">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>SAMARQAND MEHMONXONA</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide testimonial_Carousel "
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption ">
<div class="row">
<div class="col-md-6 margin_boot">
<div class="test_box">
<h4>SAMARQAND MEHMONXONA</h4>
<i><img src="images/te1.png" alt="#"/></i>
<p>Samarqandga bormoqchimi siz? Qancha
sir va yangi kashfiyotlarni bu ko`hna
shahar o`zida mujassam etgan. Ushbu
sahifada Samarqandning eng yaxshi mehmonxonalari
ko`rsatilgan.</p>
</div>

35variant
tanlaysiz. </div>
<div class="col-md-6">
<div class="test_box">
<h4>SAMARQAND MEHMONXONA</h4>
<i><img src="images/te1.png" alt="#"/></i>
<p>Siz hech qanday qiyinchilik siz o`zingizga qulay
Xo`sh, sizga Samarqanddan shoshilinch mehmoxona
kerak bo`lyaptimi? Siz bizda hamyonbop narxni va
yuqori xizmat ko`rsatishni o`zida mujassam etgan
. </p>
</div>
</div>
</div>
</div>
tashrif </div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-6 margin_boot">
<div class="test_box">
<h4>SAMARQAND MEHMONXONA</h4>
<i><img src="images/te1.png" alt="#"/></i>
<p>Samarqandga bormoqchimi
siz? Qancha sir va yangi
kashfiyotlarni bu ko`hna shahar
o`zida mujassam etgan. Ushbu
sahifada Samarqandning eng yaxshi
mehmonxonalari ko`rsatilgan.</p>
</div>
</div>
<div class="col-md-6">
<div class="test_box">
<h4>SAMARQAND MEHMONXONA</h4>
<i><img src="images/te1.png" alt="#"/></i>
<p>Sayohatga otlandingizmi va
Samarqandga ham buyurmoqchimi siz?

36beradi? </p> ma`qul ko`radigan mehmon uchun
mo`ljallangan mehmonxonalar, bularning
hammasi Mybooking.uz saytida topiladi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-6 margin_boot">
<div class="test_box">
<h4>Mark jonson</h4>
<i><img src="images/te1.png" alt="#"/></i>
<p>Samarqand. Betakror sayohat uchun
5 yulduzli hamda byudjet mehmonxonalar
taklifi. Oldindan bron qiling!
Samarqanddagi aynan sizga ma`qul
bo`ladigan mehmonxonani aniqlashda nima
yordam
</div>
</div>
<div class="col-md-6">
<div class="test_box">
<h4>SAMARQAND MEHMONXONA</h4>
<i><img src="images/te1.png" alt="#"/></i>
<p>Sharhlar, ularga albatta e`tibor bering.
Mehmonxonada yashab chiqqan
mehmonlarning fikrlari sizga to`g`ri tanlov
qilishda va vaqtingizni yuqori darajadagi
qulaylikda
o`tkazib yorqin xotiralar qolishiga yordam
beradi.</p>
</div>
</div>
</div>

38</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="sr-only">SAMARQAND</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">KIRISH</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end testimonial -->
<!-- footer -->
<footer id="contact">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="titlepage">
<h2>SAMARQAND MEHMONXONA</h2>
</div>
<div class="cont">
<h3>Bepul yuklab olish SAMARQAND MEHMONXONA
ochilish sahifasi </h3>
<p>Sharhlar, ularga albatta e`tibor bering.
Mehmonxonada yashab chiqqan mehmonlarning
fikrlari sizga to`g`ri tanlov qilishda va
vaqtingizni yuqori darajadagi qulaylikda
o`tkazib yorqin xotiralar qolishiga yordam beradi.</p>
</div>
</div>
<div class="col-md-6">

39<form id="request" class="main_form">
<div class="row">
<div class="col-md-12 ">
<input class="contactus" placeholder="I.F.O" type="type"
name="Full Name">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Email" type="type"
name="Email">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="telifon nomer"
type="type" name="Phone Number">
</div>
<div class="col-md-12">
<textarea class="textarea" placeholder="ma'lumot qoldiring"
type="type" Message="Name">Message </textarea>
</div>
<div class="col-sm-12">
<button class="send_btn">TASDIQLASH</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>SAMARQAND MEHMONXONA 2023 <a
href="https://html.design/"> MAROQLI DAM OLIN.</a></p>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>

40</html>
body {
color: #666666;
font-size: 14px;
font-family: 'Raleway', sans-serif;
line-height: 1.80857;
font-weight: normal;}
a {
color: #1f1f1f;
text-decoration: none !important;
outline: none !important;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: 0;
font-weight: normal;
position: relative;
padding: 0 0 10px 0;
font-weight: normal;
line-height: normal;
color: #111111;
margin: 0
}

41h1 {
font-size: 24px;}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px
}
h5 {
font-size: 14px
}
h6 {
font-size: 13px
}
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {

42color: #212121;
text-decoration: none!important;
opacity: 1}
button:focus {
outline: none;
}
ul,
li,
ol {
margin: 0px;
padding: 0px;
list-style: none;
}
p {
margin: 0px;
font-weight: 500;
font-size: 15px;
line-height: 24px;
}
a {
color: #222222;
text-decoration: none;
outline: none !important;
}
a,
.btn {
text-decoration: none !important;
outline: none !important;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

43}img {
max-width: 100%;
height: auto;
}
:focus {
outline: 0;
}
.btn-custom {
margin-top: 20px;
background-color: transparent !important;
border: 2px solid #ddd;
padding: 12px 40px;
font-size: 16px;
}
.lead {
font-size: 18px;
line-height: 30px;
color: #767676;
margin: 0;
padding: 0;
}
.form-control:focus {
border-color: #ffffff !important;
box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}
.navbar-form input {
border: none !important;
}
.badge {
font-weight: 500;
}

$44blockquote { margin: 20px 0 20px; padding: 30px;} button { border: 0; margin: 0; padding: 0; cursor: pointer; } .full { float: left; width: 100%; } .layout_padding { padding-top: 90px; padding-bottom: 90px; } .layout_padding_2 { padding-top: 75px; padding-bottom: 75px; } .light_silver { background: #f9f9f9; } .theme_bg { background: #38c8a8; } .margin_top_30 { margin-top: 30px !important; }$ $45.full { width: 100%; float: left; margin: 0; padding: 0;} .loader_bg { position: fixed; z-index: 9999999; background: #fff; width: 100%; height: 100%; } .loader { height: 100%; width: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; } .loader img { width: 280px; } /*-- navigation--*/ .navigation.navbar { float: right; padding: 0px; } .navigation.navbar-dark .navbar-nav .nav-link {$ $46padding: 0 25px; color: #fff; font-size: 16px; line-height: 20px; text-transform: uppercase;} .main_form { padding: 50px 30px; background: #d7530a; margin-top: -260px; border-radius: 25px; } .main_form .contactus { border: inherit; padding: 0px 19px; margin-bottom: 20px; width: 100%; height: 60px; background: #fff; color: #292e39; font-size: 18px; font-weight: normal; border-radius: 15px; } .main_form .textarea { border: inherit; padding: 0px 19px; margin-bottom: 20px; width: 100%; background: #fff; color: #292e39; font-size: 18px; font-weight: normal; border-radius: 15px; padding-top: 50px; }$ $47.main_form .send_btn { font-size: 17px; transition: ease-in all 0.5s; background-color: #000; color: #fff; padding: 13px 0px; margin: 0 auto; max-width: 200px; width: 100%; display: block; margin-top: 30px; border-radius: 10px;} .main_form .send_btn:hover { background-color: #eec237; transition: ease-in all 0.5s; color: #fff; border-radius: 25px; } #request *::placeholder { color: #4d4d4f; opacity: 1; } .multi { color: #f6d601; font-weight: bold; font-size: 40px; } .color_chang { color: #0c0c0e; } .footer { margin-top: 265px;$

48background: #242423;
padding-top: 85px;
text-align: center;}
.footer .titlepage
{ text-align:
left;
padding-bottom: 10px;
}
.footer .titlepage h2 {
color: #fff;
}
.cont {
padding-top: 20px;
text-align: left;
}
.cont h3 {
color: #fff;
font-size: 40px;
line-height: 50px;
font-weight: bold;
}
.cont p {
color: #fff;
font-size: 17px;
line-height: 28px;
padding-top: 20px;
}
.copyright {
margin-top: 90px;
padding: 20px 0px;
background-color: #fff;
}

49.copyright p {
color: #020203;
font-size: 18px;
line-height: 22px;
text-align: center;}
.copyright a {
color: #020203;
}
.copyright a:hover {
color: #eec237;
}

524.XULOSA
Bugungi kunda Internet olamiga faqatgina kompyuterlar bilan emas, balki
uyali telefon aloqa texnologiyalari yordamida ham kirish oddiy holga aylandi.
Shuningdek, hozirgi globallashgan davrda har tomonlama takomillashtirilgan
vositalar va kashfiyotlar ham sinovdan o‘tkazilmoqda. Global kompyuter tarmog‘i
bugungi kungacha ma’lum bo‘lgan barcha axborot manbalaridan (telefon, pochta,
televidenie, radio, matbuot nashrlari va boshqalar) farqli holda, o‘z
foydalanuvchilariga har qanday ma’lumotni istalgan shakl va ko‘rinishda, ularning
qiziqish va xohishlariga qarab, alohida tanlov asosida uzatish va olish uchun qulay
imkoniyat yaratib kelmoqda.
Web dizayn fanining vazifasi:
- Web texnologiyalar asoslari bilan tanishtirish;
- zamonaviy axborot texnologiyalari orqali olinayotgan ma’lumotlarning
qanday hosil qilinishi va ulardan foydalanish haqida ma’lumotlarni berish;
- Web saytlarni hosil qiluvchi dasturlar va dasturlash tillari bilimlari bilan
tanishtirish:
Web dizayn fanini o‘qishdan maqsadimiz – biz talabalarning kasbiy
sohasida egallashi lozim web-dizaynga oid bo‘lgan bilimlar va amalda qo‘llash
uchun ko‘nikma va malakalarni shakllantirish va rivojlantirishdan iborat. Unda har
bir kasb egasining faoliyati kerak bo‘lgan tayanch nazariy va amaliy ma’lumotlami
o‘z ichiga oladi.

535.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.

Web-sahifa haqida ma’lumotlar

Sotib olish

Dokument ma'lumotlari

Sotuvchi

Web-sahifa haqida ma’lumotlar

O'xshash dokumentlar