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)
Š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.
Koťátka "adoptovaná" králíčkem
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 Máme také prvek
Může uvádět dvě ceny, z nichž jedna je přeškrtnutá. Označíme jej prvkem
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ě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čkaTaké před značkou konstrukce se obvykle píše doctype, 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 - .
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 .html a otevřete v prohlížeči, pokud s tím máte problémy, podívejte se na video pod příkladem):
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 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.
,
,
,
. 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.
,
. 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:
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 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 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
- , který musí obsahovat značky
- . Štítek ul určuje samotný seznam a značky li by měly být umístěny položky seznamu (to znamená, že jedno li odpovídá jedné značce seznamu). Vezměte prosím na vědomí, že značky li nelze používat samostatně. Viz příklad:
Toto je titulní název - První položka na seznamu.
- Druhá položka na seznamu.
- Třetí položka na seznamu.
Takto bude kód vypadat v prohlížeči:
- První položka na seznamu.
- Druhá položka na seznamu.
- Třetí položka na seznamu.
Seznamy vytvořené pomocí značky ul, jsou nazývány neuspořádaný seznamy. Toto jméno jim bylo dáno, protože existují také objednal seznamy, které mají číselné značky místo značek teček. Takové seznamy mají místo značky ul značku
- a položky těchto seznamů jsou také vytvářeny prostřednictvím značek li.
- První položka na seznamu.
- Druhá položka na seznamu.
- Třetí položka na seznamu.
- První položka na seznamu.
- Druhá položka na seznamu.
- Třetí položka na seznamu.
- Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
- Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
- Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
- Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
- Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
- Koncept ( Návrh specifikace) - první verze návrhu normy.
- barva – nastavuje barvu textu;
- size – velikost písma v konvenčních jednotkách.
- face – používá se k nastavení rodiny textových písem, které budou použity uvnitř tagu . Je podporováno několik hodnot oddělených čárkami.
- - nastaví v html tučné písmo. Štítek podobný v akci jako předchozí;
- — velikost je větší než výchozí;
- — menší velikost písma;
- — kurzíva (kurzíva). Podobná značka ;
- — text s podtržením;
- přeškrtnuté;- — zobrazit text pouze malými písmeny;
- - velkými písmeny.
- v pixelech;
- V absolutním vyjádření ( xx-small, x-small, small, medium, large);
- V procentech;
- V bodech (pt).
- normální – normální pravopis;
- kurzíva – kurzíva;
- šikmé – písmo šikmo vpravo;
- dědit – převezme pravopis nadřazeného prvku.
- tučné – nastaví písmo html na tučné;
- tučnější – tučnější vzhledem k normálu;
- světlejší – méně syté oproti normálnímu;
- normální – normální pravopis;
- 100-900 – nastavuje tloušťku písma v číselném ekvivalentu.
- titulek – pro tlačítka;
- ikona – pro ikony;
- menu - menu;
- message-box – pro dialogová okna;
- malé titulky – pro malé ovládací prvky;
- stavový řádek – písmo stavového řádku.
- normální - normální písmo;
- kurzíva - kurzíva;
- šikmý - šikmý styl.
Udělejme uspořádaný seznam pomocí tagu ol:
Toto je titulní název
Takto bude kód vypadat v prohlížeči:
Pohodlí objednaných seznamů je v tom, že mohu kamkoliv vložit novou položku seznamu - a číslování se samo přeskládá (tedy nemusím ho evidovat v případě jakýchkoli změn, jako by tomu bylo, kdybych si zařídil to ručně).
Blok. Odkazy
Odkazy jsou prvky, které z internetu dělají internet. Kliknutím na odkazy se můžeme přesunout z jedné stránky webu na druhou. Pokud by neexistovaly, byl by internet jen sbírkou stránek, které spolu nejsou žádným způsobem propojeny.
Toto je titulní název Odkaz na stránky phphtml.net.
Takto bude kód vypadat v prohlížeči:
Jsou tam odkazy absolutní A relativní, navíc mohou vést jak na váš web, tak na někoho jiného. Je lepší tyto těžké chvíle ukázat, než je popisovat textem, proto jsem pro vás natočil následující video. Podívejte se na to a teprve poté pokračujte v čtení:
Blok. snímky
Pojďme nyní zjistit, jak umístit obraz na vaší webové stránce. K tomu slouží značka
mající povinný atribut src, který ukládá cestu k souboru obrázku.
Podívejme se, jak to funguje v následujícím příkladu:
Toto je titulní název
Takto bude kód vypadat v prohlížeči:
Vezměte prosím na vědomí, že značka
nevyžaduje uzavírací značku.
Blok. Odkazy ve formě obrázků
Odkaz může tam být nejen text, ale také obrázek- k tomu stačí tag
vložte do štítku , jak je uvedeno v následujícím příkladu. Klikněte na obrázek a budete následovat odkaz na webovou stránku phphtml.net (pro návrat zpět ke knize klikněte v prohlížeči na tlačítko „zpět“):
Toto je titulní název
Takto bude kód vypadat v prohlížeči:
Blok. Zalomení řádku
Pamatujte, co se stane, když například uděláte dva odstavce vedle sebe - v tomto případě bude text, který leží v každém z nich, začínat Nový linky.
Podívejme se na to na následujícím příkladu:
Toto je titulní název Toto je první odstavec.
Toto je druhý odstavec.
Takto bude kód vypadat v prohlížeči:
Toto je první odstavec.
Toto je druhý odstavec.
Jsou ale situace, kdy bychom chtěli mít jeden odstavec, ale nějaký text v něm začíná na novém řádku. Proč to může být potřeba? Například chci napsat báseň, ale nechci rozdělit každý řádek na samostatný odstavec, protože by to nebylo příliš logické.
Chcete-li to provést, na místo, kde by měl být konec řádku, byste měli napsat značku
. Upozorňujeme, že tato značka je speciální a nemá uzavírací značku.Podívejme se, jak to funguje na následujícím příkladu:
Toto je titulní název Toto je první řádek textu,
a tohle je ta druhá.
Takto bude kód vypadat v prohlížeči:
Toto je první řádek textu,
a tohle je ta druhá.Blok. HTML komentáře
Téměř všechny programovací jazyky mají takový koncept jako „komentáře“.
Popis
Nastaví styl kurzívy písma. Je přijatelné používat tuto značku ve spojení s jinými značkami, které definují styl textu.
Syntax
TextUzavírací štítek
Požadované.
Atributy
Podobné jako CSS
Příklad. Pomocí značky
Štítek I Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elita, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Poznámka
I když použití značky není v HTML odsuzován, použití stylů poskytuje větší kontrolu nad stylem textu.
Specifikace ?
✖
Specifikace
Každá specifikace prochází několika fázemi schvalování.
Alive stojí stranou HTML standard(Living) - nedodržuje tradiční číslování verzí, protože se neustále vyvíjí a je pravidelně aktualizován.
Prohlížeče: Desktop Mobile ?
internet Explorer Chrome Opera Safari Firefox 2 1 2 1 1 Android Firefox pro mobily Opera Mobile Safari pro mobily 1 1 6 1 V html hraje velikost písma důležitou roli. Umožňuje vám přitáhnout pozornost uživatele důležitá informace, zveřejněné na stránce webu. I když není důležitá jen velikost písmen, ale také jejich barva, tloušťka a dokonce i rodina.
Tagy a atributy při práci s html fonty
Hypertextový jazyk má širokou škálu nástrojů pro práci s fonty. Koneckonců, formátování textu je hlavním úkolem html.
Důvodem vzniku jazyka HTML byl problém se zobrazováním pravidel formátování textu v prohlížečích.
Podívejme se na značky, které se používají pro práci s fonty v HTML a jejich atributy. Tím hlavním je tag . Pomocí hodnot jeho atributů můžete nastavit několik charakteristik písma:Jsou podporovány kladné hodnoty atributů od 1 do 7.
Formátuje se pouze text umístěný mezi částmi pár značek písmo. Zbytek textu je zobrazen standardním výchozím písmem.
Také v html existuje řada párových značek, které určují pouze jedno pravidlo formátování. Tyto zahrnují:Prostý text
Náhled
Náhled
Více než obvykle
Méně než obvykle
Kurzíva
Kurzíva
S podtržítkem
PřeškrtnutéMožnosti atributů stylu
Kromě popsaných značek existuje několik dalších způsobů, jak změnit písmo v html. Jedním z nich je použití atributu generic style. Pomocí hodnot jeho vlastností můžete nastavit styl zobrazení písem:
1) font-family – vlastnost nastavuje rodinu písem. Je možné uvést více hodnot.
Změna písma v html na další hodnotu proběhne, pokud předchozí rodina není nastavena na operační systém uživatel.Syntaxe zápisu:
font-family: font-name [, font-name[, ...]]
2) font-size – velikost se nastavuje od 1 do 7. Toto je jeden z hlavních způsobů, jak můžete zvětšit písmo v HTML.
Syntaxe zápisu:velikost písma: absolutní velikost | relativní velikost | význam | zájem | zdědit
Můžete také nastavit velikost písma:
Velikost písma: 7
Velikost písma: 24px
Velikost písma: x-large
Velikost písma: 200 %
Velikost písma: 24pt
3) font-style – nastavuje styl psaní písma. Syntax:styl písma: normální | kurzíva | šikmý | zdědit
Hodnoty:
Příklad, jak změnit písmo v html pomocí této vlastnosti:
font-style:zdědit
styl písma: kurzíva
styl písma:normální
styl písma:oblique
4) font-variant – převede všechna velká písmena na velká. Syntax:varianta písma: normální | malé kapičky | zdědit
Příklad, jak změnit písmo v html pomocí této vlastnosti:
font-variant:zdědit
font-varianta:normal
font-varianta:malé kapitálky
5) font-weight – umožňuje nastavit tloušťku textu (sytost). Syntax:váha písma: bold|bolder|lehčí|normální|100|200|300|400|500|600|700|800|900
Hodnoty:
váha písma: tučné
váha písma: tučnější
váha písma:lehčí
váha písma: normální
váha písma: 900
váha písma: 100
Vlastnost písma HTML a barva písma
Písmo je další vlastnost kontejneru. Uvnitř sebe kombinovalo hodnoty několika vlastností určených pro změnu písem. syntaxe písma:
font: font-size font-family | zdědit
Hodnotu lze také nastavit na písma používaná systémem ve štítcích na různých ovládacích prvcích:
font:ikona
font: titulek
font:menu
font:box-zprávy
malý titulek
font:stavový řádek
font:italic 50px tučně "Times New Roman", Times, patka
Chcete-li nastavit barvu písma v HTML, můžete použít vlastnost color. Umožňuje nastavit barvu pomocí klíčové slovo a ve formátu rgb. A také v hexadecimálním kódu.Kurzíva je jedním z nejoblíbenějších způsobů, jak zvýraznit část textu a dát mu nějaký význam. Je ideální pro citace, poznámky pod čarou, názvy a vlastní jména. V HTML existují dvě speciální značky pro zobrazení stylu kurzívy. V CSS je kurzíva řízena vlastností font-style.
Kurzíva nebo kurzíva?
Stejné písmo může vypadat odlišně ve stylu kurzívy.
Obrázek ukazuje tři bloky textu napsané stejným písmem Playfair Display. První z nich má obvyklý římský styl, zatímco druhý a třetí mají kurzívu. Jsou otevřené ve stejném Prohlížeč Google Chrome, ale vypadá úplně jinak.
Faktem je, že některá písma mají své vlastní znakové sady kurzívy. Pokud prohlížeč nemá přístup k této sadě, ale narazí na text, který by měl být vykreslen jako kurzíva, pokusí se jej přepsat kurzívou sám.
Ve druhém bloku je právě taková verze zpracovaná prohlížečem a ve třetím je originální kurzíva fontu Playfair Display, který má unikátní styl, spíše ručně psaný. Prohlížeč jednoduše nakloní každý znak textu pod určitým úhlem, čímž simuluje kurzívu.
Při zjišťování, jak udělat kurzívu v CSS nebo HTML, je důležité si uvědomit, že v případě konkrétních písem musíte prohlížeči poskytnout přístup k jejich sadám kurzívy. V některých případech může být výsledek algoritmů naklonění prohlížeče neuspokojivý.
HTML kurzíva
Pro zobrazení textu kurzívou v HTML existují dvě speciální značky: i (od slova kurzíva) a em. Styl textového fragmentu uzavřeného v kterémkoli z těchto deskriptorů bude stejný.
Rozdíl je v logickém výběru. Značka em označuje zvláštní význam fragmentu. To je důležité pro vyhledávací roboty a čtečky obrazovky, které zvýrazní zadaný text pomocí intonace.
vlastnost stylu písma
V CSS je kurzíva řízena příkazem ve stylu písma. Může nabývat jedné ze tří základních hodnot:
Aktuálně většina moderní prohlížeče zacházet se šikmými hodnotami a kurzívou stejným způsobem, ale původně se předpokládalo, že první z nich je výsledkem speciálních algoritmů prohlížeče, které naklánějí každý znak doprava.
Pokud hledaný font nenalezne prohlížeč, bude kurzíva vypadat úplně stejně jako šikmá.
Na rozdíl od tagu em nedává výběru žádnou zvláštní důležitost, spíše odpovídá deskriptoru i.
Příklady
Uvozovky se často používají kurzívou. Zkusme, aby to vypadalo hezky.
Citace ( styl písma: kurzíva; levý okraj: 5 pixelů plná fialová; levý padding: 20 pixelů; )
Kromě ozdobného okraje vpravo a odsazení má blok citace pravidlo stylu písma s hodnotou kurzíva.
Použijte jej k nastavení kurzívy v CSS.