Samdu kattaqo’rg’on filiali Pedagogika va tillarni o’qitish fakulteti Maktabgacha ta’lim yo’nalishi(sirtqi)

SamDU Kattaqo’rg’on filiali
Pedagogika va tillarni o’qitish fakulteti
Maktabgacha ta’lim yo’nalishi(sirtqi)
22-14-guruh talabasining
MUSTAQIL ISHI
FAN: Umumiy pedagogika


MAVZU: HTML hujjatining tuzlish





Bajardi: Boltayeva Dilnoza


Tekshirdi:Bozorov Bobir
MAVZU: HTML hujjatining tuzlish
Reja
HTML hujjat tuzilishi
Bosh yorlig'i
HTML sintaksisi

HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, fayllar va sayt sahifalarini qanday qilib to'g'ri yaratish haqida gaplashamiz.

HTML hujjat tuzilishi
Hamma narsa qanday ishlashini tushunish uchun html hujjatining tuzilishini ko'rib chiqamiz. Yaroqli deb hisoblash uchun sahifada qaysi simli ramka bo'lishi kerakligini bilib olasiz ( to'g'ri).
Har qanday veb-sahifani yaratish uchun minimal teglar to'plami bo'lishi kerak. Ular quyidagi misolda joylashgan.

Qanday qilib Internetda veb-sayt yaratish

Brauzer o'zi ushbu teglarning barchasini izohlaydi va ularni foydalanuvchi uchun bitta ma'lumot shaklida namoyish etadi. Saytga kirganingizda ushbu elementlar ekranda ko'rinmasligini o'zingiz sezdingiz. Siz faqat brauzer chiqaradigan chiroyli o'ramni ko'rasiz.

 HTML sahifasining ingl. MisoliDOCTYPE yorlig'i
DOCTYPE yorlig'i har doim veb-sahifaning boshida paydo bo'ladi. Amaldagi hujjatning turini ko'rsatish talab qilinadi. Va bundan tashqari, brauzer html-ning qaysi versiyasidan foydalanilishini tushunadi.
Oxirgi 5-versiyada quyidagicha ko'rinadi:
HTML yorlig'i
Bu veb-sahifaning barcha tarkibini o'z ichiga olgan konteyner. Ochish va yopish elementlari hujjatda ixtiyoriydir. Biroq, yaxshi uslub ulardan foydalanishni talab qiladi.
Odatda, ochilgan HTML yorlig'i hujjatning doctype ta'rifidan keyin ikkinchi o'rinda turadi. Yakunlovchi har doim sahifada oxirgi o'rinda turadi.
Ushbu teg brauzerga html hujjatimiz qayerda boshlanishini va tugashini bildiradi. Shuning uchun boshqa barcha elementlar ( hujjat turidan tashqari) ushbu idish ichiga joylashtirilgan bo'lishi kerak.
Bosh yorlig'i
Bosh yorliq brauzer ma'lumotlari bilan ishlashiga yordam beradigan boshqa elementlarni saqlash uchun mo'ljallangan. Shuningdek, konteyner ichida ma'lumotni saqlash uchun ishlatiladigan meta teglar mavjud. Bu brauzerlar va qidiruv tizimlari uchun mo'ljallangan.

Bosh tarkib to'g'ridan-to'g'ri veb-sahifada ko'rsatilmaydi, faqat sarlavha yorlig'i bundan mustasno. U sahifa sarlavhasi uchun javobgardir.
Umuman olganda, ushbu element sahifadagi barcha texnik ma'lumotlarni saqlaydi. Masalan, sahifaning HTML kodlash turi. Bu brauzerda hujjatning kodini qanday yaxshiroq hal qilish kerakligini aytib beradi. Shuningdek, biz bu erda va turli xil skriptlarda.
Sarlavha yorlig'i
Boshning bitta kerakli komponenti mavjud. Bu sarlavha yorlig'i. U sahifaning HTML sarlavhasi qanday ko'rinishda bo'lishiga javobgardir. Bu erda yozganlaringiz brauzer yorlig'ida ko'rsatiladi.
Buni jiddiy qabul qiling!
Ushbu elementda men bo'sh joy bilan 60 belgidan ko'p bo'lmagan nomdan foydalanishni tavsiya etaman. Bu qidiruv natijalarida to'xtamasligi uchun kerak. Va bu erga mazmunli so'zlarni kiriting. Ya'ni, biz sahifaning nima haqida bo'lishini aniq yozamiz.

Albatta, siz kalit so'zlarni kiritishingiz va ismingizni yanada jozibali qilishingiz kerak. Aks holda, qidiruv trafigini yo'qotish xavfi bor.
Meta yorlig'i
Yana bir element meta tegidir. U juft emas va juda katta qiymatni anglatmaydi. Biroq, eng muhim elementlar uning atributlari.

Shunday qilib, parametrlar va atributlardan foydalangan holda teg sizning sahifangiz haqida muhim ma'lumotlarni saqlashi mumkin.
Charset parametrini elementga qo'shamiz va undagi hujjatning afzal kodlanishini ko'rsatamiz.

Parametr qanday ko'rsatilganiga e'tibor bering. Biz uni yorliq ichiga va to'g'ri yopiladigan qavsdan oldin joylashtiramiz. Keyin teng belgini qo'ying va tirnoqlarda hujjatning kodlanishini ko'rsating.
Hujjatlaringizga kiritganingizga ishonch hosil qiling. Aks holda, saytingizda matn o'rniga chirkin iyerogliflar paydo bo'ladi ( krakozyabry).
Kuzov yorlig'i
Quyida tana yorlig'i ko'rsatilgan. Bu hujjatning asosiy qismidir. Uning ichida foydalanuvchi ko'rishi mumkin bo'lgan tarkib mavjud. Bu matn, rasm, havolalar, videolar va boshqalar bo'lishi mumkin.
Tananing har doim bosh yorlig'i ostiga tushishini unutmang. Ya'ni, avval sahifa haqida texnik ma'lumotlar va undan keyin foydalanuvchi uchun asosiy tarkib keladi. Ammo aksincha emas!
Tananing ichida h1 yorlig'i bo'lishi kerak. Bu materialning sarlavhasi. Ya'ni, sizning maqolangiz nima deb nomlanadi. Ismni bo'shliqlar bilan 55 belgidan ko'p bo'lmagan qilishni tavsiya qilaman.
HTML sintaksisi
HTML sintaksisini eslatib o'tishga arziydi. Darhol yuqoridagi misolda bo'lgani kabi teglarni tartibga solishga harakat qiling. Albatta, siz ularni tartibsiz tartibga solishingiz mumkin.

Bu erda hujjatning tarkibi joylashgan bo'lib, u barcha foydalanuvchilarga ko'rinadi.

Brauzer ahamiyatsiz bo'ladi.
U baribir sahifani to'g'ri ko'rsatib beradi. Ammo sahifaning html kodini o'zingiz tahrirlash siz uchun juda noqulay bo'ladi. Shuning uchun, men haykaltaroshlik qilmaslikni va uni diqqat bilan bajarishni maslahat beraman.
Har doim alohida teglarni alohida satrlarga joylashtiring. Va kuzatib boring uyalash qoidasi... Barcha ichki teglar ota-ona elementidan bitta yorliqqa tushiriladi.

Material nomi
Asosiy matn

Ya'ni, bosh yorlig'i html yorlig'iga nisbatan bitta yorliqqa kirishi kerak. Tana bosh bilan tenglashadi, chunki u html konteynerida joylashgan.
Umuman olganda, manba kodi bilan tez va qulay ishlash uchun elementlarning uyalash darajasida chuqurchaga rioya qilishni unutmang.
Istisnolar faqat bosh va tanadir. Ular har bir sahifada faqat bir marta ishlatiladi. Shuning uchun, katta uyalash bilan o'ng tomonga uzoqqa bormaslik uchun, bu elementlar chuqursiz bajarilishi mumkin.

Asosiy matn

Ko'p joylashtirish bilan bu usul bo'sh joyni tejaydi va html tarkibida adashmaydi.
Ma'lumki, teglar bir-biriga joylashtirilishi mumkin. Masalan, matn va rasm har xil teglarda joylashgan. Biroq, ular umumiy ota-onaga ham ega.
Agar yorliq ochilayotgan bo'lsa, uni yopish kerak. Agar u bo'sh bo'lsa va yopiq qismsiz bo'lsa, unda bunday yorliqqa hech narsa qo'shib bo'lmaydi.
Buyurtmani bajarish muhimdir!
Agar biron bir tegda boshqa yorliq joylashtirilgan bo'lsa, unda bitta tegning ochilish qismi birinchi o'rinda turadi. Keyin boshqasining ochilish qismi va boshqalar. Shundan keyingina ularni yopish kerak. Ammo bu teskari tartibda amalga oshirilishi kerak. Ya'ni, avval biz ikkinchi yorliqni yopamiz va faqat oxirida biz birinchisiga erishamiz.
To'g'ri misol:

Bu erda hujjatning tarkibi joylashgan bo'lib, u barcha foydalanuvchilarga ko'rinadi.

Noto'g'ri misol:

Bu erda hujjatning tarkibi joylashgan bo'lib, u barcha foydalanuvchilarga ko'rinadi.

Bundan tashqari, bir nechta elementlar bitta tegga joylashtirilishi mumkin. Ammo printsip bir xil. Avval uni ochamiz. Keyin u erga bir nechta teglar qo'yamiz va keyin uni yopamiz.
Eng katta qulaylik uchun siz koddagi HTML sharhlaridan qo'shimcha ravishda foydalanishingiz mumkin. Masalan, berilgan kod parchasi nima uchun javobgarligini yozing. Bu rivojlanayotganda juda foydali.
Izohning o'zi bitta qatorli yoki ko'p qatorli bo'lishi mumkin.

Asosiy matn

Bu tuzilmalar o'rtasida belgilanadi.
HTML fayli qanday yaratiladi
Ba'zilaringiz HTML faylini qanday yaratishni bilmasliklari mumkin. Ushbu vazifani bajarish uchun ko'plab maxsus dasturlar mavjud:
Qavslar
Daftar
Notepad ++
Yuksak matn
Atom va boshqalar

Agar sizda Windows bo'lsa, bloknot allaqachon sukut bo'yicha mavjud bo'ladi. Ammo ulardan foydalanish qulay emas. Ishni boshlash uchun HTML-sahifaning bepul muharriri Notepad ++ dan foydalanishni tavsiya etaman. Kod bilan qulay ishlash uchun juda ko'p imkoniyatlar mavjud.
Muharrirni ishga tushirganingizda, sizning oldingizda allaqachon yangi bo'sh fayl bo'ladi. Unda html sahifasining skeletini yozing ( tana go'shti), biz yuqorida muhokama qildik. U har doim ishtirok etishi kerak.

Qanday qilib Internetda veb-sayt yaratish
Bu erda hujjatning tarkibi joylashgan bo'lib, u barcha foydalanuvchilarga ko'rinadi.

Siz o'zingiz uchun matnni o'zgartirishingiz mumkin. Umuman olganda, bu eng oddiy HTML sahifasi bo'ladi.
HTML kodlash
Sahifalarni yaratishda har doim kodlashni meta tegiga yozing. Bu boshga kiritilgan xizmat yorlig'i.
Umuman olganda, ushbu meta element ko'p qirrali. U nafaqat kodlash uchun, balki boshqa ko'p narsalar uchun ham javobgar bo'lishi mumkin. Biroq, bu haqda keyingi maqolalarda gaplashamiz.
Endi u kodlash ko'rsatkichi rolini o'ynaydi. Bu erda maxsus yozuv mavjud. Bu hujjat kodlanganligini brauzerga aytadi utf-8.

Kodlash nima uchun kerak?
Hech kimga sir emaski, butun dunyo bo'ylab odamlar turli tillarda gapirishadi va yozadilar. Agar biz sahifani yaratib, rus tilida yozsak, Germaniyada ular nemis tilida yaratadilar va yozadilar. Boshqa mamlakatlarda allaqachon o'z tili mavjud.
Ilgari, html sahifasini yaratishda rus tilida yozadigan kodlashni ko'rsatish kerak edi. Nemislarga nemis tilida yozayotganlarini va boshqalarni aytish kerak edi.
Sahifaga kirganimizda brauzer sayt qaysi tilda yozilganligini allaqachon tushunadi. Shuningdek, u matn uchun qanday til ishlatilishini tushunadi. Shunga ko'ra, ushbu kodlash tarkibiga qarab ushbu matn tarkibini namoyish etishga harakat qiladi.
Afsuski, bu har doim ham amalga oshmadi.
Agar biz xitoy saytlariga borgan bo'lsak, ularning ramzlari o'rniga qora kvadratchalar yoki savol belgilarini ko'rsatish mumkin edi. Ya'ni, brauzer bu belgilar nima ekanligini tushunmadi.

HTML kodlash noto‘g‘ri
Ushbu muammoning echimi sifatida universal utf-8 kodlash yaratildi.
U standartga aylanganda, ma'lum bir til uchun maxsus kodlashni ko'rsatishning hojati yo'q edi. Umumjahonni ko'rsatish kifoya edi utf-8 va sizning saytingiz barcha brauzerlarda odatiy ko'rinishda bo'ladi.
Bu ma'lumotlar bazasi bilan ishlashni ham osonlashtiradi. Shuning uchun, biz har doim utf-8 da kodlashni aniqlab olamiz. Ammo bu erda siz yana bir narsaga e'tiboringizni qaratishingiz kerak.