Qishloq xo’jaligi mahsulotlari haqida web sahifasini yarating va tizimga joylashtiring.

Yuklangan vaqt:

12.08.2023

Ko'chirishlar soni:

0

Hajmi:

1434.2529296875 KB

Ko'chirib olish

Mavzu: Qishloq xo’jaligi mahsulotlari haqida web sahifasini yarating va tizimga
joylashtiring.
Reja:
I Kirish
II Asosiy qism
1.1 Web sahifa haqida tushuncha
1.2 HTML ga kirish
1.3 Css haqida tushuncha
III Amaliy qism
3.1 HTML yordamida sayt sturkturasini qurish
3.2 Css yordamida ishlov berish
IV Xulosa
V Foydalanilgan adabiyotlar

Kirish
Kompyuter grafikasi tushunchasi hozirda keng qamrovli sohalarni o’z ichida
mujassamlashtirib, bunda oddiy grafik chizishdan to real borliqdagi turli tasvirlarni
hosil qilish, ularga zeb berish, dastur vositasi yordamida hatto tasvirga oid yangi
loyihalarni yaratish ko’zda tutiladi. Kompyuter grafikasi keng tarqalib borayotgan
dastur ta'minotidir, ya'ni kompyuter grafikasi mavjud va yangi yaratilayotgan
dasturlarga tayanadi. Zamonaviy kompyuter texnolgiyasida kompyuter grafikasi
bilan ishlash eng ommobop yo’nalishlardan biri bo’lib bormoqda. Hozirda bu
yo’nalish bilan hatto professional rassom va dzaynerlar ham shug’ullanmoqda.
Ma'lumki inson axborotni eshitish va sezish a'zolariga nisbatan ko’rish a'zolari
orqali oladi. Ko’rgazmali axborotning o’zlashtirilishi oson bo`ladi. Inson
tabiatining ana shu xususiyati grafik operatsion tizimlarda ishlatiladi. Ularda
axborot grafik ob'ektlar: znachoklar (belgilar), oynalar va rasmlar ko’rinishida
tasvirlanadi.

1.1 Web sahifa haqida tushuncha
Intemetda axborotlami joylashtirish va ulami kompyuter ekranidagi ko‘rinishi qulay bo‘lishi uchun web-
sahifalardan foydalaniladi. Web-sahifa (inglizcha - Web page) - bu HTML fayl kengaytmasiga ega
bo‘lgan gipermatnli fayldir.
Har xil web-sahifalarga tarqatilgan va o‘zaro bog‘langan hujjat gipermatn deyiladi. Unga matn, rasm,
ovoz, video va animatsiya kabi ma’lumotlar joy lashtirish mumkin.
Web-sahifada ma’lumotlar sahifa ko‘rinishida beriladi. Bu sahifalar, odatda, HTML hujjat, ya’ni HTML
tilida yozilgan hujjat deb qaraladi. Bu holda yozilgan hujjatlami ko‘rish uchun maxsus dasturlar
ishlatiladi. Bunday dasturlar Brauzer (ko‘ruvchi)lar deb ataladi. Windows muhitida standart ish-
latiladigan Brauzer bu Internet Explorer hisoblanadi.
Web-sayt (inglizcha - Website, web - o‘rgimchak to‘ri, site - joyi) - bu bir nechta web-sahifalarni
kompyuter tarmog‘ida bitta manzilda birlashtirilgan fayllar to‘plamidir (Domen ga yoki IP ga ega
bo‘ladi).
Domen - bu biror-bir serverda joylashgan saytga olib boradigan manzildir
Barcha web-saytlar qaysidir serverda joylashgan bo‘ladi. Aslida Siz hosting xizmatidan foydalanib,
saytingiz ma’lumotlarini qaysidir ser- verga joylashtirganingizda saytingiz IP manzilga ega bo‘ladi.
Masalan: 94.100.180.199. Agar domen bo‘lmaganida yaratilgan web-saytni yuklash uchun brauzerda
94.100.180.199 raqamlar yoziladi.
Hosting - bu web-sayt uchun joy ajratib beruvchi xizmat turidir
Odatda domen beruvchi kompaniyalarda ham hosting xizmati bo‘la- di. Hosting va domenni bir
kompaniyadan yoki alohida kompaniyalardan ham olish mumkin. Web-saytlar uchun hosting beruvchi
kompaniyalarda katta hajmdagi maxsus serverlar mavjud. Ular tinimsiz ishlab turish orqali web-
saytlaming ishlashini ta’minlaydi.
Web-dizayn - bu yaratiladigan web-saytlarga texnik ishlov berish va axborotlarni tizimli ravishda
shakllantirishdir.
Axborotlar bir-biri bilan gipermatnli bog‘lanishlar yordamida web-sahifalarga tarqatiladi. Bunday
sahifalar birgalikda web-saytni tashkil etadi. Web-saytlar Intemetning yagona axborot oralig‘ida
birlashadi. Bunda web-sayt va web-sahifalar o‘zaro har xil usullar bilan bog‘lanadi. Ushbu ya gona oraliq
World Wide Web (butun dunyo o‘rgimchak to‘ri) yoki qisqacha WWW deyiladi. Web-sahifalarga
gipermurojaat WWW ning asosiy xusu- siyatlaridan biridir. Istalgan bir hujjatdan boshqa bir WWW
hujjatga HTML ning maxsus teglari yordamida murojaat qilinadi. Intemetda ishlagan vaqtin- gizda siz
web-sahifalarda gipermatnli murojaatlarga duch kelasiz. Bu matn fragmentlari ko‘k shriftda va tagi
chizilgan bo‘ladi. Agar siz ushbu yozuv- ni sichqoncha tugmasi yordamida bossangiz, u avtomatik
ravishda boshqa web-sahifaga murojaat qiladi.
Dastlab web-sayt yaratish uchun faqat HTML tilini yaxshi o‘zlashtir- gan mutaxassislar
tomonidan amalga oshirilgan. Ushbu muammoni hal etish maqsadida, turli xil axborot
texnologiyalari sohasidagi kompaniyalar tomo- nidan zamonaviy dasturiy vositalar yaratilgan.
Ushbu dasturiy vositalardan foydalanib web-sayt yaratishning barcha bosqichlari HTML tili
kodiga ta- yangan holda amalga oshirilgan. Biroq, HTML tilining barcha afzalliklariga
qaramasdan, web-saytni boshqarish, vaqt o‘tgan sayin yangi ma’lumotlami qo‘shishda bir
qancha qiyinchiliklarga duch kelindi. Ushbu qiyinchiliklami bartaraf etish maqsadida yangi
dasturiy ta’minot yaratish ishlarini boshlashga ehtiyoj sezildi. Bu dasturiy ta’minotlar kontentni
(ma’lumotlami) boshqarish tizimlari (CMS - Content Management System) deb ataladi. Ayni
paytda web-sayt yaratishni ikki xil usulda amalga oshirish mumkin: statik va dinamik. HTML da
yozilgan web-saytlar statik holda bo‘Isa, zamo naviy web-saytlar dinamik ko‘rinishga ega. CMS

tizimlarming asosiy afzallik jihati shundaki, dinamik web-saytlami oson yarata olish va ulami
turli xil axborotlar bilau to‘ldirish imkoniyati mav jud. Bugungi kunda, CMS asosida qurilgan
Drupal, PHP-Nuke, WebDirector, NetCat, Slaed, Microsoft CMS, WordPress, PHPShop kabi
platformalami misol tariqasida aytish mumkin.
Quyida 0‘zbekiston Respublikasi Xalq ta’limi vazirligining web-saytini asosiy sahifasidan lavha
keltirilgan (uzedu.uz):
Web-sahifalar yaratishning asosi sifatida tasviriy san’atning yangi turi web-dizaynga bevosita
aloqadordir. Internet dizaynerlari rasm va tasvirlar tayyorlash bilan cheklanib qolmasdan, balki
tayyorlangan rasm va tasvirlami tarmoqqa joylashtirish, web-sahifalar orasida aloqalar o‘matish,
matn, tasvir va rasmlaming harakatini amalga oshirish, ranglami estetik jihatdan to‘g‘ri va
chiroyli tanlashga e’tibor qaratilishi va rasmlaming harakatini amalga oshirish, ranglami estetik
jihatdan to‘g‘ri va chiroyli tanlashga e’tibor qaratilishi lozim.

1.2 HTML ga kirish
Butun dunyo o’rgimchagi to’ri – World Wide Web (WWW) HTML gipermatn
bog’lanish tili yordamida tuzilgan Web-sahifalardan iborat HTML ancha
murakkab til ( Standart Generalived Marnup Language ) SGML ning
hisoblanadi. Ananaviy tushuncha bo’yicha HTML butunlay dasturlash tili
hisoblanmaydi. HTML–hujjatni belgilash tili. HTML–hujjatni tadqiq qilishda
matnli hujjatlar teg(tag)lar bilan belgilanadi. Ular maxsus burchakli ishoralar bilan
o’rlagan bo’ladi, (< va >). Teglar matnlarni formatlashda va matnga har xil nomatn
elementlarni masalan, grafiklar, qo’shimcha ob'ektlar va shu kabilarni o’rnatishda
ishlatiladi.
HTML tilining asosiy qoidalari quyidagicha:
1 - qoida . HTMLdagi istalgan harakat teglar bilan aniqlanadi. Bitta teg (chap)
harakatning bosh qismida, ikkinchisi esa, (o’ng) oxirida turadi. Bunda teglar « < »
yoki « > » ishoralar bilan yonma-yon turadi. Yolg’iz o’zi ishlatiladigan teglar ham
mavjud.
2 - qoida . Brauzer darchasidagi burchakli qavs ichiga joylashtirilgan istagan teg
yoki boshqa instruktsiya tashqariga chiqarilmaydi va HTML–fayl uchun ichki
buyruq hisoblanadi.
Demak, WWW sistemasidan qandaydir hujjat yoki xabar olsangiz, ekranda yaxshi
formatlangan, o`qish uchun qulay matn paydo bo`lganini ko`rasiz. Bu shuni
anglatadiki, WWW hujjatlarida qandaydir ma'lumotlarni ekranda boshqarish
imkoniyati ham mavjud. Hujjatlar tayyor, siz foydalanuvchiningqaysi
kompyuterda ishlashini bilmaysiz, hujjatlar aniq bir kompyuter platformalariga
mo`ljallangan yoki qaysidir format bilan saqlanishini oldindan ayta olmaysiz.
Kompyuterda ishlayotgan foydalanuvchi qaysi terminalda ishlashidan qat'iy nazar,
yaxshi formatlangan hujjatni olish kerak. Bu muammoni HTML andoza tili hal
qiladi. HTML ( Hyper Text Markup Language - gipermatn belgilash tili ).
WWW sistemasi uchun hujjat tayyorlashda ishlatiladi. HTML hujjatning
tuzilishini ifodalovchi uncha murakkab bo`lmagan buyruqlar majmuidan
iborat. HTML buyruqlari orqali matnlarni istagancha shaklini o`zgartirish, ya'ni
matnning ma'lum bir qismini ajratib olib boshqa faylga yozish, shuningdek boshqa
joydan turli xil rangli tasvirlarni qo`yish mumkin. U boshqa hujjatlar bilan
bog`laydigan gipermatnli aloqalarga ega.
90 -yillarning o’rtalarida internet tarmog’ining eksponentsial o’sishi oqibatida
HTML tili ommaviy tus oldi. Bu vaqtga kelib, tilni standartizatsiyalash zarurati
tug’ildi, chunki ko’p kompaniyalar Internetga kirish uchun ko’plab dasturiy
ta'minotlar ishlab chiqdilar, to’xtovsiz o’sib borayotgan (HTML instruktsiyasi
bo’yicha) o’zlarini variantlarini tavsiya qildilar. HTML tili teglarini qo’llash
bo’yicha yagona bir qarorga kelish payti yaqinlashgan edi.
World Wide Web Consortium (qisqacha–WZS) deb nomlangan tashkilot HTML

standarti (spetsifikatsiya)ni yaratish ishlarini o’ziga oldi. Uning vazifasiga
brauzerlar tadqiqotchi kompaniyalarning har xil takliflarini hisobga olgan holda
tilning zamonaviy rivojlanish imkoniyatlari darajasini aks ettiruvchi standartni
yaratish kiradi. Spetsifikatsiyaning tasdiqlash sxemasi quyidagilardan iborat: WZS
konsortsiumi standart loyihasini tayyorlaydi. Muhokama qilingandan so’ng, uning
ishchi (draft) varianti chiqariladi, so’ngra uni ma'lum bir davrga yana muhokama
qilish uchun tavsiya qilinadi. Istagan xohlovchi odam HTML standartining yangi
teg va versiyalari muhokamasida ishtirok etishi mumkin. Muhokama davri
tugagandan keyin, standartning ishchi varianti tavsifnoma hisoblanadi, ya'ni
HTML spetsifikatsiyaning rasmiy tan olingan varianti bo’ladi. Qabul qilingan
standart ( Document Type Definition - hujjat xilini aniqlash ) DTD deb ataladi.
Internetda birinchi marta ko’rsatilgan (taqdim qilingan) HTMLdagi DTD–
standartning 1.0 versiyasi bo’ldi. So’ngra 1995 yil noyabr oyida WWW uchun
ancha aniq va o’ylab qilingan 2.0 versiya yaratildi.
1996 yil sentyabr oyida bir necha oylik muxokamadan so’ng 3.2 versiya
tasdiqlandi (3.0 versiya nashr qilinmadi).1997 yil iyun oyida HTML–standartining
4.0 versiyasi e'lon qilindi va 1997 yil dekabrida rasmiy standartga aylandi. Bugun
bu qabul qilingan standartlarning eng oxirgisidir.
HTML – hujjat tuzilishi
HTML ( Hyper Text Markup Language ) – belgili til bo’lib, ya'ni bu tilda
yozilgan kod o’z ichiga mahsus ramzlarni mujassamlashtiradi. Bunday ramzlar
hujjat ko’rinishini faqatgina boshqarib, o’zi esa ko’rinmaydi. HTMLda bu
ramzlarni teg (teg – yorliq , belgi) deb ataladi. HTMLda hamma teglar ramz-
chegaralovchilar (< , >) bilan belgilanadi. Ular orasiga teg identifikatori (nomi,
masalan B ) yoki uning atributlari yoziladi. Yagona istisno bu murakkab
chegaralovchilar (<!-- va -->) yordamida belgilanuvchi sharxlovchi teglardir.
Aksariyat teglar jufti bilan ishlatiladi. Ochuvchi tegning jufti yopuvchi teg. Ikkala
juft teg faqatgina yopuvchi teg oldidan «slesh» (“/”) belgisi qo’yilishini hisobga
olmaganda, deyarli bir xil yoziladi. Juft teglarning asosiy farqi shundaki, yopuvchi
teg parametrlardan foydalanmaydi. Juft teg yana konteyner deb ham ataladi. Juft
teglar orasiga kiruvchi barcha elementlar teg konteyneri tarkibi deyiladi. Yopuvchi
tegda zarur bulmagan bir qator teglar mavjud. Ba'zida yopuvchi teglar tushirib
qoldirilsa ham zamonaviy brauzerlar aksariyat hollarda hujjatni to’g’ri formatlaydi,
biroq buni amalda qo’llash tavsiya etilmaydi. Masalan, rasm qo’yish tegi <IMG>,
keyingi qatorga o’tish <BR>, baza shriftini ko’rsatish <BASEFONT> va boshqalar
o’zining </IMG>, </BR> va hokazo yopuvchi juftlarisiz yozilishi mumkin.
Noto’g’ri yozilgan tegni yoki uning parametri brauzer tomonidan rad kilinadi. (bu
brauzer tanimaydigan teglarga ham taalluqli). Masalan, <NOFRAME> teg-
konteyneri faqatgina freymlarni taniydigan brauzer tomonidan hisobga olinadi. Uni
tanimaydigan brauzer <NOFRAME> tegini tushunmaydi.

Teglar parametr va atribut larga (inglizcha. attribute ) ega bo’lishi mumkin.
Ruxsat etilgan parametrlar yig’indisi har-bir teg uchun individualdir. Parametrlar
quyidagi qoida asosida yoziladi:
Teg nomidan so’ng probellar bilan ajratilgan parametrlar kelishi mumkin;
Parametrlar ixtiyoriy tartibda keladi;
Parametrlar o’zining nomidan keyin keluvchi « = » belgisi orqali beriluvchi
qiymatlarga ega bo’lishi mumkin.
Odatda parametrlar qiymati « » - «qo’shtirnoq» ichida beriladi.
Parametr qiymatida ba'zan yozuv registri muhim.
Agar parametr mohiyatida probel ishtirok etgan bo’lsa, u holda qavs, albatta
yoziladi. Parametr mohiyatida (teg va parametrlar nomidan farqli ravishda) ba'zida
yozuv registri muhim bo’ladi. Tegning parametr bilan yozilishiga misol:
< TABLE BORDER ALIGN= “left”>
Bu erda <TABLE> tegi uchun ikkita parametr berilgan. Moxiyatsiz ko’rsatilgan
birinchi parametr BORDER. Ikkinchi parametr ALIGN left mohiyatiga ega.
Shuni esda tutish lozimki, hamma teglar o’zining individual parametriga ega
bo’lishiga qaramay, shunday bir qator parametrlar mavjudki, ularni <BODY>
bo’limining barcha teglarida ishlatish mumkin. Bu parametrlar CLASS, ID,
LANG, LANGUAGE, STYLE va TITLE lardir. Parametrlar CLASS, ID,
STILElar Internet Explorerning 3.0 versiyasidan boshlab va Netscapening 4.0
versiyasidan boshlab quvvatlanib keladi. Bu parametrlar uslub ( stil ) lardan
fodalanilganda kerak bo’ladi. Parametrlar LANG, LANGUAGE, TITLE lar faqat
Internet Explorerning 4.0 versiyasidan boshlab quvvatlanib keladi. Bu parametrlar
mos kelgan foydalanadigan tillarni ko’rsatadilar (masalan, Rossiya uchun
LANG=ru), skript yozish tilini (masalan, LANGUAGE=Java Script) va boshqalar.
Zamonaviy HTMLda til teglari va unda ko’rsatilgan qiymatlar bilan birga,
boshlang’ich HTML-kodda stsenariy kodlari (Java Script yoki VB Script) ham
yoziladi. Ular to’g’risida keyingi mavzularda batafsil so’z yuritamiz.
Keling, endi HTML – hujjat yozishni boshlashda ishlatiladigan teg to’g’risida so’z
yuritsak. HTML - hujjatini yozishni boshlashda ishlatiladigan birinchi teg bu
<HTML> tegidir. U har doim hujjat yozuvining boshida bo’lishi lozim.
Yakunlovchi teg esa </HTML> shakliga ega bo’lishi kerak. Bu teglar, ular orasida
joylashgan yozuvning hammasi butun bir HTML-hujjatini anglatishi bildiradi.
Aslida esa hujjat oddiy matnli ASCII-faylidir. Bu teglarsiz brauzer hujjati
formatini aniqlab, tarjima qila olmaydi. Ko’pincha bu teg parametrga ega emas.
HTML 4.0 versiyasiga qadar VERSION parametri mavjud edi. HTML 4.0 da esa
VERSION o’rniga <!DOCTYPE> parametri paydo bo’ldi. Yodga olishimiz lozim,
1997 yil iyun oyida HTML–standartining 4.0 versiyasi e'lon qilindi va 1997 yil

dekabrida rasmiy standartga aylandi. Bugun bu qabul qilingan (yuqorida aytib
o’tganimizdek) standartlarning eng oxirgisidir.Umuman, HTML hujjat standart
hisoblanishi uchun yana prolog (muqaddima) ham kerak. Hujjatga qanday ishlov
berishiga qarab u o’rnatiladi. Prolog quyidagi ko’rinishga ega:
<!DOCTYPE HTML PUBLIC “-//W ЗС //DTD HTML<4.0//EN”>
Prolog bu maxsus ko’rinishga ega bo’lgan yolg’iz teg. Bu teg ochuvchi <HTML>
oldida HTML–hujjatning eng oldiga o’rnatiladi va HTML 4.0–spetsifikatsiyasiga
qat'iy mos kelgan holda rasmiylashtirilgan hujjat hisoblanadi.
HTML – hujjatga prologni o’rnatish–bu WZS talabidir, (Internetdagi ko’pchilik
HTML hujjatlarda prolog qo’yilmaydi).
HTML 4.0 spetsifikatsiyasida monitor ekranida taqdim etilgan ta'rifdan hujjat
strukturasi ta'rifini ajratish asosiy ( ключ e вой ) g’oyaga aylandi. Tajriba ko’rsatishi
bo’yicha hujjatning bu ikkala ta'rifini bir-biridan ajratish platforma, muhit va shu
kabilarni keng miqyosda quvvatlashga qilinadigan sarf-harajatlarni ancha
kamaytirar ekan, shu bilan birga hujjatlarga o’zgarishlar kiritishni osonlashtirar
ekan. Bu g’oyaga asosan, uslub ( стил ) jadvali yordamida, xujjatlarni taqdim qilish
usulidan ko’plab foydalanish maqsadga muvofiq keladi. HTML – standarti
to’g’risidagi rasmiy ma'lumotlarni W3C konsortsiumining–Web–saytidan quyidagi
adres bo’yicha olish mumkin:
http://www.W З .org/TR/
HTML ning asosiy teglari
HTML hujjatlari – bu matnli fayllar bo’lib, ularga belgilash teglari deb nomlangan
maxsus kodlar kiritilgan. Bu teglar Web-brauzerlarga matn va grafiklarni qanday
qilib sharhlash va aks ettirish lozimligini ko’rsatib turadi. HTML fayl – bu oddiy
matnli fayl. Shuning uchun uni istagan matn redaktorida, masalan MS Word yoki
oddiy «Bloknot»da yaratish mumkin. HTML sahifa nima? - bu oddiy text fayl
bo'lib, .html qisqartmasiga ega.
Eslatib o’tish joiz, hujjat yaratilgach, uni matn formatida saqlash kerak. Lekin, bu
ishni bajarishdan oldin uning kengaytmasini o’zgartirish, ya'ni TXT o’rniga HTML
yoki HTMni qo’yishni esdan chiqarmaslik kerak. HTML va HTM kengaytmasi
HTML fayl uchun standart hisoblanadi. Bundan tashqari, bu kengaytmalar
kompyuterga faylda matnlardan tashqari HTML kodlari ham mavjudligini
ko’rsatib turadi. HTML tili harflar razmeriga befarqdir, ya'ni bosh va kichik harflar
bir xil qabul qilinadi. Lekin teglarni yozishda ko’pincha bosh harflardan
foydalaniladi.
Bundan tashqari, HTML sahifani yaratish uchun maxsus dasturlarni qidirib topib,
sotib olish shart emas. Matn tahrirlovchi har qanday dastur orqali HTML sahifa
yaratish mumkin.

Masalan: Windows muxitidagi matn muxarrirlari:
Notepad , TextPad , UltraEdit , EdutPlus .
Ana shunday matn tahrirlovchi oddiy dasturlardan biri
bo'lgan Notepad ( Блокнот ), Windows muhitida ishlovchi har bir kompuytreda
mavjud. Ba'zi matn muxarrirlarida HTML hujjatni web brauzerda sinab ko’rish
tugmasi mavjud.
HTML xujjatni yaratishga mo’ljallangan maxsus dasturlar (HTML muxarrirlar)
ham mavjud: FrontPage , Adobe GoLive , Macromedia Dreamweaver , Nestcape
Composer . Muharrirlar 2 turga bo’linadi:
kod muxarrirlari;
WYSIWYG texnologiyasi (What You See Is What You Get – nimani ko’rsang
o’shani olasan) asosida ishlaydigan muharrirlar. Bu muharrirlar yordamida
foydalanuvchi HTML komandasi va elementlarini yozmaydi, oddiy matn
muxarrirlaridek matn yozadi, tasvirlarni kerakli joyga joylashtiradi, formatini
o’zgartiradi va h.k. xolos.
Web-sahifa ko’rinishi va aks ettirilayotgan axborotning qanaqaligidan qat'iy
nazar, HTML va WWW spetsifikatsiyasiga asosan har bir Web-sahifada ishtirok
etishi zarur bo’lgan quyidagi to’rtta teglar mavjud:
1. <HTML> brauzerga hujjat HTML tilida yozilganligi to’g’risida xabar beradi.
2. <HEAD> HTML–hujjatning kirish va bosh qismini belgilaydi.
3. <BODY> asosiy matn va axborotni belgilaydi.
4. <ADRESS> bu Web-sahifa to’g’risida ko’proq to’la-to’kis axborot olish uchun
kerak bo’ladigan elektron pochta manziliga ega.
Bu teglar Web-brauzerga HTML–hujjatning har xil qismlarini aniqlash uchun juda
zarurdir, lekin ular Web-sahifaning tashqi ko’rinishiga to’g’ridan-to’g’ri ta'sir
etmaydi. Ular HTMLga kiritilgan navbatdagi yangi ma'lumotlar uy sahifalarida
to’g’ri sharhlash, shu bilan birga barcha Web-brauzerlarda bir xil ko’rinishga ega
bo’lishi uchun juda zarurdir.
Demak, HTML tili andozasi bo`yicha hujjatga <HEAD> va <BODY> teglarini
kiritish tavsiya etiladi. Brauzer HTML hujjatni o`qiganida, ularning borligi hujjat
bo`limlarini aniq ko`rsatadi. Agar ular bo`lmasa ham brauzer HTML hujjatni
to`g`ri o`qiydi, lekin hujjat bo`limlari bir-biridan ajralib turmaydi.
Shunday qilib, to`g`ri tuzilgan HTML hujjat quyidagi tuzilishga ega:
<HEAD>
Sarlavhaga oid ma'lumot

</HEAD>
<BODY>
Hujjatning mazmuni
</BODY>
Bunda <HEAD>, </HEAD> orasida joylashgan sarlavhaga oid ma'lumot qismida
odatda foydalanuvchiga e'tiborsiz, lekin brauzer uchun lozim ma'lumot beriladi.
<BODY>, </BODY> orasiga esa to`laligicha uning operatorlari ketma-ketligi
joylashtiriladi.
Masalan , sizning Web-serveringizda barcha HTML - hujjatlarni ko’radigan va
ularning ro’yxatini tuzadigan dastur ishga tushirilgan. U <HEAD> teglari ichida
joylashgan matnlarni ko’radi, xolos (bu erda hujjatlar nomi ham joylashtirilgan
bo’ladi). Shunday qilib, agar uy sahifalarida <HEAD> va </HEAD> teglari
bo’lmasa, u holda u ro’yxatga kiritilmaydi. Anchagina nomi chiqqan Web-
serverlar – qidiruv vositalarining ko’pchiligi mana shunday ishlaydi. Ular
axborotlarni <HEAD> teglaridan oladi.
Yuqoridagi fikrlarga asoslangan holda Web-sahifada ishtirok etishi zarur bo’lgan
quyidagi to’rtta asosiy teglar ni tavsiflashga harakat qilamiz.
<HTML> va </HTML> teglari
Bu teglar brauzerlarga ular orasidagi matnni xuddi HTML matni kabi sharhlash
(izohlash) zarurligi to’g’risida xabar beradi, chunki HTML-hujjatlari faqat
matnlidir. <HTML> teg esa, faylning gipermatn bog’lanish tilida yozilganligini
bildirib turadi.
<HEAD> va </HEAD> teglari
Bu teglar Web-sahifalar nomlarini belgilaydi. Buning uchun <HEAD> va
</HEAD> teglar orasida Web-sahifa nomi kiritiladi. Ya`ni HEAD bo’limi sarlavha
hisoblanadi va u majburiy teg emas, biroq mukammal tuzilgan sarlavha juda ham
foydali bo’lishi mumkin. Sarlavha qismining maqsadi hujjatni tarjima qilayotgan
dastur uchun mos axborotni etkazib berishdan iborat. Hujjat nomini ko’rsatuvchi
<TITLE> tegidan tashqari bu bo’limning qolgan barcha teglari ekranda aks
ettirilmaydi. Odatda <HEAD> tegi darhol <HTML> tegidan keyin keladi.
<TITLE> tegi sarlavhaning tegidir, va hujjatga nom berish uchun hizmat kiladi.
Hujjat nomi <TITLE> va </TITLE> teglar orasidagi matn qatoridan iborat. Bu
nom barauzer oynasining sarlavhasida paydo bo’ladi (bunda sarlavha nomi 60
belgidan ko’p bo’lmasligi lozim). O’zgartirilmagan holda bu matn hujjatga
«zakladka» ( bookmark ) berilganda ishlatiladi. Hujjat nomi uning tarkibini
qisqacha ta'riflashi lozim. Bunda umumiy ma'noga ega bo’lgan nomlar
(masalan, Homepage , Index va boshqalar) ni ishlatmaslik lozim. Hujjat
ochilayotganda birinchi bo’lib uning nomi aks ettirilishi, so’ngra esa hujjat asosiy
tarkibi ko’p vaqt olib, kengayib ketishi mumkin bo’lgan formatlash bilan birga
yuklanishini hisobga olgan holda, foydalanuvchi xech bulmaganda ushbu axborot

qatorini o’qiy olishi uchun hujjatning nomi berilishi lozim.
*. Har bir HTML hujjat faqatgina bitta nomga (sarlavhaga) ega bo’ladi. So’ngra
uning oldi va orqa tomonlarini <TITLE> va </TITLE> teglari bilan belgilang.
U, odatda brauzer darchasi sarlavhasida ko’rsatiladi. Konteyner <TITLE> tegini
hujjat faylining nomi bilan adashtirmaslik kerak. Aksincha u fayl nomi va
manziliga butunlay bog’liq bo’lmagan matn satridir. Fayl nomi kompyuterning
operatsion tizimi (OT) orqali qat'iy ravishda aniqlanadi. Shu bilan birga, hujjatlar
nomi (teg <TITLE> bilan birga) ni hujjat ichidagi ko’pincha <H> teglari bilan
joylashadigan sarlavhalardan farqlash kerak bo’ladi.
 <BODY> va </BODY> teglari
<BODY> va </BODY> teglari <HEAD> kabi HTML hujjatning maxsus
qismlarini belgilashda ishlatiladi. <BODY> teglari egallab olgan matn hujjatning
asosiy qismi hisoblanadi. Matnning katta qismi va boshqa axborotlar ham uning
tarkibiga kiritiladi. Quyida <BODY> tegining bir qator parametrlarini keltiramiz.
< BODY > tegi parametrlari:
А LINK – faol murojaat ( ссылка ) ning rangini belgilaydi.
BACKGROUND – fondagi tasvir sifatida foydalaniluvchi tasvirni belgilaydi.
URL - manzilini belgilaydi.
BOTTOMMARGIN – hujjatning quyi chegaralarini piksellarda belgilaydi.
BGCOLOR – hujjat fonining ranglarini belgilaydi.
BGPROPERTIES –agar FIXED qiymati o’rnatilmagan bo’lsa, fon tasviri
aylantirilmaydi.
LEFTMARGIN – chap chegaralarni piksellarda belgilaydi.
LINK – xali ko’rib chiqilmagan ssilkaning ranggini belgilaydi.
RIGHTMARGIN – hujjat o’ng chegarasini piksellarda o’rnatadi.
SCROOL – brauzer darchalari xarakatlantirish (prokrutka) yo’laklarini o’rnatadi.
TEXT – matn rangini aniqlaydi.
TOPMARGIN – yuqori chegarasini piksellarda o’rnatadi.
VLINK – ishlatilgan murojaat rangini belgilaydi.
BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN va TOPMARGIN
pametrlari matn chegarasi va darcha chetlari orasidagi masofani piksellarda
belgilaydi.
<ADDRESS> va </ADDRESS> teglari
Bu teglar mazkur sahifaga nisbatan kimdadir savol yoki fikr tug’ilib qolgan
taqdirda kimga murojaat qilish kerakligi to’g’risidagi axborotlarni o’z ichiga oladi.
<ADDRESS> teglari bu axborotlarni asosiy blokdan ajratib olish uchun
ishlatiladi. Uy sahifasi ga bu teglarni kiritish uchun quyidagi qadamlarni bajaring:
1. <BODY> va </BODY> teglari orasida ismingizni va elektron pochta adresini
tering.
2. So’ngra ismingiz va adresingizga <ADDRESS> tegini kiriting.

3. Ism (nom) va adresdan so’ng, yopuvchi </ADRESS> tegni kiriting.
Endi Web-sahifani (misol tariqasida) ko’rib chiqamiz:
<HTML>
<HEAD>
<TITLE> Web-sahifa misoli </TITLE>
</HEAD>
<BODY>
<H1> bizning Web-sahifamiz </H1>
<P> bu Web-sahifa Web-dizayner bo’lishi mumkinligini namoyish qilish
maqsadida yaratilgandir. Buning uchun Web-serverga sozlanishi qiyin dastur talab
qilinmaydi. Bunda sizning operatsion tizimingiz muvaffaqiyat bilan uning o’rnini
bosa oladi. </P>
</BODY>
</HTML>
Bu erda terminologiya to’g’risida biroz oldindan kelishib olishimiz kerak. HTML–
hujjatda xato bo’lsa, lekin baribir brauzer tomonidan chidab bo’larli darajada
ko’rsatilsa, bunday hujjatni yaxshi rasmiylashtirilgan hujjat deyiladi. Aksincha,
rasmiylashtirishda xatosi bo’lmagan HTML hujjat standart hujjat deyiladi.
Sahifamiz kodiga yana bir bor nigoh tashlaymiz. Barcha HTML hujjat juft teglar
– <HTML> va </HTML> ichida joylashganligi ma'lum bo’ladi. Bu standart
HTML–hujjatlarni rasmiylashtirishning birinchi qoidasidir . Ikkinchi
qoida bo’yicha HTML–hujjat ikkita bir-biriga teng bo’lmagan sektsiyaga
bo’lingan bo’ladi.
Birinchi (kichik) sektsiya – bu HTML sarlavha. HTML sarlavha juft teglar –
<HELD> va </HEAD> bilan ajralib turadi. U brauzer darchasida aks etmaydi,
lekin brauzer o’z ehtiyojlari uchun foydalanadigan xizmat axborotlarini o’z ichiga
oladi.
Ikkinchi (katta) sektsiya – bu hujjat jismi deb ataladigan shaxsiy hujjat. Xuddi
mana shu hujjat jismi brauzer darchasida aks ettiriladi. Jism juft teglar – <BODY>
va </BODY> bilan ajralib turadi. Bu erdan standart HTML hujjatlarni
rasmiylashtirishning ikkinchi qoidasi kelib chiqadi: har bir hujjatda HTML
sarlavha va test gipermurojaatlari ( ссылка ) bo’lishi va bu ikkala sektsiyalar to’g’ri
rasmiylashtirilgan bo’lishli shart.
<BODY> tegida matn va fon rangi to’g’risidagi axborot mavjud bo’lishi mumkin.
Buning uchun chap teg formatini ozgina o’zgartirish kerak bo’ladi.
Masalan: <BODY BGCOLOR=“FFFFOO” TEXT=“ ОООООО ”>.
Bu erda BGCOLOR parametri fon rangini, TEXT esa matn rangini aniqlab
beradi. Bu misolda fon uchun sariq , matn uchun qora ranglar tanlangan.
Misollar:
1. <BODY TEXT = “#000000”> yoki <BODY TEXT = black>
2. <BODY BGCOLOR = “#ffffff”> yoki <BODY BGCOLOR = WHITE>
3. <BODY LINK = “#ff0000”> yoki <BODY LINK = RED>

4. <BODY LINK = “#ooFFFF” ALINK = “#800080”> yoki <BODY VLINK =
Aqua ALINK = PURPLE>
Misol:
<HTML>
<HEAD>
<TITLE> - sahifa fonini berish misoli </TITLE>
</HEAD>
<BODY BGCOLOR=YELLOW TEXT=BLACK LINK=RED VLINK=PURPLE
ALINK=GREEN >
</BODY>
</HTML>
HTML tilida ranglar
HTML tilida ranglar o’n oltilik kodining raqamlari bilan aniqlanadi. Ranglar
sistemasi quyidagi uchta asosiy ranglardan iborat, ya'ni qizil, barg rang va ko’k va
ular RGB ( Red Green Blue ) deb belgilanadi. Har bir rang
uchun OO dan FF gacha bo’lgan oraliqdagi o’n oltilik qiymatlari beriladi.
Ular 0 - 255 diapazonidagi o’nlik sanoq sistemasiga mos keladi. So’ngra, bu
qiymatlar oldiga # (reshotka) simvoli qo’yib yoziladigan bitta son (raqam)ga
birlashtiriladi.
Masalan: # 800080 soni binafsha rang bilan belgilanadi.
Brouzerlarning oldingi versiyasi faqatgina 16 ta standart ranglarni qabul qilishgan
bo’lsa, zamonaviy versiyalari esa, 140 ta ranglar nomi qabul qilingan.

1.3 Css haqida tushuncha
CSS, NIMA O’ZI U? CSS bu stillar bilan ishlay oladigan kaskadli stillar
majmuasidir. Web sahifalarga har xil stillar berish uchun ishlatiladi. HTML xujjat
ichida teglar bilan birga foydalaniladi. CSS kodlarini kompilyastiya qilish uchun
qandaydir kompillyatorlar, qandaydir dasturlar, va bu kod tushuna oladigan
qandaydir redaktorlar kerak bo’lmaydi. Bu kodlarni HTML singari web
brauzerning o’zi kompilyastiya qiladi va natijani chiqarib beradi.
Bu stillar jadvali(CSS) to’liq holatda 1997 yilda tashkil topib, “WWW
Consorcium” ida qo’llab quvvatlangan va foydalanishga taqdim etilgan. O’sha
paytlarda HTML ning 3 versiyasi ommabop edi. CSS ni dastlab Netscape
Navigator 4.0 va Internet Explorer 4.0 brouzerlarida ko’rish mumkin bo’lgan.
Hozirda barcha brouzerlar css da yozilgan kodlarni tushuna oladi. Bu stillarga oid
dasturlash tilini o’rganish sodda bo’lib, yangi stillar qo’shilishi natijasida kengayib
bormoqda.
CSS ni HTML xujjati ichida ishlatilishini birin ketin ko’rib o’tamiz:
Web sahifada ishlatiladigan CSS kodlari orqali hosil qilinadigan stillarni
hammasini bitta faylga yozib, uni serverda saqlaymiz. So’ng, sahifadan, serverdagi
saqlab qo’yilgan faylga murojaat qilib, kerakli stilni olamiz. Bu usul katta
hajmdagi web sahifalar yaratishda foydali hisoblanadi. Faylga murojaat,
<head> tegi ichida amalga oshiriladi va quyidagi ko’rinishga ega bo’ladi.

<LINK REL=STYLESHEET TYPE=»text/css» HREF=»URL»>
<link> tegi sahifa biror faylga murojaatni amalga oshirmoqda degani, REL – fayl
qandaydir stillardan iborat degani, TYPE — stillar css kodlaridan iborat va fayl
joylashgan manzil yoziladi.
CSS kodlar veb sahifa ichidagi <head> tegi orasida beriladi. Bunda yaratilgan
stillar shu sahifaga tegishli bo’ladi, bu degani faqat shu sahifada ishlatilish
mumkindir.
<head>< STYLE TYPE=»text/css»>
<!—
A {text-decoration:none; }
—>
</—STYLE></head>
Navbatdagi turi, bu har bir element uchun alohida teg ichida stil berib chiqishdan
iborat. Misol uchun, “p” tegi ichida biror matn yozilsa, shu matn uchun teg ichida
alohida stil beriladi va bu stil shu teg uchun xususiy bo’ladi. Bu usuldan
foydalanishni maslahat bermiman, chunki bu usul kodlarni chalkash va tushunarsiz
bo’lishiga olib keladi. Shoshilinch vaziyatlarda yoki stil qay tartibda namoyon
bo’lishni ko’rib olish uchun bu usuldan foydalanishni maslahat beraman.
Undan tashqari <style> tegi orqali css faylni import qilish mumkin bo’ladi.
@import: url(mystyles.css);
CSS stillarini ishlatishda, quyidagi guruhlash usullaridan foydalanish, tartibli web
sahifa tuzishga olib keladi:
— Kodlarni ixchamlash uchun, xar hil elementlar uchun bir hil tipdagi stillarni
guruhlab ishlatish maqsadga muvofiqdir.

H1 {font-family: Verdana}
H2 {font-family: Verdana}
Yuqoridagi stilni guruhlab quyidagicha yozamiz.
H1, H2 {font-family: Verdana}
— Guruhlashda bir hil element uchun bir necha stillarni birlashtirish mumkin.
H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
Barcha stillarni bittaga yi ғ amiz.
H2 {font-weight: bold; font-size: 14pt; font-family: Verdana;}
— Ba’zi stillar bitta stil ichida berilishi ham mumkin.
H2 {font: bold 14pt Verdana }
CSS stillari bilan ishlaganda, element ichidagi elementlar ham o’zidan yuqori
turgan element stilini qabul qiladi, ya’ni o’zidan oldingi element ”ota” vazifasini
bajaradi va o’z “farzandlari”ga ham o’zida borini beradi. Misol uchun, <p> tegi
ichidagi matn ko’k rangda yozilishi lozim bo’lsa(P {color: blue}), <p> tegi
ichidagi <em> tegiga tegishli bo’lgan matn ham ko’k rangda yoziladi.
Ba’zi stillar faqat yakka tartibda ishlaydi, ya’ni ichki teglarga stillari
o’tmaydi(misol uchun, background), shuning uchun barcha stillarni birma bir
ishlatib, o’rganib olish lozim. <body> tegiga stil berib, dastlabki o’rnatilish(po
umolchaniyu) jarayonini hosil qilish mumkin. Shunda biror elementga stil berish
esdan chiqib qolsa, <body> tegida ta’luqli stil esdan chiqgan elementga o’rnatiladi.

BODY {color: green;
font-family: «Verdana»;
background: url(joke.gif) white; }
SELEKTOR, KLASS, IDENTIFIKATOR TUSHUNCHASI
Oldingi maqolamizda CSS haqida ma’lumot berishga harakat qildim. Endi
chuqurroq (chuqurroq qaziganimiz uchun)o‘rganishni boshlaymiz. Bu maqolada,
CSS ga tegishli 3 ta yangi terminni o‘rganib chiqamiz: selektor, klass,
identifikator.
Selektor.
CSS da selektor vazifasini HTML teglar bajaradi. Veb sahifadagi barcha bir hil
tipdagi teglarga(selektorlarga) umumiy stil beramiz. Misol uchun saytdagi barcha
“ ссылка ”larning tegiga chizishni olib tashlaymiz(sizga ma’lumki, “ ссылка ” larga
stil berilmasa odatiy tegiga chizilgan holatda qoladi).
1
2
3 <STYLE TYPE="text/css">
A {text-decoration:none; }
</STYLE>

Klass.
Agar bizga, kod ichida foydalaniladigan bir xil teglarga har xil stillarni
o‘rnatishimiz lozim bo‘lsa, klass yoki identifikatorlardan foydalanish juda qulay
hisoblanadi. Dastlab klass haqida to‘xtalib o‘tamiz. Bir xil elementlarga har xil stil
berish uchun, element nomi va nuqta(.) qo‘yib, stilga biror nom beramiz. So‘ng
shu nomga tegishli bo‘ladigan stillar ketma-ketligini yozib chiqamiz. Shundan

so‘ng, kod ichida kerakli bo‘lgan joyda, class so‘zi yordamida o‘rnatilgan stil nomi
chaqiriladi.
Misol ko‘ramiz:
1
2
3
4
5
6 <head>
<style TYPE="text/css">
H1.rd {color:red;}
H1.be{color:red;background-color:blue;}
</style>
</head>

E’lon qilingan stilni kerakli joyda chaqiramiz.
1
2
3
4 <body>
<h1 class="rd">Qizil shrift</h1>
<h1 class="be">Ko'k fonda qizil shrift</h1>
</body>

Shu tariqa istalgan elementga istalgan stillarni o‘rnatish mumkin bo‘ladi.
YUqoridagi misolda faqat bitta element(H1) uchun stil yaratdik. Agar biz biror
stilni yaratib, uni istalgan element uchun ishlatmoqchi bo‘lsak, u holda yaratilgan
stilga element nomini qo‘ymasdan, faqatgina nuqta orqali stil uchun doimiy nom
beramiz va kerakli joyda chaqiramiz.

Amaliy qism
Biz mavzumizga mos holda web-sahifa tuzishni boshlaymiz. Bizga asosiy kerakli
bo’lgan dasturlash tillari HTML-5,CSS,BOOTSTRAP,JavaScript lar erak bo’ladi.
Biz ushbu tillar haqida yuqorida ma’lumot berib o’tdik.
HTML-5 yordamida saytni loyihalashtirishni boshlaymiz. Saytimiz quyidagi
qismlardan iborat:
1. Header
2. Article
3. Body
4. Footer
Biz ushbu qismlarda turli texnologiyalar , maxsulotlar , yangiliklar haqidagi
ma’lumotlar bilan to’ldiriladi.
Navigatsion menyu quyidagi menyu bilan tashkil topadi.
1. Home
2. Products
3. Technology
4. Pricing
5. Contact
Ushbu menyular uchun alohida fayllar hosil qilamiz va ularni loyihalaymiz.
Buning asosiy sababi bitta faylimizda chalkashlik yuzaga kelmasligi va ular uchun
alohida stillar berish uchun dasturchilar o’rtasida keng qo’llaniladi.
1-rasm Html sturkturasi
Biz Visual Studio muharriri yordamida html strukturasini yaratib oldik endi
yuqoridagi bo’limlarni hosil qilamiz.

2-rasm
Endi ularga kod yozishni boshlaymiz.
3-rasm
Article bo’limi kodini yozamiz

< article id = "content" >
< div class = "wrapper" >
< h2 > Yangi texnologiyalar </ h2 >
< div class = "wrapper" >
< section class = "col1" > < span
class = "dropcap1" >< span > a </ span ></ span >
< div class = "cols" >
< p class = "pad_bot1 color1" > Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Tempore, eius! </ p >
< p class = "pad_bot2" > Lorem ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, excepturi? </ p >
< a href = "#" class = "link1" > Ko'proq </ a > </ div >
</ section >
< section class = "col1 pad_left1" > < span class = "dropcap1" >< span
class = "color1" > b </ span ></ span >
< div class = "cols" >
< p class = "pad_bot1 color1" > Lorem ipsum dolor sit amet
consectetur adipisicing elit. </ p >
< p class = "pad_bot2" > Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nostrum, quas? </ p >
< a href = "#" class = "link1" > Ko'proq </ a > </ div >
</ section >
< section class = "col1 pad_left1" > < span class = "dropcap1" >< span
class = "color2" > c </ span ></ span >
< div class = "cols" >
< p class = "pad_bot1 color1" > Lorem ipsum dolor sit amet. </ p >
< p class = "pad_bot2" >< a href = "index.html" class = "link2" > Home
page </ a > , < a href = "products.html" class = "link2" > Products Page </ a > , < a
href = "technology.html" class = "link2" > Technology </ a > , < a
href = "pricing.html" class = "link2" > Pricing </ a > , < a href = "contact.html"
class = "link2" > Contact Us </ a > (note that contact us form – doesn’t
work). </ p >
< a href = "#" class = "link1" > Ko'proq </ a > </ div >
</ section >
</ div >
</ div >
</ article >
4-rasm
Footer qismi kodini tuzamiz
< footer >
< div class = "wrapper" >
< section class = "col2" >
< div class = "wrapper" >
< section class = "col4" >
< h3 > Bizga qo'shiling! </ h3 >
< ul id = "icons" >

$< li >< a href = "#" >< img src = "images/icon1.jpg" alt = "" >< span > Facebook </ span ></ a ></ li > < li >< a href = "#" >< img src = "images/icon2.jpg" alt = "" >< span > Twitter </ span ></ a ></ li > < li >< a href = "#" >< img src = "images/icon3.jpg" alt = "" >< span > Linked In </ span ></ a ></ li > </ ul > </ section > < section class = "col4 pad_left1" > < h3 > Nima uchun biz... </ h3 > < ul id = "why_us" > < li >< a href = "#" > Birga ko'rib chiqish </ a ></ li > < li >< a href = "#" > Har bir inson xato bilan tug'iladi </ a ></ li > < li >< a href = "#" > Ayblovchilarning zavqi </ a ></ li > </ ul > </ section > </ div >  </ section > < section class = "col3 pad_left2" > < h3 > Email </ h3 > < form id = "ContactForm" action = "#" > < div > < div class = "wrapper" > < span > Ismingiz: </ span > < div class = "bg" > < input type = "text" class = "input" > </ div > </ div > < div class = "wrapper" > < span > E-mailingiz: </ span > < div class = "bg" > < input type = "text" class = "input" > </ div > </ div > < div class = "textarea_box" > < span > Xabar: </ span > < div class = "bg2" > < textarea name = "textarea" cols = "1" rows = "1" ></ textarea > </ div > </ div > < a href = "#" > Yuborish </ a > </ div > </ form > </ section > </ div >  </ footer > Saytimizning oddiy ko’rinishi tayyor va uning ko’rinishi quyidagicha:$ Css bilan ishlov berilmagani uchun saytimiz oddiy turibdi. Biz unga mos rasmlar
stillar berish orqali saytimizni boyitamiz.
Demak bizga style.css nomli fayl va uning tarkibi kerak bo’ladi.
Fayl va kodlarni hosil qilib oldik va saytimizni boyitishda davom etamiz.

Css bilan ishlov berilmagani uchun saytimiz oddiy turibdi. Biz unga mos rasmlar
stillar berish orqali saytimizni boyitamiz.
Demak bizga style.css nomli fayl va uning tarkibi kerak bo’ladi.
Fayl va kodlarni hosil qilib oldik va saytimizni boyitishda davom etamiz.

Shu yerda stilimiz o’z nihoyasiga yetdi va saytimiz quyidagi ko’rinishga keldi.

Mavzu: Qishloq xo’jaligi mahsulotlari haqida web sahifasini yarating va tizimga joylashtiring. Reja: I Kirish II Asosiy qism 1.1 Web sahifa haqida tushuncha 1.2 HTML ga kirish 1.3 Css haqida tushuncha III Amaliy qism 3.1 HTML yordamida sayt sturkturasini qurish 3.2 Css yordamida ishlov berish IV Xulosa V Foydalanilgan adabiyotlar

Kirish Kompyuter grafikasi tushunchasi hozirda keng qamrovli sohalarni o’z ichida mujassamlashtirib, bunda oddiy grafik chizishdan to real borliqdagi turli tasvirlarni hosil qilish, ularga zeb berish, dastur vositasi yordamida hatto tasvirga oid yangi loyihalarni yaratish ko’zda tutiladi. Kompyuter grafikasi keng tarqalib borayotgan dastur ta'minotidir, ya'ni kompyuter grafikasi mavjud va yangi yaratilayotgan dasturlarga tayanadi. Zamonaviy kompyuter texnolgiyasida kompyuter grafikasi bilan ishlash eng ommobop yo’nalishlardan biri bo’lib bormoqda. Hozirda bu yo’nalish bilan hatto professional rassom va dzaynerlar ham shug’ullanmoqda. Ma'lumki inson axborotni eshitish va sezish a'zolariga nisbatan ko’rish a'zolari orqali oladi. Ko’rgazmali axborotning o’zlashtirilishi oson bo`ladi. Inson tabiatining ana shu xususiyati grafik operatsion tizimlarda ishlatiladi. Ularda axborot grafik ob'ektlar: znachoklar (belgilar), oynalar va rasmlar ko’rinishida tasvirlanadi.

1.1 Web sahifa haqida tushuncha Intemetda axborotlami joylashtirish va ulami kompyuter ekranidagi ko‘rinishi qulay bo‘lishi uchun web- sahifalardan foydalaniladi. Web-sahifa (inglizcha - Web page) - bu HTML fayl kengaytmasiga ega bo‘lgan gipermatnli fayldir. Har xil web-sahifalarga tarqatilgan va o‘zaro bog‘langan hujjat gipermatn deyiladi. Unga matn, rasm, ovoz, video va animatsiya kabi ma’lumotlar joy lashtirish mumkin. Web-sahifada ma’lumotlar sahifa ko‘rinishida beriladi. Bu sahifalar, odatda, HTML hujjat, ya’ni HTML tilida yozilgan hujjat deb qaraladi. Bu holda yozilgan hujjatlami ko‘rish uchun maxsus dasturlar ishlatiladi. Bunday dasturlar Brauzer (ko‘ruvchi)lar deb ataladi. Windows muhitida standart ish- latiladigan Brauzer bu Internet Explorer hisoblanadi. Web-sayt (inglizcha - Website, web - o‘rgimchak to‘ri, site - joyi) - bu bir nechta web-sahifalarni kompyuter tarmog‘ida bitta manzilda birlashtirilgan fayllar to‘plamidir (Domen ga yoki IP ga ega bo‘ladi). Domen - bu biror-bir serverda joylashgan saytga olib boradigan manzildir Barcha web-saytlar qaysidir serverda joylashgan bo‘ladi. Aslida Siz hosting xizmatidan foydalanib, saytingiz ma’lumotlarini qaysidir ser- verga joylashtirganingizda saytingiz IP manzilga ega bo‘ladi. Masalan: 94.100.180.199. Agar domen bo‘lmaganida yaratilgan web-saytni yuklash uchun brauzerda 94.100.180.199 raqamlar yoziladi. Hosting - bu web-sayt uchun joy ajratib beruvchi xizmat turidir Odatda domen beruvchi kompaniyalarda ham hosting xizmati bo‘la- di. Hosting va domenni bir kompaniyadan yoki alohida kompaniyalardan ham olish mumkin. Web-saytlar uchun hosting beruvchi kompaniyalarda katta hajmdagi maxsus serverlar mavjud. Ular tinimsiz ishlab turish orqali web- saytlaming ishlashini ta’minlaydi. Web-dizayn - bu yaratiladigan web-saytlarga texnik ishlov berish va axborotlarni tizimli ravishda shakllantirishdir. Axborotlar bir-biri bilan gipermatnli bog‘lanishlar yordamida web-sahifalarga tarqatiladi. Bunday sahifalar birgalikda web-saytni tashkil etadi. Web-saytlar Intemetning yagona axborot oralig‘ida birlashadi. Bunda web-sayt va web-sahifalar o‘zaro har xil usullar bilan bog‘lanadi. Ushbu ya gona oraliq World Wide Web (butun dunyo o‘rgimchak to‘ri) yoki qisqacha WWW deyiladi. Web-sahifalarga gipermurojaat WWW ning asosiy xusu- siyatlaridan biridir. Istalgan bir hujjatdan boshqa bir WWW hujjatga HTML ning maxsus teglari yordamida murojaat qilinadi. Intemetda ishlagan vaqtin- gizda siz web-sahifalarda gipermatnli murojaatlarga duch kelasiz. Bu matn fragmentlari ko‘k shriftda va tagi chizilgan bo‘ladi. Agar siz ushbu yozuv- ni sichqoncha tugmasi yordamida bossangiz, u avtomatik ravishda boshqa web-sahifaga murojaat qiladi. Dastlab web-sayt yaratish uchun faqat HTML tilini yaxshi o‘zlashtir- gan mutaxassislar tomonidan amalga oshirilgan. Ushbu muammoni hal etish maqsadida, turli xil axborot texnologiyalari sohasidagi kompaniyalar tomo- nidan zamonaviy dasturiy vositalar yaratilgan. Ushbu dasturiy vositalardan foydalanib web-sayt yaratishning barcha bosqichlari HTML tili kodiga ta- yangan holda amalga oshirilgan. Biroq, HTML tilining barcha afzalliklariga qaramasdan, web-saytni boshqarish, vaqt o‘tgan sayin yangi ma’lumotlami qo‘shishda bir qancha qiyinchiliklarga duch kelindi. Ushbu qiyinchiliklami bartaraf etish maqsadida yangi dasturiy ta’minot yaratish ishlarini boshlashga ehtiyoj sezildi. Bu dasturiy ta’minotlar kontentni (ma’lumotlami) boshqarish tizimlari (CMS - Content Management System) deb ataladi. Ayni paytda web-sayt yaratishni ikki xil usulda amalga oshirish mumkin: statik va dinamik. HTML da yozilgan web-saytlar statik holda bo‘Isa, zamo naviy web-saytlar dinamik ko‘rinishga ega. CMS

tizimlarming asosiy afzallik jihati shundaki, dinamik web-saytlami oson yarata olish va ulami turli xil axborotlar bilau to‘ldirish imkoniyati mav jud. Bugungi kunda, CMS asosida qurilgan Drupal, PHP-Nuke, WebDirector, NetCat, Slaed, Microsoft CMS, WordPress, PHPShop kabi platformalami misol tariqasida aytish mumkin. Quyida 0‘zbekiston Respublikasi Xalq ta’limi vazirligining web-saytini asosiy sahifasidan lavha keltirilgan (uzedu.uz): Web-sahifalar yaratishning asosi sifatida tasviriy san’atning yangi turi web-dizaynga bevosita aloqadordir. Internet dizaynerlari rasm va tasvirlar tayyorlash bilan cheklanib qolmasdan, balki tayyorlangan rasm va tasvirlami tarmoqqa joylashtirish, web-sahifalar orasida aloqalar o‘matish, matn, tasvir va rasmlaming harakatini amalga oshirish, ranglami estetik jihatdan to‘g‘ri va chiroyli tanlashga e’tibor qaratilishi va rasmlaming harakatini amalga oshirish, ranglami estetik jihatdan to‘g‘ri va chiroyli tanlashga e’tibor qaratilishi lozim.

1.2 HTML ga kirish Butun dunyo o’rgimchagi to’ri – World Wide Web (WWW) HTML gipermatn bog’lanish tili yordamida tuzilgan Web-sahifalardan iborat HTML ancha murakkab til ( Standart Generalived Marnup Language ) SGML ning hisoblanadi. Ananaviy tushuncha bo’yicha HTML butunlay dasturlash tili hisoblanmaydi. HTML–hujjatni belgilash tili. HTML–hujjatni tadqiq qilishda matnli hujjatlar teg(tag)lar bilan belgilanadi. Ular maxsus burchakli ishoralar bilan o’rlagan bo’ladi, (< va >). Teglar matnlarni formatlashda va matnga har xil nomatn elementlarni masalan, grafiklar, qo’shimcha ob'ektlar va shu kabilarni o’rnatishda ishlatiladi. HTML tilining asosiy qoidalari quyidagicha: 1 - qoida . HTMLdagi istalgan harakat teglar bilan aniqlanadi. Bitta teg (chap) harakatning bosh qismida, ikkinchisi esa, (o’ng) oxirida turadi. Bunda teglar « < » yoki « > » ishoralar bilan yonma-yon turadi. Yolg’iz o’zi ishlatiladigan teglar ham mavjud. 2 - qoida . Brauzer darchasidagi burchakli qavs ichiga joylashtirilgan istagan teg yoki boshqa instruktsiya tashqariga chiqarilmaydi va HTML–fayl uchun ichki buyruq hisoblanadi. Demak, WWW sistemasidan qandaydir hujjat yoki xabar olsangiz, ekranda yaxshi formatlangan, o`qish uchun qulay matn paydo bo`lganini ko`rasiz. Bu shuni anglatadiki, WWW hujjatlarida qandaydir ma'lumotlarni ekranda boshqarish imkoniyati ham mavjud. Hujjatlar tayyor, siz foydalanuvchiningqaysi kompyuterda ishlashini bilmaysiz, hujjatlar aniq bir kompyuter platformalariga mo`ljallangan yoki qaysidir format bilan saqlanishini oldindan ayta olmaysiz. Kompyuterda ishlayotgan foydalanuvchi qaysi terminalda ishlashidan qat'iy nazar, yaxshi formatlangan hujjatni olish kerak. Bu muammoni HTML andoza tili hal qiladi. HTML ( Hyper Text Markup Language - gipermatn belgilash tili ). WWW sistemasi uchun hujjat tayyorlashda ishlatiladi. HTML hujjatning tuzilishini ifodalovchi uncha murakkab bo`lmagan buyruqlar majmuidan iborat. HTML buyruqlari orqali matnlarni istagancha shaklini o`zgartirish, ya'ni matnning ma'lum bir qismini ajratib olib boshqa faylga yozish, shuningdek boshqa joydan turli xil rangli tasvirlarni qo`yish mumkin. U boshqa hujjatlar bilan bog`laydigan gipermatnli aloqalarga ega. 90 -yillarning o’rtalarida internet tarmog’ining eksponentsial o’sishi oqibatida HTML tili ommaviy tus oldi. Bu vaqtga kelib, tilni standartizatsiyalash zarurati tug’ildi, chunki ko’p kompaniyalar Internetga kirish uchun ko’plab dasturiy ta'minotlar ishlab chiqdilar, to’xtovsiz o’sib borayotgan (HTML instruktsiyasi bo’yicha) o’zlarini variantlarini tavsiya qildilar. HTML tili teglarini qo’llash bo’yicha yagona bir qarorga kelish payti yaqinlashgan edi. World Wide Web Consortium (qisqacha–WZS) deb nomlangan tashkilot HTML

O'xshashlar

QISHLOQ XO’JALIGI O’SIMLIKLARINING KARANTINI

Front Page dasturning asosiy oynalari, menyusi, komponentlari.

Dreamweaver web-sahifa yaratish

FrontPage dasturi yordamida Web-sahifalar yaratish

“Shifoxona” sodda elektron ilovasini yarating. Ilovada bemorlar ro’yxati, kasallik tarixi, shifokorlar haqida ma’lumotlar saqlansin. Ma’lumotni izlash, o’chirish, tahrirlash,