Kako podesiti pametne telefone i računare. Informativni portal

Kako promijeniti WordPress temu. Web Inspector

Dizajneri provode sate usavršavajući svoj zanat kako bi pomno fino podesili i najsitnije detalje u dizajnu web stranica koji izlaze iz njihovog pera. Međutim, kvalitet koda vrlo često ostaje vrlo nizak. Treba li vam dokaz? Pogledajte galerije besplatni šabloni CSS. 90% šablona će pasti na testu. Štaviše, većina grešaka je vrlo primitivna i vrlo je lako popraviti. V ovu lekciju razmotriti tipične greške u HTML kodu koji sprečava da se validacija uspešno završi.

Zašto provjeriti kod?

Ako stranica izgleda odlično u pretraživaču, zašto onda provjeriti kod? Tipično pitanje koje se postavlja prije pregleda koda. Ali stranica nije ograničena na ono što je vidljivo korisniku. HTML stranice dizajniran da predstavlja podatke, ne grafički efekti. Podaci moraju biti čitljivi za čitavu ogromnu zajednicu ljudi koja koristi internet. Čitaoci mogu koristiti vrlo različite tehnologije kako bi dobili informacije predstavljene na vašoj stranici - na primjer, mogu koristiti program za reprodukciju podataka glasom i samo slušati ono što je napisano na vašoj stranici.

HTML stranica koja je bez grešaka općenito će se ispravno prikazati u većini pretraživača i također će biti usklađena s budućim tehnologijama. Ovdje je vrijedno spomenuti pretraživače, čiji je rad veoma važan za SEO svrhe. Niko ne želi da im stvara prepreke, a čist i ispravan kod je mnogo lakši za botove za pretragu.

To je i pitanje profesionalizma. Nevažeći HTML kod je vrlo sličan gramatičke greške u natpisima na sajtu. I iako klijent možda neće primijetiti greške u kodu, to ne mijenja suštinu problema. Niko ne voli gramatičke greške u dizajnu, ali se iz nekog razloga ostavljanje HTML koda s greškama ne smatra istim sramotnim činom.

Uobičajene greške

Ispod su greške koje su uhvaćene u šablonima sa prve stranice poznate galerije Template CSS. Mnoge stranice izgledaju sjajno, pa čak i sjajno, ali vrlo često kvalitet koda ne odgovara kvaliteti dizajna. Iako se većina ovih grešaka može vrlo brzo i lako popraviti.


Najgora greška je ne koristiti Doctype! Nedostaje oznaka Doctype znači da će pretraživač "pogoditi" koji jezik je korišten za kreiranje dokumenta. Da biste ispravili grešku, morate navesti vrstu dokumenta vaše stranice.

Element nije zatvoren


Ako ste otvorili oznaku negdje u svom HTML dokumentu, ona mora biti zatvorena na odgovarajućem mjestu. Zaborav u ovaj problem ne samo da dovodi do grešaka u pregledu koda, već može izazvati i ozbiljne probleme sa šablonom. Na slici je prikazana situacija kada je autor zaboravio zatvoriti tag

Izostavljanje / u samozatvarajućim elementima


Većina HTML elemenata ima zasebne završne oznake, poput ove:

. Ali postoje elementi kao što su input, img i meta koji se samozatvaraju, što znači da moraju imati / prije zagrade.

Specijalni znakovi nisu konvertovani


Nekonvertirani znakovi u URL-u


U skladu sa prethodni stav, Posebni simboli, posebno ampersand, moraju biti kodirani u URL stringovima. Linkovi na web stranice napravljene s koristeći PHP, često sadrže varijable pomoću simbola & , moraju biti napisane pomoću HTML koda & .

Blokirajte elemente unutar inline elemenata


Jedan od glavnih HTML pravila stvar je blok elementi NIKADA ne bi trebao biti unutar inline elemenata.

Popularan primjer greške je korištenje veze u naslovu:

banane

je blok element, tako da se mora omotati oko veze (inline element):

banane

.

Na slici nedostaje alt atribut


Svaka slika u HTML dokumentu mora imati alt atribut opisivanje sadržaja slike. Čak i ako je slika za potrebe dizajna, ona mora imati atribut alt, ali in ovaj slučaj mora ostati prazan, na primjer, alt="" . U suprotnom, morate dati opis sadržaja slike.

Korištenje atributa kao što su širina i visina


Vjerovatno je ova situacija poleđinaširoku upotrebu WYSIWYG urednici, koji imaju tendenciju umetanja suvišnog HTML koda. Atributi širine i visine definirani su u prijelaznim tipovima dokumenata, ali ako se odlučite striktno slijediti standarde, onda vjerojatno znate da sve atribute odgovorne za prezentaciju elemenata na stranicama treba prenijeti u tabelu css stilovi, za razdvajanje sadržaja i dizajna.

Naziv razreda ili ID počinje brojem


Ime klase, ID ili ime atributa ne može početi brojem. Mogu uključivati ​​brojeve, ali ne na početku riječi.

Kakva je situacija sa validacijom CSS koda?


Za razliku od HTML-a, CSS je navikao vizuelna prezentacija stranice. Dakle, pitanje "Ako stranica izgleda dobro, zašto provjeriti kod?" u ovom slučaju zvuči uvjerljivije. Pogrešan CSS kod nema isti uticaj na web stranice kao pogrešan kod HTML. Međutim, treba izvršiti provjeru kako bi se otkrile greške u kucanju i greške u kodu. Ako koristite nova CSS3 svojstva, oni će učiniti da vaš dokument ne prođe validaciju jer još nisu uključeni u specifikaciju, ali ako ste sigurni da je sve ispravno, onda se takve greške mogu zanemariti.

Deklaracija tipa dokumenta se odnosi na pravila jezika za označavanje - kako bi pretraživač ispravno prikazao sadržaj dokumenta.

Različite vrste HTML dokumenta

Deklaracija vrste dokumenta nije HTML oznaka; to je instrukcija web pretraživaču o verziji jezika za označavanje na kojoj je stranica napisana.

Deklaracija tipa dokumenta odnosi se na "Definiciju tipa dokumenta" ili "Definiciju tipa dokumenta" (DTD). DTD postavlja pravila za jezik za označavanje tako da pretraživači ispravno prikazuju sadržaj.

Deklaracija tipa dokumenta mora biti prva u HTML dokumentu, prije oznake .

savjet: Uvijek dodajte tip dokumenta na svoje stranice. Ovo pomaže pretraživačima da ispravno prikazuju stranicu!

Vrsta dokumenta "HTML 4.01 Strict"

Definicija vrste dokumenta (DTD) sadrži sve HTML elementi i atribute, ali NE uključuje reprezentativne i zastarjele elemente (kao što su font i centar). Framesetovi nisu dozvoljeni:

Vrsta dokumenta "HTML 4.01 Frameset"

Ovaj DTD je ekvivalentan "HTML 4.01 Transitional", ali dozvoljava upotrebu okvira:

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

Često sam davao izjave u svojim lekcijama kao što su - "jedna oznaka mora biti smještena unutar druge", "img tag mora imati src atribut", "prvo dolazi oznaka head, a zatim tijelo" i tako dalje. Ali nisam sve ovo smislio u hodu, nego sam se vodio određenim propisom čiji je autor organizacija koja zapravo donosi i odobrava sve standarde, tzv. W3C(Konzorcijum World Wide Web). Nisam ovo ranije spomenuo, ali postoji nekoliko standarda za pisanje HTML-a. I svaki od njih ima svoje karakteristike i pravila pisanja. To je zbog činjenice da HTML ne miruje, već se stalno razvija.

I ako uđe rane verzije standard kada nije bilo tehnologije css, uz pomoć jezika za označavanje bilo je moguće kreirati i strukturu i dizajn, sada je trend potpuno drugačiji - HTML se više povezivao sa strukturom (temelj i cigle) na kojoj dizajn počiva. CSS je ovdje neka vrsta dekorativnog elementa koji postavlja izgled i osjećaj – analogno pločicama i tapetama, ako razmišljate o kreiranju stranice kao o izgradnji kuće. S tim u vezi, u novim HTML standardima, neki tagovi i atributi odgovorni za dizajn su proglašeni nepoželjnim (deprecated). Odnosno, trenutna specifikacija standarda ih podržava, ali podrška će biti ukinuta u sljedećem.

Postoji još stroži standard tzv XHTML, - on uopće ne toleriše slobode sa kodeksom i ne oprašta greške. Najnovije na ovog trenutka- to HTML 5, budućnost pripada njemu, tako da ćemo u budućnosti biti jednaki s njim.

Uz ovo, čini se da bi sve trebalo biti jasno - postoji nekoliko standarda i to je odlično. Ali u isto vrijeme, postoje pretraživači čiji je zadatak da HTML obrada koda, a pretraživač ne može uvijek razumjeti u skladu s kojim standardom pišemo i na šta je korisnik točno mislio i, shodno tome, kako bi ovaj kod trebao biti prikazan. Bilo da koristimo prelazni HTML (Tranzicioni), i pretraživač nam oprašta mnoge greške, koristeći "sparing mode", ili koristimo režim stroge kompatibilnosti XHTML i greške se moraju tretirati sa svom strogošću. Drugim riječima, pretraživač se suočava sa teškim zadatkom.

Šta pretraživač radi u ovom slučaju? Prikazuje kod u modu kompatibilnost unatrag , - izglađuje sve eksplicitne i implicitne greške u kodu i pokušava predvidjeti što je više moguće što je korisnik mislio. Ali postoje neki očigledni nedostaci: prvo, pretraživač ne može znati šta je osoba prvobitno mislila. Drugo, ovaj način kompatibilnosti može raditi drugačije za svaki pretraživač. Šta ćemo završiti? Postoji kod i nema propisa - u praksi to znači da će ista oznaka, u režimu kompatibilnosti, biti različito prikazana od strane pretraživača. Stoga nam je potreban neki način da omogućimo pretraživaču koji standard ćemo koristiti.

I zaista postoji takav način, zove se - dodavanje definicije tipa dokumenta.

U kodu je deklaracija tipa postavljena ovako:

Ovom linijom obavještavamo pretraživač da će naša stranica koristiti HTML mod 5. Ovaj red se ubacuje na sam početak dokumenta. Probajte ovo u svom test HTML fajl.

Na mnogim stranicama još uvijek možete pronaći ovu liniju:

Ovaj niz znači da se koristi standard HTML 4.01. Ali nećemo ga koristiti jer je zastario. Ali ipak, često se nalazi i o tome vrijedi znati.

Sada ću objasniti zašto je sve ovo potrebno. Ovom linijom postavljamo određeni standard prema kojem pretraživač treba da prikaže naš dokument u prozoru pretraživača. U praksi to znači da će naš HTML kod biti manje-više isti u svim pretraživačima. Sve ovo bilo bi nemoguće postići ako bismo radili u režimu kompatibilnosti unatrag ( quirksnačin rada), koji je uključen ako je deklaracija tipa dokumenta izostavljena. U mojoj praksi postavljanja stranica, ovo je bilo zaista važno. Jer ad DOCTYPE, na kraju je riješio problem prikaza iste stranice u svim pretraživačima.

Validacija dokumenta.

Naravno, ako želimo sami sebe provjeriti jesmo li negdje pogriješili u pridržavanju određenih standarda, ne moramo to činiti tako što ćemo naš kod pregledati očima. Sve je to odavno automatizirano, jer postoji čekker, zahvaljujući kojem možemo saznati da li smo napravili neke očigledne greške u našem označavanju.

Na ovoj stranici možemo pronaći nekoliko načina za provjeru:

  1. Navedite pravi sajt.
  2. Otpremite fajl sa svog računara.
  3. Zalijepite direktno kod koji želite provjeriti u odgovarajuće polje.

U našem slučaju, druga ili treća opcija je najvjerovatnije prikladna.

Ja sam lično koristio treću metodu. Moj dokument je uspješno potvrđen, što je program prijavio sa linijom Ovaj dokument je uspješno provjeren kao HTML5! na zelenoj pozadini.

U suprotnom, natpis će biti prikazan na crvenoj pozadini. To će značiti da smo negde pogrešili. Zapravo, sam program će pokazati gdje i na kojoj liniji smo pogriješili i u čemu tačno, iako na engleskom.

Ali u mom slučaju, program mi je, osim što je objavio da je validacija uspješna, dao i tri upozorenja:

1. Korištenje eksperimentalne funkcije: HTML5 Conformance Checker

Činjenica je da HTML 5 standard još uvijek nije formalno odobren od strane konzorcija, koji nastavlja sa uvođenjem novih korisni čips. Ali u praksi sve više velika količina programeri počinju da ga koriste sada da bi bili spremni za sutra.

2. Nije deklarirano kodiranje znakova na nivou dokumenta

Dokument ne kaže ni riječi o tome koje se kodiranje koristi. Zaista, na kraju krajeva, nismo to eksplicitno naznačili, što znači da nije činjenica da će pretraživač umjesto prikazivanja ruskih slova prikazati neke kineske znakove. Ovo se dešava zato što se pretraživač, prilikom prikazivanja dokumenta, rukovodi nekim tablica kodova(tj. kodiranje), gdje je svakom slovu dodijeljeno odgovarajuće simbol koda. Ali činjenica da u jednom kodiranju jedan broj znači jedno slovo, u drugom može značiti neku vrstu japanskog hijeroglifa. Stoga, pretraživaču treba reći koje kodiranje da koristi. Ako se to ne učini, pretraživač će i dalje pokušati sam pogoditi. Ali ne postoji apsolutno nikakva garancija da će to učiniti kako treba.

3. Korištenje načina direktnog unosa: pretpostavlja se UTF-8 kodiranje znakova

Program upozorava da podrazumevano koristi utf-8.

Pa, onda ne preostaje ništa drugo nego da deklariramo kodiranje koje koristimo. To se radi ovako:

Sama linija mora biti ugniježđena unutar elementa glave.

Tag meta pripada kategoriji servisnih oznaka, to na neki način govori da postoje neke informacije o stranici koje želimo reći pretraživaču. Ona, kao i svaka druga oznaka, ima atribute:

http-equiv je atribut, u čijoj vrijednosti navodimo ime zaglavlja.

sadržaja je atribut čiju vrijednost specificiramo vrijednost zaglavlja, u ovom slučaju vrijednost zaglavlja tipa sadržaja.

Pogledajmo sada vrijednosti atributa koje smo upravo naveli:

sadržaj-tip- kažemo pretraživaču da ćemo prijaviti koji tip ima naš dokument. I također koje se kodiranje koristi u njemu.

tekst/html;charset=utf-8 je tekst/html dokument koji koristi utf-8 kodiranje.

Pokušajte ponovo potvrditi stranicu. Sada ne bi trebalo biti poruka upozorenja. Ali oni i dalje mogu ostati, ali iz drugog razloga. Na primjer:

1. Koristite slike u svom dokumentu i u svojoj oznaci img atribut nije postavljen alt.

2. Inline element je ugniježđen unutar elementa tijela. Prema specifikaciji, element tijela bi trebao imati samo elemente na nivou bloka. I već u njima mogu biti mala slova.

Može biti mnogo primjera grešaka, ali je problematično sve ih navesti u jednom članku. Međutim, ako ste tokom validacije naišli na neku drugu grešku, napišite o tome u komentarima - zajedno ćemo to otkriti.

  • < Назад
  • Sljedeća >

Da biste komentarisali, morate se registrovati.

Osnove HTML-a sadrže osnovna pravila HTML jezik, opis strukture HTML stranice, odnosi u strukturi HTML dokumenta između HTML elemenata.

HTML dokument je normalan Tekstualni dokument, može se kreirati kao i obično uređivač teksta (bilježnica), a u specijalizovanom, sa isticanjem koda (Notepad++, vizuelni studio kod, itd.). HTML dokument ima ekstenziju .html.

HTML dokument se sastoji od stabla HTML elemenata i teksta. Svaki element je identificiran u izvornom dokumentu početnom (otvaranjem) i završnom (završnom) oznakom (sa rijetkim izuzecima).

Start tag pokazuje gdje element počinje, kraj - gdje se završava. Oznaka za zatvaranje formiran dodavanjem kose crte / ispred naziva oznake:<имя тега> … . Između početne i završne oznake nalazi se sadržaj oznake – sadržaj.

Pojedinačne oznake ne mogu direktno pohranjivati ​​sadržaj, on se piše kao vrijednost atributa, na primjer, oznaka kreiraće dugme sa tekstom Dugme unutra.

Oznake mogu biti ugniježđene jedna u drugu, na primjer,

Tekst

. Prilikom ulaganja morate pratiti redoslijed njihovog zatvaranja (princip "matrjoške"), na primjer, sljedeći unos bi bio netačan:

Tekst

.

HTML elementi mogu imati atribute (globalne, primijenjene na sve HTML elemente i njihove vlastite). Atributi se upisuju u početnu oznaku elementa i sadrže ime i vrijednost specificiranu u formatu atributa name="value" . Atributi vam omogućavaju da promijenite svojstva i ponašanje elementa za koji su postavljeni.

Svaki element može imati više vrijednosti klase i samo jednu vrijednost ID-a. Višestruke vrijednosti klasa se upisuju s razmakom,

Top Related Articles