Rasm va ro'yxat teglari

<img>, <figure>, <ul>, <ol>, <dl>: sahifani boyitamiz va tartibga solamiz

8-sinfWeb Full-stack2-hafta · 4-dars

Bugun nimani o'rganamiz?

Rasm va yo'llar

<img>, nisbiy va mutlaq yo'l, alt, <figure>

Uch xil ro'yxat

<ul>, <ol> va ta'riflar ro'yxati <dl>

Ichma-ich ro'yxat

Ro'yxat ichida ro'yxat: to'g'ri tuzilma

Sahifaga rasm qo'yish

<img> tegi, atributlari va fayl yo'llari

<img> tegining tuzilishi

Qismning ustiga olib boring yoki bosing.

Birinchi rasm


<img src="images/tabiat.jpg"
     alt="Tog'lar va ko'l manzarasi"
     width="600" height="400"
     title="Tog' ko'li">

alt ni hech qachon bo'sh qoldirmang.

Asosiy atributlar: bosing

src

bosing

Source: rasm faylining manzili. Majburiy.

alt

bosing

Alternative text: rasm yuklanmasa yoki ko'zi ojizlar uchun matn.

width / height

bosing

Piksellardagi o'lcham, birliksiz yoziladi.

title

bosing

Kursor rasm ustiga kelganda chiquvchi maslahat.

Mini-test

alt atributi nima uchun kerak?

To'g'ri: alt rasm o'rnini bosadigan matn. Qidiruv tizimlari (SEO) va ko'zi ojizlar ham shundan foydalanadi.

Rasm qayerda? Fayl yo'llari

Mutlaq va nisbiy yo'l

Mutlaq yo'l (absolute)

To'liq internet manzili: https://example.com/logo.png. Boshqa saytdagi rasmga ishora qiladi.

Nisbiy yo'l (relative)

HTML fayl turgan joyga nisbatan: foto.jpg, images/foto.jpg, ../foto.jpg, ../../images/foto.jpg.

foto.jpg: bir papkadaimages/: ichki papka../: bir pog'ona yuqori

Nega width va height yoziladi?

O'lchamsiz

Brauzer rasm hajmini bilmaydi: yuklangach matn pastga sakraydi.

O'lcham bilan

Brauzer joyni oldindan ajratadi: sahifa qotmay ochiladi.

Pastga ↓: bu hodisaning nomi nima?

CLS: Layout Shift

CLS (Cumulative Layout Shift): sahifa yuklanayotganda elementlarning kutilmagan siljishi.

Zamonaviy brauzerlarda loading="lazy": rasm skroll qilib yaqinlashganda yuklanadi.

Rasmga izoh qo'shamiz


<img src="images/samarqand.jpg"
     alt="Registon maydoni"
     width="600">

Rasmga izoh qo'shamiz


<figure>
  <img src="images/samarqand.jpg"
       alt="Registon maydoni" width="600">
  <figcaption>1-rasm. Registon maydoni</figcaption>
</figure>

<figure> ichida nima bor?

Ro'yxatlar

Tartibsiz, tartibli va ta'riflar ro'yxati

Uch xil ro'yxat

Qutiga bosing: izoh chiqadi.

<ul> va <ol> kodda


<ul>
  <li>Olma</li>
  <li>Banan</li>
  <li>Apelsin</li>
</ul>
<ol>
  <li>Tuxumni chaqing</li>
  <li>Tuz solib aralashtiring</li>
  <li>Tovada 5 daqiqa qovuring</li>
</ol>

<ol> atributlari

1. type

type="A" (A, B, C), "a", "I" (rim raqami), "i", "1": raqam turi.

2. start

start="5": raqamlash 5 dan boshlanadi.

3. reversed

reversed: teskari sanaydi (3, 2, 1). Top-10 yoki raketa uchun ayni muddao.

Ta'riflar ro'yxati <dl>


<dl>
  <dt>HTML</dt>
  <dd>Sahifa skeleti</dd>
  <dt>CSS</dt>
  <dd>Sahifa dizayni</dd>
</dl>

lugat.html

HTML: Sahifa skeleti
CSS: Sahifa dizayni

dl: konteynerdt: atamadd: ta'rif

Ichma-ich ro'yxatlar

Ro'yxat ichida ro'yxat: qayerga yoziladi?

Ichki ro'yxat qayerda turadi?

Odatiy xato

Xato


<ul>
  <li>Meva</li>
  <ul>
    <li>Olma</li>
  </ul>
</ul>

To'g'ri


<ul>
  <li>Meva
    <ul>
      <li>Olma</li>
    </ul>
  </li>
</ul>

Mini-test: ichma-ich

Ichki <ul> qaysi teg ichiga yoziladi?

To'g'ri: ichki ro'yxat doim ota ro'yxatning li tegi ichida ochiladi va yopiladi.

Bilasizmi?

birinchi sahifada rasm yo'q edi

NCSA Mosaic: <img> paydo bo'ldi

Menyular ham aslida CSS bilan bezalgan oddiy <ul> va <li>.

Amaliy topshiriq 20 daqiqa

Osonretsept.html: taom nomi, <figure> bilan rasm, masalliqlar <ul> va bosqichlar <ol>

O'rtaIT lug'ati: kamida 4 atama, <dl>, <dt>, <dd>

QiyinKurs mundarijasi: <ol> ichida <ol type="a">

Xulosa

Bugun o'rgandik

img, src, alt, yo'llar, figure; ul, ol, dl va ichma-ich ro'yxatlar

Keyingi dars

Jadvallar: table, tr, td, th