Html hujjatning tuzilishi asosiy teglardir. To'g'ri HTML hujjat tuzilishi va sahifa kodi

Xayrli kun, blog o'quvchilari va mehmonlari. Men yana siz bilanman, html gipermatn belgilash tili asoslarini o'rganishda sizning kamtar yordamchingiz. Ushbu maqolada men veb-sayt sahifalarini tuzish mavzusiga to'xtalib, sizni tilning asosiy teglari bilan yaqindan tanishtirmoqchiman.

Html veb-sayt tuzilishi mavzusi eng muhim mavzulardan biri bo'lib, veb-sayt yaratishning asosidir, uni o'zlashtirgandan so'ng siz osongina sahifalaringiz va veb-saytlaringiz uchun individual dizayn yaratishingiz mumkin. Mavzuni batafsil o'rganish uchun maqolada nafaqat nazariy material, balki blog yaratishning o'ziga xos namunasi ham keltirilgan. Endi o'rganishni boshlash vaqti keldi!

Qo'rqinchli ko'rinadi, dasturlash oson

Ayniqsa, bezovta bo'lganlar uchun men kirishni misol bilan boshlayman. Quyida men ushbu maqola uchun maxsus yozgan oddiy dastur kodi. Xavotir olmang. Har bir bosqichga batafsil tushuntirish beriladi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 Mening sahifam

  • Asosiy gipermatn belgilash tili teglari
  • HTML 5 bilan kelgan yangi teglar
  • Sahifa tuzilishiga misol

1-modda

Mana birinchi maqolaning matni.

2-modda

Mana ikkinchi maqolaning matni.

Ushbu blog maqolasi muallifi

Mening sahifam

Html yordamida sayt strukturasini yaratish

  • Asosiy gipermatn belgilash tili teglari
  • HTML 5 bilan kelgan yangi teglar
  • Sahifa tuzilishiga misol
    •
    • Asosiy gipermatn belgilash tili teglari
    • HTML 5 bilan kelgan yangi teglar
    • Sahifa tuzilishiga misol

    1-modda

    Mana birinchi maqolaning matni.

    2-modda

    Mana ikkinchi maqolaning matni.

    Ushbu blog maqolasi muallifi


    Ushbu kod blog sahifasini yaratadi, u o'z navbatida sarlavha, menyu, asosiy panelga (tartibga) bo'linadi, unda kontent paneli (tarkib) va yon panel (yon panel), shuningdek, "kolontitr" (kolontitr) mavjud. ).

    Debrifingni birinchi qatordan boshlaylik.

    til elementi boʻlib, uning asosiy vazifasi veb-hujjat turini koʻrsatishdan iborat. Shunday qilib, brauzer sahifa qanday standartda ko'rsatilishi kerakligini aniqlaydi, chunki bugungi kunda html-ning bir nechta versiyalari mavjud.

    Biroq, tilning yangi birligiga e'tibor qaratish lozim uslub. Nomidan taxmin qilganingizdek, bu teg uslubni o'rnatadi va sahifadagi ob'ektlarning joylashishini sozlaydi.

    Mantiqan taxmin qilishim mumkinki, darhol sizning boshingizda savol paydo bo'ldi: “Dasturning ushbu qismida qanday tushunarsiz kod joylashgan? Bu html ga umuman o'xshamaydi!" Javob esa shunday: uslublar tegiga html emas, balki CSS kodi yozilgan. Yuqorida aytib o'tilganidek, bu veb-saytlar ko'rinishini formatlash uchun vositadir.

    Div belgilash tili blok teglariga ishora qiladi. Keyinchalik o'zgartirish maqsadida ma'lum bo'laklarni ajratish uchun ishlatiladi.

    Bloklar kaskadli uslublar jadvallari yordamida boshqariladi, ya'ni. css tili Misol veb-sahifada sinf atributlari yordamida uslublangan uchta blok mavjud.

    Shunday qilib, kod quyidagilarni o'z ichiga oladi:

    • tartib - sahifaning asosiy qismi uchun javobgar bo'lgan blok;
    • yon panel - yon panel (odatda navigatsiya uchun yaratilgan),
    • kontent - blog postlari joylashgan blok.

    Yon panel sinfi ta'rifi bo'lgan elementda elementlardan foydalangan holda tartibsiz ro'yxatni belgilayman

      Va
    • . Uslublar sinfi tarkibiga ega blokda - sarlavha teglari

      va paragraf

      Endi blokni batafsil ko'rib chiqaylik

      .

      HTML yoki hali ham HTML 5mi? Qanday tanib olish mumkin?

      Tartib uslubi sinfiga ega bo'lgan divda, boshqa bloklardan tashqari, sarlavha, menyu va altbilgi kabi teglar mavjud. Misoldagi boshqa elementlardan farqli o'laroq, ular HTML 5 platformasiga xosdir.

      Shunday qilib, sarlavha gipermatnni belgilash tilining elementi bo'lib, odatda sarlavha kiritilgan sayt sahifalari yoki bo'limlari sarlavhasini yaratadi. Shuni ta'kidlash kerakki, Internet Explorer brauzeri 8-versiyagacha sarlavhani qo'llab-quvvatlamaydi, lekin uning mazmunini ko'rsatadi.

      Menyu tegining asosiy maqsadi menyu bandlarini ko'rsatishdir. Raqamlangan va raqamlanmagan ro'yxatlarni yaratish elementlariga o'xshab, menyu konteyneri ichida har bir kontent elementi juftlangan tegga kiritilgan.

    • .

      Va nihoyat, altbilgi til birligi. Veb-ishlab chiquvchi jargonida bu ba'zan sahifaning "kolontiter"i deb ataladi. Ushbu teg sahifa yoki bo'limlarning pastki qismida joylashgan. Altbilgida odatda ma'lum bir manbaning muallifligi, hujjatning yaratilgan sanasi, asosiy ma'lumotlar yoki veb-resurs o'quvchilarining alohida e'tiborini talab qilmaydigan boshqa materiallar to'g'risidagi ma'lumotlar mavjud.

      Veb-resurslarni yaratish uchun vositalar

      Internet sahifalarini ishlab chiqish uchun ko'plab dasturiy mahsulotlar yaratilgan. An'anaviy ravishda ularni oddiy muharrir dasturlari va professional yo'naltirilgan dasturiy mahsulotlarga bo'lish mumkin.

      Veb-sayt yaratishda siz tasavvur qilishingiz kerak bo'lgan birinchi narsa bu veb-sahifa qanday shakllantirilishidir. Bu veb-sayt yaratishda o'ziga xos "poydevor" dir. Shuning uchun, yanada murakkab veb-sayt yaratish texnologiyalarini o'rganishdan oldin, HTML haqida kamida asosiy bilimga ega bo'lish tavsiya etiladi. Ushbu darsda biz bilan tanishamiz HTML, keling, uni tartibga solamiz HTML hujjat tuzilishi va olingan bilimlarni mustahkamlash uchun amaliy misollardan foydalaning.

      HTML nima?

      HTML HyperText Markup Language degan ma'noni anglatadi. Ushbu til sayt sahifalarida gipermatn qanday ko'rsatilishi uchun javobgardir. Endi gipermatn nima ekanligini aniqlaylik? Hech kimga sir emaski, bitta veb-sahifa juda ko'p turli xil ma'lumotlarni o'z ichiga olishi mumkin: matn, jadvallar, grafiklar, videolar, audio va boshqalar. Shunday qilib, bu ma'lumotlarning barchasini bir so'z bilan - gipermatn deb atash mumkin.

      E'tibor bering, HTML dasturlash tili emas, balki belgilash tilidir. Bu til mantiqiy funksiyalarga ega emas va unda hech qanday matematik hisob-kitoblarni amalga oshirish mumkin emas. HTML sahifalarida kengaytma mavjud .html yoki .htm va brauzerlar tomonidan qayta ishlanadi - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera va boshqalar.

      Endi brauzer nimani tushunishini va veb-sahifada qanday ko'rsatishni aniqlaylik? Bu juda oddiy. Gipermatnni belgilash tili HTMLda teglar deb ataladigan o'rnatilgan buyruqlar mavjud. Brauzer aynan ular tomonidan yo'naltirilgan.

      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 muammolardan qochadi. Misol tariqasida quyidagi HTML kodni o'z ichiga olgan sahifani ko'rib chiqamiz:

      HTML hujjat tuzilishi ...

      Keling, ushbu tuzilishga nima kiritilganligini tartibda ko'rib chiqaylik:

      1. HTML hujjatida birinchi bo'lib versiya ko'rsatkichi (birinchi qator) bo'ladi. To'g'ri ishlashi uchun veb-sahifani joylashtirishda ushbu qatorni ko'rsatish kerak.

      3. Keyin saytning yuqori qismi uchun maydon keladi (sarlavha). Buning uchun teg ishlatiladi . Sarlavhada sahifa sarlavhasini teglar orasiga qo'yib, sahifamiz nomini ko'rsatamiz Va. Keyinchalik, HTML hujjatining kodlanishi ko'rsatiladi (beshinchi qator). Bu kirill alifbosini to'g'ri ko'rsatish uchun amalga oshiriladi. Sarlavha maydonini teg bilan yopish.

      4. Meta teg "tavsif" - qidiruv tizimlari uchun mo'ljallangan sahifaning qisqacha mazmuni. Ushbu teg qidiruv tizimini optimallashtirish uchun muhim va to'ldirilishi kerak.

      5. Meta teg “kalit so'zlar” - sahifada paydo bo'lishi mumkin bo'lgan kalit so'zlar. Ushbu teg qidiruv tizimlari uchun ham mo'ljallangan. Hozirgi kunda bu belgi kamdan-kam qo'llaniladi.

      6. Sahifaning asosiy qismi teg bilan ochiladi va mos ravishda teg bilan 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 hujjatining tuzilishini o'rgandik. Ushbu darsda olingan ma'lumotlar asosiy tushunchalar bo'lib, ularsiz qilolmaysiz. Boshqa darslarda murakkabroq narsalar haqida gaplashamiz.

      Bugun biz HTML5 da semantika haqida gaplashamiz. Men allaqachon haqida qisqacha sharh yozganman. Ushbu maqolani o'qishdan oldin u bilan tanishib chiqishingizni maslahat beraman. Endi biz HTML5 hujjatining semantik tuzilishini qanday qilib to'g'ri va malakali tuzish haqida ushbu masalani batafsil ko'rib chiqamiz.

      Ushbu maqolada biz asta-sekin HTML sahifasini yaratamiz va uni semantik HTML5 teglari bilan bezatamiz.

      Rasm - HTML5 sahifasi uchun semantik tuzilma.

      Sahifa sarlavhasida DOCTYPE va meta teglar

      Keling, standart HTML5 hujjat shablonidan boshlaylik va boshga meta teglar qo'shamiz:

      Sahifa sarlavhasi

      Men teg qo'shdim kalit so'zlar uchun javobgardir. Va teg sahifa tavsifi uchun javobgardir. SEO optimallashtirish uchun ushbu teglar talab qilinadi. Bundan tashqari, tegni to'g'ri to'ldirish kerak . Sahifaning sarlavhasi butun sayt uchun yagona bo'lishi va sarlavhada u ko'rsatilgan sahifaning butun mohiyatini o'z ichiga olishi kerak.</p><p>Keling, oldinga boraylik. HTML5 hujjatda semantik belgilar yaratish uchun ishlatiladigan yangi teglarni taqdim etadi. Bular sarlavha, navbat, asosiy, maqola, chetga, altbilgi va hokazo teglardir. Displey nuqtai nazaridan ular odatdagilar bilan bir xil ishlaydi. <div>teglar, ya'ni bu blok elementlari. Lekin agar <div>semantik yukga ega emas, keyin sarlavha, nav, asosiy va boshqalar faqat mazmunli ishlatilishi kerak.</p><h3>Sahifa sarlavhasi</h3><p>Sahifa sarlavhasi sarlavha tegida formatlangan. E'tibor bering, sahifa sarlavhasi h1 tegi yordamida yozilgan.</p><p> <!-- Header страницы --> <header> <h1>Sayt sarlavhasi</h1> </header> </p><p>Agar bizda ham sarlavha yonida shior bo'lsa, biz uni p, div yoki spanga joylashtiramiz.</p><p> <!-- Header страницы --> <header> <h1>Sayt sarlavhasi</h1> <p>sayt shiori</p> </header> </p><p><b>H1 yorlig'i haqida eslatma</b></p><p>Shuni ta'kidlash kerakki, HTML5 da H1 tegi u joylashgan konteyner nomini ko'rsatish uchun ishlatiladi (bu sarlavha, bo'lim, maqola va boshqalar bo'lishi mumkin).</p><p>HTML5 teglari paydo bo'lishidan oldin semantika biroz boshqacha va boshqacha edi. Shunday qilib, HTML4 da har bir sahifada faqat bitta H1 sarlavhasi bo'lishi mumkin! Qoida tariqasida, bu maqolaning sarlavhasi yoki sahifaning sarlavhasi edi (masalan, agar u bir nechta maqolalar ko'rsatilgan toifa sahifasi bo'lsa.) H2 pastki sarlavhalar yoki asosiy maqola bo'limlari uchun ishlatilgan. H3 pastki bo'limlar va boshqalar uchun.</p><h3>Sahifani navigatsiya qilish</h3><p>Saytning asosiy navigatsiyasi dizayni nav tegida bo'lishi kerak. Shuni ham yodda tutish kerakki, ro'yxat elementlari bilan navigatsiyani loyihalash yaxshi amaliyot hisoblanadi.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>Uy</li> <li>Portfel</li> <li>Galereya</li> <li>Kontaktlar</li> </ul> </nav> </p><h3>Sahifadagi tarkib</h3><p>Sahifaning asosiy mazmuni asosiy tegda formatlangan. Bu bitta maqola yoki bir nechta maqolalar bo'lgan blog sahifasi haqida gapiradigan bo'lsak, bir nechta maqolani oldindan ko'rish bo'lishi mumkin. Asosiy tegga yon panel, sahifa sarlavhasi, altbilgi yoki asosiy navigatsiyani joylashtira olmaysiz!</p><p> <!-- Основное содержимое страниц --> <main>...bosh sahifa mazmuni...</main> </p><h3>Maqola dizayni</h3><p>Maqola tegi maqolalarni oʻrash uchun ishlatiladi. Umuman olganda, bu teg sahifa kontekstidan olib tashlanishi va boshqa joylarda alohida ishlatilishi mumkin bo'lgan kontent blokini o'z ichiga oladi. Bu maqola (maqolaning to'liq matni yoki oldindan ko'rish), forumdagi post va boshqalar bo'lishi mumkin.</p><p>Quyidagi misolda men maqolaning dizaynini kontekstda, asosiy teg ichida ko'rsatdim. Maqolada maqola sarlavhasi bilan sarlavha bloki mavjud. Maqolaning nashr etilgan sanasi maxsus vaqt yorlig'i bilan belgilanadi, u oddiy inline element sifatida ko'rsatiladi. Vaqt yorlig'i maxsus atributga ega bo'lib, unda nashr vaqti mashina formatida ko'rsatilishi kerak. Bu faqat datetime="2015-09-30" yoki soat daqiqa va soniya bilan datetime="2015-09-30T15:25:55" bo'lishi mumkin. Pubdate parametri maqola yozilishi bilan bir vaqtda chop etilganligini bildiradi. Agar bu yangilik bo'lsa, demak, yangilik vaqti bitta va nashr vaqti boshqacha bo'lishi mumkin, buning uchun vaqt yorlig'ini ikki marta belgilashingiz va nashr vaqti ko'rsatilgan tegga pubdate qo'yishingiz kerak.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Maqola sarlavhasi</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 sentyabr</time> </header> <!-- Подзаголовок страницы --> <h2>Maqola sarlavhasi</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo qusquam, soluta sunt, aliquam voluptatem voluptate! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Yuqoridagi misoldan siz maqolaning sarlavhasi va altbilgisini ajratib ko'rsatish uchun maqola ichida sarlavha va altbilgi teglari ishlatilganligini ko'rishingiz mumkin.</p><h3>Vidjetli yon panel yoki ustun</h3><p>Har bir alohida yon panel elementi uchun biz chet blokdan foydalanamiz. Uning ichida sarlavha h1 tegi bilan formatlangan. Shunday qilib, yon panel ustuni quyidagicha ko'rinishi mumkin:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Vidjet sarlavhasi</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Oxirgi eslatmalar</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Ommabop sharhlar</h1> ... </aside> </div> </p><h3>Bo'lim yorlig'i</h3><p>Bo'lim yorlig'i mavzuga aloqador kontent guruhini yoki bo'limini ko'rsatish uchun ishlatiladi.Uning ishlatilishi maqolaga o'xshaydi, asosiy farqi shundaki, element ichidagi kontent hech qanday ma'noga ega bo'lmasligi mumkin. <section>sahifaning o'zi kontekstidan tashqarida. teglardan foydalanish tavsiya etiladi ( <h1> – <h6>) bo'lim mavzusini ko'rsatish.</p><p>Hozir o'qiyotgan maqolangizga misol keltirish uchun har bir xatboshini tegga o'rashingiz mumkin <section>. Masalan, bo'lim yorlig'i ochilish sahifasidagi kontent bloklarini ta'kidlash uchun ishlatilishi mumkin. Bu ko'pincha kontent uchun konteyner sifatida ishlatiladigan div elementining ta'rifiga o'xshaydi. Farqi shundaki, div hech qanday semantik ma'noga ega emas va uning ichidagi mazmun haqida hech narsa aytmaydi. Bo'lim tegi, aksincha, undagi tarkibning ma'no bilan bog'liqligini aniq ko'rsatish uchun ishlatiladi. Siz ba'zi div teglaringizni bo'lim teglari bilan almashtirishingiz mumkin, lekin har doim o'zingizga savol bering: "Bu tarkib bog'liqmi yoki yo'qmi?"</p><p>Shaharlar ro'yxatida bo'lim tegidan foydalanishga misol:</p><p> <h1>Alohida hodisa</h1> <section> <header> <h2>Shaharlar</h2> </header> <p>2010 yilda ushbu shaharlarda bizga qo'shiling.</p> <section> <header> <h3>Sietl</h3> </header> <p>Sariq g'ishtli yo'lni kuzatib boring.</p> <section> <header> <h3>Boston</h3> </header> <p>Bu uning do'stlari uchun Bintown.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>Shunday <em>yaxshi</em>.</p> <small>Turar joy ta'minlanmagan.</small> </p><h3>Sayt altbilgisi - Altbilgi</h3><p>Sayt altbilgisi teg bilan yaratilgan <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 sayt Mualliflik huquqi</p> </footer> </p><h3>Xulosa</h3><p>Sahifa tuzilishini tekshirish uchun HTML5 kontur vositasidan foydalanishingiz mumkin. U sahifa tuzilishini bloklar va sarlavhalar bo'yicha ko'rsatadi.</p><p>HTML5-dagi semantika maqolada yuqorida keltirilgan teglar bilan cheklanmaydi. Ammo yuqoridagi misollardan foydalanib, siz belgilashingizni yangilashingiz va saytingizni qidiruv tizimiga qulayroq qilishingiz mumkin, bu esa qidiruv natijalarida saytingiz uchun yuqori reytingga olib keladi.</p><p>Ushbu mavzuni davom ettirish uchun siz boshqa yangi HTML5 teglari bilan tanishishingiz mumkin. Shuningdek, schema.org kabi ma'lumotlarni loyihalash va tizimlashtirish uchun mikro formatlar</p><p><b>HTML5 teglaridan foydalanish haqida muhim eslatma.</b> Spetsifikatsiya semantik teglardan foydalanishning qat'iy qoidalarini belgilamaydi, u faqat ulardan foydalanish bo'yicha tavsiyalarni beradi. Qaerda va qaysi HTML5 tegidan foydalanishni tushunmasangiz yoki bilmasangiz, hujjat tuzilishiga zarar bermaslik yoki buzmaslik uchun div-dan foydalangan ma'qul.</p><p><b>Maqolalar va materiallar</b></p> <ul><li>1. HTML hujjatlari strukturaviy hujjatlardir.</li> <li>2. Elementlarning nomlari har qanday holatda ham yozilishi mumkin.</li> <li>3. Atribut nomlari har qanday holatda ham yozilishi mumkin.</li> <li>4. Atribut qiymatlari registrlarga, ayniqsa manzillarga bog'liq (Unix operatsion tizimlarining xususiyati turli registrlardagi belgilarning turlicha talqin qilinishidir, shuning uchun fayllar</li> </ul><p>rasm .gif va rasm.GIF har xil!).</p> <ul><li>5. Element nomlarida bo‘shliq bo‘lishi mumkin emas.</li> <li>6. Agar atribut qiymatlari bo'sh joylarni o'z ichiga olsa, ular qo'shtirnoq ichida bo'lishi kerak.</li> <li>7. Qo'shimcha bo'shliqlar, yorliqlar va karetaning qaytishlari e'tiborga olinmaydi va bitta bo'shliqqa siqiladi.</li> <li>8. Elementlar bir-birining ichiga joylashtirilishi mumkin. Bunday holda, uy qurish qoidasiga rioya qilish kerak. O'rnatilgan element ichida ochilish tegidan tashqari, yopish tegi ham bo'lishi kerak. Kesishmalar noto'g'ri:</li> </ul><h1>HTML hujjat tuzilishi</h1> <p>9. Notanish elementlar va atributlar brauzerlar tomonidan e'tiborga olinmaydi ("xato tolerantligi").</p> <p>Ko'pgina hujjatlarda sarlavha, paragraflar yoki ro'yxatlar kabi standart elementlar mavjud. HTML teglaridan foydalanib, siz ushbu elementlarni belgilashingiz mumkin, bu esa veb-brauzerlarni ushbu elementlarni ko'rsatish uchun minimal ma'lumot bilan ta'minlaydi, shu bilan birga, umuman olganda, hujjatlarning umumiy tuzilishi va axborot to'liqligini saqlaydi. HTML-hujjatni o'qish uchun faqatgina veb-brauzer kerak bo'ladi, u HTML teglarini sharhlaydi va hujjatni muallif tomonidan ko'rsatilgandek ko'rsatadi.</p> <p>Veb-brauzer hujjatni qabul qilganda, hujjat qanday talqin qilinishi kerakligini aniqlaydi. Hujjatda paydo bo'ladigan birinchi teg teg bo'lishi kerak <HTML>. Bu teg veb-brauzerga hujjat HTML yordamida yozilganligini bildiradi.</p> <p><b>HTML-dagi sharhlar.</b> Har qanday til singari, HTML ham hujjatning asosiy qismiga sharhlar kiritish imkonini beradi, ular hujjat tarmoq orqali uzatilganda saqlanadi, lekin brauzer tomonidan ko'rsatilmaydi. Ko'pincha, ba'zi teglar yoki butun sintaktik tuzilmalar ularni qayta ishlashga qodir bo'lmagan brauzerlarning eski versiyalari sharhlarida "yashirin" bo'ladi. Sharhlar hujjatning istalgan joyida va istalgan miqdorda paydo bo'lishi mumkin. Esda tutish kerakki, sharhlar hujjat hajmini va shuning uchun yuklash vaqtini oshiradi.</p> <p><b>Hujjatning umumiy sarlavha qismi.</b> Hujjat bosh yorlig'i tegdan keyin darhol ishlatilishi kerak <HTML>va hujjatning boshqa joyida yo'q. Bu teg hujjatning umumiy tavsifini ifodalaydi. Boshlash belgisi <HEAD>tegdan oldin darhol joylashtiriladi <TITLE>va hujjatni tavsiflovchi boshqa teglar va yakunlovchi teg</head> hujjat tavsifi tugagandan so'ng darhol joylashtiriladi.</p> <p><b>Hujjat nomi.</b> Ko'pgina veb-brauzerlar teg tarkibini ko'rsatadi <TITLE>hujjatni o'z ichiga olgan oynaning sarlavhasida va agar veb-brauzer tomonidan qo'llab-quvvatlansa, xatcho'plar faylida. Sarlavha teglar bilan cheklangan <TITLE>Va, teglar ichiga joylashtirilgan . Hujjatning o'zi oynada ko'rsatilganda hujjat sarlavhasi ko'rinmaydi.

      Hujjat tanasi teglari. Hujjat tanasi teglari oynada ko'rsatilgan HTML hujjat komponentlarini aniqlaydi. Hujjatning asosiy qismida boshqa hujjatlar, matn va boshqa formatlangan ma'lumotlarga havolalar bo'lishi mumkin.

      Hujjatning asosiy qismi. Hujjatning tanasi teglar orasida bo'lishi kerak Va. Bu hujjatning matn va grafik (semantik) ma'lumotlari sifatida ko'rsatiladigan qismidir.

      Sarlavha darajalari<Нх>. Sarlavhalarning birinchi darajasi (eng kattasi) 1 raqami bilan, keyingisi 2 raqami bilan belgilanadi va 6 raqamigacha davom etadi. Ko'pgina brauzerlar oltita darajadagi sarlavhalarni talqin qilishni qo'llab-quvvatlaydi va ularning har biri o'ziga xos uslubni belgilaydi. Ko'pgina hollarda, bunday sarlavhaning matni qalin bo'ladi va matndan keyin bo'sh qator bo'ladi. Bu teglar hujjatning mantiqiy tuzilishini aniqlashi va Internet qidiruv tizimlari tomonidan indekslashda ishtirok etishi muhim. Oltinchi darajadan yuqori sarlavhalar standart emas va brauzer tomonidan qo'llab-quvvatlanmasligi mumkin.

      Paragraf tegi<Р>. IN Ko'pgina so'z protsessorlaridan farqli o'laroq, HTML hujjatida vagonlarni qaytarish e'tiborga olinmaydi. Brauzer paragraflarni faqat teg mavjud bo'lganda ajratadi<Р>. Agar siz paragraflarni teg bilan ajratmasangiz<Р>, keyin hujjat bitta katta paragrafga o'xshaydi.

      Oldindan formatlangan matn tegi 

      .
 teg 
      Matnni ekranda maxsus formatlash bilan ko'rsatishga imkon beradi.  Oldindan formatlangan matn yakuniy teg bilan tugaydi
      .  Oldindan formatlangan matn ichida siz quyidagilarni foydalanishingiz mumkin: qatorlar tasmasi, yorliq belgilar (sakkiz belgi o'ngga siljitish), brauzer tomonidan o'rnatilgan nomutanosib Courier shrifti.
      

      Ro'yxat teglari. HTML hujjatida ro'yxatlarning uchta asosiy turi mavjud: raqamlangan, markirovka qilingan va tavsif ro'yxati.
      

      Siz turli xil roʻyxat teglari yoki boshqalar ichida takrorlangan roʻyxatlar yordamida ichki roʻyxatlar yaratishingiz mumkin.  Buni amalga oshirish uchun siz shunchaki bir juft tegni (boshlash va tugatish) ikkinchisining ichiga joylashtirishingiz kerak.  Ichki ro'yxat elementlarida ro'yxat elementini bildiruvchi bir xil markerlar bo'ladimi, brauzerga bog'liq.
      

      Raqamlangan ro'yxatlar.  IN Raqamlangan ro'yxatda brauzer avtomatik ravishda element raqamlarini tartibda kiritadi.  Bu shuni anglatadiki, agar siz raqamlangan ro'yxatdagi bir yoki bir nechta elementni o'chirsangiz, qolgan raqamlar avtomatik ravishda qayta hisoblab chiqiladi.
      

       
        va teg bilan tugaydi
       
    • .
      

      Belgilangan ro'yxatlar.  Uchun Belgilangan ro'yxatlar uchun brauzer odatda ro'yxat elementi uchun markerlardan foydalanadi.  Marker turi odatda brauzer foydalanuvchisi tomonidan sozlanadi.
      

      Raqamlangan ro'yxat boshlang'ich teg bilan boshlanadi 
        va teg bilan tugaydi
      .  Har bir ro'yxat elementi teg bilan boshlanadi<ы>.
      

      Shriftni formatlash. HTML matn qismlarini shrift tanlashda ikkita yondashuvga imkon beradi.  Bir tomondan, matnning ma'lum bir qismidagi shrift qalin yoki kursiv bo'lishi kerakligini to'g'ridan-to'g'ri ko'rsatishingiz mumkin, ya'ni.  matnning jismoniy uslubini o'zgartirish.  Boshqa tomondan, matnning ba'zi qismini qandaydir odatiy bo'lmagan mantiqiy uslubga ega deb belgilash mumkin, bu uslubning talqinini brauzerga qoldiradi.
      

      HTML hujjatidagi grafikalar. WEB ning eng jozibali xususiyatlaridan biri HTML hujjatiga grafik va boshqa turdagi ma’lumotlarni kiritish imkoniyatidir.
      

      HTML hujjatlarida grafiklardan foydalanishning ikki yo'li mavjud.  Birinchisi, grafik tasvirlarni hujjatga joylashtirish bo‘lib, u foydalanuvchiga bevosita hujjatning boshqa elementlari kontekstida tasvirlarni ko‘rish imkonini beradi.  Bu teg yordamida amalga oshiriladi .  Bu teg nuqtali, ya'ni.  yopilmaydi.  Teg sintaksisi:
      

      

      Kerakli parametr standart URL bilan bir xil sintaksisga ega.  Ushbu URL brauzerga qaerda ekanligini aytadi
      

      chizish.  Chizma brauzer tomonidan qo'llab-quvvatlanadigan grafik formatda saqlanishi kerak.  Bugungi kunda bular GIF, JPG, PNG formatlari.  Ular ko'pchilik brauzerlar tomonidan qo'llab-quvvatlanadi.
      

      ALT="matn"
      

      Ushbu ixtiyoriy element grafiklarni qo'llab-quvvatlamaydigan yoki tasvir grafiklari o'chirilgan brauzerda ko'rsatiladigan matnni belgilaydi.  Odatda bu foydalanuvchi ekranda ko'rishi mumkin bo'lgan yoki ko'rishi mumkin bo'lgan tasvirning qisqacha tavsifi.  Agar ushbu parametr bo'lmasa, ko'pchilik brauzerlar rasm o'rniga bo'sh ramkani ko'rsatadi.  teg foydalanuvchilar Lynx kabi grafik bo'lmagan brauzerdan foydalanayotgan bo'lsa va qidiruv tizimini indekslash uchun tavsiya etiladi.  Matn sichqoncha kursorini bir muncha vaqt tasvir ustida harakatlanmasdan turib, kursor ostidagi tizim maslahati sifatida ham ko'rinadi.
      

      Ko'pgina brauzerlar hujjatingizga fon rasmini qo'shishga imkon beradi, u hammom plitkalari kabi takrorlanadi va butun hujjatning fonida ko'rinadi.  Bu ikkinchi yo'l.  Ba'zi foydalanuvchilar fon grafiklarini yoqtirishadi, ba'zilari esa yoqmaydi.  Ko'zga tashlanmaydigan shaffof naqsh (devor qog'ozi) aksariyat hujjatlar uchun fon sifatida yaxshi ko'rinadi.
      

      Gipermatnli havolalar WEBni foydalanuvchilar uchun jozibador qiladigan asosiy komponent hisoblanadi.  Gipermatnli havolalarni (keyingi o'rinlarda havolalar deb yuritiladi) qo'shish orqali foydalanuvchi hujjatlar to'plamini bog'langan va tuzilgan qiladi, bu esa unga kerakli ma'lumotlarni imkon qadar tez va qulay tarzda olish imkonini beradi.
      

      Bog'lanishlar standart formatga ega bo'lib, u brauzerga ularni sharhlash va havola turiga qarab kerakli funktsiyalarni (chaqiruv usullari) bajarish imkonini beradi.  Havolalar boshqa hujjatga, hujjat ichidagi ma'lum bir joyga ishora qilishi yoki faylni so'rash kabi boshqa funktsiyalarni bajarishi mumkin.  Giperhavola sifatida siz matn yoki rasm yoki ikkalasidan foydalanishingiz mumkin.
      

      HTML hujjatidagi havolalar tuzilishi. Brauzer URL manziliga havolani ko'rsatishi uchun siz giperhavola tegining ichiga matn yoki rasmni joylashtirishingiz kerak.  HTML sintaksisi quyidagicha:
      

      <А HREF="URL">havola sifatida ajratib ko'rsatiladigan matn yoki tasvir
      


      teg<А HREF="URL">havola tavsifini va tegni ochadi- yopadi.  Ushbu ikkita teg o'rtasida joylashgan har qanday matn veb-brauzer tomonidan maxsus tarzda ta'kidlanadi.  Odatda bu matn tagiga chizilgan va ta'kidlangan holda ko'rinadi.  Rasm to'rtburchaklar ramka bilan o'ralgan.  URL-manzilni ifodalovchi matn brauzer tomonidan ko'rsatilmaydi, faqat havola faollashtirilganda (odatda ta'kidlangan yoki tagiga chizilgan matnni bosish orqali) mo'ljallangan amallarini bajarish uchun ishlatiladi.
      

      Hujjat ichidagi teglarga havolalar. Ushbu bo'limlar uchun maxsus yashirin teglar yordamida bir xil hujjatning turli sohalari yoki bo'limlari bilan bog'lanishingiz mumkin.  Bu sizga hujjat ichida ekranni aylantirmasdan tezda bo'limdan bo'limga o'tish imkonini beradi.  Foydalanuvchi havolani bosgandan so'ng, brauzer uni hujjatning belgilangan bo'limiga o'tkazadi va ushbu bo'lim uchun yorliq mavjud bo'lgan qator brauzer oynasining birinchi qatoriga joylashtiriladi (agar "uzunligi" bo'lsa). brauzer oynasidagi hujjat yetarli).
      

      Har bir HTML hujjat teg bilan boshlanishi kerak <
HTML>
 va teg bilan tugating HTML>
.  Bu teglar ular orasidagi chiziqlar bitta HTML hujjatini ifodalashini bildiradi.  Bundan tashqari, HTML fayli umuman HTML tilining elementi ekanligini ko'rishingiz mumkin.
      Shuningdek, HTML hujjatida HEAD (hujjat haqida ma'lumot) va BODY (hujjat tanasi) elementlari bo'lishi kerak.
      Hujjatlar bo'limiBOSH
      Hujjatning HEAD bo'limi uning sarlavhasini belgilaydi va brauzer uchun hujjat haqida qo'shimcha ma'lumotlarni ham o'z ichiga oladi.  Ushbu bo'lim ixtiyoriy, lekin uni har doim HTML hujjatlarida ishlatish tavsiya etiladi, chunki yaxshi yozilgan sarlavha juda foydali bo'lishi mumkin.
      Sarlavha bo'limi teg bilan boshlanadi <
BOSH>
 va darhol tegni kuzatib boradi .  HEAD elementining ochilish va yopish teglari orasida boshqa sarlavha elementlari joylashgan.
      Hujjat sarlavhasi
      HTML hujjatiga nom berish uchun teg hisoblanadi <
TITLE>
.  Bu nom brauzer oynasi sarlavhasida ko'rsatiladi.  Sarlavha teglar orasiga yoziladi Va va matn qatoridir.  Ushbu qatorning uzunligi har qanday bo'lishi mumkin, lekin uni 60 belgidan oshmasligi tavsiya etiladi.  TITLE elementi faqat HEAD bo'limida paydo bo'lishi kerak.
      Hujjatlar bo'limiTANI
      Hujjatning ushbu bo'limi brauzer oynasida ko'rsatiladigan ma'lumotlarni o'z ichiga oladi.  BODY bo'limi teg bilan boshlanishi kerak <
TANI>
 va teg bilan tugating TANI>
, ular orasida hujjat mazmunini tashkil etuvchi HTML elementlari joylashgan.
      Element spetsifikatsiyasiTANI
      teg hujjatning ko'rinishini belgilovchi bir qator atributlarga ega.  Quyida teg spetsifikatsiyasi keltirilgan .
      TEXT="matn rangi"
      BGCOLOR = "fon rangi"
      BACKGROUND="fon rasmi manzili"
      TEXT atributi butun hujjat uchun RGB yoki belgilar belgisida shrift rangini belgilaydi.  Odatiy bo'lib (agar bu atribut ko'rsatilmagan bo'lsa), brauzer sozlamalari ishlatiladi.
      BGCOLOR atributi hujjat brauzer oynasining fon rangini RGB yoki ramziy belgida belgilaydi.  Brauzer sozlamalari sukut bo'yicha ishlatiladi.
      BACKGROUND atributi fon sifatida foydalaniladigan rasmning manzili va nomini belgilash imkonini beradi.  Ushbu chizma hujjatning fonida qayta ishlab chiqariladi va tarqatiladi.
      LINK, VLINK va ALINK atributlari RGB yoki ramziy belgilarda giperhavolalar ranglarini belgilaydi.  Brauzer sozlamalari sukut bo'yicha ishlatiladi.  Kirilmagan giperhavola - bu boshqa hujjatga o'tish uchun hali foydalanilmagan giperhavola.  Tashrif buyurilgan giperhavola - bu boshqa hujjatga o'tish uchun allaqachon ishlatilgan giperhavola.  Faol giperhavola - hozir navigatsiya qilinayotgan hujjatga giperhavola.
      BODY teg atributlaridan foydalanish bo'yicha maslahatlar
       BODY tegida kamida bitta rangni belgilasangiz, qolganlarini ham belgilang.  Buning sababi shundaki, foydalanuvchi o'z brauzerining rang sozlamalarini o'rnatishi mumkin, chunki bu unga qulayroqdir.  Faqat bitta rangni belgilash ba'zi foydalanuvchilar uchun matnning fon rangiga qorishishiga olib kelishi mumkin.  Natijada, hujjatni ko'rish qiyin bo'ladi.
       Matn rangini shunday tanlangki, u fon rangi yoki tasvirning asosiy ranglari bilan “ishlaydi”.  Misol uchun, yashil rangdagi qizil rang sezilarli miqdordagi odamlar uchun jiddiy muammolarni keltirib chiqarishi mumkin.
       BGCOLOR ham, BACKGROUND ham BODY elementida belgilanishi mumkin.  Bunday holda, brauzer BACKGROUND ga ustunlik beradi, lekin fon tasvirini yuklash mumkin bo'lmasa, BGCOLOR ishlatiladi.  Shuning uchun, hujjatning rang balansini buzmaslik uchun fon rangini fon tasvirining rangiga o'xshash qilib o'rnatishga harakat qiling.
      


      

      

    
       
      
    
      O'qish foydali bo'lishi mumkin: