HTML nima? Brauzer qanday ishlaydi, DOM nima

~10 daq · HTML · HTML Asoslari

HTML nima?

Siz hozir o'qiyotgan bu sahifa — HTML. Har qanday veb sahifa — HTML.

HTML — HyperText Markup Language. Bu dasturlash tili emas — belgilash tili. Siz brauzerga "bu sarlavha", "bu paragraf", "bu rasm", "bu havola" deb aytasiz. Brauzer esa bularni ekranda ko'rsatadi.

Oddiy qilib aytganda: HTML — sahifaning skeleti. CSS — uning ko'rinishi. JavaScript — uning harakati.

HTML  → Tuzilma  (nima bor?)
CSS   → Ko'rinish (qanday ko'rinadi?)
JS    → Xulq     (nima qiladi?)

Brauzer qanday ishlaydi?

Siz https://google.com yozasiz. Nima bo'ladi?

1. Brauzer DNS ga so'raydi: "google.com ning IP manzili nima?"
         ↓
2. DNS javob beradi: "142.250.185.46"
         ↓
3. Brauzer o'sha serverga ulanadi
         ↓
4. Server HTML faylni yuboradi
         ↓
5. Brauzer HTML ni o'qiydi va ekranda ko'rsatadi

Brauzer HTML ni o'qiyotganda uni yuqoridan pastga, chapdan o'ngga o'qiydi. Har bir tegni ko'rganda — "bu nima?" deb tushunadi va ekranda joylaydi.

Teg nima?

HTML teglar (tags) dan iborat. Teg — burchakli qavslar ichidagi kalit so'z.

<p>Bu paragraf</p>
  • <p> — ochuvchi teg (opening tag)
  • Bu paragraf — kontent
  • </p> — yopuvchi teg (closing tag)

Ko'pchilik teglar juft — ochuvchi va yopuvchi. Ba'zilari yolg'iz (self-closing):

<img src="rasm.jpg" alt="Rasm" />
<br />
<hr />
<input type="text" />

Atributlar

Teglar atributlar olishi mumkin — qo'shimcha ma'lumot:

<a href="https://google.com" target="_blank">Google</a>
  • href — atribut nomi
  • "https://google.com" — atribut qiymati

DOM nima?

Brauzer HTML ni o'qib bo'lgandan keyin — uni daraxt (tree) ko'rinishida xotirada saqlaydi. Bu daraxt — DOM (Document Object Model).

<!DOCTYPE html>
<html>
  <head>
    <title>Sahifa</title>
  </head>
  <body>
    <h1>Salom</h1>
    <p>Bu paragraf</p>
  </body>
</html>

DOM daraxt ko'rinishida:

document
└── html
    ├── head
    │   └── title → "Sahifa"
    └── body
        ├── h1 → "Salom"
        └── p  → "Bu paragraf"

Nima uchun muhim? JavaScript DOM orqali sahifani o'zgartiradi. document.querySelector('h1') — DOM dan h1 elementni topadi. element.textContent = 'Yangi matn' — uni o'zgartiradi.

HTML versiyalari

HTML bir necha marta yangilandi:

HTML 1.0  → 1993 — birinchi versiya
HTML 2.0  → 1995
HTML 3.2  → 1997
HTML 4.01 → 1999
XHTML     → 2000 — qat'iy qoidalar
HTML5     → 2014 — hozirgi standart

Hozir HTML5 ishlatiladi. U video, audio, canvas, semantic teglar kabi yangi imkoniyatlar qo'shdi.

Birinchi HTML fayl

Matn muharririda (VS Code, Notepad++) yangi fayl yarating. Nom: index.html.

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <title>Mening birinchi sahifam</title>
  </head>
  <body>
    <h1>Salom, Dunyo!</h1>
    <p>Bu mening birinchi HTML sahifam.</p>
  </body>
</html>

Faylni saqlang. Brauzerda oching (ikki marta bosing yoki drag & drop). Ekranda "Salom, Dunyo!" ko'rinadi.

Xulosa

HTML — veb sahifaning tuzilmasini belgilaydigan til. Teglar yordamida brauzerga "bu nima" deb aytiladi.

Brauzer — HTML ni o'qib, DOM daraxt hosil qiladi va ekranda ko'rsatadi.

DOM — HTML ning xotiradagi daraxt ko'rinishi. JavaScript DOM orqali sahifani o'zgartiradi.

Keyingi dars

2-dars: HTML fayl tuzilishi — DOCTYPE, html, head, body