HTML darslari 7-dars.Ro'yhatlar. Blocklar.


HTMLni o’rganishda davom etamiz.

Ushbu darsimizda sizlar bilan list, blocklar bilan ishlashni o’rganib chiqamiz.

Listlar (ro’yhat) HTML da juda ko’p ishlatiladi.
Listlarni biz 2 xil usulda ko’rsatishimiz mumkin.
1. Tartiblangan
2. Tartiblanmagan

Keling yuqoridagilarni o’rganib chiqamiz.
Tartiblangan ro’yhat yaratishimiz uchun bizga va teglari kerak bo’ladi.
Ol — ordered list so’zlarining bosh harfi olingan.
Misol:

<ol>
　　<li>Olma</li>
　　<li>Nok</li>
　　<li>Shaftoli</li>
</ol>


Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

Natija:
    　　
  1. Olma
    2. 　　
  2. Nok
    3. 　　
  3. Shaftoli

Ko’rib turganingizdek ro’yhat tartiblangan, ya’ni 1,2,3,… Sonlar bilan tariblangan.
Demak biz tartiblangan ya’ni oddiy tilda aytadigan bo’lsak 1,2,3,4 shunga o’xshash raqamlar ketma ketligi bilan chiqarishni hohlasak ushbu teglardan foydalanamiz.

Tartiblanmagan ro’yhat.
Tartiblanmagan ro’yhat yaratishimiz uchun bizga va teglari kerak bo’ladi.
ul — “unordered list” so’zlarining bosh harfi olingan.
Misol:

<ul>
　　<li>Olma</li>
　　<li>Nok</li>
　　<li>Shaftoli</li>
</ul>


Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

Natija:
    　　
  • Olma
    • 　　
  • Nok
    • 　　
  • Shaftoli

Ko’rib turganingizdek, tartiblanmagan yani tartiblangandan farq qiladi.
Farqi shundaki 1,2,3… Ni o’rniga nuqtalar yoki shunga o’xshagan belgilarda chiqarish mumkin.

Blocklar bilan ishlash
Block nomidan ham ma’lumki web sahifaning qandaydir qismi, bloki, bo’lagi hisoblanadi.
Block elementlari ochish tegi va yopish teglari bilan ifodalanadi.
Misol uchun , ,
    , , ushbu teglarni block ga misol qilish mumkin, chunki bular ochiladi va yopiladi, asosiysi qandaydir bo’laki hisoblanadi.

    HTML element

    Ushbu div qolgan elementlarni o’z ichiga olishi mumkin, va uni web sahifamizni bo’laklarga ajratishda foydalanamiz. Ho’sh bo’laklarga ajratish nima uchun kerak degan savol paydo bo’lishi mumkin,javob shuki, biz web sahifamizning istalgan bo’lagiga o’zimiz hohlaganchalik stil berish imkonini yaratib beradi.
    Div tegi table tegiga sal o’xshaydi lekin ikkalasa bir narsa emas shuni esizda saqlang.

    Keling yaxshisi bir misol ko’ramiz:
    
<html>
<body>

<div style="width:500px">

<div style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Web sahifa nomi</h1></div>

<div style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b>
HTML
CSS
JavaScript</div>

<div style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Web sahifa contenti</div>

<div style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © opennet.uz</div>

</div>

</body>
</html>

    Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

    Natija:
    Sardor Dushamov

    Ko'rib turganingizdek, web sahifamizni har hil bo'laklarga bo'ldik div tegi yordamida.
    Endi table yordamida web sahifani bo'laklarga bo'lamiz.

    Misol:




    Web sahifa nomi
    Menu
    HTML
    CSS
    JavaScript
    		 Web sahifa contenti
    Copyright © opennet.uz



    Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.comNatija:Sardor DushamovFarqini o'zingiz ko'rib turibsiz.Demak biz web sahifamizni o'zimiz hohlagandek bo'laklarga ajratmoqchi bo'lsak div tegidan foydalanamiz, table tegi bo'laklarga bo'lish uchun ishlatilmaydi, table tegi faqat jadval ko'rinishdagi ma'lumotlarni ko'rsatib berish uchun ishlatiladi.span tegi haqida ham gapirib ketishni joiz bildim.span nima uchun kerak? Oddiy qilib tushuntiradigan bo'lsam, tasavvur qiling biror matn bor, unda qaysidir so'zlar yoki gaplarni rangini yoki background rangini qolganlaridan ajralib turadigan qilmoqchisiz, ana shunaqa paytlarda span tegi ishlatiladi, yani biror textga stil berish uchun.Misol:
    <html>
<body>
<p>opennet.uz <span style="color:blue;font-weight:bold">satyiga</span> hush kelibsiz<span style="color:red;font-weight:bold"> Sardor Dushamov</span> eyes.</p>
</body>
</html>
    Natija:opennet.uz satyiga hush kelibsizSardor Dushamov eyes.

    Keyingi darslarimizni kuzatib boring, opennetdan yiroqlashmang…
,

Нет комментариев