Jazyk HTML

Co to je W3C

World Wide Web Consortium (W3C) je mezinárodní organizace, která se zabývá vývojem jazyka a vydává standardy syntaxe HTML a CSS, čímž zajišťuje jednotu všech internetových prohlížečů.

Budeme-li dodržovat stanovená pravidla, budou všechny prohlížeče zobrazovat naše stránky požadovaným způsobem.

HTML validátor: validator.w3.org

CSS validátor: jigsaw.w3.org/css-validator

Verze HTML

V současnosti je aktuální verzí jazyka HTML verze 5. Moderní webové prohlížeče podporují nové html značky a u starších prohlížečů je zajištěna základní kompatibilita pomocí skriptu html5shiv.

HTML5

Verze HTML5 obsahuje všechny základní tagy, které jsou ve verzi HTML4.

HTML5 přináší řadu vylepšení a zjednodušení webových stránek.

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

Jak si starší prohlížeče poradí s HTML5 a CSS3

Všechny moderní prohlížeče podporují HTML5. Problém je pouze u zatím ještě stále používaného Internet Exploreru 8 a starších verzí. Problém řeší skript html5shiv (počet uživatelů IE8 však klesá, brzy již nebude nutné tento skript používat).

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).

Nové typy tagů (např. formulářové prvky typu kalendář, číselník, apod.) starší prohlížeče zobrazí jako základní typ (textové pole). Nový tag video obsahuje část, která se zobrazí, pokud prohlížeč prvek video nepodporuje.

Nové vlastnosti CSS, které prohlížeč nezná, budou ignorovány. Ve starším prohlížeči zůstanou např. rohy hranaté, neobjeví se stíny apod. Stránky však budou nadále funkční.

Je vhodné svoje stránky vyzkoušet jak v nejnovějších verzích nejčastěji používaných prohlížečů, tak v jejich starších verzích.

Návod pro použití skriptu html5shiv

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 &lt; 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 &lt; 9

          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

          -->

Starší verze HTML

HTML4

Všechny základní tagy, které jsou ve verzi HTML4, obsahuje i verze HTML5.

Byly odstraněny pouze některé nedůležité tagy, které na tomto webu nejsou a ani nebyly zmiňovány.

Byly odstraněny parametry tagů, týkající se formátování (např. zarovnání, rámečky apod.). Veškeré formátování provádíme pomocí CSS stylů.

XHTML1

Po verzi HTML4 byla vyvinuta verze XHTML1 s přísnou syntaxí ve stylu XML. Vývoj verze XHTML2 byl zastaven a byla vyvinuta verze HTML5.

V čem se liší jazyky HTML a XHTML? V XHTM jsou nepárové tagy ukončeny lomítkem.

Nepárové tagy jsou ty, které určují jeden objekt, např. obrázek.
V XHTML mají nepárové tagy před ukončovací závorkou mezeru a lomítko:
```
<img src="obrazky/pyramidy.jpg" width="350" height="200" alt="Pyramidy" />
```
V HTML nepárové tagy toto lomítko nemají:
```
<img src="obrazky/pyramidy.jpg" width="350" height="200" alt="Pyramidy">
```
Párové tagy jsou ty, které musí určovat začátek a konec té části textu, která má představovat např. nadpis, či fungovat na kliknutí jako odkaz, nebo určují začátek a konec každého odstavce.
```
<h1>Sedm divů světa</h1>
<a href="foto.html">Fotogalerie</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>
```
Párové tagy se zapisují v HTML i v XHTML stejně.

V XHTML musí být tagy a jejich parametry psány malými písmeny, v HTML na velikosti písmen nezáleží, přesto pro případ převodu je lépe i v HTML psát tagy malými písmeny.

V XHTML musí být hodnoty parametrů uzavřeny v uvozovkách, v HTML mohou být číselné hodnoty bez uvozovek. Pro přehlednost doporučujeme používat uvozovky i v tomto případě.

Verze jazyka - typ html dokumentu

Verze jazyka je uvedena na začátku html dokumentu:

HTML - verze 5
```
<!DOCTYPE HTML>
```

HTML - verze 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
	"http://www.w3.org/TR/html4/strict.dtd">

Ve verzi strict nelze používat nedoporučované tagy nebo jejich parametry.

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN"
        	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">