Transcript HTML tili va VEB sahifalar tayyorlash
O’zbekiston Respublikasi Xalq ta’limi vazipligi Ajiniyoz nomidagi Nukus Davlat pedagogika instituti Informatika va axborot texnologiyalari kafedrasi HTML tili va veb-sahifalar tayyorlash Турениязова А
29.04.2020
1
29.04.2020
Adabiyotlar
Е.Л.Полонская, Язык HTML . Изд.Диалектика Москва • Санкт Петербург • Киев 2003г.
П.Гончарев, Язык HTML . Изд.Диалектика Москва
Kim Taysek HTML&CSS
Umarova Sh., Rahmatov M. HTML tili va Namo Web Editor muharriri yordamida veb-sahifalar tayyorlash. JIDU 2006 y
2
INTERNET ko’lami
• Axborot olish; • Mahsulot va xizmat
ko’rsatish kompaniyalarini qidirish;
• Tajriba almashish; • Ta’lim; • Tijorat (oldi-sotdi); 29.04.2020
• Sog’liqni saqlash; • Tadbirlar
tashkillashtirish;
• Notijorat faoliyat; • Tanishish; • O’yinlar va
boshqa qator yo’nalishlar.
3
Internet – bu …
• Internet (Net-tarmoq) dunyodagi eng yirik
kompyuter tarmog’idir;
• Elektron pochta; • Web – o’zaro bog’langan ko’plab axborotli
sahifalarning yig’indisi;
• Internet Explorer – Veb hujjatlarni ko’ruvchi
brouzer programmasi
29.04.2020
4
WWW nima?
• World Wide Web -butun jahon o’rgimchak to’ri • http {протокол передачи гипер-текстовых
файлов) — veb-brouzer va Veb server orasidagi aloqa;
• URL {унифицированный указатель
информационных ресурсов) – adres.
• HTML {язык разметки гипертекста) — Veb
sahifalar yoziladigan til, uning 1-versiyasi 1989 yilda Jenevadagi elementar zarralar fizikasi Evropa laboratoriyasida kashf etildi. Uni britaniyalik tadqiqotchi Tim Berners Li yaratdi.
29.04.2020
5
HTML nima uchun zarur?
HTML {язык разметки гипертекста) — Veb sahifalar yoziladigan til bo’lib, u dasturlash tili emas.
Fayllarning o’lchami kichik bo’lishi lozim, chunki… Modem tezligi 128 Kbit/s=16 Kbayt/s Tarmoqdagi xatoliklar hisobga olinsa: 16/1.5=10.66
1 minutda 10.66*60=640 Kbayt axborot olish mumkin Dasturiy ta’minot ham arzonga tushadi.
29.04.2020
6
HTML redaktorlar 1) Vizual redaktorlar
• Word • Namo Web Editor • Macromedia Dreamweaver MX va h.
2) Vizual bo’lmagan redaktorlar (faqat HTML-kod ko’rinishida)
• Notepad (Bloknot) • Home Site va h. 29.04.2020
7
Deskriptor (teg)lar – kalit so’zlar
• Teglar HTML ning kalit so’zlari bo’lib,
hujjatning biror qismini kerakli ko’rinishda formatlash uchun ishlatiladi;
• Ular < (kichik) va > (katta) belgilari orasiga
yoziladi;
• Ular ochiluvchi <> va yopiluvchi > bo’lishi
mumkin;
• Katta yoki kichkina harflarda yozilishi
mumkin.
29.04.2020
8
Veb sahifaning asosiy teglari
• - Html hujjatning boshi va
oxiri;
•
9
Oddiy matnlar bilan ishlash
29.04.2020
10
29.04.2020
Matnni formatlash
11
Matnni formatlash teglari
• I – (italic) yotiq shrift yoki
Informatika
• B – (bold) quyuq shrift yoki
Informatika
• U – (underline) tagiga chizilgan shrift Informatika 29.04.2020
12
29.04.2020
Abzatsni formatlash
13
- yangi abzats
29.04.2020
14
- yangi qator hosil qilish
29.04.2020
15
Align atributi – abzatsni tekislash
29.04.2020
16
Abzatsni tekislash
•
- abzatsni ekranning chap
chegarasiga nisbatan tekislaydi.
•
- abzatsni ekranning
markaziga nisbatan tekislaydi.
•
- abzatsni ekranning o’ng
chegarasiga nisbatan tekislaydi.
•
- abzatsni ekranning har ikki
chegarasiga nisbatan tekislaydi.
29.04.2020
17
Shriftlar bilan ishlash
Garnitura:
O’lcham: 1<=N<=7 Avto qo’yiladigani: size=3
29.04.2020
18
Shrift o’lchamlaridan namunalar
29.04.2020
19
29.04.2020
Sarlavhalar turlari
20
Ro’yxatlar tashkil etish
•
•
•
21
Ro’yxatlarning turlari
- type=“1">
- type="I">
- type=“i">
- type=“A">
- type=“a">
• •
Maxsus belgilar ketma ketligi Qo’shtirnoq
• >(katta) - >
1)«» - « va »
• < (kichik) - <
2) „“ - „ va ”
• & (ampersand) - &
3) ”“ - “ va ”
• Bo’sh joy tashlash
(probel)-   Tire 1) -(defis) -klaviaturada
•
qatorni uzmaslik 2) – (minus) - – 3) —(tire) - —
•
mumkin
29.04.2020
23
Yuguruvchi qator misol
Hujjatga rasm qo’yish
29.04.2020
25
Rasmning xususiyatlari • (1) - (2) - (3) - (4) - (5) - (6) -
Rasmga yo’l ko’rsatish
• Hujjat va rasm bitta papkada joylashgan:
• Hujjat va rasm turli papkada joylashgan:
• Hujjat va rasm ichma-ich papkada joylashgan:
• Hujjat va rasm turli saytlarda joylashgan:
29.04.2020
27
Jadvallar bilan ishlash
• - jadval
qo’yish
• 29.04.2020 • jadval chegarasining kengligi •Gorizontal tekislash: Align=left,right,center •Vertikal tekislash: Valign=top, middle, bottom 28 29.04.2020 Jadvallar yaratish 29 Freymlar • Freymlar yordamida ekran bir nechta nomlangan ramkalarga bo’linadi va har bir freymga boshqa-boshqa Veb sahifalarni bir paytda yuklash mumkin. • • • 29.04.2020 30 29.04.2020 31 29.04.2020 Freymlar hosil qilish 32 Giperbog’lanishlar • Giperbog’lanish bu - gipermatnli hujjatdan boshqa bir hujjatga o’tish uchun yo’l ko’rsatib turadigan ko’rsatkichdir. • Kirish nuqtasi (qayerdan o’tiladi); • O’tish nuqtasi (qayerga o’tiladi); • anchore (Internet dengizidagi langar) 29.04.2020 33 Shu faylning biror aniq joyiga bog’lanish fayl Kitob(zakladka) misol 29.04.2020 34 Boshqa faylga giperbog’lanish Boshqa faylning boshiga o’tish fayl1 fayl2 29.04.2020 35 Boshqa faylning biror aniq joyiga bog’lanish (fayl1.htm da yoziladi) (fayl2.htm da yoziladi) fayl1 fayl2 Kitob(zakladka) 29.04.2020 36 Boshqa oyna orqali bog’lanish • • freym1 freym2 fayl2 fayl1 29.04.2020 misol 37 misol Rasm qismidan gipermurojaat usemap="#karta2"> ... misol 29.04.2020 Namo Web Editor 5.5 40 Namo Web Editor (HTML kod) 29.04.2020 41 29.04.2020 Freymlarga bo’lish 42 29.04.2020 Clip Art ob’yektlarini qo’yish 43 Animatsion ob’yektlar qo’yish 29.04.2020 44 29.04.2020 Namo GIF Animator 45(table rows)- satrlar • (table data)-yacheyka
qatornibo’lmaslik
-