Co to je HTML
HTML je značkovací jazyk pro tvorbu webových stránek. HTML značky, tzv. tagy, v html dokumentu vyznačují, která část textu je nadpisem, která normálním odstavcem nebo hypertextovým odkazem, vyznačují místo, kam má být umístěn obrázek či video, apod.
V čem je přínos HTML5
- nové HTML tagy (značky) pro vytvoření struktury (rozvržení) stránky
- header, nav, section, article, aside, footer
- jednoduché vložení videa a zvukových nahrávek
- nové formulářové prvky
- nový prvek canvas (plátno)
- kreslení myší
- dynamické vykreslování grafů, 3D obrázků, apod.
- upravování fotografií
- použití vektorové grafiky ve formátu svg
- offline režim webových stránek
- jednoduché zobrazení na celou obrazovku (fullscreen)
- technika Drag&Drop (táhni a pusť)
- mikrodata
Spolu s HTML5 přináší CSS3 nové možnosti vzhledu webových stránek:
- zaoblené rohy
- stíny
- průhlednost, barevné přechody,
- velikost obrázku na pozadí, více obrázků na pozadí
- animace
- transformace - posun, rotace, zvětšení
- vícesloupcový text
- vlastní písmo - fonty uložené na webovém serveru
Všechny moderní prohlížeče podporují HTML5. Problém u starších prohlížečů řeší skript html5shiv
.
Skript html5shiv zajistí, že starší prohlížeč vidí nové, pro něj neznámé tagy (např. header, nav, aside, article, section, footer) jako bloky (div).
Návod pro použití skriptu html5shiv
Soubor html5shiv.js uložte do složky svého webu (např. do podsložky css). Značku pro tento skript vložte do hlavičky každé stránky.
Tento skript zajistí, aby starší verze Internet Exploreru viděly nové tagy HTML5 pro rozvržení webové stránky (header, nav, article, section, aside, footer) jako bloky, které mohou být formátovány pomocí css. Ostatní prohlížeče tyto tagy jako bloky chápou i bez tohoto skriptu. Html5shiv tedy můžeme vložit do podmínky, aby se spustil jen v prohlížeči Internet Explorer verze nižší než 9 (< je symbol pro <).
<!-- if IE < 9
<script src="css/html5shiv.js"></script>
-->
Skript může být do stránky stahován i přímo z adresy webu googlecode.com:
<!-- if IE < 9
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-->
Syntaxe HTML značek
HTML značky (tagy) jsou uzavřeny ve špičatých závorkách < >
Každá značka má přesnou syntaxi. Zapíšeme-li značku chybně (neexistující značku), bude ji prohlížeč ignorovat (nedetekuje chybu). Některé chyby prohlížeče sami opraví. Ne všechny prohlížeče doplní chybějící kód stejně.
Základem spolehlivého webu je tedy dodržování správné syntaxe.
Zda je náš html kód správný (validní) si můžeme ověřit na stránkách validator.w3.org
Párové a nepárové tagy
- Párové tagy - určují začátek a konec nadpisu, odkazu, odstavce apod.
<h1>Sedm divů světa</h1> <a href="https://cs.wikipedia.org">Encyklopedie Wikipedia</a> <p> Starověké civilizace vybudovaly celou řadu nádherných staveb, ale jen sedm z nich ohromilo antické spisovatele natolik, že je prohlásili za zázrak. </p> - Tagy se mohou vnořovat do jiných tagů, např. obrázek do odkazu, odkaz do odstavce. Při vnořování se párové tagy nesmí křížit, tzn., že začátek i konec vnořeného tagu musí být uvnitř vnějšího tagu.
Odkaz uvnitř položky seznamu s odrážkami
správně: <p>Čerpáno z <a href="https://cs.wikipedia.org">Wikipedie</a></p>
špatně: <p>Čerpáno z <a href="https://cs.wikipedia.org">Wikipedie</p></a> - Nepárové tagy - určují např. obrázek:
<img src="obrazky/mapa.gif" width="450" height="320" alt="Mapa divů">
nebo zalomení řádku:
<br>Nepárové tagy nemají ukončovací značku, neuzavírají žádný text.
Přehled základních tagů
h1 hlavní nadpis
h2, ..., h6 podnadpisy
p odstavec
strong tučné písmo (zdůrazněná část textu)
b tučné písmo
em kurzíva (zvýrazněná část textu, fráze)
i kurzíva
br zalomení řádku
a odkaz
img obrázek
ol číslovaný seznam
li položka seznamu
ul seznam s odrážkami
table tabulka
tr řádek tabulky
td buňka tabulky
th buňka záhlaví tabulky
div blok
Nové tagy HTML5
Rozvržení webové stránky
header záhlaví webové stránky, záhlaví článku
nav navigační menu
main obsah stránky, blok mezi záhlavím a zápatím
article článek
section část webové stránky obsahující články určitého zaměření, nebo části článku
asside postranní panel obsahojící informace okrajově související s hlavní částí
footer zápatí webové stránky, zápatí článku
HTML5 pro multimediální obsah
picture obrázek
video video
audio zvuk
canvas kreslící plátno
Struktura html stránky
Na začátku stránky je uvedena verze jazyka (typ dokumentu). Vlastní html dokument (značka html) je rozdělen na dvě části. Hlavička (head) obsahuje informace pro internetový prohlížeč, tělo (body) tvoří vlastní obsah webové stránky.
Typ dokumentu - doctype
Od verze HTML5 se již neuvádí číslo verze, zápis typu dokumentu se zjednodušil na prostý zápis:
<!DOCTYPE HTML>
Hlavička dokumentu - head
V této části jsou důležité informace pro prohlížeč
- kódování češtiny - pro správné zobrazení písmen je potřeba uvést znakovou sadu, ve které jsme dokument vytvořili.
<meta charset="UTF-8"> - titulek - zobrazuje se v titulkovém pruhu internetového prohlížeče
- <title>Sedm divů</title>
- připojení stylů - ve všech html dokumentech vytvoříme propojení na společný soubor css
<link rel="stylesheet" href="styly.css">
Další informace pro prohlížeč
Do části head můžeme přidat další informace pro prohlížeč, jako např. klíčová slova pro vyhledávače, popis obsahu stránek či jméno autora:
- <meta name="keywords" c>
- <meta name="description" c>
- <meta name="author" c>
<meta name="copyright" c>
Tělo dokumentu - body
Tělo dokumentu se rozděluje na jednotlivé bloky pomocí značek určených pro záhlaví a zápatí, navigační menu, vlastní článek a jeho sekce. Do těchto bloků jsou vloženy značky pro odkazy, nadpisy, odstavce, obrázky, atd.