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:
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:
Č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:
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:
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:
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:
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>
až <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:
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:
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 3594x (682 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.