Která značka určuje typ dokumentu. Direktivy komentářů a Doctype v Html kódu, stejně jako koncept blokových a inline prvků (tagů). Nepřevedené znaky v URL

Seznam

Zkontrolujte, zda jsou značky správně vnořeny do aktuálního prvku a zda jsou přítomny požadované prvky.

Zpráva se zobrazí kvůli předchozí chybě na stránce.

Opravte předchozí chyby.

V kódu není vložena žádná značka.

Nadpis

Přidejte nádobu.

Značka je v dokumentu bez přílohy použita více než jednou. Je povoleno vložit několik prvků, ale vnořených jeden do druhého.

Používejte vnořené značky.

Uvedená značka není součástí specifikace HTML.

text bez pomlček

text bez pomlček

Odstraňte štítek nebo jej nahraďte vhodným ekvivalentem.

Značka není rozpoznána a není součástí specifikace HTML.

Že jo:

Špatně:

Text

Odstraňte neznámý štítek.

Nádoba je prázdná nebo obsahuje pouze mezeru.

Odstraňte značku nebo přidejte text do kontejneru.

V závěrečné značce chybějící lomítko.

Řešení

Změňte pořadí tagů nebo odstraňte jeden z otevíracích nebo uzavíracích tagů.

... kotva "..." již definována

Hodnoty atributu name různých značek se vzájemně shodují. Hodnota názvu musí být jedinečná.

Řešení

Vyberte jiný název nebo změňte předchozí názvy tak, aby nebyly stejné.

je pravděpodobně zamýšleno jako

Značka se v kódu HTML opakuje dvakrát, přičemž taková značka by sama sebe obsahovat neměla.

Ahoj světe!

Ahoj světe!

Řešení

Odstraňte jeden ze štítků.

chybí atribut "..."

Povinný atribut značky je povinný, ale chybí.

Základy HTML obsahuje základní pravidla jazyka HTML, popis struktury stránky HTML a vztahy ve struktuře dokumentu HTML mezi prvky HTML.

HTML dokument je běžný textový dokument, který lze vytvořit buď v běžném textovém editoru (Notepad), nebo ve specializovaném se zvýrazněním kódu (Notepad++, Visual Studio Code 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, číslic, 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 dokumentu

HTML 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 specifikuje nejen HTML verzi (např. html), ale také odpovídající DTD soubor na internetu.

...

Prvky uvnitř tagu tvoří strom dokumentu, tzv. document object model, DOM (document object model). V tomto případě je prvkem kořenový prvek.

Rýže. 1. Nejjednodušší struktura webové stránky

Abychom porozuměli interakci prvků webové stránky, je nutné zvážit takzvané „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: ,

, , atd.

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 .

Rodičovský prvek je prvek, který souvisí s ostatními prvky na nižší úrovni a je umístěn nad nimi ve stromu. Na obrázku 1 a . Štítek

Je rodič pouze pro .

Podřízený prvek je prvek, který je přímo podřízen jinému prvku na vyšší úrovni. Na obrázku 1 jsou pouze prvky , ,

A jsou dětmi .

Sesterský prvek je prvek, který má s daným nadřazeným prvkem společný, 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. Živel

Sekce ... 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í informace, které prohlížeči říkají, jak má stránku zpracovat.

1.2.1. Živel

Pož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 nejúplnější popis obsahu webové stránky.

1.2.2. Živel

Nepovinná značka sekce je jedna značka. S jeho pomocí můžete 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 v parametru url:

Chcete-li komentovat, musíte se zaregistrovat.

Dobrý den, milí čtenáři tohoto blogu. Chci pokračovat v mluvení o základech práce s HTML od samého začátku, důsledně a aniž bych cokoli vynechal. Dnes si povíme něco o speciální značce Doctype (deklarace), naučíme se, jak správně formátovat komentáře v HTML kódu, jak napsat Titulek webového dokumentu a pokusíme se pochopit rozdíly mezi blokovými a inline prvky.

V předchozím článku z rubriky (o které se hlavně mluvilo) jsme skončili tím, že jakýkoli dokument na internetu musí mít určitou strukturu.

Prvním prvkem značkovacího jazyka, se kterým se setkáte v jakémkoli běžném webovém dokumentu (stránce webu), bude speciální direktiva Doctype. Začíná lomenou závorkou, za kterou bezprostředně následuje vykřičník.

Samotný prvek Doctype slouží k deklaraci typu daného dokumentu a pomáhá prohlížeči pochopit, na jakou verzi Html nebo XHTML (podle klasifikace validátorem W3C) se má při parsování kódu načtené webové stránky spolehnout.

Pokud v této směrnici není uveden typ dokumentu v souladu s obecně uznávanými pravidly, prohlížeč s největší pravděpodobností stále zobrazí váš dokument správně, ale není pravda, že další oblíbené tisíce vašich čtenářů budou dělat totéž. Proto musí být Doctype přítomen ve zdrojovém kódu stránky a musí být správně zkompilován.

Ale pojďme se tomu věnovat trochu podrobněji. Nyní vidíme na internetu jakýsi dualismus neboli dva typy dokumentů – jak tomu bylo dříve před oddělením CSS od lůna jazyka HTML a jak tomu bylo nyní podle uznávaných moderních standardů.

Přirozeně po přijetí nových standardů bylo na internetu stále obrovské množství dokumentů vytvořených podle starých principů čistého HTML (bez CSS) a prohlížeče s nimi musely nějak pracovat. Microsoft svého času navrhoval použít právě tuto direktivu Doctype z nového značkovacího jazyka XML.

Může to vypadat jinak (přečtěte si o tom níže), ale nejjednodušší je použít tuto možnost (vysvětlím proč trochu níže v textu):

Tímto způsobem prohlížeč pochopí, které standardy by měl použít k analýze kódu dokumentu. Pokud k této deklaraci dojde, pak se prohlížeč přepne do standardního režimu. Pokud jej prohlížeč nenajde hned na začátku dokumentu (nebo neodpovídá správnému pravopisu), prohlížeč zapne režim záludných triků.

Dokument se v tomto případě zobrazí, jako by tento prohlížeč byl velmi starý (vintage). Pokud do stejného dokumentu přidáte prohlášení, prohlížeč analyzuje kód s ohledem na všechny aktuálně dostupné standardy.

Pravda, pojem starého prohlížeče je velmi vágní. Stejný lídr v provozní rychlosti a rychlosti pronikání do srdcí uživatelů, Google Chrome, se objevil až v roce 2008.

Začněme standardem HyperText Markup Language 4.01 (HTML 5 je stále ve vývoji). V tomto případě existují tři možnosti Doctype: přísné, přechodné a s povoleným rámcem:

Nejčastěji se používá druhá možnost (Přechodná), protože umožňuje větší svobodu při psaní kódu dokumentu, ale možnost s rámečky pro vás pravděpodobně nebude užitečná, vzhledem k irelevantnosti jejich dnešního použití.

Ve skutečnosti existují tři stejné možnosti Doctype pro XHTML – striktní, přechodný a s podporou rámců:

Pojďme se ale podívat, kde se tyto možnosti správného zápisu prohlášení berou. Pamatujte, že v prvním článku jsme se podívali na tabulku přijatelných:

A samostatná tabulka možných:

Jak vidíte, v obou těchto tabulkách je sloupec „Depr“, ve kterém je písmeno „D“ označeno zastaralými a zastaralými HTML tagy a atributy. Už jsme to zvažovali. Všimněte si však, že vedle každého „D“ v pravém přilehlém sloupci „DTD“ je buď „L“ (Loose DTD) nebo „F“ (Frameset DTD).

Že. všechny značky a atributy, které nejsou označeny "D" (nedoporučujeme), jsou zahrnuty do přísné dekorace Doctype (pouze doporučené prvky a nic víc). Pokud stále povolujete používání nedoporučených značek a atributů jazyka Html (jsou označeny písmenem „D“), budete muset pro takové dokumenty deklarovat přechodnou deklaraci.

Některé prvky a atributy označené "F" ve sloupci "DTD" (např. FRAME, FRAMESET) budou zahrnuty do deklarace Doctype pro rámové struktury. Je založen na přechodném, ke kterému se přidávají značky a atributy k vytvoření, o kterých si můžete přečíst na uvedeném odkazu.

Nyní se pokusíme zjistit, z jakých částí se skládá deklarace Doctype?

Jako první přichází na řadu název – „Doctype“. Tady je, myslím, vše jasné. Následuje „Html“ – kořenový prvek tohoto značkovacího jazyka. Poté následuje označení, zda je toto prohlášení veřejné nebo systémové. Všechny varianty Doctype jsou veřejné, což je označeno slovem „PUBLIC“.

A pak jsou tu dva identifikátory dokumentů. První z nich se nazývá veřejný identifikátor („-//W3C//DTD HTML 4.01//EN“). Mínus znamená, že toto prohlášení není registrováno v normě ISO. Následuje název konsorcia, jeho název a jazyk, ve kterém je napsáno. Druhý identifikátor určuje cestu k souboru striktní varianty.

Nyní mi dovolte, abych vám řekl celou pravdu o Doctype. Prohlížeče se starají pouze o jeho formálně správný pravopis, ale nikdy nepůjdou na web konsorcia, aby si stáhli soubor v něm uvedený.

I když zvolíte možnost strohé deklarace a zároveň použijete značky a atributy, které se v moderní verzi Html nedoporučují, pak vám každý prohlížeč bude stále správně rozumět – to je ověřený a potvrzený fakt.

Proto bez dalších okolků bude zápis Doctype v Html 5 vypadat takto:

To je vše. Zůstalo pouze „Html“. A přestože HTML 5 ještě nebylo plně implementováno, tuto možnost podporují všechny moderní prohlížeče a můžete ji bezpečně používat. Ach jak, a ty říkáš...

V oblasti služeb webového dokumentu (mezi značkami Head) musí být napsán název tohoto dokumentu (webové stránky) uzavřený v prvcích Title (viz obrázek níže).

Je velmi těžké přeceňovat význam informací v něm obsažených (nepřeháním). Když vyberete klíčová slova v Yandex Wordstat (použití pro tento účel), pak po kompilaci sémantického jádra budete určitě muset zmínit vybraná klíčová slova v záhlaví Title.

O tom, jak důležitá jsou slova obsažená v nadpisu pro budoucí úspěšnou propagaci projektu, se dozvíte z článku a o tom, jak napsat potřebná slova do nadpisu pro Joomla a WordPress z článku.

Nyní, než přejdeme k zvažování konkrétních značek, zastavme se u takového konceptu, jako jsou komentáře v kódu Html. Často jsou zahrnuty proto, aby bylo snazší později najít správné sekce nebo aby ostatní lépe porozuměli autorovu záměru. Je samozřejmé, že text těchto komentářů by se v žádném případě neměl zobrazovat na webové stránce, proto jsou v kódu naformátovány speciálním způsobem.

Komentáře v Html byly relevantní zejména v době vlády rozvržení tabulky (přečtěte si o), protože tehdy bylo ve srovnání s moderním blokovým rozvržením (popsaným zde na příkladu) velmi snadné zmást, co se v které buňce tabulky zobrazuje:

Pravděpodobně jste z výše uvedeného příkladu již pochopili, že všechny komentáře v jazyce Html začínají stejným způsobem jako jakékoli jiné prvky - lomenou závorkou, ale hned za ní, při vytváření komentáře, budete muset vložit vykřičník (při popisu Doctype jsem zmínil, že komentáře jsou také deklaracemi, které musí začínat

Veškerý text komentáře, který se bude nacházet mezi těmito dvojitými pomlčkami, bude prohlížečem považován za servisní informaci a nebude žádným způsobem zpracován. Správnost jeho zápisu lze jasně posoudit pomocí popsaného:

Do komentáře ale můžete umístit nejen text, ale i cokoli, co se vám líbí. Poměrně často se například vyskytují komentované fragmenty Html kódu a tuto sekci prohlížeče nezpracují. Pozoruhodné je, že komentář lze otevřít na jednom řádku kódu a zavřít i po sto řádcích a takto uzavřený kus kódu pro prohlížeč prostě přestane existovat.

Vše je celkem jednoduché a myslím, že s nimi nebudete mít žádné problémy. I když v práci s víceřádkovými komentáři v HTML je jedna jemnost. Do jednoho komentáře nemůžete umístit další, jinak může prohlížeč na webové stránce zobrazit část komentovaných informací. Podívejme se na tuto konstrukci jako příklad:

pokračování externího komentáře-->

Takže při analýze kódu webové stránky prohlížeč detekuje úvodní znaky deklarace komentáře a začne hledat ty závěrečné. Najde jej za slovy „Přiložený komentář“, ale vše ostatní (v našem případě jde o pokračování externího komentáře ->) zpracuje prohlížeč a zobrazí na webové stránce.

V zásadě platí, že pokud při psaní HTML kódu používáte podsvícený editor, okamžitě si všimnete, že něco není v pořádku podle změny barvy vašeho komentáře:

Všechny tagy, které lze použít uvnitř prvků Body (to, co je zobrazeno na webové stránce a jejichž seznam najdete ve validátoru W3C), lze rozdělit do dvou skupin: inline a block tagy.

Blokové prvky se používají k vytvoření struktury webového dokumentu a vložené prvky se používají k formátování částí textu (řádků). Navíc je vždy potřeba dodržovat jedno neotřesitelné pravidlo – nevkládejte blokové značky do malých písmen.

Nejvýraznějšími a indikativními zástupci line a block tagů jsou v tomto pořadí Div (prvek bloku – odtud rozložení jmenného bloku) a Span (řádek). Tyto značky hypertextového značkovacího jazyka jsou spárované, tzn. mají otevírací a zavírací štítek.

Obecně platí, že značky Div a Span nemají v čistém HTML bez použití kaskádových stylů CSS absolutně žádný účel ani význam. Jsou to kontejnery, které umožňují měnit vlastnosti prvků, které obsahují, pomocí CSS.

Pokud do zdrojového kódu stránky napíšete několik prvků Div za sebou, pak se na webové stránce každý z nich s největší pravděpodobností pokusí obsadit veškerý prostor, který má k dispozici na šířku, a proto budou takové kontejnery umístěny pod sebou . Za normálních podmínek nebudou kontejnery Div stát vedle sebe, pokud je k tomu nepřinutíte.

Například tento Html kód bude zobrazen ve třech blocích umístěných pod sebou:

V prohlížeči Firefox spolu s velmi užitečným používám také plugin, který hodně pomáhá s . Mimo jiné umí zobrazit prvky bloku tak, že je obklopí rámečkem. Byl to tento vývojářský plugin, který vytvořil modré rámečky kolem kontejnerů Div na výše uvedeném snímku obrazovky.

Značky Span mohou obsahovat části textu (řádky) Html kódu, které jim prostřednictvím CSS propůjčí určité vlastnosti, a takové prvky lze umístit na stejný řádek vedle sebe. Tento kód v prohlížeči bude vypadat například takto:

Obsah Span zde byl také zvýrazněn pomocí pluginu pro vývojáře webu. Protože Vzhledem k tomu, že prvky Span jsou vložené, neměli byste do nich uzavírat tagy bloků, například stejné kontejnery Div.

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás to zajímat

Co je hypertextový značkovací jazyk Html a jak zobrazit seznam všech značek ve validátoru W3C
Tagy a atributy nadpisů H1-H6, vodorovný řádek Hr, zalomení řádku Br a odstavec P podle standardu Html 4.01
Písmo (obličej, velikost a barva), Blockquote a Pre tagy – starší formátování textu v čistém HTML (bez použití CSS)
Seznamy v Html kódu - značky UL, OL, LI a DL
Jak vložit odkaz a obrázek (fotku) do HTML - IMG a A tagy
Znaky mezer a jejich formátování kódu v Html, stejně jako speciální nezalomitelné znaky mezer a další mnemotechnické pomůcky
Jak se nastavují barvy v Html a CSS kódu, výběr odstínů RGB v tabulkách, výstup Yandex a další programy Select, Option, Textarea, Label, Fieldset, Legend - Html tagy ve formě rozevíracích seznamů a textových polí
Jak vytvořit hypertextový odkaz (A, Href, Target blank), jak jej otevřít v novém okně na webu a také udělat z obrázku odkaz v Html kódu
Iframe a Frame - co to je a jak nejlépe používat rámce v Html

Dobrý den, vážení začínající webmasteři. V této lekci budeme pracovat na vzhledu našeho webu.

Jak jsem již psal dříve, vzhled webu tvoří šablona.

A v této lekci se naučíme, jak změnit šablonu WordPress, tedy změ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 úpravou standardního tématu „Twenty Ten“. 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říme si vlastní webdesign pomocí nástroje Web Inspector.

Tento základní vývojářský nástroj je standardně dostupný ve všech moderních prohlížečích a lze k němu přistupovat pomocí klávesy 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 řádky s html kódem. 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 jeho velikostí. v pixelech.

Pokud kliknete na tento řádek, zmodrá, jako by byl opraven, a pole vpravo zobrazí 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íže

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 =Structure, ale tam bude seskupen s dalšími selektory, které mají stejné vlastnosti a hodnoty.

#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 posouvat nahoru a dolů změnou hodnoty ve vlastnosti margin, změnou barvy, a pokud do vlastnosti display místo bloku nevložíte žádnou, pak ji zneviditelní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 musíme je otevřít všechny, tedy vše, co je v bloku menu.

Nyní pohybem kurzoru po řádcích v levém poli se v pravém poli 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 získalo stejný vzhled a funkčnost jako na tomto webu.

Pokud chce někdo toto menu ze stránek webu úplně odstranit, pak k tomu musí 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 podíváme se, co je třeba udělat, aby požadovaný obrázek zmizel, ale objevil se požadovaný.

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 „=Struktura“ a ve selektoru #wrapper provedeme následující 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 na místním hostingu, 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 stáhne pomocí správce souborů, ve druhém se obrázek jednoduše uloží do této složky.

Zde po instalaci budete muset upravit 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 Console - Entries - Add Entry, přepněte editor do HTML módu a přes image loader (Add media file) 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 třeba po uložení a zobrazení obrázek někam posunout o něco více, pak se vrátíme do editoru a do kódu obrázku v tagu img vložíme atribut style 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 "=Globální prvky". 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 upravit 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 převedeme stránky na 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.

Hotové HTML šablony v ruštině