2. díl - Základní HTML tagy

HTML a CSS Statický web Základní HTML tagy American English version English version

V minulém tutoriálu jsme si ukázali, jak vypadá struktura HTML stránky a vytvořili jsme si první stránku se dvěma odstavci textu. To nám však pochopitelně nestačí, proto si v tomto dí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:

HTML tutoriál – odstavce

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 />. Vypadlo 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:

HTML tutoriál – odstavce

Č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

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:

HTML tutoriál – zvýraznění textu

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:

HTML tutoriál – podtržení textu

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:

HTML tutoriál – přeškrtnutí textu

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ě devbook.cz <mark>zvýšila o 300%</mark>.</p>

Výsledek:

HTML tutoriál – zvýraznění textu

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ájmence odkáži na český HTML 5 manuál. Vy budete ve většině případů používat hlavně 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 devbook.cz, kde se nyní učím <strong>HTML</strong> a <strong>Javu</strong>. Základy těchto jazyků ovládám.</p>

Výsledek:

HTML tutoriál – Nadpisy

Výsledný kód máte opět níže ke stažení. Příště to bude o obrázcích a odkazech.


 

Stáhnout

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

 

  Aktivity (2)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (56 hlasů) :
4.803574.803574.803574.803574.80357


 


Miniatura
Předchozí článek
Úvod do HTML a váš první web
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Obrázky a odkazy v HTML

 

 

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

Avatar
Inoue Yūki
Redaktor
Avatar
Inoue Yūki:

Tagy v HTML neurčují, jestli má být text tučný, kurzívou, atd... Ukazují, co text uvnitř znamená.

<b>

by jsi mohl v CSS klidně nastavit na kurzívu.

Editováno 5.8.2013 17:08
Odpovědět  ±0 5.8.2013 17:06
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Ano, před mnoha a mnoha lety se opravdu tučné písmo dělalo přes b, proto to je na jakpsatweb. Rozdíl mezi b a strong je obrovský, ale už se to tu řešilo tolikrát, že se k tomu nebudu vyjadřovat, najdi si to.

Odpovědět  ±0 5.8.2013 17:08
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Teď koukám, že je to dokonce napsané a zvýrazněné v článku, je vidět, že jsi ho ani nečetl.

Odpovědět  ±0 5.8.2013 17:09
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
havlat82
Člen
Avatar
havlat82:

Mě ten tag Mark nefungoval.. text sem editoval na poslední verzi PsPadu.. Postupoval chronologicky podle probíraných tagů a tagy sem zapisoval do souboru, kterej sem si vytvořil po předchozim dile..

 
Odpovědět 5.8.2013 23:54
Avatar
Odpovídá na havlat82
Libor Šimo (libcosenior):

Mne mark tiež nefungoval. Môže to byť tým, že som to skúšal na IE8.

Odpovědět 16.9.2013 8:46
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
K4rel
Člen
Avatar
K4rel:

b ti text zvýrazní tučně
strong také ale na toto slovo se zaměří i vyhledávač
třeba když něco hledáš na google a napíšeš tam to slovo tak se ti tam zobrazí ta stránka

Editováno 12.2.2014 18:26
 
Odpovědět  ±0 12.2.2014 18:26
Avatar
youtubak777
Člen
Avatar
youtubak777:

Tag <.b> pouze text zvýrazní (graficky; TAKTO), nežli <.strong> přidá textu i důležitost, tím pádem vyhledávače tento text budou brát jako důležitý a zobrazovat stránky s ním přednostně. (Tagy bez teček)

Editováno 14.10.2014 22:07
 
Odpovědět  ±0 14.10.2014 22:06
Avatar
Tomáš Brůna
Redaktor
Avatar
Tomáš Brůna:

není toto chyba? sice malá ale trochu mě to zmátlo :)

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

a ve výsledku není devbook ale islandsoft :)

Odpovědět 22.6.2015 15:29
Lepší být šprt než blbec :)
Avatar
Richard H.
Redaktor
Avatar
Richard H.:

pěkný tutoriál tohle budu číst dál

Odpovědět  ±0 14.7.2015 14:09
Malý užitečný manuál je vždy lepší než bichle k ničemu.
Avatar
Ferdinand Fojtlin:

Super...

 
Odpovědět 1. května 13:27
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 32. Zobrazit vše