Kurs izgleda - validacija stranice. Provjera valjanosti podataka Provjera valjanosti koda
Izvodi nekoliko provjera vašeg koda. Glavni:
Imajte na umu da su ovo logičke provjere i nije važno kako je validator implementiran. Ako barem jedna od provjera ne uspije, tada se HTML smatra nevažećim. I u tome leži problem Argumenti Glavni argument za validaciju HTML-a je kompatibilnost među pretraživačima. Svaki pretraživač ima svoj parser, a davanje onoga što svi pretraživači razumeju je jedini način da budete sigurni da će vaš kod ispravno raditi u svim pretraživačima. Budući da svaki pretraživač ima svoj vlastiti mehanizam za ispravljanje HTML grešaka, ne možete se osloniti na nevažeći kod. Glavni argument protiv validacije je da je prestroga i da ne odgovara načinu na koji pretraživači zapravo rade. Da, HTML može biti nevažeći, ali svi pretraživači mogu tretirati neki nevažeći kod na isti način. Ako sam spreman da preuzmem odgovornost za pogrešan kod
, što pišem, onda ne moram da brinem o provjerama. Jedina stvar oko koje moram da brinem je da radi.Generalno, moj najveći problem validacije je provjera #4 (za vanjske elemente). Ja sam zagovornik korištenja prilagođenih atributa u HTML oznakama za pohranu dodatnih meta podataka vezanih za određeni element. Po mom razumijevanju, ovo je, na primjer, dodavanje atributa foo kada imam podatke (bar) koje trebam povezati sa određenim elementom. Ponekad ljudi preopterećuju postojeće atribute u ove svrhe samo da bi prošli validaciju, iako će se atribut koristiti u druge svrhe. Nema smisla za mene.
Tajna pretraživača je u tome što oni nikada ne provjeravaju da li HTML kod odgovara navedenom DTD-u. Doctype koji ste naveli u dokumentu prebacuje parser pretraživača u određeni način rada, ali to ne učitava tip dokumenta i ne provjerava usklađenost koda s njim. To jest, analizator pretraživača obrađuje HTML sa nekim pretpostavkama o nevaljanosti, kao što su samozatvarajuće oznake i blok elementi unutar inline elemenata (siguran sam da postoje i drugi).
U slučaju prilagođenih atributa, svi pretraživači analiziraju i prepoznaju sintaktički ispravne atribute kao važeće. Ovo omogućava pristup takvim atributima kroz DOM koristeći Javascript. Pa zašto bih se brinuo o validnosti? Nastaviću da koristim svoje atribute i veoma mi je drago što ih HTML5 formalizuje.
Najbolji primjer tehnologije koja rezultira nevažećim HTML-om, ali čini veliku razliku je ARIA. ARIA radi dodavanjem novih atributa u HTML 4. Ovi atributi daju dodatno semantičko značenje HTML elementima i pretraživač je u stanju da prenese ovu semantiku na pomoćne uređaje kako bi pomogao osobama sa invaliditetom. Svi glavni pretraživači sada podržavaju ARIA oznake. Međutim, ako koristite ove atribute, imat ćete nevažeći HTML.
Što se tiče prilagođenih oznaka, mislim da nema ništa loše u dodavanju sintaktički ispravnih novih oznaka na stranicu, ali ne vidim veliku praktičnu vrijednost u tome.
Da razjasnim svoju poziciju: vjerujem da su provjere #1 i #2 veoma važne i da ih uvijek treba raditi. Takođe smatram da je provjera #3 važna, ali ne toliko važna kao prva dva. Provjera #4 je vrlo upitna za mene jer utiče na prilagođene atribute. Vjerujem da bi, maksimalno, prilagođeni atributi trebali biti označeni kao upozorenja (a ne kao greške) u rezultatima provjere kako bih mogao provjeriti da li sam pogrešno unio ime atributa. Označavanje prilagođenih oznaka kao grešaka može biti dobra ideja, ali ima i nekih problema, na primjer kada se sadržaj ugrađuje u druge oznake - SVG ili MathML.
Validacija radi validacije? Mislim da je validacija radi validacije krajnje glupa. Ispravan HTML samo znači da su sve 4 provjere prošle bez grešaka. Postoji nekoliko važnih stvari koje važeći HTML ne garantuje:- važeći HTML ne garantuje pristupačnost;
- Valjani HTML ne garantuje dobar UX (korisničko iskustvo);
- Valjani HTML ne garantuje funkcioniranje web stranice;
- Ispravan HTML ne garantuje ispravan prikaz stranice.
Znam da je ovo kontroverzna tema za mnoge, pa vas molim da se suzdržite od čisto emotivnih izjava u komentarima.
UPD: hvala na karmi, prebacio sam je na tematsku. Ponovit ću riječi autora: Razumijem da je ovo kontroverzna tema, ali molim vas da se suzdržite od čisto emotivnih komentara i dajte argumente.
Pozdrav svima, danas je završna lekcija kursa HTML/CSS izgleda.
Kao što sam obećao, u ovoj lekciji ćemo naučiti kako da validiramo stranicu. Hajde da shvatimo šta je to, za šta je potrebno i koji su alati i usluge dostupni za to.
Šta je validacija stranicePočnimo od toga šta je zapravo validacija stranice. Validacija stranice je provjera njenog HTML i CSS koda na usklađenost sa web standardima, kao i odabranog tipa dokumenta. Standarde o kojima je riječ propisuje W3C i to je to moderni pretraživači pokušajte ih pratiti.
Ako je provjera valjanosti uspješna, odnosno dokument je validan, tada će se s velikim stepenom vjerovatnoće jednako prikazati u svim pretraživačima).
Važeći izgled je obično „čist“, lijep kod, koji se, između ostalog, „sviđa“ pretraživačima. Stoga je provjera ispravnosti koda obavezan korak prilikom kreiranja web stranica.
Provjera ispravnosti straniceKako provjeriti valjanost stranice? Najjednostavniji način Da biste provjerili usklađenost web-mjesta sa web standardima, koristite online validator. Provjera ispravnosti html-a je moguća na: http://validator.w3.org/. Obavezno koristite ovu uslugu da pronađete greške u svom HTML kodu.
CSS validacija se vrši pomoću CSS validatora koji se nalazi na: http://jigsaw.w3.org/css-validator/.
Detaljnije sam pokazao kako raditi sa ovim servisima u videu ispod.
Također, provjera ispravnosti koda može se obaviti pomoću dodataka za provjeru valjanosti koda. Na primjer, meni je zgodnije da ih koristim, jer vam omogućavaju da provjerite valjanost u pokretu.
Evo video tutorijala:
Zdravo svima! Danas ću vam reći koja je valjanost koda web stranice, zašto je uopće potrebna i kako to provjeriti i popraviti raznim online usluga ov W3C validatori (html, CSS). Dakle, počnimo s teorijama. Šta je tačno ovaj termin?
Valjanost koda je stepen u kojem je kôd vaše web stranice usklađen sa prihvaćenim međunarodnim standardima, skraćeno W3C. Drugim riječima, davno jedan broj opšta pravila o pisanju koda, koji, ako nije u skladu sa W3C standardima, može rezultirati pogrešnim prikazom vaše stranice u raznim kompjuterskim i mobilnim pretraživačima. Također, u nekim posebno rijetkim slučajevima to može dovesti do sankcija od strane pretraživača, kao i nametanja raznih filtera koji mogu usporiti razvoj vašeg projekta. Ali to se događa vrlo rijetko, jer čak i Yandex i Google sami imaju kod koji nije 100% validan, odnosno sadrži greške.
Zapravo, vjerovatno imate pitanje: zašto moram trošiti svoje vrijeme na uređivanje koda svoje stranice kako bi postao važeći, ako to ionako ne utiče na ništa? Kao što sam gore napisao, ovo je neophodno kako bi se osiguralo da se vaša stranica ispravno prikazuje (bez grešaka i grešaka) u različitim pretraživačima. Danas, kao što znate, oni postaju sve popularniji razne vrste modeli telefona: iPhone, Android, Smartphone i drugi, koje već koristi čitavo stanovništvo zemlje. Danas svaka treća osoba ima svoje mobilni telefon, preko koje može ići na internet i posjetiti vašu stranicu. To je otprilike 20-30 puta više od onih koji imaju svoj kompjuter, laptop ili tablet.
Odnosno, shvatili ste poentu. Publika ljudi koji koriste mobilne uređaje je najveća, što je ono što trebamo ciljati. I ako se sjetite koliko se toga dogodilo u proteklih 10 godina mobilnih uređaja i koliko novih modela i dalje izlazi svakih šest mjeseci, postaje jasno da bi bilo jako glupo propustiti takav promet (posjetioce). Osim toga, nove tehnologije ne miruju, a sa pojavom ažuriranog html5 jezika, vaša stara web stranica napravljena davne 200. godine može se pokazati kao, da tako kažemo, jedna velika gužva na pozadini globalne mreže.
Kako provjeriti valjanost html i CSS koda vaše stranice?Ovakvih servisa na Internetu ima dosta, međutim, gotovo svi su pokvareni, pa čak i uključeni engleski, gdje ni uz to neće biti lako razumjeti šta se govori. Ali ipak, postoji jedan od njih koji je normalniji, koji ne samo da daje objašnjenje, već i pokazuje u kojoj se liniji koda nalazi greška. Dakle, upoznajte se - jigsaw.w3.org.
Posjetom ove stranice možete provjeriti valjanost koda vaše web stranice na tri načina. Na kartici “provjera po URI-ju” unesite adresu svoje stranice i servis će vam dati kompletnu listu grešaka koje se nalaze u kodovima samo na početna stranica! Ako, poput mene, niste baš upoznati sa kodovima i kada pregledavate kod svoje stranice ne možete pronaći liniju koju treba ispraviti, onda možete jednostavno učitati svoju datoteku CSS stilova (dizajn stranice) u “provjeri uploaded file ” tab.
U ovom slučaju, već ćete znati u koju datoteku trebate umetnuti kod. Usput, možete to učiniti još lakše. Ako vaša stranica radi na nekom motoru, na primjer, tada ćete samo trebati otići na administratorsku ploču bloga u “ izgled» “urednik”, odaberite datoteku, na primjer, zaglavlje (header.php), kopirajte kod i zalijepite ga u servis na kartici “provjera ukucanog teksta”. Ovako sam lično provjerio svoj blog.
Dakle, na mom sajtu lično je bilo 44 greške, što je vrlo malo u poređenju sa drugim sajtovima. Inače, čika Yandex ima čak 155 grešaka, ah-ah-ah. Pa dobro, hajde da ne pričamo o tužnim stvarima.
Kako bih vam olakšao ispravljanje ovih netočnosti u kodovima, dopustite da vam lično pokažem nekoliko primjera na svom blogu. Prvo obratite pažnju na natpis Linija 26. Ovo označava red koda. Da biste ga brzo pronašli, postavite ovaj kod koji ste ubacili u uslugu jigsaw.w3.org u bilo koji html editor, biće prikazane oznake linija.
Primijetite da je neka oznaka uvijek istaknuta crvenom bojom u kodu. Ovo je mjesto gdje trebate potražiti i urediti kod. Najčešće ga je potrebno potpuno ukloniti ili mu dodati oznake koje nedostaju. Također u naslovu i na dnu natpisa nalaze se savjeti na engleskom šta treba učiniti da se greška ispravi.
Primjer 1. Ovdje morate ukloniti navodnike označene crvenom bojom. Oni ne bi trebali biti unutar koda, gdje već postoje na početku i na kraju.
Primjer 2. Na kraju koda nedostaje oznaka za zatvaranje />. Imajte na umu da ako na vrhu koda postoji još jedan red, također sa nezatvorenom oznakom, onda i on mora biti zatvoren, inače greška neće nestati.
Primjer 3. Ovdje samo trebate ukloniti red koji se ponavlja: “ href=""> .
Inače, prvo treba ispraviti greške označene križićem, a ne uskličnikom, jer te greške nisu toliko bitne. Također, prije nego što popravite bilo šta, uradite ovo, jer postoji velika vjerovatnoća da ćete to pokvariti. Nakon što potpuno očistite kod, preporučujem vam da pogledate kako se vaša stranica prikazuje u različitim pretraživačima na različitim PC i telefonskim platformama. Besplatna online usluga browsershots.org može vam pomoći u tome.
Kako inače možete brzo provjeriti valjanost html i CSS koda vaše stranice?Ako vam jigsaw.w3.org nije bio dovoljan, evo još nekoliko za vas dodatne usluge da proverite validnost html kod web stranica: www.validome.org, watson.addy.com,
U zaključku želim da kažem da ako nađete par grešaka u sebi, onda ne morate da brinete o tome, jer to danas nije toliko važno. Općenito, eksperimenti su se provodili na ovu temu već duže vrijeme, iz kojih je postalo jasno da loše valjan kod ne utječe na rezultate pretraživanja web stranice. Ali, nažalost, internet je okruženje u kojem se sve brzo mijenja. Danas to možda nije važno, ali sutra će Yandex sebi dodati ovaj dodatni algoritam i pozicije pretraživanja mogu opasti (pasti). Dakle, ako imate dodatnog vremena za petljanje s kodom svoje stranice, bolje je to učiniti sada.
Vlad Merzhevich
Postoji mnogo načina i metoda za provjeru web stranica na greške i komentare. Uobičajeno se dijele na online i lokalne. One na mreži su dizajnirane za provjeru stranica pomoću pretraživača preko Interneta, a lokalne se koriste za provjeru dokumenata na trenutnom računaru. Zatim ćemo razmotriti popularne metode provjere valjanosti dokumenata.
validator.w3.org Instaliranje ekstenzijeNakon preuzimanja datoteke, ekstenziju možete instalirati na nekoliko načina.
1. Preko upravitelja ekstenzija
Pokrenite Firefox i idite na Alati > Ekstenzije. Prevucite preuzetu datoteku (ima ekstenziju xpi) u prozor koji se otvori. Zatim će ekstenzija biti automatski instalirana.
2. Otvaranjem datoteke
Odaberite File > Open File... iz Firefox menija i odredite putanju do datoteke sa ekstenzijom, pretraživač će sam izvršiti dalje radnje.
3. Kopirajte datoteku u fasciklu sa ekstenzijom
Otvorite folder na disku na kojem je instaliran Firefox (na primjer, c:\Program Files\Mozilla Firefox) i u njemu pronađite podmapu ekstenzije u koju kopirajte ekstenziju. Nakon pokretanja pretraživača, dalja instalacija će se odvijati nezavisno.
Sve gore navedene metode instalacije zahtijevaju ponovno pokretanje pretraživača nakon instaliranja ekstenzije. HTML Validator počinje da radi odmah nakon što ponovo pokrenete Firefox.
Ako ove metode iz nekog razloga nije pomoglo, možete otići na stranicu za podršku pretraživača Mozilla Firefox i pročitati o svemu moguće metode ugradnja ekstenzija na
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
Kada otvorite web stranicu, HTML Validator odmah počinje sa radom, a rezultat provjere se prikazuje u statusnoj traci, u njenom donjem desnom uglu u obliku male slike. Slika zavisi od statusa verifikacije i prikazana je na Sl. 14.6.
Rice. 14.6. Vrste slika koje se prikazuju prilikom provjere dokumenta
Krug sa kvačicom (slika 14.6a) označava da je dokument validan, žuti trougao sa uzvikom (slika 14.6b) označava da postoje komentari na kodu koji se mogu automatski ispraviti. A crveni krug sa krstom (slika 14.6c) upozorava da postoje ozbiljne greške.
Postoje dva načina za pregled svih grešaka. Prvo pogledajte HTML kod dokumenta kroz meni Pogled > Izvorni kod stranice ili kliknite desnim tasterom miša i izaberite Pogled iz kontekstnog menija izvorni kod stranica (slika 14.7).
Rice. 14.7. Kontekstni meni sa opcijom odabira izvornog koda
Prozor izvornog koda web stranice podijeljen je na tri dijela (slika 14.8), gdje gornji blok sadrži stvarni HTML kod. Donji lijevi blok prikazuje listu grešaka i komentara ili informativnih poruka u slučaju da je dokument važeći. Donji desni blok je namijenjen za detaljne savjete o trenutnim komentarima.
Rice. 14.8. Rezultat ekstenzije HTML Validator
Možda se svaka osoba koja je aktivno zainteresirana za razvoj i promociju internetskih resursa na pretraživačima barem jednom susrela s pojmom "važenje koda web stranice". Dakle, šta znači tako tajanstvena, na prvi pogled, fraza?
Valjani kod znači korištenje jezika za označavanje hiperteksta (HTML) na web lokaciji koja je u potpunosti usklađena sa svim pravilima i standardima World Wide Web Consortiuma (ili skraćeno W3C).
Strogo pridržavanje svih ovih pravila i standarda daje sajtu niz prednosti, a to su: kompatibilnost među pretraživačima (ispravan prikaz stranica stranice u svim popularnim pretraživačima), povećana brzina učitavanja web stranica, pozitivna percepcija resursa od strane pretraživača i drugi faktori.
Sa razvojem elektronike, koja u poslednjih godina kreće se velikom brzinom, zahtjevi za valjanost kao jedan od kriterija kvalitete internetskih resursa postaju sve stroži. To je prvenstveno zbog pojave velikog broja mobilnih gadžeta s ekranima različitih veličina. I podrazumjeva se da web stranica s važećim kodom treba biti prikazana što je moguće korektnije na bilo kojem pametnom telefonu ili tabletu.
Kako provjeriti valjanost koda stranice?Da biste provjerili strukturu i čistoću koda (važnost), trebali biste koristiti jedan od mnogih online provjera (validatora). Također možete provjeriti valjanost koda stranice na službenoj web stranici World Wide Web Consortiuma:
validator.w3.org za HTML validnost i jigsaw.w3.org/css-validator za CSS validnost.
Usluga validator.w3.org omogućava provjeru valjanosti jezika za označavanje hiperteksta na jedan od tri predložena načina:
Da biste odabrali željeni način provjere valjanosti koda, potrebno je samo prijeći na odgovarajuću karticu:
U nastavku ću, koristeći jasan primjer, pokazati rezultate provjere valjanosti tako popularnog resursa među programerima i SEO-ima kao što je Habrahabr. Da biste to učinili, umetnite URL stranice u odgovarajuće polje validatora i kliknite na dugme PROVERI. Voila! Samo nekoliko sekundi i validator nam daje rezultat:
Rezultat je vrlo pristojan, jer će prilikom provjere validnosti velike većine stranica biti stotine, a ponekad i hiljade grešaka.
Kako popraviti greške koda?Ako je, prilikom provjere valjanosti vašeg izvornog koda, pronađen veliki broj greške, onda ni pod kojim okolnostima ne treba da budete uznemireni. Ako samo zato što nema toliko stranica koje su u potpunosti u skladu s pravilima i standardima W3C-a. I sve greške se mogu ispraviti prilično brzo. I često se to može učiniti čak i bez vanjske pomoći.
Po završetku provjere koda web stranice, validator izdaje listu svih grešaka i prijetnji sa detaljnim objašnjenjima i uputama za njihovo otklanjanje. Sve ovo je popraćeno primjerima, pa ispravljanje grešaka koda neće biti teško ni početniku.
Utječe li valjanost koda na optimizaciju pretraživača?Valjanost koda je jedan od pokazatelja kvaliteta sajta, ne samo zato što garantuje kompatibilnost resursa sa više pretraživača, povećanu brzinu učitavanja i tako dalje. Činjenica je da je čist i strukturiran HTML kod jedna od najvažnijih komponenti kompetentne interne optimizacije web stranice. A razlozi za to su sasvim očigledni:
- pretraživači u algoritmima za rangiranje, pod svim ostalim jednakim uslovima, daju prednost kvalitetnijim sajtovima;
- važeći kod se lako i brzo obrađuje, a vjerovatnoća da ga botovi za pretragu pogrešno pročitaju je minimalna.
Nesumnjivo treba poraditi na greškama u kodu, ali greške mogu biti različite, ne mogu sve dovesti do lošeg rangiranja stranice, ako nemate +100500 ili više grešaka, onda to nije razlog za brigu! Ispravite one koje vi (kao vlasnik vaše stranice) smatrate najopasnijim. Ovo je moje lično mišljenje i možda ne delim mišljenje bilo koga od čitalaca.
A evo što Google misli o valjanosti koda web stranice. Zvaničan stav pretraživača o uticaju validnosti koda na optimizaciju pretraživača predstavljen je u ovom kratkom videu.