Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 3 - Základní HTML tagy

V minulé lekci, Struktura HTML stránky, jsme si ukázali, jak vypadá struktura HTML stránky a vytvořili jsme si první stránku s krátkým textem.

Dnes si v HTML tutoriálu uvedeme základní HTML tagy a vytvoříme svou první informačně hodnotnou stránku.

Odstavce <p>

Minule jsme pro zjednodušení text vložili jen tak do <body>. V HTML by měl být souvislý text ale ideálně rozdělen do odstavců, které označujeme tagem <p> (jako anglicky paragraph). Tag <p> je párový a obaluje text, který má uvnitř odstavce být. Před text tedy píšeme tag <p>, za textem odstavec uzavřeme tagem </p>. Ve výchozím stylování se před a za odstavcem pak vykreslí mezery a všechny řádky odstavce se vypíší na jeden řádek.

V naší stránce smažeme text v <body> a místo něj vložíme několik odstavců:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
    </head>
    <body>
        <p>Toto je první odstavec</p>
        <p>Toto je první věta druhého odstavce.
           Toto je druhá věta druhého odstavce</p>
    </body>
</html>

Stránku uložíme a obnovíme okno prohlížeče. Výsledek vypadá takto:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Všimněte si, že odřádkování v HTML kódu nezpůsobí odřádkování výsledného textu, viz dále.

Odsazování

Protože v <body> jsou nyní vnořené další tagy, rozepsali jsme jej na několik řádek a jeho obsah odsadili zleva o další úroveň. Je tak krásně vidět, jaký tag je v kterém vnořený.

Kód samozřejmě můžeme psát i úplně hloupě, např. většinu do jednoho řádku:

<!DOCTYPE html>

<html lang="cs-cz"><head>
<meta charset="utf-8" />
<title>Moje první webová stránka</title>
    </head>
    <body><p>Toto je první odstavec</p><p>Toto je první věta druhého odstavce. Toto je druhá věta druhého odstavce</p></body>
</html>

Určitě ale vidíte, že není vůbec jasné, kam vkládat další značky a budeme je také zapomínat uzavírat nebo je uzavřeme na špatném místě. Proto píšeme elementy na samostatné řádky a každý vnořený element odsadíme zleva.

Odřádkování v HTML

Jak je vidět, 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.

Tag <br>

Pokud bychom z nějakého důvodu chtěli v odstavci odřádkovat, využijeme nepárový tag <br /> (jako line break - konec/zalomení řádku). Vypadalo by to nějak takto:

<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
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Častou chybou je používání dvou <br /><br /> za sebou k oddělování odstavců namísto tagu <p>, to je špatně.

Zvýraznění textu v HTML - Frázové tagy a nadpisy

Když je nějaká část textu důležitá, sdělíme to uživateli, prohlížeči a vyhledávačům pomocí zvýrazňovacích tagů. Uživateli se bude text lépe číst, vyhledávače se zas budou na důležité části textu více soustředit a naše stránky tak navštíví více lidí. Jedná se hlavně o tzv. frázové tagy a nadpisy. Frázové proto, že nám umožňují v textu zvýraznit nějakou frázi (část). Na optimalizaci webů pro vyhledávače nejen pomocí zvýrazňování se potom soustředí tzv. SEO, o kterém si také budeme průběžně něco zmiňovat.

Kurzíva <em> a tučný text <strong>

Text v tagu <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 a na tato klíčová slova na naše stránky pak přivedou více návštěvníků. Samozřejmě ale nemůžeme udělat celý text na stránce v <em>, to by nemělo žádný efekt :)

Podobně text v tagu <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 zvýraznění textu tagy <b> (bold) a <i> (italic). Ovšem ty text pouze vykreslí jiným stylem a jeho význam pro prohlížeče se vůbec nezmění. Proto se již pro zvýraznění nepoužívají.

Zvýraznění si můžeme vyzkoušet, zdůrazníme na stránce teď důležitou skutečnost. Kód píšeme stále mezi <body> a </body>:

...

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

...

Výsledek:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Frázové tagy pro zvýraznění jsou řádkové. Nezačínají na stránce tedy nový blok, ale pokračují v existujícím řádku. Proto je ani v kódu nedáváme na nový řádek. Na samostatné řádky vkládáme pouze blokové elementy, např. zde odstavce <p>.

Tagy samozřejmě můžeme kombinovat, např. text udělat tučný i kurzívou:

<p><strong><em>Tento text bude vykreslen jako kurzíva i jako tučný.</em></strong></p>

Překřížení HTML tagů

Dejte si pozor, aby byly tagy ukončeny ve správném pořadí!

V příkladu výše první ukončíme kurzívu, protože jsme ji otevřeli jako poslední. Např. takto překřížené tagy jsou chybou a některé prohlížeče nemusí zvýraznění správně pochopit:

<p><strong><em>Tagy kolem tohoto textu jsou překřížené a může se špatně vykreslit.</strong></em></p>

Podtržení <u>

K podtržení textu existuje tag <u> (underline). 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. Veškerý další kód vkládáme stále mezi <body> a </body>, pokud nebude uvedeno jinak:

<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
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Přeškrtnutí <s>

Přeškrtnutý text označíme opět párovým tagem <s> (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
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Optické zvýraznění <mark>

Jako poslední si zmiňme 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 webu itnetwork.cz <mark>zvýšila o 300%</mark>.</p>

Výsledek:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.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ů.

Frázových tagů existuje ještě několik, ale pro potřeby našeho prvního webu je nyní nevyužijeme. Zájemce odkáži na manuálový kurz HTML od A do Z. Vy budete ve většině případů používat hlavně tag <strong>, jelikož si tohoto textu poté všímá vyhledávač.

Nadpisy <h1> - <h6>

Nadpisy jsou považovány za nejvýraznější text. Zapisují se párovým tagem <h*> (header), resp. <h1><h6>. HTML poskytuje 6 úrovní nadpisů, kde <h1> je nadpis nejvyšší úrovně a <h6> je nadpis úrovně nejnižší. Kromě velikosti nadpisů zde hraje roli především důležitost pro vyhledávače - dohledatelnost obsahu, který do nadpisů vložíme. Nadpis <h1> je vnímán jako nejvýznamnější, nadpis <h6> pak jako nejméně významný, ale stále lépe dohledatelný, než prostý text.

Nadpis <h1> by měla být ta úplně první věc na stránce a měl 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í již méně často, zejména ke členění textu v článku.

Nadpisy jsou na rozdíl od frázových tagů blokové tagy, podobně, jako odstavce. To znamená, že nadpis zabírá vždy celý řádek.

Ukažme si příklad nadpisu:

<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>

Výsledek:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Projekt - HoBiho portfolio

Začněme pracovat na jednoduchém osobním webu, který budeme během kurzu postupně rozšiřovat a vylepšovat, až ho nakonec nahrajeme na internet. Web s nadpisy a zvýrazněním textu 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
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Tímto máme hotovou první jednoduchou stránku, která má zároveň informační hodnotu a mohla by teoreticky již viset na internetu. Výsledný kód máte opět níže ke stažení i včetně celé HTML struktury.

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 3229x (682 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Struktura HTML stránky
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 Hartinger
Avatar
Uživatelské hodnocení:
2928 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti 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