8-sinf · Informatika va AT · 2-chorak · 10-dars

HTML tushunchasi va veb-sahifani sozlash

Bob: Maqsadni amalga oshirish uchun veb-sayt dizaynini yaratish

infoqadam.uzInformatikani qadam-baqadam o‘rganamiz
Bugungi dars rejasi

Darsimiz 6 qadamdan iborat

1Tashkiliy qismSalomlashish, davomat, dars maqsadi
2TakrorlashO‘tgan mavzular bo‘yicha savollar
3Yangi mavzuVeb-sayt, HTML, teglar, sahifa tuzilmasi, saqlash
4Mustahkamlash«Ochishmi, yopishmi?» o‘yini, «Xatoni toping»
5BaholashMezonlar va o‘z-o‘zini baholash
6Uy vazifasiDarslik va saytdagi topshiriqlar
1 · Tashkiliy qism

Bugun nimani o‘rganamiz?

Dars oxirida siz:

  • veb-sayt va veb-sahifa farqini bilasiz;
  • HTML nima ekanini tushuntirasiz;
  • ochish va yopish teglarini ajratasiz;
  • veb-sahifa tuzilmasini yozib, uni .html fayl qilib saqlaysiz.

Yangi bob

Bu bobda HTML yordamida sevimli super qahramonlar haqida veb-sayt yaratamiz. Bugun birinchi sahifani sozlaymiz.

2 · Takrorlash

1-chorakni eslaymiz (Scratch)

1. Scratch’dagi o‘yinda ochkolarni saqlash uchun nima ishlatiladi?O‘zgaruvchi (Variable), masalan «Ochkolar».
2. «Agar … bo‘lsa» bloki qanday dasturlashga misol?Shartli dasturlash.
3. Dasturdagi xatolarni topib tuzatish nima deb ataladi?Debaglash.
3 · Yangi mavzu

Brauzer sahifani qanday «tushunadi»?

Sahifani foydalanuvchiga bitta katta rasm qilib yuborsak bo‘lmaydimi?

Bitta katta rasm bo‘lsa…

Matnni nusxalab ham, qidirib ham bo‘lmaydi; havolalar ishlamaydi; telefon ekraniga moslashmaydi.

HTML kod bo‘lsa…

Brauzer har bir sarlavha, matn va rasmni o‘z joyiga qo‘yadi va har xil ekranga moslaydi.

3 · Yangi mavzu

Veb-sayt va veb-sahifa

Veb-sayt

Veb-sahifalar majmui.

Veb-sahifa

Veb-saytdagi bitta sahifa.

Auditoriya va maqsad

Auditoriya — sahifaga tashrif buyuruvchilar. Maqsad — sahifa nima uchun yaratilgani.

3 · Yangi mavzu

HTML nima?

HTML — HyperText Markup Language, gipermatnni belgilash tili. Veb-sahifa yaratish uchun ishlatiladi.

Boshqa tillar: CSS, JavaScript, PHP. HTML — eng eski va keng tarqalganlaridan biri.

Kim o‘qiydi?

Veb-brauzer HTML kodni o‘qib, matn va tasvirlarni to‘g‘ri joylashtirib ko‘rsatadi.

Bilasizmi?

Birinchi veb-sayt — info.cern.ch, 1991-yil 6-avgust.

3 · Yangi mavzu

Teglar: ochish va yopish

<head>…</head>
ochish tegiyopish tegi
  • Teg — kontent va uslub qo‘shish uchun kod qismi, < > ichida yoziladi.
  • Yopish tegi «/» bilan boshlanadi.
  • Qavs va so‘z orasida bo‘sh joy bo‘lmaydi: <head> ✔, < head> ✘
3 · Yangi mavzu

Veb-sahifaning asosiy tuzilmasi

<!DOCTYPE html>
<html>
<head>
  <title>Bosh sahifa</title>
</head>
<body>
</body>
</html>
QismVazifasi
<!DOCTYPE html>Bu — HTML hujjat (veb-sahifa)
<html>Sahifa boshi va oxiri
<head>Bosh qism: sahifa nomi va boshqalar
<title>Brauzer panelidagi sahifa nomi
<body>Asosiy qism: barcha kontent
3 · Yangi mavzu

<title> qayerda ko‘rinadi?

Bosh sahifa 1
C:/Website/Bosh_sahifa.html
bu yerda <body> kontenti ko‘rinadi 2
  • 1<title> matni — brauzer panelida (vkladkada)
  • 2<body> ichidagi hamma narsa — sahifaning o‘zida
3 · Yangi mavzu

Sahifani saqlash va ochish

Notepad’da

  1. Kodni yozing.
  2. File → Save As.
  3. Nom: Bosh_sahifa.html → Save.
  4. Faylni bosing — brauzerda ochiladi.

Papkalar

Website — veb-sahifalar uchun,
Images — rasmlar uchun (Website ichida).

Kodni o‘zgartirsangiz — Save va brauzerda yangilash.

4 · Mustahkamlash · Jamoaviy o‘yin

«Ochishmi, yopishmi?»

Jamoalar navbat bilan javob beradi. O‘qituvchi tanlangan javobni bosadi.

1-jamoa0
2-jamoa0

4 · Mustahkamlash

Xatoni toping!

1. < title>Bosh sahifa</title>Qavs va so‘z orasida bo‘sh joy bor: <title> bo‘lishi kerak.
2. <head><title>Sahifa</title> … keyin darhol <body></head> yopish tegi yozilmagan.
3. Fayl Bosh_sahifa.txt deb saqlandiKengaytma .html bo‘lishi kerak, aks holda brauzer sahifa sifatida ochmaydi.
4. <title> tegi <body> ichiga yozilgan<title> <head> ichida bo‘lishi kerak.
5 · Baholash

O‘zingizni baholang

Men bugun…

  • veb-sayt va veb-sahifani farqlayman;
  • HTML va teg nima ekanini bilaman;
  • sahifa tuzilmasini xatosiz yoza olaman;
  • sahifani .html qilib saqlab, brauzerda ocha olaman.

Har bir band uchun barmoq ko‘rsating: ✋ to‘liq · ✌ qisman · ☝ yordam kerak

Baholash mezonlari

BahoNimani bajardi
5Barcha savollarga to‘g‘ri javob, amaliy topshiriq to‘liq
4Kichik xatolar bilan bajardi
3Yordam bilan bajardi
6 · Uy vazifasi

Uyga vazifa

  1. Darslikning 54–59-betlarini o‘qing.
  2. Kalit so‘zlarni daftarga yozing: veb-sayt, veb-sahifa, auditoriya, maqsad, HTML, manba kodi, teg, ochish tegi, yopish tegi.
  3. Daftarga «Bosh sahifa» nomli veb-sahifaning asosiy tuzilmasini yozing.

Saytda mashq qiling

infoqadam.uz → 8-sinf → 2-chorak → 10-dars

HTML laboratoriyada sahifa tuzilmasini yozing va 10 savollik testni bajaring.

E’tiboringiz uchun rahmat!

Keyingi darsda: veb-sahifaga matn, sarlavha va havolalar joylashtirish

infoqadam.uzInformatikani qadam-baqadam o‘rganamiz
← Dars 1 / 16