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

Цена 12000UZS
Размер 1.4MB
Покупки 0
Дата загрузки 07 Ноябрь 2026
Расширение docx
Раздел Дипломные работы
Предмет Информатика и ИТ

Продавец

Bohodir Jalolov

Qishloq xo‘jaligi mahsulotlari haqida web sahifasini yarating va tizimga joylashtiring

Купить
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 >         <!-- <div id="footer_link">Copyright &copy; <a href="#">Domain Name</a> All Rights Reserved<br>           Design by <a target="_blank" href="http://www.templatemonster.com/">TemplateMonster.com</a></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_LINK} -->   </ 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. Shu yerda stilimiz o’z nihoyasiga yetdi va saytimiz quyidagi ko’rinishga keldi. Saytimiz tayyor bo’ldi.

Qishloq xo‘jaligi mahsulotlari haqida web sahifasini yarating va tizimga joylashtiring

Купить