Hypertext Markup Language nebo HTML je v informatice název značkovacího jazyka používaného pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy. HTML je hlavním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. Dále je možnost obohatit design stránky pomocí kaskádových stylů (zkratka CSS). Hojně se využívá i skriptovací jazyk (např. JavaScript), který dělá stránku pro uživatele více uzpůsobilou.
Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language). Vývoj HTML je ovlivněn vývojem webových prohlížečů, které zpětně ovlivňují definici jazyka. Podrobnosti najdete na Wikipedii.
Nejsnadněji se lze naučit HTML jazyk pomocí metody zkus to a uvidíš, jak to dopadne. Doporučuji stránky W3schools
My se budeme učit HTML tak, že každý má k dispozici svůj vlastní web na adrese https://prijmeni.jr.lixis.cz/. Přístup na svůj web máte pomocí ssh, uživatelské jméno a heslo, které dostanete ode mne, si zapamatujte nebo zapište na bezpečné místo. V prvním ročníku jsme se bavili o správci hesel KeePassXC, teď jej můžete využít. Z operačního systému Windows můžete používat ssh klienta Bitvise nebo WinSCP. Na Linuxu nemusíte nic řešit OpenSSH je na něm nainstalované vždy. Kdo si nechce pamatovat heslo, ale chce používat SSH klíč, tak může. Jak na to jsme si říkali v prvním ročníku.
Pamatujte na to, že cokoli napíšete na svůj web, vidí celý svět, tak se podle toho chovejte.
Důležitou pomůckou, kterou budeme používat je W3V Markup Validation Service zkráceně validátor.
HTML stránky můžete na OS Windows tvořit obyčejným notepadem, ale mnohem lepší je Notepad++.
Jednoduchý dokument
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Titulek</title>
</head>
<body>
<h1>Nadpis</h1>
<p>Toto je odstavec</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="cs"> (1)
<head>
<meta charset="utf-8"> (2)
<title>Titulek stránky</title>
<meta name="author" content="Mgr. Ing Jiří Chráska"> (3)
</head>
<body>
<h1>Nadpis stránky</h1>
<p>Toto je <a href="http://example.com/">odkaz</a> v odstavci.</p>
<!-- toto je komentář -->
</body>
</html>
| 1 | Dokument je v češtině, proto lang="cs" |
| 2 | V dokumentu používáme znakovou sadu UTF-8, můžeme použít prakticky jakékoliv znaky. |
| 3 | Autorem dokumentu jsem já, proto je dobré to do něj napsat. |
Pokud chceme vidět v prohlížeči zdrojový kód HTML stránky, na to funguje klávesa Ctrl+U a nebo pravé tlačítko myši a "Zobrazit zdrojový kód stránky".
Druhy značek
Značky lze z hlediska významu rozdělit na tři základní skupiny:
-
Strukturální značky
rozvrhují strukturu dokumentu, příkladem jsou třeba odstavce (<p>) nebo nadpisy(<h1>,<h2>). Dodávají dokumentu formu. -
Popisné (sémantické) značky
popisují povahu obsahu prvku, příkladem je nadpis (<title>) nebo adresa (<address>). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu. Vyvrcholením této snahy je v současné době jazyk XML. -
Stylistické značky
určují vzhled prvku při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu. Mezi důvody pro neužívání těchto značek patří především to, že tyto značky jsou orientovány na prohlížení na obrazovce počítače, příliš se však nepočítá s používáním dokumentu jiným způsobem – alternativní prohlížeče pro postižené (čtečky pro slepce), v mobilních zařízeních apod. Kaskádové styly umožňují definovat rozdílná zobrazení pro různá zařízení.
Odkazy
Odkazy se dělají pomocí značky <a href="odkaz">Popis odkazu</a>.
Odkaz se skládá z těchto komponent:
-
protokolu např. http: nebo https:
-
serveru např. sspvc.lixis.cz
-
a cesty k dokumentu např. /operacni_systemy/os-2.rocnik/html/html_uvod.html (to je odkaz na tuto stránku).
-
volitelně lze použít na konci odkazu #id_vnitřku, které zabezpečí to, že odkaz funguje dovnitř dokumentu.
Oddělovač mezi protokolem a serverem jsou dvě normální lomítka //.
-
Absolutní odkazy — mají všechny komponenty (protokol, server, cesta)
-
Relativní odkazy — chybí jim protokol a server, předpokládá se, že je stejný, jako u stránky, ze které se odkazuje
-
Odkazy dovnitř dokumentu — umožňují odkazovat dovnitř stránky
Příklady odkazů
<a href="https://cs.wikipedia.org/wiki/Hypertext_Markup_Language">odkaz pomocí protokolu https na server wikipedie a dokument /wiki/Hypertext_Markup_Language</a>Zde to můžete vyzkoušet: odkaz pomocí protokolu https na server wikipedie a dokument /wiki/Hypertext_Markup_Language
<a href="/operacni_systemy/index.html">relativní odkaz na tento server sekci operační systémy</a>Zde to můžete vyzkoušet: relativní odkaz na tento server dokument operační systémy
<a href="/operacni_systemy/index.html#os_2">relativní odkaz na tento server dokument operační systémy sekci 2 ročník</a>Zde to můžete vyzkoušet: relativní odkaz na tento server sekci operační systémy 2. ročník
<a href="https://sspvc.lixis.cz/operacni_systemy/index.html#navody">absolutní odkaz protokolem https na server sspvc.lixis.cz dokument operační systémy sekci návody</a>Zde to můžete vyzkoušet: absolutní odkaz protoklem https na server sspvc.lixis.cz na dokument operační systémy a sekci návody
|
Pokud uděláte ve svém dokumentu odkaz, tak zcela jistě vyzkoušejte, že správně funguje. |
Tohle schválně nefunguje: nefungující odkaz.
Tabulky
1
2
3
4
5
6
7
8
<table>
<tr>
<td>políčko 1 na řádku 1</td><td>políčko 2 na řádku 1</td>
</tr>
<tr>
<td>políčko 2 na řádku 1</td><td>políčko 2 na řádku 2</td>
</tr>
</table>
V tabulkách jsou použitelné následující značky
| Značka | Popis |
|---|---|
|
Definuje tabulku |
|
Definuje hlavičkovou buňku v tabulce |
|
Definuje řádek tabulky |
|
Definuje buňku v tabulce |
|
Definuje titulek tabulky |
|
Určuje skupinu jednoho nebo více sloupců v tabulce pro formátování |
|
Určuje vlastnosti sloupce pro každý sloupec v prvku |
|
Seskupuje obsah záhlaví do tabulky |
|
Seskupuje obsah těla do tabulky |
|
Seskupuje obsah zápatí do tabulky |
Pokuste se odhadnout, jak fungují výše uvedené značky. Použijte klávesy Ctrl+U. Až zjistíte, jak to funguje, tak se pokuste to použít ve své stránce.