Výuka Informatiky - Maturita - Maturita WEB

12. HTML

Princip
- HTML - Hypertext Markup Language - hypertextový značkovací jazyk
- normalizovaná množina značek (tagů) pro publikování obsahu webových stránek
- HTML tagy - různé typy značek uzavřených do <> pro strukturování a formátování obsahu
- Komunikace prohlížeče se serverem
Normy
- 1990 - vznik jazyka HTML - jen několik základních značek
- 1994 - HTML 2.0 - základní tagy + formuláře
- 1995 - HTML 3.2 - barvy, tabulky a pozadí stránek
- 1997 - HTML 4.01 - oddělení obsahu a vzhledu - div, span, css, typy dokumentů
  - Frameset - pro dokumenty, které používají rámce
  - Transitional - zajišťuje kompatibilitu starších kódů
  - Strict - používá jen strukturální prvky
- 2000 - 2010 - vývoj CSS, problémy se striktní syntaxí XHTML, vývoj prohlížečů
HTML 5
- 2011 - 2012 - současné završení vývoje HTML, CSS a prohlížečů, plná podpora standardu CSS3
- dokumenty - zjednodušení specifikace typu dokumentu <!DOCTYPE html> a kódování <meta charset="UTF-8">
- struktura - nové strukturální tagy pro rozlišení částí dokumentu - header, nav, section, article, footer
- multimédia - nové tagy video, audio, source, canvas (vektorová grafika)
- formuláře - nové typy tagu input - date, time, number, range, url, search ...

Typy tagů
- stylové (formátovací) - tučné <b>, šikmé <i>, styl <style>, písmo <font> ...
- strukturální- odstavce <p>, nadpisy <h1>, seznamy <ul>, tabulky <table> ...
- popisné - <content>, adresa <address>, navigace <menu> ...
- navigační - odkazy na jiné stránky <a href="adresa_odkazu">Text odkazu</a>
- multimediální - vložení obrázků <img src="adresa_obrázku">, animace, zvuky, video ...
- párové x nepárové, bez atributů x s atributy
Syntaxe
- blok obsahu - <div style="text-align: center;" > centrování pravidlem CSS </div>
- odkaz - <a href="http://google.com" target="_blank"> text odkazu </a>
- obrázek - <img src="obrazek.jpg" width="400px">
- tabulka - <table align="center" width="80%"><tr><td>obsah buňky</td></tr></table>

Struktura kódu	Struktura obsahu