Cum se configurează smartphone-uri și PC-uri. Portal informativ

Cum se schimbă tema WordPress. inspector web

Designerii petrec ore întregi perfecționând măiestria pentru a ajusta meticulos cele mai mici detalii din designul site-ului web care ies din stiloul lor. Cu toate acestea, calitatea codului este foarte adesea foarte scăzută. Ai nevoie de dovezi? Consultați galeriile șabloane gratuite CSS. 90% dintre șabloane vor eșua validarea. În plus, majoritatea erorilor sunt foarte primitive și foarte ușor de remediat. V această lecție considera erori tipiceîn codul HTML care împiedică finalizarea cu succes a validării.

De ce să vă verificați codul?

Dacă site-ul arată grozav în browser, atunci de ce să verificați codul?Întrebare tipică adresată înainte de revizuirea codului. Dar site-ul nu se limitează doar la ceea ce este vizibil pentru utilizator. Pagini HTML sunt destinate să reprezinte date, nu efecte grafice... Datele trebuie să fie lizibile de întreaga comunitate vastă de oameni care utilizează Internetul. Și cititorii pot folosi tehnologii foarte diferite pentru a obține informațiile prezentate pe site-ul dvs. - de exemplu, pot folosi un program pentru a reda datele prin voce și doar să asculte ce este scris pe pagina dvs.

O pagină HTML care nu conține erori va fi redată în general corect în majoritatea browserelor și, de asemenea, va îndeplini cerințele tehnologiilor viitoare. Motoarele de căutare merită menționate aici, care sunt foarte importante în scopuri SEO. Nimeni nu vrea să creeze obstacole pentru ei, iar codul curat și corect este mult mai ușor de perceput de către roboții de căutare.

Este și o chestiune de profesionalism. Codul HTML incorect este foarte asemănător cu erori gramaticaleîn inscripţiile de pe site. Și deși clientul poate să nu observe erori în cod, acest lucru nu schimbă esența întrebării. Nimănui nu-i plac greșelile gramaticale în design, dar lăsarea codului HTML cu erori din anumite motive nu este considerat același act rușinos.

Greșeli comune

Mai jos sunt erorile care au fost surprinse în șabloane din prima pagină a unei cunoscute galerii Șabloane CSS... Multe site-uri arată grozav și chiar grozav, dar foarte adesea calitatea codului nu se potrivește cu calitatea designului. Deși majoritatea acestor erori pot fi remediate foarte rapid și ușor.


Cea mai gravă greșeală este să nu folosești Doctype! Eticheta lipsește Doctypeînseamnă că browserul va „ghici” ce limbă a fost folosită pentru a crea documentul. Pentru a remedia eroarea, trebuie să specificați tipul de document al paginii dvs.

Elementul nu este închis


Dacă deschideți o etichetă undeva în documentul HTML, trebuie să o închideți în locul potrivit. Uitarea în această problemă nu numai că duce la erori în validarea codului, dar poate provoca și probleme serioase cu șablonul. Figura arată o situație în care autorul a uitat să închidă eticheta

Omiterea/în elementele cu autoînchidere


Majoritatea elementelor HTML au etichete de sfârșit separate, de exemplu:

... Dar există elemente precum input, img și meta care se închid automat, ceea ce înseamnă că trebuie să aibă un / în fața parantezei de închidere.

Caracterele speciale nu au fost convertite


Caractere neconvertite în URL


În conformitate cu paragraful anterior, Simboluri speciale, în special și ampersand, trebuie să fie codificate în șiruri URL. Link-uri către site-uri create cu folosind PHP, conțin adesea variabile care folosesc caracterul & și trebuie scrise folosind HTML &.

Blocați elementele cu litere mici


Una din principalele reguli HTML lucru este elemente de bloc NU ar trebui să fie NICIODATĂ în interiorul elementelor în linie.

Un exemplu popular de eroare este utilizarea unui link în titlu:

banane

este un element bloc, deci trebuie să se înfășoare în jurul unui link (element inline):

banane

.

Imaginea lipsește atributul alt


Fiecare imagine dintr-un document HTML trebuie să aibă atribut alt cu o descriere a conținutului imaginii. Chiar dacă imaginea este în scop de design, trebuie să aibă un atribut alt, dar în în acest caz ar trebui lăsat necompletat, de exemplu alt = "". În caz contrar, trebuie să furnizați o descriere a conținutului imaginii.

Folosind atribute precum lățimea și înălțimea


Probabil, această situație este reversul utilizare pe scară largă Editori WYSIWYG care tind să insereze cod HTML redundant. Atributele lățimii și înălțimii sunt definite în standardele de tip document tranzitoriu, dar dacă urmăriți să urmați îndeaproape standardele, atunci probabil știți că toate atributele responsabile de prezentarea elementelor pe pagini ar trebui transferate într-un tabel. Stiluri CSS, pentru a separa conținutul și designul.

Numele sau ID-ul clasei începe cu o cifră


Numele clasei, ID-ul sau numele atributului nu pot începe cu o cifră. Ele pot include numere, dar nu la începutul unui cuvânt.

Care este situația cu validarea codului CSS?


Spre deosebire de HTML, CSS este obișnuit prezentare vizuală pagini. Deci întrebarea este „Dacă pagina arată bine, atunci de ce să verificați codul?” in acest caz suna mai convingator. CSS incorect nu are același efect asupra paginilor web ca și Cod greșit HTML. Cu toate acestea, merită să verificați greșelile de scriere și erorile din cod. Dacă utilizați noile proprietăți CSS3, acestea vor face ca documentul să eșueze validarea, deoarece nu sunt încă incluse în specificație, dar dacă sunteți sigur că totul este corect, atunci astfel de erori pot fi ignorate.

Declarația tipului de document se referă la regulile limbajului de marcare - pentru ca browserul să reda corect conținutul documentului.

Diferite tipuri de documente HTML

O declarație de tip de document nu este Etichetă HTML; Aceasta este o instrucțiune pentru browserul web despre versiunea limbajului de marcare în care este scrisă pagina.

O declarație de tip de document se referă la „Definiția tipului de document” sau la „Definiția tipului de document” (DTD). DTD stabilește regulile pentru limbajul de marcare, astfel încât browserele să redea conținutul corect.

Declarația tipului de document trebuie să apară mai întâi în documentul HTML, înaintea etichetei .

Sfat: Adăugați întotdeauna tipul de document în paginile dvs. Acest lucru ajută browserele să redeze pagina corect!

Tip de document „HTML 4.01 Strict”

Definiția tipului de document (DTD) conține toate elemente HTMLși atribute, dar NU INCLUDE elemente reprezentative și depreciate (cum ar fi fontul și centrul). Seturile de cadre nu sunt permise:

Tip de document „Setul de cadre HTML 4.01”

Acest DTD este echivalent cu „HTML 4.01 Tranzițional”, dar permite utilizarea seturilor de cadre:

„http://www.w3.org/TR/html4/frameset.dtd”>

Am făcut adesea declarații în lecțiile mele, cum ar fi - „o etichetă ar trebui să fie situată în interiorul altuia”, „eticheta img ar trebui să aibă un atribut src”, „întâi vine eticheta head, apoi corpul” și așa mai departe. Dar nu am venit cu toate acestea din mers, ci m-am ghidat de un anumit regulament, al cărui autor este o organizație care de fapt vine cu și aprobă toate standardele, - se numește W3C(Consorţiu World Wide Web). Nu am menționat acest lucru înainte, dar există mai multe standarde pentru scrierea HTML. Și fiecare dintre ele are propriile caracteristici și reguli de scriere. Acest lucru se datorează faptului că HTML nu stă pe loc, ci este în continuă evoluție.

Și dacă în versiuni timpurii standard când nu exista tehnologie CSS, cu ajutorul limbajului de marcare a fost posibilă crearea atât a structurii, cât și a designului, acum tendința este complet diferită - HTML a devenit mai mult asociat cu structura (fundație și cărămizi) pe care se sprijină designul. CSS aici este ceva asemănător cu un element decorativ care stabilește un aspect decorativ - analog cu faianța și tapetul, dacă te gândești la construirea unui site web ca la construirea unei case. În acest sens, în noile standarde HTML, unele etichete și atribute responsabile de design sunt depreciate. Adică, specificația actuală a standardului le acceptă, dar suportul va fi întrerupt în următorul.

Există un standard și mai strict numit XHTML, - nu tolerează deloc libertăți cu codul și nu iartă greșelile grave. Cel mai nou pe acest moment- aceasta este HTML 5, pentru el viitorul, deci pe viitor vom fi egali cu el.

Cu asta, totul pare să fie clar - există mai multe standarde și este grozav. Dar, în același timp, există browsere a căror sarcină este să procesare HTML codul, iar browserul nu poate înțelege întotdeauna în conformitate cu ce standard scriem și ce a vrut să spună utilizatorul și, în consecință, cum ar trebui afișat acest cod. Fie folosim HTML tranzițional și browserul ne iartă multe greșeli prin utilizarea „modului de economisire”, fie folosim modul strict de compatibilitate XHTML și erorile trebuie tratate cu cea mai mare rigoare. Cu alte cuvinte, browserul se confruntă cu o sarcină descurajantă.

Ce face browserul în acest caz? Afișează codul în modul compatibilitate inversă , - netezește toate erorile explicite și implicite din cod și încearcă să prezică cât mai mult posibil ceea ce avea în vedere utilizatorul. Dar există câteva dezavantaje evidente: în primul rând, browserul nu poate ști ce a vrut să spună persoana inițial. În al doilea rând, acest mod de compatibilitate poate funcționa diferit pentru fiecare browser. Cu ce ​​ajungem? Există cod și nu există reglementare - în practică, asta înseamnă că același marcaj, în modul de compatibilitate, va fi afișat diferit de browser. Prin urmare, avem nevoie de o modalitate de a informa browserul ce standard vom folosi.

Și există într-adevăr o astfel de modalitate, se numește - adăugarea unei definiții de tip de document.

În cod, declarația de tip este setată astfel:

Cu această linie, lăsăm browserului să înțeleagă ce va fi folosit pe pagina noastră Modul HTML 5. Această linie este inserată chiar la începutul documentului. Încercați să faceți asta în dvs testați HTML fişier.

Pe multe site-uri, puteți găsi în continuare această linie:

Această linie înseamnă că este utilizat standardul HTML 4.01. Dar nu îl vom folosi deoarece este depreciat. Dar, cu toate acestea, el este adesea găsit și merită să știți despre el.

Acum voi explica de ce este nevoie de toate acestea. Cu această linie, am stabilit un anumit standard conform căruia browserul ar trebui să afișeze documentul nostru în fereastra browserului. În practică, aceasta înseamnă că codul nostru HTML va afișa mai mult sau mai puțin la fel în toate browserele. Toate acestea ar fi imposibil de realizat dacă am lucra în modul de compatibilitate inversă ( ciudateniimodul), care este inclus în cazul în care declarația de tip de document este omisă. În practica mea cu aspectul paginii, acest lucru a fost foarte important. Pentru că, ad DOCTYPE, a rezolvat în cele din urmă problema afișării aceleiași pagini în toate browserele.

Validarea documentului.

Desigur, dacă vrem să ne verificăm dacă am greșit undeva în respectarea anumitor standarde, nu trebuie să facem acest lucru examinându-ne codul cu ochii. Toate acestea au fost automatizate de mult timp, deoarece există un verificator, datorită căruia putem afla dacă am făcut greșeli evidente în marcajul nostru.

Pe această pagină găsim mai multe modalități de verificare:

  1. Indicați un site din viața reală.
  2. Încărcați un fișier de pe computer.
  3. Lipiți direct codul pe care doriți să îl verificați în câmpul corespunzător.

În cazul nostru, a doua sau a treia opțiune este cel mai probabil potrivită.

Eu personal am folosit a treia metodă. Documentul meu a fost validat cu succes, ceea ce a fost raportat de program cu linia Acest document a fost verificat cu succes ca HTML5! pe fond verde.

Dacă rezultatul este diferit, inscripția va fi afișată pe un fundal roșu. Aceasta va însemna că am făcut o greșeală undeva. De fapt, programul în sine va indica unde și pe ce linie am făcut o greșeală și ce anume, deși în engleză.

Dar în cazul meu, programul, pe lângă faptul că a anunțat că validarea a avut succes, mi-a dat și trei avertismente:

1. Utilizarea funcției experimentale: Verificator de conformitate HTML5

Cert este că standardul HTML 5 nu a fost încă aprobat în mod oficial de către consorțiu, care continuă să introducă noi caracteristici utile... Dar în practică, din ce în ce mai mult cantitate mare Dezvoltatorii încep să-l folosească acum pentru a fi pregătiți pentru mâine.

2. Nicio codificare de caractere declarată la nivel de document

Documentul nu spune un cuvânt despre codificarea folosită. Într-adevăr, până la urmă, nu am indicat-o în mod explicit, ceea ce înseamnă că nu este un fapt că în loc să afișeze litere rusești, browserul va afișa câteva caractere chinezești. Acest lucru se întâmplă deoarece browserul, atunci când afișează documentul, este ghidat de unii tabelul de coduri(adică codificare), unde fiecărei litere i se atribuie o corespondență caracter de cod... Dar faptul că într-o codificare un număr înseamnă o literă, în alta poate însemna un fel de hieroglifă japoneză. Prin urmare, browserului trebuie să i se spună ce codificare să folosească. Dacă acest lucru nu se face, browserul va încerca oricum să ghicească. Dar nu există absolut nicio garanție că o va face corect.

3. Utilizarea modului de intrare directă: se presupune codificarea caracterelor UTF-8

Programul avertizează că folosește utf-8 în mod implicit.

Ei bine, atunci nu mai rămâne nimic decât să declarăm codificarea pe care o folosim. Acest lucru se face în acest fel:

Linia în sine trebuie să fie imbricată în elementul cap.

Etichetă meta aparține categoriei de etichete de serviciu, cam informează că există unele informații despre pagină pe care vrem să le spunem browserului. Ea, ca orice altă etichetă, are atribute:

http-echiv- acesta este un atribut, în valoarea căruia indicăm titlul titlului.

conţinut- un atribut, ca valoare a cărui valoare precizăm valoarea antetului, în acest caz valoarea antetului Content-type.

Să ne uităm acum la valorile atributelor pe care tocmai le-am specificat:

Conţinut-Tip- îi spunem browserului că vom raporta ce tip are documentul nostru. Și, de asemenea, ce codificare este folosită în el.

text /html;set de caractere =utf-8- document de tip text/html, care foloseste codificare utf-8.

Încercați să validați pagina din nou. Nu ar trebui să existe mesaje de avertizare acum. Dar ei pot rămâne, dar din alt motiv. De exemplu:

1. Folosiți imagini în documentul dvs. și în etichetă img atributul nu este setat alt.

2. Elementul body conține un element inline. Conform specificației, în elementul de caroserie ar trebui să se afle numai elemente de bloc. Și deja în ele, pot fi și litere mici.

Pot exista multe exemple de erori, dar este problematic să le menționăm pe toate într-un articol. Cu toate acestea, dacă în timpul validării ați întâlnit o altă eroare, atunci scrieți despre ea în comentarii - ne vom ocupa de ea împreună.

  • < Назад
  • Înainte>

Pentru a comenta, trebuie să vă înregistrați.

Bazele HTML conțin reguli de bază limbaj HTML, descrierea structurii unei pagini HTML, relații în structura unui document HTML între elementele HTML.

Documentul HTML este normal Document text, poate fi creat ca de obicei editor de text (Caiet), iar în specialitate, cu evidențierea codului (Bloc de note ++, Studio vizual cod etc.)... Documentul HTML are extensia .html.

Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este notat în documentul sursă printr-o etichetă de început (deschidere) și de sfârșit (închidere) (cu rare excepții).

Eticheta de pornire arată unde începe elementul, sfârșitul - unde se termină. Etichetă de final este format prin adăugarea unei bare oblice / înainte de numele etichetei:<имя тега> … ... Între etichetele de început și de sfârșit se află conținutul etichetei - conținut.

Etichetele unice nu pot stoca conținut direct în sine, este scrisă ca valoare de atribut, de exemplu, o etichetă va crea un buton cu text Buton interior.

Etichetele pot fi imbricate unele în altele, de exemplu,

Text

... Când investiți, ar trebui să urmați ordinea de închidere (principiul „matryoshka”), de exemplu, următoarea intrare va fi incorectă:

Text

.

Elementele HTML pot avea atribute (globale, care se aplică tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a unui element și conțin un nume și o valoare specificate în formatul atribut nume = „valoare”. Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.

Fiecărui element i se pot atribui mai multe valori de clasă și o singură valoare de id. Mai multe valori ale clasei sunt separate printr-un spațiu,

Top articole similare