Geek tričko zdarma Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 2 - Základní HTML tagy

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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. To 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 />. Vypadlo 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ájmence odkáži na český HTML 5 manuál. Vy budete ve většině případů používat hlavně 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, to bude o obrázcích a odkazech.


 

Stáhnout

Staženo 1233x (682 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
115 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 College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Úvod do HTML a váš první web
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Obrázky a odkazy v HTML
Aktivity (5)

 

 

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

Avatar
Michal Šmahel:31. srpna 1:41

Ahoj, nemusíš to psát pod každou lekci. Zkontroluj si kódování. Musíš mít nastavené stejné kódování v editoru/IDE (tím pádem i v HTML souboru), v HTML hlavičce a prohlížeči. Nejčastěji se doporučuje UTF-8. Většinou stačí změnit kódování v editoru a vložit do do HTML hlavičky (head), takto (viz https://www.w3schools.com/…_charset.asp):

<head>
        <meta charset="UTF-8">
        <!-- Další obsah hlavičky -->
</head>

Pokud bys měl problém s nastavením editoru/IDE, můžeš ještě napsat. Jen prosím o uvedení konkrétního editoru/IDE a problému, který máš. Pokud nebudu vědět, jistě se najde nějaký člen ITnetwork, který s daným editorem/IDE má zkušenosti.

Odpovědět 31. srpna 1:41
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Vojta Opravil:12. září 17:42

Díky ,ale ještě mám jeden problém nikdy se mi neobjevý na web stráce ten obrázek ,který tam dám

 
Odpovědět 12. září 17:42
Avatar
Odpovídá na Vojta Opravil
Vojta Opravil:12. září 17:42

další obrázek

 
Odpovědět 12. září 17:42
Avatar
Odpovídá na Vojta Opravil
Vojta Opravil:12. září 17:43

další obrázek

 
Odpovědět 12. září 17:43
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na Vojta Opravil
krepsy3:12. září 17:49

cesta je Obrázky/111/a­vatar.png, tedy ti v src atributu chybí lomítko. Plus doporučuju složku přejmenovat na "obrazky", tedy bez diakritiky, může to způsobovat potíže.

Odpovědět  +3 12. září 17:49
Programátor je stroj k převodu kávy na kód.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
 
Odpovědět 14. září 11:04
Avatar
Odpovídá na krepsy3
Vojta Opravil:14. září 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. září 11:27
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Vojta Opravil
Jaroslav Smrž:14. září 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  +2 14. září 11:44
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Odpovídá na Jaroslav Smrž
Vojta Opravil:14. září 11:50

díky konečně to funguje

 
Odpovědět 14. září 11:50
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Vojta Opravil
Jaroslav Smrž:14. září 15:24

Rád jsem pomohl

Odpovědět 14. září 15:24
I have no idea what it is doing but I´m scared to delete it... xD
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 66. Zobrazit vše