HTML asoslari

HTML (HyperText Markup Language) — bu veb-sahifaning tuzilishi va mazmunini tavsiflovchi til. U dasturlash tili emas — bu kontentni belgilash usuli bo'lib, brauzer har bir bo'lak nima ekanligini bilishi uchun xizmat qiladi: sarlavha, paragraf, havola, rasm.

Elementlar, teglar va atributlar

Element — bu kontentning bitta bo'lagi. Ko'pchilik elementlar ochuvchi teg va yopuvchi teg bilan yoziladi, kontent esa ular orasida bo'ladi:

<p>Hello, world!</p>

Bu yerda <p> — ochuvchi teg, </p> — yopuvchi teg (chiziqchaga e'tibor bering), ular birgalikda paragraf elementini hosil qiladi.

Atribut tegga qo'shimcha ma'lumot qo'shadi. U ochuvchi teg ichida name="value" juftligi sifatida yashaydi:

<a href="https://example.com">Visit us</a>

href atributi havolaga (<a> = anchor) qayerga borishni aytadi. Ba'zi elementlar, masalan <img>, yopuvchi tegga ega emas va o'z-o'zini yopuvchi (self-closing) deb ataladi.

Hujjat tuzilishi

Har bir HTML sahifa bir xil skeletga amal qiladi. <head> sahifa haqidagi ma'lumotni saqlaydi (sarlavha, belgi to'plami, CSS ga havolalar), <body> esa siz aslida ko'radigan hamma narsani saqlaydi.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
  </head>
  <body>
    <p>Visible content goes here.</p>
  </body>
</html

Semantik teglar

Semantik "ma'noli" degani. Semantik teglar oddiy <div> (hech qanday ma'nosi bo'lmagan oddiy quti) ishlatish o'rniga bo'limning rolini tavsiflaydi. Ular kodingizni o'qishni osonlashtiradi va screen readerlar hamda qidiruv tizimlariga sahifani tushunishga yordam beradi.

<body>
  <header>Site logo and title</header>
  <nav>Menu links</nav>
  <main>
    <h1>Article title</h1>
    <p>The main content.</p>
  </main>
  <footer>Copyright and contact info</footer>
</body>

<header> — yuqori qism, ko'pincha logotip va sarlavha.
<nav> — navigatsiya havolalari guruhi.
<main> — asosiy kontent, ushbu sahifaga xos.
<footer> — pastki qism, ko'pincha mualliflik huquqi va havolalar.

Bo'lim aniq maqsadga ega bo'lganida <div> dan oldin shularga murojaat qiling. Yaxshi tuzilgan HTML — qolgan hamma narsa uning ustiga quriladigan poydevor.

Suhbat maslahatlari

Element, teg va atribut o'rtasidagi farqni aniq ajrating — bu junior suhbatlar uchun keng tarqalgan boshlang'ich savol.
Asosiy hujjat skeletini chiza olishingiz va <head> ga nima, <body> ga nima kirishini tushuntira olishingiz kerak.
Semantik teglar nega muhimligini tushuntiring: bu faqat uslub emas, balki accessibility va o'qilishi.

Elementlar, teglar va atributlar

Element — bu kontentning bitta bo'lagi. Ko'pchilik elementlar ochuvchi teg va yopuvchi teg bilan yoziladi, kontent esa ular orasida bo'ladi:

<p>Hello, world!</p>

Bu yerda <p> — ochuvchi teg, </p> — yopuvchi teg (chiziqchaga e'tibor bering), ular birgalikda paragraf elementini hosil qiladi.

Atribut tegga qo'shimcha ma'lumot qo'shadi. U ochuvchi teg ichida name="value" juftligi sifatida yashaydi:

<a href="https://example.com">Visit us</a>

href atributi havolaga (<a> = anchor) qayerga borishni aytadi. Ba'zi elementlar, masalan <img>, yopuvchi tegga ega emas va o'z-o'zini yopuvchi (self-closing) deb ataladi.

Hujjat tuzilishi

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
  </head>
  <body>
    <p>Visible content goes here.</p>
  </body>
</html

Semantik teglar

<body>
  <header>Site logo and title</header>
  <nav>Menu links</nav>
  <main>
    <h1>Article title</h1>
    <p>The main content.</p>
  </main>
  <footer>Copyright and contact info</footer>
</body>

<header> — yuqori qism, ko'pincha logotip va sarlavha.

<nav> — navigatsiya havolalari guruhi.

<main> — asosiy kontent, ushbu sahifaga xos.

<footer> — pastki qism, ko'pincha mualliflik huquqi va havolalar.

Bo'lim aniq maqsadga ega bo'lganida <div> dan oldin shularga murojaat qiling. Yaxshi tuzilgan HTML — qolgan hamma narsa uning ustiga quriladigan poydevor.

Suhbat maslahatlari

Element, teg va atribut o'rtasidagi farqni aniq ajrating — bu junior suhbatlar uchun keng tarqalgan boshlang'ich savol.

Asosiy hujjat skeletini chiza olishingiz va <head> ga nima, <body> ga nima kirishini tushuntira olishingiz kerak.

Semantik teglar nega muhimligini tushuntiring: bu faqat uslub emas, balki accessibility va o'qilishi.

HTML asoslari

HTML asoslari

Elementlar, teglar va atributlar

Hujjat tuzilishi

Semantik teglar

Suhbat maslahatlari

HTML asoslari

HTML asoslari

Elementlar, teglar va atributlar

Hujjat tuzilishi

Semantik teglar

Suhbat maslahatlari

Muhokama

Muhokama