Ktorá značka určuje typ dokumentu. Direktívy komentárov a Doctype v Html kóde, ako aj koncept blokových a inline prvkov (tagov). Nekonvertované znaky v adrese URL

Zoznam

Skontrolujte, či sú značky správne vnorené do aktuálneho prvku a či sú prítomné požadované prvky.

Správa sa zobrazí v dôsledku predchádzajúcej chyby na stránke.

Opravte predchádzajúce chyby.

V kóde nie je vložená žiadna značka.

Smerovanie

Pridajte nádobu.

Značka sa v dokumente bez prílohy použije viackrát. Je povolené vložiť niekoľko prvkov, ale vnorené jeden do druhého.

Použite vnorené značky.

Uvedená značka nie je súčasťou špecifikácie HTML.

text bez pomlčiek

text bez pomlčiek

Odstráňte štítok alebo ho nahraďte vhodným ekvivalentom.

Značka nie je rozpoznaná a nie je súčasťou špecifikácie HTML.

Správny:

nesprávne:

Text

Odstráňte neznámu značku.

Nádoba je prázdna alebo obsahuje iba medzeru.

Odstráňte značku alebo pridajte text do kontajnera.

V záverečnej značke chýbajúca lomka.

Riešenie

Zmeňte poradie značiek alebo odstráňte jednu z otváracích alebo zatváracích značiek.

... kotva "..." je už definovaná

Hodnoty atribútu name rôznych značiek sa navzájom zhodujú. Hodnota názvu musí byť jedinečná.

Riešenie

Vyberte iné meno alebo zmeňte predchádzajúce mená tak, aby neboli rovnaké.

je pravdepodobne myslené ako

Značka sa v kóde HTML opakuje dvakrát, pričom takáto značka by nemala obsahovať samu seba.

Ahoj svet!

Ahoj svet!

Riešenie

Odstráňte jednu zo značiek.

chýba atribút „...“.

Povinný atribút značky je povinný, ale chýba.

Základy HTML obsahuje základné pravidlá jazyka HTML, popis štruktúry stránky HTML a vzťahy v štruktúre dokumentu HTML medzi prvkami HTML.

HTML dokument je bežný textový dokument, ktorý je možné vytvoriť buď v bežnom textovom editore (Notepad), alebo v špecializovanom so zvýraznením kódu (Notepad++, Visual Studio Code atď.). HTML dokument má príponu .html.

HTML dokument pozostáva zo stromu HTML prvkov a textu. Každý prvok je v zdrojovom dokumente identifikovaný začiatočným (otváracím) a koncovým (zatváracím) tagom (až na zriedkavé výnimky).

Počiatočná značka ukazuje, kde prvok začína, koncová značka ukazuje, kde končí. Záverečná značka sa tvorí pridaním lomky / pred názov značky: .... Medzi začiatočným a záverečným tagom je obsah tagu – obsah.

Jednotlivé značky nemôžu ukladať obsah priamo, zapisuje sa ako hodnota atribútu, napríklad značka vytvorí tlačidlo s textom Tlačidlo vo vnútri.

Značky môžu byť vnorené do seba, napr.

Text

. Pri investovaní by ste sa mali riadiť poradím, v ktorom sú uzavreté (princíp „matryoshka“), napríklad nasledujúci údaj bude nesprávny:

Text

.

Prvky HTML môžu mať atribúty (globálne, aplikované na všetky prvky HTML a ich vlastné). Atribúty sa zapisujú do úvodnej značky prvku a obsahujú názov a hodnotu, špecifikovanú vo formáte atribútu name="value" . Atribúty umožňujú meniť vlastnosti a správanie prvku, pre ktorý sú nastavené.

Každému prvku možno priradiť viacero hodnôt triedy a iba jednu hodnotu id. Viaceré hodnoty triedy sú zapísané oddelené medzerou, . Hodnoty class a id musia pozostávať iba z písmen, číslic, pomlčiek a podčiarkovníkov a musia začínať iba písmenami alebo číslami.

Prehliadač zobrazuje (interpretuje) HTML dokument, vytvára jeho štruktúru (DOM) a zobrazuje ho v súlade s pokynmi v tomto súbore (štýlové šablóny, skripty). Ak je označenie správne, v okne prehliadača sa zobrazí stránka HTML obsahujúca prvky HTML - hlavičky, tabuľky, obrázky atď.

Proces interpretácie (analýza) začína ešte pred úplným načítaním webovej stránky do prehliadača. Prehliadače spracúvajú dokumenty HTML sekvenčne, od začiatku, pričom spracúvajú CSS a súvisia so štýlmi prvkov stránky.

HTML dokument sa skladá z dvoch častí - hlavičky - medzi značkami ... a obsahovej časti - medzi značkami ....

Štruktúra webovej stránky 1. Štruktúra HTML dokumentu

HTML sa riadi pravidlami obsiahnutými v súbore deklarácie typu dokumentu (Definícia typu dokumentu alebo DTD). DTD je dokument XML, ktorý definuje, ktoré značky, atribúty a ich hodnoty sú platné pre konkrétny typ HTML. Každá verzia HTML má svoje vlastné DTD.

DOCTYPE je zodpovedný za správne zobrazenie webovej stránky prehliadačom. DOCTYPE špecifikuje nielen HTML verziu (napr. html), ale aj príslušný DTD súbor na internete.

...

Prvky vo vnútri tagu tvoria strom dokumentu, takzvaný document object model, DOM (document object model). V tomto prípade je prvkom koreňový prvok.

Ryža. 1. Najjednoduchšia štruktúra webovej stránky

Na pochopenie interakcie prvkov webovej stránky je potrebné zvážiť takzvané „rodinné vzťahy“ medzi prvkami. Vzťahy medzi viacerými vnorenými prvkami sú klasifikované ako rodič, dieťa a sestra.

Predok je prvok, ktorý obsahuje ďalšie prvky. Na obrázku 1 je predchodcom všetkých prvkov . Prvok je zároveň predchodcom všetkých značiek, ktoré obsahuje: ,

, , atď.

Potomok je prvok nachádzajúci sa v rámci jedného alebo viacerých typov prvkov. Napríklad je potomkom prvkov , a prvku

Je potomkom oboch a .

Nadradený prvok je prvok, ktorý súvisí s inými prvkami na nižšej úrovni a nachádza sa nad nimi v strome. Na obrázku 1 a . Tag

Je rodič iba pre .

Podradený prvok je prvok, ktorý je priamo podriadený inému prvku na vyššej úrovni. Na obrázku 1 sú len prvky , ,

A sú deťmi .

Sesterský prvok je prvok, ktorý má spoločný nadradený prvok s príslušným prvkom, takzvané prvky rovnakej úrovne. Na obrázku 1 a sú prvky rovnakej úrovne, ako aj prvky , a

Sú si navzájom sestry.

1.1. Prvok 1.2. Element

Sekcia ... obsahuje technické informácie o stránke: názov, popis, kľúčové slová pre vyhľadávače, kódovanie atď. Informácie, ktoré tam zadáte, sa nezobrazia v okne prehliadača, ale obsahujú informácie, ktoré prehliadaču povedia, ako má stránku spracovať.

1.2.1. Element

Požadovaná značka sekcie je . Text umiestnený vo vnútri tejto značky sa zobrazí v záhlaví webového prehliadača. Názov by nemal mať viac ako 60 znakov, aby sa úplne zmestil do názvu. Text nadpisu by mal obsahovať čo najkompletnejší popis obsahu webovej stránky.

1.2.2. Element

Voliteľná značka sekcie je jedna značka. S jeho pomocou môžete nastaviť popis obsahu stránky a kľúčové slová pre vyhľadávače, autora HTML dokumentu a ďalšie vlastnosti metadát. Element môže obsahovať viacero elementov, pretože nesú rôzne informácie v závislosti od použitých atribútov.

Popis obsahu stránky a kľúčové slová je možné špecifikovať súčasne v niekoľkých jazykoch, napríklad v ruštine a angličtine:

Pomocou značky môžete zablokovať alebo povoliť indexovanie webovej stránky vyhľadávačmi:

Ak chcete stránku po určitom čase automaticky znova načítať, musíte použiť hodnotu obnovenia:

Stránka sa znova načíta po 30 sekundách. Ak chcete presmerovať návštevníka na inú stránku, musíte zadať adresu URL v parametri url:

Ak chcete komentovať, musíte sa zaregistrovať.

Dobrý deň, milí čitatelia blogu. Chcem pokračovať v rozprávaní o základoch práce s HTML od úplného začiatku, konzistentne a bez toho, aby som niečo vynechal. Dnes si povieme niečo o špeciálnej značke Doctype (deklarácia), naučíme sa, ako správne formátovať komentáre v HTML kóde, ako napísať Titulok webového dokumentu a pokúsime sa pochopiť rozdiely medzi blokovými a inline prvkami.

V predchádzajúcom článku z rubriky (o ktorej sa hovorilo hlavne) sme skončili tým, že každý dokument na internete musí mať určitú štruktúru.

Prvým prvkom značkovacieho jazyka, s ktorým sa stretnete v akomkoľvek bežnom webovom dokumente (stránke lokality), bude špeciálna direktíva Doctype. Začína sa lomenou zátvorkou, po ktorej bezprostredne nasleduje výkričník.

Samotný prvok Doctype slúži na deklarovanie typu daného dokumentu a pomáha prehliadaču pochopiť, na ktorú verziu Html alebo XHTML (podľa klasifikácie validátora W3C) sa má spoliehať pri analýze kódu načítanej webovej stránky.

Ak typ dokumentu nie je špecifikovaný v tejto smernici v súlade so všeobecne uznávanými pravidlami, prehliadač s najväčšou pravdepodobnosťou stále zobrazí váš dokument správne, ale nie je pravda, že ďalšie populárne tisícky vašich čitateľov budú robiť to isté. Preto musí byť Doctype prítomný v zdrojovom kóde stránky a musí byť správne skompilovaný.

Zastavme sa však pri tom trochu podrobnejšie. Teraz na internete vidíme akýsi dualizmus alebo dva typy dokumentov – ako to bolo predtým pred oddelením CSS od lona jazyka HTML a ako to robia teraz podľa uznávaných moderných štandardov.

Prirodzene, po prijatí nových štandardov bolo na internete stále obrovské množstvo dokumentov vytvorených podľa starých princípov čistého HTML (bez CSS) a prehliadače s nimi museli nejako pracovať. Microsoft svojho času navrhol použiť práve túto direktívu Doctype z nového značkovacieho jazyka XML.

Môže to vyzerať inak (prečítajte si o tom nižšie), ale najjednoduchším spôsobom je použiť túto možnosť (nižšie vysvetlím prečo):

Týmto spôsobom prehliadač pochopí, ktoré štandardy by mal použiť na analýzu kódu dokumentu. Ak sa toto vyhlásenie uskutoční, prehliadač sa prepne do štandardného režimu. Ak ho prehliadač nenájde na samom začiatku dokumentu (alebo nezodpovedá správnemu pravopisu), prehliadač zapne režim zložitých trikov.

Dokument sa v tomto prípade zobrazí, ako keby bol tento prehliadač veľmi starý (vintage). Ak do toho istého dokumentu pridáte vyhlásenie, prehliadač analyzuje kód s ohľadom na všetky aktuálne dostupné štandardy.

Je pravda, že koncept starého prehliadača je veľmi vágny. Rovnaký líder v prevádzkovej rýchlosti a rýchlosti prenikania do sŕdc používateľov, Google Chrome, sa objavil až v roku 2008.

Začnime štandardom HyperText Markup Language 4.01 (HTML 5 je stále vo vývoji). V tomto prípade existujú tri možnosti Doctype: striktné, prechodné a s povoleným rámcom:

Najčastejšie sa používa druhá možnosť (Prechodná), pretože umožňuje viac slobôd pri písaní kódu dokumentu, ale je nepravdepodobné, že možnosť s rámami bude pre vás užitočná, pretože ich použitie je dnes irelevantné.

V skutočnosti existujú tri rovnaké možnosti Doctype pre XHTML – striktné, prechodné a s podporou rámca:

Pozrime sa však, odkiaľ tieto možnosti správneho zápisu priznania pochádzajú. Pamätajte, že v prvom článku sme sa pozreli na tabuľku prijateľných:

A samostatná tabuľka možných:

Ako vidíte, v oboch týchto tabuľkách je stĺpec „Depr“, v ktorom je písmeno „D“ označené zastaranými a zastaranými HTML tagmi a atribútmi. Toto sme už zvažovali. Všimnite si však, že vedľa každého „D“ v pravom susednom stĺpci „DTD“ je buď „L“ (voľné DTD) alebo „F“ (sada rámcov DTD).

To. všetky značky a atribúty, ktoré nie sú označené písmenom "D" (neodporúča sa), sú zahrnuté v prísnom zdobení Doctype (len odporúčané prvky a nič viac). Ak stále povoľujete používanie neodporúčaných značiek a atribútov jazyka Html (sú označené písmenom „D“), budete musieť na takéto dokumenty deklarovať prechodné vyhlásenie.

Niektoré prvky a atribúty označené "F" v stĺpci "DTD" (napr. FRAME, FRAMESET) budú zahrnuté v deklarácii Doctype pre rámové štruktúry. Je založený na prechodnom, ku ktorému sa pridávajú značky a atribúty na vytvorenie, o ktorých si môžete prečítať na uvedenom odkaze.

Teraz sa pokúsme zistiť, z ktorých častí pozostáva deklarácia Doctype?

Najprv príde názov - „Doctype“. Tu je, myslím, všetko jasné. Ďalej prichádza „Html“ - koreňový prvok tohto značkovacieho jazyka. Potom prichádza údaj, či je toto vyhlásenie verejné alebo systémové. Všetky varianty Doctype sú verejné, čo je označené slovom „PUBLIC“.

A potom sú tu dva identifikátory dokumentov. Prvý z nich sa nazýva verejný identifikátor („-//W3C//DTD HTML 4.01//EN“). Mínus znamená, že toto vyhlásenie nie je zaregistrované v norme ISO. Nasleduje názov konzorcia, jeho názov a jazyk, v ktorom je napísané. Druhý identifikátor špecifikuje cestu k súboru striktného variantu.

Teraz mi dovoľte povedať vám celú pravdu o Doctype. Prehliadače sa starajú len o jeho formálne správny pravopis, ale nikdy nepôjdu na webovú stránku konzorcia, aby si stiahli súbor v ňom uvedený.

Aj keď si zvolíte možnosť striktnej deklarácie a zároveň použijete značky a atribúty, ktoré sa v modernej verzii Html neodporúčajú, tak vám každý prehliadač bude stále správne rozumieť – to je overený a potvrdený fakt.

Preto bez ďalších okolkov bude písanie Doctype v Html 5 vyzerať takto:

To je všetko. Zostalo iba „Html“. A napriek tomu, že HTML 5 ešte nebolo úplne implementované, túto možnosť podporujú všetky moderné prehliadače a môžete ju pokojne používať. Ach ako, a ty hovoríš...

V servisnej oblasti webového dokumentu (medzi značkami Head) musí byť napísaný názov tohto dokumentu (webovej stránky) vložený do prvkov Title (pozri obrázok nižšie).

Je veľmi ťažké preceňovať význam informácií v ňom obsiahnutých (nepreháňam). Keď vyberiete kľúčové slová v Yandex Wordstat (používajú sa na tento účel), potom po zostavení sémantického jadra určite budete musieť spomenúť vybrané kľúčové slová v hlavičke Title.

O tom, aké dôležité sú slová obsiahnuté v nadpise pre budúcu úspešnú propagáciu projektu, sa dozviete z článku a o tom, ako napísať potrebné slová do nadpisu pre Joomla a WordPress, sa dozviete z článku.

Teraz, skôr ako prejdeme k zvažovaniu konkrétnych značiek, zastavme sa pri takom koncepte, ako sú komentáre v kóde Html. Často sú zahrnuté, aby sa uľahčilo neskoršie nájdenie správnych častí alebo aby ostatní ľahšie pochopili zámer autora. Je samozrejmé, že text týchto komentárov by sa za žiadnych okolností nemal zobrazovať na webovej stránke, preto sú v kóde naformátované špeciálnym spôsobom.

Komentáre v Html boli obzvlášť dôležité počas vlády rozloženia tabuľky (prečítajte si o tom), pretože v porovnaní s moderným rozložením blokov (popísané tu s príkladom) bolo veľmi ľahké zmiasť, čo sa zobrazuje v ktorej bunke tabuľky:

Pravdepodobne ste z vyššie uvedeného príkladu už pochopili, že všetky komentáre v jazyku Html začínajú rovnakým spôsobom ako akékoľvek iné prvky - lomenou zátvorkou, ale hneď za ňou, pri vytváraní komentára, budete musieť vložiť výkričník (pri popise Doctype som spomenul, že komentáre sú tiež deklarácie, ktoré musia začínať

Všetok text komentára, ktorý sa bude nachádzať medzi týmito dvojitými pomlčkami, budú prehliadače považovať za informácie o službe a nebudú žiadnym spôsobom spracované. Správnosť jeho zápisu možno jasne posúdiť pomocou opísaného:

Do komentára však môžete umiestniť nielen text, ale aj čokoľvek, čo sa vám páči. Napríklad pomerne často sa vyskytujú komentované fragmenty Html kódu a túto sekciu prehliadače nespracujú. Pozoruhodné je, že komentár je možné otvoriť na jednom riadku kódu a zavrieť ho aj po stovke riadkov a takto uzavretý kus kódu pre prehliadač jednoducho prestane existovať.

Všetko je celkom jednoduché a myslím si, že s nimi nebudete mať žiadne problémy. Aj keď v práci s viacriadkovými komentármi v HTML existuje jedna jemnosť. Do jedného komentára nemôžete umiestniť ďalší, inak môže prehliadač na webovej stránke zobraziť časť komentovaných informácií. Pozrime sa na túto konštrukciu ako príklad:

pokračovanie externého komentára-->

Takže pri analýze kódu webovej stránky prehliadač zistí úvodné znaky deklarácie komentára a začne hľadať tie záverečné. Nájde ho za slovami „Priložený komentár“, ale všetko ostatné (v našom prípade ide o pokračovanie externého komentára -->) spracuje prehliadač a zobrazí na webovej stránke.

V zásade, ak pri písaní HTML kódu použijete podsvietený editor, hneď si všimnete, že niečo nie je v poriadku podľa zmeny farby vášho komentára:

Všetky značky, ktoré je možné použiť vo vnútri prvkov Body (to, čo sa zobrazuje na webovej stránke a ktorých zoznam nájdete vo validátore W3C), možno rozdeliť do dvoch skupín: inline a block tagy.

Blokové prvky sa používajú na vytvorenie štruktúry webového dokumentu a vložené prvky sa používajú na formátovanie častí textu (riadkov). Okrem toho vždy musíte dodržiavať jedno neotrasiteľné pravidlo - nevkladajte blokové značky do malých písmen.

Najvýraznejšími a najvýraznejšími predstaviteľmi inline a block tagov sú v tomto poradí Div (prvok bloku - odtiaľ názov bloku) a Span (malé písmená). Tieto značky hypertextového značkovacieho jazyka sú spárované, t.j. majú otvárací a zatvárací štítok.

Vo všeobecnosti značky Div a Span nemajú v čistom HTML bez použitia kaskádových štýlov CSS absolútne žiadny účel ani význam. Sú to kontajnery, ktoré umožňujú meniť vlastnosti prvkov, ktoré obsahujú, prostredníctvom CSS.

Ak do zdrojového kódu stránky napíšete niekoľko prvkov Div za sebou, potom sa na webovej stránke každý z nich s najväčšou pravdepodobnosťou pokúsi obsadiť všetok priestor, ktorý má k dispozícii na šírku, a preto budú takéto kontajnery umiestnené pod sebou. . Za normálnych podmienok nebudú kontajnery Div stáť vedľa seba, pokiaľ ich k tomu neprinútite.

Napríklad tento Html kód sa zobrazí v troch blokoch umiestnených pod sebou:

V prehliadači Firefox, spolu s veľmi užitočným, používam aj plugin, ktorý veľmi pomáha s . Okrem iného dokáže zobraziť blokové prvky tak, že ich obklopí rámom. Bol to tento vývojársky doplnok, ktorý vytvoril modré rámy okolo kontajnerov Div na obrázku vyššie.

Značky Span môžu obsahovať časti textu (riadky) Html kódu, ktorý im dáva určité vlastnosti prostredníctvom CSS a takéto prvky môžu byť umiestnené na rovnaký riadok vedľa seba. Napríklad tento kód v prehliadači bude vyzerať takto:

Obsah Span tu bol tiež zvýraznený pomocou doplnku pre vývojárov webu. Pretože Keďže prvky Span sú vložené, nemali by ste do nich uzatvárať blokové značky, napríklad rovnaké kontajnery Div.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Mohlo by vás to zaujímať

Čo je hypertextový značkovací jazyk Html a ako zobraziť zoznam všetkých značiek vo validátore W3C
Značky a atribúty nadpisov H1-H6, vodorovný riadok Hr, zalomenie riadka Br a odsek P podľa normy Html 4.01
Písmo (tvár, veľkosť a farba), blockquote a značky Pre – staršie formátovanie textu v čistom HTML (bez použitia CSS)
Zoznamy v Html kóde - UL, OL, LI a DL tagy
Ako vložiť odkaz a obrázok (fotku) do HTML - IMG a A tagy
Znaky medzier a ich formátovanie kódu v Html, ako aj špeciálne znaky medzier a iné mnemotechnické pomôcky
Ako sa nastavujú farby v Html a CSS kóde, výber odtieňov RGB v tabuľkách, výstup Yandex a ďalšie programy Select, Option, Textarea, Label, Fieldset, Legend - Html tagy vo forme rozbaľovacích zoznamov a textových polí
Ako vytvoriť hypertextový odkaz (A, Href, Target blank), ako ho otvoriť v novom okne na stránke a tiež urobiť z obrázku odkaz v Html kóde
Iframe a Frame - čo sú a ako najlepšie používať rámce v Html

Dobrý deň, milí začínajúci webmasteri. V tejto lekcii budeme pracovať na vzhľade našej webovej stránky.

Ako som už písal, vzhľad stránky vytvára šablóna.

A v tejto lekcii sa naučíme, ako zmeniť šablónu WordPress, to znamená zmeniť farby, veľkosti, usporiadanie prvkov, obrázok v hlavičke stránky a vo všeobecnosti všetko, čo vidíme pri vstupe na stránku.

Ale skôr ako začnete, je vhodné si prejsť a alebo aspoň mať po ruke referenčnú literatúru, inak veľa z toho, o čom tu budem hovoriť, jednoducho nebude jasné.

Môžete, samozrejme, použiť moje, ale stále je lepšie sa učiť.

Okrem vyššie uvedeného si musíte prečítať príspevok a dodržiavať odporúčania v ňom uvedené. Sú veľmi jednoduché.

Začnime úpravou štandardnej témy „Twenty Ten“. Táto téma je štandardne nainštalovaná na zostave WordPress a je to tá, ktorú možno vidieť ihneď po inštalácii motora.

Mimochodom, tento zdroj obsahuje aj túto tému, len mierne upravenú. Alebo skôr prerobené do základov.

Vytvoríme si vlastný webdizajn pomocou nástroja Web Inspector.

Tento nástroj, nevyhnutný pre vývojárov, je štandardne dostupný vo všetkých moderných prehliadačoch a vyvoláva sa stlačením klávesu F12.

Môžete ho vyvolať aj kliknutím pravým tlačidlom myši na stránku a výberom položky „Zobraziť kód prvku“ alebo „Preskúmať prvok“

Dizajn mojej stránky sa už niekoľkokrát zmenil a vidíte starú verziu, ale to nemení podstatu.

Zatiaľ nepoznám všetky možnosti tohto nástroja (určite si ho budem musieť naštudovať a naštudovať), ale to, čo viem, stačí na to, aby som si s témou mohol robiť, čo chcem.

Ako vidíte, vo veľkom poli vľavo sú riadky s html kódom. Každý riadok je html kód jedného z prvkov aktuálne na stránke.

Ak naň umiestnite kurzor, prvok, ktorý mu na stránke zodpovedá, sa zvýrazní inou farbou a vedľa neho sa zobrazí poznámka pod čiarou označujúca názov selektora zodpovedného za tento prvok v šablóne štýlov a jeho veľkosť. v pixeloch.

Ak kliknete na tento riadok, zmení sa na modrý, ako keby bol opravený, a v poli napravo sa zobrazia všetky vlastnosti a hodnoty nastavené, v našom prípade do bloku s ponukou, v šablóne štýlov .

Ako vidíte, blok ponuky v šablóne štýlov je označený selektorom #access a má nasledujúce hodnoty:

šírka - 940 px
ľavý okraj – 0 px

Poďme nižšie

farba pozadia - žltá (pôvodne čierna)
viditeľnosť prvku - viditeľné
Plávajúce vľavo - asi preto, aby neodstrčili titul
horný okraj – 80 px a zarovnaný na stred
Dolný okraj – 30 px
rám - hrúbka, pevný, žltý (zo začiatku čierny)

Teraz o tomto prvku vieme takmer všetko a na želanie ho môžeme posunúť nadol alebo nahor, zmeniť jeho farbu alebo veľkosť, pritlačiť ho na ktorúkoľvek zo štyroch strán obrazovky alebo ho skryť mimo dohľadu.

Aby ste to mohli urobiť, musíte prejsť na Konzola - Vzhľad - Editor a nájsť tam súbor style.css

Klikneme naň a keď prejdeme na stránku o niečo vyššie, uvidíme súbor so štýlmi otvorený na úpravy. V prvom rade si celý súbor skopírujte a uložte do nejakého editora, možno do Poznámkového bloku.

V tomto súbore musíme nájsť #access selector. Najprv sa objaví v sekcii =Štruktúra, ale tam je zoskupený s inými selektormi, ktoré majú rovnaké vlastnosti a hodnoty.

#access nateraz z tejto skupiny neodstraňme, keďže mne napríklad vyhovovala šírka uvedená v tejto skupine. Ideme ďalej do sekcie „Menu“. Tu je náš blok prezentovaný v celej svojej kráse.

Tu ho môžete posúvať nahor a nadol tak, že zmeníte hodnotu vo vlastnosti margin, zmeníte farbu a ak do vlastnosti display namiesto bloku nevložíte žiadnu, tak ju urobíte neviditeľnou.

Po každej manipulácii nezabudnite súbor aktualizovať!

Konkrétne som si vybral blok ponuky na demonštráciu, pretože má zložitú štruktúru. Veď v hlavnom bloku obsahuje aj bloky odkazov a text v týchto odkazoch, ktorý je sám o sebe tiež samostatným blokom.

Ako ste si už všimli, vo webovom inšpektorovi každý riadok začína trojuholníkom. Ak je nasmerovaná doprava, potom je v nej skrytých niekoľko ďalších čiar. Klikneme na trojuholník a otvorí sa nám kód prvkov uzavretých v bloku ponuky.

Tieto prvky zase obsahujú viac prvkov a musíme ich otvárať všetky, teda všetko, čo je v bloku menu.

Teraz pohybom kurzora pozdĺž čiar v ľavom poli sa v pravom poli pozrieme na to, ako zistiť tento alebo ten prvok v súbore štýlu. css a zistite, aké hodnoty by sme chceli zmeniť.

Potom prejdeme do editora, nájdeme požadovaný selektor a zmeníme to, čo máme na mysli. Ukážem vám, čo som zmenil, aby menu nadobudlo rovnaký vzhľad a funkčnosť ako na tejto stránke.

Ak chce niekto úplne odstrániť túto ponuku zo stránok lokality, potom musí ísť do Vzhľad > Editor a otvoriť súbor header.php na úpravu.

V kóde súboru nájdeme značku a odstránime ju a všetko po nej, až po prvú.

Môžete to jednoducho urobiť neviditeľným. Aby ste to dosiahli, v súbore style.css sa do selektora #access pridá vlastnosť display:none.

Teraz sa pozrime, ako nahradiť obrázok v hlavičke stránky. Povedzme, že všetky obrázky navrhnuté v téme vám nevyhovovali a rozhodli ste sa nainštalovať niečo úplne vlastné. Môžete vidieť, kde na stránke získať obrázok pre hlavičku, a keď sa nájde alebo vytvorí, umiestnite ho do priečinka obrázkov témy.

Potom prejdeme do súboru style.css a uvidíme, čo je potrebné urobiť, aby požadovaný obrázok zmizol, ale požadovaný sa objavil.

Nájdeme sekciu “=Header”, ktorá obsahuje všetko, čo súvisí s hlavičkou stránky a nájdeme tam selektor obrázkov. Potom zmeníme hodnotu display:block na display:none a obraz zmizne z obrazovky.

Potom prejdeme do sekcie „=Štruktúra“ a v selektore #wrapper urobíme nasledujúci záznam. Vlastnosť background: je tam štandardne, toto je pozadie stránky, takže vlastnosti pridávame len pre obrázok.

Do hodnoty vlastnosti background-image umiestnime adresu nového obrázka, ktorý sme našli alebo vytvorili, predtým načítaného do priečinka obrázky témy.

Ak je stránka hosťovaná, potom sa tento priečinok nachádza v: site_name > public_html > wp-content > > témy > obrázky.
Ak je stránka stále na lokálnom hostingu, cesta k tomuto priečinku je: Z > home > site_name > www > wp-content > > témy > obrázky.

V prvom prípade sa obrázok stiahne pomocou správcu súborov, v druhom sa obrázok jednoducho uloží do tohto priečinka.

Tu po inštalácii budete musieť upraviť len vlastnosť background-position, aby ste presnejšie umiestnili hlavičku na stránku a vlastnosť pozadia je potrebná v prípade, že sa niektorým návštevníkom neotvorí obrázok v hlavičke.

V tomto prípade bude mať hlavička aspoň pozadie.

Toto sa robí nasledovne. Prejdite do konzoly - položky - pridať položku, prepnite editor do režimu HTML a pomocou načítača obrázkov (Pridať mediálny súbor) načítajte požadovaný obrázok.

Kód pre tento obrázok sa zobrazí v editore. Je potrebné ho skopírovať a odstrániť „Záznam“.

Potom prejdite na “Vzhľad - Editor” a otvorte na úpravu súbor header.php, v ktorom nájdeme riadok

Hneď za tento riadok vložíme skopírovaný kód obrázka. Kód má triedu zarovnania class="aligncenter" a v závislosti od potreby možno aligncenter nahradiť za alignleft alebo alignright .

Bude to závisieť od toho, na ktorom okraji alebo v strede je obrázok umiestnený.

Ak po uložení a prezretí treba obrázok niekam ešte trochu posunúť, tak sa vrátime do editora a do kódu obrázka do tagu img vložíme atribút style s vlastnosťou margin:

style="margin:0 0 0 0;"

Kde namiesto núl vložíme požadované veľkosti zarážok, a tým posunieme obrázok požadovaným smerom.

Farbu polí je možné zmeniť tak, že v selektore tagu "body" trochu prejdete do sekcie "=Globálne prvky". Moje polia boli vytvorené z namnoženého obrázka. Neskôr som ho odstránil a nechal ho obyčajný, ale môžete vidieť, ako to urobiť (obrázok na okraji).

Ak zmeníte iba farbu, potom stačí zmeniť hodnotu vo vlastnosti pozadia

Tu sa mení veľkosť, typ a farba písma lokality

A veľkosť, farba, vzhľad nadpisu a popisy stránok v hlavičke sú tu. Tu môžete upraviť umiestnenie nadpisu a popisu pri zmene obrázku hlavičky.

Zatiaľ sa tam zastavme. Skúšať, meniť, hýbať sa, zlepšovať sa. Čoskoro prevedieme stránku na skutočný hosting. Samozrejme, aj tam urobíme nejaké zmeny, ale musíme ich robiť sebavedomejšie a rýchlejšie a robiť čo najmenej chýb.

Hotové HTML šablóny v ruštine