Što su valjanost i validacija i zašto su potrebni? Provjera strukture linkova i težine internih stranica
Ova zbirka sadrži prekrasnu zbirku online usluge o radu sa CSS kodovima. Sve te usluge znatno olakšavaju život web programeru. Uz njihovu pomoć možete generirati CSS mrežu za web mjesto, provjeriti kod za pogreške, prilagoditi kod za različite preglednike, generirati CSS stilovi na temelju stilova slojeva Photoshopa, nabavite kodove uzoraka za pozadine i gradijente, komprimirajte CSS za povećanje brzine učitavanja stranice. Postoje mnoge usluge specijalizirane za rad s fontovima i njihovu vizualnu prezentaciju.
CSS mreža od 1Kb
Postavljanjem samo tri parametra generira se i CSS mreža. Također je naznačena širina u pikselima. 
Dizajner rešetki
Složenija usluga. CSS rešetka je prilagodljiva prema nekoliko parametara. Drugi blok generira tekst koji će biti prikazan u stupcima. Na izlazu imamo spreman CSS i HTML predložak. 
CSS lint
Usluga za provjeru grešaka koda vaše web stranice. 
Primer CSS
Lijepljenjem HTML koda u dijaloški okvir možete dobiti popis svih navedenih klasa i ID-ova koji se spominju u CSS-u. 
PrefiksMyCSS
Ako unesete izvorni CSS kod, izlaz koji možete dobiti je kod prilagođen za različite preglednike. 
Modernizr
Na ovu uslugu ponuditi preuzimanje i instaliranje JavaScript biblioteke s otvoreni izvor, koji će vam nekako pomoći prilikom izrade web stranice. Ne mogu reći preciznije, jer nisam probala što je to. 
Stilovi slojeva
Vrlo korisna usluga. Na temelju postavki u dijaloškom okviru programa Stilovi slojeva, Photoshop generira CSS kod. 
Ultimate CSS Gradient Generator by ColorZilla
Postoji veliki broj gradijenata za odabir i njihovih CSS kodovi, prilagođen različitim preglednicima. 
Spritebox
Omogućuje vam brzo i jednostavno stvaranje klasa i identifikatora iz jedne slike 
Automatski CSS inliner
Automatski pretvara sve lokalne stilove u ugrađeni CSS za upotrebu u kampanjama putem e-pošte. 
Ispitivač tipa
Omogućuje vam usporedbu pravopisa razni fontovi i dobiti CSS kod odabranog stila pisanja. 
Web Font Combinator
Usluga vam omogućuje da vizualno vidite kako će različite kombinacije fontova izgledati u naslovima, podnaslovima iu glavnom tekstu.
Već sam spomenuo ono što postoji u smislu valjanosti html kod A. To bi trebalo činiti barem s vremena na vrijeme, jer valjanost i html-a i css-a uvelike utječe na stranicu, odnosno identičan prikaz vašeg resursa u različitim preglednicima(općeniti članak o popularnim i najboljim web preglednicima, za koji se nadam da će vam pomoći da odaberete jedan od njih).
Također, kao što sam već spomenuo, iako tražilice u ovoj fazi se greške CSS i HTML koda ne uzimaju u obzir prilikom rangiranja stranica; u budućnosti se sve može promijeniti i možete doći u situaciju da lijepo dizajniran projekt napravljen za ljude izgubi dio svoje potencijalne publike zbog činjenice da nije prošao validaciju. Pa dobro, ovo je sve tekst, ovdje svatko sam odlučuje koliko je sve važno.
Mislim da ste sada upoznati s mojim mišljenjem, budući da pišem ovaj članak, što znači da ga smatram vrijednim pažnje uz npr. tako važan dio seo optimizacija poput blokiranja poveznica i fragmenata teksta od indeksiranja od strane Googlea i Yandexa ili njegove inteligentne upotrebe.
U redu, kako kažu, bliže stvari. Prvo malo o CSS-u. CSS ( Kaskadni listovi stilova- Cascading Style Sheets) je stilski jezik koji definira prikaz HTML dokumenti. Odnosno, ako HTML opisuje sadržaj stranice, tada CSS formatira ovaj sadržaj, drugim riječima, daje mu potpun izgled. Usput, za povećanje brzine stranice bit će korisno izvršiti svoje datoteke tema.
W3C validator: provjerava valjanost CSS kodaSada prijeđimo na to kako provjeriti valjanost dokumenta (stranice naše web stranice ili WordPress blog). Kao iu slučaju provjere HTML koda, koristit ćemo se jednim od alata. Prijeđimo na uslugu provjere valjanosti CSS-a:
Kao što vidite, postoje tri opcije za provjeru valjanosti CSS-a pomoću W3C validatora. Usput, imajte na umu da se na dnu stranice validatora nalazi bilješka koja ukazuje na potrebu provjere valjanosti HTML koda. Samo oba ispravna koda jamče ispravnost cijelog dokumenta. Za provjeru unesite URL. Na primjer, pogledajmo glavnu stranicu mog bloga:
Rezultat provjere W3C validatora u vezi s pogreškama u CSS kodu ne može se nazvati razočaravajućim, jer su pronađene samo 2 pogreške. Naravno, te pogreške su različite, u svakom konkretnom slučaju uzrokuju različite posljedice. Pogledajmo što možemo učiniti da ih eliminiramo. Ovdje je sve prikladno, budući da W3C validator pruža ne samo vezu na dokument koji sadrži netočan kod, već i broj retka na kojem se nalazi. Usput, u nastavku će se nakon popisa upozorenja i pogrešaka prikazati verzija ispravnog CSS koda koju možete koristiti:
Stranica s rezultatima provjere valjanosti CSS-a sadrži poveznicu na dokument css.ie, koji se nalazi u mapi teme. Napravljen je kako bi se postigla kompatibilnost bloga s više preglednika (isti prikaz u popularnim preglednicima). I to posebno za razne modifikacije Internet Explorer, koji pati od raznih “zastoja” u smislu narušavanja izgleda stranice, posebice njenih starijih verzija (IE9 je puno bolji po tom pitanju). Kompatibilnost s različitim preglednicima je vrlo velika važno kako bi unaprijedili projekt, ali nakon pregleda pokazalo se da ovaj dokument sadrži svojstva koja nisu u skladu sa standardima W3C.
Dakle, dobivamo retke 3 i 12, koji sadrže pogreške. Da biste ih popravili, trebate ukloniti pogrešku parsiranja html-a (filter: izraz(document.execCommand("BackgroundImageCache", false, true));) i svojstvo .zoom. Sada neću ulaziti u zamršenost programiranja i izgleda web stranice, samo ću napomenuti da je svojstvo izraz Pomaže riješiti se neugodnog efekta treperenja pozadinske slikešto se događa u IE6.
Odnosno, u pregledniku čija upotreba prestaje, au sljedećim verzijama ovaj se "propust" više ne primjećuje. Odmah ću reći da ću nastaviti koristiti ovaj "lijek" neko vrijeme, dok broj potencijalnih posjetitelja koji koriste IE6 ne dosegne minimalnu razinu. Međutim, radi jasnoće, da vam pokažem kako će W3C validator odgovoriti na ovo, uklonit ću ga.
Svojstvo .zoom, koje postavlja faktor zumiranja elementa, nije dio međunarodnog standarda W3C, ali ga podržavaju vrlo stare verzije Preglednici Opera, Safari, uključujući IE8(Verzija 9 je gotovo potpuno “poštivajuća zakon” pa će uskoro, nadam se, webmasteri biti oslobođeni potrebe za korištenjem hakova, odnosno dodatnih kodova koji im omogućuju postizanje maksimalne kompatibilnosti s više preglednika). Sada pogledajmo dokument koji sadrži nevažeće elemente i ispravimo ga:
Ovaj se dokument nalazi u mojoj mapi Cloudy theme, uklanjam gore navedene stavke koje nisu prošle provjeru valjanosti. Nadalje, u rezultatima provjere valjanosti, osim grešaka, bilo je i puno tzv. upozorenja:
Kao primjer, pokušat ću jasno pokazati kako se riješiti najčešćih od njih, au isto vrijeme objasniti njihovo značenje. Kao što vidite, W3C validator upozorava na prisutnost istih boja za tekst i pozadinu. Mora se reći da je to općenito nepoželjno u svakom slučaju, jer tražilice ovo stanje stvari mogu smatrati skrivanjem informacija, što je prepuno ozbiljnih sankcija.
Naravno, to se ne događa uvijek na ovaj način, ali se ova opasnost ne može podcijeniti. Dakle, prijeđimo na ispravljanje situacije. Najbolje je kopirati datoteku style.css vaše teme u HTML i PHP uređivač notepad++, o kojem sam govorio i koji olakšava pretraživanje prema broju retka:
Sada kada znamo gdje se ove linije nalaze u vašoj datoteci teme, prilagođavamo boju blagom promjenom nijanse. U heksadecimalni sustav boje #ffffff odgovara bijeloj boji. Mijenjamo ga na sljedeći način: umjesto posljednjeg f upisujemo d, čime dobivamo nešto drugačiju nijansu bijele; Sada promjene neće biti vidljive korisnicima, ali će tražilice vidjeti razliku:
Ovo je otprilike način na koji možete ispraviti nevažeće dijelove CSS koda svojih stranica s resursima. Na isti način nalazimo i preostala područja označena upozorenjima koja treba ispraviti.Što se tiče upozorenja za liniju 483 (inače, bilo ih je jako puno, oko 10). Nakon provjere otkrio sam da je uzrok dodatak WP Page Numbers koji omogućuje navigaciju označavanjem stranica.
To me potaknulo da deaktiviram dodatak i bio je razlog zašto sam ga konačno zamijenio ubacivanjem koda, što je bio korak prema smanjenju opterećenja poslužitelja. Čim sam to učinio, upozorenja o kršenju valjanosti koda od strane ovog dodatka odmah su nestala nakon ponovne provjere. Nakon gore opisanih koraka, ponovno provjeravamo valjanost CSS-a pomoću W3C validatora:
Sada znate kako provjeriti valjanost CSS dokumenta (web stranice web stranice ili bloga) pomoću W3C validatora. Na kraju bih želio napomenuti da svatko za sebe odlučuje o stupnju i učestalosti provjere valjanosti CSS koda, sve ovisi o okolnostima, ali svejedno, s vremena na vrijeme to se mora učiniti, po mom dubokom uvjerenju. Pretplatite se na ažuriranja bloga da biste primali svježe materijale e-poštom. Stoga, dopustite mi da se oprostim, nadam se da se nećemo dugo rastati.
Provjerava html kod, naveden pomoću poveznice na stranicu ili jednostavno u obliku učitane datoteke ili kopiranog teksta. Daje popis komentara s preporukama za njihovo ispravljanje.
http://validator.w3.org/
Provjerava stilove dokumenta ili stilsku tablicu koja se nalazi u zasebnoj datoteci.
http://jigsaw.w3.org/css-validator/
Provjerava ispravnost rada RSS izvori i Atom.
http://validator.w3.org/feed/
Ističe pogreške na datom URL-ovi stranica e.
http://webmaster.yandex.ru/spellcheck.xml
Prikazuje pogreške u tekstu kopiranom u prozor za potvrdu.
http://api.yandex.ru/speller/
Prikazuje strukturu web stranice. Relevantno za provjeru HTML5 dokumenata. Ćirilica se ne prikazuje ispravno (:.
http://gsnedders.html5.org/outliner/
U besplatna verzija prikazuje do 10 stranica na internetu s djelomičnim podudaranjem teksta s vašom stranicom.
http://www.copyscape.com
Provjerava jedinstvenost teksta unesenog u obrazac. U besplatnoj verziji možete čekati rezultate.
http://www.miratools.ru/Promo.aspx
Provjerava jedinstvenost i unesenog teksta i teksta na danom URL-u, prikazuje razinu jedinstvenosti u postotku. Ima vlastiti algoritam provjere.
http://content-watch.ru
Desktop programi za provjeru jedinstvenosti sadržaja s burzi tekstova. Rade dugo, ali kvalitetno. Etxt ima verzije za tri operativni sustavi: Mac, Linux i Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Prikazuje stranice sa sličnim sadržajem i sličnom unutarnjom strukturom.
http://similarsites.com
Provjerava znakove najpoznatijih cms-ova.
http://2ip.ru/cms/
Ocjenjuje mogućnost pregleda stranice s mobilnih uređaja i prikazuje popis komentara i pogrešaka.
http://validator.w3.org/mobile/
Provjera upotrebljivosti stranice za Google telefone.
https://www.google.com/webmasters/tools/mobile-friendly/
Prikazuje brzinu učitavanja stranice na mobilnim uređajima.
https://testmysite.withgoogle.com/intl/ru-ru
Izađite iz stranice emulatora pomoću mobitel. Prikazuje stranicu kroz oči odabranog modela.
http://www.mobilephoneemulator.com/
Usluga provjere stranice za osobe oštećena vida. Dostupan online i kao dodatak za Firefox.
http://wave.webaim.org/
Prikazuje tekst web-mjesta blizu onoga što vidi indeksator pretraživanja.
http://www.seo-browser.com/
Distribucija tekstualnog preglednika Lynx za win32 sustave. Prije uporabe morate urediti lynx.bat, naznačujući u njemu put do direktorija s lynxom.
http://www.fdisk.com/doslynx/lynxport.htm
Uklanja sve oznake i prikazuje tekst stranice, meta oznake i oznake naslova, broj vanjskih i unutarnjih poveznica. Prikazuje pregled stranice na Googleu.
http://www.browseo.net
Prikazuje popis odlaznih veza za URL i provjerava njihovu reakciju. Može provjeravati rekurzivno, odnosno samostalno prelaziti s jednog dokumenta na drugi.
http://validator.w3.org/checklink
Besplatni alat za provjeru neispravnih poveznica. Za rad morate ga instalirati na svoje računalo. Rekurzivno skenira web mjesto, izrađuje izvješća, može biti korisno za izradu karte web mjesta.
http://home.snafu.de/tilman/xenulink.html
Skenira do 500 web stranica u besplatnoj verziji. Provjerava broj vanjskih i unutarnjih poveznica. Prikazuje informacije o skeniranim stranicama: ugniježđenje, kodove odgovora, naslove, meta informacije i naslove.
http://www.screamingfrog.co.uk/seo-spider/
Program skenira stranicu, gradi matricu internih poveznica, dodaje vanjske (dolazne) veze sa zadanih URL-ova i na temelju tih podataka izračunava interne težine stranica stranice. Program se može koristiti za pronalaženje vanjskih (odlaznih) poveznica za popis URL-ova stranica web stranica.
Provjerava kodove odgovora poslužitelja, predviđa brzinu učitavanja stranice ovisno o količini podataka u bajtovima, prikazuje sadržaj html head taga, unutarnje i vanjske poveznice za stranicu i sadržaj stranice očima robota za pretraživanje.
http://urivalet.com/
Provjerava kodove odgovora poslužitelja. Omogućuje provjeru preusmjeravanja (kodovi odgovora 301, 302), zaglavlja Last-Modified, itd.
http://www.rexswain.com/httpview.html
Prikazuje količinu i sadržaj prenesenih podataka kada se stranica učita.
http://www.websiteoptimization.com/services/analyze/
Provjerava preusmjeravanja, upotrebu kanonskog atributa, metaoznake i neke aspekte sigurnosti stranice. Daje preporuke za poboljšanje učitavanja stranice.
http://www.seositecheckup.com
WHOIS usluga centra za registraciju domena RU centra. Pruža informacije o IP adresama i domenama diljem svijeta. Ponekad se smrzne.
https://www.nic.ru/whois/?wi=1
Whois usluga RosNIIROS-a (RIPN). Pruža informacije za domene u RU zoni i IP adrese iz baze podataka RIPE (Europa).
http://www.ripn.net:8080/nic/whois/
Određuje gdje domena hostira i također prikazuje IP adresu stranice.
http://www.whoishostingthis.com
Provjera je li IP adresa uključena u crnu listu za slanje e-pošte.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/
Provjera MX zapisa za domenu. Ispitivanje SMTP poslužitelji za domenu. Provjera IP-a u mailing listama.
https://mxtoolbox.com/
Pretraživanje u registriranoj bazi podataka brendovi u SAD-u.
http://tmsearch.uspto.gov/
Provjerava dostupnost stranica web mjesta za indeksiranje od strane Yandex robota.
http://webmaster.yandex.ru/robots.xml
Provjerava ispravnost datoteke robots.txt.
https://www.websiteplanet.com/webtools/robots-txt
Praćenje dostupnosti mjesta. Omogućuje vam besplatno povezivanje jedne web stranice s minimalnim opcijama verifikacije.
http://www.siteuptime.com
Provjera brzine učitavanja stranice. Šalje izvještaj e-poštom. Ima plaćene usluge za praćenje dostupnosti stranice.
http://webo.in
Provjera brzine učitavanja web stranica.
http://www.iwebtool.com/speed_test
Prikaz usluge ključne riječi za web mjesto za koje je u TOP 20 (top dvadeset) Google rezultata tijekom vremena. Podaci o prometu pretraživanja i oglašavanja.
http://www.semrush.com/
Pozicija u TOP50 Yandex i Google. Web stranica Tits i PR početna stranica, prisutnost u važnim imenicima, vidljivost na vrhu za RF upite.
http://pr-cy.ru/
Provjera pouzdanosti stranice. Servis koji tvrdi da mjeri povjerenje za Yandex (to ionako nitko ne može provjeriti :).
http://xtool.ru/
Provjera preklapanja filtara Panda i Penguin s Googlea. Usluga vam omogućuje vizualno određivanje je li se stranica srušila na datume ažuriranja Pande i Penguina.
http://feinternational.com/website-penalty-indicator/
Provjera ranga stranica stranica (prilikom kopiranja URL-a u alat morate obrisati zadnje slovo i zatim ga ponovno napisati).
http://www.prchecker.net/
Prikazuje povijest razvoja stranice i omogućuje pregled snimaka zaslona starih stranica.
http://www.archive.org/web/web.php
Povijest pozicija stranice u TOP Google-u (ključne fraze, stranice, naslovi), PR indikatori, TIC, Alexa Rank, broj povratnih poveznica za popularne stranice.
http://SavedHistory.com
SEO Doctor je dodatak za Firefox. Prikazuje poveznice na stranici i pruža prikladno sučelje za razne SEO usluge.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake je dodatak za Firefox. Prikazuje najvažnije karakteristike stranice: TIC, PR, povratne veze, Alexa Rank. Radi s Google i Yandex rezultatima. Pruža mogućnost brze analize konkurenata.
http://www.seoquake.com/
IEContextHTML je dodatak za Internet Explorer. Provjerava indeksiranje poveznica u Yandexu i Googleu, prikazuje popis vanjskih i unutarnjih veza i omogućuje uvoz podataka s web stranica.
Ažurirani popis besplatnih proxy poslužitelja, uključujući ruske.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Anonimni besplatni proxy s mogućnošću predstavljanja iz tri zemlje. Radi s Google pretraživanjem.
https://hide.me/en/proxy
Emulatori Google pretraživanje V različite zemlje, određivanjem parametara pretraživanja.
http://searchlatte.com/
http://isearchfrom.com/
Usluga omogućuje dubinsku provjeru (do 500) pozicije stranice po regijama u Yandexu.
Analizira masu linkova web stranice, generira dijelove na temelju različitih kriterija: vrsta linka, sidra, stranice. Prikazuje težinu povratnih veza. Usluga je dostupna samo registriranim korisnicima.
http://ahrefs.com
Provjerava prisutnost povratnih veza na web mjesto na predloženom popisu URL-ova (do 100 stranica).
http://webmasters.ru/tools/tracker
Prikazuje broj lajkova (plusone) na Google+. Možete odmah unijeti popis URL-ova za provjeru.
http://www.plusonechecker.net/
Pokazuje popularnost na Twitteru, Google+, Facebooku, LinkedInu, Pinterestu, Deliciousu, StumbleUponu, Diggsu.
http://sharedcount.com
Prikazuje popularnost prve stranice stranice na Twitteru, Google+, Facebooku, Deliciousu, StumbleUponu. Za ruske stranice podaci su ponekad netočni.
http://www.coolsocial.net
Skenira stranicu i generira izvješća "Dionice" glavnog stranog društvene mreže za ove stranice. Registrira korisnike putem Twitter računa. Izvještaje možete vidjeti već sljedeći dan.
https://socialcrawlytics.com
Provjerava zadani URL za sumnjivi kod, prikazuje učitane skripte i rezultate njihove provjere.
http://vms.drweb.com/online/
Provjerava URL-ove na viruse s 30 skenera.
https://www.virustotal.com/#url
Sustav zaštite web stranice od virusa. Svakodnevno skenira datoteke stranice i šalje izvješće o njihovim promjenama e-poštom.
Validacija je postupak provjere CSS koda u odnosu na CSS2.1 ili CSS3 specifikaciju. Sukladno tome, ispravan kod koji ne sadrži pogreške naziva se valjanim, a kôd koji ne zadovoljava specifikaciju naziva se nevažećim. Najprikladniji način provjere koda je putem web stranice http://jigsaw.w3.org/css-validator/ Korištenjem ove usluge možete odrediti adresu dokumenta, učitati datoteku ili provjeriti upisani tekst. Velika prednost usluge je podrška za ruski i ukrajinski jezik.
Provjerite URI
Ova kartica vam omogućuje da odredite adresu stranice koja se nalazi na internetu. Ne morate pisati http:// protokol; on će se dodati automatski (Slika 1.42).
Riža. 1.42. Provjera dokumenta po adresi
Nakon unosa adrese kliknite na gumb “Provjeri” i pojavit će se jedan od dva natpisa: “Čestitamo! Nema pronađenih pogrešaka" ako je uspješno ili "Žao nam je, pronašli smo sljedeće pogreške" ako kod nije valjan. Poruke o pogrešci ili upozorenja sadrže broj retka, birač i opis pogreške.
Provjerite učitanu datoteku
Ova vam kartica omogućuje učitavanje HTML ili CSS datoteke i provjeru grešaka u njoj (Slika 1.43).
Riža. 1.43. Provjera datoteke prilikom preuzimanja
Usluga automatski prepoznaje vrstu datoteke i, ako je naveden HTML dokument, izdvaja stil iz njega za provjeru valjanosti.
Provjerite upisani tekst
Posljednja kartica namijenjena je izravnom unosu HTML ili CSS koda, u ovom slučaju će se provjeravati samo stil (Slika 1.44).
Riža. 1.44. Provjera unesenog koda
Čini se da je ova opcija najprikladnija za provođenje raznih eksperimenata na kodu ili brza provjera mali fragmenti.
Odabir CSS verzije
CSS3 dodaje mnoga nova svojstva stila u usporedbi s prethodna verzija, stoga provjeru koda treba obaviti uzimajući u obzir verziju. Prema zadanim postavkama, usluga navodi CSS2.1, pa ako želite provjeriti kod prema CSS3, trebali biste to eksplicitno navesti. Da biste to učinili, kliknite na tekst " Dodatne mogućnosti" i u bloku koji se otvori odaberite CSS3 s popisa "Profil".
Riža. 1.45. Određivanje CSS verzije za provjeru
S vremena na vrijeme pojavi se rasprava o preporučljivosti korištenja identifikatora u izgledu. Glavni argument je da se identifikatori trebaju koristiti za pristup i manipuliranje elementima na web stranici pomoću skripti, a klase bi se trebale koristiti isključivo za promjenu stilova elemenata. U stvarnosti, nema razlike u tome kako definirate stilove, ali trebali biste zapamtiti neke značajke identifikatora i klasa, kao i zamke, koji možda čeka programere.
Najprije nabrojimo karakteristične značajke ovih selektora.
Identifikatori
U kodu dokumenta svaki identifikator je jedinstven i treba ga uključiti samo jednom.
Naziv identifikatora razlikuje velika i mala slova.
Kroz metoda getElementById možete pristupiti elementu pomoću njegovog ID-a i promijeniti svojstva elementa.
Stil identifikatora ima prednost nad stilom klasa.
Klase se mogu koristiti više puta u kodu.
Nazivi klasa razlikuju velika i mala slova.
Klase se mogu međusobno kombinirati dodavanjem nekoliko klasa jednoj oznaci.
Identifikatori
Ako tijekom rada web stranice morate promijeniti stil nekih elemenata u hodu ili prikazati neki tekst unutar njih, to je puno lakše s identifikatorima. Elementu se pristupa metodom getElementById, čiji je parametar naziv identifikatora. U primjeru 1,70 k polje za tekst obrascu, dodaje se identifikator pod nazivom userName, zatim se JavaScript funkcija koristi za provjeru je li korisnik unio tekst u ovo polje. Ako nema teksta, ali je pritisnut gumb Pošalji, prikazuje se poruka unutar oznake s identifikatorom msg. Ako je sve ispravno, podaci obrasca šalju se na adresu navedenu atributom akcije.
Primjer 1.70. Validacija podataka obrasca XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
Provjera valjanosti obrasca
funkcija validForm(f) (
korisnik = document.getElementById("korisničko ime"); if (user.value == "")
document.getElementById("msg").innerHTML = "Molimo unesite ime."; ) else f.submit();
Unesite svoje ime:
Budući da identifikatori razlikuju velika i mala slova, važno je njihovo pisanje. Ime userName koristi se unutar oznake, a također ga treba navesti u metodi getElementById.
Ako pogrešno napišete, na primjer, korisničko ime, skripta će prestati raditi prema potrebi.
U gornjem primjeru stilovi uopće nisu sudjelovali; sami identifikatori bili su potrebni da bi skripte radile. Kada se koristi u CSS-u, imajte na umu da identifikatori imaju prednost nad klasama. Objasnimo to na primjeru 1.71.
Primjer 1.71. Kombinacija stilova |
|||||||||||||
xmlns="http://www.w3.org/1999/xhtml"> |
|||||||||||||
Stil identifikatora |
|||||||||||||
class="a b" > Stil klasa a i b |
|||||||||||||
class="b" > Stil klase b |
|||||||||||||
Prvi odlomak je stiliziran identifikatorom A i klasom b, čija su svojstva međusobno sukobljena. U ovom slučaju, stil klase će biti zanemaren zbog značajki kaskadnog i specifičnosti. Za drugi odlomak, stil je postavljen kroz klase a i b istovremeno. Klase imaju isti prioritet, što znači da će se u slučaju sukoba koristiti svojstva navedena u donjem stilu. Samo se stil iz klase b primjenjuje na zadnji odlomak. Na sl. Slika 1.46 prikazuje rezultat primjene stilova.
Riža. 1.46. Korištenje stilova teksta
Specifičnost u kaskadiranju počinje igrati ulogu kada stilska datoteka raste zbog povećanja broja birača, što je tipično za velika i složena mjesta. Kako bi se stil ispravno primijenio, potrebno je kompetentno upravljati specifičnostima selektora korištenjem identifikatora, povećanjem važnosti kroz !important i redoslijedom svojstava.
Budući da se elementu može dodati više od jedne klase u isto vrijeme, to vam omogućuje stvaranje
nekoliko univerzalnih klasa sa svojstvima stila za sve slučajeve i uključite ih u oznake ako je potrebno. Pretpostavimo da većina blokova na stranici ima zaobljene kutove, pri čemu neki blokovi još uvijek imaju crveni obrub, a neki ne. U ovom slučaju možemo napisati ovaj stil (primjer 1.72).
Primjer 1.72. Korištenje klasa
R, .b (dopuna: 10 px;
) pozadina: #FCE3EE ;
radijus granice: 8 px; -webkit-border-radius: 8 px ;
) -moz-border-radius: 8 px
B (obrub: 1 px puni #ED1C24;)
N(border:none;)
Određivanjem različitih klasa u atributu class možemo kombinirati skup svojstava stila i tako dobiti blokove s okvirom, blokove bez okvira, sa zaobljenim ili ravnim kutovima. Ovo je donekle slično grupiranju selektora, ali ima veću fleksibilnost.
Nakon izrade web stranice i njezinog popunjavanja svime što je potrebno potrebno je provjeriti web mjesto na pogreške. Za pronalaženje pravopisnih pogrešaka u html i css pomoći će vam W3 validator - World Wide Web Consortium, što u prijevodu znači: World Wide Web Consortium. Pronalazi sve greške i pokazuje gdje se nalaze, a također nudi opcije za njihovo uklanjanje.
Zašto popraviti svoj kod s W3C ValidatoromZapravo, od ovoga nema puno prednosti i sve su uvjetne, ali nažalost svaka stranica treba imati minimalni iznos idealno bez grešaka. Kako bismo lakše odlučili treba li vam, evo njegovih prednosti:
- Brzina učitavanja stranice će se povećati, ali samo malo, to se neće ni primijetiti.
- Stranica će izgledati isto u svakom pregledniku.
- Prilikom dodavanja stranice u imenik, obratite pozornost na ispravnost html i css zapisa.
Nema puno prednosti, ali vrijedi popraviti html i css pogreške pomoću W3C validatora!
Kako ispraviti pogreške s ValidatoromPrincip ispravljanja grešaka s validatorom nije kompliciran i svatko se s njim može nositi! Slijedimo vezu do, ako je teško razumjeti engleski, savjetujem vam da koristite prevoditelj ili koristite ovaj, koji će pokazati vrstu pogrešaka na ruskom. Pogledajmo primjer ispravke validatora:
1. U polje upišite puni naziv svoje web stranice. 
2. U popisu počinjemo gledati gdje i koja je pogreška te što je potrebno za njezino otklanjanje. 
Kao što možete vidjeti na slikama, moja pogreška je u vezi, pronašao sam ovaj problem u dodatku gumba za dijeljenje. Često morate kopati po svim datotekama da pronađete grešku.
3.Dodajte element u red u kojem je pronađena pogreška i ponovno ga provjerite s validatorom.
Ako je greška ispravljena, onda je to dobro. Ako ne, onda ćete morati tražiti dalje.