Dizajnerët shpenzojnë orë të tëra duke e përmirësuar zanatin e tyre për të rregulluar me kujdes detajet më të vogla të dizajneve të faqeve të internetit që dalin nga stilolapsat e tyre. Sidoqoftë, cilësia e kodit shpesh mbetet shumë e ulët. Keni nevojë për prova? Shikoni galeritë shabllone falas CSS. 90% e shablloneve nuk do të kalojnë verifikimin. Për më tepër, shumica e gabimeve janë shumë primitive dhe shumë të lehta për t'u rregulluar. NË këtë mësim konsideroni gabime tipike në kodin HTML që pengon kontrollin të përfundojë me sukses.
Pse të kontrolloni kodin?Nëse faqja duket e mrekullueshme në shfletues, atëherë pse të kontrolloni kodin? Një pyetje tipike e bërë përpara rishikimit të kodit. Por faqja nuk është e kufizuar vetëm në atë që është e dukshme për përdoruesin. faqet HTML kanë për qëllim të përfaqësojnë të dhëna, jo efekte grafike. Të dhënat duhet të jenë të lexueshme nga i gjithë komuniteti i gjerë i njerëzve që përdorin internetin. Dhe lexuesit mund të përdorin teknologji shumë të ndryshme për të marrë informacionin e paraqitur në faqen tuaj - për shembull, ata mund të përdorin një program zanor dhe thjesht të dëgjojnë atë që shkruhet në faqen tuaj.
Një faqe HTML që është pa gabime në përgjithësi do të shfaqet saktë në shumicën e shfletuesve dhe gjithashtu do të jetë në përputhje me teknologjitë e ardhshme. Këtu vlen të përmenden motorët e kërkimit, funksionimi i të cilëve është shumë i rëndësishëm për qëllime SEO. Askush nuk dëshiron të krijojë pengesa për ta, dhe kodi i pastër dhe i saktë është shumë më i lehtë për t'u perceptuar nga robotët e kërkimit.
Është edhe çështje profesionalizmi. Kodi i pasaktë HTML është shumë i ngjashëm me gabime gramatikore në mbishkrimet në vend. Dhe megjithëse klienti mund të mos vërejë gabime në kod, kjo nuk e ndryshon thelbin e çështjes. Askush nuk i pëlqen gabimet gramatikore në dizajn, por disi lënia e kodit HTML me gabime nuk konsiderohet i njëjti veprim i turpshëm.
Gabime të zakonshmeMë poshtë janë gabimet që u kapën në shabllonet nga faqja e parë e galerisë së famshme Modelet CSS. Shumë faqe interneti duken të shkëlqyera, madje të shkëlqyera, por shpesh cilësia e kodit nuk përputhet me cilësinë e dizajnit. Edhe pse shumica e këtyre gabimeve mund të rregullohen shumë shpejt dhe lehtë.
Gabimi më i keq është mospërdorimi Doctype! Asnjë etiketë Doctype do të thotë që shfletuesi do të "mendojë" se çfarë gjuhe është përdorur për të krijuar dokumentin. Për të korrigjuar gabimin, duhet të specifikoni llojin e dokumentit të faqes tuaj.
Elementi nuk është i mbyllur
Nëse hapni një etiketë diku në dokumentin tuaj HTML, duhet ta mbyllni atë në vendin e duhur. Harresa në kjo çështje jo vetëm që çon në gabime gjatë kontrollit të kodit, por gjithashtu mund të shkaktojë probleme serioze me shabllonin. Figura tregon një situatë ku autori ka harruar të mbyllë etiketën. Simboli / është hequr në elementët vetë-mbyllës
Shumica e elementeve HTML kanë etiketa të veçanta mbyllëse, për shembull: . Por ka elementë si input , img dhe meta që mbyllen vetë, që do të thotë se duhet të kenë një / përpara kllapave mbyllëse.
Karakteret speciale nuk janë konvertuar
Në përputhje me paragrafi i mëparshëm, Simbole të veçanta, veçanërisht ampersand, duhet të jetë i koduar në vargjet URL. Lidhje me faqet e ndërtuara me duke përdorur PHP, shpesh përmbajnë variabla duke përdorur karakterin & dhe duhet të shkruhen duke përdorur HTML & kod.
Blloko elementet brenda elementeve inline
Një nga kryesore Rregullat HTML gjë është elementet e bllokut NUK duhet të jetë KURRË brenda elementeve të linjës.
Një shembull popullor i një gabimi është përdorimi i një lidhjeje në titull: banane
është një element blloku, kështu që duhet të mbështillet rreth një lidhjeje (elementi inline): banane .
Në mungesë atribut alt në imazh
Çdo imazh në një dokument HTML duhet të ketë një atribut alt që përshkruan përmbajtjen e imazhit. Edhe nëse imazhi është për qëllime dizajni, ai duhet të ketë një atribut alt, por në këtë rast duhet të lihet bosh, për shembull, alt="" . Në një rast tjetër, duhet të jepni një përshkrim të përmbajtjes së imazhit.
Përdorimi i atributeve si gjerësia dhe lartësia 
Ndoshta kjo situatë është ana e kundërt përdorim të gjerë Redaktorët e WYSIWYG, të cilat tentojnë të fusin kod të panevojshëm HTML. Atributet e gjerësisë dhe lartësisë përcaktohen në standardet e tipit të dokumentit kalimtar, por nëse vendosni të ndiqni me përpikëri standardet, me siguri e dini se të gjitha atributet përgjegjëse për paraqitjen e elementeve në faqe duhet të transferohen në tabelë. Stilet CSS, për të ndarë përmbajtjen dhe dizajnin.
Emri i klasës ose ID fillon me një numër
Emri i klasës, ID-ja ose emri i atributit nuk mund të fillojë me një numër. Ato mund të përfshijnë numra, por jo në fillim të një fjale.
Cila është situata me Kontrollimi i CSS kodi?
Ndryshe nga HTML, CSS përdoret për paraqitje vizuale faqet. Pra, pyetja është "Nëse faqja duket e mirë, atëherë pse të kontrolloni kodin?" në këtë rast tingëllon më bindëse. Kodi i keq CSS nuk ka të njëjtin ndikim në faqet e internetit si kod i gabuar HTML. Sidoqoftë, ia vlen të kontrolloni për të zbuluar gabime shtypi dhe gabime në kod. Nëse përdorni vetitë e reja CSS3, ato do të bëjnë që dokumenti juaj të dështojë në verifikimin sepse ato nuk janë përfshirë ende në specifikim, por nëse jeni të sigurt se gjithçka është e saktë, atëherë gabime të tilla mund të shpërfillen.
Deklarata e llojit të dokumentit i referohet rregullave të gjuhës së shënjimit për të siguruar që shfletuesi të përshkruajë saktë përmbajtjen e dokumentit.
Lloje të ndryshme të dokumenteve HTMLNjë deklaratë e llojit të dokumentit nuk është Etiketa HTML; Ky është një udhëzim për shfletuesin e internetit në lidhje me versionin e gjuhës së shënjimit në të cilën është shkruar faqja.
Një deklaratë e llojit të dokumentit i referohet një "Përkufizimi i llojit të dokumentit" ose "Përkufizimi i llojit të dokumentit" (DTD). DTD vendos rregullat për gjuhën e shënjimit në mënyrë që shfletuesit të japin përmbajtjen në mënyrë korrekte.
Deklarata e llojit të dokumentit duhet të shfaqet së pari në dokumentin HTML, përpara .
Këshillë: Shtoni gjithmonë një lloj dokumenti në faqet tuaja. Kjo i ndihmon shfletuesit të japin faqen në mënyrë korrekte!
Lloji i dokumentit "HTML 4.01 Strict"Përkufizimi i llojit të dokumentit (DTD) përmban gjithçka Elementet HTML dhe atributet, por NUK PËRFSHIN elemente përfaqësuese dhe të trashëguara (të tilla si fontin dhe qendrën). Kornizat nuk lejohen:
Lloji i dokumentit "HTML 4.01 Framesset"Kjo DTD është ekuivalente me "HTML 4.01 Transitional", por lejon përdorimin e grupeve të kornizave:
Në mësimet e mia, kam bërë shpesh deklarata të tilla si "një etiketë duhet të jetë e vendosur brenda një tjetri", "etiketa img duhet të ketë një atribut src", "etiketa e kokës vjen së pari, dhe më pas trupi", etj. Por unë nuk dola me të gjitha këto në fluturim, por u udhëhoqa nga disa rregullore, autori i të cilave është organizata që në të vërtetë vjen me dhe miraton të gjitha standardet - quhet W3C (Konsorcium Rrjet i gjere boteror). Unë nuk e përmenda këtë më parë, por ka disa standarde për të shkruar HTML. Dhe secila prej tyre ka karakteristikat dhe rregullat e veta të shkrimit. Kjo për faktin se HTML nuk qëndron ende, por është vazhdimisht në zhvillim.
Dhe nëse në versionet e mëparshme standard kur nuk kishte Teknologjitë CSS, me ndihmën e gjuhës së shënjimit ishte e mundur të krijohej struktura dhe dizajni, por tani po shfaqet një prirje krejtësisht e ndryshme - HTML është bërë më e lidhur me strukturën (themeli dhe blloqet e ndërtimit) mbi të cilat mbështetet dizajni. CSS këtu është diçka si një element dekorativ që përcakton pamjen e dizajnit - analoge me pllakat dhe letër-muri, nëse marrim parasysh krijimin e një faqe interneti si ndërtimi i një shtëpie. Në këtë drejtim, në standardet e reja HTML, disa etiketa dhe atribute përgjegjëse për dizajnin deklarohen të padëshirueshme (të zhvlerësuara). Kjo do të thotë, specifikimi aktual standard i mbështet ato, por mbështetja do të ndërpritet në të ardhmen.
Ekziston një standard edhe më i rreptë i quajtur XHTML - ai nuk toleron fare liritë me kodin dhe nuk fal gabime të rënda. Më të rejat në ky moment– ky është HTML 5, është e ardhmja, kështu që në të ardhmen do ta ndjekim.
Duket sikur gjithçka duhet të jetë e qartë me këtë - ka disa standarde dhe kjo është e mrekullueshme. Por në të njëjtën kohë, ka shfletues, detyra e të cilëve është të Përpunimi HTML kodi, dhe shfletuesi nuk mund të kuptojë gjithmonë në përputhje me atë standard që po shkruajmë dhe çfarë saktësisht nënkuptonte përdoruesi dhe, në përputhje me rrethanat, si duhet të shfaqet ky kod. Ose po përdorim HTML kalimtare dhe shfletuesi na fal shumë gabime, duke përdorur "modalitetin e butë", ose po përdorim modalitetin e rreptë të përputhshmërisë XHTML dhe gabimet duhet të trajtohen me ashpërsinë më të madhe. Me fjalë të tjera, shfletuesi përballet me një detyrë të vështirë.
Çfarë bën shfletuesi në këtë rast? Ai shfaq kodin në modalitet përputhshmëria e prapambetur, - ai zbut të gjitha gabimet e qarta dhe të nënkuptuara në kod dhe përpiqet të parashikojë sa më shumë që të jetë e mundur se çfarë do të thoshte përdoruesi. Por ka disa disavantazhe të dukshme: së pari, shfletuesi nuk mund ta dijë se çfarë donte të thoshte fillimisht personi. Së dyti, kjo mënyrë përputhshmërie mund të funksionojë ndryshe për çdo shfletues. Me çfarë përfundojmë? Ekziston një kod dhe nuk ka rregullore - në praktikë kjo do të thotë që i njëjti shënim, në modalitetin e pajtueshmërisë, do të shfaqet ndryshe nga shfletuesi. Prandaj, na duhet një mënyrë për t'i bërë të ditur shfletuesit se cilin standard do të përdorim.
Dhe me të vërtetë ekziston një metodë e tillë, quhet shtimi i një përkufizimi të llojit të dokumentit.
Në kod, deklarata e tipit vendoset si kjo:
Me këtë linjë i bëjmë të ditur shfletuesit se faqja jonë do të përdorë Modaliteti HTML 5. Ky rresht futet në fillim të dokumentit. Provojeni këtë në tuajën testoni HTML dosje.
Në shumë sajte mund ta gjeni ende këtë linjë:
Kjo linjë do të thotë se përdoret standardi HTML 4.01. Por ne nuk do ta përdorim sepse është i vjetëruar. Por megjithatë, ajo gjithashtu ndodh mjaft shpesh dhe ia vlen të dihet.
Tani do të shpjegoj pse e gjithë kjo është e nevojshme. Me këtë linjë vendosim një standard të caktuar, sipas të cilit shfletuesi duhet të shfaqë dokumentin tonë në dritaren e shfletuesit. Në praktikë, kjo do të thotë që kodi ynë HTML do të shfaqet pak a shumë i njëjtë në të gjithë shfletuesit. E gjithë kjo do të ishte e pamundur të arrihej nëse do të punonim në modalitetin e përputhshmërisë së pasme (modaliteti i çuditshëm), i cili aktivizohet nëse deklarimi i llojit të dokumentit hiqet. Në praktikën time në lidhje me paraqitjen e faqeve, kjo ishte vërtet e rëndësishme. Sepse deklarata DOCTYPE përfundimisht zgjidhi problemin e shfaqjes së njëjtë të faqes në të gjithë shfletuesit.
Vleresimi i dokumentit.Sigurisht, nëse duam të kontrollojmë veten për të parë nëse kemi bërë ndonjë gabim diku në përmbushjen e standardeve të caktuara, nuk duhet ta bëjmë këtë duke ekzaminuar kodin tonë me sytë tanë. E gjithë kjo ka qenë prej kohësh e automatizuar, sepse ekziston një mjet kontrolli falë të cilit mund të zbulojmë nëse kemi bërë ndonjë gabim të dukshëm në shënimin tonë.
Në këtë faqe mund të gjejmë disa mënyra për të kontrolluar:
Në rastin tonë, opsioni i dytë ose i tretë ka shumë të ngjarë të jetë i përshtatshëm.
Unë personalisht përdora metodën e tretë. Dokumenti im u vërtetua me sukses, të cilin programi e raportoi me rreshtin Ky dokument u kontrollua me sukses si HTML5! në një sfond të gjelbër.
Në rast të një rezultati të ndryshëm, mbishkrimi do të shfaqet në një sfond të kuq. Kjo do të thotë se kemi bërë një gabim diku. Në fakt, vetë programi do të tregojë se ku dhe në cilën linjë kemi bërë një gabim dhe çfarë saktësisht, megjithëse në anglisht.
Por në rastin tim, programi, përveçse njoftoi se vërtetimi ishte i suksesshëm, më dha edhe tre paralajmërime:
1. Përdorimi i veçorisë eksperimentale: Kontrolluesi i konformitetit HTML5
Fakti është se standardi HTML 5 ende nuk është miratuar zyrtarisht nga konsorciumi, i cili vazhdon të prezantojë të reja në të. këshilla të dobishme. Por në praktikë - gjithnjë e më shumë sasi e madhe zhvilluesit kanë filluar ta përdorin atë tani për të qenë gati për nesër.
2. Asnjë kodim karakteri i deklaruar në nivel dokumenti
Dokumenti nuk thotë asnjë fjalë se çfarë kodimi është përdorur. Në të vërtetë, ne nuk e specifikuam atë në mënyrë eksplicite, që do të thotë se nuk është fakt që në vend të shfaqjes së shkronjave ruse, shfletuesi do të shfaqë disa karaktere kineze. Kjo ndodh sepse shfletuesi, kur shfaq një dokument, udhëhiqet nga disa tabela e kodeve(d.m.th., një kodim), ku secilës shkronjë i caktohet përkatësia e saj karakter kodi. Por fakti që në një kodim një numër do të thotë një shkronjë, në një tjetër mund të nënkuptojë një lloj hieroglifi japonez. Prandaj, shfletuesit duhet t'i tregohet se cilin kodim duhet të përdorë. Nëse nuk e bëni këtë, shfletuesi ende do të përpiqet ta hamendësojë vetë. Por nuk ka absolutisht asnjë garanci se ai do ta bëjë atë siç duhet.
3. Përdorimi i modalitetit të hyrjes direkte: supozohet kodimi i karaktereve UTF-8
Programi paralajmëron se përdor utf-8 si parazgjedhje.
Epo, atëherë nuk mbetet gjë tjetër veçse të deklarojmë kodimin që përdorim. Kjo bëhet në këtë mënyrë:
Vetë linja duhet të vendoset brenda elementit të kokës.
Etiketa meta i përket kategorisë së etiketave të shërbimit; duket se tregon se ka disa informacione rreth faqes që duam t'i komunikojmë shfletuesit. Ajo, si çdo etiketë tjetër, ka atribute:
http-equiv është një atribut në vlerën e të cilit tregojmë emrin e kokës.
përmbajtja është një atribut vlera e të cilit ne specifikojmë është vlera e kokës, në këtë rast vlera e kokës së llojit të përmbajtjes.
Le të shohim tani vlerat e atributeve që sapo specifikuam:
Lloji i përmbajtjes – i themi shfletuesit se do të raportojmë se çfarë lloji është dokumenti ynë. Dhe gjithashtu çfarë kodimi përdoret në të.
tekst/html; charset= utf-8 – dokument tekst/html që përdor kodimin utf-8.
Provoni të vërtetoni përsëri faqen. Tani nuk duhet të ketë mesazhe paralajmëruese. Por ato mund të mbeten ende, por për një arsye tjetër. P.sh.
1. Ju përdorni imazhe në dokumentin tuaj dhe nuk e keni atributin alt të vendosur në etiketën img.
2. Elementi i trupit përmban një element inline. Sipas specifikimeve, elementi i trupit duhet të përmbajë vetëm elementë blloku. Dhe tashmë në to mund të ketë shkronja të vogla.
Mund të ketë shumë shembuj gabimesh, por është problematike t'i përmendim të gjitha në një artikull. Sidoqoftë, nëse gjatë verifikimit hasni ndonjë gabim tjetër, atëherë shkruani për të në komente dhe ne do ta kuptojmë së bashku.
- < Назад
- Përpara >
Për të komentuar, duhet të regjistroheni.
Bazat HTML përmban rregullat bazë Gjuha HTML, përshkrimi i strukturës së një faqe HTML, marrëdhëniet në strukturën e një dokumenti HTML midis elementeve HTML.
Një dokument HTML është i rregullt Dokument teksti, mund të krijohet si zakonisht redaktori i tekstit(Notepad), dhe në një të specializuar, me theksim të kodit (Notepad++, Visual Studio Kodi, etj.) . Një dokument HTML ka një shtesë .html.
Një dokument HTML përbëhet nga një pemë e elementeve HTML dhe tekstit. Çdo element identifikohet në dokumentin burimor nga një etiketë fillimi (hapjeje) dhe përfundimi (mbylljeje) (me përjashtime të rralla).
Etiketa e fillimit tregon se ku fillon elementi, etiketa e përfundimit tregon se ku përfundon. Etiketa mbyllëse formohet duke shtuar një prerje / përpara emrit të etiketës: .... Midis etiketave fillestare dhe mbyllëse është përmbajtja e etiketës - përmbajtja.
Etiketat e vetme nuk mund të ruajnë përmbajtjen drejtpërdrejt; ajo është shkruar si një vlerë atributi, për shembull, një etiketë do të krijojë një buton me tekstin Button brenda.
Etiketat mund të vendosen brenda njëra-tjetrës, për shembull,
Teksti
. Kur investoni, duhet të ndiqni rendin në të cilin mbyllen (parimi "matryoshka"), për shembull, hyrja e mëposhtme do të jetë e pasaktë:Teksti
.Elementet HTML mund të kenë atribute (globale, të aplikuara për të gjithë elementët HTML dhe të tyret). Atributet shkruhen në etiketën hapëse të elementit dhe përmbajnë një emër dhe vlerë, të specifikuar në formatin e atributit name="value" . Atributet ju lejojnë të ndryshoni vetitë dhe sjelljen e elementit për të cilin janë vendosur.
Secilit element mund t'i caktohen vlera të shumta të klasës dhe vetëm një vlerë id. Vlerat e shumëfishta të klasave shkruhen të ndara nga një hapësirë, . Vlerat e klasës dhe të identitetit duhet të përbëhen vetëm nga shkronja, numra, viza dhe nënvizon dhe duhet të fillojë vetëm me shkronja ose numra.
Shfletuesi shikon (interpreton) dokumentin HTML, duke ndërtuar strukturën e tij (DOM) dhe duke e shfaqur atë në përputhje me udhëzimet e përfshira në këtë skedar (stilet, skriptet). Nëse shënimi është i saktë, dritarja e shfletuesit do të shfaqë një faqe HTML që përmban elementë HTML - tituj, tabela, imazhe, etj.
Procesi i interpretimit (parsing) fillon përpara se faqja e internetit të ngarkohet plotësisht në shfletues. Shfletuesit përpunojnë dokumente HTML në mënyrë sekuenciale, që nga fillimi, ndërsa përpunojnë CSS dhe lidhin fletët e stilit me elementët e faqes.
Një dokument HTML përbëhet nga dy seksione - kreu - midis etiketave ... dhe pjesa e përmbajtjes - midis etiketave ....
Struktura e faqes së internetit 1. Struktura e dokumentit HTMLHTML ndjek rregullat që përmbahen në skedarin e deklarimit të llojit të dokumentit (Përkufizimi i llojit të dokumentit, ose DTD). Një DTD është një dokument XML që përcakton se cilat etiketa, atribute dhe vlerat e tyre janë të vlefshme për një të veçantë Lloji HTML. Çdo version i HTML ka DTD-në e vet.
DOCTYPE është përgjegjës për shfaqja e saktë faqet e internetit sipas shfletuesit. DOCTYPE përcakton jo vetëm Versioni HTML(p.sh. html), por edhe skedarin DTD përkatës në internet.
...
Elementet brenda etiketës formojnë një pemë dokumenti, të ashtuquajturat modeli i objektit dokument, DOM (modeli i objektit të dokumentit). Në këtë rast, elementi është elementi rrënjë.
Oriz. 1. Struktura më e thjeshtë faqet e internetit Për të kuptuar ndërveprimin e elementeve të faqes së internetit, është e nevojshme të merren parasysh të ashtuquajturat "marrëdhënie familjare" midis elementeve. Marrëdhëniet midis elementeve të shumëfishtë të mbivendosur klasifikohen si prind, fëmijë dhe motër.
Një paraardhës është një element që përmban elementë të tjerë. Në figurën 1, paraardhësi për të gjithë elementët është . Në të njëjtën kohë, elementi është paraardhësi i të gjitha etiketave që përmban: ,
, , etj.
Një pasardhës është një element i vendosur brenda një ose më shumë lloje elementesh. Për shembull, është një pasardhës i , dhe elementi
Është pasardhës i të dyjave dhe .
Elementi prind - një element që lidhet me elementë të tjerë nga më shumë se një nivel i ulët, dhe ndodhet në pemën sipër tyre. Në figurën 1 dhe. Etiketë
Është prind vetëm për .
Një element fëmijë është një element që është drejtpërdrejt i varur nga një element tjetër në një nivel më të lartë. Në figurën 1 ka vetëm elementë, ,
Dhe janë fëmijë të.
Elementi motër - një element që ka një të përbashkët elementi prind me atë në shqyrtim, të ashtuquajturit elementë të të njëjtit nivel. Në figurën 1 dhe janë elementë të të njëjtit nivel, si dhe elementë , dhe
Ato janë motra me njëra-tjetrën.
1.1. Elementi 1.2. ElementiSeksioni ... përmban informacion teknik rreth faqes: titulli, përshkrimi, fjalë kyçe për Motorë kërkimi, kodimi, etj. Informacioni që fut atje nuk shfaqet në dritaren e shfletuesit, por përmban informacion që i tregon shfletuesit se si të përpunojë faqen.
1.2.1. ElementiEtiketa e kërkuar e seksionit është . Teksti i vendosur brenda kësaj etikete shfaqet në shiritin e titullit të shfletuesit të internetit. Titulli duhet të jetë jo më shumë se 60 karaktere për t'u përshtatur plotësisht në titull. Teksti i titullit duhet të përmbajë sa më shumë që të jetë e mundur Përshkrimi i plotë përmbajtjen e faqes së internetit.
1.2.2. ElementiEtiketa opsionale e seksionit është etiketë e vetme. Me ndihmën e tij, ju mund të vendosni një përshkrim të përmbajtjes së faqes dhe fjalë kyçe për motorët e kërkimit, autorin e dokumentit HTML dhe vetitë e tjera të meta të dhënave. Një element mund të përmbajë elementë të shumtë sepse ato përmbajnë informacione të ndryshme në varësi të atributeve të përdorura.
Përshkrimi i përmbajtjes së faqes dhe fjalë kyçe mund të specifikohet njëkohësisht në disa gjuhë, për shembull, në rusisht dhe anglisht:
Duke përdorur një etiketë, ju mund të bllokoni ose të lejoni indeksimin e një faqe në internet nga motorët e kërkimit:
Për të ringarkuar automatikisht faqen pas një periudhe të caktuar kohe, duhet të përdorni vlerën e rifreskimit:
Faqja do të ringarkohet pas 30 sekondash. Për të ridrejtuar vizitorin në një faqe tjetër, duhet të specifikoni URL-në në parametrin url:
| grup karakteresh | Specifikon kodimin e karaktereve për dokumentin aktual HTML: |
| përmbajtjen | Përmban tekst i lirë, i cili specifikon vlerën e lidhur me atributin http-equiv ose name, në varësi të vlerës së tyre. |
| http-equiv | Kontrollon veprimet e shfletuesit në një faqe të caktuar ueb (ekuivalente me titujt HTTP). Kur jepni faqen, shfletuesi do të ndjekë udhëzimet e specifikuara në atributin: default-style specifikon stilin e preferuar për t'u përdorur në faqe. Atributi i përmbajtjes duhet të përmbajë ID-në e elementit që i referohet fletës së stilit CSS, ose ID-në e elementit që përmban fletën e stilit. refresh tregon kohën në sekonda përpara se faqja të ringarkohet ose kohën para ridrejtimit në një faqe tjetër nëse atributi i përmbajtjes përmban rreshtin "url=page_address" pas kohës. Rindezje automatike faqet pas një periudhe të caktuar kohe, në në këtë shembull, pas 30 sekondash: Nëse keni nevojë të transferoni menjëherë vizitorin në një faqe tjetër, mund të specifikoni URL-në në parametrin url: |
| emri | Lidhur me vlerën që përmban atributi i përmbajtjes. Nuk duhet të përdoret nëse elementi tashmë ka grupin e atributeve http-equiv, charset ose itemprop. Emri i aplikacionit specifikon emrin e aplikacionit në internet të përdorur në faqe. autori specifikon emrin e autorit të dokumentit në format të lirë. përshkrimi përcakton Përshkrim i shkurtër në përmbajtjen e faqes, për shembull: gjeneratori specifikon një nga paketat software, përdoret për të krijuar një dokument, për shembull: . fjalë kyçe përmban një listë fjalë kyçe, të ndara me presje, që korrespondojnë me përmbajtjen e faqes, për shembull: . Gjithashtu atribut emri mund të marrë vlerat e mëposhtme nga specifikimi i zgjeruar, si krijuesi, googlebot, botuesi, robotët, slurp, porta e pamjes, megjithëse asnjëra prej tyre nuk është miratuar ende zyrtarisht. |
Brenda këtij elementi vendosen stilet që përdoren në faqe. CSS përdoret për të vendosur stile në një dokument HTML. Mund të ketë disa elementë të tillë në një faqe.
Brenda këtij elementi mund të shkruani kodin e formatimit si për vetë elementët e faqes së internetit, ashtu edhe për të gjithë faqen e internetit.
.letër ( gjerësia: 200 px; lartësia: 300 px; ngjyra e sfondit: #ef4444; ngjyra: #666666; )
Për të lidhur një stil të caktuar me një element, duhet t'i caktoni emrin e duhur elementit duke përdorur atributin class (ose id):
...
Kodi CSS mund të futet direkt në elementin e shënjimit si vlera e atributit të stilit, për shembull:
1.2.4. Elementi
Ju gjithashtu mund të vendosni stile për një dokument duke përdorur një metodë tjetër - shkruajini ato skedar të veçantë me një shtesë .css, për shembull style.css .
Ka dy mënyra për të lidhur një skedar me stile në një faqe interneti:
nëpërmjet direktivës @import url
@import url (style.css);
duke përdorur elementin. Elementi nuk kërkon një etiketë mbyllëse. Ky element përcakton marrëdhënien ndërmjet Faqja aktuale dhe dokumente të tjera. Mund të ketë disa elementë të tillë në një faqe. Hyrja do të duket si kjo:
| origjinë të kryqëzuar | Tregon nëse CORS (një teknologji shfletuesi që lejon një faqe ueb të aksesojë burimet nga një domen tjetër) duhet të përdoret kur të merret një imazh nga një sajt. anonim — shfletuesi shton automatikisht një titull Origjine në një kërkesë ndër-domenale, që përmban emrin e domenit nga i cili është bërë kërkesa. Nëse serveri nuk përgjigjet me kokën CORS Access-Control-Allow-Origin: * (ose emri i domenit në vend të një ylli), atëherë ngarkimi i imazhit do të bllokohet. use-credentials - Nëse serveri nuk jep kredencialet duke përdorur Access-Control-Allow-Credentials: true, atëherë ngarkimi i imazhit do të bllokohet. |
| href | Atributi kryesor i etiketës, vlera është rruga drejt skedarit me stile. |
| hreflang | Përcakton gjuhën e tekstit në dokumentin e referuar. |
| mediat | Përcakton llojin e pajisjes në të cilën duhet të aplikohet burimi i lidhjes. |
| asnjëherë | Një variabël vargu i gjeneruar rastësisht në server që vendos rregullat për përdorimin e stileve inline për të mbrojtur përmbajtjen. Vlera e atributit është një varg teksti. |
| rel | Atributi përcakton marrëdhënien ndërmjet dokument aktual dhe dokumenti në të cilin shkon lidhja. alternative - një lidhje për të njëjtin dokument, por në një format të ndryshëm (për shembull, faqe për printim, përkthim, pasqyrë, furnizim në format RSS ose Atom), . arkiva - tregon se dokumenti i lidhur është me interes historik. Një lidhje mund të tregojë një koleksion regjistrimesh, dokumentesh ose materialesh të tjera. lidhjen e autorit në faqen për autorin e dokumentit ose në faqen me informacionin e kontaktit të autorit. shënoni një referencë për paraardhësin më të afërt të artikullit që është lidhja, ose për seksionin e artikullit që lidhet më ngushtë me elementin nëse nuk ka paraardhës. e jashtme përdoret për të treguar se faqja me të cilën lidhet nuk është pjesë e kësaj faqeje. së pari specifikon një lidhje që tregon dokumentin e parë në një sekuencë dokumentesh. lidhjen e ndihmës me një dokument ndihme. ikona specifikon rrugën drejt ikonës që do të përdoret për dokumentin aktual. e fundit tregon një lidhje që çon në dokumenti i fundit në sekuencën e dokumenteve. licencë Një lidhje me informacionin e të drejtës së autorit për një dokument. tjetër tregon se ky dokument është pjesë e një serie dhe se lidhja shkon tek dokumenti tjetër në këtë seri. nofollow tregon se lidhja nuk është e miratuar nga autori i faqes ose se lidhja është e një natyre komerciale. noreferrer tregon se titulli i kërkesës së klientit që përmban url-në e burimit të kërkesës nuk duhet të kalohet kur ndiqni lidhjen. pingback specifikon adresën e serverit pingback, i cili lejon blogun të njoftojë automatikisht faqet që lidhen me të. prefetch specifikon që skedari i referuar duhet të ruhet paraprakisht në memorien e fshehtë. prev tregon se ky dokument është pjesë e një serie dhe se lidhja është me një dokument të mëparshëm në atë seri. kërkimi tregon se dokumenti i referuar përmban një ndërfaqe për kërkimin dhe burimet përkatëse. shiriti anësor tregon se dokumenti i lidhur do të shfaqet në kontekst shtesë të shfletuesit, nëse është e mundur, dhe disa shfletues, kur klikoni një hiperlidhje, hapin një dritare për të shtuar lidhjen në shiritin tuaj të faqeshënuesve. lidhjen e fletës së stilit me skedar i jashtëm, e cila do të përdoret si fletë stili për këtë dokument. etiketa tregon se etiketa e lidhur me hiperlidhje vlen për këtë dokument. lart tregon se faqja është pjesë struktura hierarkike, dhe se hiperlidhja çon në më shumë nivel të lartë burim në strukturë. |
| madhësive | Përcakton madhësinë e ikonave për shfaqjen vizuale. Atributi i madhësive përdoret vetëm në lidhje me rel="icon" dhe mund të marrë vlerat e mëposhtme: gjerësi-lartësia - përcakton një listë të madhësive të ndara sipas hapësirave, secila madhësi duhet të jetë në formatin - gjerësi-lartësia (dimensionet e ikonës janë të specifikuara në piksel), për shembull: ; çdo - ikona mund të shkallëzohet në çdo madhësi. |
| titull | Përcakton titullin e një lidhjeje ose emrin e një grupi fletësh stilesh alternative. Vlera e atributit është tekst. |
| lloji | Përcakton llojin MIME të dokumentit që referohet. Në këtë rast merr vlerën "text/css". |
| asinkron | Atributi tregon që skripti do të funksionojë në mënyrë asinkrone me pjesën tjetër të faqes (skripti do të fillojë të ekzekutohet në të njëjtën kohë që faqja ngarkohet). |
| grup karakteresh | Përcakton kodimin e karaktereve |
| origjinë të kryqëzuar | Përcakton nëse CORS do të përdoret kur ngarkohen skriptet e jashtme (duke përdorur atributin src). anonim — përpara se të ngarkojë skriptin në një kërkesë ndër-domainësh, shfletuesi shton automatikisht kokën e Origjinës, pa kaluar parametrat e aksesit (cookie, certifikatë X.509, hyrje/fjalëkalim për vërtetimin bazë nëpërmjet HTTP). Nëse përgjigja e serverit nuk përmban titullin e emrit të domenit Access-Control-Allow-Origin: skripti nuk do të ngarkohet. kredencialet e përdorimit — përpara se të ngarkojë skriptin në një kërkesë ndër-domainësh, shfletuesi shton automatikisht një titull Origjine që tregon parametrat e aksesit (cookie, certifikatë SSL ose çifte hyrje/fjalëkalim). Nëse përgjigja e serverit nuk përmban titullin Access-Control-Allow-Credentials: true, skripti nuk do të ngarkohet. |
| shtyj | Interpretimi i skripteve vonohet derisa dokumenti të jepet në pajisjen e përdoruesit. |
| asnjëherë | Ofron siguri duke mbrojtur kundër sulmeve të skriptimit ndër-site (XSS). Vendos rregulla për përdorimin e skripteve të integruara duke përdorur vlera dhe hash nonce. Gjatë paraqitjes së faqes, shfletuesi llogarit hash-et për çdo skript inline dhe i krahason ato me ato të listuara në CSP. Shkarkimi nga burime të tjera përveç " Lista e bardhë“, është bllokuar. |
| src | Tregon vendndodhjen e skedarit me skriptin; vlera e atributit është url-ja e skedarit që përmban programin JavaScript. |
| lloji | Përdoret për të deklaruar gjuhën e skriptit të përdorur për të kompozuar përmbajtjen e etiketës. |
Ky seksion përmban të gjithë përmbajtjen e dokumentit. Në dispozicion për elementin.
| në të pasme | Një ngjarje që ndizet pasi një faqe dërgohet për printim ose pasi dritarja e printimit është mbyllur. |
| para shtypjes | Një ngjarje që ndizet përpara se një faqe të dërgohet për printim. |
| përpara shkarkimit | Ngjarja aktivizohet kur vizitori fillon një kalim në një faqe tjetër ose klikon "mbyll dritaren". Ju lejon të shfaqni një mesazh në dialogun e konfirmimit për të njoftuar përdoruesin nëse dëshiron të qëndrojë ose të largohet nga faqja aktuale. |
| onhashchange | Ngjarja aktivizohet kur ndryshon pjesa hash e URL-së, për shembull kur përdoruesi kalon nga example.domain/test.aspx#page1 në example.domain/test.aspx#page2. |
| një mesazh | Një ngjarje ndodh kur një mesazh merret përmes një burimi ngjarjeje. |
| offline | Ngjarja aktivizohet nga shfletuesi kur shfletuesi përcakton që lidhja me internetin ka humbur. |
| online | Ngjarja aktivizohet nga shfletuesi kur lidhja e internetit është rivendosur. |
| në faqehide | Ngjarja ndodh kur përdoruesi largohet nga faqja përmes navigimit, të tilla si klikimi i një lidhjeje, rifreskimi i faqes, plotësimi i një formulari, etj. |
| shfaqje në faqe | Ngjarja ndodh kur përdoruesi lundron në faqen e internetit, pas ngjarjes së ngarkimit. |
| shkarkimin | Ngjarja aktivizohet nëse faqja nuk ngarkohet për ndonjë arsye ose kur dritarja e shfletuesit është e mbyllur. |
Përshëndetje të dashur webmaster fillestarë. Në këtë mësim do të punojmë në pamjen e faqes sonë të internetit.
Siç kam shkruar më parë, pamjen krijon një faqe interneti ose shabllon.
Dhe në këtë mësim, ne do të mësojmë se si të ndryshojmë shabllon WordPress, pra ndryshimi i ngjyrave, madhësive, renditjes së elementeve, imazhit në kokën e faqes dhe në përgjithësi gjithçka që shohim kur hyjmë në faqe.
Por, para se të filloni, këshillohet të kaloni dhe, ose të paktën të keni literaturë referuese në dorë, përndryshe, shumë nga ato që do të flas këtu thjesht nuk do të jenë të qarta.
Ju, sigurisht, mund të përdorni timin, por është më mirë të mësoni akoma.
Përveç sa më sipër, duhet të lexoni postimin dhe të ndiqni rekomandimet e dhëna në të. Ato janë shumë të thjeshta.
Le të fillojmë me redaktimin temë standarde Njëzet e dhjetë. Kjo temë është instaluar si parazgjedhje në ndërtimin e WordPress, dhe është ajo që mund të shihet menjëherë pas instalimit të motorit.
Nga rruga, ky burim gjithashtu përmban këtë temë, vetëm pak të korrigjuar. Ose më mirë, ribërë në tokë.
Krijo tenden web design, do të përdorim mjetin Web Inspector.
Ky mjet thelbësor për zhvilluesin përfshihet si parazgjedhje në të gjitha shfletues modern dhe thirret me tastin F12.
Mund ta telefononi gjithashtu duke klikuar çelësi i djathtë vendoseni miun mbi faqe dhe zgjidhni "Shiko kodin e elementit" ose "Shqyrto elementin"
Dizajni i faqes sime ka ndryshuar tashmë disa herë, dhe ju shihni një version të vjetër, por kjo nuk e ndryshon thelbin.
Unë nuk i di ende të gjitha aftësitë e këtij mjeti (do të më duhet patjetër të përfshihem dhe ta studioj), por ajo që di është e mjaftueshme për të bërë gjithçka që dua me temën.
Siç mund ta shihni, në fushën e madhe në të majtë ka vija me kodi html. Çdo rresht është kodi html i një prej elementeve aktualisht në faqe.
Nëse e kaloni kursorin mbi të, elementi që i korrespondon atij në faqe do të theksohet me një ngjyrë tjetër dhe pranë tij do të shfaqet një fusnotë që tregon emrin e përzgjedhësit përgjegjës për këtë element në fletën e stilit dhe madhësia e saj në pixel.
Nëse klikoni në këtë rresht, ajo do të ngjyroset Ngjyra blu, si të thuash, do të rregullohet dhe në fushën në të djathtë do të pasqyrohen të gjitha vetitë dhe vlerat e vendosura, në rastin tonë, në bllokun me menunë, në fletën e stilit.
Siç mund ta shihni, blloku i menusë në fletën e stilit tregohet nga zgjedhësi #access dhe i jepen vlerat e mëposhtme:
gjerësia - 940 px
diferenca e majtë - 0 px
Le të shkojmë më poshtë
ngjyra e sfondit - e verdhë (fillimisht e zezë)
dukshmëria e elementit - e dukshme
Lundrues në të majtë - ndoshta për të mos larguar titullin
marzhi i sipërm - 80 px, dhe në qendër
Marzhi i poshtëm - 30 px
kornizë - trashësi, e fortë, e verdhë (fillimisht e zezë)
Tani ne dimë pothuajse gjithçka rreth këtij elementi dhe, nëse dëshirojmë, mund ta lëvizim atë poshtë ose lart, të ndryshojmë ngjyrën ose madhësinë e tij, ta shtypim atë në një nga katër anët e ekranit ose ta fshehim atë jashtë syve.
Për të bërë të gjitha këto, duhet të shkoni te Console - Appearance - Editor dhe të gjeni skedarin style.css atje
Ne klikojmë mbi të dhe, duke u ngjitur në faqe pak më lart, shohim skedarin e fletës së stilit të hapur për redaktim. Para së gjithash, kopjoni të gjithë skedarin dhe ruajeni në ndonjë redaktues, ndoshta në Notepad.
Në këtë skedar duhet të gjejmë përzgjedhësin #access. Fillimisht do të shfaqet në seksionin "=Struktura", por aty është në një grup me përzgjedhës të tjerë për të cilët veti identike dhe kuptimet.
Le të mos e heqim #access nga ky grup tani për tani, pasi gjerësia e specifikuar në këtë grup, për shembull, më përshtatet. Ne zbresim më tej në seksionin "Menu". Këtu blloku ynë paraqitet në të gjithë lavdinë e tij.
Këtu mund ta lëvizni lart e poshtë duke ndryshuar vlerën në veçorinë margin, të ndryshoni ngjyrën dhe nëse nuk vendosni asnjë në veçorinë e ekranit në vend të bllokut, atëherë e bëni atë të padukshëm.
Mos harroni të përditësoni skedarin pas çdo manipulimi!
Zgjodha në mënyrë specifike një bllok menuje për demonstrim sepse ka një strukturë komplekse. Në fund të fundit, në bllokun kryesor përmban gjithashtu blloqe lidhjesh, dhe tekstin në këto lidhje, i cili në vetvete është gjithashtu një bllok i veçantë.
Siç e keni vënë re tashmë, në inspektorin e uebit, çdo rresht fillon me një trekëndësh. Nëse drejtohet djathtas, atëherë ka disa linja të tjera të fshehura në të. Ne klikojmë në trekëndësh dhe na hapet kodi i elementeve të mbyllur në bllokun e menusë.
Këta elementë, nga ana tjetër, përmbajnë më shumë elementë, dhe ne duhet t'i hapim të gjitha, domethënë gjithçka që është në bllokun e menusë.
Tani, duke lëvizur kursorin përgjatë vijave në fushën e majtë, në fushën e djathtë shikojmë se si ta zbulojmë këtë ose atë element në skedarin e stilit. css dhe kuptoni se cilat vlera do të dëshironim të ndryshonim.
Më pas shkojmë te redaktori, gjejmë përzgjedhësin e dëshiruar dhe ndryshojmë atë që kemi në mendje. Unë do t'ju tregoj se çfarë kam ndryshuar në mënyrë që menyja të ketë të njëjtën pamje dhe funksionalitet si në këtë faqe.
Nëse dikush dëshiron ta heqë fare këtë meny nga faqet e sajtit, atëherë për ta bërë këtë duhet të shkojë te Appearance > Editor dhe të hapë skedarin header.php për redaktim.
Në kodin e skedarit gjejmë etiketën dhe e fshijmë atë, dhe gjithçka pas tij, deri në të parën.
Ju thjesht mund ta bëni atë të padukshëm. Për ta bërë këtë, në skedarin style.css, vetia display:none i shtohet përzgjedhësit #access.
Tani le të shohim se si ta zëvendësojmë imazhin në kokën e faqes. Le të themi se të gjitha imazhet e propozuara në temë nuk ju përshtaten dhe ju vendosët të instaloni diçka plotësisht tuajën. Mund të shihni se ku mund të merrni imazhin për kokën në faqe dhe kur të gjendet ose bëhet, vendoseni në dosjen e imazheve të temës.
Pastaj shkojmë te skedari style.css dhe shohim se çfarë duhet bërë në mënyrë që të mos bëhet foto e kërkuar u zhduk, por u shfaq ai që më duhej.
Gjejmë seksionin “=Header”, i cili përmban gjithçka që lidhet me kokën e faqes, dhe aty gjejmë përzgjedhësin e imazhit. Më pas ndryshojmë vlerën display:block në display:none dhe imazhi zhduket nga ekrani.
Më pas shkojmë në seksionin “=Structure” dhe në përzgjedhësin #wrapper bëjmë hyrjen e mëposhtme. Sfondi: prona është aty si parazgjedhje, ky është sfondi i faqes, kështu që ne shtojmë vetitë vetëm për imazhin.
Në vlerën e veçorisë sfond-imazh, ne vendosim adresën e një imazhi të ri që gjetëm ose bëmë, të ngarkuar më parë në dosjen e imazheve të temës.
Nëse faqja është e hostuar, atëherë kjo dosje ndodhet në: emri_site > public_html > wp-content > > temat > imazhet.
Nëse faqja është ende aktive hosting lokal, atëherë rruga për në këtë dosje është: Z > shtëpia > emri_site > www > wp-content > > temat > imazhet.
Në rastin e parë, imazhi ngarkohet duke përdorur menaxher skedari, në të dytën, imazhi thjesht ruhet në këtë dosje.
Këtu, pas instalimit, do t'ju duhet vetëm të rregulloni veçorinë e pozicionit të sfondit në mënyrë që të vendosni më saktë kokën në faqe dhe veçoria e sfondit është e nevojshme në rast se imazhi në kokë nuk hapet për disa vizitorë.
Në këtë rast, kreu do të ketë të paktën një sfond.
Kjo bëhet si më poshtë. Shkoni te Console - Entries - Add Entry, kaloni redaktorin në modalitetin HTML dhe përmes ngarkuesit të imazhit (Shto skedarin e medias), ngarkoni imazhin e dëshiruar.
Kodi për këtë imazh shfaqet në redaktues. Duhet të kopjohet dhe "Regjistrimi" të fshihet.
Pastaj shkoni te "Pamja - Redaktues" dhe hapni skedarin header.php për redaktim, në të cilin gjejmë rreshtin
Menjëherë pas kësaj rreshti ne ngjitim kodin e imazhit të kopjuar. Kodi ka një alignment class class="aligncenter" , dhe në varësi të nevojës, aligncenter mund të zëvendësohet me alignleft , ose alignright .
Do të varet nga cila skaj, ose në qendër, ndodhet imazhi.
Nëse, pas ruajtjes dhe shikimit, imazhi duhet të zhvendoset pak më shumë, diku, atëherë kthehemi te redaktuesi dhe në kodin e imazhit, në etiketën img, futni atributin stil me vetinë margin:
style="margin:0 0 0 0;"
Ku në vend të zerove vendosim madhësitë e kërkuara të indenteve, dhe kështu e lëvizim figurën në drejtimin e dëshiruar.
Ngjyra e fushave mund të ndryshohet duke zbritur pak në seksionin "=Elementet globale" në përzgjedhësin e etiketës "trup". Fushat e mia janë bërë nga një foto e shumëzuar. Më vonë e hoqa dhe e lashë të thjeshtë, por mund të shihni se si ta bëni këtë (imazhi në margjina).
Nëse ndryshoni vetëm ngjyrën, atëherë thjesht ndryshoni vlerën në vetinë e sfondit
Këtu ndryshon madhësia, lloji dhe ngjyra e fontit të faqes
Dhe madhësia, ngjyra, pamja e titullit dhe përshkrimet e faqes në kokë janë këtu. Këtu mund të rregulloni vendosjen e titullit dhe përshkrimit kur ndryshoni imazhin e kokës.
Le të ndalemi këtu për momentin. Provoni, ndryshoni, lëvizni, përmirësohuni. Shumë shpejt do ta transferojmë faqen në hosting real. Sigurisht, edhe ne do të bëjmë disa ndryshime atje, por duhet t'i bëjmë ato me besim dhe shpejtësi dhe të bëjmë sa më pak gabime.
Modele HTML në Rusisht
