2016-12-29
Szia kedves látogató!
Ma egy létrehozott weboldal példáján megvizsgáljuk, hogyan ellenőrizheti az oldal érvényességét, nevezetesen a meghatározott előírásoknak való megfelelést. HTML nyelvekés CSS.
Ezenkívül az ellenőrzés előtt finomítjuk a táblázatot css stílusok az oldalsáv gombjainak "animációjával" foglalkozó részben, ahol statikus gombokból interaktív gombokat készítünk, amelyek megváltoztatják kinézetállapotától függően - passzív, aktív és nyomott.
Az előző cikkben a fő tartalomterületet úgy alakítottuk ki, hogy illeszkedjen a főoldal elrendezéséhez. Ugyanakkor be Ebben a pillanatban az oldalsáv olyan gombokat tartalmaz, amelyek statikusak, és úgy néznek ki, mint egy szabályos lapos barna téglalap, lekerekített sarkokkal.
Az alábbiakban egy ilyen gombokkal ellátott oldalsáv töredéke látható.
A gombok „animálásához” először adunk nekik némi hangerőt CSS-stílusok használatával. És ezt a lineáris gradiens tulajdonság segítségével fogjuk megtenni, amelyet már használtak a rotátor, a keresési és az előfizetési blokkok tervezésénél.
A lineáris gradiens értékeit a következőképpen határozzuk meg:
1. A színárnyalatok alulról felfelé kerülnek beállításra, a gomb fő színéhez képest sötétebb színnel kezdve. Az eszköz segítségével meghatározhatja, hogy milyen színt használjon a színátmenet elején grafikus szerkesztő, V ez az eset photoshop.
Ehhez a dokumentum megnyitása A tervezési elrendezéshez ki kell választania a "Színpaletta", vigye a kurzort a gomb kívánt területére, határozza meg a fő színt, majd használja a "Színpaletták" eszközeit a sötétebb szín kiválasztásához. ugyanaz a barna árnyalat. Esetünkben vegyük a „653939” értékű színt. Egyértelmű, hogy az alábbi képernyőképen látható, hogyan lehet ezt megtenni.
2. Ezután határozza meg a gradiens leállítási pozícióját, ahol a kezdeti, sötétebb szín átmegy a fő színbe. A megállási pozíció körülbelül a közepén lesz. Ugyanakkor a szín telítettebbé tétele érdekében mozgassuk kicsit feljebb a stop pozíciót, és határozzuk meg az értékét, mondjuk a magasság 70%-át.
3. Az utolsó lépés a színátmenet tulajdonságainak beállításához az, hogy a fő színhez képest világosabb színt definiálunk, ami a tetején lévő gombokat fogja színezni. Ez ugyanúgy történik, mint a gradiens kezdeti színének meghatározásakor. Ebben az esetben ennek a színnek az értéke "b88686" lesz.
3. A kapott adatok alapján adjunk hozzá egy lineáris gradienst az előzőleg képzetthez CSS tulajdonságok gombokat.
bemenet: {
magasság :30px;
margó-alsó :10px;
határ-sugár :5px;
háttér :#a76d6d;
szöveg igazítás :központ;
font-weight :bátor;
szín :#fff;
úszó :jobb;
háttérkép
Megjegyzendő, hogy az extrém színek meghatározásakor itt nem adjuk meg a stoppozíciókat, mivel ezt nem szükséges 0% és 100% értékekkel megtenni.
Most frissítsük a böngészőt, és nézzük meg az eredményt.
Mint látható, a gombok enyhén kidudorodtak. Most elkezdheti "újraéleszteni" őket.
A gombokkal való teljes körű működés érdekében interaktívvá tesszük őket, amelyek vizuálisan tükrözik három fő állapotukat: passzív (a gomb a kezdeti állapotában van), aktív (a kurzor a gomb felett van) és lenyomott (egér). gombot lenyomva tartva, miközben a kurzor lebeg).
És ezt az árnyék és a szegély tulajdonságok kombinációjával fogjuk megtenni. Ennek a technikának az a lényege, hogy az árnyék és a szegélyek színének különböző oldalról történő megváltoztatásával a gombok állapotváltozásának utánzatát érheti el.
Először is tegyük ezt a passzív állapothoz, és próbáljuk meg úgy rajzolni, hogy a gomb a felület fölé emelkedjen.
A szegélyek és az árnyékok színeit ugyanúgy választjuk ki, mint az előző esetekben.
A CSS-kód a megfelelő kiegészítések után a formát veszi fel.
bemenet: {
magasság :30px;
margó-alsó :10px;
határ-sugár :5px;
háttér :#a76d6d;
szöveg igazítás :központ;
font-weight :bátor;
szín :#fff;
úszó :jobb;
háttérkép :linear-gradient(top, #653939, #a76d6d 50%, #b88686);
doboz árnyéka :2px 2px 4px 0px #422a2a;
határ-szélesség :2px;
határ stílus :szilárd;
szegély színe :#ddbebe #241616 #241616 #ddbebe;
Itt észrevehető, hogy a szegélyeket olyan tulajdonságok kombinációja jelenti, amelyek meghatározzák a vastagságot (szegélyszélesség az értékkel 2px), egy stílus (border-style ), amelynek értéke egy tömör szegélyt és színeket (border-color ) határoz meg mind a négy oldalon.
Frissítsük a böngészőt, és nézzük meg, hogyan fognak most kinézni a gombok.
Amint látja, a gombok ebben az állapotban felemelkedtek.
Most próbáljuk meg a gomboknak a lenyomott állapot látszatát kelteni. Ehhez távolítsa el az árnyékot, és változtassa meg a szegélyek színét. Ebben az esetben egy speciális, az aktív állapotnak megfelelő pszeudoosztályválasztót :hover fogunk használni.
A gombok aktív állapotához tartozó CSS-kód a következő formában jelenik meg.
bemenet: lebeg {
doboz árnyéka :egyik sem;
szegély színe :#a76d6d #a76d6d #a76d6d #a76d6d;
Ebben az esetben ismét megváltoztatjuk a szegélyek színét és hozzáadunk egy árnyékot, csak ebben az esetben belső lesz és elmozdulás nélkül. A pszeudoosztály választó is :active -ra változik, a lenyomott állapotnak megfelelően.
A lenyomott állapot CSS-kódja a következő lenne.
bemenet: aktív {
doboz árnyéka :0px 0px 7px 2px #422a2a betét;
szegély színe :#777 #fff #fff #777;
Az alábbiakban összehasonlításképpen látható a "Keresés" gomb, ahol jól látható, hogy állapottól függően hogyan változtatja meg megjelenését.
8. ábra Passzív állapot
Itt fejeztük be a főoldal elrendezését, és a tervezési elrendezésnek megfelelő megjelenésre hoztuk. Most pedig, mint korábban minden szakaszban, ellenőriznünk kell a kereszt-megfelelőséget különböző böngészők. De előtte nézzük meg az oldal érvényesítését, hiszen a kód állapota is befolyásolhatja valamennyire a keresztkonzisztenciát. Ezért most ezt a nagyon szükséges műveletet fogjuk elvégezni.
Az érvényesítés a kód ellenőrzése a megállapított szabványok szerint. A HTML és a CSS kód helyességét ellenőrzik. Nyilvánvaló, hogy az egyik esetben a HTML kódot, a másikban a CSS kódot ellenőrzik.
Valószínűleg sokan furcsának fogják találni azt a kérdést, hogy szükség van-e az érvényesítésre. De ha felnézünk a neten, láthatjuk, hogy sokan úgy gondolják, hogy az érvényes kód nem kötelező, ez plusz időpocsékolás, hiszen a böngészők mindenféle hiba esetén is jól működnek.
Természetesen sok esetben az oldalak jól működhetnek érvénytelen kódon, de a keresztmegfelelés ilyen esetekben nem garantálható. Hiszen magukra a programozási nyelvekre is vannak szabványok, de arra a tényre, hogy a böngészők ugyanúgy javítják a hibákat, természetesen nincs ilyen szabvány, és nem is lehet. És ezért, különféle böngészők különböző módokon tudja kidolgozni a hibákat, ami eltérő oldalmegjelenítéshez vezethet.
És általában nem világos, hogy egyesek miért ilyen figisztikusan viszonyulnak a munkájukhoz, az „és így lesz” elv szerint. Ezért, ha valaki úgy gondolja, hogy nem kell ellenőriznie a kód érvényességét, akkor ez az ő joga, és nem valószínű, hogy meggyőződhet az ellenkezőjéről, és nem is kell.
És most térjünk át a kódok érvényességének közvetlen ellenőrzésére, először a HTML-re, majd a CSS-re.
Lényegében maga a kódellenőrzés meglehetősen egyszerű, amint azt most láthatjuk. De itt általában a hibák kiküszöbölésére van szükség pontos idő. Természetesen, ha a kód több sorból áll, akkor itt nem merülhetnek fel nehézségek. De ha több száz és több ezer van belőlük, akkor lehet, hogy itt keményen kell dolgoznia, minden attól függ, hogy a kódot mennyire sikerült lefordítani. Ezért jobb ezt gyakrabban megtenni a keresztmegfelelőség közös ellenőrzésével.
Itt tekintjük a legegyszerűbb és leggyakoribb lehetőséget az érvényesség ellenőrzésére - ez a "W3C Consortium" webhely használata, amely a böngésző fejlesztőinek támogatásával specifikációkat fejleszt ki a weboldal kódjaihoz.
A HTML kód érvényesítéséhez egyszerűen kövesse a https://validator.w3.org/ linket, amely megnyílik egy oldal, amelyen megadhatja az érvényesítendő oldal címét.
képernyőkép 51
Az "Ellenőrzés" gombra kattintás után megkapjuk az ellenőrzés eredményét.
Ebben az esetben a HTML kód érvényes, de ajánlatos a lang attribútumot használni az értékkel együtt "ru" mert az oldal orosz nyelvet használ.
A lang attribútum célja, hogy a böngészők bizonyos karaktereket, például idézőjeleket, helyesen jelenítsenek meg a használt nyelvtől függően. Ezért hasznos lesz, ha belefoglaljuk a HTML kódba. És tegyük bele html tag hogy ez az attribútum a teljes dokumentumra érvényes legyen.
A kiegészítés elkészítésének módja a következő táblázatban látható.
"ru" >
. . .
És most, ha elvégezzük a második ellenőrzést, láthatjuk, hogy a kód minden megjegyzés nélkül teljesen érvényes lett.
Ily módon ellenőriztük az internetre felkerült fájlt. Ha azonban az oldal még nem került fel az internetre, más módon is ellenőrizheti annak érvényességét, akár egy fájl feltöltésével a Tallózás gombbal, akár az űrlap segítségével a HTML-kód közvetlen másolásához.
A képernyőképen az utolsó lehetőség látható, amikor a weboldal kódját közvetlenül az űrlapba másoljuk ellenőrzés céljából.
Az ellenőrzés elvégzése után hasonló eredményt kapunk, és itt is megjelenik az ellenőrzött kód. Abban az esetben, ha hibákat találnak, azok kiemelve lesznek a keresés egyszerűsítése érdekében, ami nagyban leegyszerűsíti a kiküszöbölésüket.
Kitértünk a HTML kód érvényesítésére. A CSS-kód ellenőrzése pontosan ugyanabban a sorrendben történik. Csak ebben az esetben egy másik érvényesítő oldalt kell használnia, amely ebben az esetben a http://jigsaw.w3.org/css-validator/ címen található.
Nyissuk meg, és az előzőhöz hasonlóan írjuk be az ellenőrizni kívánt oldal címét, majd nyomjuk meg az „Ellenőrzés” gombot.
Az ellenőrzés eredménye a képernyőképen látható.
Amint látja, CSS kódunk hiba nélkül teljes mértékben megfelel a specifikációnak, ami jó eredmény.
Az egyéb érvényesítési módszerek sorrendje ebben az esetben teljesen egybeesik a HTML-kód hasonló ellenőrzéseivel. Ezért itt nem ismételjük meg magunkat, és befejezzük az érvényesítési ellenőrzések áttekintését.
Ezt követően ellenőrizzük, hogy oldalunkon nincs-e keresztkép, és megbizonyosodunk arról, hogy minden böngészőben egyformán jelennek meg, ezzel teljessé válik az oldal főoldalának elrendezése.
És az újévi ünnepek után azonnal megtesszük.
Végezetül pedig gratulálhatunk mindenkinek a közelgő újévhez! Az újévben pedig kívánok egészséget, szeretetet, örömet, jólétet és természetesen sok sikert a saját weboldal elkészítéséhez a sikeres internetes munka lehetőségéhez!
Az oldal forrásfájljai az ebben a cikkben elvégzett frissítésekkel a mellékelt oldalról letölthetők kiegészítő anyagok.
Érvényesítés- ez az oldalak vagy a teljes webhely egészének ellenőrzése a helyesség és az összes webes szabványnak való megfelelés szempontjából. Az összes ilyen szabványt a W3C határozza meg, amely ennek megfelelően érvényesíti webhelyét. Ezen a szolgáltatáson keresztül ellenőrizheti HTML hibák és CSS hibák. Ha hibákat találunk az erőforráson, akkor nem tény, hogy az bármelyik böngészőben pontosan úgy jelenik meg, mint az Öné. A sablon elrendezésének elkészítésekor ellenőrizni kell a kód érvényességét, mivel ez egy gyönyörű és letisztult kód, amelyet a keresőmotorok és a böngészők kedvelnek. És most megtudjuk, hogyan történik az ellenőrzés.
Ellenőrizheti:
Az erőforrásra váltás után csak be kell írnia az erőforrás címét a beviteli sorba, és megkapja az eredményt. És ha az oldalad átmegy az ellenőrzésen, a rendszer kiadja zöld jelzés"közlekedési lámpa". Ha egy vagy több hibát talál, akkor mindezeket a hibákat, és egyben piros „közlekedési lámpa” jelzést ad. Az érvényesítő minden egyes hiba alatt megpróbál a lehető legtöbb információt megadni a probléma megoldásáról. Ha persze megérted angol nyelvés megérti a kódot, akkor minden talált hibát gond nélkül kijavíthat.
És így néz ki a jelentés az oldal ellenőrzése után:
Amint látjuk, a szolgáltatás 20 hibát és 3 veszélyeset talált. Korábban körülbelül 150 hiba volt). Sok embernek nem sikerül minden hibát kijavítania a sablonok miatt. Ahogy olvastam az egyik oldalon: "Tegye érvényessé a webhelyet, és veszítse el a webhely minden szépségét." De továbbra is törekednie kell arra, hogy a lehető legkisebbre csökkentse a hibákat az oldalon!
De a stílusellenőrzéssel minden sokkal egyszerűbb, és sokkal könnyebb megjavítani. Ehhez lépjen a és mindenre a fenti sorrendben. A webhely címének megadása után a W3C rendszer visszaküldi az eredményt. Ami az oldalamat illeti, velem minden rendben van). De sok volt a hiba is, és mindent magamnak kellett változtatnom.
És a cikk végén elmondom: szinte minden ingyenes sablon nem megy át az érvényesítésen. Ha pedig sablont vagy megrendelést vásárol, feltétlenül tegyük fel azt a feltételt, amellyel a webhelynek rendelkeznie kell érvényes kódés semmi más. Kifizeti az összes pénzt, és mindennek a legmagasabb szinten kell lennie. És hogy csökkentse a szolgáltatásba való belépéssel és bejelentkezéssel töltött időt, egyszerűen telepítsen egy SEO beépülő modult a böngészőjébe. Ez menet közben ellenőrzi az összes erőforrás-paramétert, és egyúttal ellenőrzi a kódot a hibákért. A plugint használom.
Így Kedves barátaim mindig törekedj arra, hogy az oldal a lehető legjobb legyen, belsőleg és külsőleg egyaránt!
Az interneten található összes webhely oldala meg van tervezve speciális kód szabványos HTML-szabályok szerint írva.
Az érvényesítés a megállapított normák betartásának és a webmesterek által használt kontextusban az oldalkód helyességének ellenőrzése: szintaktikai hibák, címkék egymásba ágyazása stb. Ha minden „helyesen” történik, az oldal kódja nem tartalmazhat hibás attribútumokat , konstrukciók és hibák. A webhely érvényesítése lehetővé teszi a javítandó hiányosságok azonosítását.
Az oldal érvényessége a kód megfelelősége a meglévő HTML szabványoknak.
Megtudhatja, hogy vannak-e megjegyzések vagy hibák egy weboldal kódjában online és internet-hozzáférés nélkül, valamint offline programok használatával.
A kódellenőrző egy olyan program, amellyel ellenőrizhető, hogy az oldalak HTML-kódja és a CSS-kód megfelel-e a modern szabványoknak. Megkeresi és kijavítja a hibás elemeket, megjelöli a helyüket és megfogalmazza, hogy pontosan mi van keretezve rosszul.
Az érvényes elrendezés olyan kódot tartalmaz, amely teljes mértékben megfelel a W3C (World széles háló Konzorcium, amely technológiai szabványokat fejleszt a teljes internetre.
Ha a webhely oldalain található kód helyes, akkor minden böngészőben helyesen (és nem ferdén) jelenik meg a webhely.
A SERP-kben nem merül fel tisztességtelen „visszaminősítés” gyanúja, és egyetlen oldal sem került ki az indexből.
Példa. Ha tegyük fel, hogy a címkék rosszak
Térjünk át a puszta szövegről az elméletre a gyakorlatra, és tanuljuk meg, hogyan végezzünk online érvényesítési ellenőrzéseket
