Dobrodošli! Tako smo došli do kraja. Pred nama je cijela godina plodonosnog rada, zacrtane su mnoge zanimljive ideje i sada je jedino preostalo da ih oživite 🙂 Možete pratiti tijek događaja i vidjeti kako se sloboda misli izražava na djelu - samo se pretplatite na blog, uvjeravam vas - neće trebati puno vremena ...

Danas mi je zadatak otkriti utječe li na bilo što ispravan izvorni kod koji je prošao test i, ako jest, koliko. I kao i uvijek, čekam vaša mišljenja o ovom pitanju u komentarima.

Prošle godine sam u svojim publikacijama puno pažnje posvetio takvom pojmu kao što je valjanost, vrijeme je da shvatimo koji su. prednosti valjanog HTML-a... Ranije smo zajedno s vama shvatili kako provjeriti valjanost, kao i kanale i još nekoliko zanimljivih točaka.

Četiri glavna čimbenika u korist valjane web stranice

Prvo, sa stopostotnom sigurnošću možemo reći da će se stranice koje su prošle test validatora ispravno prikazati u apsolutno svim modernim preglednicima - a to nije ništa manje važno. Slažem se, nije baš ugodno vidjeti raspored s iskrivljenim elementima ispred sebe. I malo je vjerojatno da će se posjetitelj vratiti na takav blog, gdje njegov autor prezire izgled i.

Drugo, čak i ako razmišljate logično, uklanjajući nepotrebne oznake i ostalo "smeće", smanjujemo težinu stranice i time smanjujemo vrijeme učitavanja stranice, a preglednici troše manje vremena na obradu takvih stranica. Znate, postoji izreka: "Manje riječi, više akcije", ako je preformulišete i primijenite na izradu web stranica, dobit ćete nešto poput "Manje oznaka - više riječi".

I to nisu prazne riječi, svi koji su ikada naišli na probleme s Yandexom dobili su odgovor tehničke podrške: poboljšajte stranicu i radite na njoj. Na primjer, na alatnoj traci Yandex Webmastera možete pronaći pomoć za odjeljak koji sadrži preporuke za izradu web-mjesta.

Ako pažljivo proučite ovaj dokument, paragraf 3 "Izgled" navodi sljedeće:

Pokušajte održati izgled stranice na standardnom nivou

Treće, ako se bavite izradom web stranica kako biste ih naručili ili promovirali, onda vjerojatno trebate znati jezike HTML i CSS, a ako je tako, zašto onda namjerno stvarati pogreške? Osim toga, kupci ponekad postavljaju zadatak izvođaču: koristiti važeći kod, a sukladno tome, cijene će biti puno veće za obavljeni posao.

I, konačno, četvrto, psihološki čimbenik igra važnu ulogu. Lijepo je znati da obavljeni radovi zadovoljavaju određene kriterije i standarde, u našem slučaju standarde World Wide Web Consortiuma. A kao što znate, psihologija je sjajna stvar! Zato je nemojte ignorirati.

Eh, baš je lijepo vidjeti ovakav natpis 😉

U jednom od svojih prethodnih članaka govorio sam o. Međutim, to osim toga ne znaju svi validator za HTML, tamo je validator za CSS također.

Značenje CSS valjanost isto što i HTML: gotovo irelevantno. Slično sa HTML ako napišeš nevažeći CSS, tada neće biti problema (osim ako, naravno, nema velikih pogrešaka), međutim, valjani kod je uvijek dobar. Takav kod je jasan i strukturiran, lako ga je razumjeti, što je također važno, posebno kod ispravljanja, a posebno od strane drugih ljudi. Također CSS valjanost ubrzava proces obrade, a samim time i brzinu učitavanja stranica.

I, konačno, s obzirom na općenito rijetko poštivanje valjanosti, valjani kod uvijek izaziva poštovanje, što je važno ako se time bavite profesionalno.

Do provjerite valjanost CSS-a, morate koristiti ovo W3-usluga: http://jigsaw.w3.org/css-validator/.

Odmah ću vam reći da za razliku od toga HTML, čini CSS valjan mnogo jednostavnije, jer uglavnom postoje samo greške, osim onih koje je najbolje izbjegavati.

Da rezimiram. Uopće nije potrebno učiniti kôd valjanim, ali toplo preporučam da to učinite jer će tražilice lakše indeksirati takvu stranicu ( HTML valjanost), brži za rad, lakši za uređivanje i poštovanje od profesionalaca.

Dobrodošli na besplatni blog za webmastere! Prošli put sam govorio o tome kako provjeriti, a danas predlažem da nastavim temu provjere valjanosti web stranica. Provjerimo Cascading Style Sheets (CSS) i HTML dokumente sa stilskim listovima u odnosu na općeprihvaćene internetske standarde.

Jezik stila CSS razvio je World Wide Web Consortium (W3C), organizacija koja razvija i implementira tehnološke standarde na Internetu.

CSS (od engleskog. Cascading Style Sheets - kaskadni stilski listovi) je formalni jezik dizajniran da opiše izgled dokumenta pomoću jezika za označavanje.

Postoji vrlo korisna usluga za provjeru stilova koju nudi W3C. Idemo na glavnu stranicu usluge CSS validacije i provjerimo valjanost CSS-a.

Tradicionalno, provjerit ću svoj blog za dobar primjer. Slijedimo link, otvara se novi prozor koji izgleda ovako:

Ovdje nas čeka ugodno iznenađenje, sve je na ruskom! Osim toga, postoji mogućnost odabira bilo kojeg drugog jezika od više od 20 dostupnih. Stranica sadrži kartice koje nude odabir opcije provjere:

1. Provjerite po URI-ju - samo navedite adresu stranice;
2. Provjerite prenesenu datoteku - trebate odabrati lokalnu CSS datoteku;
3. Provjerite upisani tekst - trebate unijeti CSS kod kako biste provjerili ispravnost.

Dodatne značajke omogućuju vam određivanje naprednih parametara skeniranja. Evo kratkog sažetka svakog od njih:

• Profil - navodi sve značajke i mogućnosti implementacije na određenoj platformi. Zadani odabir slijedi najčešće korišteni standard CSS3 razine 3.
• Upozorenja - postavljanje detalja izvješća: sva ili najvažnija upozorenja, redovito izvješće, bez prikazivanja upozorenja. Usluga može izdati dvije vrste poruka: pogreške i upozorenja. Ako provjereni CSS ne odgovara preporuci, riječ je o pogrešci. Upozorenja se razlikuju od pogrešaka po tome što nisu specifična za probleme specifikacije.
• Okolina - Odredite gdje se stilovi primjenjuju, na primjer na prijenosnom uređaju, zaslonu, TV-u ili stranici za ispis. Preporuča se da testirate sva stilska okruženja.
• Proširenja provajdera - poželjno je ostaviti zadano, moguće je prikazati samo pogreške ili samo upozorenja. Dobavljači preglednika ponekad implementiraju eksperimentalna CSS svojstva, koristeći prefikse za njihovu podršku: -moz- (za Firefox), -webkit- (za Chrome), -ms- (za Internet Explorer), -o- (za Opera) i druge.

Određujem URL adresu, konfiguriram dodatne parametre provjere i kliknem na gumb "Provjeri" za početak. Ura! Rezultat CSS provjere: nisu pronađene greške!

Nažalost, nismo uspjeli izbjeći upozorenja vezana uz proširenje nepoznatog dobavljača. U redu je, CSS validator je besplatan, pouzdan i koristan uslužni program, ali kao i svaki softver može imati manjkavosti.

Glavna stvar je da stilovi ne sadrže pogreške, a proširenja davatelja najvjerojatnije jednostavno nisu uključena u specifikaciju i uzrokuju upozorenja, ali preglednik ispravno obrađuje podatke.

Imajte na umu da popis upozorenja sadrži broj retka u kojem je pronađeno nepoznato svojstvo. Ako se pronađu pogreške, vidjet ćete tablicu sa svojstvom i opisom problema. Na primjer, početna stranica Yandexa ima sljedeći rezultat provjere:

Ispod su informacije o ispravnom provjerenom CSS-u. Nemojte žuriti da ga kopirate i koristite na svojoj web stranici! Da, u danoj verziji ispravnog CSS-a nema pogrešaka i svojstava, čija upotreba uzrokuje upozorenja, kod će 100% proći punu provjeru. No učinak se postiže uklanjanjem tih svojstava, tako da stranica može imati problema s prikazom ili očekivanja možda neće odgovarati stvarnosti.

Ova usluga je hostirana i održavana na W3C poslužitelju, ali u isto vrijeme nije službeni alat za provjeru CSS valjanosti.

Po želji, koristite kombinirani validator - on provjerava valjanost cijelog dokumenta, kombinirajući HTML i CSS validatore i druge korisne alate na jednoj stranici.

Kada razvijate web stranice, pogledajte najnovije specifikacije i reference kaskadnog lista stilova. Preporučujem korištenje CSS validatora i provjeru vaše stranice, podijelite rezultate u komentarima!

2016-12-29

Animiramo gumbe i provjeravamo ispravnost HTML i CSS koda na stranici

Pozdrav dragi posjetitelju!

Danas ćemo razmotriti, na primjeru kreirane web stranice, kako možete provjeriti valjanost stranice, odnosno usklađenost s utvrđenim specifikacijama HTML i CSS jezika.

Osim toga, prije provjere, napravit ćemo i neku reviziju CSS stylesheeta u dijelu koji se odnosi na „animiranje“ bočnih gumba, gdje ćemo statičke gumbe učiniti interaktivnim, mijenjajući njihov izgled ovisno o stanju – pasivno, aktivno i pritisnuto.

• Izrada gumba trodimenzionalnim
• Učinite gumbe interaktivnim
• Trebate li validaciju
• Kako provjeriti valjanost HTML koda
• Kako provjeriti valjanost CSS koda
• Izvorne datoteke web-mjesta

Izrada gumba trodimenzionalnim

U prethodnom članku stilizirali smo područje glavnog sadržaja tako da odgovara izgledu početne stranice. Istodobno, trenutno se na bočnoj traci nalaze gumbi koji su statični i izgledaju kao običan ravni smeđi pravokutnik sa zaobljenim kutovima.

Ispod je isječak bočne trake s ovim gumbima.

Kako bismo "animirali" gumbe, najprije im damo malo volumena uz pomoć CSS stilova. A to ćemo učiniti pomoću svojstva linearnog gradijenta, koje je prethodno korišteno u dizajnu blokova rotatora, pretraživanja i pretplate.

Vrijednosti linearnog gradijenta definirane su na sljedeći način:

1. Postavit ćemo nijanse boja odozdo prema gore, počevši od tamnije boje od glavne boje gumba. Da bismo odredili koju boju koristiti na početku gradijenta, koristimo alat grafičkog uređivača, u ovom slučaju Photoshop.

Da biste to učinili, s otvorenim dokumentom izgleda dizajna odaberite "Barnik boja", pomaknite pokazivač preko potrebnog područja gumba, definirajte osnovnu boju i zatim upotrijebite alate "Birač boja" za odabir tamnije boje ista smeđa nijansa. U našem slučaju, uzmimo boju s vrijednošću "653939". Kako se to može učiniti jasno je prikazano na snimci zaslona ispod.

2. Zatim definirajte zaustavnu poziciju gradijenta gdje će početna, tamnija boja prijeći u glavnu. Postavite položaj zaustavljanja otprilike u sredini. Istovremeno, da bismo dobili zasićeniju boju, pomaknut ćemo stop poziciju malo gore, i definirati njezinu vrijednost, recimo, 70% visine.

3. Posljednja stvar koju trebate učiniti da biste dodijelili svojstva gradijentu je definirati svjetliju boju od osnovne boje koja će obojiti gumbe na vrhu. To se radi na isti način kao i kod definiranja početne boje gradijenta. U ovom slučaju uzet ćemo vrijednost ove boje kao "b88686".

3. Na temelju primljenih podataka dodajte linearni gradijent na prethodno generirana CSS svojstva gumba.

ulazni: {

visina : 30px;

margina-dno : 10px;

granica-radijus : 5px;

pozadini : # a76d6d;

poravnati tekst : središte;

font-weight : podebljano;

boja : #F F F;

plutati : desno;

pozadinska slika

Može se primijetiti da pri određivanju ekstremnih boja ovdje nisu naznačene zaustavne pozicije, jer pri vrijednostima od 0% i 100% to nije potrebno.

Sada, osvježimo preglednik i vidimo rezultat.

Kao što vidite, gumbi su malo izbočeni. Sada ih možete početi "revitalizirati".

Učinite gumbe interaktivnim

Kako bismo u potpunosti radili s gumbima, učinit ćemo ih interaktivnim, što će vizualno odražavati njihova tri glavna stanja, pasivno (gumb je u početnom stanju), aktivno (kursor lebdi iznad gumba) i pritisnuto (kada je gumb kursor lebdi, tipka miša je pritisnuta i zadržana).

A to ćemo učiniti kombinacijom svojstava sjene i obruba. Bit ove tehnike je da promjenom boje sjene i granica s različitih strana možete postići imitaciju promjene stanja gumba.

Prvo, učinimo to za pasivno stanje i pokušajmo ga prikazati tako da se gumbi izdižu iznad površine.

Boje obruba i sjena birat ćemo na isti način kao u prethodnim slučajevima.

CSS kod nakon odgovarajućih dodataka poprimit će oblik.

ulazni: {

visina : 30px;

margina-dno : 10px;

granica-radijus : 5px;

pozadini : # a76d6d;

poravnati tekst : središte;

font-weight : podebljano;

boja : #F F F;

plutati : desno;

pozadinska slika : linearni gradijent (na vrh, # 653939, # a76d6d 50%, # b88686);

kutija-sjena : 2px 2px 4px 0px # 422a2a;

granica-širina : 2px;

u stilu granice : čvrsta;

obrub-boja : #ddbebe # 241616 # 241616 #ddbebe;

Ovdje se može primijetiti da su granice predstavljene kombinacijom svojstava koja određuju debljinu (širina obruba s vrijednošću 2px), stil (border-style) s vrijednošću koja specificira čvrst obrub i boje (border-color) na svakoj od četiri strane.

Ažurirajmo preglednik i vidimo kako će gumbi sada izgledati.

Kao što vidite, tipke u ovom stanju kao da su se podigle.

Sada pokušajmo da gumbi izgledaju kao pritisnuto stanje. Da bismo to učinili, uklonit ćemo sjenu i promijeniti boju granica. U ovom slučaju koristit ćemo poseban selektor pseudo-klase: hover koji odgovara aktivnom stanju.

CSS za aktivno stanje gumba izgledat će ovako.

ulazni: lebdjeti {

kutija-sjena : nema;

obrub-boja : # a76d6d # a76d6d # a76d6d # a76d6d;

U ovom slučaju ćemo ponovno promijeniti boju obruba i dodati sjenu, samo što će u ovom slučaju biti unutarnja i bez pomaka. Birač pseudo-klase također će se promijeniti u: aktivno, što odgovara pritisnutom stanju.

CSS kod za pritisnuto stanje bit će sljedeći.

ulazni: aktivan {

kutija-sjena : 0px 0px 7px 2px # 422a2a umetak;

obrub-boja : # 777 #fff #fff # 777;

Gumb "Traži" prikazan je u nastavku za usporedbu, gdje možete jasno vidjeti kako mijenja svoj izgled ovisno o stanju.

Slika 8 Pasivno stanje

Ovdje smo završili izgled glavne stranice i doveli je u oblik koji odgovara izgledu dizajna. I sada moramo, kao i prije u svakoj fazi, provjeriti je li unakrsna kompatibilnost u različitim preglednicima. No prije toga provjerimo valjanost stranice, budući da stanje koda može u određenoj mjeri utjecati na međusobnu dosljednost. Stoga ćemo sada izvršiti ovu vrlo potrebnu operaciju.

Trebate li validaciju

Validacija je provjera koda prema utvrđenim standardima. Razlikujte provjeru ispravnosti HTML i CSS koda. Pritom je jasno da se u jednom slučaju provjerava HTML kod, u drugom CSS kod.

Vjerojatno će mnogima biti čudno pitanje je li potrebna validacija. Ali ako pogledate na internetu, možete vidjeti da ima mnogo onih koji vjeruju da je valjani kod neobavezan, da je to gubljenje vremena, budući da preglednici rade dobro čak i uz sve vrste pogrešaka.

Naravno, u mnogim slučajevima web-mjesta mogu dobro funkcionirati na nevažećem kodu, ali unakrsna dosljednost u takvim slučajevima ne može se jamčiti. Uostalom, postoje standardi za same programske jezike, ali zbog činjenice da preglednici ispravljaju pogreške na isti način, takav standard, naravno, ne postoji i ne može biti. Stoga različiti preglednici mogu rješavati pogreške na različite načine, što može dovesti do različitog prikaza stranica.

I općenito, nije jasno zašto neki ljudi razvijaju tako figurativan odnos prema svom poslu, po principu “to će upravo to”. Stoga, ako netko smatra da ne treba provjeravati ispravnost šifre, onda je to njegovo pravo, a u suprotno se teško može uvjeriti, a nema potrebe.

Sada prijeđimo na izravnu provjeru valjanosti kodova, prvo HTML, a zatim CSS.

Kako provjeriti valjanost HTML koda

U biti, sama provjera valjanosti koda je prilično jednostavna, kao što se sada može vidjeti. No, otklanjanje grešaka obično traje određeno vrijeme. Naravno, ako se kod sastoji od nekoliko redaka, onda ovdje ne mogu nastati poteškoće. Ali, ako ih ima na stotine i tisuće, onda ćete se možda morati potruditi, sve ovisi o tome koliko je kod sastavljen. Stoga je bolje to činiti češće zajedničkom provjerom unakrsne dosljednosti.

Ovdje ćemo razmotriti najjednostavniju i najčešću varijantu provjere valjanosti - to je korištenje stranice "W3C Consortium", koja uz podršku programera preglednika razvija specifikacije za kodove web stranica.

Za provjeru HTML koda samo slijedite poveznicu https://validator.w3.org/, gdje će se otvoriti stranica s poljem za unos adrese stranice koja se provjerava.

snimka zaslona 51

Nakon pritiska na tipku "Provjeri", dobit ćemo rezultat provjere.

U ovom slučaju, HTML kôd je valjan, ali postoji preporuka za korištenje atributa lang s vrijednošću "ru", budući da stranica koristi ruski.

Atribut lang namijenjen je preglednicima za ispravan prikaz određenih znakova, kao što su navodnici, ovisno o jeziku koji se koristi. Stoga neće biti suvišno da ga uvrstimo u HTML kod. I to ćemo učiniti u html oznaci kako bi ovaj atribut mogao utjecati na cijeli dokument.

Kako napraviti ovaj dodatak prikazano je u sljedećoj tablici.

"ru" >

. . .

A sada, ako napravimo drugu provjeru, možemo vidjeti da je kod postao potpuno valjan bez ikakvih komentara.

Na taj smo način provjerili datoteku objavljenu na internetu. Ali kada stranica još nije objavljena na webu, možete provjeriti njezinu valjanost na druge načine, ovo je ili učitavanje datoteke pomoću gumba za pregledavanje ili korištenje obrasca za izravno kopiranje HTML koda.

Snimka zaslona prikazuje posljednju opciju, kada se kôd web stranice kopira izravno u obrazac za provjeru valjanosti.

Nakon provjere dobivamo sličan rezultat, a provjereni kod će također biti prikazan ovdje. U slučaju da se pronađu pogreške, one će biti istaknute kako bi se pojednostavila pretraga, što uvelike pojednostavljuje rad na njihovom otklanjanju.

Kako provjeriti valjanost CSS koda

Pokrili smo provjeru valjanosti HTML-a. Provjera valjanosti CSS koda ide potpuno istim redoslijedom. Samo u tom slučaju trebate koristiti drugu stranicu validatora, koja se za takav slučaj nalazi na http://jigsaw.w3.org/css-validator/.

Otvorimo ga i kao i prethodni put upišemo adresu stranice koja se provjerava, nakon čega pritisnemo tipku "Provjeri".

Rezultat ove provjere prikazan je na snimci zaslona.

Kao što vidite, naš CSS kod je u potpunosti usklađen sa specifikacijom bez ikakvih pogrešaka, što je dobar rezultat.

Redoslijed ostalih metoda provjere za ovaj slučaj potpuno se podudara sa sličnim provjerama HTML koda. Stoga se ovdje nećemo ponavljati i tu ćemo završiti razmatranje provjera valjanosti.

Nakon toga ćemo provjeriti našu stranicu da li je unakrsna podudarnost i provjeriti je li ista prikazana na svim preglednicima, pri čemu ćemo dovršiti izgled glavne stranice stranice.

A, time ćemo se pozabaviti odmah nakon novogodišnjih praznika.

I na kraju, svima možete poželjeti sretnu Novu godinu! I želim vam zdravlje, ljubav, radost, blagostanje i, naravno, veliki uspjeh u stvaranju vlastite web stranice za mogućnost uspješnog rada na internetu u Novoj godini!

Izvorne datoteke web-mjesta

Izvorne datoteke stranice s ažuriranjima koja su napravljena u ovom članku možete preuzeti iz priloženog dodatni materijali.

Nakon izrade stranice i popunjavanja svime što vam je potrebno, stranicu je potrebno provjeriti na greške. Da biste pronašli pravopisne pogreške u html-u i css-u, pomoći će vam W3 validator - World Wide Web Consortium, što u prijevodu znači: World Wide Web Consortium. Pronalazi sve greške i ukazuje gdje se nalaze, te nudi opcije za njihovo otklanjanje.

Zašto popraviti kod s W3C Validatorom

Zapravo, nema puno prednosti od toga i sve su uvjetne, ali nažalost, svaka stranica treba imati minimalan broj pogrešaka, idealno ne jednu. Što god odlučite trebate li ga, evo njegovih prednosti:

• Brzina učitavanja stranice će se povećati, ali neznatno, to se neće ni primijetiti.
• Stranica će se prikazati isto u svakom pregledniku.
• Prilikom dodavanja stranice u direktorij, obratite pozornost na pismenost pisanja html i css.

Nema puno prednosti, ali popravite html i css pogreške korištenje W3C validatora se isplati!

Kako ispraviti pogreške s Validatorom

Princip ispravljanja pogrešaka validatora nije težak i svatko ga može podnijeti! Pratimo poveznice na, ako je teško razumjeti engleski, savjetujem vam da koristite prevoditelj, ili koristite ovim, koji će pokazati vrstu pogreške na ruskom. Razmotrimo primjer popravka validatora:

1. U polje upišite naziv svoje stranice u cijelosti.


2. Na popisu počinjemo gledati gdje i koja je pogreška i što je potrebno da se ona otkloni.


Kao što možete vidjeti na slikama, moja greška je u linku, ovaj problem sam pronašao u dodatku gumba za dijeljenje. Često morate kopati po svim datotekama da biste pronašli pogrešku.

3. Dodajte element u redak u kojem je pronađena pogreška i ponovno ga provjerite validatorom.
Ako je greška ispravljena, onda je to dobro. Ako ne, onda morate tražiti dalje.