Qaysi teg hujjat turini belgilaydi. Html kodidagi sharh direktivalari va Doctype, shuningdek, blok va inline elementlar (teglar) tushunchasi. URL-dagi o'zgartirilmagan belgilar

Roʻyxat

Teglar joriy elementga to'g'ri joylashtirilganligini va kerakli elementlar mavjudligini tekshiring.

Xabar oldingi sahifadagi xato tufayli yuzaga keladi.

Oldingi xatolarni tuzating.

Kodga teg kiritilmagan.

Sarlavha

Konteyner qo'shing.

Teg ilovasiz hujjatda bir necha marta ishlatiladi. Bir nechta elementlarni kiritishga ruxsat beriladi, lekin bir-birining ichiga joylashtirilgan.

Ichki teglardan foydalaning.

Belgilangan teg HTML spetsifikatsiyasining bir qismi emas.

defissiz matn

defissiz matn

Tegni olib tashlang yoki mos ekvivalent bilan almashtiring.

Teg tan olinmagan va HTML spetsifikatsiyasining bir qismi emas.

To'g'ri:

Noto'g'ri:

Matn

Noma'lum tegni olib tashlang.

Idish bo'sh yoki faqat bo'sh joy mavjud.

Tegni olib tashlang yoki konteyner ichiga matn qo'shing.

Yakunlovchi tegda etishmayotgan chiziq.

Yechim

Teglar tartibini o'zgartiring yoki ochilish yoki yopish teglaridan birini olib tashlang.

... langar "..." allaqachon aniqlangan

Turli teglarning nom atributining qiymatlari bir-biriga mos keladi. Nom qiymati noyob bo'lishi kerak.

Yechim

Boshqa nom tanlang yoki oldingi nomlarni bir xil bo'lmasligi uchun o'zgartiring.

sifatida mo'ljallangan, ehtimol

Teg HTML kodida ikki marta takrorlanadi, holbuki bunday tegda o'zi bo'lmasligi kerak.

Salom Dunyo!

Salom Dunyo!

Yechim

Teglardan birini olib tashlang.

"..." atributiga ega emas

Kerakli teg atributi talab qilinadi, lekin etishmayapti.

HTML asoslari HTML tilining asosiy qoidalarini, HTML-sahifa tuzilishining tavsifini va HTML-hujjat tuzilishidagi HTML elementlari orasidagi munosabatlarni o'z ichiga oladi.

HTML hujjati oddiy matn muharririda (Notepad) yoki kodni ajratib ko'rsatish bilan ixtisoslashganda (Notepad++, Visual Studio Code va boshqalar) yaratilishi mumkin bo'lgan oddiy matn hujjatidir. HTML hujjatida .html kengaytmasi mavjud.

HTML hujjati HTML elementlari va matn daraxtidan iborat. Har bir element dastlabki hujjatda boshlang'ich (ochilish) va tugatish (yopish) tegi (kamdan-kam istisnolar bilan) bilan belgilanadi.

Boshlanish yorlig'i elementning qaerdan boshlanishini, tugatish yorlig'i qaerda tugashini ko'rsatadi. Yopuvchi teg teg nomidan oldin / qiyshiq chiziq qo'shish orqali hosil bo'ladi: .... Boshlash va tugatish teglari o'rtasida tegning mazmuni - tarkib joylashgan.

Yagona teglar kontentni to'g'ridan-to'g'ri saqlay olmaydi, u atribut qiymati sifatida yoziladi, masalan, teg ichida tugmacha matni bo'lgan tugma hosil qiladi.

Teglar bir-birining ichiga joylashtirilishi mumkin, masalan,

Matn

. Investitsiya qilishda siz ularni yopish tartibiga rioya qilishingiz kerak ("matryoshka" tamoyili), masalan, quyidagi yozuv noto'g'ri bo'ladi:

Matn

.

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

Har bir elementga bir nechta sinf qiymatlari va faqat bitta id qiymati tayinlanishi mumkin. Bir nechta sinf qiymatlari bo'sh joy bilan ajratilgan holda yoziladi. Sinf va id qiymatlari faqat harflar, raqamlar, defislar va pastki chiziqdan iborat bo'lishi va faqat harflar yoki raqamlar bilan boshlanishi kerak.

Brauzer HTML-hujjatni ko'radi (talqin qiladi), uning tuzilishini (DOM) quradi va uni ushbu faylga kiritilgan ko'rsatmalarga (uslublar jadvallari, skriptlar) muvofiq ko'rsatadi. Belgilash to'g'ri bo'lsa, brauzer oynasida HTML elementlari - sarlavhalar, jadvallar, rasmlar va boshqalarni o'z ichiga olgan HTML sahifasi ko'rsatiladi.

Interpretatsiya jarayoni (tahlil qilish) veb-sahifa brauzerga to'liq yuklanishidan oldin boshlanadi. Brauzerlar CSS-ni qayta ishlash va uslublar jadvallarini sahifa elementlari bilan bog'lashda HTML hujjatlarini boshidan ketma-ket qayta ishlaydi.

HTML hujjati ikkita bo'limdan iborat - sarlavha - teglar orasidagi ... va kontent qismi - teglar orasidagi ....

Web sahifa tuzilishi 1. HTML hujjat tuzilishi

HTML hujjat turi deklaratsiyasi faylidagi qoidalarga amal qiladi (Hujjat turini aniqlash yoki DTD). DTD qaysi teglar, atributlar va ularning qiymatlari ma'lum bir HTML turi uchun amal qilishini belgilaydigan XML hujjatidir. HTML ning har bir versiyasi o'z DTD ga ega.

DOCTYPE veb-sahifaning brauzer tomonidan to'g'ri ko'rsatilishi uchun javobgardir. DOCTYPE nafaqat HTML versiyasini (masalan, html), balki Internetdagi tegishli DTD faylini ham belgilaydi.

...

Teg ichidagi elementlar DOM (hujjat obyekti modeli) deb ataladigan hujjat daraxtini tashkil qiladi. Bunday holda, element ildiz elementi hisoblanadi.

Guruch. 1. Web sahifaning eng oddiy tuzilishi

Veb-sahifa elementlarining o'zaro ta'sirini tushunish uchun elementlar orasidagi "oilaviy munosabatlar" deb ataladigan narsalarni ko'rib chiqish kerak. Bir nechta ichki elementlar o'rtasidagi munosabatlar ota-ona, bola va opa-singil sifatida tasniflanadi.

Ajdod - boshqa elementlarni o'z ichiga olgan element. 1-rasmda barcha elementlarning ajdodi . Shu bilan birga, element tarkibidagi barcha teglarning ajdodi hisoblanadi: ,

, , va hokazo.

Avlod - bu bir yoki bir nechta element turlari ichida joylashgan element. Masalan, ning avlodi va elementi

va ikkalasining avlodi.

Asosiy element - bu boshqa elementlar bilan quyi darajadagi bog'liq bo'lgan va daraxtda ularning tepasida joylashgan element. 1-rasmda va. teg

Faqat ota-ona.

To'liq element - bu yuqori darajadagi boshqa elementga bevosita bo'ysunadigan element. 1-rasmda faqat elementlar mavjud, ,

Va bolalari.

Qarindosh element - bu bir xil darajadagi elementlar deb ataladigan, ko'rib chiqilayotgan element bilan umumiy asosiy elementga ega bo'lgan element. 1-rasmda va bir xil darajadagi elementlar, shuningdek, elementlar , va

Ular bir-biriga opa-singillar.

1.1. 1.2 element. Element

Bo'lim ... sahifa haqida texnik ma'lumotlarni o'z ichiga oladi: sarlavha, tavsif, qidiruv tizimlari uchun kalit so'zlar, kodlash va boshqalar. Siz kiritgan ma'lumotlar brauzer oynasida ko'rsatilmaydi, lekin u brauzerga sahifani qanday qayta ishlash kerakligini aytadigan ma'lumotlarni o'z ichiga oladi.

1.2.1. Element

Kerakli bo'lim yorlig'i. Ushbu teg ichiga joylashtirilgan matn veb-brauzerning sarlavha satrida paydo bo'ladi. Sarlavhaga to'liq mos kelishi uchun sarlavha 60 belgidan oshmasligi kerak. Sarlavha matni veb-sahifa mazmunining eng to'liq tavsifini o'z ichiga olishi kerak.

1.2.2. Element

Ixtiyoriy bo'lim tegi bitta tegdir. Uning yordami bilan siz sahifa mazmuni tavsifini va qidiruv tizimlari uchun kalit so'zlarni, HTML hujjatining muallifini va boshqa metadata xususiyatlarini o'rnatishingiz mumkin. Element bir nechta elementlarni o'z ichiga olishi mumkin, chunki ular ishlatiladigan atributlarga qarab turli xil ma'lumotlarni o'z ichiga oladi.

Sahifa mazmuni va kalit so'zlarning tavsifi bir vaqtning o'zida bir nechta tillarda, masalan, rus va ingliz tillarida ko'rsatilishi mumkin:

Teg yordamida siz qidiruv tizimlari tomonidan veb-sahifani indekslashni bloklashingiz yoki ruxsat berishingiz mumkin:

Belgilangan vaqtdan keyin sahifani avtomatik ravishda qayta yuklash uchun siz yangilash qiymatidan foydalanishingiz kerak:

Sahifa 30 soniyadan keyin qayta yuklanadi. Mehmonni boshqa sahifaga yo'naltirish uchun url parametrida URL manzilini ko'rsatishingiz kerak:

Fikr bildirish uchun siz ro'yxatdan o'tishingiz kerak.

Salom, aziz blog o'quvchilari. Men HTML bilan ishlash asoslari haqida eng boshidan, izchil va hech narsani qoldirmasdan gapirishni davom ettirmoqchiman. Bugun biz maxsus Doctype yorlig'i (deklaratsiya) haqida gaplashamiz, HTML kodida sharhlarni qanday qilib to'g'ri formatlashni, veb-hujjatning Sarlavhasini qanday yozishni o'rganamiz va blok va inline elementlar o'rtasidagi farqni tushunishga harakat qilamiz.

Bo'limdan oldingi maqolada (asosan haqida gapirilgan) biz Internetdagi har qanday hujjat ma'lum bir tuzilishga ega bo'lishi kerakligi bilan yakunladik.

Har qanday oddiy veb-hujjatda (sayt sahifasida) duch keladigan birinchi belgilash tili elementi maxsus Doctype direktivasi bo'ladi. U burchakli qavs bilan boshlanadi va undan keyin undov belgisi keladi.

Doctype elementining o'zi berilgan hujjat turini e'lon qilish uchun xizmat qiladi va brauzerga yuklangan veb-sahifa kodini tahlil qilishda Html yoki XHTML ning qaysi versiyasiga (W3C validator tomonidan tasniflangan) tayanishi kerakligini tushunishga yordam beradi.

Agar hujjat turi ushbu yo'riqnomada umumiy qabul qilingan qoidalarga muvofiq ko'rsatilmagan bo'lsa, brauzer sizning hujjatingizni hali ham to'g'ri ko'rsatishi mumkin, ammo boshqa mashhur minglab o'quvchilaringiz ham xuddi shunday qilishlari haqiqat emas. Shuning uchun Doctype sahifaning manba kodida bo'lishi va u to'g'ri tuzilgan bo'lishi kerak.

Ammo keling, bu haqda biroz batafsilroq to'xtalib o'tamiz. Endi biz Internetda dualizmning bir turini yoki ikki turdagi hujjatlarni ko'rmoqdamiz - ular ilgari HTML tilining qornidan CSS ajralishidan oldin bo'lgani kabi va hozirda qabul qilingan zamonaviy standartlarga muvofiq.

Tabiiyki, yangi standartlar qabul qilingandan so'ng, Internetda hali ham sof HTML (CSSsiz) ning eski tamoyillari bo'yicha yaratilgan juda ko'p hujjatlar mavjud edi va brauzerlar qandaydir tarzda ular bilan ishlashlari kerak edi. Bir vaqtlar Microsoft yangi XML belgilash tilidan ushbu Doctype direktivasidan foydalanishni taklif qilgan.

Bu boshqacha ko'rinishi mumkin (bu haqda quyida o'qing), lekin eng oson yo'li bu variantni ishlatishdir (buning sababini quyida tushuntiraman):

Shunday qilib, brauzer hujjat kodini tahlil qilish uchun qaysi standartlardan foydalanish kerakligini tushunadi. Agar bu deklaratsiya sodir bo'lsa, brauzer standart rejimga o'tadi. Agar brauzer uni hujjatning boshida topmasa (yoki u to'g'ri imloga mos kelmasa), brauzer hiyla-nayranglar rejimini yoqadi.

Bu holda hujjat xuddi shu brauzer juda eski (vintage) kabi ko'rsatiladi. Agar siz bir xil hujjatga deklaratsiya qo'shsangiz, brauzer mavjud barcha standartlarni hisobga olgan holda kodni tahlil qiladi.

To'g'ri, eski brauzer tushunchasi juda noaniq. Operatsion tezligi va foydalanuvchilarning qalbiga kirish tezligi bo'yicha bir xil etakchi Google Chrome faqat 2008 yilda paydo bo'lgan.

Keling, HyperText Markup Language 4.01 standartidan boshlaylik (HTML 5 hali ishlab chiqilmoqda). Bu holatda uchta Doctype opsiyasi mavjud: qat'iy, o'tish davri va freym yoqilgan:

Ikkinchi variant (O'tish davri) ko'pincha ishlatiladi, chunki bu hujjat kodini yozishda ko'proq erkinliklarga imkon beradi, ammo bugungi kunda ulardan foydalanishning ahamiyatsizligi sababli ramkalar bilan variant siz uchun foydali bo'lishi dargumon.

Aslida, XHTML uchun bir xil uchta Doctype varianti mavjud - qat'iy, o'tish davri va ramka qo'llab-quvvatlashi bilan:

Ammo keling, deklaratsiyani to'g'ri yozishning ushbu variantlari qayerdan kelganini ko'rib chiqaylik. Esingizda bo'lsin, birinchi maqolada biz maqbul bo'lganlar jadvalini ko'rib chiqdik:

Va mumkin bo'lganlarning alohida jadvali:

Ko'rib turganingizdek, ushbu jadvallarning ikkalasida ham "Depr" ustuni mavjud bo'lib, unda "D" harfi eskirgan va eskirgan HTML teglari va atributlari bilan belgilangan. Biz buni allaqachon ko'rib chiqdik. Shuni yodda tutingki, o'ngdagi "DTD" ustunidagi har bir "D" yonida "L" (bo'sh DTD) yoki "F" (Frameset DTD) mavjud.

Bu. "D" bilan belgilanmagan barcha teglar va atributlar (tavsiya etilmaydi) qat'iy Doctype bezakiga kiritilgan (faqat tavsiya etilgan elementlar va boshqa hech narsa). Agar siz hali ham Html tilining tavsiya etilmagan teglari va atributlaridan foydalanishga ruxsat bersangiz (ular "D" harfi bilan belgilangan), unda siz bunday hujjatlar uchun o'tish deklaratsiyasini e'lon qilishingiz kerak bo'ladi.

"DTD" ustunida "F" bilan belgilangan ba'zi elementlar va atributlar (masalan, FRAME, FRAMESET) ramka tuzilmalari uchun Doctype deklaratsiyasiga kiritiladi. U o'tish davriga asoslanadi, unga teglar va atributlar yaratish uchun qo'shiladi, ular haqida taqdim etilgan havolada o'qishingiz mumkin.

Keling, Doctype deklaratsiyasi qaysi qismlardan iboratligini aniqlashga harakat qilaylik?

Birinchi bo'lib ism keladi - "Doctype". Bu erda, menimcha, hamma narsa aniq. Keyinchalik "Html" keladi - bu belgilash tilining ildiz elementi. Keyin bu deklaratsiya ommaviy yoki tizimli ekanligi ko'rsatiladi. Doctype ning barcha variantlari ommaviy bo'lib, u "PUBLIC" so'zi bilan belgilanadi.

Va keyin ikkita hujjat identifikatori mavjud. Birinchisi umumiy identifikator deb ataladi (“-//W3C//DTD HTML 4.01//EN”). Minus bu deklaratsiya ISO standartida ro'yxatdan o'tmaganligini anglatadi. Undan keyin konsortsium nomi, uning nomi va u yozilgan til ko'rsatiladi. Ikkinchi identifikator qat'iy variant fayliga yo'lni belgilaydi.

Xo'sh, endi sizga Doctype haqidagi butun haqiqatni aytib beraman. Brauzerlar faqat uning rasmiy ravishda to'g'ri yozilishi haqida qayg'uradilar, lekin ular hech qachon unda ko'rsatilgan faylni yuklab olish uchun konsorsium veb-saytiga bormaydilar.

Agar siz qat'iy deklaratsiya variantini tanlasangiz va ayni paytda Html-ning zamonaviy versiyasida tavsiya etilmaydigan teglar va atributlardan foydalansangiz ham, har qanday brauzer sizni hali ham to'g'ri tushunadi - bu tasdiqlangan va tasdiqlangan haqiqatdir.

Shuning uchun, ortiqcha uzatmasdan, Html 5 da Doctype yozuvi quyidagicha ko'rinadi:

Va tamom. Faqat "Html" qoldi. Va HTML 5 hali to'liq amalga oshirilmaganiga qaramay, ushbu parametr barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi va siz undan xavfsiz foydalanishingiz mumkin. Oh, qanday qilib va ​​siz aytasiz ...

Veb-hujjatning xizmat ko'rsatish sohasida (Bosh teglar orasida) ushbu hujjatning sarlavhasi (veb-sahifa) Sarlavha elementlariga kiritilgan bo'lishi kerak (quyidagi rasmga qarang).

Undagi ma'lumotlarning ahamiyatini ortiqcha baholash juda qiyin (bo'rttirib aytmayman). Yandex Wordstat-da kalit so'zlarni tanlaganingizda (shu maqsadda foydalanish), keyin semantik yadroni tuzgandan so'ng, Sarlavha sarlavhasida tanlangan kalit so'zlarni albatta eslatib o'tishingiz kerak bo'ladi.

Sarlavhadagi so'zlar loyihani kelajakda muvaffaqiyatli targ'ib qilish uchun qanchalik muhimligini maqoladan bilib olishingiz mumkin va Joomla va WordPress uchun Sarlavhada kerakli so'zlarni qanday yozishni maqoladan bilib olasiz.

Endi, aniq teglarni ko'rib chiqishga o'tishdan oldin, keling, Html kodidagi sharhlar kabi tushunchaga to'xtalib o'tamiz. Ular ko'pincha to'g'ri bo'limlarni keyinchalik topishni osonlashtirish yoki boshqalarga muallifning niyatini tushunishlarini osonlashtirish uchun kiritilgan. O'z-o'zidan ma'lumki, ushbu sharhlarning matni hech qanday holatda veb-sahifada ko'rsatilmasligi kerak, shuning uchun ular kodda maxsus tarzda formatlanadi.

Html-dagi sharhlar, ayniqsa, jadval tartibi hukmronligi davrida (bu haqda o'qing), chunki o'sha paytda zamonaviy bloklar tartibiga nisbatan (bu erda misol bilan tasvirlangan) jadvalning qaysi katakchasida nima ko'rsatilishini chalkashtirib yuborish juda oson edi:

Ehtimol, yuqoridagi misoldan siz Html tilidagi barcha sharhlar boshqa har qanday elementlar kabi - burchakli qavs bilan boshlanishini allaqachon tushungansiz, ammo undan so'ng darhol izoh yaratishda undov belgisini qo'yishingiz kerak bo'ladi. (Doktipni tavsiflashda men izohlar ham deklaratsiya ekanligini ta'kidladim, ular bilan boshlanishi kerak.

Ushbu qo'sh tire orasida joylashgan barcha sharh matni brauzerlar tomonidan xizmat ma'lumoti sifatida ko'rib chiqiladi va hech qanday tarzda qayta ishlanmaydi. Uning yozilishining to'g'riligini tavsiflanganlar yordamida aniq baholash mumkin:

Lekin sharh ichida siz nafaqat matnni, balki o'zingizga yoqqan narsalarni ham joylashtirishingiz mumkin. Masalan, ko'pincha HTML kodining sharhlangan qismlari mavjud va bu bo'lim brauzerlar tomonidan qayta ishlanmaydi. Qizig'i shundaki, sharh kodning bir satrida ochilishi va hatto yuz satrdan keyin ham yopilishi mumkin va brauzer uchun shunday qilib qo'yilgan kod bo'lagi o'z faoliyatini to'xtatadi.

Hammasi juda oddiy va men ular bilan hech qanday muammoga duch kelmaysiz deb o'ylayman. HTMLda ko'p qatorli izohlar bilan ishlashda bitta noziklik mavjud bo'lsa-da. Bitta izoh ichiga boshqasini joylashtira olmaysiz, aks holda sharhlangan ma'lumotlarning bir qismi brauzer tomonidan veb-sahifada ko'rsatilishi mumkin. Keling, ushbu qurilishni misol sifatida ko'rib chiqaylik:

tashqi sharhning davomi-->

Shunday qilib, veb-sahifa kodini tahlil qilishda brauzer sharh deklaratsiyasining ochilish belgilarini aniqlaydi va yopilganlarini qidirishni boshlaydi. U uni "Biriktirilgan izoh" so'zidan keyin topadi, ammo qolgan hamma narsa (bizning holatda bu tashqi sharhning davomi -->) brauzer tomonidan qayta ishlanadi va veb-sahifada ko'rsatiladi.

Printsipial jihatdan, agar siz HTML-kodni yozishda orqadan yoritilgan muharrirdan foydalansangiz, sharhingiz rangi o‘zgarganda nimadir noto‘g‘ri ekanligini darhol sezasiz:

Tana elementlari ichida ishlatilishi mumkin bo'lgan barcha teglarni (veb-sahifada ko'rsatilgan narsalar va ro'yxatini W3C validatorida topishingiz mumkin) ikki guruhga bo'lish mumkin: inline va blok teglar.

Blok elementlari Web-hujjat strukturasini qurish uchun, inline elementlar esa matn (chiziqlar) qismlarini formatlash uchun ishlatiladi. Bundan tashqari, siz doimo bitta qat'iy qoidaga amal qilishingiz kerak - blok teglarini kichik harflar ichiga qo'ymang.

Inline va blok teglarining eng yorqin va indikativ vakillari, mos ravishda, Div (blok elementi - shuning uchun blokning joylashuvi nomi) va Span (kichik harf). Ushbu gipermatn belgilash tili teglari juftlashtirilgan, ya'ni. ular ochilish va yopish tegiga ega.

Umuman olganda, Div va Span teglari CSS kaskadli uslublar jadvallaridan foydalanmasdan sof HTMLda mutlaqo maqsad va ma'noga ega emas. Ular CSS orqali o'z ichiga olgan elementlarning xususiyatlarini o'zgartirishga imkon beruvchi konteynerlardir.

Agar siz sahifaning dastlabki kodida ketma-ket bir nechta Div elementlarini yozsangiz, veb-sahifada ularning har biri kenglikdagi barcha bo'sh joyni egallashga harakat qiladi va shuning uchun bunday konteynerlar bir-birining ostida joylashgan bo'ladi. . Oddiy sharoitlarda Div konteynerlari siz ularni majburlamaguningizcha bir-birining yonida turmaydi.

Masalan, ushbu Html kodi bir-birining ostida joylashgan uchta blokda ko'rsatiladi:

Firefox brauzerida, juda foydali bilan bir qatorda, men ham ko'p yordam beradigan plagindan foydalanaman. Boshqa narsalar qatorida, u blok elementlarini ramka bilan o'rab ko'rsatishi mumkin. Yuqoridagi skrinshotda Div konteynerlari atrofida ko'k ramkalarni yaratgan ushbu ishlab chiquvchi plagin edi.

Span teglari CSS orqali ma'lum xususiyatlarni berish uchun Html kodining matn qismlarini (satrlarini) o'z ichiga olishi mumkin va bunday elementlar bir qatorda bir-birining yonida joylashtirilishi mumkin. Masalan, brauzerdagi ushbu kod quyidagicha ko'rinadi:

Bu yerda Span kontenti veb-ishlab chiquvchi plagin yordamida ham ta'kidlangan. Chunki Span elementlari inline bo'lganligi sababli, siz ularning ichiga blok teglarini qo'ymasligingiz kerak, masalan, bir xil Div konteynerlari.

Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

Html gipermatn belgilash tili nima va W3C validatoridagi barcha teglar ro'yxatini qanday ko'rish mumkin
Html 4.01 standartiga muvofiq H1-H6 sarlavhalarining teglari va atributlari, gorizontal chiziq Hr, chiziq uzilishi Br va P paragrafi
Shrift (yuz, o'lcham va rang), blok tirnoq va oldindan teglar - sof HTMLda eski matn formatlash (CSS ishlatilmaydi)
Html kodidagi ro'yxatlar - UL, OL, LI va DL teglari
HTML - IMG va A teglariga havola va rasmni (fotosuratni) qanday kiritish mumkin
Bo'shliq belgilari va ularni Html-da kodni formatlash, shuningdek, maxsus uzilmaydigan bo'shliq belgilar va boshqa mnemonikalar
Html va CSS kodlarida ranglar qanday o'rnatiladi, jadvallarda RGB soyalarini tanlash, Yandex chiqishi va boshqa dasturlarni tanlang.
Qanday qilib giperhavola yaratish (A, Href, Target blank), uni saytning yangi oynasida qanday ochish, shuningdek, rasmni Html kodida havola qilish
Iframe va Frame - ular nima va Html-da freymlardan qanday foydalanish yaxshiroq

Assalomu alaykum aziz boshlang'ich veb-ustalar. Ushbu darsda biz veb-saytimizning tashqi ko'rinishi ustida ishlaymiz.

Avval yozganimdek, saytning ko'rinishi shablon tomonidan yaratilgan.

Va bu darsda biz WordPress shablonini qanday o'zgartirishni o'rganamiz, ya'ni ranglarini, o'lchamlarini, elementlarning joylashishini, sayt sarlavhasidagi rasmni va umuman, saytga kirishda ko'radigan barcha narsalarni o'zgartiramiz.

Ammo boshlashdan oldin, ko'rib chiqish tavsiya etiladi va yoki hech bo'lmaganda qo'lda ma'lumotnoma adabiyoti bo'lishi kerak, aks holda men bu erda gaplashadigan narsalarning aksariyati aniq bo'lmaydi.

Siz, albatta, menikidan foydalanishingiz mumkin, ammo baribir o'rganish yaxshiroqdir.

Yuqoridagilarga qo'shimcha ravishda siz postni o'qib chiqishingiz va unda berilgan tavsiyalarga amal qilishingiz kerak. Ular juda oddiy.

Keling, standart "Twenty Ten" mavzusini tahrirlashdan boshlaylik. Ushbu mavzu WordPress konstruktsiyasida sukut bo'yicha o'rnatiladi va u dvigatelni o'rnatgandan so'ng darhol ko'rish mumkin bo'lgan mavzudir.

Aytgancha, ushbu resursda ham ushbu mavzu mavjud, faqat biroz tuzatilgan. To'g'rirog'i, erga qayta ishlangan.

Veb-inspektor vositasi yordamida o'z veb-dizaynimizni yaratamiz.

Ishlab chiquvchi uchun zarur bo'lgan ushbu vosita barcha zamonaviy brauzerlarda sukut bo'yicha mavjud va F12 tugmachasini bosish orqali chaqiriladi.

Sahifani o'ng tugmasini bosib, "Element kodini ko'rish" yoki "Elementni tekshirish" ni tanlash orqali ham uni chaqirishingiz mumkin.

Mening saytimning dizayni allaqachon bir necha bor o'zgargan va siz eski versiyani ko'rasiz, ammo bu mohiyatni o'zgartirmaydi.

Men ushbu vositaning barcha imkoniyatlarini hali bilmayman (men uni o'rganishim va o'rganishim kerak bo'ladi), lekin men bilgan narsam mavzu bilan xohlagan narsani qilish uchun etarli.

Ko'rib turganingizdek, chap tomondagi katta maydonda html kodli qatorlar mavjud. Har bir satr hozirda sahifadagi elementlardan birining html kodidir.

Agar kursorni uning ustiga olib kelsangiz, sahifadagi unga mos keladigan element boshqa rangda ajratib ko'rsatiladi va uning yonida uslublar jadvalidagi ushbu element uchun mas'ul bo'lgan selektor nomi va uning o'lchamini ko'rsatadigan izoh paydo bo'ladi. piksellarda.

Agar siz ushbu qatorni bossangiz, u xuddi o'rnatilgandek ko'k rangga aylanadi va o'ngdagi maydon barcha xususiyatlar va qiymatlarni ko'rsatadi, bizning holatlarimizda menyu bilan blokda, uslublar jadvalida o'rnatilgan. .

Ko'rib turganingizdek, uslublar jadvalidagi menyu bloki #access selektori bilan ko'rsatilgan va unga quyidagi qiymatlar berilgan:

kengligi - 940 piksel
chap chekka - 0 piksel

Keling, pastga tushaylik

fon rangi - sariq (dastlab qora)
elementning ko'rinishi - ko'rinadigan
Chap tomonda suzish - ehtimol sarlavhani chetga surib qo'ymaslik uchun
yuqori cheti - 80 piksel va markazlashtirilgan
Pastki chekka - 30 piksel
ramka - qalinligi, qattiq, sariq (dastlab qora)

Endi biz ushbu element haqida deyarli hamma narsani bilamiz va agar xohlasak, uni pastga yoki yuqoriga siljitishimiz, rangi yoki o'lchamini o'zgartirishimiz, ekranning to'rt tomonining istalganiga bosishimiz yoki uni ko'rmaydigan joyda yashirishimiz mumkin.

Bularning barchasini amalga oshirish uchun siz Konsol - Tashqi ko'rinish - Tahririyatga o'tishingiz va u erdan style.css faylini topishingiz kerak.

Biz uni bosamiz va sahifani biroz yuqoriga ko'tarib, tahrirlash uchun ochilgan uslublar jadvali faylini ko'ramiz. Avvalo, butun faylni nusxalash va uni qandaydir muharrirda, ehtimol Notepadda saqlang.

Ushbu faylda biz #access selektorini topishimiz kerak. U dastlab =Tuzilish bo'limida paydo bo'ladi, lekin u erda u bir xil xususiyat va qiymatlarga ega bo'lgan boshqa selektorlar bilan guruhlangan.

Hozircha ushbu guruhdan #accessni olib tashlamaylik, chunki bu guruhda ko'rsatilgan kenglik, masalan, menga mos edi. Biz "Menyu" bo'limiga pastga tushamiz. Bu erda bizning blokimiz butun ulug'vorligi bilan taqdim etilgan.

Bu erda siz margin xususiyatidagi qiymatni o'zgartirish orqali uni yuqoriga va pastga siljitishingiz, rangni o'zgartirishingiz mumkin va agar siz blok o'rniga displey xususiyatiga hech birini qo'ymasangiz, uni ko'rinmas holga keltiring.

Har bir manipulyatsiyadan keyin faylni yangilashni unutmang!

Namoyish uchun menyu blokini tanladim, chunki u murakkab tuzilishga ega. Axir, asosiy blokda u havolalar bloklarini va ushbu havolalardagi matnni ham o'z ichiga oladi, bu ham alohida blokdir.

Siz allaqachon payqaganingizdek, veb-inspektorda har bir chiziq uchburchak bilan boshlanadi. Agar u o'ngga yo'naltirilgan bo'lsa, unda yana bir nechta chiziqlar yashiringan. Biz uchburchakni bosamiz va menyu blokiga kiritilgan elementlarning kodi bizga ochiladi.

Bu elementlar, o'z navbatida, ko'proq elementlarni o'z ichiga oladi va biz ularning barchasini, ya'ni menyu blokidagi hamma narsani ochishimiz kerak.

Endi kursorni chap maydondagi chiziqlar bo'ylab harakatlantiramiz, o'ng maydonda biz uslublar faylidagi u yoki bu elementni qanday topishni ko'rib chiqamiz. css ga o'ting va biz qanday qadriyatlarni o'zgartirishni xohlayotganimizni aniqlang.

Keyin biz muharrirga o'tamiz, kerakli selektorni topamiz va biz o'ylagan narsalarni o'zgartiramiz. Men sizga ushbu saytdagi kabi ko'rinish va funksionallikni olishi uchun nima o'zgartirganimni ko'rsataman.

Agar kimdir ushbu menyuni sayt sahifalaridan butunlay olib tashlamoqchi bo'lsa, buning uchun u Tashqi ko'rinish > Tahrirlovchiga o'tishi va tahrirlash uchun header.php faylini ochishi kerak.

Fayl kodida biz tegni topamiz va uni o'chirib tashlaymiz va undan keyingi hamma narsani, birinchisiga qadar.

Siz uni shunchaki ko'rinmas holga keltira olasiz. Buning uchun style.css faylida #access selektoriga display:none xususiyati qo'shiladi.

Endi sayt sarlavhasidagi rasmni qanday almashtirishni ko'rib chiqamiz. Aytaylik, mavzuda taklif qilingan barcha rasmlar sizga mos kelmadi va siz butunlay o'zingiznikini o'rnatishga qaror qildingiz. Siz sahifadagi sarlavha uchun rasmni qaerdan olishni ko'rishingiz mumkin va u topilganda yoki yaratilganda, uni mavzuning rasmlari papkasiga joylashtiring.

Keyin biz style.css fayliga o'tamiz va kerakli tasvir yo'qolishi uchun nima qilish kerakligini ko'ramiz, lekin kerakli rasm paydo bo'ladi.

Biz sayt sarlavhasi bilan bog'liq barcha narsalarni o'z ichiga olgan "=Header" bo'limini topamiz va u erda rasm tanlash moslamasini topamiz. Keyin displey:block qiymatini display:none ga o'zgartiramiz va tasvir ekrandan yo'qoladi.

Keyin biz “=Structure” bo‘limiga o‘tamiz va #wrapper selektorida quyidagi yozuvni qilamiz. Fon: xususiyat sukut bo'yicha mavjud, bu sahifaning fonidir, shuning uchun biz faqat rasm uchun xususiyatlarni qo'shamiz.

Fon rasmi xususiyati qiymatida biz topilgan yoki yaratgan, avvalroq mavzuning tasvirlar papkasiga yuklangan yangi rasmning manzilini joylashtiramiz.

Agar sayt joylashtirilgan bo'lsa, u holda bu jildda joylashgan: site_name > public_html > wp-content > > temalar > rasmlar.
Agar sayt hali ham mahalliy xostingda bo'lsa, bu jildga yo'l: Z > uy > sayt_nomi > www > wp-kontent > > mavzular > tasvirlar.

Birinchi holda, rasm fayl boshqaruvchisi yordamida yuklab olinadi, ikkinchidan, rasm oddiygina ushbu papkaga saqlanadi.

Bu erda, o'rnatishdan so'ng, sarlavhani sahifaga aniqroq joylashtirish uchun siz faqat fon-pozitsiya xususiyatini sozlashingiz kerak bo'ladi va agar sarlavhadagi rasm ba'zi tashrif buyuruvchilar uchun ochilmasa, fon xususiyati kerak bo'ladi.

Bunday holda, sarlavha kamida fonga ega bo'ladi.

Bu quyidagicha amalga oshiriladi. "Konsol" - "Yozuvlar" - "Yozuvlarni qo'shish" bo'limiga o'ting, muharrirni HTML rejimiga o'tkazing va rasm yuklagichi (Media faylni qo'shish) orqali kerakli tasvirni yuklang.

Ushbu rasm uchun kod muharrirda paydo bo'ladi. Uni nusxalash va "Yozuv" ni o'chirish kerak.

Keyin "Tashqi ko'rinish - Muharrir" ga o'ting va tahrirlash uchun header.php faylini oching, unda biz qatorni topamiz.

Ushbu satrdan so'ng darhol nusxalangan rasm kodini joylashtiramiz. Kodda alignment sinfi mavjud class="aligncenter" va ehtiyojga qarab aligncenter alignleft yoki alignright bilan almashtirilishi mumkin.

Bu tasvirning qaysi chetida yoki markazida joylashganiga bog'liq bo'ladi.

Agar saqlangan va ko'rgandan so'ng, rasmni biroz ko'proq joyga ko'chirish kerak bo'lsa, biz muharrirga qaytamiz va rasm kodida img tegida margin xususiyati bilan style atributini kiriting:

style="margin:0 0 0 0;"

Bu erda nol o'rniga biz kerakli o'lchamlarni kiritamiz va shu bilan rasmni kerakli yo'nalishda siljitamiz.

Maydonlarning rangini "tana" teg selektoridagi "=Global elementlar" bo'limiga biroz pastga tushish orqali o'zgartirish mumkin. Mening dalalarim ko'paytirilgan rasmdan qilingan. Keyinchalik men uni olib tashladim va uni tekis qoldirdim, lekin buni qanday qilishni ko'rishingiz mumkin (chekkadagi rasm).

Agar siz faqat rangni o'zgartirsangiz, faqat fon xususiyatidagi qiymatni o'zgartiring

Bu yerda sayt shriftining o'lchami, turi va rangi o'zgaradi

Sarlavhadagi o'lcham, rang, sarlavhaning ko'rinishi va sayt tavsiflari bu erda. Bu erda sarlavha tasvirini o'zgartirganda sarlavha va tavsifning joylashishini sozlashingiz mumkin.

Hozircha shu yerda to‘xtab qolaylik. Sinab ko'ring, o'zgartiring, harakat qiling, yaxshilang. Tez orada saytni haqiqiy xostingga o'tkazamiz. Albatta, biz u yerda ham ba'zi o'zgarishlar qilamiz, lekin biz ularni ishonchliroq va tezroq qilishimiz va imkon qadar kamroq xato qilishimiz kerak.

Rus tilida tayyor HTML shablonlar