Vitajte na bezplatnom blogu správcu webu! Minule som vám povedal, ako skontrolovať, a dnes navrhujem pokračovať v téme overovania webových stránok. Pozrite sa na kaskádové štýly (CSS) a HTML dokumenty so štýlmi na zaistenie súladu so všeobecne uznávanými internetovými normami.
Jazyk v štýle CSS bol vyvinutý konzorciom World Wide Web Consortium (W3C), organizáciou, ktorá vyvíja a implementuje technologické štandardy na internete.
CSS (z angličtiny. Cascading Style Sheets - kaskádové štýly) je formálny jazyk určený na opis vzhľadu dokumentu pomocou značkovacieho jazyka.
Na kontrolu štýlu existuje veľmi užitočná služba ktoré ponúka konzorcium W3C. Prejdeme na hlavnú stránku overovacej služby CSS a skontrolujeme platnosť CSS.
Ako dobrý príklad si tradične overím svoj blog. Nasledujeme odkaz, otvorí sa nové okno, ktoré vyzerá takto:
Čaká nás tu príjemné prekvapenie, všetko je v ruštine! Okrem toho existuje možnosť výberu akéhokoľvek iného jazyka z viac ako 20 dostupných. Stránka obsahuje karty, ktoré ponúkajú možnosť začiarknutia:
- Kontrola podľa URI - stačí zadať adresu stránky;
- Skontrolovať nahratý súbor - musíte vybrať lokálny súbor CSS;
- Kontrola zadaného textu - na kontrolu správnosti je potrebné zadať kód CSS.
Ďalšie funkcie vám umožňujú zadať pokročilé parametre skenovania. Tu je stručný súhrn každého z nich:
- Profil - uvádza všetky funkcie a možnosti implementácie na konkrétnej platforme. Predvolený výber sa riadi najčastejšie používaným štandardom CSS3 úrovne 3.
- Upozornenia - nastavenie podrobností správ: všetky alebo najdôležitejšie výstrahy, pravidelná správa bez zobrazovania upozornení. Služba môže vydávať dva typy správ: chyby a varovania. Ak kontrolovaný CSS nie je v súlade s odporúčaním, je to chyba. Výstrahy sa líšia od chýb tým, že sa nevzťahujú na problémy so špecifikáciou.
- Prostredie - zadajte, kde sa štýly aplikujú, napríklad na prenosné zariadenie, displej, televízor alebo stránku na tlač. Odporúčame otestovať všetky stylingové prostredia.
- Rozšírenia poskytovateľa - je žiaduce ponechať predvolené nastavenia, je možné zobrazovať iba chyby alebo iba varovania. Dodávatelia prehliadačov niekedy implementujú experimentálne vlastnosti CSS, na ich podporu sa používajú predpony: -moz- (pre Firefox), -webkit- (pre Chrome), -ms- (pre internet Explorer), -o- (pre Opera) a ďalšie.
Zadám URL adresu, nakonfigurujem Extra možnosti začnite a kliknite na tlačidlo „Skontrolovať“. Hurá! Výsledok kontroly CSS: nenašli sa žiadne chyby!
Žiaľ, nedokázali sme sa vyhnúť varovaniam týkajúcim sa rozšírenia neznámeho dodávateľa. Je to v poriadku, validátor CSS je bezplatný, spoľahlivý a užitočný nástroj, ale ako každý iný softvér môže mať nedostatky.
Hlavná vec je, že štýly neobsahujú chyby a rozšírenia poskytovateľa s najväčšou pravdepodobnosťou jednoducho nie sú zahrnuté v špecifikácii a spôsobujú upozornenia, ale prehliadač údaje spracováva správne.
Všimnite si toho, že zoznam varovaní obsahuje číslo riadka, v ktorom bola nájdená neznáma vlastnosť. Ak sa nájdu chyby, zobrazí sa tabuľka s vlastnosťou a popisom problému. Napríklad taký výsledok kontroly má domovská stránka Yandex:
Nasledujú informácie o správne zaškrtnutých CSS. Neponáhľajte sa skopírovať ho a použiť ho na svojich stránkach! Áno, v danej verzii správneho CSS nie sú žiadne chyby a vlastnosti, ktorých použitie spôsobuje upozornenia, kód 100% prejde úplnou kontrolou. Účinok je však dosiahnutý odstránením týchto vlastností, takže na webe môžu nastať problémy so zobrazením alebo očakávania nemusia zodpovedať skutočnosti.
Táto služba je hostovaná a udržiavaná na serveri W3C, ale zároveň nie je oficiálnym nástrojom na overovanie CSS.
Voliteľne môžete použiť kombinovaný validátor - overí celý dokument kombináciou validátorov HTML a CSS a ďalších užitočných nástrojov na jednej stránke.
Pri vývoji webových stránok sa riaďte najnovšími špecifikáciami a referenciami kaskádových štýlov. Odporúčam použiť validátor CSS a skontrolovať svoje stránky, zdieľať výsledky v komentároch!
Kontroluje html kód, buď zadaný pomocou odkazu na stránku, alebo jednoducho ako nahraný súbor alebo skopírovaný text. Poskytuje zoznam komentárov s odporúčaniami na ich opravu.
http://validator.w3.org/
Overenie CSS (css validátor)
Kontroluje štýly v dokumente alebo v hárku štýlov umiestnenom v samostatnom súbore.
http://jigsaw.w3.org/css-validator/
Kontrola kanálov RSS a Atom
Skontroluje, či kanály RSS a Atom fungujú správne.
http://validator.w3.org/feed/
Skontrolujte pravopis na webovej stránke
Zvýrazňuje chyby na danej stránke URL.
http://webmaster.yandex.ru/spellcheck.xml
Zobrazuje chyby v texte skopírovanom do testovacieho okna.
http://api.yandex.ru/speller/
Kontrola štruktúry webovej stránky
Ukazuje štruktúru webovej stránky. Relevantné pre kontrolu dokumentov html5. Nesprávne zobrazuje azbuku (:.
http://gsnedders.html5.org/outliner/
Kontrola jedinečnosti obsahu
V. bezplatná verzia zobrazuje až 10 stránok na internete s čiastočnou zhodou textu s vašou stránkou.
http://www.copyscape.com
Kontroluje jedinečnosť textu zadaného do formulára. V bezplatnej verzii je možné čakať na výsledky.
http://www.miratools.ru/Promo.aspx
Skontroluje jedinečnosť zadaného textu a textu na danej adrese URL, percentuálne zobrazí úroveň jedinečnosti. Má svoj vlastný overovací algoritmus.
http://content-watch.ru
Desktopové programy na kontrolu jedinečnosti obsahu z búrz copywriterov. Pracujú dlho, ale vysoko kvalitne. Etxt má verzie pre troch operačné systémy: Mac, Linux a Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Zobrazuje stránky s podobným obsahom a podobnou vnútornou štruktúrou.
http://similarsites.com
Kontrola stránky cms
Kontroluje znaky najznámejších cm.
http://2ip.ru/cms/
Kontrola použiteľnosti webových stránok pre rôzne skupiny používateľov
Kontrola dostupnosti z mobilných zariadení
Vyhodnocuje schopnosť zobraziť stránku pomocou mobilné zariadenia a zobrazí zoznam poznámok a chýb.
http://validator.w3.org/mobile/
Kontrola použiteľnosti stránok pre telefóny od spoločnosti Google.
https://www.google.com/webmasters/tools/mobile-friendly/
Zobrazuje rýchlosť načítania stránok na mobilných zariadeniach.
https://testmysite.withgoogle.com/intl/ru-ru
Ukončenie emulátora webu pomocou mobilný telefón... Ukazuje stránku očami vybraného modelu.
http://www.mobilephoneemulator.com/
Kontrola prístupnosti pre osoby so zdravotným postihnutím
Služba na kontrolu stránky pre zrakovo postihnutých. K dispozícii online a ako doplnok pre Firefox.
http://wave.webaim.org/
Prehliadanie obsahu stránok očami prehľadávača
Zobrazuje text stránky, ktorý je blízky tomu, čo vidí indexovací vyhľadávač.
http://www.seo-browser.com/
Distribúcia textového prehliadača lynx pre systémy win32. Pred použitím musíte upraviť lynx.bat a označiť v ňom cestu k adresáru s lynxom.
http://www.fdisk.com/doslynx/lynxport.htm
Odstráni všetky značky a zobrazí text stránky, metaznačky a značky záhlavia, počet externých a interných odkazov. Zobrazí ukážku stránky v službe Google.
http://www.browseo.net
Kontrola štruktúry odkazov na stránky
Kontrola nefunkčných odkazov
Zobrazuje zoznam odchádzajúcich odkazov na adresy URL a kontroluje ich odpoveď. Môže kontrolovať rekurzívne, to znamená, že môže sám prechádzať z jedného dokumentu do druhého.
http://validator.w3.org/checklink
Bezplatný nástroj na kontrolu nefunkčných odkazov. Aby fungoval, musíte si ho nainštalovať do počítača. Rekurzívne prehľadáva web, vytvára správy a môže byť užitočný pri vytváraní mapy webu.
http://home.snafu.de/tilman/xenulink.html
Kontrola prepojení a názvov stránok
Skenuje až 500 webových stránok v bezplatnej verzii. Kontroluje počet externých a interných odkazov. Zobrazuje informácie o prehľadávaných stránkach: vnorenie, kódy odpovedí, názvy, meta informácie a hlavičky.
http://www.screamingfrog.co.uk/seo-spider/
Kontrola štruktúry odkazov a hmotnosti vnútorných stránok
Program naskenuje web, zostaví maticu interných odkazov, pridá externé (prichádzajúce) odkazy zo zadanej adresy URL a na základe týchto údajov vypočíta vnútornú váhu stránky. Program možno použiť na nájdenie externých (odchádzajúcich) odkazov na zoznam adries URL stránok stránok.
Kontrola kódov odozvy servera, viditeľnosť stránok vyhľadávacími robotmi, technické vlastnosti stránok
Kontrola hlavičiek HTTP a odozvy servera, viditeľnosť stránok pre roboty
Kontroluje kódy odpovedí servera, predpovedá rýchlosť načítania stránky v závislosti od veľkosti jeho údajov v bajtoch, zobrazuje obsah značky html head, internej a vonkajšie odkazy pre stránku obsah stránky očami prehľadávača.
http://urivalet.com/
Kontroluje kódy odpovedí servera. Umožňuje kontrolovať presmerovania (kódy odpovedí 301, 302), hlavičku poslednej zmeny atď.
http://www.rexswain.com/httpview.html
Zobrazuje množstvo a obsah dát prenesených pri načítaní stránky.
http://www.websiteoptimization.com/services/analyze/
Kontroluje presmerovania, používanie kanonického atribútu, meta tagy, niektoré aspekty zabezpečenia stránok. Poskytuje odporúčania na zlepšenie načítania stránky.
http://www.seositecheckup.com
Kontrola informácií o doméne a IP adrese
Centrum registrácie domény WHOIS služba Centrum RU. Poskytuje informácie o IP adresách a doménach po celom svete. Niekedy to zamrzne.
https://www.nic.ru/whois/?wi=1
Whois service from RosNIIROS (RIPN). Poskytuje informácie o doménach v zóne RU a IP adresách z databázy RIPE (Európa).
http://www.ripn.net:8080/nic/whois/
Určuje, kde je doména hostiteľom, a tiež zobrazuje IP adresu stránok.
http://www.whoishostingthis.com
Skontrolujte, či je adresa IP zahrnutá v čiernej listine na odosielanie e -mailov.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/
Kontrola záznamov MX pre doménu. Kontrola domény na serveri SMTP. Kontrola adresy IP v čiernych zoznamoch na odosielanie.
https://mxtoolbox.com/
Vyhľadávajte v databáze registrovaných ochranných známok v USA.
http://tmsearch.uspto.gov/
Kontrola súborov robots.txt
Kontroluje dostupnosť webových stránok na indexovanie robotom Yandex.
http://webmaster.yandex.ru/robots.xml
Skontroluje správnosť súboru robots.txt.
https://www.websiteplanet.com/webtools/robots-txt
Inšpekcia
Monitorovanie dostupnosti webových stránok. Umožňuje bezplatne pripojiť jeden web s minimálnymi možnosťami overenia.
http://www.siteuptime.com
Kontrola rýchlosti načítania webových stránok. Odosiela správu na e -mail. Má platené služby na monitorovanie dostupnosti stránok.
http://webo.in
Kontrola rýchlosti načítania stránok stránok.
http://www.iwebtool.com/speed_test
Kontrola indexovania a zobrazovania stránok vyhľadávacími nástrojmi
Viditeľnosť stránok vo vyhľadávačoch
Služba sa zobrazuje Kľúčové slová pre web, pre ktorý je včas v TOP 20 (prvých dvadsiatich) Google. Údaje o návštevnosti a vyhľadávaní.
http://www.semrush.com/
Pozícia v rebríčku TOP50 yandex a Google. Názvy stránok a PR hlavnej stránky, prítomnosť v dôležitých adresároch, viditeľnosť v hornej časti pre vysokofrekvenčné požiadavky.
http://pr-cy.ru/
Kontrola zákazov a úrovne dôveryhodnosti k webu
Kontrola dôveryhodnosti stránok. Služba, ktorá tvrdí, že meria dôveru voči Yandexu (aj tak to nikto nemôže skontrolovať :).
http://xtool.ru/
Kontroluje sa zavedenie filtrov Panda a Penguin od spoločnosti Google. Táto služba vám umožňuje vizuálne zistiť, či sa webová stránka zrútila v dňoch aktualizácie Panda a Penguin.
http://feinternational.com/website-penalty-indicator/
Kontrola poradia stránok na stránkach (pri kopírovaní adresy URL do nástroja musíte vymazať posledné písmeno a potom ho prepísať).
http://www.prchecker.net/
Kontrola histórie vývoja stránok
Ukazuje históriu vývoja stránok a umožňuje vám zobrazovať snímky starých stránok.
http://www.archive.org/web/web.php
História pozícií stránok v TOP Google (kľúčové frázy, stránky, nadpisy), PR ukazovatele, CY, Alexa Rank, počet spätných odkazov na obľúbené stránky.
http://SavedHistory.com
Doplnky SEO na kontrolu stránok
SEO Doctor je doplnok pre Firefox. Zobrazuje odkazy na stránke a poskytuje užívateľsky prívetivé rozhranie k rôznym službám SEO.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake je doplnok pre Firefox. Ukazuje najdôležitejšie vlastnosti stránky: TCI, PR, spätné odkazy, Alexa Rank. Funguje s Googlom aj s Yandexom. Poskytuje schopnosť rýchlo analyzovať konkurenciu.
http://www.seoquake.com/
IEContextHTML je doplnok pre Internet Explorer. Kontroluje indexovanie odkazov na serveroch Yandex a Google, zobrazuje zoznam externých a interných odkazov, umožňuje importovať údaje z webových stránok.
Viditeľnosť stránok vo vyhľadávacích termínoch v závislosti od polohy
Aktualizovaný zoznam bezplatných serverov proxy vrátane ruských.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Anonymný bezplatný server proxy s možnosťou predstaviť sa z troch krajín. Funguje s vyhľadávaním Google.
https://hide.me/en/proxy
Emulátory Google vyhľadávanie v rôznych krajinách zadaním parametrov vyhľadávania.
http://searchlatte.com/
http://isearchfrom.com/
Kontrola pozícií na serveroch Yandex a Google
Táto služba umožňuje hĺbkovo skontrolovať (až 500) polohu lokality podľa regiónu v Yandexe.
Analýza sieťových stránok, kontrola spätných odkazov
Analýza spätného odkazu
Analyzuje hmotnosť odkazu na webe, generuje rezy podľa rôznych kritérií: typ odkazu, text ukotvenia, stránky. Ukazuje hmotnosť spätných odkazov. Služba je k dispozícii iba pre registrovaných užívateľov.
http://ahrefs.com
Kontrola prítomnosti spätných odkazov na stránku
Skontroluje spätné odkazy na web v navrhovanom zozname adries URL (až 100 stránok).
http://webmasters.ru/tools/tracker
Kontrola popularity stránok na sociálnych sieťach
PlusOneChecker
Ukazuje počet označení Páči sa mi (plus jeden) v službe Google+. Okamžite môžete zadať zoznam začiarknutých URl.
http://www.plusonechecker.net/
Facebook Graph API Explorer
SharedCount
Ukazuje popularitu na stránkach Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com
Cool sociálne
Ukazuje popularitu prvej stránky webu v službách Twitter, Google+, Facebook, Delicious, StumbleUpon. Pre ruské weby sú údaje niekedy nesprávne.
http://www.coolsocial.net
Sociálna popularita
Sociálna kralytika
Naskenuje web a generuje správy „Podiely“ veľkých zahraničných subjektov sociálne siete pre tieto stránky. Registruje používateľov pomocou účtu Twitter. Správy je možné vidieť hneď nasledujúci deň.
https://socialcrawlytics.com
Kontrola stránky na prítomnosť vírusov
Dr.Web
Skontroluje podozrivý kód na zadanej adrese URL, zobrazí nahrané skripty a výsledky ich skenovania.
http://vms.drweb.com/online/
Vírus celkom
Pomocou 30 skenerov kontroluje adresy URL na prítomnosť vírusov.
https://www.virustotal.com/#url
Alarm
Systém na ochranu stránok pred vírusmi. Denne kontroluje súbory stránok a odosiela správu o ich zmenách e -mailom.
2016-12-29
Animujeme tlačidlá a kontrolujeme na webe platnosť kódu HTML a CSS
Dobrý deň, milý návštevník!
Dnes na príklade vytvorenej webovej stránky zvážime, ako môžete skontrolovať platnosť stránky, konkrétne či je v súlade so zavedenými špecifikáciami jazykov HTML a CSS.
Okrem toho pred kontrolou urobíme niekoľko revízií šablóny štýlov CSS v časti súvisiacej s „animáciou“ tlačidiel na bočnom paneli, kde zo statických tlačidiel vytvoríme interaktívne tlačidlá, ktoré menia ich vzhľad v závislosti od jeho stavu - pasívny, aktívny a lisovaný.
- Vytváranie tlačidiel trojrozmerne
- Interaktivita tlačidiel
- Potrebujete potvrdenie
- Ako overiť HTML kód
- Ako overiť kód CSS
- Zdrojové súbory stránok
Vytváranie tlačidiel trojrozmerne
V predchádzajúcom článku sme upravili oblasť hlavného obsahu tak, aby zodpovedala rozloženiu domovskej stránky. Navyše, na tento moment bočný panel obsahuje tlačidlá, ktoré sú statické a vyzerajú ako pravidelný plochý hnedý obdĺžnik so zaoblenými rohmi.
Nasleduje úryvok bočného panela s takýmito tlačidlami.
Aby sme mohli tlačidlá „animovať“, najskôr im poskytneme určitý objem pomocou štýlov CSS. A urobíme to pomocou vlastnosti lineárneho gradientu, ktorá bola predtým použitá pri návrhu blokov rotátora, vyhľadávania a predplatného.
Hodnoty lineárneho gradientu sú definované nasledovne:
1. Odtiene farieb budú nastavené zdola nahor, začínajúc tmavšou farbou ako je hlavná farba tlačidla. Ak chcete určiť, akú farbu použiť na začiatku prechodu, použite nástroj grafický editor, v tomto prípade photoshop.
Z tohto dôvodu o otvorený dokument rozloženie návrhu, musíte vybrať „Paletu farieb“, presunúť kurzor na požadovanú oblasť tlačidla, definovať hlavnú farbu a potom pomocou nástrojov „Paleta farieb“ vybrať tmavšiu farbu rovnakého hnedého odtieňa. V našom prípade vezmeme farbu s hodnotou „653939“. Ako sa to dá urobiť, je jasne ukázané na obrázku nižšie.
2. Ďalej definujte koncovú polohu prechodu, v ktorej sa počiatočná, tmavšia farba zmení na hlavnú. Pozíciu zastavenia umiestnime približne do stredu. Zároveň, aby sme dosiahli sýtejšiu farbu, posunieme polohu zastavenia o niečo vyššie a definujeme jeho hodnotu, povedzme 70% výšky.
3. Posledná vec, ktorú je potrebné priradiť gradientu, je definovať svetlejšiu farbu ako je základná farba, ktorou budú zafarbené tlačidlá v hornej časti. To sa robí rovnakým spôsobom ako pri definovaní počiatočnej farby prechodu. V tomto prípade budeme hodnotu tejto farby brať ako „b88686“.
3. Na základe získaných údajov pridajte k predtým vygenerovanému lineárny gradient Vlastnosti CSS tlačidlá.
vstup: {
výška : 30 pixlov;
okrajové dno : 10px;
polomer hranice : 5px;
pozadie : # a76d6d;
zarovnanie textu : stred;
hmotnosť písma : tučné;
farba : #fff;
plavák : správny;
obrázok na pozadí
Je možné poznamenať, že pri určovaní extrémnych farieb tu nie sú uvedené zastavovacie polohy, pretože to nie je potrebné robiť pri hodnotách 0% a 100%.
Teraz obnovme prehliadač a uvidíme výsledok.
Ako vidíte, tlačidlá získali mierne vydutie. Teraz ich môžete začať „revitalizovať“.
Interaktivita tlačidiel
Aby sme mohli s tlačidlami plne pracovať, urobíme ich interaktívnymi, ktoré budú vizuálne odrážať ich tri hlavné stavy, pasívne (tlačidlo je v pôvodný stav), aktívny (kurzor je na tlačidle) a stlačený (keď je kurzor ukázaný, tlačidlo myši stlačíte a podržíte).
A urobíme to pomocou kombinácie vlastností tieňa a okraja. Podstata tejto techniky spočíva v tom, že zmenou farby tieňa a okrajov z rôznych strán môžete dosiahnuť imitáciu zmeny stavu tlačidiel.
Najprv to urobme pre pasívny stav a pokúsme sa to vykresliť tak, aby sa tlačidlá zdvihli nad povrch.
Farby okrajov a tieňov vyberieme rovnako ako v predchádzajúcich prípadoch.
Kód CSS po príslušných doplnkoch bude mať formu.
vstup: {
výška : 30 pixlov;
okrajové dno : 10px;
polomer hranice : 5px;
pozadie : # a76d6d;
zarovnanie textu : stred;
hmotnosť písma : tučné;
farba : #fff;
plavák : správny;
obrázok na pozadí : lineárny gradient (hore, # 653939, # a76d6d 50%, # b88686);
box-tieň : 2px 2px 4px 0px # 422a2a;
šírka okraja : 2px;
hraničnom štýle : pevný;
farba okraja : #ddbebe # 241616 # 241616 #ddbebe;
Tu je možné poznamenať, že okraje sú reprezentované kombináciou vlastností, ktoré určujú hrúbku (šírka-hranica s hodnotou 2px), štýl (štýl ohraničenia) s hodnotou, ktorá určuje plné orámovanie a farby (farba orámovania) na každej zo štyroch strán.
Aktualizujme prehliadač a uvidíme, ako budú teraz vyzerať tlačidlá.
Ako vidíte, tlačidlá sa v tomto stave zdajú byť zdvihnuté.
Teraz sa pokúsime, aby tlačidlá vyzerali ako stlačené. Za týmto účelom odstránime tieň a zmeníme farbu okrajov. V tomto prípade použijeme špeciálny volič pseudotriedy: hover, zodpovedajúci aktívnemu stavu.
CSS pre aktívny stav tlačidiel bude vyzerať takto.
vstup: vznášať sa {
box-tieň : žiadny;
farba okraja : # a76d6d # a76d6d # a76d6d # a76d6d;
V takom prípade znova zmeníme farbu okrajov a pridáme tieň, iba v tomto prípade bude interný a bez odsadenia. Selektor pseudotriedy sa tiež zmení na: aktívny, čo zodpovedá stlačenému stavu.
Kód CSS pre stlačený stav bude nasledujúci.
vstup: aktívny {
box-tieň : 0px 0px 7px 2px # 422a2a vložka;
farba okraja : # 777 #fff #fff # 777;
Na porovnanie je nižšie uvedené tlačidlo „Hľadať“, kde môžete jasne vidieť, ako mení svoj vzhľad v závislosti od stavu.
Obr. 8 Pasívny stav
Tu sme dokončili rozloženie hlavnej stránky a dostali sme ju do podoby, ktorá zodpovedá rozloženiu dizajnu. A teraz musíme, ako predtým v každej fáze, skontrolovať krížovú zhodu v rôzne prehliadače... Predtým však skontrolujeme validáciu stránky, pretože stav kódu môže do určitej miery ovplyvniť krížovú konzistenciu. Preto teraz vykonáme túto veľmi potrebnú operáciu.
Potrebujete potvrdenie
Validácia je overenie kódu podľa stanovených noriem. Rozlišujte medzi validáciou správnosti kódu HTML a CSS. Zároveň je zrejmé, že v jednom prípade je kontrolovaný HTML kód, v druhom CSS kód.
Mnohým pravdepodobne príde divná otázka, či je potrebná validácia. Ak sa však pozriete na internet, vidíte, že existuje veľa ľudí, ktorí sa domnievajú, že platný kód je voliteľný a že je to strata času, pretože prehliadače fungujú dobre aj vtedy, ak existujú všetky druhy chýb.
Webové stránky môžu v mnohých prípadoch fungovať dobre aj na neplatnom kóde, ale krížovú konzistenciu v takýchto prípadoch nemožno zaručiť. Koniec koncov, existujú štandardy pre samotné programovacie jazyky, ale na to, že prehliadače opravujú chyby rovnakým spôsobom, taký štandard, samozrejme, neexistuje a nemôže byť. A preto, rôzne prehliadače dokáže spracovať chyby rôznymi spôsobmi, čo môže viesť k odlišnému zobrazeniu stránok.
A vo všeobecnosti nie je jasné, prečo niektorí ľudia majú k svojej práci taký obrazný prístup, podľa zásady „urobí to len“. Ak teda niekto verí, že nepotrebuje skontrolovať platnosť kódu, je to jeho právo a len ťažko ho možno presvedčiť o opaku, a nie je to ani potrebné.
Teraz prejdeme k priamej kontrole platnosti kódov, najskôr HTML, potom CSS.
Ako overiť HTML kód
Ako je teraz vidieť, samotná kontrola validácie kódu je pomerne jednoduchá. Odstránenie chýb však zvyčajne trvá určitý čas. Ak kód pozostáva z niekoľkých riadkov, potom tu nemôžu nastať ťažkosti. Ak ich však existujú stovky a tisíce, možno budete musieť tvrdo pracovať, všetko závisí od toho, ako dobre bol kód zostavený. Preto je lepšie to robiť častejšie spoločne s kontrolou krížovej konzistencie.
Tu zvážime najjednoduchší a najbežnejší variant kontroly platnosti - to je použitie stránky "W3C Consortium", ktorá s podporou vývojárov prehliadača vyvíja špecifikácie pre kódy webových stránok.
Ak chcete skontrolovať kód HTML, stačí kliknúť na odkaz https://validator.w3.org/, kde sa otvorí stránka s poľom na zadanie adresy kontrolovanej stránky.
snímka obrazovky 51
Po kliknutí na tlačidlo „Skontrolovať“ získame výsledok kontroly.
V tomto prípade je kód HTML platný, ale existuje odporúčanie použiť s hodnotou atribút lang "ru", pretože stránka používa ruštinu.
Atribút lang má prehliadačom umožniť správne zobrazenie určitých znakov, napríklad úvodzoviek, v závislosti od používaného jazyka. Preto nebude pre nás nadbytočné zahrnúť ho do kódu HTML. A poďme na to html tag aby tento atribút mohol pôsobiť na celý dokument.
Ako vytvoriť tento doplnok, je uvedené v nasledujúcej tabuľke.
"ru" >
. . .
A teraz, keď urobíme druhú kontrolu, môžeme vidieť, že kód sa stal úplne platným bez akýchkoľvek komentárov.
Týmto spôsobom sme skontrolovali súbor zverejnený na internete. Keď však stránka ešte nie je zverejnená na webe, môžete skontrolovať jej platnosť inými spôsobmi, buď to, že súbor nahráte pomocou tlačidla Prehľadávať, alebo pomocou formulára priamo skopírujete kód HTML.
Na snímke obrazovky je posledná možnosť, keď sa kód webovej stránky skopíruje priamo do formulára na overenie.
Po vykonaní kontroly dostaneme podobný výsledok a tiež sa tu zobrazí skontrolovaný kód. V prípade nájdenia chýb budú zvýraznené, aby sa zjednodušilo vyhľadávanie, čo výrazne zjednodušuje prácu na ich odstránení.
Ako overiť kód CSS
Pokryli sme kontrolu validácie HTML. Overenie kódu CSS prebieha v presne rovnakom poradí. Iba v tomto prípade musíte použiť inú stránku validátora, ktorá je v takom prípade umiestnená na adrese http://jigsaw.w3.org/css-validator/.
Otvoríme ho a rovnako ako predtým zadáme adresu kontrolovanej stránky, potom stlačíme tlačidlo „Skontrolovať“.
Výsledok tejto kontroly je zobrazený na snímke obrazovky.
Ako vidíte, náš kód CSS je úplne v súlade so špecifikáciou bez akýchkoľvek chýb, čo je dobrý výsledok.
Poradie ostatných spôsobov overenia v tomto prípade úplne zodpovedá podobným kontrolám kódu HTML. Preto sa tu nebudeme opakovať a tu ukončíme zvažovanie overovacích kontrol.
Potom skontrolujeme krížovú zhodu našej stránky a zaistíme, aby sa vo všetkých prehliadačoch zobrazovala rovnako, v tomto prípade dokončíme rozloženie hlavnej stránky webu.
A tým sa budeme zaoberať bezprostredne po novoročných sviatkoch.
A na záver môžete všetkým popriať šťastný nový rok! Prajem vám zdravie, lásku, radosť, prosperitu a samozrejme veľký úspech pri vytváraní vlastnej stránky pre možnosť úspešnej práce na internete!
Zdrojové súbory stránok
Zdrojové súbory stránok s aktualizáciami, ktoré boli vykonané v tomto článku, je možné stiahnuť z priloženého dokumentu dodatočné materiály.
Táto zbierka obsahuje nádhernú zbierku online služby o práci s kódmi CSS. Všetky tieto služby veľmi uľahčujú život vývojárovi webu. S ich pomocou môžete pre web vygenerovať mriežku CSS, skontrolovať chyby v kóde, prispôsobiť kód rôznym prehliadačom, generovať štýly CSS podľa štýlov vrstvy Photoshopu, získať kódy vzorov pre pozadie a prechody, komprimovať CSS na zvýšenie rýchlosti načítania stránok. Existuje mnoho služieb, ktoré sa špecializujú na prácu s písmami a ich vizuálnu prezentáciu.
Mriežka CSS 1 kB
Len s tromi parametrami sa generuje mriežka CSS. Šírka je tiež uvedená v pixeloch. 
Návrhár mriežky
Komplexnejšia služba. Prispôsobiteľná mriežka CSS podľa niekoľkých parametrov. Druhý blok generuje text, ktorý sa zobrazí v stĺpcoch. Výsledkom je, že máme hotovú šablónu CSS a HTML. 
CSS Lint
Služba na kontrolu chýb kódu vášho webu. 
Primer CSS
Vložením kódu HTML do dialógového okna získate zoznam všetkých uvedených tried a ID, ktoré sú uvedené v CSS. 
PredponaMyCSS
Ak zadáte zdrojový kód CSS, môžete na výstupe získať kód upravený pre rôzne prehliadače. 
Modernizr
Táto služba ponúka stiahnutie a nainštalovanie knižnice JavaScript pomocou otvorený zdrojčo vám nejakým spôsobom pomôže pri vytváraní webovej stránky. Presnejšie to nemôžem povedať, pretože som sám neskúsil, čo to je. 
Štýly vrstiev
Veľmi užitočná služba. Na základe nastavení dialógového okna štýlov vrstvy programu Photoshop vygeneruje kód CSS. 
Ultimate CSS Gradient Generator od ColorZilla
Na výber je veľký počet gradientov a ich CSS kódy prispôsobené pre rôzne prehliadače. 
Spritebox
Umožňuje rýchlo a jednoducho vytvárať triedy a identifikátory z jedného obrázku 
Automatická vložka CSS
Automaticky prevádza všetky miestne štýly na vložené CSS na použitie v zoznamoch adries. 
Typetester
Umožňuje porovnať pravopis rôznych písem a získať kód CSS vybraného štýlu pravopisu. 
Kombinátor webového písma
Táto služba vám umožňuje vizuálne vidieť, ako budú vyzerať rôzne kombinácie písiem v nadpisoch, podnadpisoch a v hlavnom texte.
Stránky všetkých webových stránok na internete sú formátované špeciálnym kódom napísaným podľa štandardizovaných pravidiel HTML.
Čo je platnosť?
Overenie je kontrola dodržiavania stanovených noriem a v kontexte, ktorý používajú správcovia webu, správnosť kódu stránky: chyby syntaxe, vnorené značky atď. Ak je všetko vykonané „správne“, kód stránky by nemal obsahovať nesprávne atribúty, konštrukcie a chyby. Overenie webu vám umožňuje identifikovať chyby, ktoré by mali byť opravené.
Platnosť stránky je v súlade kódu s existujúcimi štandardmi HTML.
Môžete zistiť, či sú v kóde webovej stránky poznámky alebo chyby, a to online aj bez prístupu na internet a pomocou offline programov.
Čo sú validátory kódu
Validátor kódu je program, ktorý je možné použiť na kontrolu súladu HTML kódu stránok a kódu CSS s modernými štandardmi. Nájde a opraví nesprávne prvky, ukáže na ich umiestnenie a formuluje, čo presne je nesprávne naformátované.
Hlavné „znaky“ platného rozloženia
Platné rozloženie obsahuje kód, ktorý plne vyhovuje požiadavkám W3C (World Wide Web Consortium), ktoré vyvíja technologické štandardy pre celý internet.
Ak je kód na stránkach stránok správny, potom sa web vo všetkých prehliadačoch zobrazuje správne (a nie krivo).
Neexistuje žiadne podozrenie na nespravodlivý prechod na nižšiu verziu v SERP a nie sú vyradené žiadne stránky z indexu.
Príklad. Ak predpokladáme, že značky sú nesprávne