Hypertext Markup Language

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.

Vývoj jazyka

V roce 1989 spolupracovali Tim Berners-Lee a Robert Cailliau na propojeném informačním systému pro CERN, výzkumné centrum fyziky poblíž Ženevy ve Švýcarsku. V té době se pro tvorbu dokumentů obvykle používaly jazyky TeX, PostScript a také SGML. +more Berners-Lee si uvědomoval, že potřebují něco jednoduššího a v roce 1990 byl tedy navržen jazyk HTML a protokol HTTP (Hypertext Transfer Protocol - protokol pro přenos hypertextu). Zároveň také Tim Berners-Lee napsal první webový prohlížeč, který nazval WorldWideWeb.

V roce 1991 CERN zprovoznil svůj web. Současně organizace NCSA (National Center for Supercomputer Applications) vybídla Marca Andreessena a Erica Binu k vytvoření prohlížeče Mosaic; ten vznikl v roce 1993 ve verzích pro počítače IBM PC a Macintosh a měl obrovský úspěch. +more Byl to první prohlížeč s grafickým uživatelským rozhraním.

Následoval rychlý rozvoj webu, takže bylo nutné pro HTML definovat standardy.

Verze jazyka

; Verze 0. 9-1. +more2 : Byly vytvářeny postupně v letech 1991-1993. Na těchto verzích spolupracovali Tim Berners-Lee a Daniel Connolly. Nepodporují grafické rozhraní. : [url=http://tools. ietf. org/id/draft-ietf-iiir-html-00. txt]Původní specifikace (verze 1. 1)[/url] : [url=http://www. w3. org/MarkUp/draft-ietf-iiir-html-01. txt]Původní specifikace (verze 1. 2)[/url] Verze 2. 0 : Byla vydána v listopadu 1995 komunitou IETF a zachycovala stav jazyka k červnu 1994. Je to první verze, která zcela odpovídá syntaxi SGML. Přidává k původní specifikaci interaktivní formuláře a podporu grafiky. : [url=http://tools. ietf. org/html/rfc1866]Původní specifikace (verze 2. 0)[/url] Verze 3. 2 : Byla vydána 14. ledna 1997 komunitou W3C a zachycovala stav jazyka k počátku roku 1996. Tato verze přidává k jazyku tabulky, zarovnávání textu a stylové prvky pro ovlivňování vzhledu. Původně připravovaná verze HTML 3. 0 nebyla nikdy přijata jako standard, protože byla příliš složitá a žádná firma nebyla schopna naprogramovat její podporu. : [url=http://www. w3. org/TR/REC-html32]Původní specifikace (verze 3. 2)[/url] Verze 4. 0 : Byla vydána 18. prosince 1997 komunitou W3C. Do specifikace jazyka přibyly nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Tato verze se snaží dosáhnout původního účelu - prvky by měly vyznačovat význam (sémantiku) jednotlivých částí dokumentu, vzhled je ovlivňován připojovanými styly. Některé prezentační prvky byly zavrženy. : [url=http://www. w3. org/TR/REC-html40-971218/]Původní specifikace (verze 4. 0)[/url] : [url=http://www. w3. org/TR/1998/REC-html40-19980424/]Zrevidovaná specifikace[/url] Verze 4. 01 : Byla vydána 24. prosince 1999 komunitou W3C. Tato verze opravuje některé chyby verze předchozí. Podle původního předpokladu se mělo jednat o poslední verzi, po které by se přešlo na XHTML - následníkovi HTML, využívajícímu univerzální jazyk XML. : [url=http://www. w3. org/TR/html401/]Původní specifikace (verze 4. 01)[/url] Pozastavení vývoje : Některým lidem se však vývoj okolo XHTML nezamlouval. Část z nich včetně některých tvůrců webových prohlížečů, např. Mozilla Foundation, Opera Software či Apple, založila iniciativu WHATWG, jejímž cílem bylo připravit specifikace pro novou verzi HTML tak, aby je bylo možné schválit přímo W3C. 7. března 2007 nakonec W3C založilo novou pracovní skupinu HTML Working Group, jejím cílem bylo v roce 2010 uvolnit specifikaci nové verze HTML. Po hlasování bylo určeno, že nová verze ponese označení „HTML5“ a že bude založena na specifikacích Web Applications 1. 0 a Web Forms 2. 0 z iniciativy WHATWG, které budou dále upravovány. Skupinu pro XHTML 2. 0 a XForms, které byly původně považovány za jediný budoucí směr vývoje, tedy 17. prosince 2010 W3C definitivně rozpustil. Verze 5. 0 : Po patnáctileté odmlce byla vydána nová verze. Ta již ukončuje závislost HTML na SGML opravuje mnoho chyb předešlé verze, vyřazuje mnoho zastaralých a již nepoužívaných prvků a přidává nové sémantické prvky. Zároveň přidává podporu mnohých nových a moderních technologií a zavádí nový systém vývoje jazyka. : [url=http://www. w3. org/TR/html5/]specifikace (verze 5. 0)[/url] Verze 5. 1 : [url=https://www. w3. org/TR/html51/]specifikace (verze 5. 1)[/url] Verze 5. 2 : [url=https://www. w3. org/TR/html52/]specifikace (verze 5. 2)[/url] Verze 5. 3 : [url=https://www. w3. org/TR/html53/]specifikace (verze 5. 3)[/url].

Popis jazyka

Koncepce jazyka

Jazyk HTML je charakterizován množinou značek (tzv. tagů) a jejich vlastností (atributů) definovaných pro danou verzi. +more Tento zápis byl převzat ze SGML a dále upravován v závislosti na aktuálních trendech Internetu. Mezi značky se uzavírají části textu dokumentu a tím se určuje význam (sémantika) obsaženého textu. Názvy jednotlivých značek a jejich vlastností se uzavírají mezi úhlové závorky < a >. Část dokumentu tvořená otevírací značkou, nějakým obsahem a odpovídající ukončovací značkou tvoří prvek (element) dokumentu. Například <strong> je otevírací značka pro zvýraznění textu a <strong>Červená Karkulka</strong> je prvek obsahující zvýrazněný text. Součástí obsahu prvku mohou být další vnořené prvky.

Značky jsou obvykle párové, přičemž koncová značka je shodná se značkou počáteční, jen má před názvem znak lomítko. Příklad pro označení odstavce: Text odstavce Ukázka: Text odstavce

Některé značky jsou nepárové - nemají žádný obsah a nepoužívají koncovou značku. Příklad pro vykreslení vodorovné čáry:

Ukázka: ----

Značky mohou obsahovat vlastnosti, které o nich uvádějí určitou důležitou informaci. Koncové značky již vlastnosti nemají. +more Příkladem může být odkaz (značka <a>), jehož vlastnost href říká, kam se uživatel po kliknutí na něj dostane (v tomto příkladu na stránku .

): text odkazu Ke značkám je však možno přiložit i více vlastností. Můžeme si tak například vytvořit odkaz, který se otevře v novém okně/panelu: text odkazu A nebo odkaz, který se otevře v novém okně/panelu, obsahuje titulek (zobrazí se obvykle po najetí kurzorem na daný prvek) a má přiřazenou třídu, kterou pak můžeme využít například v kaskádových stylech: text odkazu Vzhledem k tomu, že zadávání odkazů tímto způsobem je na Wikipedii zakázané, nebude zde možné zobrazit ukázku.

Některé prohlížeče (např. Opera nebo Mozilla Firefox) dokonce umožňují „vytvářet“ vlastní značky a prvky a umožňují také jejich stylování pomocí kaskádových stylů. +more Tato funkce však u většiny webových prohlížečů není podporována. Jelikož se obsah neznámých prvků v prohlížečích, kde podpora této funkce chybí, zobrazí chybně a bez jakéhokoliv stylu, vlastní prvky se prakticky nepoužívají.

Dokument může mimo značkování obsahovat další prvky: * DTD direktivy - začínají znaky <. , jsou určeny pro zpracovatele dokumentu (prohlížeč). +more * Komentáře - pomocné texty pro programátora, nejsou součástí obsahu dokumentu a nezobrazují se (prohlížeč je ignoruje). Příklad komentáře je uveden níže. * Kód skriptovacích jazyků * Kaskádové styly.

Struktura dokumentu

Dokument v jazyku HTML má předepsanou strukturu: * Deklarace typu dokumentu - značka <. DOCTYPE html> sděluje prohlížeči, že otevřel HTML dokument. +more * Kořenový element - prvek html (značky <html> a </html>) - reprezentuje celý dokument. * Hlavička dokumentu - prvek head (značky <head> a </head>) - obsahuje metadata, která se vztahují k celému dokumentu. Definuje např. kódování, název dokumentu, autora, popis, klíčová slova, titulek dokumentu nebo kaskádové styly. * Tělo dokumentu - prvek body (značky <body> a </body>) - zahrnuje vlastní obsah dokumentu.

Příklad zdrojového kódu

Příklad HTML dokumentu ve verzi 5:

Titulek stránky

Nadpis stránky Toto je odkaz v odstavci.

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. +more 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í.

Programy pro tvorbu HTML

Programy pro snadnou tvorbu webových stránek se nazývají editory. Editorem HTML může být v podstatě jakýkoliv program pracující s textem. +more V praxi se však používají mnohem sofistikovanější programy.

Textové editory

Běžný textový editor HTML zvládá barevnou syntaxi (barevně rozlišuje jednotlivé části kódu jako například HTML značky či vlastnosti a prostý text), dokáže napovídat značky, zná chytré tabulátory nebo zvládá validovat dokument podle předepsané specifikace. Takovými editory jsou například VS Code, Notepad++, Sublime text a Atom.

WYSIWYG editory

WYSIWYG je zkratka od anglického „What you see is what you get“, v překladu „Co vidíš, to dostaneš“. Editory tohoto typu pracují na opačném principu než textové editory - ve WYSIWYG editoru pracujete přímo s již hotovou stránkou a obecně neplatí, že by uživatel tohoto editoru musel znát jazyk HTML. +more Ve WYSIWYG editoru si může uživatel poskládat stránku, jak se mu zlíbí, a program následně vygeneruje požadovaný kód HTML. Takovými editory jsou například Adobe Dreamweaver nebo Microsoft Expression Web (novější verze Microsoft FrontPage).

Programy pro zpracování HTML

Programy, jejichž účelem je prezentovat dokument na zobrazovacím zařízení - nejčastěji na obrazovce počítače, se nazývají webové prohlížeče.

Parsování v prohlížečích

Postup zpracování HTML kódu a jeho vykreslení uživateli se nazývá parsování. Správný postup zpracování je u webových prohlížečů velice důležitý k tomu, aby se stránka uživateli vykreslila správně.

* Dokument je nejprve prohlížečem načítán a rozkládán (tzv. syntaktická analýza) na jednotlivé prvky podle definic DTD (Document Type Definition) určujících značky a vlastnosti, které lze používat. +more * Každému prvku je poté přiřazen styl (způsob zobrazení). Styly mohou být předepsány přímo programátorem ve zdrojovém kódu. Vlastnosti stylů, které nejsou předepsány, doplní prohlížeč podle implicitního stylu, který je předepsán ve specifikaci. Některé prohlížeče umožňují uživateli implicitní styly definovat. * Na dokument je dále aplikován předepsaný kód skriptovacích jazyků. Jsou volány funkce, provedeny příkazy, je spuštěno sledování událostí, jejich volání, popřípadě provádění jejich smyčky. * Takto zpracovaný dokument je na závěr vykreslen uživateli. Moderní prohlížeče však podporují postupné vykreslování, díky čemuž je dokument postupně vykreslován v průběhu parsování. Uživateli se tak HTML stránka postupně rýsuje před očima.

Režimy prohlížečů

Moderní prohlížeče pracují obecně ve dvou základních režimech: * Standardní režim - režim snažící se dodržovat definované standardy; * Quirk mód - režim zaměřený na tzv. zpětnou kompatibilitu, i pokud takové chování není v souladu se standardy. +more Tyto režimy chování zavedl Internet Explorer ve své páté verzi právě z důvodu zpětné kompatibility. Microsoft při vytváření nové verze prohlížeče chtěl, aby se v něm zobrazovaly správně stránky, které již existují, ale také stránky, které jsou psány podle nových standardů. To, jaký režim (a chování) prohlížeč zvolí, závisí především na uvedení direktivy <. DOCTYPE, protože většina starších stránek ji vůbec neobsahuje, popřípadě na použitých prvcích v porovnání se specifikacemi jednotlivých verzí. Později toto chování částečně převzaly další prohlížeče (např. Mozilla Firefox nebo Opera, kde však rozdíly mezi režimy nejsou natolik markantní. Existence nestandardního režimu je výsledkem vývoje, kdy si výrobci jednotlivých prohlížečů přizpůsobovali definici HTML podle svých potřeb a prohlížeče podporovaly nestandardní prvky a syntaxi. Řada těchto „vylepšení“ byla následně přejímána do standardů, některé však byly zase v dalších verzích vyřazeny.

Budoucnost HTML

20. +more září 2012 HTML Working Group uveřejnila svůj záměr o prodloužení vývoje HTML minimálně do roku 2016 v tzv. Plánu 2014. V něm si také stanovila nové cíle týkající se cyklu vydávání nových verzí HTML a milníky, jichž chce dosáhnout. Specifikace HTML5 podle tohoto plánu měla vyjít v posledním čtvrtletí roku 2014 (proto „Plán 2014“), specifikace HTML 5. 1 by pak měla vyjít v roce 2016. Během tohoto cyklu vývoje HTML Working Group: * stanoví, které prvky jsou vhodné ke splnění výstupních kritérií,2014 * vytvoří specifikaci HTML 5. 1, která zahrnuje právě tyto vhodné prvky a která vynechává zbývající nevhodné prvky,2014 * vytvoří návrh HTML 5. 2. Nevhodné prvky z HTML 5. 1 a zamýšlené prvky mohou být v tomto návrhu začleněny. 2015 Odhaduje, že počáteční fáze návrhu HTML 5. 2 by byla počátkem roku 2015.

Fáze vývoje jednotlivých verzí HTML

(podle W3C Process Document) Working Draft (WD nebo FPWD) : Pracovní verze dokumentu publikované ke zrevidování komunitou a veřejností během vypracovávání specifikace. Last Call Working Draft (LC nebo LCWD) : Vydáním tohoto dokumentu pracovní skupina vyjadřuje, že považuje specifikaci za kompletní a všechny chyby za vyřešené. +more Tato specifikace se přesune do fáze Candidate Recommendation, jestliže se nenaleznou závažné chyby. Vyhrazená doba platnosti tohoto dokumentu je poslední šancí k nalezení chyb před přechodem k CR. Candidate Recommendation (CR) : Dokument publikovaný k získání zkušeností pro implementaci, který již byl dostatečně upraven a splňuje technické požadavky pracovní skupiny k implementaci. Proposed Recommendation (PR) : Vyspělá technická zpráva o provedení oprav, komplexního testování a schopnosti implementace odeslaná ke schválení. Recommendation (REC) : Specifikace, standard nebo soubor směrnic, které byly schváleny. Je doporučeno její úplné nasazení a používání. Toto je poslední fáze vývoje, která již nesmí být nijak opravována nebo měněna.

Milníky budoucího vývoje HTML

Plán budoucího vývoje shrnuje následující tabulka:

Poznámky

Reference

Související články

HTTP * XML * XHTML * SGML * Deklarace typu dokumentu * DTD * DOM * HTML entita * HTML5 * W3C * WHATWG * HTML Working Group * Dynamická webová stránka * Mikroformát * CSS * JavaScript * Webový prohlížeč

Externí odkazy

[url=, MIME, URL, DOM, Unicode, XML, SVG, MathML a další) * [url=http://dev. w3. +moreorg/html5/decision-policy/html5-2014-plan. html]url=http://www. w3. org/html/]Oficiální stránky jazyka[/url] * [url=http://www. w3. org/TR/html/]Technická specifikace[/url] * [url=http://www. w3. org/standards/webdesign/htmlcss]Stránky W3C o značkovacích jazycích[/url] * [url=http://www. dsl. sk/article. php. article=19026]Jazyk webov HTML má novú verziu, HTML 5. 1[/url] * [url=http://wiki. whatwg. org/]Wiki o značkovacích jazycích provozovaná WHATWG[/url] * [url=http://whatwg. org/html]HTML Living Standard[/url] - zahrnuje a vyvíjí specifikace všech technologií určených pro používání internetu (HTML, CSS,[/url]Plán HTML Working Group[/url] - týká se nového cyklu a periody vydávání dalších verzí HTML * [url=http://interval. cz/]Interval. cz[/url] - české stránky věnované webdesignu a webdevelopmentu * [url=http://www. jakpsatweb. cz/]Jak Psát Web[/url] - Návod na tvorbu HTML stránek * [url=https://www. helpmark. cz/navody/html-css]HTML a CSS návody[/url].

Kategorie:Standardy ISO/IEC podle jména Kategorie:Standardy W3C Kategorie:Webdesign Kategorie:World Wide Web Kategorie:Značkovací jazyky