Pouze tento týden sleva až 80 % na e-learning týkající se Javy. A zároveň využij akce až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme koordinátorku kurzů a programátora, 100% home office, 100% flexibilní. Prozkoumej aktuální pozice
Java week

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ěl 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 1691x (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
Přeskočit článek
(nedoporučujeme)
Obrázky a odkazy v HTML
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
310 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

 

 

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

Avatar
Pavel Šilhán:12.10.2021 19:46

Kódování UTF-8. Navíc je dobré před <head> dát <html lang="cs">.

 
Odpovědět
12.10.2021 19:46
Avatar
Robin Štafl
Člen
Avatar
Robin Štafl:14.10.2021 21:41

Ahoj. Toto vse pisu do <body> a predpokladam, ze to nastaveni (jazyk, aj) z prvni lekce zustava? Tzn.toto co děláme pridavam pod </body>?

 
Odpovědět
14.10.2021 21:41
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na Robin Štafl
Samuel Hél:14.10.2021 22:11

Ahoj, přesně jak píšeš. Ověřit si to můžeš stažením přílohy pod článkem :)

 
Odpovědět
14.10.2021 22:11
Avatar
Petr Svoboda
Člen
Avatar
Petr Svoboda:28.10.2021 16:08

Nefunguje mi ...

Pro <strong><em>zneškodnění</em></strong> výbušniny

Slovo zneškodnění je ok. Ale slovo výbušniny se zobrazí tučně, i když by mělo být netučné.

 
Odpovědět
28.10.2021 16:08
Avatar
Jana Bod'ová:30.10.2021 14:59

Zvládla jsem. :) akorát mi nefunguje <mark>.. jakože ho tam vůbec nemám na výběr.. Jen <strong>

 
Odpovědět
30.10.2021 14:59
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Pavel Kubalík:8.11.2021 16:00

Dobrý den
Dnes (téměř po roce) jsem se vrátil, ta jak jsem slíbil, k opakování studia HTML.
Byl jsem velmi mile překvapen, že mě tu čekal, jako editor, Visual Studio Code, místo PSPadu. Udělali jste mi opravdu radost.
S tímto editorem jsem se setkal již při studiu JavaScriptu. Upozornil mě (na tento editor) jeden kolega ze zdejší komunity.
Příjemné překvapení potěší.
Děkuji PK

 
Odpovědět
8.11.2021 16:00
Avatar
weverka
Člen
Avatar
Odpovídá na Pavel Kubalík
weverka:8.11.2021 17:31

Já si občas tyto tutoriály přejedu znovu a změna designu vytvořeného webu a editoru mě moc potěšila. Už jen to že Vs Code má intellisense či co to je a PSPad byl oproti tomu lepší notepad. Takže s tebou rozhodně souhlasím.

Odpovědět
8.11.2021 17:31
Weby jsou budoucnost IT
Avatar
Filip Hašek
Člen
Avatar
Filip Hašek:23.11.2021 20:14

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

Mohu se zeptat proč? Když je použiji za sebou, tak to při zobrazení funguje.

Díky

 
Odpovědět
23.11.2021 20:14
Avatar
weverka
Člen
Avatar
Odpovídá na Filip Hašek
weverka:24.11.2021 10:05

Ahoj, je to lepší nepoužívat, protože nový odstavec udělá to samé, ale s použitím jednoho tagu. Navíc nechceš všechno nahustit do jednoho odstavce. Tak si to alespoň myslím já.

Odpovědět
24.11.2021 10:05
Weby jsou budoucnost IT
Avatar
Loxley
Člen
Avatar
Loxley:2. ledna 17:41

Visual Studio Code vyhovuje.
Děkuji

 
Odpovědět
2. ledna 17:41
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 97. Zobrazit vše