Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

Lekce 2 - Základní HTML tagy

V minulé lekci, Úvod do HTML a váš první web, jsme si ukázali, jak vypadá struktura HTML stránky a vytvořili jsme si první stránku se dvěma odstavci textu.

Dva odstavce na naší webové stránce, naučené z minula, nám však pochopitelně nestačí. Proto si v tomto HTML tutoriálu uvedeme základní HTML tagy.

Odstavce

Odstavec jsme si již zmínili v minulém díle. Pro zopakování uvedu, že text nemůže v HTML jen tak plavat, ale je rozdělen do odstavců <p>. Tag <p> je párový a obaluje tedy text, který má uvnitř odstavce být. Před text píšeme <p>, za textem odstavec uzavřeme </p>.

Ukázka:

<p>Toto je první odstavec</p>
<p>Toto je první věta druhého odstavce.
Toto je druhá věta druhého odstavce</p>

Výsledek:

Moje první webová stránka
index.html

Všimněte si, že v HTML nehraje vůbec žádnou roli odřádkování. Druhý odstavec máme napsaný na 2 řádky, ale zobrazí se jako jeden řádek. Prohlížeč totiž přechod na nový řádek na stránce zobrazí jen jako mezeru. Pokud bychom z nějakého důvodu chtěli v odstavci odřádkovat, využijeme nepárový tag <br />. Vypadalo by to nějak takhle:

<p>Toto je první odstavec</p>
<p>Toto je první věta druhého odstavce.<br />
Toto je druhá věta druhého odstavce</p>

Výsledek:

Moje první webová stránka
index.html

Častou chybou je používání dvou <br /><br /> za sebou místo vytvoření nového odstavce, to je špatně.

Zvýraznění textu

Když je nějaká část textu důležitá, sdělíme to prohlížeči pomocí zvýrazňovacích tagů. Jsou to hlavně párové tagy <strong> a <em>.

Kurzíva a tučný text

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Text v <em> (emphasis = zvýraznění) se zobrazí jako kurzíva (italika), ale to není vše. Říkali jsme si, že HTML slouží hlavně k definování významu. Text v em se bere jako důležitý, internetové vyhledávače (např. Google) se o něj pak zajímají více, než o ostatní text. Podobně text ve <strong> je vnímán jako silně zvýrazněný (strong emphasis), tedy jako ještě důležitější. Prohlížeč ho zobrazí jako tučné písmo.

Ve starých materiálech můžete narazit na tagy <b> a <i>. Ovšem ty text pouze vykreslily jiným stylem a jeho význam se vůbec nezměnil. Proto se již pro zvýraznění nepoužívají.

Zvýraznění si můžeme vyzkoušet, zdůrazníme důležitou skutečnost:

<p>Pro zneškodnění výbušniny přestřihněte <strong>červený</strong> drát, modrý drát může zapřičinit explozi.</p>
<p>Spusťte editor registru příkazem <em>regedit.exe</em>. <strong>Neručím za případné škody!</strong></p>

Výsledek:

Moje první webová stránka
index.html

Tagy samozřejmě můžeme kombinovat, např. <strong><em>Tento text bude vykreslen jako kurzíva i jako tučný</em></str­ong>. Dejte si pozor, aby byly tagy ukončeny ve správném pořadí.

Podtržení

K podtržení textu existuje tag <u>. Ten se však příliš nepoužívá, protože lidé jsou zvyklí, že podtržené jsou odkazy. Přesto si jej pro úplnost vyzkoušejme, i když byste jej na webu neměli používat:

<p>Často vídávám psát <u>připoměl</u>, i když to není gramaticky správně.</p>

Výsledek:

Moje první webová stránka
index.html

Přeškrtnutí

Přeškrtnutý text označíme opět párovým tagem <s> (jako strike = přeškrtnutý). Jedná se o text, který již není aktuální nebo korektní (např. minulá cena zboží nebo zdůraznění nesprávného tvrzení/postupu).

Ukázka:

<p>Vítejte v České republice. Za hodinu internetu nyní na cestách zaplatíte
<s>10 Kč</s> 200 Kč.</p>

Výsledek:

Moje první webová stránka
index.html

Optické zvýraznění

Jako poslední si zmiňme nový tag <mark>, který slouží k optickému zvýraznění nějaké části textu. Tento text není důležitý pro vyhledávače (jako v případě strong), ale pro uživatele. Můžeme zvýraznit v textu důležitou skutečnost, prohlížeč tento text vykreslí se žlutým pozadím:

<p>Během roku se návštěvnost sociální sítě itnetwork.cz <mark>zvýšila o 300%</mark>.</p>

Výsledek:

Moje první webová stránka
index.html

Pokud vám výše zmíněné tagy připomněly tlačítka v MS Wordu, máte pravdu, jedná se o základní typografii, která je přítomna ve většině textových editorů.

Zvýrazňovacím tagům se říká tagy frázové. Existuje jich ještě několik, ale pro naše potřeby jsou již zbytečné. Zájemce odkáži na český HTML 5 manuál. Vy budete ve většině případů používat hlavně tag strong, jelikož si tohoto textu poté všímá vyhledávač.

Nadpisy

Nadpisy jsou považovány jako nejvýraznější text. Zapisují se párovým tagem <h1> (jako header). HTML poskytuje 6 úrovní nadpisů, kde <h1> je nadpis nejvyšší úrovně a <h6> je nadpis úrovně nejnižší. Nadpis <h1> by měla být ta úplně první věc na stránce a měla by obsahovat název stránky. Jako další by měly následovat nadpisy <h2>, které rozdělují stránku na další podsekce. Další nadpisy se využívají jen zřídka, zejména ke členění textu v článku.

Začněme pracovat na jednoduchém osobním webu, který budeme během seriálu postupně rozšiřovat a vylepšovat, až ho nakonec nahrajeme na internet. Web s nadpisy by mohl vypadat například takto:

<h1>Můj první web</h1>
<p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>

<h2>O mně</h2>
<p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.</p>
<p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
<p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>

<h2>Dovednosti</h2>
<p>V prváku jsem začal ve škole s programovacím jazykem PASCAL. Hledal jsem na internetu nějaké lepší jazyky a náhodou jsem narazil na itnetwork.cz, kde se nyní učím <strong>HTML</strong> a <strong>Javu</strong>. Základy těchto jazyků ovládám.</p>

Výsledek:

Moje první webová stránka
index.html

Výsledný kód máte opět níže ke stažení.

V příští lekci, Obrázky a odkazy v HTML, si ukážeme přidání obrázků a odkazů na webovou stránku.


 

Měla jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 1528x (682 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Úvod do HTML a váš první web
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
141 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (7)

 

 

Komentáře
Zobrazit starší komentáře (66)

Avatar
Robertos Rigáň:23.4.2020 18:14

Keď som sa s týmto prvý krat stretol na kurze u nás vysvetlovali to dosť zložito na začiatočníkov , ale tu je to krasne všetko rozpísané že to pochopi aj úplný laik keď si to viac krát prečíta :) perfektný serial ďakujem 5x ano postupujete dalej:D

Odpovědět
23.4.2020 18:14
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Jarmila Mizerová:1.6.2020 15:46

perfektně se mi podle toho učí,
jen použila
Visual Studio Code,
tam se mi po zadání prvního písmenka nabídnou všechny tagy začínající tím písmenem a když dá TAB tak jsou tam <>
je to pohodlnější

 
Odpovědět
1.6.2020 15:46
Avatar
Michael Last
Člen
Avatar
Michael Last:7.7.2020 16:55

Tak jsem rpošel další lekcí.Akorá se přiznám že jsem nevědel kam se píší ty nadpisy:Tak jsem to stáhl dole podívál se a už jsem to věděl.Určitě i ti co stránky píší mají někde napsané ty příkazy protože toho bude asi moc.Jinak se mi to moc líbí.

Odpovědět
7.7.2020 16:55
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
micmar
Člen
Avatar
micmar:15.7.2020 17:50

Jasné a výstižne, tak by to malo byť aj v škole

 
Odpovědět
15.7.2020 17:50
Avatar
Lukáš Navrátil:30.7.2020 3:50

Děkuji za tutoriál :)

 
Odpovědět
30.7.2020 3:50
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Pavel Kubalík:13.10.2020 17:23

Dobrý den
Tak jsem už v HTML. Je to nádherné.
Zatím bez problémů.
Upozornil bych na mírný nedostatek.
Obrázek k nastavení UTF-8 není asi aktuální. Nejdřív se mi to na webu nechtělo zobrazovat česky.
Musí se to nastavit v roletě Kódová stránka. To je zatím vše
Děkuji PK

 
Odpovědět
13.10.2020 17:23
Avatar
Štefan Murza:15.11.2020 14:41

Začína sa mi to stále viac páčiť. Ďakujem.

 
Odpovědět
15.11.2020 14:41
Avatar
Loxley
Člen
Avatar
Loxley:24. ledna 14:08

Děkuji, jedeme dál ... :-)

 
Odpovědět
24. ledna 14:08
Avatar
Jiří Pejša :5. března 16:49

Super úvod! Jedem dál ✌

 
Odpovědět
5. března 16:49
Avatar
Honza
Člen
Avatar
Honza:4. dubna 19:26

Jasné jak facka. Děkuji

 
Odpovědět
4. dubna 19:26
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 76. Zobrazit vše