O’ZBEKISTON RESPUBLIKASI AXBOROT TEXNOLOGIYALARI VA
KOMMUNIKATSIYALARINI RIVOJLANTIRISH VAZIRLIGI
MUHAMMAD AL- XORAZMIY NOMIDAGI TOSHKENT AXBOROT
TEXNOLOGIYALARI UNIVERSITETI
Web dasturlash fanidan
Yakuniy nazorat ishi
Bajardi: WEB024-guruh talabasi
Rashidov Ural
Toshkent 2020
Rashidov Ural Utkir o’g’li WEB024-guruh talabasi 38-variant
Variant №38
1. HTML теглари ва уларнинг турлари. Изоҳланг ва мисоллар келтиринг.
2. CSS ранг хусусиятлари. Орқа фон, матн, чегарага ранг бериш. Изоҳланг
ва мисоллар келтиринг.
3. YII2 фреймворк структураси.
1. HTML теглари ва уларнинг турлари. Изоҳланг ва мисоллар келтиринг.
Teglar 3 turga ajratiladi:
•
Juft teglar (Yopiq teglar)
•
Juft bo’lmagan teglar (Ochiq teglar)
•
Maxsus teglar
atribut1="value1“
atribut2="value2">
Content text
Juft teglar ochilganidan keyin doim yopilishi shart;
Juft teg ochilganda ko’rinishda, yopilganda esa
ko’rinishida bo’ladi.
Masalan:
Juft bo’lmagan teglarda yopuvchi teg bo’lmaydi.
Masalan:
Maxsus teglar ASCII maxsus belgilarini ifodalashga xizmat qiladi. Ularni ifodalash
& belgisi bilan boshlanadi:
&nomi; // bu yerda maxsus belgi nomi yoziladi
&#raqami; // bu yerda belgining 16 lik yoki 10 lik sanoq tizimidagi kodi
yoziladi.
Yuqoridagi fikrlarga asoslangan holda Web-sahifada ishtirok etishi zarur bo’lgan
quyidagi to’rtta asosiy teglarni tavsiflashga harakat qilamiz.
va teglari
Bu teglar brauzerlarga ular orasidagi matnni xuddi HTML matni kabi sharhlash
(izohlash) zarurligi to’g’risida xabar beradi, chunki HTML-hujjatlari faqat matnlidir.
teg esa, faylning gipermatn bog’lanish tilida yozilganligini bildirib turadi.
va teglari
Bu teglar Web-sahifalar nomlarini belgilaydi. Buning uchun
va
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
tegidan </p>
<p>tashqari bu bo’limning qolgan barcha teglari ekranda aks ettirilmaydi. Odatda
<br />
<br /><HEAD> tegi darhol <HTML> tegidan keyin keladi. <TITLE> tegi sarlavhaning
</p>
<p>tegidir, va hujjatga nom berish uchun hizmat kiladi. Hujjat nomi <TITLE> va </p>
<br />
<br /> 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
va teglari bilan belgilang.
U, odatda brauzer darchasi sarlavhasida ko’rsatiladi. Konteyner
tegini </p>
<p>hujjat faylining nomi bilan adashtirmaslik kerak. Aksincha u fayl nomi va manziliga
</p>
<p>butunlay bog’liq bo’lmagan matn satridir. Fayl nomi kompyuterning operatsion </p>
<p>tizimi (OT) orqali qat'iy ravishda aniqlanadi. Shu bilan birga, hujjatlar nomi (teg
<br />
<br /><TITLE> bilan birga) ni hujjat ichidagi ko’pincha <H> teglari bilan joylashadigan
</p>
<p>sarlavhalardan farqlash kerak bo’ladi. </p>
<p>
<p>
<br />
<br /><b><body> va va teglari egallab olgan matn hujjatning asosiy qismi </p>
<br />
<br />hisoblanadi. Matnning katta qismi va boshqa axborotlar ham uning tarkibiga
</p>
<p>kiritiladi. Quyida <body> tegining bir qator parametrlarini keltiramiz. </p>
<br />
<br /><<b>BODY</b>>
<p>tegi
<br /></p>
<br />parametrlari:
<br />
<br /><b>АLINK</b> –
<p>faol
<br /></p>
<br />murojaat
<p>(ссылка) </p>
<p>ning
<p>rangini
<br /></p>
<br />belgilaydi.
<br />
<br /><b>BACKGROUND</b> – fondagi tasvir sifatida foydalaniluvchi tasvirni belgilaydi.
<br />
<br /><b>URL</b> -
</p>
<p>manzilini </p>
<p>belgilaydi.
<br />
<br /><b>BOTTOMMARGIN</b> – hujjatning quyi chegaralarini piksellarda belgilaydi.
<br />
<br /><b><span id='BGCOLOR'>BGCOLOR</span></b> –
</p>
<p>hujjat
<br /></p>
<br />fonining
<p>ranglarini </p>
<p>belgilaydi.
<br />
<br /><b>BGPROPERTIES</b> –agar FIXED qiymati o’rnatilmagan bo’lsa, fon tasviri
</p>
<p>aylantirilmaydi. </p>
<br />
<br /><b>LEFTMARGIN </b>–
<p>chap
<br /></p>
<br />chegaralarni
<p>piksellarda </p>
<p>belgilaydi.
<br />
<br /><b>LINK</b> –
</p>
<p>xali
<br /></p>
<br />ko’rib
<p>chiqilmagan </p>
<p>ssilkaning
</p>
<p>ranggini </p>
<p>belgilaydi.
<br />
<br /><b>RIGHTMARGIN</b> –
</p>
<p>hujjat
<br /></p>
<br />o’ng
<p>chegarasini </p>
<p>piksellarda
</p>
<p>o’rnatadi. </p>
<br /></div> <style type="text/css"> </style> <div id="page6-div" >
<br /><b><span id='SCROOL'>SCROOL</span></b> – brauzer darchalari xarakatlantirish (prokrutka) yo’laklarini o’rnatadi.
<br />
<br /><b>TEXT</b> –
<p>matn
<br /></p>
<br />rangini
<p>aniqlaydi. </p>
<br />
<br /><b>TOPMARGIN</b> –
<p>yuqori
<br /></p>
<br />chegarasini
<p>piksellarda </p>
<p>o’rnatadi.
<br />
<br /><b>VLINK</b> –
</p>
<p>ishlatilgan </p>
<p>murojaat
</p>
<p>rangini
<br /></p>
<br />belgilaydi.
<p>BOTTOMMARGIN, </p>
<p>LEFTMARGIN,
</p>
<p>RIGHTMARGIN </p>
<p>va
<p>TOPMARGIN </p>
<br />
<br />pametrlari matn chegarasi va darcha chetlari orasidagi masofani piksellarda
</p>
<p>belgilaydi. </p>
<p>Misol teglarga
</p>
<p>
<br /></div> <style type="text/css"> </style> <div id="page7-div" > </p>
<br />
<p>
<p> </p>
<br />
<br /><b><span id='2._CSS_ранг_хусусиятлари._Орқа_фон,_матн,_чегарага_ранг_бериш._Изоҳланг__ва_мисоллар_келтиринг.'>2. CSS ранг хусусиятлари. Орқа фон, матн, чегарага ранг бериш. Изоҳланг </span></b>
<br />
<br /><b>ва мисоллар келтиринг.</b>
</p>
<p> CSS / HTML 140 standart rang nomlarini qo'llab-</p>
<p>quvvatlaydi.
</p>
<p>CSS orqali biz veb-sahifamizdagi orqa fonlarga, matnlarga, chegaralarga rang </p>
<p>berishimiz mumkin.
<br />
<br /><b>CSS orqa fon rangi </b>
</p>
<p>Siz HTML elementlari uchun fon rangini o'rnatishingiz mumkin: </p>
<p>Sintaksis:
<br />
<br /><
</p>
<p>h1
<p> style</p>
<br />
<br />="background-color:DodgerBlue;">
</p>
<p>Hello
<br /></p>
<br />World
<br />
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<br />
<br /><</p>
<p>p
<p> style
<br /></p>
<br />="background-color:Tomato;">
</p>
<p>Lorem ipsum...</p>
<br />
<br /><
<p>/p
<p>> </p>
<br /></div> <style type="text/css"> </style> <div id="page8-div" >
<br />
<br />
<br /><b>CSS matn rangi </b>
</p>
<p>Matn rangini o'rnatishingiz mumkin: </p>
<p>Sintaksis:
<br />
<br /><
</p>
<p>h1
<p> style</p>
<br />
<br />="color:Tomato;">
</p>
<p>Hello
<br /></p>
<br />World
<br />
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<br />
<br /><</p>
<p>p
<p> style
<br /></p>
<br />="color:DodgerBlue;">
</p>
<p>Lorem
<br /></p>
<br />ipsum...
<br />
<br /><
<p>/p
<p>></p>
<br />
<br />
<br />
<br /><
</p>
<p>p
<p> style</p>
<br />
<br />="color:MediumSeaGreen;">
</p>
<p>Ut wisi enim...</p>
<br />
<br /><
<p>/p
<br /></p>
<br />
<br />
<br /><b>CSS chegara rangi</b>
<p>
<p>Siz chegara rangini o'rnatishingiz mumkin: </p>
<br />
<br />Sintaksis:
<br />
<br /><
</p>
<p>h1
<p> style</p>
<br />
<br />="border:2px
</p>
<p>solid
<br /></p>
<br />Tomato;">
<p>Hello
<br /></p>
<br />World
<br />
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<p> <</p>
<br />
<br />h1
</p>
<p> style
<br /></p>
<br />="border:2px
<p>solid
<br /></p>
<br />DodgerBlue;">
<p>Hello
<br /></p>
<br />World
<br />
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<p> <</p>
<br />
<br />h1
</p>
<p> style
<br /></p>
<br />="border:2px solid Violet;">
<p>Hello World</p>
<br />
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<br />
<br /><b> </b></p>
<br /></div> <style type="text/css"> </style> <div id="page9-div" >
<br /><b> </b>
<br />
<br /><b> </b>
<br />
<br /><b>CSS rang qiymatlari </b>
<p>CSS-da RGB qiymatlari, HEX qiymatlari, HSL qiymatlari, RGBA qiymatlari va </p>
<p>HSLA qiymatlari yordamida ranglar ham belgilanishi mumkin:
</p>
<p>Masalan: </p>
<br />
<br /><
<p>h1
<p> style</p>
<br />
<br />="background-color:rgb(255,
</p>
<p>99,
<br /></p>
<br />71);">
<p>...
<br /></p>
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<br />
<br /><</p>
<p>h1
<p> style
<br /></p>
<br />="background-color:#ff6347;">
</p>
<p>...
<br /></p>
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<br />
<br /><</p>
<p>h1
<p> style
<br /></p>
<br />="background-color:hsl(9, 100%, 64%);">
</p>
<p>...
<br /></p>
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<p> </p>
<br />
<br />"Tomato" rang qiymati, ammo 50% shaffof:
<br />
<br /><
</p>
<p>h1
<p> style</p>
<br />
<br />="background-color:rgba(255,
</p>
<p>99,
<br /></p>
<br />71,
<p>0.5);">
<br /></p>
<br />...
<br />
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<br />
<br /><</p>
<p>h1
<p> style
<br /></p>
<br />="background-color:hsla(9, 100%, 64%, 0.5);">
</p>
<p>...
<br /></p>
<br /><
<p>/h1
<br /></p>
<br />>
<p>
<p> </p>
<br /></div> <style type="text/css"> </style> <div id="page10-div" >
<br /><b>RGB rang xususiyati </b>
</p>
<p>CSS-da, bu formuladan foydalanib, rangni RGB qiymati sifatida ko'rsatish mumkin: </p>
<p>rgb (red, green, blue)
</p>
<p>Har bir parametr (red, green, blue) rangning intensivligini 0 dan 255 gacha aniqlaydi. </p>
<p>Masalan, rgb (255, 0, 0) qizil rang bilan ko'rsatiladi, chunki qizil eng yuqori
</p>
<p>qiymatiga (255), qolganlari 0 ga o'rnatiladi. </p>
<p>Qora rangni ko'rsatish uchun barcha rang parametrlarini 0 ga qo'ying, masalan: rgb
</p>
<p>(0, 0, 0). </p>
<p>Oqni ko'rsatish uchun barcha rang parametrlarini 255 ga o'rnating, masalan: rgb (255,
</p>
<p>255, 255). </p>
<p>Quyidagi RGB qiymatlarini aralashtirish orqali tajriba keltirilgan:
</p>
<p>
<br />
<br /><b> </b></p>
<br />
<br /><b>RGBA rang xususiyati</b>
<p>RGBA rang qiymatlari alfa-kanal bilan RGB rang qiymatlarining kengaytmasi bo'lib, </p>
<p>bu rangning shaffofligini belgilaydi.
</p>
<p>RGBA rang qiymati quyidagicha belgilanadi: </p>
<br /></div> <style type="text/css"> </style> <div id="page11-div" >
<br />rgba (red, green, blue)
<p>Alfa parametr - bu 0.0 (to'liq shaffof) va 1.0 (umuman shaffof emas) orasidagi raqam: </p>
<p>Quyidagi RGBA qiymatlarini aralashtirish orqali tajriba keltirilgan:
</p>
<p>
<p>Misol uchun. </p>
<br />
<br />
<br /></div> <style type="text/css"> </style> <div id="page12-div" >
<br />
</p>
<p>
<p> </p>
<br />
<br /><b><span id='3._YII2_фреймворк_структураси.'>3. YII2 фреймворк структураси.</span></b>
</p>
<p>
<p>kirish skriptlari</p>
<br />
<br /> : bu PHP skriptlar bo'lib,
</p>
<p>ularga oxirgi foydalanuvchilar to'g'ridan-to'g'ri kirishlari mumkin. Ular so'rovlarni </p>
<p>ko'rib chiqish tsiklini boshlash uchun javobgardir.
</p>
<p>
<p> </p>
<br />
<br />ilovalar
</p>
<p> : ular ilova tarkibiy qismlarini boshqaradigan va so'rovlarni bajarish </p>
<p>uchun ularni muvofiqlashtiradigan global darajadagi ob'ektlardir.
</p>
<p>
<p> </p>
<br />
<br />ilova komponentlari
</p>
<p> : ular ilovalar bilan ro'yxatdan o'tgan va so'rovlarni </p>
<p>bajarish uchun turli xil xizmatlarni taqdim etadigan ob'ektlardir.
</p>
<p>
<p> </p>
<br />
<br />modullar
</p>
<p> : ular o'z-o'zidan to'liq MVCni o'z ichiga olgan o'z-o'zidan ishlab </p>
<p>chiqarilgan paketlar. Ilovani bir nechta modullar nuqtai nazaridan tashkil qilish
</p>
<p>mumkin.
<br /></p>
<br />
<p>
<p>filtrlar</p>
<br />
<br /> : ular nazoratchilar tomonidan har bir so'rovni ko'rib chiqishdan oldin va
</p>
<p>keyin bajarilishi kerak bo'lgan kodni anglatadi. </p>
<p>
<p>
<br />
<br />widgets</p>
<br />
<br /> : ular ko'milgan bo'lishi mumkin ob'ektlar bor
</p>
<p>fikr
<br /></p>
<br /> . Ular kontroller
<p>mantig'ini o'z ichiga olishi mumkin va turli xil ko'rinishlarda qayta ishlatilishi </p>
<p>mumkin.
<br /></div> <style type="text/css"> </style> <div id="page13-div" >
<br />Quyidagi
</p>
<p>diagrammada </p>
<p>dasturning
</p>
<p>statik
<br /></p>
<br />tuzilishi
<p>ko'rsatilgan: </p>
<p>
<p>
<br />
<br /> </p>
<br /></div> <style type="text/css"> </style> <div id="page14-div" >
<br />
</p>
<p>
<p> </p>
<br />
<br />
</p>
<p>
<br /></div> <style type="text/css"> </style> <div id="page15-div" > </p>
<br />
<p>
<p> </p>
<br />
<br />
</p>
<p>
<p> </p>
<br />
<br />
</p>
<p>
<br />
<br /><b> </b></p>
<br />
<br />
<p>
<br />
<br /> </p>
<br /></div> </body></body></h> 