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. Misoli

DOCTYPE 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.

Internetda professional veb-sayt yaratish misollar bilan

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.

Internetda professional veb-sayt yaratish misollar bilan

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.

Internetda professional veb-sayt yaratish misollar bilan

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.

Hujjat nomi

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.

Hujjat nomi

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.

Hujjat nomi

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.

Internetda professional veb-sayt yaratish misollar bilan

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.

HTML utf-8-ni saqlash

Har bir narsa ishlashi va brauzer sahifani ko'rsatishi uchun html hujjatning o'zini utf-8-da saqlash tavsiya etiladi. Bu erda Notepad ++ bizga juda yaxshi yordam beradi.

Bu erda "Kodlashlar" elementi mavjud. Agar sizda hozirda kodlash bo'lmasa ( quyidagi rasmimda bo'lgani kabi), so'ngra "BOM holda UTF-8 ga aylantirish" tugmachasini bosing.

Bunday holda, sizning HTML faylingiz utf-8 kodlashiga aylantiriladi. O'zgarishlaringizni saqlang.

Pastki o'ng burchakda "Dos \\ Windows ANSI as UTF-8" yozuvini topasiz. Bu shuni anglatadiki, hujjat utf-8 rejimida yaratilgan va displey normal holatda bo'ladi.

Va darhol bunday maslahat!

"Parametrlar" -\u003e "Sozlamalar" bo'limiga o'ting. Bu erda "Yangi hujjat" yorlig'i mavjud. Darhol "UTF-8 BOM yorlig'isiz" katagiga belgi qo'ying. Shunday qilib, barcha yangi hujjatlar ushbu kodlashda darhol yaratiladi.

HTML-sahifani qanday saqlash kerak

Fayl nomi har qanday bo'lishi mumkin. Ammo sukut bo'yicha va ayniqsa, agar bu saytning asosiy sahifasi bo'lsa, uni saqlang index.html.

Muayyan sahifani ko'rsatmasdan sayt manzilini yozganimizda, bu biz index.html sahifasini talab qilayotganimizni anglatadi. Ya'ni, biz serverga kirganimizda, u indeks sahifasini kengaytiradi.

Agar ma'lum bir sahifani ko'rsatadigan bo'lsak, u holda u oxirida ko'rsatiladi. Ammo hech qanday manzil ko'rsatilmagan bo'lsa, indeks sahifasi qaytariladi. Shuning uchun, biz sukut bo'yicha sahifani index.html deb nomlaymiz.

Va siz sezganingizdek, fayl kengaytmasi bo'lishi kerak hTML... Ya'ni, fayl turida "Hyper Text Markup Language" ni tanlang va "Saqlash" tugmasini bosing.

HTML faylini qanday ochish kerak

Sahifaning vizual ko'rinishini ko'rish uchun HTML faylini qanday ochish kerak. Buning uchun biz har qanday brauzerdan foydalanamiz: Google Chrome, Opera, Edge, Mozilla Firefox, Safari va boshqalar.

Html kengaytmasi bilan fayllarni saqlashimiz ajablanarli emas. Axir faqat ushbu turdagi hujjatlar brauzerlar tomonidan ko'paytiriladi. Va HTML o'zi brauzerlar tomonidan keyinchalik ko'rsatilishi uchun sahifalarni belgilash standartidir.

Umuman olganda, sichqonchaning o'ng tugmasi bilan faylni bosamiz.

Menyuda "Bilan ochish" -ga ishora qiling va kerakli brauzer parametrini tanlang. Agar ular ko'rsatilmasa, "Boshqa dasturni tanlash" -ni bosing. U erda allaqachon ro'yxat ichida HTML sahifalarini o'qish uchun kerakli dasturni tanlang.

Agar sizga kodni tahrirlash kerak bo'lsa, unda tegishli muharrirni tanlang. Notepad ++ dan foydalanishni tavsiya etaman.

Sahifaning HTML kodini qanday ko'rish mumkin

Men sizga qanday qilib brauzerda sahifaning HTML kodini ko'rishingiz mumkinligini aytmoqchiman. Bu amalda juda foydali. Masalan, ma'lum bir sayt html kodining qaysi tuzilishini ishlatishini bilib oling.

Kodni ko'rish juda oson. Klaviatura yorlig'ini bosing Ctrl + U... Sayt sahifasining manba kodi yangi yorliqda ochiladi.

Saytning manba kodi

Shuningdek, manzil satriga sahifa manzilidan oldin yozishingiz mumkin:

Brauzerlarda veb-ishlab chiquvchi vositasi ham mavjud. Har bir dastur uchun menyuda unga kirish har xil bo'ladi. Biroq, kalit bilan F12 ushbu vosita har qanday brauzerda ochiladi.

Brauzerni ishlab chiquvchi vosita

"Elements" yorlig'ida chapda, o'ngda esa HTML kodi bo'ladi. Bunday vosita undagi kodni tahrirlashingiz va natijani darhol ko'rishingiz bilan qulaydir. Shuningdek, tahrirlash paytida ko'rsatmalar ko'rsatilishi mumkin. Bu ham foydali.

HTML kod - bu HTML tili yordamida yaratilgan va matn kodi asosida dizaynlarni qurish uchun brauzer foydalanadigan maxsus belgilarni (teglarni) o'z ichiga olgan veb-sahifaning belgilanishi. Ushbu til sayt sahifalarida gipermatnning qanday aks etishiga javobgardir.

HTML (HyperText Markup Language) - gipermatnni belgilash (belgilash) tili. Gipermatn rivojlanish uchun qarzdor, chunki u umuman yaratilmagan. HTML matnning bir qismidan ikkinchisiga o'tishga imkon beradi va juda yaxshi, bu qismlarni butunlay boshqa kompyuterlarda saqlash mumkin.

HTML - bu aniq belgilash tili, dasturlash tili emas... Ushbu tilda mantiqiy funktsiyalar mavjud emas va unga matematik hisob-kitoblarni amalga oshirish mumkin emas. HTML-sahifalar .html yoki .htm kengaytmasiga ega va IE, Mozilla, Firefox, Google Chrome, Yandex Chrome, Opera va boshqalar kabi brauzerlar tomonidan yaratilgan.

HTML hujjat tuzilishi:

1. Hujjatda birinchi bo'lib HTML versiyasining ko'rsatkichi (birinchi qator). To'g'ri ishlash uchun ushbu satr veb-sahifani yaratishda ko'rsatilishi kerak.

3. Keyin saytning yuqori qismi (sarlavha) mavjud. Bu teg yordamida amalga oshiriladi ... Sarlavhada sahifa sarlavhasini teglar orasiga qo'yib, sahifamizning sarlavhasini ko'rsatamiz va/ Keyingi - hujjatning HTML kodlashi (beshinchi qator). Bu kirill alifbosini to'g'ri aks ettirish uchun qilingan. Sarlavha maydonini teg bilan yoping

4. "tavsif" meta-yorlig'i - qidiruv tizimlari uchun mo'ljallangan sahifaning qisqacha mazmuni. Ushbu yorliq qidiruv tizimini optimallashtirish uchun muhimdir va uni to'ldirish kerak.

5. "kalit so'zlar" meta-yorlig'i - sahifada topish mumkin bo'lgan kalit so'zlar. Ushbu yorliq qidiruv tizimlari uchun ham mo'ljallangan. Bugungi kunda ushbu yorliq kamdan kam qo'llaniladi.

6. Sahifaning tanasi yorliq bilan ochiladi va teg bilan tegishlicha yopiladi

... Veb-sahifaning asosiy qismida, odatda, asosiy tarkib-matn, video, audio va boshqa ma'lumotlar mavjud.

CSS fayllari nima va ular nima uchun kerak? CSS fayli qanday yaratiladi?

Kaskadli jadvallar (va CSS qisqartmasi shu tarzda) yoki Cascading Style Sheets - HTML belgilash tilida yozilgan veb-sahifalarning ko'rinishi uchun til.

Sizga nima uchun CSS kerak?

Veb-ustaning hayotini engillashtirish va saytlar dizaynini yaxshilash uchun veb-sahifalar dizayni uchun mas'ul bo'lgan CSS jadvallari paydo bo'ldi. CSS-ning paydo bo'lishi veb-hujjatlarning mazmuni va taqdimotini ajratishga imkon berdi. Bu ko'plab sahifalar uchun bir xil uslublar mavjudligi sababli saytlarni yaratish jarayonini tezlashtirdi.

Bundan tashqari, kaskadli uslublar jadvallari veb-resurs ko'rinishini tezda o'zgartirishga yoki unga o'zgartirishlar kiritishga imkon beradi. Shunday qilib, bitta CSS fayli yordamida siz ko'plab veb-sahifalarning ko'rinishini tezda boshqarishingiz mumkin.

Uslublar jadvallarining muhim afzalligi - turli xil qurilmalar uchun veb-sahifa dizayni. Shuni esda tutingki, turli xil qurilmalar uchun turli xil jadvallar mavjud. Ya'ni, bir vaqtning o'zida bir nechta dizaynlar yaratiladi (bosib chiqarish, kompyuter ekranida, mobil qurilmalarda ko'rish uchun). Sayt ko'rsatiladigan qurilmalarga qarab, sayt yaratilganda har bir qurilma uchun CSS bir marta yoziladi.

CSS holda uslublar har bir alohida veb-sahifa uchun yozilishi kerak edi. Endi saytdagi har bir sahifa oddiygina CSS fayliga havola qiladi. Saytimiz dizaynidagi har qanday narsani o'zgartirish uchun siz CSS fayl kodiga o'zgartirish kiritishingiz kerak.

Shunday qilib, veb-resurslarni uslublash bo'yicha CSS ulkan kuchga ega. Agar siz sayt qurishni o'zlashtirishni rejalashtirmoqchi bo'lsangiz, CSS bilimisiz qila olmaysiz. CSS jadvallari uchun sintaksisni o'rganish oson. Shunday qilib, nafaqat mazmunli, balki go'zal saytlarni qanday qilishni o'rganishingiz uchun uni o'rganishni boshlang.

CSS fayli qanday yaratiladi:

CSS uslubidagi fayl bu oddiy matnli fayl bo'lib, biz uni har qanday "Notepad", "MS Word" va hokazo matn muharririda yaratishimiz mumkin.

Stil faylini boshqa matn hujjatlaridan ajratib turadigan yagona narsa bu * .css ko'rinadigan kengaytmasi.

Shunday qilib, matnli faylning kengaytmasini o'zgartirib, CSS uslublar jadvalini yaratish mumkin:

Metod 1. Matnli fayl kengaytmasini oddiygina o'zgartirish orqali.

bloknot kabi har qanday matn muharririni oching. Asosiy menyuda faylni tanlang - sifatida saqlang va .txt o'lchamlari bilan matnli faylni saqlang. Endi ushbu fayl kengaytmasini * .txt dan * .css ga o'zgartirishingiz kerak. Endi CSS fayli yaratish uchun uning kengaytmasini CSS-ga o'zgartirib, uning nomini o'zgartirishingiz kerak. Shundan so'ng biz CSS uslublar jadvalini olamiz.

2-usul: Dreamweaver kod muharriri yordamida uslublar faylini yarating. Unda CSS uslubidagi fayllarni yaratish uchun maxsus funktsiyalar mavjud. Dasturni ochgandan so'ng, CSS faylini yaratishni tanlashingiz mumkin bo'lgan asosiy menyu paydo bo'ladi. Fayl yaratilgandan so'ng uni "Faylni saqlash kabi ..." asosiy menyusi orqali saqlash mumkin, CSS fayllarini yaratish uchun shunga o'xshash jarayon boshqa kod muharrirlarida ham mavjud.

1.2.2 HTML hujjat tuzilishi

HTML hujjati uchta asosiy bo'limga bo'linadi:
\u003e HTML hujjatlari bo'limi: har bir HTML hujjati boshlang'ich HTML yorlig'i bilan boshlanishi va oxirida HTML yorlig'i bilan tugashi kerak.
.
Ushbu teglar brauzerga ushbu ikki teglar orasidagi matn HTML hujjati ekanligini aytadi.
\u003e Sarlavha bo'limi: bo'lim teg bilan boshlanadi va yorliq bilan tugaydi... Ushbu bo'limda veb-sahifaning sarlavhasida paydo bo'lgan hujjatning sarlavhasi mavjud. Sarlavha o'zi bilan boshlanadigan TITLE yorlig'i ichiga kiritilgan va yopiladi -
Sarlavha juda muhim. Ushbu veb-saytni belgilash uchun veb-saytlar ko'pincha xatcho'plardan foydalanadilar. Ushbu xatcho'pni saqlash uchun brauzer "sarlavha" dan foydalanadi. Shuningdek, foydalanuvchilar ma'lumot qidirishda, veb-sahifaning sarlavhasi ko'pincha foydalanuvchi izlayotgan kalit so'z bo'ladi.
\u003e BODY Bo'lim: Ushbu bo'lim sarlavha qismidan keyin. Hujjatning asosiy qismida veb-sahifada ko'rsatilishi kerak bo'lgan matn, rasm va havolalar mavjud. Hujjatning asosiy qismi yorliq bilan boshlanadi va yorliq bilan tugaydi.
2-misol:

HTML olamiga xush kelibsiz

Bu juda qiziqarli bo'ladi

1.4-rasm. 2-misol
Paragraflar
Yorliqni payqadingizmi,<Р>, 2-misolda? Teg<Р> xatboshini belgilaydi.
Matn yozayotganda tarkibni bir qator paragraflarga ajratasiz. Paragraflar hujjatning mantiqiy tuzilishini aniqlashga yordam beradi va hujjat tarkibiga ba'zi iboralarni qo'llaydi. Teg<Р> yangi xat boshini belgilash uchun ishlatiladi.

Veb-sayt yaratishda birinchi navbatda veb-sahifa qanday ko'rsatilishi haqida o'ylash kerak. Bu sayt qurilishida o'ziga xos "poydevor". Shuning uchun, saytlarni yaratish uchun yanada murakkab texnologiyalarni o'rganishdan oldin, hech bo'lmaganda HTML bo'yicha boshlang'ich bilimlarga ega bo'lish tavsiya etiladi. Ushbu darsda biz bilan tanishamiz HTML, tahlil qilaylik hTML hujjat tuzilishi va amaliy misollarda olingan bilimlarni mustahkamlaymiz.

HTML nima?

HTML gipermatnlarni belgilash tili (inglizcha HyperText Markup Language). Ushbu til sayt sahifalarida gipermatnning qanday ko'rsatilishi uchun javobgardir. Endi gipermatn nima ekanligini aniqlaylik? Hech kimga sir emaski, bitta veb-sahifada juda ko'p turli xil ma'lumotlar bo'lishi mumkin, xoh u matn, xoh jadvallar, grafikalar, videolar, audio va boshqalar. Shunday qilib, bu barcha ma'lumotlarni bitta so'z bilan - gipermatn bilan chaqirish mumkin.

E'tibor bering, HTML dasturlash tili emas, balki belgilash tili. Ushbu tilda mantiqiy funktsiyalar mavjud emas va unga matematik hisob-kitoblarni amalga oshirish mumkin emas. HTML-sahifalar kengaytmaga ega .html yoki .htm va brauzerlar tomonidan qayta ishlangan - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera va boshqalar.

Keling, brauzer veb-sahifada nimani va qanday ko'rsatilishini qanday tushunishini ko'rib chiqaylik? Bu juda oddiy. HTML-ning gipermatnlarni belgilash tili o'rnatilgan teglar deb nomlangan buyruqlarga ega. Ular tomonidan brauzer boshqariladi.

HTML hujjat tuzilishi

Har qanday HTML hujjat (veb-sahifa) ma'lum bir tuzilishga ega bo'lishi kerak. Bu brauzerlarda sahifalarni ochishda yuzaga kelishi mumkin bo'lgan muammolarning oldini oladi. Masalan, quyidagi HTML kodni o'z ichiga olgan sahifani ko'rib chiqamiz:

HTML hujjat tuzilishi ...

Keling, ushbu tuzilishga nima kiritilganligini ko'rib chiqamiz:

1. HTML hujjatiga kiradigan birinchi narsa bu versiya ko'rsatkichi (birinchi satr). To'g'ri ishlash uchun ushbu satr veb-sahifani yaratishda ko'rsatilishi kerak.

3. Keyin saytning yuqori qismi uchun maydon keladi (sarlavha). Bu teg yordamida amalga oshiriladi ... Sarlavhada sahifa sarlavhasini teglar orasiga qo'yib, sahifamizning sarlavhasini ko'rsatamiz va... Keyinchalik, hujjatning HTML kodlashi ko'rsatiladi (beshinchi qator). Bu kirill alifbosini to'g'ri ko'rsatish uchun qilingan. Sarlavha maydonini teg bilan yoping.

4. "tavsif" meta-yorlig'i - qidiruv tizimlari uchun mo'ljallangan sahifaning qisqacha mazmuni. Ushbu yorliq qidiruv tizimini optimallashtirish uchun muhimdir va uni to'ldirish kerak.

5. "kalit so'zlar" meta-yorlig'i - sahifada topish mumkin bo'lgan kalit so'zlar. Ushbu yorliq qidiruv tizimlari uchun ham mo'ljallangan. Bugungi kunda ushbu yorliq kamdan kam qo'llaniladi.

6. Sahifaning tanasi yorliq bilan ochiladi va teg bilan tegishlicha yopiladi

... Veb-sahifaning asosiy qismida, odatda, asosiy tarkib - matn, video, audio va boshqa ma'lumotlar mavjud.

Shunday qilib, biz HTML nima degan savolga javob berdik va HTML hujjatning tuzilishini o'rgandik. Ushbu darsda olingan ma'lumotlar asosiy tushunchalardir, siz ularsiz qilolmaysiz. Keyinchalik murakkab narsalar haqida boshqa darslarda gaplashamiz.

HTML - bu saytni belgilash tili. Ko'pchilik buni dasturlash deb hisoblaydi, ammo unday emas. HTML-da biron bir dasturlash tilida mavjud bo'lgan o'zgaruvchilar, hisob-kitoblar, massivlar va boshqa elementlar mavjud emas.

HTML-dan foydalanib, ishlab chiquvchi faqat sayt ko'rinishini yaratishi mumkin. Hech qanday sayt belgilanmasdan mavjud emasligini tushunish muhimdir. HTML veb-sahifalarni yaratish uchun asosdir. Boshqa barcha funktsiyalar turli xil dasturlash tillari tomonidan qo'shiladi.

HTML hujjatini yaratish

Har qanday muharrirda oddiy veb-sayt sahifasini yaratishingiz mumkin. Hatto Notepad ham qiladi. Ajam ishlab chiquvchi uchun avtomatik almashtirish funktsiyalari va boshqa ko'rsatmalarga ega bo'lgan boshqa muharrirlardan foydalanish tavsiya etiladi. Buning yordamida siz tayyor jadvallar, havolalar, rasmlar va boshqa elementlarni yaratishingiz mumkin. Va bloknotda har bir xatni qo'l bilan yozishingiz kerak.

Qoida tariqasida, "Bloknot" faqat qo'lda boshqa vositalar bo'lmagan hollarda qo'llaniladi. Birinchidan, matnli hujjat yaratiladi va keyin HTML formatida saqlanadi. Barcha sayt sahifalari HTML kengaytmasi bilan bo'lishi kerak.

HTML tili ierarxikdir. Ya'ni html hujjatning maxsus tuzilishi mavjud. Bu nima? Aniqlik uchun quyida ko'rib chiqing.

HTML hujjatining tuzilishi. Misol

Tuzilishi har doim bir xil bo'ladi. Agar siz biror narsani o'zgartirmoqchi bo'lsangiz, brauzer uni bajara olmaydi. Natijada, siz o'ylagan narsangizga erisha olmaysiz.

Yuqoridagi rasmda har qanday HTML faylining tuzilishi ko'rsatilgan. Birinchi element fayl turini bildiradi. Ushbu yorliq bir marta ko'rsatilgan. Agar siz maxsus muharrirlardan foydalansangiz, barcha struktura avtomatik ravishda yaratiladi. Siz standart qiymatlarni to'g'rilashingiz kerak.

HTML hujjatining tuzilishi - asosiy teglar:

Butun sayt skeleti ushbu uchta tegdan iborat. Rasmga e'tibor bering. Ushbu teglarning barchasida "/" belgisi bilan yopilish yorlig'i mavjud. Agar siz qo'l bilan yozsangiz, bir vaqtning o'zida ikkala ochish va yopish teglarini qo'yishga odatlaning.

Yuqorida sayt sahifalarida .html kengaytmasi borligi aytilgan edi. Ya'ni, agar siz matnli hujjat yaratsangiz, lekin shu bilan birga to'g'ri kodni yozsangiz, brauzer sizga shunchaki matnni ko'rsatib beradi. Kodni konvertatsiya qilish bo'lmaydi.

Bosh qismi

Rasmda, 3-band ostida bosh qismi ko'rsatilgan. Ushbu bo'lim xizmat ma'lumotlarini o'z ichiga oladi. Masalan, siz kodlashni (4-nuqta) va sahifa sarlavhasini (5-band) belgilashingiz mumkin.

Sarlavha doimo o'sha erda bo'lishi kerak. Usiz hech qanday qidiruv tizimi veb-sahifadagi tarkib (matn) nomini aniqlay olmaydi. Va bu veb-saytni targ'ib qilish uchun yomon. Bundan tashqari, brauzer sahifaning sarlavhasini yuqori qismida ko'rsatmaydi. Bu foydalanuvchi uchun noqulaylik tug'diradi.

HTML hujjatining tuzilishi shuki, u faqat bosh qismida ko'rsatiladi. Agar teg bo'lsa korpus qismida yoki undan keyin aniqlang, ishlov beruvchi buni e'tiborsiz qoldiradi.</p><p>Bundan tashqari, bosh qismida skriptlarni, uslublar fayllarini, qidiruv tizimlari uchun ko'rsatmalarni yoki foydalanuvchi ko'rmasligi kerak bo'lgan boshqa ma'lumotlarni ulash uchun ma'lumotlar mavjud, ammo brauzer yoki dasturchilar uchun muhimdir.</p><h2>Ulanish uslublari</h2><p>HTML hujjatining tuzilishi uslublarni turli yo'llar bilan kiritishga imkon beradi. Bundan tashqari, ular har bir elementda alohida yozilishi mumkin. Biroq, bu usul tavsiya etilmaydi, chunki kod juda katta va noqulay bo'ladi.</p><p>Fayl quyidagicha ulangan.</p><p><link rel = “stylesheet” href = “style.css” type = “text/css”></p><p>Href atributi faylga yo'lni belgilaydi. Agar yo'lda xato bo'lsa, uslublar yuklanmaydi. Type atributi ham talab qilinadi, bu uning CSS fayli ekanligini bildiradi.</p><p>Yana bir variant - uslublarni to'g'ridan-to'g'ri bosh qismida aniqlash.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1327414.jpg' height="203" width="259" loading=lazy></p><p>Ammo bu variant ham juda tavsiya etilmaydi. Ushbu usullar juda farq qiladi, chunki CSS fayli butun sayt uchun bir xil bo'lishi mumkin va undagi barcha o'zgarishlar bir zumda barcha sahifalarga tatbiq etiladi. Va agar siz yuqoridagi rasmda ko'rsatilgan usuldan foydalansangiz, unda saytning barcha mavjud sahifalariga o'zgartirish kiritishingiz kerak bo'ladi.</p><p>Agar siz yaratayotgan sinf faqat bitta sahifada ishlatilsa, bu variant siz uchun.</p><h2>Skriptlarni ulash</h2><p>Ssenariylar quyidagicha bog'langan.</p><p><script type=“text/javascript” src=“main.js”></script></p><p>Bu erda ikkita atribut talab qilinadi: type va src. Birinchisida biz bu Javascript fayli ekanligini, ikkinchisi esa fayl joylashgan joyda ekanligini ko'rsatamiz. Agar siz xatoni xato qilsangiz, unda hech narsa ishlamaydi.</p><h2>Tana qismi</h2><p>HTML hujjatining tuzilishi shuki, foydalanuvchi tomonidan ko'rinadigan tarkibni faqat tana qismida joylashtirishingiz kerak. Teg nomi o'zi uchun gapiradi.</p><p>Cheklanmagan sonli elementlarni o'z ichiga olishi mumkin bo'lgan barcha asosiy sahifa kodlari bu erda ko'rsatilgan. Ammo kod qancha uzoq bo'lsa, uni ishlash uchun qancha vaqt kerak bo'ladi.</p><p>Tana sohasida ishlatilishi mumkin bo'lgan eng asosiy teglarni ko'rib chiqamiz. Asosiylari ko'p emas. Qolganlarning hammasi sizning bilimingiz va amaliyotingiz oshgani sayin o'rganasiz.</p><h2>Asosiy teglar</h2><p>HTML hujjatining tuzilishi elementlarning yozilish tartibini talab qiladi. Teglar har doim qirralarning atrofida qavslar bilan o'ralgan bo'lishi kerak<>... Bu holda brauzer bu yorliq ekanligini bilmaydi. Qavsni ochishda har doim element (yorliq) nomi kuzatiladi. Agar siz bo'shliqqa ruxsat bersangiz< и именем, то браузер посчитает это текстом.</p><p>Keling, rasm yorlig'iga misol keltiramiz. Shuni esda tutingki, ushbu yorliq yopilish yorlig'i emas, farqli o'laroq, paragraflar va boshqalar.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/43047/1327415.jpg' width="100%" loading=lazy></p><p>Atributlarning tartibi muhim emas. Ammo ularning yozilishi (dizayni) juda muhimdir. Har doim atribut nomi birinchi bo'lib keladi, so'ngra teng belgisi, keyin atribut qiymati tirnoq bilan yoziladi. Ma'nosi boshqacha bo'lishi mumkin - raqamli yoki matnli.</p><p>Barcha teglardagi src atributi yuklanadigan faylning yo'lini bildiradi. Barcha elementlardagi alt atributi qisqacha tavsifni beradi. Bunday holda, bird.jpg fotosurati tavsif bilan yuklanadi - qushning fotosurati.</p><p>Bundan tashqari, siz o'lchamlarni, faqat kenglik yoki balandlikni, sarlavha, hizalama, uslublar klassi yoki chegarani belgilashingiz mumkin.</p><p>Asosiy qismda ko'rsatilgan boshqa asosiy teglarni ko'rib chiqamiz.</p><table align="center" cellpadding="5" cellspacing="0" class="if"><tbody><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Uchrashuv</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Tasvirlar</p> </td> </tr><tr><td valign="top" width="153"></p> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Matnni yangi qatorga o'rash</p> </td> </tr><tr><td valign="top" width="153"><p><strong>…</strong></p> </td><td valign="top" width="554"><p>Kichik rasm</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Chizilgan matn</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Chizilgan matn</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"><p><table></table></p> </td><td valign="top" width="554"> </td> </tr></tbody></table><h2>Bularning hammasini qanday qilib boshida tasavvur qilish mumkin</h2><p>Ajam ishlab chiquvchilar har doim ham bularning hammasini darhol spekulyativ ravishda tasavvur qilishlari mumkin emas. Veb-sahifalar tuzilishining ba'zi bir misollarini ko'rib chiqing, shunda siz aniq tushunasiz.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class="entry-footer"> <span class="entry-meta__comments" title="Izohlar"><span class="fa fa-comment-o"></span> </span> <span class="entry-meta__views" title="Ko'rishlar"><span class="fa fa-eye"></span> </span> </div> <div class="b-share b-share--post"> <div class="b-share__title">Maqola sizga yoqdimi? Do'stlar bilan bo'lishish uchun:</div> <span class="b-share__ico b-share__vk js-share-link" data-uri="http://vk.com/share.php?url=https%3A%2F%2Fcrabo.ru%2Fbeg-na-begovoj-dorozhke%2F"></span><span class="b-share__ico b-share__fb js-share-link" data-uri="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span><span class="b-share__ico b-share__tw js-share-link" data-uri="http://twitter.com/share?text=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span> <span class="b-share__ico b-share__ok js-share-link" data-uri="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span><span class="b-share__ico b-share__gp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span><span class="b-share__ico b-share__whatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span> <span class="b-share__ico b-share__viber js-share-link js-share-link-no-window" data-uri="viber://forward?text=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span><span class="b-share__ico b-share__telegram js-share-link js-share-link-no-window" data-uri="https://telegram.me/share/url?url=https%3A%2F%2Fcrabo.ru%2Ftips-for-beginners%2Fobshchaya-struktura-html-dokumenta-pravila-postroeniya-html-dokumentov.html"></span> </div> <div class="b-related"> <div class="b-related__header"><span>Siz ham qiziqishingiz mumkin</span></div> <div class="b-related__items"> <article id="post-" class="post-card post- post type-post status-publish format-standard has-post-thumbnail hentry" itemscope itemtype="http://schema.org/BlogPosting"> <div class="post-card__image"> <a href="https://crabo.ru/uz/computer-literacy/tehnologii-dji-dron-phantom-4-advanced-bolshe-chuvstvitelnyh-sensorov.html"> <img width="330" height="140" src="/uploads/257409c0ae69d78a0e53d9881d560962.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Keyinchalik sezgir sensorlar" itemprop="image" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy> <div class="entry-meta"> <span class="entry-category"><span itemprop="articleSection">Kompyuter savodxonligi</span></span> </div> </a> </div> <header class="entry-header"> <div class="entry-title" itemprop="name"><a href="https://crabo.ru/uz/computer-literacy/tehnologii-dji-dron-phantom-4-advanced-bolshe-chuvstvitelnyh-sensorov.html" rel="bookmark" itemprop="url"><span itemprop="headline">HTML-hujjatning umumiy tuzilishi. HTML hujjatlarni tuzish qoidalari</span></a></div> </header> <div class="post-card__content" itemprop="articleBody">HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, biz fayllarni qanday qilib to'g'ri yaratish va ...</div> </article> <article id="post-" class="post-card post- post type-post status-publish format-standard has-post-thumbnail hentry" itemscope itemtype="http://schema.org/BlogPosting"> <div class="post-card__image"> <a href="https://crabo.ru/uz/tips-for-beginners/ofis-dlya-ios-kak-svyazatsya-s-russkoi-tehnicheskoi-podderzhkoi-kompanii.html"> <img width="330" height="140" src="/uploads/99337ffcb4613443d73311de2ae2bd95.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Rossiyaning Apple texnik yordamiga qanday murojaat qilish kerak?" itemprop="image" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy> <div class="entry-meta"> <span class="entry-category"><span itemprop="articleSection">Yangi boshlanuvchilar uchun maslahatlar</span></span> </div> </a> </div> <header class="entry-header"> <div class="entry-title" itemprop="name"><a href="https://crabo.ru/uz/tips-for-beginners/ofis-dlya-ios-kak-svyazatsya-s-russkoi-tehnicheskoi-podderzhkoi-kompanii.html" rel="bookmark" itemprop="url"><span itemprop="headline">HTML-hujjatning umumiy tuzilishi. HTML hujjatlarni tuzish qoidalari</span></a></div> </header> <div class="post-card__content" itemprop="articleBody">HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, biz fayllarni qanday qilib to'g'ri yaratish va ...</div> </article> <article id="post-" class="post-card post- post type-post status-publish format-standard has-post-thumbnail hentry" itemscope itemtype="http://schema.org/BlogPosting"> <div class="post-card__image"> <a href="https://crabo.ru/uz/configuring-windows/zakon-ob-anonimaizerah-kak-ih-budut-blokirovat-i-chto-s-etim.html"> <img width="330" height="140" src="/uploads/706986c24672f229aed517f242ade4ba.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Hokimiyat Tor, VPN va boshqa chetlab o'tishni taqiqlashga qaror qildi" itemprop="image" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy> <div class="entry-meta"> <span class="entry-category"><span itemprop="articleSection">Windows sozlamalari</span></span> </div> </a> </div> <header class="entry-header"> <div class="entry-title" itemprop="name"><a href="https://crabo.ru/uz/configuring-windows/zakon-ob-anonimaizerah-kak-ih-budut-blokirovat-i-chto-s-etim.html" rel="bookmark" itemprop="url"><span itemprop="headline">HTML-hujjatning umumiy tuzilishi. HTML hujjatlarni tuzish qoidalari</span></a></div> </header> <div class="post-card__content" itemprop="articleBody">HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, biz fayllarni qanday qilib to'g'ri yaratish va ...</div> </article> <article id="post-" class="post-card post- post type-post status-publish format-standard has-post-thumbnail hentry" itemscope itemtype="http://schema.org/BlogPosting"> <div class="post-card__image"> <a href="https://crabo.ru/uz/the-security-of-your-computer/ne-zahodit-v-telegram-chto-delat-kak-ustanovit-telegram-na.html"> <img width="330" height="140" src="/uploads/7b246f91ad48cfc7a1ac165f75e73f9b.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Rossiya Federatsiyasi hududida blokirovkani chetlab o'tib kompyuterga Telegramni qanday o'rnatish mumkin!" itemprop="image" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy> <div class="entry-meta"> <span class="entry-category"><span itemprop="articleSection">Kompyuter xavfsizligi</span></span> </div> </a> </div> <header class="entry-header"> <div class="entry-title" itemprop="name"><a href="https://crabo.ru/uz/the-security-of-your-computer/ne-zahodit-v-telegram-chto-delat-kak-ustanovit-telegram-na.html" rel="bookmark" itemprop="url"><span itemprop="headline">HTML-hujjatning umumiy tuzilishi. HTML hujjatlarni tuzish qoidalari</span></a></div> </header> <div class="post-card__content" itemprop="articleBody">HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, biz fayllarni qanday qilib to'g'ri yaratish va ...</div> </article> <article id="post-" class="post-card post- post type-post status-publish format-standard has-post-thumbnail hentry" itemscope itemtype="http://schema.org/BlogPosting"> <div class="post-card__image"> <a href="https://crabo.ru/uz/windows-10/goryachaya-liniya-tehpodderzhki-apple-kruglosutochnaya-sluzhba-podderzhki-goryachaya-liniya.html"> <img width="330" height="140" src="/uploads/3417edc8e6e892ee695bd33825a2e7fe.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Apple Hotline Office iPhone" itemprop="image" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy> <div class="entry-meta"> <span class="entry-category"><span itemprop="articleSection">Windows 10</span></span> </div> </a> </div> <header class="entry-header"> <div class="entry-title" itemprop="name"><a href="https://crabo.ru/uz/windows-10/goryachaya-liniya-tehpodderzhki-apple-kruglosutochnaya-sluzhba-podderzhki-goryachaya-liniya.html" rel="bookmark" itemprop="url"><span itemprop="headline">HTML-hujjatning umumiy tuzilishi. HTML hujjatlarni tuzish qoidalari</span></a></div> </header> <div class="post-card__content" itemprop="articleBody">HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, biz fayllarni qanday qilib to'g'ri yaratish va ...</div> </article> <article id="post-" class="post-card post- post type-post status-publish format-standard has-post-thumbnail hentry" itemscope itemtype="http://schema.org/BlogPosting"> <div class="post-card__image"> <a href="https://crabo.ru/uz/tips-for-beginners/aifon-6-skolko-operativnoi-pamyati-osvobozhdaem-operativnuyu-pamyat-na.html"> <img width="330" height="140" src="/uploads/e9a566296e049ef541b90a7dce3a63e6.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="IPhone va iPad-da RAMni bo'shatish" itemprop="image" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy> <div class="entry-meta"> <span class="entry-category"><span itemprop="articleSection">Yangi boshlanuvchilar uchun maslahatlar</span></span> </div> </a> </div> <header class="entry-header"> <div class="entry-title" itemprop="name"><a href="https://crabo.ru/uz/tips-for-beginners/aifon-6-skolko-operativnoi-pamyati-osvobozhdaem-operativnuyu-pamyat-na.html" rel="bookmark" itemprop="url"><span itemprop="headline">HTML-hujjatning umumiy tuzilishi. HTML hujjatlarni tuzish qoidalari</span></a></div> </header> <div class="post-card__content" itemprop="articleBody">HTML hujjatining minimal tuzilishi qanday bo'lishi kerakligini bilib olasiz. Biz uning har bir zarur elementini batafsil va misollar bilan tahlil qilamiz. Shuningdek, biz fayllarni qanday qilib to'g'ri yaratish va ...</div> </article> </div> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="/beg-na-begovoj-dorozhke/" /> <meta itemprop="dateModified" content="2017-05-13" /> <meta itemprop="datePublished" content="2016-10-28T11:16:04+00:00" /> <script> var mt_cid = 43603314 </script> <script async="async" src="https://adcounter14.uptolike.com/counter.js?sid=stf22ceea420b22686332c72fa963f260cb21fbe9e" type="text/javascript"></script> </main> </div> </div> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" id="searchform" action="/" class="search-form"> <label class="screen-reader-text" for="s">Qidirmoq:</label> <input type="text" value="" name="s" id="s" class="search-form__text"> <button type="submit" id="searchsubmit" class="search-form__submit"></button></form> </div> <div id="text-13" class="widget widget_text"> <div class="textwidget"> <div id="luqusa1" style="height:500px;width:300px;" align="center"></div> </div> </div> <div id="wpshop_articles-3" class="widget widget_wpshop_articles"> <div class="widget-header">Ommabop materiallar</div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/hardware-solutions/smartfony-granaty-pochemu-gadzhety-vzryvayutsya-i-kak-etogo-izbezhat.html"> <img width="330" height="140" src="/uploads/768d85ce7617f9620f0db0dfdb5f6756.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Nima uchun smartfon batareyalari portlaydi va Samsung portlashining oldini olish uchun nima qilish kerak" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/hardware-solutions/smartfony-granaty-pochemu-gadzhety-vzryvayutsya-i-kak-etogo-izbezhat.html">Nima uchun smartfon batareyalari portlaydi va Samsung portlashining oldini olish uchun nima qilish kerak</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/computer-literacy/10-dokazatelstv-chto-zhivem-v-matrice-est-li-dokazatelstva-togo-chto-my.html"> <img width="330" height="140" src="/uploads/53e4b301f1914c2ca3d857c35a7f713e.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Bizning matritsada yashayotganimiz haqida biron bir dalil bormi?" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/computer-literacy/10-dokazatelstv-chto-zhivem-v-matrice-est-li-dokazatelstva-togo-chto-my.html">Bizning matritsada yashayotganimiz haqida biron bir dalil bormi?</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/computer-literacy/chto-takoe-druzhko-shou-druzhko-shou---novoe-shou-na-youtube-ot-sergeya-druzhko-shou-sergeya.html"> <img width="330" height="140" src="/uploads/77933ba119ff4ffbc8882c760d1654f9.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Drujko shousi - Youtube-da Sergey Drujkodan yangi shou" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/computer-literacy/chto-takoe-druzhko-shou-druzhko-shou---novoe-shou-na-youtube-ot-sergeya-druzhko-shou-sergeya.html">Drujko shousi - Youtube-da Sergey Drujkodan yangi shou</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/useful-programs/planshety-apple-ipad-mini-retina-display-v-chem-otlichiya-modelei-ipad-mini-2-retina-sravnenie.html"> <img width="330" height="140" src="/uploads/42cbc0ebfddcdf6e04584b1ebe8aec54.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="IPad mini (2, Retina) modellari o'rtasida qanday farq bor - xususiyatlarni taqqoslash" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/useful-programs/planshety-apple-ipad-mini-retina-display-v-chem-otlichiya-modelei-ipad-mini-2-retina-sravnenie.html">IPad mini (2, Retina) modellari o'rtasida qanday farq bor - xususiyatlarni taqqoslash</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/computer-literacy/pochemu-ne-rabotaet-kompas-na-planshete-kak-rabotaet-kompas-i-kak-on.html"> <img width="330" height="140" src="/uploads/da4b809e98ab37c31aea4b1c0931b83e.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Kompas qanday ishlaydi va u qanday ishlaydi?" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/computer-literacy/pochemu-ne-rabotaet-kompas-na-planshete-kak-rabotaet-kompas-i-kak-on.html">Kompas qanday ishlaydi va u qanday ishlaydi?</a></div> </div> </div> </div> <div id="wpshop_articles-2" class="widget widget_wpshop_articles"> <div class="widget-header">Tavsiya etiladi</div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/solving-problems/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto-izvestno-na.html"> <img width="330" height="140" src="/uploads/4436da2d067976c7b409c2a234eddc54.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Ayni paytda ma'lum bo'lgan hamma narsa" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/solving-problems/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto-izvestno-na.html">Ayni paytda ma'lum bo'lgan hamma narsa</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/windows-10/kak-skachat-i-ustanovit-whatsapp-na-ipad-poshagovaya-instrukciya-proverennye-i.html"> <img width="330" height="140" src="/uploads/006b3a3afa5c275c31dff7a5b05ea6fa.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="WhatsApp-ni iPad-da ishlatishning tasdiqlangan va ishlash usullari Nega iPad-da Whatsapp yo'q" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/windows-10/kak-skachat-i-ustanovit-whatsapp-na-ipad-poshagovaya-instrukciya-proverennye-i.html">WhatsApp-ni iPad-da ishlatishning tasdiqlangan va ishlash usullari Nega iPad-da Whatsapp yo'q</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/useful-programs/naushniki-s-mikrofonom-sistemoi-shumopodavleniya-gid-po-naushnikam.html"> <img width="330" height="140" src="/uploads/8c04ed2348687054e1c4f545a384485e.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Shovqinni bekor qiladigan minigarnituralar uchun qo'llanma" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/useful-programs/naushniki-s-mikrofonom-sistemoi-shumopodavleniya-gid-po-naushnikam.html">Shovqinni bekor qiladigan minigarnituralar uchun qo'llanma</a></div> </div> </div> <div class="widget-article"> <div class="widget-article__image"><a href="https://crabo.ru/uz/hardware-solutions/luchshie-vstavnye-naushniki-s-aktivnym-shumopodavleniem-luchshie.html"> <img width="330" height="140" src="/uploads/7cc86c7afce7079878cdc9e623865728.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="Eng yaxshi simsiz shovqinni bekor qiluvchi minigarnituralar" / loading=lazy> </a> </div> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://crabo.ru/uz/hardware-solutions/luchshie-vstavnye-naushniki-s-aktivnym-shumopodavleniem-luchshie.html">Eng yaxshi simsiz shovqinni bekor qiluvchi minigarnituralar</a></div> </div> </div> </div> <div id="text-11" class="widget widget_text"> <div class="textwidget"> <p></p> <div id="yandex_rtb_R-A-218842-11"></div> <p> </p> </div> </div> <div id="text-12" class="widget widget_text"> <div class="textwidget"> <div id="luqusa2" style="height:500px;width:300px;" align="center"></div> </div> </div> </aside> </div> <div class="footer-navigation container"> <div class="main-navigation-inner "> <div class="menu-menyu-2-container"><ul id="footer_menu" class="menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item"><a href="">Kontaktlar</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item"><a href="">Biz haqimizda</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item"><a href="">Reklama</a></li> </ul></div> </div></div> <footer class="site-footer container" itemscope itemtype="http://schema.org/WPFooter"> <div class="site-footer-inner "> <button type="button" class="scrolltop js-scrolltop"></button> <div class="footer-info"> © 2020 crabo.ru Kompyuter portali</div> <div class="footer-counters"> </div> </div></footer> </div> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function() { cli_show_cookiebar({ settings: '{ "animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":true,"button_1_button_colour":"#1e73be","button_1_button_hover":"#185c98","button_1_link_colour":"#ffffff","button_1_as_button":true,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":true,"font_family":"inherit","header_fix":true,"notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","scroll_close":false,"scroll_close_reload":false,"showagain_tab":false,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":false,"show_once":"10000"} ' }); }); //]]> </script> <script type='text/javascript' src='https://crabo.ru/wp-content/plugins/jetpack/modules/photon/photon.js'></script> <script type='text/javascript' src='https://crabo.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://crabo.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript' src='https://crabo.ru/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js'></script> <script type='text/javascript' src='https://crabo.ru/wp-content/themes/root/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "sidebar-1", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-11'] }; </script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script async="async" type='text/javascript' src='https://crabo.ru/wp-content/plugins/akismet/_inc/form.js'></script> <br> <br> </body> </html>