Dasturiy injeneriya

O’ZBEKISTON RESPUBLIKASI
QARSHI TRANSPORT TEXNIKUMI
“DASTURIY INJENERIYA”
YO’NALISHI 03-21 GURUH TALABASI
OZODOVA MOHIGULNING
“WEB DASTURLASH” FANIDAN
“HTML HUJJAT ELEMENTLARI”
MAVZUSIDA TAYYORLAGAN
MUSTAQIL ISHI

Bajardi: M.Ozodova
Tekshirdi: _____________

MAVZU: HTML HUJJAT ELEMENTLARI

Reja:

1. 
   HTML nima?
   
2. 
   HTMLning ishlatish
   
3. 
   Html hujjat elementlari
   

CSS-ni o'rganishni boshlashdan oldin, keling, gipermatn tili nima uchun ekanligini eslaylik. HTML belgilash va kelajakda undan qanday foydalanishimizni hal qiling.

CSS-dan oldin HTML qanday ishlatilgan
HTML (HyperText Markup Language) tilining asosiy maqsadi veb-sahifalardagi ma'lumotlarni tuzishdir. Dastlab, bu til aynan shu maqsadlar uchun ixtiro qilingan. Ammo Internetning mashhurligi o'sa boshlagani sababli, foydalanuvchilarning o'z saytlarini qandaydir tarzda diversifikatsiya qilish va bezashga bo'lgan istagi ham ortib bordi.
Veb-dizaynerlar ma'lumotni chiroyli taqdim etish yo'llarini izlay boshladilar. Biroz HTML teglari mo'ljallangan maqsadlarda foydalanilmaydi, masalan,
Jadvalli tartib yordamida veb-sahifa dizayni to'g'ridan-to'g'ri HTML hujjatida yaratilgan. U erda uslub va formatlash uchun boshqa teglar ham ishlatilgan. Bu qanday muammolarga olib keldi? Birinchidan, HTML kodi nihoyatda uzun bo'lib qoldi, bu hujjatning og'irligiga ham, qidiruv robotlari tomonidan indekslanishiga ham salbiy ta'sir ko'rsatdi. Ikkinchidan, masalan, saytning har bir sahifasidagi h1 sarlavhalarining rangini o'zgartirish uchun men ularning har birini qo'lda ishlashga majbur bo'ldim. Bularning barchasi ko'p vaqt va kuch talab qildi.
Hozircha HTML nima?
Bugungi kunda CSS-ning mavjudligi tufayli sahifa dizaynini uning mazmunidan ajratish, shuningdek, ish jarayonini tezlashtirish va HTML hujjatining hajmini sezilarli darajada kamaytirish mumkin. Uzoq vaqt davomida veb-saytlar qurayotganlar eski odatlardan xalos bo'lishlari va HTMLni faqat ma'lumotlarni tuzish va tartibga solish uchun mo'ljallangan belgilash tili sifatida qabul qilishni o'rganishlari kerak. Yangi boshlanuvchilar uchun sahifalarni jozibador qilish vositasi sifatida HTML-da ko'rishlar yo'qligi sababli veb-sahifalarni yaratishning yangi tamoyillarini o'rganish osonroq bo'ladi. Buning uchun endi CSS javobgar.
Muhim: HTML hujjatini yaratishda uni qanday bezashni emas, balki uni qanday tartibga solish haqida o'ylang. Sahifani hech qanday tarzda tuzmaydigan, faqat dizaynni o'zgartiradigan teglarni unuting, chunki bilan CSS yordamida siz bir xil vizuallarga erishasiz, lekin HTML-ni toza va keraksiz narsalardan xoli saqlang.
Mana CSS uslublari bilan xavfsiz almashtirishingiz mumkin bo'lgan (va kerak) ba'zi HTML teglari:

• 
  "bezatish", atributlarni teglarga moslashtirish (color , bgcolor , align va boshqalar);
  
• 
  teg
  

Strukturalash uchun HTML teglari
Sahifalaringizni tuzish uchun quyidagi teglardan foydalaning:
H1-H6 (sarlavha) h1-h6 teglari sarlavhalar uchundir. Bu teglar yordamida matnni ajratish juda qulay. Yaxshiroq tushunish uchun bo'limlar va kichik bo'limlarga ega bo'lgan kitobni tasavvur qiling. Kitobdagi bobning sarlavhasi h1 , kichik boblar h2 , kichik boblarning qismlari h3 va hokazo.Sarlavha teglaridan doimiy ravishda foydalanish yaxshidir. P (paragraf) teg
Matnning paragraflarini belgilash uchun ishlatiladi. OL, UL (tartibli ro'yxat, tartibsiz ro'yxat) teglar
,
– qulay vosita ro'yxatlarni ko'rsatish uchun (navigatsiya havolalari, matndagi paragraflar, ketma-ket ro'yxat va boshqalar). DL (ta'riflar ro'yxati) tegteglar bilan bog'langan
,
ta'riflar ro'yxatini yaratishda foydalaniladi, bu erda
- ta'rif atamasi,
- ta'rif tavsifi. DIV (bo'linish) DIV - hujjatning bir qismini ajratib ko'rsatish uchun ishlatilishi mumkin bo'lgan blok elementi. mantiqiy birlashma bir nechta elementlar. CSS yordamida siz blokni berishingiz mumkin
zarur ko'rinish va joylashishni aniqlash, lekin o'z-o'zidan
hujjatning ko'rinishini o'zgartirmaydi. SPAN (span) tegi roliga o'xshash
. Lekin
blok elementi hisoblanadi va - chiziq. Masalan, teg ichidagi bitta so'zning uslubini o'zgartirish kerak bo'lsa
Siz bu soʻzni tegga “oʻrab olasiz” , selektor nomi bilan id yoki sinf atributini qo'shing va keyin CSS-da unga kerakli uslubni belgilang. HTML5 semantik teglari HTML hujjatingizni yaxshiroq tuzish uchun kontentingizni yaxshiroq tasvirlashga yordam beradigan yangi teglardan foydalaning. Masalan, sayt sarlavhasi, navigatsiya menyusi va altbilgini boshqa kontentdan qanday ajratish mumkin, agar ularning barchasi teglangan bo'lsa
? HTML5 teglari yordamga keladi,,va boshqalar. Ular tashqi ko'rinishga ta'sir qilmaydi, lekin brauzerlarga navigatsiya qilishda yordam beradi, shuningdek, saytga tashrif buyurgan qidiruv robotlari.
Strukturaviy teglar va CSS-dan foydalanish misollari bilan skrinshotlar
Element
HTML bir nechta versiyalarda mavjud (HTML 4.01, HTML5, XHTML 1.0 va boshqalar), shuning uchun brauzer veb-sahifani to'g'ri talqin qilish uchun siz qaysi til versiyasidan foydalanayotganingizni bilishi kerak. Doctype ni sahifaning eng boshida ko'rsatish tavsiya etiladi (kodning birinchi qatori). Agar siz hujjat turini e'tiborsiz qoldirsangiz yoki xatoga yo'l qo'ysangiz, brauzer veb-sahifani moslik rejimi deb ataladigan rejimda ochadi, bu tarkibni, shu jumladan uslublarni noto'g'ri ko'rsatishga olib kelishi mumkin. Hujjat turini tavsiflashning eng oddiy usuli bu HTML5 hujjat turi (har qanday brauzer uchun mos va HTML5 teglari ishlatilmagan taqdirda ham ishlaydi):
topilmalar
Darsligimizning birinchi bobi nihoyasiga yetdi. Keyingi mashg'ulotlarni davom ettirishdan oldin eslash kerak bo'lgan asosiy fikrlar:
HTML veb-sahifalardagi ma'lumotlarni tizimlashtirish uchun talab qilinadi va tahrirlash uchun ishlatilmaydi ko'rinish hujjat.
CSS veb-sahifalar dizayni uchun javobgardir.
Kabi tuzilish teglaridan foydalanish muhim
shuningdek, kattaroq hujjat semantikasi uchun yangi HTML5 teglari.
Tegni unutish vaqti keldi va boshqa bezak atributlari, shuningdek tegdan foydalanish

hujjat tartibi uchun.
Brauzerlar tomonidan veb-sahifani to'g'ri ko'rsatish uchun siz elementdan foydalanishingiz kerakkodning birinchi qatorida.
Keyingi bobda biz CSS sintaksisi va jadvallarni HTML ga ulash haqida bilib olamiz va birinchi uslubni yozamiz.
HTML asoslari asosiy qoidalarni o'z ichiga oladi HTML tili, HTML-sahifa strukturasi tavsifi, HTML-hujjat tuzilishidagi HTML elementlari orasidagi munosabatlar.
HTML hujjati normal Matnli hujjat, odatdagidek yaratilishi mumkin matn muharriri (daftar), va ixtisoslashtirilganda, kodni ajratib ko'rsatish bilan (Notepad++, Visual Studio Code va boshqalar). HTML hujjatida .html kengaytmasi mavjud.
HTML hujjati HTML elementlari va matn daraxtidan iborat. Har bir element dastlabki hujjatda boshlang'ich (ochilish) va tugatish (yopish) tegi (kamdan-kam holatlardan tashqari) bilan belgilanadi.
Boshlash belgisi element qaerdan boshlanishini, tugashini ko'rsatadi. Yopish belgisi teg nomidan oldin / slash qo'shish orqali hosil qilingan:<имя тега> … . Boshlanish va tugatish teglari o'rtasida tegning mazmuni - kontent joylashgan.
Yagona teglar kontentni bevosita saqlay olmaydi, u atribut qiymati sifatida yoziladi, masalan, teg matnli tugma hosil qiladi Tugma ichida.
Teglar bir-birining ichiga joylashtirilishi mumkin, masalan,
HTML elementlari atributlarga ega bo'lishi mumkin (global, barcha HTML elementlariga qo'llaniladigan va o'zlarining). Atributlar elementning ochilish tegida yoziladi va format atributida ko'rsatilgan nom va qiymatni o'z ichiga oladi name="value" . Atributlar ular o'rnatilgan elementning xususiyatlarini va xatti-harakatlarini o'zgartirishga imkon beradi.
Har bir element bir nechta sinf qiymatlariga va faqat bitta id qiymatiga ega bo'lishi mumkin. Bir nechta sinf qiymatlari bo'sh joy bilan yoziladi,
. Sinf va id qiymatlari faqat harflar, raqamlar, defislar va pastki chiziqdan iborat bo'lishi kerak va faqat harflar yoki raqamlar bilan boshlanishi kerak.
Brauzer HTML-hujjatni ko'radi (talqin qiladi), uning tuzilishini (DOM) quradi va uni ushbu faylga kiritilgan ko'rsatmalarga (uslublar jadvallari, skriptlar) muvofiq ko'rsatadi. Belgilash to'g'ri bo'lsa, brauzer oynasida HTML elementlari - sarlavhalar, jadvallar, rasmlar va boshqalarni o'z ichiga olgan HTML sahifasi ko'rsatiladi.
Tarjima qilish jarayoni (tahlil qilish) veb-sahifa brauzerga to'liq yuklanishidan oldin boshlanadi. Brauzerlar HTML hujjatlarini boshidanoq ketma-ket qayta ishlaydi, CSS-ni qayta ishlaydi va uslublar jadvallarini sahifa elementlari bilan bog'laydi.
HTML hujjati teglar orasidagi ikkita bo'lim - sarlavhadan iborat … va kontent - teglar orasida … .
Web sahifa tuzilishi
1. HTML hujjatning tuzilishi
HTML tili hujjat turi deklaratsiyasi faylidagi qoidalarga amal qiladi. (Hujjat turini aniqlash yoki DTD). DTD qaysi teglar, atributlar va ularning qiymatlari ma'lum bir HTML turi uchun amal qilishini belgilaydigan XML hujjatidir. HTML ning har bir versiyasida o'z DTD mavjud.
DOKTYPE veb-sahifaning brauzer tomonidan to'g'ri ko'rsatilishi uchun javobgardir. DOCTYPE nafaqat HTML versiyasini (masalan, html), balki Internetdagi tegishli DTD faylini ham belgilaydi.
Teg ichidagi elementlar , deb ataladigan hujjat daraxtini hosil qiladi hujjat ob'ekt modeli, DOM (hujjat ob'ekt modeli). Shu bilan birga, element ildiz elementi hisoblanadi.



Guruch. 1. Web-sahifaning eng oddiy tuzilishi
Veb-sahifa elementlarining o'zaro ta'sirini tushunish uchun, deb ataladigan narsalarni ko'rib chiqish kerak "oilaviy munosabatlar" elementlar orasida. Bir nechta ichki elementlar o'rtasidagi munosabatlar ota-ona, bola va aka-uka munosabatlariga bo'linadi.
Ajdod Boshqa elementlarni o'z ichiga olgan element. 1-rasmda barcha elementlarning ajdodi hisoblanadi . Shu bilan birga, element tarkibidagi barcha teglarning ajdodi hisoblanadi:
va hokazo.
avlod- bir yoki bir nechta turdagi elementlar ichida joylashgan element. Misol uchun, avlodidir , va element
Ikkalasining farzandi va .
asosiy element- pastki darajadagi boshqa elementlar bilan bog'langan va ularning ustidagi daraxtda joylashgan element. 1-rasm va . teg
Faqat ota-ona .
bola elementi- yuqori darajadagi boshqa elementga bevosita bo'ysunadigan element. 1-rasmda faqat elementlar Va farzandlaridir .
singlisi elementi- ko'rib chiqilayotgan element bilan umumiy asosiy elementga ega bo'lgan element, bir xil darajadagi elementlar deb ataladi. 1-rasm va - bir xil darajadagi elementlar, shuningdek elementlar va Ular bir-biriga opa-singil.

Xulosa
HTML elementlari atributlarga ega bo'lishi mumkin (global, barcha HTML elementlariga qo'llaniladigan va o'zlarining). Atributlar elementning ochilish tegida yoziladi va format atributida ko'rsatilgan nom va qiymatni o'z ichiga oladi name="value" . Atributlar ular o'rnatilgan elementning xususiyatlarini va xatti-harakatlarini o'zgartirishga imkon beradi.

Foydalanilgan adabiyotlar

1. 
   T. Staufеr. Sozdaniе wеb-stranits. Samouchitеl. – «Pitеr», Sankt-Pеtеrburg, 2003 g.
   

2. A. Goncharеv. HTML. Samouchitеl. – «Pitеr», Sankt-Pеtеrburg, 2001 g.

   
   

3. Allеn Vayk. JavaScript. Entsiklopеdiya polzovatеlya: pеr. s. ang. – «TID» «DS», Kiеv, 2001 g.

   
   

4. webmastering – elеktron o’quv qo’llanma.

   
   

5. A.I. Tixonov. «Publikatsiya dannix v Internet» Uchеbnoе posobiе. Moskva Izdatеlstvo «Мир» 2000

   
   
6. 
   http://uz.wikipedia.org/wiki/HTML
   
7. 
   
   http://javascripts.boom.ru
   
8. 
   
   http://www.vanta.ru/script/