Nizomiy nomidagi Toshkent Davlat pedagogika universiteti Axborot texnologiyalari

Nizomiy nomidagi Toshkent Davlat pedagogika universiteti Axborot texnologiyalari kafedrasi HTMLda matnlar bilash ishlovchi teglar va ularga doir masalalar yechish Bakiyeva Z. R. 12/3/2020 1

Adabiyotlar 12/3/2020 v Е. Л. Полонская, Язык HTML. Изд. Диалектика Москва • Санкт-Петербург • Киев 2003 г. v П. Гончарев, Язык HTML. Изд. Диалектика Москва v Kim Taysek HTML&CSS v Umarova Sh. , Rahmatov M. HTML tili va Namo Web Editor muharriri yordamida veb-sahifalar tayyorlash. 2 JIDU 2006 y

INTERNET ko’lami • Axborot olish; • Mahsulot va xizmat ko’rsatish kompaniyalarini qidirish; • Tajriba almashish; • Ta’lim; • 12/3/2020 Tijorat (oldi- • Sog’liqni saqlash; • Tadbirlar tashkillashtiris h; • Notijorat faoliyat; • Tanishish; • O’yinlar va boshqa qator 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 12/3/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 12/3/2020 5 Berners Li yaratdi.

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 12/3/2020 mumkin 6 olish

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. 12/3/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; • 12/3/2020 Katta yoki kichkina harflarda yozilishi 8 mumkin.

Veb sahifaning asosiy teglari • <html> </html> - Html hujjatning boshi va oxiri; • <title></title> - Veb sahifaning nomi; • <head></head> - sahifaning bosh qismi; • <body></body> - sahifaning asosiy qismi; • 12/3/2020 <body bgcolor=“red” yoki =#kod> 9

Oddiy matnlar bilan ishlash 12/3/2020 10

Matnni formatlash 12/3/2020 11

Matnni formatlash teglari • I – (italic) yotiq shrift Informatika yoki • B – (bold) quyuq shrift Informatika yoki • U – (underline) tagiga chizilgan shrift Informatika 12/3/2020 12

Abzatsni formatlash 12/3/2020 13

- yangi abzats 12/3/2020 14

- yangi qator hosil qilish 12/3/2020 15

Align atributi – abzatsni tekislash 12/3/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. 12/3/2020 17

Shriftlar bilan ishlash ØGarnitura: 12/3/2020 Ø O’lcham: 1<=N<=7 Avto qo’yiladigani: 18 size=3

Shrift o’lchamlaridan namunalar 12/3/2020 19

Sarlavhalar turlari 12/3/2020 20

Ro’yxatlarning turlari <ul type="disk"> <ul type="circle"> <ul type="square" > <ol type=“ 1"> <ol type="I"> <ol type=“i"> <ol type=“A"> <ol type=“a">

Maxsus belgilar ketmaketligi • Qo’shtirnoq 1) «» - « va » 2) „“ - „ va ” 3) ”“ - “ va ” • Tire 1) -(defis) klaviaturada 12/3/2020 2) – (minus) - – • >(katta) - > • < (kichik) - &lt • & (ampersand) & • Bo’sh joy tashlash (probel)- &nbsp • qatorni uzmaslik • - qatorni uzish mumkin 23

Yuguruvchi qator <marquee height="10" width="270" bgcolor=“rang"> MATN </marquee> misol

Hujjatga rasm qo’yish 12/3/2020 25

Rasmning xususiyatlari • (1) - <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="pr 1. png" vspace="10"> (2) - <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="pr

Rasmning xususiyatlari • (1) - <img src="pr 1. png" vspace="10"> (2) - <img src="pr 1. png" hspace="30"> (3) - <img src="pr 1. png" alt=“foto"> (4) - <img src="pr 1. png" width="100"> (5) - <img src="pr 1. png" height="200"> (6) - <img src="pr 1. png" border="5“ bordercolor="#CC 0000">

Rasmga yo’l ko’rsatish • Hujjat va rasm bitta papkada joylashgan: <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“book. jpg” width=100

Rasmga yo’l ko’rsatish • Hujjat va rasm bitta papkada joylashgan: <img src=“book. jpg” width=100 height=100> • Hujjat va rasm turli papkada joylashgan: <img src=“c: /papka 1/papka 2/book. jpg”> • Hujjat va rasm ichma-ich papkada joylashgan: <img src=“papka 2/book. jpg”> • Hujjat va rasm turli saytlarda joylashgan: 12/3/2020 27 <img

Jadvallar bilan ishlash • <table></table> jadval qo’yish • <tr>(table rows)satrlar • <td> (table data)yacheyka <td nowrap>qatornibo’lmaslik <td width=100 yoki 12/3/2020 100%> • <caption> -jadval nomi • <table border=2> jadval chegarasining kengligi • Gorizontal tekislash: Align=left, right, cent er 28 • Vertikal tekislash:

Jadvallar yaratish 12/3/2020 29

Freymlar • Freymlar yordamida ekran bir nechta nomlangan ramkalarga bo’linadi va har bir freymga boshqa-boshqa Veb sahifalarni bir paytda yuklash mumkin. • <frameset rows=“ 25%, *”>…</frameset> • <frameset cols=“ 30%, *”>…</frameset> • <frame src=“fayl 1. htm” name=“fr 1”> 12/3/2020 30

12/3/2020 31

Freymlar hosil qilish 12/3/2020 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); • <a></a> anchore (Internet dengizidagi langar) 12/3/2020 33

Shu faylning biror aniq joyiga bog’lanish <a name=“kitob”> <a href=“#kitob"> misol 12/3/2020 fayl Kitob(zakladka) 34

Boshqa faylga giperbog’lanish <a href=“fayl 2. htm”>Boshqa faylning boshiga o’tish</a> fayl 1 12/3/2020 fayl 2 35

Boshqa faylning biror aniq joyiga bog’lanish <a href=“fayl 2. htm#kitob"> (fayl 1. htm da yoziladi) <a name=“kitob”> (fayl 2. htm da yoziladi) fayl 1 fayl 2 Kitob(zakladka) 12/3/2020 36

Boshqa oyna orqali bog’lanish • <a href=“fayl 2. htm“ target=“freym 2”> yoki • <a href=“fayl 2. htm#kitob“ target=“freym 2”> freym 1 fayl 1 12/3/2020 freym 2 fayl 2 misol 37

Rasmdan gipermurojaat <a href="big. jpg"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="small. jpg"> </a> misol

Rasmdan gipermurojaat <a href="big. jpg"> <img src="small. jpg"> </a> misol

Rasm qismidan gipermurojaat <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“ris. gif" usemap="#karta 2">. . . <map name="karta 2"> <area

Rasm qismidan gipermurojaat <img src=“ris. gif" usemap="#karta 2">. . . <map name="karta 2"> <area href=“name. html" shape="circle" coords=“X, Y, R"> </map> misol