MS Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

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.


 

Stáhnout

Staženo 1388x (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
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
135 hlasů
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 university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (6)

 

 

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

Avatar
0
Člen
Avatar
0:14.9.2019 11:04

díky

 
Odpovědět
14.9.2019 11:04
Avatar
0
Člen
Avatar
0:14.9.2019 11:27

Tak jsem to opravil ,ale nic se nezměnilo. Stáhnul jsem z odkazu pod lekcí obrázky a odkazy tu web stránku s obrázkem ale ani tam se obrázek neukázal.

 
Odpovědět
14.9.2019 11:27
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na 0
Jaroslav Smrž:14.9.2019 11:44

Zkontroluj cestu k souborům
Vytvoř si adresář "Web" s umístěním třeba D:\Web
V něm budeš mít soubory index.html , style.css a adresář Images ve kterém budeš mít obrázky

Názorný příklad načtení obrázku v index.html

<img src="Images/obrazek1.jpg" />

Pozor na záměnu formátů *.jpeg a *.jpg

Odpovědět
14.9.2019 11:44
/* Life runs on code */
Avatar
0
Člen
Avatar
Odpovídá na Jaroslav Smrž
0:14.9.2019 11:50

díky konečně to funguje

 
Odpovědět
14.9.2019 11:50
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na 0
Jaroslav Smrž:14.9.2019 15:24

Rád jsem pomohl

Odpovědět
14.9.2019 15:24
/* Life runs on code */
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Robertos Rigáň:23. dubna 18:14

Keď som sa s týmto prvý krat stretol na kurze u nás vysvetlovali to dosť zložito na začiatočníkov , ale tu je to krasne všetko rozpísané že to pochopi aj úplný laik keď si to viac krát prečíta :) perfektný serial ďakujem 5x ano postupujete dalej:D

Odpovědět
23. dubna 18:14
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Jarmila Mizerová:1. června 15:46

perfektně se mi podle toho učí,
jen použila
Visual Studio Code,
tam se mi po zadání prvního písmenka nabídnou všechny tagy začínající tím písmenem a když dá TAB tak jsou tam <>
je to pohodlnější

 
Odpovědět
1. června 15:46
Avatar
Michael Last
Člen
Avatar
Michael Last:7. července 16:55

Tak jsem rpošel další lekcí.Akorá se přiznám že jsem nevědel kam se píší ty nadpisy:Tak jsem to stáhl dole podívál se a už jsem to věděl.Určitě i ti co stránky píší mají někde napsané ty příkazy protože toho bude asi moc.Jinak se mi to moc líbí.

Odpovědět
7. července 16:55
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
micmar
Člen
Avatar
micmar:15. července 17:50

Jasné a výstižne, tak by to malo byť aj v škole

 
Odpovědět
15. července 17:50
Avatar
Lukáš Navrátil:30. července 3:50

Děkuji za tutoriál :)

 
Odpovědět
30. července 3:50
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 71. Zobrazit vše