Kommunikatsiyalarini rivojlantirish vazirligi muhammad al- xorazmiy nomidagi toshkent axborot texnologiyalari universiteti


Download 0.97 Mb.
Pdf ko'rish
Sana03.06.2020
Hajmi0.97 Mb.

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, HomepageIndex 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>

Download 0.97 Mb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2020
ma'muriyatiga murojaat qiling