Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 50 % zdarma při nákupu e-learningu. 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í.

2. diel - Základné HTML tagy

V minulej lekcii, Úvod do HTML a váš prvý web , sme si ukázali, ako vyzerá štruktúra HTML stránky a vytvorili sme si prvú stránku sa dvoma odsekmi textu. To nám však pochopiteľne nestačí, preto si v tomto HTML tutoriálu uvedieme základné HTML tagy.

Odseky

Bod sme si už spomenuli v minulom diele, pre zopakovanie uvediem, že text nemôže v HTML len tak plávať, ale je rozdelený do odstavcov

. Tag

je párový a obaľuje teda text, ktorý má vo vnútri odseku byť. Pred text píšeme

, za textom odsek uzavrieme </ p>.

ukážka:

<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ýsledok:

Moje první webová stránka
index.html

Všimnite si, že v HTML nehrá vôbec žiadnu úlohu odriadkovanie. Druhý odsek máme napísaný na 2 riadky, ale zobrazí sa ako jeden riadok. Prehliadač totiž prechod na nový riadok na stránke zobrazí len ako medzeru. Ak by sme z nejakého dôvodu chceli v odseku odřádkovat, využijeme nepárový tag
.
Vypadlo by to nejako 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ýsledok:

Moje první webová stránka
index.html

Častou chybou je používanie dvoch

za sebou miesto vytvorenia nového odseku, to je zle.

Zvýraznenie textu

Keď je nejaká časť textu dôležitá, oznámime to prehliadači pomocou zvýrazňovacích tagov. Sú to hlavne párové tagy a .

Kurzíva a tučný text

Text v (Emphasis = zvýraznenie) sa zobrazí ako kurzíva (Italika), ale to nie je všetko. Hovorili sme si, že HTML slúži hlavne na definovanie významu. Text v em sa berie ako dôležitý, internetové vyhľadávače (napr. Google) sa o neho potom zaujímajú viac, než o ostatné text. Podobne text vo je vnímaný ako silne zvýraznený (strong Emphasis), teda ako ešte dôležitejšie. Prehliadač ho zobrazí ako tučné písmo.

V starých materiáloch môžete naraziť na tagy a . Ovšem tie text iba vykreslili iným štýlom a jeho význam sa vôbec nezmenil. Preto sa už pre zvýraznenie nepoužívajú.

Zvýraznenie si môžeme vyskúšať, zdôrazníme dôležitú skutočnosť:

<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ýsledok:

Moje první webová stránka
index.html

Tagy samozrejme môžeme kombinovať, napr. Tento text bude vykreslený ako kurzíva aj ako tučný </ em> </ strong>. Dajte si pozor, aby boli tagy ukončené v správnom poradí.

Podčiarknutie

K podčiarknutie textu existuje tag . Ten sa však príliš nepoužíva, pretože ľudia sú zvyknutí, že podčiarknuté sú odkazy. Napriek tomu si ho pre úplnosť vyskúšajme, aj keď by ste ho na webe nemali používať:

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

výsledok:

Moje první webová stránka
index.html

Prečiarknutie

Preškrtnutý text označíme opäť párovým tagom (ako strike = preškrtnutý). Ide o text, ktorý už nie je aktuálny alebo korektné (napr. Minulá cena tovaru alebo zdôraznenie nesprávneho tvrdenie / postupu).

ukážka:

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

výsledok:

Moje první webová stránka
index.html

Optické zvýraznenie

Ako posledný si spomeňme nový tag , ktorý slúži k optickému zvýraznenie nejakej časti textu. Tento text nie je dôležitý pre vyhľadávače (ako v prípade strong), ale pre užívateľov. Môžeme zvýrazniť v texte dôležitú skutočnosť, prehliadač tento text vykreslí so žltý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ýsledok:

Moje první webová stránka
index.html

Ak vám vyššie uvedené tagy pripomenuli tlačidla v MS Worde, máte pravdu, jedná sa o základnú typografii, ktorá je prítomná vo väčšine textových editorov.

Zvýrazňovacím tagom sa hovorí tagy frázové. Existuje ich ešte niekoľko, ale pre naše potreby sú už zbytočné. Zájmence odkáže na český HTML 5 manuál. Vy budete vo väčšine prípadov používať hlavne strong, pretože si tohto textu potom všíma vyhľadávač.

Nadpisy

Nadpisy sú považované ako najvýraznejší text. Zapisujú sa párovým tagom

(ako header). HTML poskytuje 6 úrovní nadpisov, kde je nadpis najvyššej úrovne a je nadpis úrovne najnižšia. Nadpis by mala byť tá úplne prvá vec na stránke a mala by obsahovať názov stránky. Ako ďalšie by mali nasledovať nadpisy , ktoré rozdeľujú stránku na ďalšie podsekcie. Ďalšie nadpisy sa využívajú len zriedka, najmä ku členenie textu v článku.Začnime pracovať na jednoduchom osobnom webe, ktorý budeme počas seriálu postupne rozširovať a vylepšovať, až ho nakoniec nahráme na internet. Web s nadpismi by mohol vyzerať naprí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ýsledok: Moje první webová stránkaindex.htmlVýsledný kód máte opäť nižšie k stiahnutiu. V budúcej lekcii, Obrázky a odkazy v HTML , to bude o obrázkoch a odkazoch.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 2193x (682 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Úvod do HTML a váš prvý web
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Obrázky a odkazy v HTML
Článok pre vás napísal David Čápka
Avatar
Užívateľské hodnotenie:
10 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity