Guruh: web024 Variant:№55


Download 0.63 Mb.
Pdf ko'rish
Sana03.12.2020
Hajmi0.63 Mb.
#157114
Bog'liq
Web Y.N


Xakimov Xojiakbar Abdug’ani o’gli 

 

 



 

Guruh:WEB024 

 

Variant:№55 

 

 

 

 

 



 

 

 



 

 


 

 

 



 

 

 



 

 

 



 

1.Htmlda ro’yxatlar bilan ishlash 

HTMLda-ro'yxatlar bir-biriga bog'liq bo'lgan ma'lumotlarni to'plash uchun 

ishlatiladi. Ro'yxatlarning uch turi mavjud: 

1.Tartiblanmagan(markerlangan)  ro'yxat - 

     - ro'yxatning har bir elementi 

    li> marker bilan belgilanadi: 



    2.Tartiblangan ro'yxat - 
       - ro'yxatning har bir elementi < li> raqam bilan 

      belgilanadi, 



      3.Ro'yxat tavsifi- < dl> — juft tegdan iborat bu teg ro’yxat tavsifini 
       tegi esa 

      termin (nom) ni,- < dd> tegi esa har bir termin ta'rifi. 

       

      1.Tartiblanmagan ro’yxat 

      Tartiblanmagan (markerlangan) ro’yxatlar 

         
       ( inglizcha  “Unordered list” 

      so’zdan) tegi orqali ifodalanib, ro’yxatning xar bir elementi 

    1.  (inglizcha”list 

      item” ro’yxat elementi) tegi bilan boshlanadi. Tartiblanmagan ro’yxatlar shakli 



      style atributidagi list-style-type orqali yoki Css  tili orqali  almashtiriladi. Ularning 

      turlari: 



 

Disc 



 

Circle 



 

Square 



 

 



none 

DOCTYPE


 

html


>

 

<

html

 

lang



=

"en"


>

 

<

head

>

 



    

<

meta


 

charset


=

"UTF-8"


>

 

    



<

meta


 

name


=

"viewport"

 

content


=

"width=device-width, initial-scale=1.0"

>

 

    



<

meta


 

http-equiv

=

"X-UA-Compatible"



 

content


=

"ie=edge"

>

 

    



<

title


>

Royxatlar bilan ishlash



title


>

 

    



<

link


 

rel


=

"stylesheet"

 

href


=

"css/style.css"

>

 



head

>

 



<

body


>

 

    



<

div


 

class


=

"royxat"


>

 

        



<

div


 

class


=

"container"

>

 

            



<

div


 

class


=

"UL"


>

 

                



<

h2

>



Tartiblanmagan ro'yxat

h2

>



 

                



<

ul

>



 

                    



<

li

>



Web dasturlash

li

>



 

                    



<

li

>



Algoritmlarni loyihalash

li

>



 

                    



<

li

>



Kompyuterni tashkillashtirish

li

>



 

                    



<

li

>



Elektronika va sxemalar

li

>



 

                    



<

li

>



English

li

>



 

 

                



ul

>



 

 

            



div


>

 

        



div


>

 

    



div


>

 

     



body


>

 

html

>

 



 

 


 

 

2.Tartiblangan ro’yxat: 

Tartiblangan ro'yxat 

     < / ol> juftlangan teg yordamida yaratiladi. Ro'yxatning 

    har bir elementi 

  1.  elementi bilan  yaratiladi. Brauzer elementlarni avtomatik 

    ravishda raqamlaydi va agar siz bunday ro'yxatning bir yoki bir nechta elementini 

    o'chirsak, qolgan raqamlar avtomatik ravishda qayta hisoblab chiqiladi. 

    Tartiblangan ro’yxatlar atributi type hisoblanadi:  

    Type=”1”; Type=”A”; Type=”a”;  Type=”I”; Type=”i”;  



    Misol


    DOCTYPE


     

    html


    >

     

    <

    html

     

    lang



    =

    "en"


    >

     

    <

    head

    >

     



        

    <

    meta


     

    charset


    =

    "UTF-8"


    >

     

        



    <

    meta


     

    name


    =

    "viewport"

     

    content


    =

    "width=device-width, initial-scale=1.0"

    >

     

        



    <

    meta


     

    http-equiv

    =

    "X-UA-Compatible"



     

    content


    =

    "ie=edge"

    >

     

        



    <

    title


    >

    Royxatlar bilan ishlash



    title


    >

     

        



    <

    link


     

    rel


    =

    "stylesheet"

     

    href


    =

    "css/style.css"

    >

     



    head

    >

     



    <

    body


    >

     

        



    <

    div


     

    class


    =

    "royxat"


    >

     

            



    <

    div


     

    class


    =

    "container"

    >

     

                



     

                    

    Tartiblanmagan ro'yxat

     

                    



       

                          

    • Web dasturlash
    •  

                          

    • Algoritmlarni loyihalash


    •  

                          

    • Kompyuterni tashkillashtirish
    •  

                          

    • Elektronika va sxemalar


    •  

                    
  • English
  •  

     



                    

     

     



                
     -->

     

                



    <

    div


     

    class


    =

    "OL"


    >

     

                    



    <

    h2

    >



    Tartiblangan ro'yxat

    h2

    >



     

                    



    <

    ol

    >



     

                        



    <

    li

    >



    Web dasturlash

    li

    >



     

                        



    <

    li

    >



    Algoritmlarni loyihalash

    li

    >



     

                        



    <

    li

    >



    Kompyuterni tashkillashtirish

    li

    >



     

                        



    <

    li

    >



    Elektronika va sxemalar

    li

    >



     

                        



    <

    li

    >



    English

    li

    >



     

                    



    ol

    >



     

                



    div


    >

     

            



    div


    >

     

        



    div


    >

     

         



    body


    >

     

    html



     



    Natija



     

     

     



     

     

     



     

     

     



    3.Ro'yxat tavsifi

     

     Ro'yxat  tavsifi 

     tegi yordamida yaratiladi. Terminni qo'shish uchun 



     tegi ishlatiladi va ta'rifni kiritish uchun 
     ishlatiladi 

    ishlatiladi. 



    Misol: 

    DOCTYPE


     

    html


    >

     

    <

    html

     

    lang



    =

    "en"


    >

     

    <

    head

    >

     



        

    <

    meta


     

    charset


    =

    "UTF-8"


    >

     

        



    <

    meta


     

    name


    =

    "viewport"

     

    content


    =

    "width=device-width, initial-scale=1.0"

    >

     

        



    <

    meta


     

    http-equiv

    =

    "X-UA-Compatible"



     

    content


    =

    "ie=edge"

    >

     

        



    <

    title


    >

    Royxatlar bilan ishlash



    title


    >

     

        



    <

    link


     

    rel


    =

    "stylesheet"

     

    href


    =

    "css/style.css"

    >

     



    head

    >

     



    <

    body


    >

     

        



    <

    div


     

    class


    =

    "royxat"


    >

     

            



    <

    div


     

    class


    =

    "container"

    >

     

                



     

                    

    Tartiblanmagan ro'yxat

     

                    



       

                          

    • Web dasturlash
    •  

                          

    • Algoritmlarni loyihalash


    •  

                          

    • Kompyuterni tashkillashtirish
    •  

                          

    • Elektronika va sxemalar


    •  

                          

    • English
    •  

       

                      



     

     

                

     -->



     

                

     

                    

    Tartiblangan ro'yxat



     

                    

       

                          Web dasturlash



       

                          

    1. Algoritmlarni loyihalash
    2.  

                          

    3. Kompyuterni tashkillashtirish


    4.  

                          

    5. Elektronika va sxemalar
    6.  

                          

    7. English


    8.  

                      

     

                

     -->



     

                



    <

    div


     

    class


    =

    "DL"


    >

     

                    



    <

    h2

    >



    Ro'yxatlar tavsifi

    h2

    >



     

                    



    <

    dl

    >



     

                        



    <

    dt

    >



    Apple

    dt

    >



     

                        

    <

    dd

    >



    – Shaxsiy kompyuterlar, iPod audio-

    pleyerlar va dastur taʻminoti ishlab chiqaruvchi amerika korporatsiyasi.



    dd

    >



     

                        



    <

    dt

    >



    Samsung

    dt

    >



     

                        



    <

    dd

    >



    -Xalqaro kompaniya. Markazi Seul shahrida joylashgan

    dd

    >



     

                        



    <

    dt

    >



    Xiaomi

    dt

    >



     

                        



    <

    dd

    >



     – Xitoyning elektron uskunalar ishlab chiqaruvchi kompan

    iyasi boʻlib, 2010-yil aprelida asos solingan.



    dd

    >



     

                    



    dl

    >



     

                



    div


    >

     

            



    div


    >

     

        



    div


    >

     

         



    body


    >

     

    html

    >

     



      

     

    Natija: 

     

    2. Matn effektlari:

     

    1. Word-break 

    Word-break xususiyati ma'lum bir hududda kenglik bo'ylab mos kelmaydigan 

    so'zlar ichida satrlarni qanday o'tkazish kerakligini ko'rsatadi. 

    Qiymatlari: 

     



    Normal -

     

    Standart satrlarni uzatish qoidalari ishlatiladi. Odatda, bu holda



    chiziqlar ko'chirilmaydi yoki transfer aniq belgilangan joylarda 

    o'tkazilmaydi. 

     

    Break-all-



     

    Satrlarni uzatish avtomatik ravishda qo'shiladi, shuning uchun 

    so'z ma'lum bir blok kengligiga mos keladi.   

     



    Keep-all-

     

    Xitoy, koreys yoki yapon tilidagi so'zlardagi satrlarni ko'chirishga 



    ruxsat bermaydi. Qolgan tillar uchun u normaldir. 

    Misol

    DOCTYPE


     

    html


    >

     

    <

    html

     

    lang



    =

    "en"


    >

     

    <

    head

    >

     



        

    <

    meta


     

    charset


    =

    "UTF-8"


    >

     

        



    <

    meta


     

    name


    =

    "viewport"

     

    content


    =

    "width=device-width, initial-scale=1.0"

    >

     

        



    <

    meta


     

    http-equiv

    =

    "X-UA-Compatible"



     

    content


    =

    "ie=edge"

    >

     

        



    <

    title


    >

    Matn effekt



    title


    >

     

        



    <

    link


     

    rel


    =

    "stylesheet"

     

    href


    =

    "css/style.css"

    >

     



    head

    >

     



    <

    body


    >

     

        



    <

    div


     

    class


    =

    "effekt"


    >

     

            



    <

    div


     

    class


    =

    "container"

    >

     

                



    <

    div


     

    class


    =

    "Wb"


    >

     

                    



    <

    h2

     



    style

    =

    "padding-left: 15px ;"



    >

    Word break



    h2

    >



     

                    



    <

    p

    >



    Muhammad al-

    Xorazmiy nomidagi Toshkent Axborot Texnologiyalari Universiteti Web-

    024 guruh talabasi Xakimov Xojiakbar

    p

    >



     

                



    div


    >

     

            



    div


    >

     

        



    div


    >

     

    body

    >

     



    html


     

    CSS 



    body

        



    background-color

    rgb



    (

    25



    197

    160



    ); 

     



    .container



        

    width


    50%


        


    margin

    0



     

    auto


     



    .Wb

        



    border

    2px



     

    solid


     

    black


        


    font-family

    Arial



    Helvetica

    sans-serif



        


    word-break

    break-all



        


    width

    180px



        


    padding

    15px



     



    Natija: 

     

     



    2.Word-wrap 

    Word-wrap-xususiyati ma'lum bir hududda kenglik bo'ylab mos 

    kelmaydigan uzun so'zlarni ko'chirish yoki ko'chirmaslikni ko'rsatadi. 



    Qiymatlari : 

     



    Normal

    -

     

    Qatorlar ko'chirilmaydi yoki transfer aniq belgilangan 



    joylarda o'tkazilmaydi. 

     



    Break-word-

     

    Satrlarni uzaytirish avtomatik ravishda qo'shiladi, 



    shuning uchun so'z ma'lum bir blok kengligiga mos keladi. 

     



    Inherit-

     

    Otaning qiymatini meros qilib oladi. 



     

     

     

     

     

     

    Misol: 

    DOCTYPE


     

    html


    >

     

    <

    html

     

    lang



    =

    "en"


    >

     

    <

    head

    >

     



        

    <

    meta


     

    charset


    =

    "UTF-8"


    >

     

        



    <

    meta


     

    name


    =

    "viewport"

     

    content


    =

    "width=device-width, initial-scale=1.0"

    >

     

        



    <

    meta


     

    http-equiv

    =

    "X-UA-Compatible"



     

    content


    =

    "ie=edge"

    >

     

        



    <

    title


    >

    Matn effekt



    title


    >

     

        



    <

    link


     

    rel


    =

    "stylesheet"

     

    href


    =

    "css/style.css"

    >

     



    head

    >

     



    <

    body


    >

     

        



    <

    div


     

    class


    =

    "effekt"


    >

     

            



    <

    div


     

    class


    =

    "container"

    >

     

                



     

                    

    Word break

     

                    


    Muhammad al-

    Xorazmiy nomidagi Toshkent Axborot Texnologiyalari Universiteti Web-

    024 guruh talabasi Xakimov Xojiakbar

     

                

     -->



     

     

                



    <

    div


     

    class


    =

    "WW"


    >

     

                    



    <

    h2

    >



    Word wrap

    h2

    >



     

                    



    <

    p

    >



    Muhammad al-

    Xorazmiy nomidagi Toshkent Axborot Texnologiyalari Universiteti Web-

    024 guruh talabasi Xakimov Xojiakbar

    p

    >



     

                



    div


    >

     

            



    div


    >

     

        



    div


    >

     

    body

    >

     



    html


     

    Css



     

    body


        


    background-color

    rgb



    (

    25



    197

    160



    ); 

     



    .container

        



    width

    50%



        


    margin

    0



     

    auto


     



    /* .Wb{

     

        border: 2px solid black;



     

        font-family: Arial, Helvetica, sans-serif;

     

        word-break: break-all;



     

        width: 180px;

     

        padding: 15px;



     

    } */

     

     



    .WW

        



    border

    2px



     

    solid


     

    black


        


    background-color

    #f0f0f0



        


    font-family

    Arial



    Helvetica

    sans-serif



        


    width

    230px



        


    padding

    15px



        


    word-wrap

    inherit



     



     

     

     



    3.Writing-mode 

    Sahifadagi matn yo'nalishini belgilaydi. Writing-mode xususiyati universaldir va 

    bir vaqtning o'zida direction va block-progression xususiyatlarining qiymatlarini 

    belgilash imkonini beradi. 



    Qiymatlar: 

     



    Horizontal-tb-

     

    tarkib gorizontal ravishda chapdan o'ngga, yuqoridan pastga 



    vertikal ravishda bo’ladi. 

     



    Vertical-rl-

     

    tarkib yuqoridan pastgacha, gorizontal ravishda o'ngdan chapga 



    vertikal ravishda bo’ladi. 

     

    Misol: 

    DOCTYPE


     

    html


    >

     

    <

    html

     

    lang



    =

    "en"


    >

     

    <

    head

    >

     



        

    <

    meta


     

    charset


    =

    "UTF-8"


    >

     

        



    <

    meta


     

    name


    =

    "viewport"

     

    content


    =

    "width=device-width, initial-scale=1.0"

    >

     

        



    <

    meta


     

    http-equiv

    =

    "X-UA-Compatible"



     

    content


    =

    "ie=edge"

    >

     

        



    <

    title


    >

    Matn effekt



    title


    >

     

        



    <

    link


     

    rel


    =

    "stylesheet"

     

    href


    =

    "css/style.css"

    >

     



    head

    >

     



    <

    body


    >

     

        



    <

    div


     

    class


    =

    "effekt"


    >

     

            



    <

    div


     

    class


    =

    "container"

    >

     

                



     

                    

    Word break

     

                    


    Muhammad al-

    Xorazmiy nomidagi Toshkent Axborot Texnologiyalari Universiteti Web-

    024 guruh talabasi Xakimov Xojiakbar

     


                
     -->

     

     



                

     

                    

    Word wrap



     

                    


    Muhammad al-

    Xorazmiy nomidagi Toshkent Axborot Texnologiyalari Universiteti Web-

    024 guruh talabasi Xakimov Xojiakbar

     

                



     

            

     

        

     -->



     

        


    <

    div


     

    class


    =

    "WM"


    >

     

            



    <

    h2

    >



    Writting mode qiymatlari

    h2

    >



     

            


    <

    p

     



    class

    =

    "tekst1"



    >

     Web-


    024 guruh talabasi Xakimov Xojiakbar 

    <

    span


     

    style


    =

    "color:red;"

    >

    horizontal-



    tb

    span


    >p

    >



     

            


    <

    p

     



    class

    =

    "tekst2"



    >

     Web-


    024 guruh talabasi Xakimov Xojiakbar 

    <

    span


     

    style


    =

    "color: red;"

    >

    vertical-



    rl

    span


    >p

    >



     

            


        

    div


    >

     

    body

    >

     



    html


     

    CSS 



    .WM

        



    width

    50%



        


    background-color

    #f0f0f0



    p.tekst1



        


    writing-mode

    horizontal-tb



        


    font-family

    Arial



    Helvetica

    sans-serif



        


    font-size

    18px



    p.tekst2



        


    writing-mode

    vertical-rl



        


    font-family

    Arial



    Helvetica

    sans-serif



        


    font-size

    18px



     



     

     

     

     

     

     

     

     

    3.Veb saytlarni yaratishda CMStexnologiyalar.CMS 

    tenologiyalar afzalliklari va kamchiliklari. 

     

    Zamonaviy saytlar o'tgan o'n yillikning oddiy birodarlariga nisbatan ancha oldinda. 

    Zamonaviy dizayn va g'ayratli reklama usullaridan tashqari, ular oddiy yozuv 

    sahifasini takrorlash qiyin bo'lgan mustahkam xususiyatlar to'plamini ham o'z 

    ichiga oladi. Jiddiy imkoniyatlar to'plamiga ega bo'lgan to'liq sayt "noldan" yozish 

    uchun muammoli, shuning uchun dasturchilar asosan vosita sifatida tanilgan CMS-

    ga yordam beradi. 

    CMSning qisqartmasi Content Management System (kontentni boshqarish tizimi) 

    deb nomlanadi. Ism mohiyatni aniq aks ettiradi. CMS-resurs mazmunini 

    boshqarish, o'zgartirish, ko'rish va nazorat qilish imkonini beruvchi skriptlarga 

    asoslangan dastur. Bugungi tizimlar keng funktsionallikka ega va ularning har biri 

    o'z elementlari uchun mas'ul bo'lgan ko'plab modullardan iborat. Dastur 

    konstruktorga o'xshash bloklardan odatiy saytlarni yaratishga yordam beradi. 

    Buning uchun deyarli hech qanday dasturlash qobiliyatlari talab qilinmaydi. Shartli 

    ravishda CMS bir necha qismga bo'linishi mumkin: 

     



    foydalanuvchi ma'lumotlari, saytni to'ldirish va boshqa muhim narsalar 

    joylashgan ma'lumotlar bazasi do'koni; 

     

    foydalanuvchi saytni ko'rib chiqayotganda bevosita muloqot qiladigan 



    interfeys elementlarini saqlash 

     



    osonlik bilan sahifalarni yaratishga yordam beradigan visual muharriri. 

     


    Zamonaviy CMS juda keng qo'llaniladi: ularsiz Internet-saytlarga kiradigan va o'z 

    veb-saytiga muhtoj bo'lgan har qanday kompaniyani qilish qiyin. 

    Mutaxassislarning professional guruhlariga ega bo'lgan ixtisoslashgan it-

    firmalardan farqli o'laroq, ko'pchilik nodavlat tashkilotlar noldan resurs yaratishni 

    ta'minlay olmaydi va shuning uchun odatiy saytni ishlab chiqish uchun keng 

    tarqalgan CMS dan foydalanadi. Bu biznes karta yoki onlayn-do'kon bo'lsin, 

    standart xususiyatlar to'plami bilan resursga muhtoj bo'lganlar uchun ajoyib 

    yechimdir. CMS beradi: 

     

    veb-saytni kontent bilan to'ldirish, o'zgartirish va resursni boshqarish, it 



    mutaxassisi bo'lmasdan va kuchli dasturlash qobiliyatiga ega bo'lmagan 

    holda; 


     

    xarajatlarsiz, qisqa vaqt ichida yangi sahifalar yaratish; 



     

    saytning ko'rinishini optimallashtirish va uni to'ldirish sifatini yaxshilash. 



    Resursning funksionalligi, uning imkoniyatlari va foydalanuvchi qulayligi ko'p 

    jihatdan CMS ga bog'liq. To'g'ri tanlangan tizim saytni muvaffaqiyatli yaratishga va 

    to'g'ri targ'ib qilishga imkon beradi, bu mijoz uchun jozibador bo'lib, ishonchli va 

    kerakli darajada ishlaydi. 



    CMS ni qanday tanlash mumkin 

    Saytni to'g'ridan-to'g'ri yaratishdan oldin bozorni o'rganishga arziydi: u turli xil 

    imkoniyatlar, foydalanish shartlari va cheklovlar bilan turli xil variantlarni taklif 

    etadi. Aytish mumkinki, barcha CMS ikkita katta guruhga bo'linadi: ochiq tizimlar 

    bepul tarqatiladi , foydalanuvchilarga manba kodini tahrir qilish imkonini beradi 

    va kodni ochmaydigan va odatda pulli asosda taqdim etiladigan maxsus yopiq 

    yechimlar. Avtonom va dinamik dvigatellar ham mavjud: birinchisi statik saytlarni 

    yaratish uchun ishlatiladi, ikkinchisi interaktiv. Bozorda bir nechta mashhur 

    tizimlar mavjud: 

     



    Drupal-bepul, ammo to'liq xususiyatli va juda og'ir CMS, to'liq saytni 

    yaratish uchun kerak bo'lgan hamma narsaga ega; 

     

    1C Bitrix-oddiy vazifalar uchun juda og'ir, ammo murakkab bo'lgan katta 



    hajmli, ko'p profilli pulli tizim

     



    Joomla-resurs kuchli hisoblash talab qilmaydigan Ajam sayt quruvchilar va 

    kompaniyalar tomonidan ishlatiladigan bepul qidiruvi, foydalanish uchun 

    juda oson; 

     



    MODx-ishlab chiquvchilar uchun qulay bo'lgan bepul CMS, yuqori 

    darajadagi xavfsizlik va ko'plab muammolarni hal qilish uchun etarlicha 

    moslashuvchanlik; 


     

    WordPress-aslida bloglarni yaratish uchun mo'ljallangan butun dunyo 



    bo'ylab mashhur vosita, ammo hozirgi vaqtda u ancha keng funktsionallikka 

    ega; 


     

    DLE-qisman oldingi tizimning analogidir, ulardan foydalanish oson va 



    intuitiv; 

    Afzalliklari va kamchiliklari: 

    Yuqorida aytib o'tilganidek, saytni ishlab chiqishda kontentni boshqarish tizimidan 

    foydalanish bir vaqtning o'zida bir nechta muhim afzalliklarga ega. Ular, ayniqsa, 

    ko'plab veb-dasturchilar bo'lmagan nodavlat kompaniyalar egalari uchun juda 

    muhimdir: 

     



    jiddiy texnik bilimlarga, ilg'or dasturlash ko'nikmalariga va tartiblarga 

    ehtiyoj yo'q; 

     

    yuqori tezlikda sayt yaratish; 



     

    yangi elementlarni boshqarish va qo'shishning qulayligi; 



     

    qiyinchiliklarsiz chiroyli dizayn yaratish uchun imkoniyat; 



     

    oddiy bilim, hatto kerakli bilimsiz odamlar uchun ham mavjud. 



    Birgina kamchiligi nostandart xususiyatlarga ega noyob saytni yaratishning 

    murakkabligi deb atash mumkin, ammo bunday resurslar, odatda, tegishli 

    so'rovlarga ega bo'lgan kompaniyalar tomonidan talab qilinadi (masalan, it-

    sohasida). Bunday tashkilotlar saytni mustaqil ravishda ishlab chiqadigan 



    dasturchilar xodimlariga ega bo'lishlari mumkin. 

    Download 0.63 Mb.

    Do'stlaringiz bilan baham:




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