Základní HTML tagy
Odstavce
Odstavce označuje tagem <p> (z anglického paragraph).
Tag je párový, obaluje text uvnitř odstavce.
Odřádkování
Odřádkováváme tagem <br> (z anglického line break).
Tag je nepárový. Dává se za text, který chceme odsadit.
Zvýraznění textu
Pro kurzíva použijeme párový tag <em> </em>
Pro zvýraznění použijeme párový tag <strong> </strong>
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<title>MěSOŠ</title>
</head>
<body>
<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>
<p>
V této části textu <strong>je tento text zvýrazněný</strong> <br>
a <em>tento text je kurzívou.</em>
</p>
</body>
</html>
Nadpisy
Nadpisy zapisujeme párovým tagem <h*> </h*> (místo hvězdičky čísla 1-6), takže <h1> až <h6>.
Máme k dispozici 6 úrovní nadpisů – <h1> je nejvyšší, <h6> nejnižší.
Zdroj obrázku: https://realbigmarketing.com/tag/heading-tags/
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<title>MěSOŠ</title>
</head>
<body>
<h1>Stránka MěSOŠ</h1>
<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>
<h2>O nás</h2>
<p>
V této části textu <strong>je tento text zvýrazněný</strong> <br>
a <em>tento text je kurzívou.</em>
</p>
</body>
</html>
Seznamy
Seznamy v HTML slouží k uspořádání a strukturování informací. Můžeme je použít například pro výpis položek v menu, seznam úkolů, kroky postupu a podobně.
- Neuspořádané seznamy (tzv. bulleted lists) – používají se tam, kde nezáleží na pořadí položek. Položky jsou označeny tečkami (•).
- Uspořádané seznamy (tzv. ordered lists) – používají se tam, kde je důležité pořadí položek. Položky jsou automaticky očíslované (1., 2., 3.).
Neuspořádané seznamy
Pokud chceme vytvořit seznam, kde nezáleží na pořadí položek, použijeme značku <ul>, což znamená unordered list (neuspořádaný seznam). Každá položka v seznamu se zapisuje do značky <li> (list item, položka seznamu).
<ul>
<li>Jablko</li>
<li>Banán</li>
<li>Pomeranč</li>
</ul>
Uspořádané seznamy
Pokud chceme vytvořit seznam, kde záleží na pořadí, použijeme značku <ol>, což znamená ordered list (uspořádaný seznam). Opět použijeme značku <li> pro jednotlivé položky.
<ol>
<li>Zapni počítač</li>
<li>Otevři webový prohlížeč</li>
<li>Do adresního řádku napiš vyuka.mesos.cz</li>
<li>Stiskni Enter</li>
<li>Uč se :)</li>
</ol>
Vnořené seznamy
Seznamy mohou obsahovat další seznamy – tomu říkáme vnořené seznamy. Seznam může obsahovat další seznamy. To je užitečné například v navigačním menu nebo pro podkategorie.
<ul>
<li>Ovoce
<ul>
<li>Jablko</li>
<li>Banán</li>
<li>Pomeranč</li>
</ul>
</li>
<li>Zelenina
<ul>
<li>Mrkev</li>
<li>Brambory</li>
</ul>
</li>
</ul>
Barva textu a pozadí
Barvy v HTML můžeme nastavovat různými způsoby, ale nejjednodušší je použití atributu style. K tomu slouží dvě hlavní vlastnosti:
color– nastavuje barvu textu.background-color– nastavuje barvu pozadí.
<p style="color: red;">Tento text je červený.</p>
<p style="background-color: yellow;">Tento odstavec má žluté pozadí.</p>
<p style="color: white; background-color: blue">Tento text je bílý a má modrý pozadí.</p>
V HTML a CSS můžeme barvy zapisovat několika způsoby:
Pomocí názvů barev
(například red, blue, green, yellow).
<p style="color: blue;">Tento text je modrý.</p>
Pomocí RGB hodnot
(rgb(255, 0, 0) je červená, rgb(0, 255, 0) je zelená).
<p style="color: rgb(0, 255, 0);">Tento text je zelený.</p>
Pomocí HEX kódu
(#FF0000 je červená, #00FF00 je zelená).
<p style="color: #FF0000;">Tento text je červený.</p>
Zarovnání textu
Text můžeme zarovnávat několika způsoby. Dříve se používal <center>, ale ten už je zastaralý. Dnes se používá CSS vlastnost text-align.
<p style="text-align: center;">Tento text je vycentrovaný.</p>
<p style="text-align: left;">Tento text je zarovnaný doleva.</p>
<p style="text-align: right;">Tento text je zarovnaný doprava.</p>
Obrázky
Obrázky v HTML zobrazujeme pomocí tagu <img>. Tento tag je nepárový, což znamená, že nemá uzavírací část. Aby obrázek správně fungoval, musíme mu nastavit atribut src, který obsahuje cestu k obrázku.
<img src="obrazek.jpg" alt="Popis obrázku">
Můžeme použít i obrázek z internetu pomocí jeho URL:
<img src="https://www.mesos.cz/styles/default/logo.png" alt="Logo MěSOŠ">
Obrázku můžeme nastavit šířku a výšku pomocí atributů width a height:
<img src="obrazek.jpg" alt="Obrázek" width="300" height="200">
Pozor! Pokud zadáme pouze šířku (width), výška se dopočítá automaticky, aby se obrázek nedeformoval.
Můžeme obrázek použít jako klikací odkaz:
<a href="https://www.mesos.cz">
<img src="logo.png" alt="Logo stránky">
</a>
Odkazy
Odkazy v HTML se vytvářejí pomocí tagu <a> (anchor – kotva). Tento tag je párový a mezi jeho začátkem a koncem se vkládá text, na který lze kliknout.
href=“…“ nám definuje adresu odkazu a mezi tagy <a> a </a> je text, na který uživatel klikne.
<a href="https://www.mesos.cz">Klikni zde pro návštěvu stránky školy</a>
Komplexní kód
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MěSOŠ Výuka – Základy HTML</title>
</head>
<body>
<!-- Nadpis stránky -->
<h1 style="text-align: center; color: darkblue;">MěSOŠ Výuka – Základy HTML</h1>
<!-- Krátký úvod -->
<p style="text-align: center;">
Vítej na stránce, která tě naučí základní HTML prvky!<br>
Zde se dozvíš, jak používat text, seznamy, odkazy, obrázky a další.
</p>
<!-- Zvýrazněný a kurzívou psaný text -->
<p>
Tento text obsahuje <strong>zvýrazněnou část</strong> a <em>kurzívou psanou část</em>.
</p>
<!-- Neuspořádaný seznam -->
<h2>Co se dnes naučíme?</h2>
<ul>
<li>Jak psát <strong>nadpisy</strong> a <strong>odstavce</strong></li>
<li>Jak používat <strong>seznamy</strong></li>
<li>Jak přidat <strong>obrázky</strong> do stránky</li>
<li>Jak vytvořit <strong>odkazy</strong></li>
</ul>
<!-- Uspořádaný seznam -->
<h2>Postup tvorby jednoduché HTML stránky</h2>
<ol>
<li>Otevři <strong>poznámkový blok</strong> nebo jiný textový editor</li>
<li>Napiš základní strukturu HTML</li>
<li>Ulož soubor s příponou <strong>.html</strong></li>
<li>Otevři soubor ve <em>webovém prohlížeči</em></li>
</ol>
<!-- Vnořený seznam -->
<h2>Naše škola nabízí tyto obory:</h2>
<ul>
<li>Technické obory
<ul>
<li>Informační technologie</li>
<li>Nábytkářství</li>
</ul>
</li>
<li>Ekonomické obory
<ul>
<li>Obchodní akademie</li>
</ul>
</li>
<li>Zemědělské obory
<ul>
<li>Agropodnikání</li>
</ul>
</li>
</ul>
<!-- Obrázky -->
<h2>Naše škola</h2>
<p>Takto vypadá naše škola:</p>
<img src="skola.jpg" alt="Budova školy" width="400">
<p>Logo školy:</p>
<img src="https://www.mesos.cz/styles/default/logo.png" alt="Logo školy" width="200">
<!-- Odkazy -->
<h2>Užitečné odkazy</h2>
<p>
<a href="https://www.mesos.cz" target="_blank">Oficiální web školy</a><br>
<a href="mailto:pospisill@sosklobouky.cz">Napište mi e-mail</a><br>
<a href="https://www.mesos.cz/soubory/uredni-deska/skolni-rad-2024-2025.pdf" download>Stáhnout školní řád</a>
</p>
<!-- Barvy textu a pozadí -->
<h2 style="background-color: lightblue;">Barva textu a pozadí</h2>
<p style="color: red;">Tento text je červený.</p>
<p style="background-color: yellow;">Tento odstavec má žluté pozadí.</p>
<!-- Zarovnání textu -->
<h2>Zarovnání textu</h2>
<p style="text-align: left;">Tento text je zarovnaný doleva.</p>
<p style="text-align: center;">Tento text je zarovnaný na střed.</p>
<p style="text-align: right;">Tento text je zarovnaný doprava.</p>
</body>
</html>
Výsledek
Seznam všech tagů
Zdroje
Seznam zdrojů
Mgr. Silvie Bečvářová – Stránka s podklady pro studenty MěSOŠ Klobouky u Brna. Online. Dostupné z: http://becvarova.com/mesos/
ITNETWORK S.R.O. Itnetwork. Online. Dostupné z: https://www.itnetwork.cz/
W3 SCHOOLS. HTML tutorial. Online. Dostupné z: https://www.w3schools.com/html
PÍSEK, Slavoj. HTML: začínáme programovat, 4., aktualizované vydání. Grada, 2014. ISBN 978-80-247-8957-6. Dostupné také z: https://www.bookport.cz/kniha/html-2357/.