AXV

HTML hujjat strukturasi

Teg, atribut, head va sarlavhalar: bugun birinchi sahifamizni o'zimiz yozamiz

8-sinfWeb Full-stack1-hafta · 2-dars

Bugun nimani o'rganamiz?

Teg va atribut

HTML'ning «harflari»

Skelet

html, head, body

Head va meta

Ko'rinmas sozlamalar

Sarlavhalar

h1 dan h6 gacha

Takrorlash 10 daqiqa

  1. DNS nima? (nomni raqamli manzilga aylantiradi)
  2. Brauzer serverdan nimani oladi? (HTML fayl)
  3. Server qayerda, brauzer qayerda? (server uzoqda, brauzer sizning qurilmangizda)
Server bizga HTML fayl beradi. Bugun shu faylni o'zimiz yozamiz.
01

HTML nima?

Sahifaning skeleti: u hisoblamaydi, faqat «bu nima» deb aytadi

Veb-sahifa — inson tanasi

HTML suyaklar tuzilish CSS kiyim ko'rinish JavaScript harakat jonlantirish Bugun faqat suyaklar: HTML

HTML hujjat raqamlarda

0
asosiy qism: DOCTYPE, html, head, body
0
sarlavha darajasi: h1 – h6
0
h1 sahifada, odatda
02

Teg, element, atribut

HTML'ning uchta asosiy so'zi

Element anatomiyasi

<p> ochuvchi teg Bu abzats. mazmun (matn) </p> yopuvchi teg hammasi birgalikda = ELEMENT

Atribut: tegga qo'shimcha ma'lumot

<html teg nomi lang atribut nomi = "uz" qiymat > Faqat OCHUVCHI tegda, qiymat qo'shtirnoq ichida

Ichma-ich joylashtirish pastga ↓ kod

<p> </p> <strong> </strong> muhim
Matryoshka qoidasi: oxirgi ochilgan teg birinchi yopiladi.

To'g'ri va xato

To'g'ri

<p>Bu <strong>muhim</strong> gap.</p>
VS

Xato

<p>Bu <strong>muhim gap.</p></strong>
Teglar kesishib qoldi: brauzer taxmin qiladi, natija kutilmagan bo'ladi.

Bo'sh teglar: yopilmaydi

<br>

Qator uzadi

<img>

Rasm qo'yadi

<meta>

Sahifa haqida ma'lumot

Ichiga matn olmaydi, shuning uchun yopuvchi tegi ham yo'q.
03

Hujjat skeleti

Har bir HTML fayl shu to'rt qismdan boshlanadi

Skelet: kim kimning ichida

<!DOCTYPE html> «bu HTML5 hujjat» <html lang="uz"> <head> xizmat ma'lumotlari: ekranda KO'RINMAYDI title, meta ... <body> ekranda KO'RINADIGAN hamma narsa h1, p, rasm ...

Qismning ustiga sichqoncha olib boring yoki bosing.

Eng kichik to'liq sahifa


<!DOCTYPE html>
<html lang="uz">
  <head>
    <title>Mening sahifam</title>
  </head>
  <body>
    <h1>Salom!</h1>
  </body>
</html>

Eng kichik to'liq sahifa


<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8">
    <title>Mening sahifam</title>
  </head>
  <body>
    <h1>Salom!</h1>
  </body>
</html>
Yangi qator: meta charset. U o'zbekcha harflarni to'g'ri ko'rsatadi.

Kod brauzerda qanday ko'rinadi

Mening sahifam Salom! <title> (head ichida) <h1> (body ichida)
Head ichidan faqat title yorliqda ko'rinadi, qolgani yashirin.

Birinchi sahifa: qadam-baqadam

1. Fayl yarating

Nomi sahifa.html, kengaytmasi .html.

2. Skeletni yozing

DOCTYPE, html, head va body.

3. Body ga h1 qo'shing

Masalan: <h1>Salom!</h1>

4. Brauzerda oching

Faylni ikki marta bosing: sahifa ko'rinadi.

04

Head va meta

Ko'rinmas, lekin juda muhim sozlamalar

Head ichidagi teglar: bosing

title

bosing

Yorliq va qidiruvdagi sarlavha

meta charset

bosing

Harflar kodlanishi: o', g', sh to'g'ri chiqadi

meta viewport

bosing

Telefonda to'g'ri masshtab

meta description

bosing

Qidiruvdagi qisqa tavsif

charset bo'lmasa nima bo'ladi?

charset YO'Q

sahifa.html

O‘zbekiston, Gʻayrat

VS

charset UTF-8

sahifa.html

O'zbekiston, G'ayrat

<meta charset="UTF-8"> — har doim head'ning birinchi qatoriga yozing.

viewport: telefondagi farq

hammasi mayda viewport YO'Q Salom! o'qish qulay viewport BOR VS
05

Sarlavhalar h1–h6

Matnning mazmun darajasi, kattaligi emas

Sarlavhalar ierarxiyasi

h1 Mening shahrim h2 Tarixi h2 Diqqatga sazovor joylar h3 Masjidlar h1 dan h2, h2 dan h3: pog'onalarni sakramang

Sarlavhalar kodda


<h1>Sevimli o'yinlarim</h1>
<h2>Kompyuter o'yinlari</h2>
<h3>Minecraft</h3>
<h2>Maydon o'yinlari</h2>
<h3>Futbol</h3>
Kattalikni keyin CSS beradi. Hozir faqat daraja haqida o'ylang.

Odatiy xatolar pastga ↓ batafsil

Yopilmagan teg

<p>Matn ... yopuvchisi yo'q

Noto'g'ri tartib

<p><strong>Matn</p></strong>

Qo'shtirnoqsiz atribut

<html lang=uz>

Head dagi narsa body ichida

<body><title>...

Xatoni toping


<html lang=uz>
  <body>
    <title>Test</title>
    <h1>Mening saytim
  </body>
</html>
Kamida 5 ta xato bor. Birinchi bo'lib topgan kim?

Tezkor savol

Qaysi qism ekranda ko'rinmaydi: head yoki body?

head. Faqat title brauzer yorlig'ida chiqadi.

Tezkor savol

Nega <br> yopilmaydi?

Bo'sh teg: ichiga matn olmaydi, shuning uchun yopuvchi tegi yo'q.

Amaliyot: «Men haqimda» 25 daqiqa

Osonsahifa.html: skelet va title. Body da h1: «Salom, ismingiz!»
O'rtameta teglar, h1, uchta h2 (Men haqimda, Qiziqishlarim, Maqsadlarim), har birida p
QiyinQiziqishlar ostida ikkita h3. Kodda indent bo'lsin, hamma teg yopilsin

Xulosa

Bugun o'rgandik

Teg, element, atribut. Skelet: DOCTYPE, html, head, body. Meta teglar va h1 dan h6 gacha.

Uyga vazifa

hobbi.html: sevimli o'yin yoki hobbi sahifasi. To'liq skelet, h1, ikkita h2, bitta h3.

Keyingi dars: matn teglari, havolalar va block/inline