Můžete použít značku i. HTML5: staré značky s novým účelem

Každý ví, že značky , , , jsou prezentační, a proto se na základě paradigmatu „struktura, prezentace, chování“ nedoporučuje jejich použití. Prvky se zdají mnohem známější , , . To je případ mnoha let vývojářské praxe. S příchodem HTML5 se však v sémantice těchto prvků mnohé změnilo. Nyní máme 4 nové značky s významem a nepořádkem v našich hlavách.

vs

Pokud byly dříve všechny učebnice rozložení plné frází jako „použití namísto “, a to byla poloviční pravda, pak dnes takový zvyk může hrát krutý sémantický vtip. Jde ale o to, že autoři HTML5 navrhují použít zvýraznit pasáže textu s cílem upoutat čtenářovu pozornost, aniž by to znamenalo zvýšení významu textu nebo intonace. Specifikace poskytuje příklady toho, jak lze klíčová slova použít k označení dokumentu.

The frobonitor a barbinátor komponenty jsou smažené.

A vede (první odstavec článku v žurnalistice)


Koťátka "adoptovaná" králíčkem


Šest opuštěných koťat našlo nečekanou novou figurku matky - králíčka.


Veterinární sestra Melanie Humble vzala třítýdenní koťata do svého domova v Aberdeenu.


Ve své řadě , stejně jako dříve, znamená zvýšený význam jejího obsahu.

vs

Od teď obsahuje text, který vyčnívá z obecného prostředí, ale nemá žádný emocionální přesah. Dle mého názoru, Je logické použít tam, kde typografická tradice vyžaduje kurzívu (například slova v cizím jazyce, termíny atd.)

Podle Aspera ad Astra— v překladu z latiny znamená rčení „Trny ke hvězdám“.

znamená důrazný stres, emoční důraz na danou pasáž textu. To je případ, kdy v řeči zvýrazňujeme slova hlasem (intonace, hlasitost atd.)

Vykonat je to zakázáno, mít slitování.

Přečtěte si pozorně smlouvu!

„Jemný text“ (informace, které jsou zákonnou formalitou, jako např. podniková licence nebo adresa sídla atd.) zpravidla označujeme prvkem s třídou, která u vizuálních uživatelských agentů určuje menší písmo. Nyní se v našem arzenálu objevil nový starý sémantický prvek - .

Holivar o

Dříve nebylo nic jiného než přeškrtnutý text. Nyní představuje informaci, která ztratila svou relevanci.
Máme také prvek , výchozím výsledkem zpracování ve vizuálních uživatelských agentech je přeškrtnutý text. Znamená změny dokumentu a na první pohled se jejich účel může zdát stejný. Je zde však jeden jemný bod. Podívejme se na příklad stránky produktu v internetovém obchodě.
Může uvádět dvě ceny, z nichž jedna je přeškrtnutá. Označíme jej prvkem . To znamená, že stará cena ztratila svou relevanci (nezáleží na tom, kdy byla, důležitý je fakt sám o sobě). Jak zkontrolovat, že tomu tak není ? znamená změny provedené v dokumentu(hlavní je, že v určitém okamžiku byl dokument změněn). V našem případě nový dokument již obsahuje nepodstatné informace.

Nová sémantika a starý doctype

Pokud z nějakého neznámého důvodu nemůžete nahradit doctype novým a jste formálně rozvrženi v HTML 4.01, nezoufejte. Používejte staré nové prvky s novým významem a časem se zavděčíte. Možná někdo řekne, že je to špatně, ale tyto prvky kromě nejsou ani neplatné. HTML5 bylo navíc navrženo s ohledem na zpětnou kompatibilitu a totéž platí pro novou sémantiku starých prvků. Radikálně se nic nezměnilo, jen přibylo sémantické koření.

Nyní budeme studovat hlavní značky. Začněme tím, jaké značky jsou na stránce vyžadovány a tvoří její strukturu.

Blok. Jednoduchá struktura stránky

Webová stránka je běžný textový soubor s příponou .html. Text HTML stránky spolu se značkami je uložen uvnitř tohoto souboru. Tento soubor musí mít následující značky: tag , který by měl obsahovat text celého webu (vše napsané mimo tuto značku bude prohlížeč ignorovat) a uvnitř by měly být další dvě značky: tag pro obsah stránky služby a značku - pro hlavní text, který je viditelný na obrazovce prohlížeče.

Do obsahu služby, který se nachází uvnitř tagu , obsahuje mnoho různých věcí, ale prozatím potřebujeme pouze dvě z nich. Toto je značka , který určuje název stránky, který bude viditelný na kartě prohlížeče, a značku <meta>, který určuje kódování stránky (je umístěn v atributu <b>znaková sada</b> a obvykle záleží <b>utf-8</b>, více o tom ve videu, které bude o pár odstavců níže).</p> <p>Také před značkou <html>konstrukce se obvykle píše <b>doctype</b>, který označuje verzi HTML, ve které je web vytvořen. Aktuální verze jazyka je číslo pět a doctype pro ni by měl vypadat takto -<!DOCTYPE html> .</p> <p>Pojďme se tedy podívat na základní strukturu stránky (pro spuštění tohoto příkladu v prohlížeči jej zkopírujte do textového souboru s příponou <b>.html</b> a otevřete v prohlížeči, pokud s tím máte problémy, podívejte se na video pod příkladem):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Toto je titulní název Toto je hlavní obsah stránky.

Podívejte se na tento odkaz, abyste viděli, jak tento příklad vypadá v prohlížeči.

Myslím, že poté, co jste si přečetli základní strukturu stránky, jste stále trochu zmatení z toho, jak to celé vypadá v praxi. Natočil jsem proto speciální video, ve kterém vám ukážu, jak vytvořit svou první HTML stránku a spustit ji v prohlížeči (budu v něm mluvit i o titulku stránky, o kódování, o designu kódu). Podívejte se na to a teprve poté pokračujte v čtení:

No, teď, když jsme se naučili tvořit jednoduché stránky, přejdeme k prozkoumání užitečných značek, které by měly být použity uvnitř značky . Budou to značky pro odstavce, nadpisy, seznamy, odkazy a další užitečné věci. Pojďme tedy začít.

Blok. Odstavce

Jedním z hlavních prvků stránky je odstavce. Lze je přirovnat k odstavcům v knize – každý odstavec začíná na novém řádku a má tzv. červenou čáru (to je tehdy, když je první řádek textu odstavce mírně odsazen doprava). Ve výchozím nastavení není žádná červená čára, ale lze ji snadno vytvořit (o tom později).

Odstavec se vytváří pomocí značky

Tím pádem:

Toto je titulní název

Toto je odstavec.

To je ještě jeden odstavec.

A ještě jeden odstavec.



Toto je odstavec.

To je ještě jeden odstavec.

A ještě jeden odstavec.

Blok. Nadpisy h1, h2, h3, h4, h5, h6

Kromě odstavců jsou na stránce důležité věci hlavičky. Lze je také přirovnat k nadpisům z knihy – každá kapitola má svůj nadpis (název té které kapitoly) a je rozdělena do odstavců, které mají také své nadpisy. No, hlavní text stránky je umístěn v odstavcích.

Záhlaví jsou vytvořena pomocí značek

,

,

,

,

,
. Mají různou míru důležitosti. V názvu h1 by měl být umístěn název celé HTML stránky, V h2- Název bloky stránky, v h3- název podbloků a tak dále.

Všechna záhlaví jsou ve výchozím nastavení tučná a mají různé velikosti (to lze změnit pomocí CSS, ale o tom později). Viz příklad:

Toto je titulní název

Nadpis h1

Nadpis h2

Nadpis h3

Nadpis h4

Nadpis h5
Nadpis h6

Toto je první odstavec.

Toto je druhý odstavec.

Toto je třetí odstavec.



Takto bude kód vypadat v prohlížeči:

Nadpis h1

Nadpis h2

Nadpis h3

Nadpis h4

Nadpis h5
Nadpis h6

Toto je první odstavec.

Toto je druhý odstavec.

Toto je třetí odstavec.

Blok. Tlustý

Již víte, že záhlaví jsou ve výchozím nastavení mastný. Můžete to však udělat odvážně a prostý text- stačí označit . Viz příklad:

Toto je titulní název

Toto je normální text a toto je mastný text.



Takto bude kód vypadat v prohlížeči:

Toto je normální text a toto je mastný text.

by měl být použit uvnitř nějaké jiné značky, například odstavce. V tomto případě odstavce vytvářejí celkovou strukturu stránky (odstavce a nadpisy) a značku b dělá jednotlivé části textu tučným písmem.

Blok. Kurzíva

Kromě tučných můžete také vyrobit kurzíva pomocí značky :

Toto je titulní název

Toto je normální text a toto je kurzíva text.



Takto bude kód vypadat v prohlížeči:

Blok. Seznamy

Spolu s odstavci a nadpisy je zde ještě jeden důležitý prvek stránky – tento seznamy. Takové prvky znají snad všichni uživatelé internetu. Představují výpis něčeho (seznam) bod po bodu. Vedle každé položky v seznamu je obvykle vyplněný kruh (tzv popisovač seznam).

Seznamy se vytvářejí pomocí značky