Chyba ověření: typ tohoto dokumentu není html. Jak změnit téma WordPress. Webový inspektor. Jaká je situace s kontrolou CSS kódu?
Základy HTML obsahují základní pravidla jazyk HTML, popis struktury HTML stránky, vztahy ve struktuře HTML dokumentu mezi HTML prvky.
HTML dokument je běžný dokument textový dokument, lze vytvořit jako obvykle textový editor(Notepad) a ve specializovaném se zvýrazněním kódu (Notepad++, Visual Studio kód atd.). HTML dokument má příponu .html.
HTML dokument se skládá ze stromu HTML prvků a textu. Každý prvek je ve zdrojovém dokumentu identifikován počátečním (otvíracím) a koncovým (uzavíracím) tagem (až na vzácné výjimky).
Počáteční značka ukazuje, kde prvek začíná, koncová značka ukazuje, kde končí. Závěrečná značka se tvoří přidáním lomítka / před název značky: .... Mezi počátečním a závěrečným tagem je obsah tagu – obsah.
Jednotlivé značky nemohou ukládat obsah přímo, zapisuje se jako hodnota atributu, například značka vytvoří tlačítko s textem Tlačítko uvnitř.
Značky lze vnořit do sebe, např.
Text
. Při investování byste se měli řídit pořadím, ve kterém jsou uzavřeny (princip „matryoshka“), například následující údaj bude nesprávný:Text
.Prvky HTML mohou mít atributy (globální, aplikované na všechny prvky HTML a jejich vlastní). Atributy se zapisují do úvodní značky prvku a obsahují název a hodnotu, specifikovanou ve formátu atribut name="value" . Atributy umožňují měnit vlastnosti a chování prvku, pro který jsou nastaveny.
Každému prvku lze přiřadit více hodnot třídy a pouze jednu hodnotu id. Více hodnot tříd je zapsáno oddělených mezerou, . Hodnoty class a id se musí skládat pouze z písmen, čísel, pomlček a podtržítek a musí začínat pouze písmeny nebo čísly.
Prohlížeč prohlíží (interpretuje) dokument HTML, vytváří jeho strukturu (DOM) a zobrazuje jej v souladu s pokyny obsaženými v tomto souboru (styky, skripty). Pokud je označení správné, v okně prohlížeče se zobrazí stránka HTML obsahující prvky HTML – záhlaví, tabulky, obrázky atd.
Interpretační proces (analýza) začíná před úplným načtením webové stránky do prohlížeče. Prohlížeče zpracovávají dokumenty HTML sekvenčně, od začátku, zatímco zpracovávají CSS a související šablony stylů s prvky stránky.
HTML dokument se skládá ze dvou částí - záhlaví - mezi tagy ... a obsahové části - mezi tagy ....
Struktura webové stránky 1. Struktura HTML dokumentuHTML se řídí pravidly obsaženými v souboru deklarace typu dokumentu (Definice typu dokumentu nebo DTD). DTD je dokument XML, který definuje, které značky, atributy a jejich hodnoty jsou platné pro konkrétní typ HTML. Každá verze HTML má svůj vlastní DTD.
DOCTYPE odpovídá za správné zobrazení webové stránky prohlížečem. DOCTYPE definuje nejen HTML verze(např. html), ale také odpovídající DTD soubor na internetu.
...
Prvky uvnitř tagu tvoří strom dokumentů, tzv objektový model dokument, DOM (model objektu dokumentu). V tomto případě je prvkem kořenový prvek.
Rýže. 1. Nejjednodušší struktura webové stránky Pro pochopení interakce prvků webové stránky je nutné uvažovat tzv. rodinné vztahy» mezi prvky. Vztahy mezi více vnořenými prvky jsou klasifikovány jako rodič, potomek a sestra.
Předek je prvek, který obsahuje další prvky. Na obrázku 1 je předek všech prvků . Element je zároveň předkem všech tagů, které obsahuje: ,
.
Potomek je prvek umístěný v rámci jednoho nebo více typů prvků. Například je potomkem prvků , a prvku
Je potomkem obou a .
Nadřazený prvek – prvek, který souvisí s jinými prvky více než jedním nízká úroveň a nachází se na stromě nad nimi. Na obrázku 1 a . Štítek
Je rodič pouze pro .
Dětský prvek- prvek přímo podřízený jinému prvku vyšší úrovně. Na obrázku 1 jsou pouze prvky , ,
A jsou dětmi .
Sesterský prvek- prvek, který má společné nadřazený prvek s uvažovaným tzv. prvky stejné úrovně. Na obrázku 1 a jsou prvky stejné úrovně, stejně jako prvky , a
Jsou si navzájem sestry.
1.1. Prvek 1.2. ŽivelSekce ... obsahuje technické informace o stránce: název, popis, klíčová slova pro vyhledávače, kódování atd. Informace, které tam zadáte, se nezobrazují v okně prohlížeče, ale obsahují data, která prohlížeči říkají, jak má stránku zpracovat.
1.2.1. ŽivelPožadovaná značka sekce je . Text umístěný uvnitř této značky se zobrazí v záhlaví webového prohlížeče. Název by neměl být delší než 60 znaků, aby se celý vešel do názvu. Text nadpisu by měl obsahovat co nejvíce úplný popis obsah webové stránky.
1.2.2. ŽivelVolitelná značka sekce je jediná značka. S jeho pomocí lze nastavit popis obsahu stránky a klíčová slova pro vyhledávače, autora HTML dokumentu a další vlastnosti metadat. Prvek může obsahovat více prvků, protože nesou různé informace v závislosti na použitých atributech.
Popis obsahu stránky a klíčová slova lze zadat současně v několika jazycích, například v ruštině a angličtině:
Pomocí značky můžete zablokovat nebo povolit indexování webové stránky vyhledávači:
Chcete-li stránku po určité době automaticky znovu načíst, musíte použít hodnotu obnovení:
Stránka se znovu načte po 30 sekundách. Chcete-li přesměrovat návštěvníka na jinou stránku, musíte zadat adresu URL parametr url:
| znaková sada | Určuje kódování znaků pro aktuální dokument HTML: |
| obsah | Obsahuje volný text, který určuje hodnotu spojenou s atributem http-equiv nebo name v závislosti na jejich hodnotě. |
| http-ekviv | Řídí akce prohlížeče na dané webové stránce (ekvivalent HTTP hlaviček). Při vykreslování stránky bude prohlížeč postupovat podle pokynů uvedených v atributu: default-style určuje preferovaný styl pro použití na stránce. Atribut content musí obsahovat ID prvku, který odkazuje na tabulku CSS styly, nebo identifikátor prvku obsahujícího šablonu stylů. refresh označuje čas v sekundách, než se stránka znovu načte, nebo čas před přesměrováním na jinou stránku, pokud atribut content obsahuje po čase řádek "url=adresa_stránky". Automatický restart stránek po určité době, v v tomto příkladu, po 30 sekundách: Pokud potřebujete okamžitě přesměrovat návštěvníka na jinou stránku, můžete zadat adresu URL v parametru url: |
| jméno | Přidruženo k hodnotě obsažené v atributu content. Nemělo by se používat, pokud má prvek již nastaveny atributy http-equiv , charset nebo itemprop. název-aplikace určuje název webové aplikace použité na stránce. autor uvádí jméno autora dokumentu ve volném formátu. popis definuje stručný popis k obsahu stránky, např. generátor určuje jeden z balíčků software, který se používá k vytvoření dokumentu, například: . klíčová slova obsahuje seznam klíčová slova, oddělené čárkami, odpovídající obsahu stránky, například: . Také atribut názvu může převzít následující hodnoty z rozšířené specifikace, jako je creator , googlebot , publisher , robots , slurp , viewport , i když žádná z nich ještě nebyla oficiálně přijata. |
Uvnitř tohoto prvku se nastavují styly, které se na stránce používají. Chcete-li nastavit styly v dokumentu HTML, použijte jazyk CSS. Na stránce může být několik takových prvků.
Uvnitř tohoto prvku můžete napsat formátovací kód jak pro samotné prvky webové stránky, tak pro celou webovou stránku.
.paper ( šířka: 200px; výška: 300px; barva pozadí: #ef4444; barva: #666666; )
Pro připojení k prvku daný styl, nutné skrz atribut třídy(nebo id) přiřaďte prvku příslušný název:
...
CSS kód lze vložit přímo do markup elementu jako hodnotu atributu style, například:
1.2.4. Živel
Styly dokumentu můžete nastavit i jinou metodou – zapsat je samostatný soubor s příponou .css, například style.css .
Existují dva způsoby, jak připojit soubor se styly k webové stránce:
přes direktivu @import url
@import url(style.css);
pomocí prvku. Prvek nevyžaduje uzavírací značku. Tento prvek definuje vztah mezi aktuální stránku a další dokumenty. Na stránce může být několik takových prvků. Vstup bude mít další pohled:
| crossorigin | Označuje, zda se má při načítání obrázku z webu použít CORS (technologie prohlížeče, která webové stránce umožňuje přístup ke zdrojům z jiné domény). anonymní — prohlížeč automaticky přidá do požadavku mezi doménami hlavičku Origin obsahující název domény, ze které byl požadavek vznesen. Pokud server neodpoví hlavičkou CORS Access-Control-Allow-Origin: * (nebo názvem domény místo hvězdičky), bude načítání obrázku zablokováno. use-credentials – Pokud server neposkytne přihlašovací údaje pomocí Access-Control-Allow-Credentials: true , bude načítání obrázku zablokováno. |
| href | Hlavním atributem značky, hodnotou je cesta k souboru se styly. |
| hreflang | Určuje jazyk textu v odkazovaném dokumentu. |
| média | Určuje typ zařízení, na které má být použit odkazový prostředek. |
| noce | Náhodně generovaná řetězcová proměnná na serveru, která nastavuje pravidla pro použití vložených stylů k ochraně obsahu. Hodnota atributu je textový řetězec. |
| rel | Atribut definuje vztah mezi aktuálním dokumentem a dokumentem, na který se odkazuje. alternativní - odkaz na stejný dokument, ale v jiném formátu (například stránky pro tisk, překlad, zrcadlení, zdroj ve formátu RSS nebo Atom), . archivy – označuje, že propojený dokument je historicky zajímavý. Odkaz může odkazovat na sbírku záznamů, dokumentů a dalších materiálů. odkaz autora na stránku o autorovi dokumentu nebo na stránku s kontaktními informacemi autora. záložka je odkaz na nejbližšího předka článku, kterým je odkaz, nebo na sekci článku nejblíže související s prvkem, pokud žádný předek neexistuje. externí se používá k označení toho, že stránka, na kterou odkazuje, není součástí tohoto webu. first určuje odkaz ukazující na první dokument v posloupnosti dokumentů. odkaz nápovědy na dokument nápovědy. ikona určuje cestu k ikoně, která bude použita pro aktuální dokument. poslední označuje odkaz vedoucí na poslední dokument v pořadí dokumentů. licence Odkaz na informace o autorských právech k dokumentu. next označuje, že tento dokument je součástí série a že odkaz vede na další dokument v této sérii. nofollow znamená, že odkaz není podporován autorem stránky nebo že je odkaz komerční povahy. noreferrer označuje, že hlavička požadavku klienta obsahující adresu URL zdroje požadavku by při sledování odkazu neměla být předána. pingback určuje adresu serveru pingback, který umožňuje blogu automaticky upozorňovat weby, které na něj odkazují. prefetch určuje, že odkazovaný soubor by měl být předem uložen do mezipaměti. předchozí označuje, že tento dokument je součástí série a že odkaz je na předchozí dokument v této sérii. vyhledávání označuje, že odkazovaný dokument obsahuje rozhraní pro vyhledávání a související zdroje. postranní panel označuje, že propojený dokument se zobrazí v dalším kontextu prohlížeče, pokud je to možné, a některé prohlížeče po klepnutí na hypertextový odkaz otevřou okno pro přidání odkazu do lišty záložek. odkaz na šablonu stylů externí soubor, který bude použit jako šablona stylů pro tohoto dokumentu. značka označuje, že značka s hypertextovým odkazem se vztahuje na tento dokument. nahoru označuje, že stránka je součástí hierarchické struktury a že hypertextový odkaz vede na více vysoká úroveň zdroj ve struktuře. |
| velikosti | Určuje velikost ikon pro vizuální zobrazení. Atribut size se používá pouze ve spojení s rel="icon" a může nabývat následujících hodnot: widths-height - definuje seznam velikostí oddělených mezerami, každá velikost musí být ve formátu - widths-height (rozměry ikon jsou uvedeny v pixelech), například: ; libovolná - ikonu lze změnit na libovolnou velikost. |
| titul | Definuje název odkazu nebo název sady alternativních stylů. Hodnota atributu je text. |
| typ | Určuje typ MIME dokumentu, na který se odkazuje. V v tomto případě má hodnotu "text/css" . |
| asynchronní | Atribut označuje, že skript poběží asynchronně se zbytkem stránky (skript se začne vykonávat současně s načtením stránky). |
| znaková sada | Definuje kódování znaků |
| crossorigin | Určuje, zda se při načítání použije CORS externí skripty(pomocí atributu src). anonymní - před načtením skriptu do požadavku mezi doménami prohlížeč automaticky přidá hlavičku Origin, bez předávání přístupových parametrů (cookie, certifikát X.509, login/heslo pro základní autentizace přes HTTP). Pokud odpověď serveru neobsahuje hlavičku Access-Control-Allow-Origin: název domény, skript se nenačte. use-credentials — před načtením skriptu do požadavku mezi doménami prohlížeč automaticky přidá hlavičku Origin označující přístupové parametry (cookie, certifikát SSL nebo páry login/heslo). Pokud odpověď serveru neobsahuje hlavičku Access-Control-Allow-Credentials: true, skript se nenačte. |
| odložit | Interpretace skriptů je zpožděna, dokud není dokument vykreslen na zařízení uživatele. |
| noce | Poskytuje zabezpečení tím, že chrání před útoky cross-site scripting (XSS). Nastavuje pravidla pro používání vestavěných skriptů pomocí hodnot nonce a hash. Během vykreslování stránky prohlížeč vypočítá hodnoty hash pro každý vložený skript a porovná je s těmi, které jsou uvedeny v CSP. Stahování z jiných zdrojů než " whitelist“, je zablokován. |
| src | Označuje umístění souboru skriptu, hodnota atributu je adresa URL souboru obsahujícího program JavaScript. |
| typ | Používá se k deklaraci skriptovacího jazyka použitého k sestavení obsahu značky. |
Tato část obsahuje veškerý obsah dokumentu. K dispozici pro prvek.
| onafterprint | Událost, která se spustí po odeslání stránky k tisku nebo po zavření okna tisku. |
| předtiskem | Událost, která se spustí před odesláním stránky k tisku. |
| před vyložením | Událost se spustí, když návštěvník zahájí přechod na jinou stránku nebo klikne na „zavřít okno“. Umožňuje zobrazit v potvrzovacím dialogu zprávu, která uživateli sdělí, zda chce zůstat nebo opustit aktuální stránku. |
| onhashchange | Událost se spustí, když se změní hashová část adresy URL, například když uživatel přejde z example.domain/test.aspx#page1 na example.domain/test.aspx#page2 . |
| onmessage | Událost nastane, když je zpráva přijata prostřednictvím zdroje události. |
| online offline | Událost je spuštěna prohlížečem, když prohlížeč zjistí, že došlo ke ztrátě internetového připojení. |
| online | Událost je spuštěna prohlížečem po obnovení připojení k internetu. |
| onpagehide | K události dochází, když uživatel opustí stránku pomocí navigace, jako je kliknutí na odkaz, obnovení stránky, vyplnění formuláře atd. |
| onpageshow | K události dojde, když uživatel přejde na webovou stránku po události onload. |
| vyložit | Událost se spustí, pokud se stránka z nějakého důvodu nenačte, nebo když se zavře okno prohlížeče. |
Ve svých lekcích jsem často prohlašoval jako „jedna značka by měla být umístěna uvnitř druhé“, „značka img by měla mít atribut src“, „nejdříve štítek na hlavě a pak tělo“ a tak dále. Na to všechno jsem ale nepřišel za pochodu, ale řídil jsem se nějakými předpisy, jejichž autorem je organizace, která vlastně všechny standardy vymýšlí a schvaluje – jmenuje se W3C (Consortium World Wide Web). To jsem předtím nezmínil, ale normy psaní HTML existuje několik. A každý z nich má své vlastní vlastnosti a pravidla psaní. Je to dáno tím, že HTML nestojí na místě, ale neustále se vyvíjí.
A pokud v dřívější verze standardní, když nebylo CSS technologie, pomocí značkovacího jazyka bylo možné vytvořit strukturu i design, ale nyní se objevuje zcela jiný trend - HTML se více spojilo se strukturou (základ a stavební bloky), na kterých návrh spočívá. CSS je zde něco jako dekorativní prvek, který definuje vzhled designu – obdoba obkladů a tapet, pokud tvorbu webu považujeme za stavbu domu. V tomto ohledu jsou v nových standardech HTML některé značky a atributy odpovědné za design prohlášeny za nežádoucí (zastaralé). To znamená, že současná standardní specifikace je podporuje, ale podpora bude ukončena v příštím.
Existuje ještě přísnější standard zvaný XHTML – vůbec netoleruje svobody s kódem a není shovívavý hrubé chyby. Nejnovější na momentálně– toto je HTML 5, je to budoucnost, takže se jím budeme v budoucnu řídit.
Zdá se, že by s tím mělo být vše jasné – existuje několik standardů a to je skvělé. Ale zároveň existují prohlížeče, jejichž úkolem je Zpracování HTML kód a prohlížeč nemůže vždy rozumět tomu, v jakém standardu píšeme a co přesně tím uživatel myslel, a podle toho, jak má být tento kód zobrazen. Buď použijeme Transitional HTML a prohlížeč nám odpustí mnoho chyb pomocí „jemného režimu“, nebo použijeme přísný režim kompatibility s XHTML a s chybami je třeba zacházet s maximální přísností. Jinými slovy, prohlížeč stojí před obtížným úkolem.
Co dělá prohlížeč v tomto případě? Zobrazí kód v režimu zpětná kompatibilita, - vyhlazuje všechny explicitní i implicitní chyby v kódu a snaží se co nejvíce předvídat, co tím uživatel myslel. Existují však některé zjevné nevýhody: za prvé, prohlížeč nemůže vědět, co daná osoba původně myslela. Za druhé, tento režim kompatibility může pro každý prohlížeč fungovat jinak. S čím skončíme? Existuje kód a žádné předpisy – v praxi to znamená, že stejné označení v režimu kompatibility bude prohlížeč zobrazovat jinak. Proto potřebujeme nějakým způsobem dát prohlížeči vědět, který standard budeme používat.
A taková metoda skutečně existuje, nazývá se přidání definice typu dokumentu.
V kódu je deklarace typu nastavena takto:
Tímto řádkem dáváme prohlížeči vědět, že naše stránka bude používat HTML režim 5. Tento řádek je vložen na úplný začátek dokumentu. Zkuste to ve svém testovacím souboru HTML.
Na mnoha stránkách stále najdete tento řádek:
Tento řádek znamená, že je použit standard HTML 4.01. Ale nebudeme ho používat, protože je zastaralý. Ale přesto se také vyskytuje poměrně často a stojí za to o něm vědět.
Nyní vysvětlím, proč je to všechno potřeba. Tímto řádkem nastavujeme určitý standard, podle kterého má prohlížeč zobrazovat náš dokument v okně prohlížeče. V praxi to znamená, že náš HTML kód se bude ve všech prohlížečích zobrazovat víceméně stejně. Toho všeho by nebylo možné dosáhnout, pokud bychom pracovali v režimu zpětné kompatibility (quirks mode), který je povolen, pokud je vynechána deklarace typu dokumentu. V mé praxi související s rozložením stránky to bylo opravdu důležité. Protože deklarace DOCTYPE nakonec vyřešila problém, že se stránka zobrazuje stejně ve všech prohlížečích.
Validace dokumentu.Samozřejmě, pokud si chceme sami ověřit, zda jsme někde neudělali nějakou chybu při plnění určitých standardů, nemusíme to dělat tak, že budeme náš kód zkoumat očima. To vše je již dávno automatizováno, protože existuje kontrolní nástroj, díky kterému zjistíme, zda jsme v označení neudělali zjevné chyby.
Na této stránce můžeme najít několik způsobů kontroly:
V našem případě je s největší pravděpodobností vhodná druhá nebo třetí možnost.
Osobně jsem použil třetí metodu. Můj dokument byl úspěšně ověřen, což program ohlásil řádkem Tento dokument byl úspěšně zkontrolován jako HTML5!
na zeleném pozadí.
V případě jiného výsledku se nápis zobrazí na červeném pozadí. To bude znamenat, že jsme někde udělali chybu. Ve skutečnosti program sám uvede, kde a na jakém řádku jsme udělali chybu a co přesně, i když v angličtině.
Ale v mém případě mi program kromě oznámení, že ověření bylo úspěšné, také dal tři varování:
1. Použití experimentální funkce: HTML5 Conformance Checker Faktem je, že standard HTML 5 ještě nebyl formálně schválen konsorciem, které do něj nadále zavádí nové.. Ale v praxi - stále více více vývojáři jej začínají používat již nyní, aby byli připraveni na zítřek.
2. Na úrovni dokumentu není deklarováno žádné kódování znaků
Dokument neříká ani slovo o tom, jaké kódování se používá. Ve skutečnosti jsme to nespecifikovali explicitně, což znamená, že není pravda, že místo zobrazení ruských písmen prohlížeč zobrazí čínské znaky. To se děje proto, že prohlížeč se při zobrazování dokumentu řídí některými tabulka kódů(tj. kódování), kde je každému písmenu přiřazena odpovídající kódový znak. Ale to, že v jednom kódování jedno číslo znamená jedno písmeno, v jiném to může znamenat nějaký japonský hieroglyf. Proto je potřeba prohlížeči sdělit, jaké kódování má použít. Pokud to neuděláte, prohlížeč se to přesto pokusí uhodnout sám. Ale neexistují absolutně žádné záruky, že to udělá správně.
3. Použití režimu přímého vstupu: Předpokládá se kódování znaků UTF-8
Program varuje, že standardně používá utf-8.
No, pak nezbývá nic jiného, než deklarovat kódování, které používáme. To se provádí takto:
Samotný řádek musí být vnořen do prvku head.
Meta tag patří do kategorie servisních tagů; zdá se, že naznačuje, že existují nějaké informace o stránce, které chceme sdělit prohlížeči. Stejně jako každá jiná značka má atributy:
http-equiv je atribut, v jehož hodnotě uvádíme název hlavičky.
content je atribut, jehož hodnotou je hodnota záhlaví, v tomto případě hodnota záhlaví typu obsahu.
Podívejme se nyní na hodnoty atributů, které jsme právě zadali:
Content-Type – řekneme prohlížeči, že budeme hlásit, jaký typ dokumentu je. A také jaké kódování je v něm použito.
text/html; charset= utf-8 – textový/html dokument, který používá kódování utf-8.
Zkuste stránku znovu ověřit. Nyní by neměly být žádné varovné zprávy. Ale mohou stále zůstat, ale z jiného důvodu. Například:
1. V dokumentu používáte obrázky a nemáte značku img atribut alt.
2. Vnořeno do prvku těla vložený prvek. Podle specifikace by prvek těla měl obsahovat pouze prvky bloku. A už v nich mohou být malá písmena.
Příkladů chyb může být mnoho, ale je problematické je všechny zmínit v jednom článku. Pokud však během ověřování narazíte na nějakou jinou chybu, napište o ní do komentářů a společně na to přijdeme.
- < Назад
- Vpřed >
Chcete-li komentovat, musíte se zaregistrovat.
Dobrý den, vážení začínající webmasteři. V této lekci budeme pracovat na vzhledu našeho webu.
Jak jsem psal dříve, vzhled vytvoří webovou stránku nebo šablonu.
A v této lekci se naučíme, jak se změnit WordPress šablona, tedy měnit barvy, velikosti, uspořádání prvků, obrázek v záhlaví webu a obecně vše, co vidíme při vstupu na web.
Než ale začnete, je vhodné si projít a nebo mít alespoň po ruce referenční literaturu, jinak vám mnoho z toho, o čem zde budu mluvit, jednoduše nebude jasné.
Můžete samozřejmě použít můj, ale je lepší se stále učit.
Kromě výše uvedeného je třeba si přečíst příspěvek a řídit se doporučeními v něm uvedenými. Jsou velmi jednoduché.
Začněme s úpravou standardní téma Dvacet deset. Toto téma je ve výchozím nastavení nainstalováno na sestavení WordPress a je to téma, které lze vidět ihned po instalaci enginu.
Mimochodem, tento zdroj obsahuje také toto téma, jen mírně opravené. Nebo spíše předělaný do základů.
Vytvořte si vlastní web design, použijeme nástroj Web Inspector.
Tento vývojářský nástroj je ve výchozím nastavení součástí všech moderní prohlížeče a vyvolá se klávesou F12.
Můžete jej také vyvolat kliknutím pravým tlačítkem myši na stránku a výběrem „Zobrazit kód prvku“ nebo „Prozkoumat prvek“
Design mých stránek se již několikrát změnil a vidíte starou verzi, ale to nemění podstatu.
Ještě neznám všechny možnosti tohoto nástroje (určitě si ho budu muset prostudovat a nastudovat), ale to, co vím, stačí na to, abych si s tématem dělal, co chci.
Jak vidíte, ve velkém poli vlevo jsou čáry s html kód. Každý řádek je html kód jednoho z prvků aktuálně na stránce.
Pokud na něj najedete kurzorem, prvek, který mu na stránce odpovídá, se zvýrazní jinou barvou a vedle něj se objeví poznámka pod čarou s názvem selektoru odpovědného za tento prvek v šabloně stylů a její velikost v pixelech.
Pokud kliknete na tento řádek, bude obarven modrý, jak to bylo, bude opraveno a v poli napravo se projeví všechny vlastnosti a hodnoty nastavené, v našem případě do bloku s nabídkou, v šabloně stylů.
Jak vidíte, blok nabídky v šabloně stylů je označen selektorem #access a má následující hodnoty:
šířka – 940 px
levý okraj – 0 px
Pojďme níž
barva pozadí - žlutá (původně černá)
viditelnost prvku - viditelný
Plovoucí vlevo - asi proto, aby neodstrčil nadpis
horní okraj – 80 px a vycentrovaný
Dolní okraj – 30 px
rám - tloušťka, pevný, žlutý (zpočátku černý)
Nyní o tomto prvku víme téměř vše a na přání jej můžeme posunout dolů nebo nahoru, změnit jeho barvu nebo velikost, přitisknout jej na kteroukoli ze čtyř stran obrazovky nebo jej skrýt z dohledu.
Abyste to mohli udělat, musíte jít do Konzole - Vzhled - Editor a tam najít soubor style.css
Klikneme na něj a když přejdeme na stránku o něco výše, uvidíme soubor šablony stylů otevřený pro úpravy. Nejprve si celý soubor zkopírujte a uložte do nějakého editoru, třeba do poznámkového bloku.
V tomto souboru musíme najít #access selector. Nejprve se objeví v sekci "=Struktura", ale tam je ve skupině s dalšími selektory, pro které identické vlastnosti a významy.
#access z této skupiny prozatím neodstraňme, protože například šířka uvedená v této skupině mi vyhovovala. Jdeme dále do sekce „Menu“. Zde je náš blok představen v celé své kráse.
Zde jej můžete pohybovat nahoru a dolů změnou hodnoty v vlastnost marže, změnit barvu, a pokud je v zobrazit vlastnost místo block vložte none , pak jej zviditelněte.
Po každé manipulaci nezapomeňte soubor aktualizovat!
Pro demonstraci jsem konkrétně vybral blok menu, protože má složitou strukturu. Ostatně v hlavním bloku obsahuje i bloky odkazů a text v těchto odkazech, který je sám o sobě také samostatným blokem.
Jak jste si již všimli, ve webovém inspektoru každý řádek začíná trojúhelníkem. Pokud je nasměrován doprava, je v něm skryto několik dalších řádků. Klikneme na trojúhelník a otevře se nám kód prvků uzavřených v bloku nabídky.
Tyto prvky zase obsahují více prvků a my je potřebujeme otevřít všechny, tedy vše, co je v bloku menu.
Nyní, pohybem kurzoru po řádcích v levém poli, v pravém poli se podíváme na to, jak zjistit tento nebo ten prvek v souboru stylu. css a zjistěte, jaké hodnoty bychom chtěli změnit.
Poté přejdeme do editoru, najdeme požadovaný selektor a změníme, co máme na mysli. Ukážu vám, co jsem změnil, aby menu mělo stejný vzhled a funkčnost jako na tomto webu.
Pokud chce někdo toto menu ze stránek webu úplně odstranit, musí k tomu přejít do Vzhled > Editor a otevřít soubor header.php pro úpravy.
V kódu souboru najdeme značku a odstraníme ji a vše po ní, až po první.
Můžete to jednoduše zneviditelnit. K tomu je v souboru style.css přidána vlastnost display:none do selektoru #access.
Nyní se podívejme, jak nahradit obrázek v záhlaví webu. Řekněme, že všechny obrázky navržené v tématu vám nevyhovovaly a rozhodli jste se nainstalovat něco zcela vlastního. Můžete vidět, kde na stránce získat obrázek pro záhlaví, a když je nalezen nebo vytvořen, umístěte jej do složky obrázků motivu.
Poté přejdeme do souboru style.css a uvidíme, co je třeba udělat, aby ne požadovaný obrázek zmizel, ale objevil se ten, který jsem potřeboval.
Najdeme sekci „=Header“, která obsahuje vše, co souvisí s hlavičkou webu, a najdeme tam selektor obrázku. Poté změníme hodnotu display:block na display:none a obraz zmizí z obrazovky.
Poté přejdeme do sekce „=Structure“ a ve selektoru #wrapper to uděláme další záznam. Vlastnost background: je zde standardně, jedná se o pozadí stránky, takže vlastnosti přidáváme pouze pro obrázek.
Do hodnoty vlastnosti background-image umístíme adresu nového obrázku, který jsme našli nebo vytvořili, dříve načteného do složky obrázky motivu.
Pokud je web hostován, pak se tato složka nachází v: site_name > public_html > wp-content > > motivy > obrázky.
Pokud je web stále zapnutý místní hosting, pak cesta k této složce je: Z > home > site_name > www > wp-content > > motivy > obrázky.
V prvním případě se obrázek načte pomocí správce souborů, ve druhém se obrázek jednoduše uloží do této složky.
Zde po instalaci budete muset opravit pouze vlastnost background-position pro přesnější umístění záhlaví na stránku a vlastnost background je nezbytná v případě, že se některým návštěvníkům neotevře obrázek v záhlaví.
V tomto případě bude mít záhlaví alespoň pozadí.
To se provádí následovně. Přejděte do Konzole - Položky - Přidat položku, přepněte editor do režimu HTML a pomocí zavaděče obrázků (Přidat mediální soubor) načtěte požadovaný obrázek.
Kód tohoto obrázku se zobrazí v editoru. Je třeba jej zkopírovat a smazat „Záznam“.
Poté přejděte do “Vzhled - Editor” a otevřete soubor header.php pro úpravy, ve kterém najdeme řádek
Bezprostředně za tento řádek vložíme zkopírovaný kód obrázku. Kód má třídu zarovnání class="aligncenter" a v závislosti na potřebě lze aligncenter nahradit za alignleft nebo alignright .
Bude záležet na tom, na kterém okraji nebo ve středu je obrázek umístěn.
Pokud je po uložení a zobrazení potřeba obrázek posunout o něco více, někam, vrátíme se do editoru a do kódu obrázku, img tag, vložit atribut stylu s vlastností margin:
style="margin:0 0 0 0;"
Kde místo nul vložíme požadované velikosti odsazení, a tím obrázek posuneme požadovaným směrem.
Barvu polí lze změnit tak, že v selektoru tagu "body" přejdete trochu dolů do sekce "=Global Elements". Moje pole byla vytvořena z namnoženého obrázku. Později jsem to odstranil a nechal to obyčejné, ale můžete vidět, jak to udělat (obrázek na okraji).
Pokud změníte pouze barvu, pak stačí změnit hodnotu ve vlastnosti pozadí
Zde se mění velikost, typ a barva písma webu
A velikost, barva, vzhled nadpisu a popisy stránek v záhlaví jsou zde. Zde můžete opravit umístění nadpisu a popisu při změně obrázku záhlaví.
U toho se zatím zastavme. Zkoušet, měnit, hýbat se, zlepšovat se. Velmi brzy stránky přesuneme skutečný hosting. Samozřejmě tam také uděláme nějaké změny, ale musíme je dělat sebevědoměji a rychleji a dělat co nejméně chyb.
HTML šablony v ruštině
Deklarace typu dokumentu odkazuje na pravidla značkovacího jazyka, aby bylo zajištěno, že prohlížeč vykreslí obsah dokumentu správně.
Různé HTML typy DocumentaDeklarace typu dokumentu není HTML tag; Toto je pokyn pro webový prohlížeč o verzi značkovacího jazyka, ve kterém je stránka napsána.
Deklarace typu dokumentu odkazuje na "definici typu dokumentu" nebo "definici typu dokumentu" (DTD). DTD nastavuje pravidla pro značkovací jazyk tak, aby prohlížeče obsah vykreslovaly správně.
Deklarace typu dokumentu se musí v dokumentu HTML objevit jako první, před příponou .
Tip: Na stránky vždy přidejte typ dokumentu. To pomáhá prohlížečům správně vykreslit stránku!
Typ dokumentu "HTML 4.01 Strict"Definice typu dokumentu (DTD) obsahuje všechny prvky a atributy HTML, ale NEZAHRŇUJE reprezentativní a starší prvky (jako je písmo a střed). Sady rámců nejsou povoleny:
Typ dokumentu "HTML 4.01 Frameset"Toto DTD je ekvivalentní „HTML 4.01 Transitional“, ale umožňuje použití sad rámců:
Návrháři tráví hodiny zdokonalováním svého řemesla, aby přesně padly nejmenší detaily v designu webových stránek, které vycházejí z jejich pera. Kvalita kódu však velmi často zůstává velmi nízká. Potřebujete důkaz? Zobrazit galerie bezplatné šablony CSS. 90 % šablon neprojde ověřením. Většina chyb je navíc velmi primitivní a velmi snadno opravitelná. V tuto lekci Podívejme se na typické chyby v kódu HTML, které brání úspěšnému dokončení ověření.
Proč kontrolovat kód?Pokud web vypadá v prohlížeči skvěle, tak proč kontrolovat kód? Typická otázka položená před kontrolou kódu. Stránky se ale neomezují pouze na to, co je pro uživatele viditelné. HTML stránky jsou určeny k reprezentaci dat, nikoli grafické efekty. Data musí být čitelná pro celou obrovskou komunitu lidí, kteří používají internet. A čtenáři mohou k přijímání informací prezentovaných na vašem webu používat velmi odlišné technologie – mohou například používat hlasový program a jednoduše poslouchat, co je na vaší stránce napsáno.
Stránka HTML, která je bez chyb, se obecně zobrazí správně ve většině prohlížečů a bude také kompatibilní s budoucími technologiemi. Zde stojí za zmínku vyhledávače, jehož působení je pro účely SEO velmi důležité. Nikdo jim nechce vytvářet překážky, ale čistý a správný kód mnohem snadněji pochopitelné pro vyhledávací roboty.
Je to také otázka profesionality. Nesprávný HTML kód je velmi podobný gramatické chyby v nápisech na webu. A přestože si klient chyby v kódu nemusí všimnout, na podstatě problému to nic nemění. Nikdo nemá rád gramatické chyby v designu, ale nechat HTML kód s chybami se nepovažuje za stejný hanebný čin.
Běžné chybyNíže jsou uvedeny chyby, které byly zachyceny v šablonách z první stránky slavné galerie CSS šablony. Spousta webů vypadá skvěle, dokonce skvěle, ale často kvalita kódu neodpovídá kvalitě designu. I když většinu těchto chyb lze velmi rychle a snadno opravit.
Nejhorší chybou je nepoužívat Doctype! Žádný štítek Doctype znamená, že prohlížeč „uhodne“, jaký jazyk byl použit k vytvoření dokumentu. Chcete-li chybu opravit, musíte zadat typ dokumentu vaší stránky.
Prvek není uzavřen
Pokud jste otevřeli značku někde ve svém HTML dokument, musí být uzavřen na příslušném místě. Zapomnění v této věci vede nejen k chybám při kontrole kódu, ale může také způsobit vážné problémy se šablonou. Obrázek ukazuje situaci, kdy autor zapomněl tag zavřít V samouzavíracích prvcích je vynechán symbol /
Většina HTML prvky má samostatné uzavírací značky, například: . Existují však prvky jako input , img a meta , které se samy uzavírají, což znamená, že musí mít před závorkou /.
Speciální znaky nebyly převedeny
V souladu s předchozím odstavcem speciální znaky, zejména ampersand, musí být zakódován řádky URL. Odkazy na stránky vytvořené pomocí pomocí PHP, často obsahují proměnné používající znak & a musí být napsány pomocí HTML & kódu.
Blokové prvky uvnitř vložených prvků
Jeden z hlavních HTML pravidla je, že prvky bloku by NIKDY neměly být uvnitř vložených prvků.
Oblíbeným příkladem chyby je použití odkazu v názvu: banány
- blokový prvek, takže by měl obtékat odkaz (vložený prvek): banány .
Chybí atribut alt obrázku
Každý obrázek v dokumentu HTML musí mít atribut alt popisující obsah obrázku. I když je obrázek pro účely návrhu, měl by mít atribut alt, ale v tomto případě by měl zůstat prázdný, například alt="" . V jiném případě musíte poskytnout popis obsahu obrázku.
Použití atributů, jako je šířka a výška 
Pravděpodobně tato situace je zadní strana rozšířené používání WYSIWYG editorů, které mají tendenci vkládat zbytečný HTML kód. atributy šířky a výška jsou definovány v přechodných standardech typu dokumentu, ale pokud se rozhodnete přísně dodržovat standardy, pravděpodobně víte, že všechny atributy zodpovědné za prezentaci prvků na stránkách by měly být přeneseny do šablony stylů CSS, aby se oddělil obsah a design.
Název třídy nebo ID začíná číslem
Název třídy, ID nebo název atributu nemůže začínat číslem. Mohou obsahovat čísla, ale ne na začátku slova.
Jaká je situace s Kontrola CSS kód?
Na rozdíl od HTML se používá CSS vizuální reprezentace stránky. Otázka tedy zní: „Pokud stránka vypadá dobře, tak proč kontrolovat kód? v tomto případě to zní přesvědčivěji. Špatný CSS kód nemá na webové stránky stejný dopad jako špatný HTML kód. Vyplatí se však zkontrolovat, abyste odhalili překlepy a chyby v kódu. Pokud použijete nové vlastnosti CSS3, způsobí, že váš dokument selže při ověření, protože ještě nejsou zahrnuty ve specifikaci, ale pokud jste si jisti, že je vše v pořádku, můžete takové chyby ignorovat.
