Kako postaviti pametne telefone i računala. Informativni portal

Kako promijeniti WordPress temu. Web Inspektor

Dizajneri provode sate bruseći svoje umijeće kako bi pomno dotjerali i najsitnije detalje u dizajnu web stranica koje izlaze iz njihova pera. Međutim, kvaliteta koda vrlo često ostaje vrlo niska. Trebate li dokaz? Pogledajte galerije besplatni predlošci CSS. 90% predložaka neće proći test. Štoviše, većina pogrešaka je vrlo primitivna i vrlo je lako popraviti. U ovu lekciju smatrati tipične greške u HTML kodu koji sprječava uspješan završetak provjere valjanosti.

Zašto provjeriti kod?

Ako stranica izgleda sjajno u pregledniku, zašto onda provjeravati kod? Tipično pitanje koje se postavlja prije pregleda koda. Ali stranica nije ograničena na ono što je vidljivo korisniku. HTML stranice dizajniran za predstavljanje podataka, ne grafički efekti. Podaci moraju biti čitljivi od strane cijele ogromne zajednice ljudi koja koristi internet. Čitatelji 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 što je napisano na vašoj stranici.

HTML stranica koja je bez grešaka općenito će se ispravno prikazati u većini preglednika i također će biti usklađena s budućim tehnologijama. Ovdje je vrijedno spomenuti tražilice čiji je rad vrlo važan za SEO potrebe. Nitko im ne želi stvarati prepreke, a čist i ispravan kod mnogo je lakši za botove za pretraživanje.

Riječ je i o profesionalnosti. Nevažeći HTML kod vrlo je sličan gramatičke greške u natpisima na stranici. I iako klijent možda neće primijetiti pogreške u kodu, to ne mijenja bit problema. Nitko ne voli gramatičke pogreške u dizajnu, ali iz nekog razloga ostavljanje HTML koda s pogreškama ne smatra se istim sramotnim činom.

Uobičajene pogreške

Ispod su greške koje su uhvaćene u predlošcima s prve stranice poznate galerije Predložak CSS. Mnoge stranice izgledaju sjajno, pa čak i sjajno, ali vrlo često kvaliteta koda ne odgovara kvaliteti dizajna. Iako se većina ovih grešaka može vrlo brzo i jednostavno popraviti.


Najgora greška je ne koristiti Vrsta dokumenta! Nedostaje oznaka Vrsta dokumenta znači da će preglednik "pogoditi" koji je jezik korišten za izradu dokumenta. Da biste ispravili pogrešku, morate odrediti vrstu dokumenta svoje stranice.

Element nije zatvoren


Ako ste otvorili oznaku negdje u svom HTML dokumentu, ona mora biti zatvorena na odgovarajućem mjestu. Zaborav u ovo pitanje ne samo da dovodi do pogrešaka u pregledu koda, već može uzrokovati i ozbiljne probleme s predloškom. Slika prikazuje situaciju kada je autor zaboravio zatvoriti oznaku

Izostavljanje / u samozatvarajućim elementima


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

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

Posebni znakovi nisu konvertirani


Nekonvertirani znakovi u URL-u


U skladu s prethodni stavak, Posebni simboli, posebno ampersand, moraju biti kodirani u URL nizovima. Veze 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 u tome blok elementi NIKADA ne bi trebao biti unutar inline elemenata.

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

banane

je blok element, pa se mora omotati oko veze (umetnuti element):

banane

.

Na slici nedostaje alt atribut


Svaka slika u HTML dokumentu mora imati atribut alt opisujući sadržaj 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="" . Inače, morate dati opis sadržaja slike.

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


Vjerojatno je ova situacija obrnuta strana raširena upotreba WYSIWYG urednici, koji imaju tendenciju umetanja suvišnog HTML koda. Atributi širine i visine definirani su u prijelaznim vrstama dokumenata, ali ako ste se odlučili striktno slijediti standarde, onda vjerojatno znate da sve atribute odgovorne za prezentaciju elemenata na stranicama treba prenijeti u tablicu css stilova, za odvajanje sadržaja i dizajna.

Naziv ili ID razreda počinje brojem


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

Kakva je situacija s provjerom valjanosti CSS koda?


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

Deklaracija vrste dokumenta odnosi se na pravila označnog jezika - kako bi preglednik ispravno prikazao sadržaj dokumenta.

Različite vrste HTML dokumenta

Deklaracija vrste dokumenta nije HTML oznaka; to je uputa web pregledniku o verziji označnog jezika na kojem je stranica napisana.

Deklaracija vrste dokumenta odnosi se na "Definiciju vrste dokumenta" ili "Definiciju vrste dokumenta" (DTD). DTD postavlja pravila za označni jezik tako da preglednici ispravno prikazuju sadržaj.

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

Savjet: Uvijek dodajte vrstu dokumenta svojim stranicama. To pomaže preglednicima da ispravno generiraju 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 središte). Okviri nisu dopušteni:

Vrsta dokumenta "HTML 4.01 Frameset"

Ovaj DTD je ekvivalentan "HTML 4.01 Transitional", ali dopušta korištenje 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 atribut src", "prvo dolazi oznaka head, a zatim tijelo" i tako dalje. Ali nisam sve to smislio u hodu, nego sam se vodio određenim propisom, čiji je autor organizacija koja zapravo smišlja i odobrava sve standarde, tzv. W3C(Konzorcij Svjetska mreža). Nisam to prije 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 stoji mirno, već se stalno razvija.

A ako u ranim verzijama 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 vrsta ukrasnog elementa koji postavlja izgled i dojam – analogno pločicama i tapetama, ako razmišljate o stvaranju stranice kao o izgradnji kuće. S tim u vezi, u novim HTML standardima, neke oznake i atributi odgovorni za dizajn proglašeni su nepoželjnim (deprecated). Odnosno, trenutna specifikacija standarda ih podržava, ali podrška će biti ukinuta u sljedećoj.

Postoji još stroži standard tzv XHTML, - on uopće ne trpi slobode s kodeksom i ne oprašta greške. Najnovije na ovaj trenutak- ovo HTML 5, budućnost pripada njemu, pa ćemo mu u budućnosti biti jednaki.

S ovim bi, čini se, sve trebalo biti jasno – ima nekoliko standarda i super je. No, u isto vrijeme, postoje preglednici čiji je zadatak da HTML obrada koda, a preglednik ne može uvijek razumjeti u skladu s kojim standardom pišemo i na što je točno korisnik mislio i, sukladno tome, kako bi taj kod trebao biti prikazan. Bilo da koristimo prijelazni HTML (prijelazni), i preglednik nam oprašta mnoge pogreške, koristeći "sparing mode", ili koristimo način stroge kompatibilnosti XHTML-a i pogreške se moraju postupati sa svom strogošću. Drugim riječima, preglednik se suočava s teškim zadatkom.

Što preglednik radi u ovom slučaju? Prikazuje kod u načinu rada kompatibilnost unatrag , - izglađuje sve eksplicitne i implicitne pogreške u kodu i pokušava predvidjeti što je više moguće što je korisnik mislio. Ali postoje neki očiti nedostaci: prvo, preglednik ne može znati što je osoba izvorno mislila. Drugo, ovaj način kompatibilnosti može raditi drugačije za svaki preglednik. Što ćemo završiti? Postoji kod i nema propisa - u praksi to znači da će ista oznaka, u načinu kompatibilnosti, biti različito prikazana od strane preglednika. Stoga nam je potreban neki način da pregledniku damo do znanja koji standard ćemo koristiti.

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

U kodu je deklaracija tipa postavljena ovako:

Ovom linijom dajemo pregledniku do znanja da će naša stranica koristiti HTML način rada 5. Ovaj redak se umeće na samom početku dokumenta. Probajte ovo u svom test HTML datoteka.

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. No, unatoč tome, često se nalazi i vrijedno je znati o tome.

Sada ću objasniti zašto je sve to potrebno. Ovom linijom postavljamo određeni standard prema kojem bi preglednik trebao prikazati naš dokument u prozoru preglednika. U praksi to znači da će naš HTML kod biti manje-više isti u svim preglednicima. Sve to bilo bi nemoguće postići ako bismo radili u načinu kompatibilnosti unatrag ( hirovitenačin rada), koji se uključuje ako je deklaracija vrste dokumenta izostavljena. U mojoj praksi izgleda stranice, ovo je bilo jako važno. Jer ad DOCTYPE, na kraju riješio problem prikaza iste stranice u svim preglednicima.

Provjera valjanosti dokumenta.

Naravno, ako želimo sami sebe provjeriti jesmo li negdje pogriješili u poštivanju određenih standarda, ne moramo to činiti ispitujući naš kod očima. Sve je to već dugo automatizirano, jer postoji provjeravač, zahvaljujući kojem možemo saznati jesmo li napravili očite pogreške u našem označavanju.

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

  1. Navedite pravu stranicu.
  2. Prenesite datoteku sa svog računala.
  3. Zalijepite izravno kod koji želite provjeriti u odgovarajuće polje.

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

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

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

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

1. Korištenje eksperimentalne značajke: HTML5 Conformance Checker

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

2. Na razini dokumenta nije deklarirano nijedno kodiranje znakova

Dokument ne govori ni riječi o tome koje se kodiranje koristi. Doista, uostalom, nismo to eksplicitno naveli, što znači da nije činjenica da će preglednik umjesto prikaza ruskih slova prikazati neke kineske znakove. To se događa zato što se preglednik, prilikom prikaza dokumenta, nekima vodi tablica kodova(odnosno, kodiranje), pri čemu 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 pregledniku treba reći koje kodiranje treba koristiti. Ako se to ne učini, preglednik će i dalje pokušati sam pogoditi. Ali ne postoji apsolutno nikakvo jamstvo da će to učiniti kako treba.

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

Program upozorava da prema zadanim postavkama koristi utf-8.

Pa, onda ne preostaje ništa drugo nego deklarirati kodiranje koje koristimo. Radi se ovako:

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

Označiti meta spada u kategoriju servisnih oznaka, to nekako govori da postoje neke informacije o stranici koje želimo reći pregledniku. Ona, kao i svaka druga oznaka, ima atribute:

http-ekviv je atribut, u čijoj vrijednosti navodimo naziv zaglavlja.

sadržaj 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 pregledniku da ćemo prijaviti koju vrstu ima naš dokument. I također koje se kodiranje koristi u njemu.

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

Pokušajte ponovno potvrditi stranicu. Sada ne bi trebalo biti poruka upozorenja. Ali 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 trebao bi imati samo elemente na razini bloka. I već u njima mogu biti mala slova.

Primjera pogrešaka može biti mnogo, ali je problematično sve ih navesti u jednom članku. Međutim, ako ste tijekom provjere naišli na neku drugu pogrešku, napišite o tome u komentarima - zajedno ćemo to shvatiti.

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

Za komentiranje morate se registrirati.

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 specijaliziranom, s isticanjem koda (Bilježnica++, vizualni 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 (uz rijetke iznimke).

Početna oznaka pokazuje gdje element počinje, završava - gdje završava. Završna oznaka formirano 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 pohraniti sadržaj izravno, on se zapisuje kao vrijednost atributa, na primjer, oznaka stvorit će gumb s tekstom Dugme u.

Oznake se mogu ugniježditi jedna u drugu, na primjer,

Tekst

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

Tekst

.

HTML elementi mogu imati atribute (globalne, primijenjene na sve HTML elemente i vlastite). Atributi su zapisani u početnoj oznaci elementa i sadrže naziv i vrijednost specificiranu u atributu formata name="value" . Atributi vam omogućuju promjenu svojstava i ponašanja elementa za koji su postavljeni.

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

Vrhunski povezani članci