HTML

Asosiy teglar

HTML skeletini o'rganganimizdan so'ng, endi <body> ichini to'ldiradigan asosiy teglar bilan tanishamiz. Bu teglar — har bir sahifada takrorlanadigan "g'ishtlar". Ularni yaxshi bilsangiz, deyarli har qanday oddiy sahifani yasay olasiz.

Sarlavhalar: h1 dan h6 gacha

Sarlavhalar matnni bo'limlarga ajratadi. HTML'da olti darajali sarlavha bor: <h1> dan <h6> gacha. h1 — eng katta va eng muhim, h6 — eng kichigi:

<h1>Eng katta sarlavha</h1>
<h2>Ikkinchi daraja</h2>
<h3>Uchinchi daraja</h3>
<h4>To'rtinchi daraja</h4>
<h5>Beshinchi daraja</h5>
<h6>Eng kichik sarlavha</h6>

Sarlavhalar nafaqat matnni kattalashtiradi, balki sahifaning mantiqiy tuzilishini ham bildiradi — xuddi kitobning bob va bo'limlari kabi. Qidiruv tizimlari ular yordamida sahifa nima haqida ekanini tushunadi.

Har bir sahifada faqat bitta <h1> bo'lishi kerak — u sahifaning bosh sarlavhasi. Sarlavhalarni tartib bilan ishlating: h1 dan keyin h2, undan keyin h3. Faqat matnni kattalashtirish uchun h1 ni tanlamang — buning uchun keyinroq CSS bor.

Paragraf: p tegi

<p> tegi (paragraph — paragraf) — oddiy matn bloklari uchun ishlatiladi. Har bir paragraf alohida qatordan boshlanadi va oldingi/keyingi bloklardan bo'sh joy bilan ajraladi:

<p>Bu — birinchi paragraf. U bir necha jumladan iborat bo'lishi mumkin.</p>
<p>Bu — ikkinchi paragraf. U avtomatik ravishda yangi qatordan boshlanadi.</p>
Yodda tuting: brauzer matndagi ortiqcha bo'shliq va yangi qatorlarni e'tiborsiz qoldiradi. Matnni bir necha paragrafga bo'lish uchun har birini alohida <p> ichiga oling, klaviaturada Enter bosish yetarli emas.

Qalin va kursiv matn

Matn ichidagi ayrim so'zlarni ajratib ko'rsatish uchun quyidagi teglar ishlatiladi:

<p>Bu juda <strong>muhim</strong> ogohlantirish.</p>
<p>Men buni <em>rostdan ham</em> nazarda tutyapman.</p>
Amalda <strong> va <em> ni afzal ko'ring. Ular nafaqat ko'rinishni o'zgartiradi, balki ma'no ham beradi — ekran o'quvchi dasturlar bunday so'zlarni alohida ohang bilan o'qiydi, bu esa nogironligi bor foydalanuvchilar uchun foydali.

Ro'yxatlar: ul, ol va li

Ro'yxatlar ma'lumotni tartibli ko'rsatish uchun ishlatiladi. Ikki asosiy turi bor.

Tartibsiz ro'yxat: ul

<ul> (unordered list) — har bir band oldida nuqta (marker) turadigan ro'yxat. Har bir band <li> (list item) ichiga yoziladi:

<ul>
  <li>Olma</li>
  <li>Banan</li>
  <li>Uzum</li>
</ul>

Tartibli ro'yxat: ol

<ol> (ordered list) — har bir band oldida raqam turadigan ro'yxat. Tartib muhim bo'lganda ishlatiladi (masalan, retsept qadamlari):

<ol>
  <li>Suvni qaynating</li>
  <li>Choyni soling</li>
  <li>Besh daqiqa kutib turing</li>
</ol>

Ro'yxatlar bir-birining ichiga ham joylashtirilishi mumkin (ichma-ich ro'yxat):

<ul>
  <li>Mevalar
    <ul>
      <li>Olma</li>
      <li>Nok</li>
    </ul>
  </li>
  <li>Sabzavotlar</li>
</ul>

Havolalar: a tegi

Havola — internetning asosi. U bir sahifadan boshqasiga o'tish imkonini beradi. Havola <a> (anchor — langar) tegi bilan yaratiladi, manzil esa href atributida ko'rsatiladi:

<a href="https://google.com">Google saytiga o'tish</a>

Havolalar bir necha xil bo'ladi:

Havolani yangi yorliqda ochish uchun target="_blank" atributi qo'shiladi:

<a href="https://example.com" target="_blank" rel="noopener">Yangi oynada ochish</a>
target="_blank" bilan birga rel="noopener" ni qo'shish tavsiya etiladi — bu ochilgan yangi sahifa sizning sahifangizga xavfsizlik jihatidan zarar yetkaza olmasligini ta'minlaydi.

Rasmlar: img tegi

Rasm qo'yish uchun <img> tegi ishlatiladi. Bu — bo'sh teg (yopuvchisi yo'q). Uning ikkita muhim atributi bor: src (rasm manzili) va alt (matnli tavsif):

<img src="mushuk.jpg" alt="Oq mushuk derazada o'tiribdi">

Rasm o'lchamini width va height atributlari bilan belgilash mumkin (piksellarda):

<img src="logo.png" alt="Kompaniya logotipi" width="200" height="100">
alt atributini doimo yozing. U ko'rlar uchun rasmni "o'qib" beradi (a11y — foydalanish qulayligi) va rasm yuklanmaganda nima ekanini bildiradi. SEO uchun ham foydali. Bo'sh alt="" faqat bezak rasmlar uchun ruxsat etiladi.

Konteynerlar: div va span

Ba'zan bir necha elementni guruhlab, ularni birgalikda boshqarish (masalan, CSS bilan bezash) kerak bo'ladi. Buning uchun ikkita "neytral" teg bor:

div — blok konteyner

<div> — o'zining hech qanday ma'nosi yo'q, katta bloklarni guruhlash uchun "quti". U har doim yangi qatordan boshlanadi va butun kenglikni egallaydi:

<div>
  <h2>Mahsulot nomi</h2>
  <p>Mahsulot tavsifi shu yerda.</p>
</div>

span — satr ichidagi konteyner

<span> — div'ga o'xshaydi, lekin u matn ichida ishlatiladi va yangi qatordan boshlanmaydi. Bir so'zni ajratib olish uchun qulay:

<p>Narxi: <span>150 000 so'm</span></p>
div — blok element (butun qatorni egallaydi), span — satriy (inline) element (faqat o'z mazmuni qadar joy oladi). Bu farqni CSS o'rganishda yanada aniqroq tushunasiz. Hozircha: div katta bo'laklar uchun, span matn ichidagi kichik bo'laklar uchun.

br va hr teglari

Ikkita foydali bo'sh teg:

<p>Toshkent shahri<br>
Amir Temur ko'chasi, 5-uy</p>
<hr>
<p>Yangi bo'lim shu yerdan boshlanadi.</p>
<br> ni faqat manzil yoki she'r kabi haqiqatan yangi qator kerak bo'lgan joyda ishlating. Paragraflar orasidagi bo'shliq uchun uni ishlatmang — buning uchun alohida <p> teglari to'g'riroq.

Barchasini birlashtirish

Mana o'rganilgan teglarning barchasi bir sahifada:

<body>
  <h1>Mening blogim</h1>
  <p>Xush kelibsiz! Quyida <strong>eng yangi</strong> maqolalar.</p>
  <hr>
  <h2>Sevimli mevalarim</h2>
  <ul>
    <li>Olma</li>
    <li>Uzum</li>
  </ul>
  <p>Batafsil ma'lumot uchun <a href="mevalar.html">bu yerni bosing</a>.</p>
  <img src="meva.jpg" alt="Turli mevalar savatda">
</body>

Xulosa