Princip značkovacích jazyků a základní struktura (X)HTML dokumentu

Dreamweaver Obsah lekce:

Značkovací jazyky - historie vzhledem k internetovým technologiím
Značkovací jazyky - standardy
SGML (Standard Generalized Markup Language)
HTML (HyperText Markup Language – "hypertextový značkovací jazyk")
XML (eXtensible Markup Language – "rozšiřitelný značkovací jazyk")
Vývoj (X)HTML
Struktura (X)HTML stránky

Značkovací jazyky - historie vzhledem k internetovým technologiím

Na úvod se podívejme na stručnou historii webových standardů:

Theodor Nelson začal pracovat na realizaci nelineárního spojování dokumentů na počítačích už v 60. letech 20. století. Byl to on, kdo první přišel s pojmem hypertext. Odtud již nebylo daleko ke zkratce HTML, tj. HyperText Markup Language = „hypertextový značkovací jazyk“

Roku 1986 vzniká SGML (Standard Generalized Markup Language), definovaný v normě ISO 8879. Tento obecný značkovací jazyk umožňuje definici vlastních (podřízených) značkovacích jazyků na základě vlastní definice typu dokumentu - DTD. Jazyk HTML je jednou z aplikací SGML, každá verze HTML používá značky tak, jak je popsáno v každé příslušné DTD.

Následuje vývoj HTML, jak jej v publikaci Dynamické HTML popisuje Pavel Mikle, (Unis Publishing 1997).

1989

Tim Berners-Lee přichází s projektem vytvoření distribuovaného hypertextového systému
ve výzkumných laboratořích CERN ve Švýcarsku je zahájen projekt WWW

1991, 1992

zveřejněna neformální specifikace HTML
první veřejně dostupná verze prohlížeče; pouze textový režim

1993

na světě pracuje kolem padesáti serverů
dokončen první grafický prohlížeč dokumentů NCSA Mosaic; pro prostředí X-Window
návrh jazyka HTML verze 2.0

1994

první mezinárodní konference věnovaná systému WWW
autor programu Mosaic zakládá společnost Mosaic Communications Corp.; tato uvede za krátkou dobu prohlížeč pod názvem Netscape
v září založena organizace World Wide Web Consortium (dále jen W3C)
CERN předává vývoj WWW francouzskému institutu INRIA

1995

WWW se rozšiřuje
oficiální specifikace HTML 2.0 (INRIA)
Netscape uvádí neoficiální rozšíření HTML, známé jako HTML 3.0

1996

oficiální specifikace HTML 3.2 (W3C); v porovnání s HTML 3.0 je chudší
Microsoft vypouští svůj první prohlížeč zdarma, Internet Explorer 3.0; první podpora CSS
specifikace CSS level 1

1997

specifikace HTML 4.0 (W3C); přidány rámy a plovoucí rámy, vylepšeny formuláře a tabulky, větší podpora skriptů, nové řádkové elementy (mimojiné i ABBR, doposud nepodporovaný Internet Explorerem)
Microsoft vydává Internet Explorer 4.0; směr - DHTML

1998

Microsoft vydává Internet Explorer 5.0
první specifikace XML 1.0
specifikace CSS level 2

1999

specifikace HTML 4.01

2000

první specifikace XHTML 1.0
specifikace XML 1.0 (Second edition)

2001

Microsoft vydává Internet Explorer 6
specifikace XHTML 1.1

2002

reformulace XHTML 1.0

2003

pracovní návrh XHTML 2.0
pracovní návrh revize CSS level 2.1
pracovní návrh CSS level 3

Značkovací jazyky - standardy

SGML (Standard Generalized Markup Language)

Je univerzální značkovací metajazyk, který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny. SGML je komplexní jazyk poskytující mnoho značkovacích syntaxí, ale jeho složitost brání většímu rozšíření.

HTML (HyperText Markup Language – "hypertextový značkovací jazyk")

HTML se už ve své první verzi, díky své jednoduchosti, stal velmi populární. Původně byl HTML určen pro zobrazování struktury dokumentu bez vážnějšího důrazu na vizuální a grafickou interpretaci.

Ukázka HTML kódu


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

  <html>

  <!-- toto je komentář -->

  <head>

  <title>Titulek stránky</title>

  </head>


  <!-- tělo dokumentu -->

  <body>

  <h1>Nadpis stránky</h1>

  <p>Toto je tělo dokumentu</p>

  </body>

  </html>

Při vývoji HTML však došlo, na nátlak ze strany tvůrců stránek a prohlížečů, k jistému odklonu tím, že se do nových verzí HTML začali postupně přidávat různé formátovací značky pro vzhled a interaktivitu. Klíčová chyba nastala, když se jako nástroj pro design webu začaly používat tabulky. Tabulka měla a má sloužit pro prezentaci tabulkových dat. Nikoliv pro utváření vzhledu stránky. To způsobilo, že se z jednoduchého značkovacího jazyka stal nástroj na tvorbu prezentací a formátovací značky pak tvořily podstatný díl obsahu webových stránek (specifikace HTML 3.2 z roku 1996). Tím se vytratila struktura a čitelnost, která byla hlavním záměrem původního HTML a internet do jisté míry ovládl chaos.

XML (eXtensible Markup Language – "rozšiřitelný značkovací jazyk")

Je obecný značkovací jazyk, který byl vyvinut a standardizován konsorciem W3C. Umožňuje snadné vytváření konkrétních značkovacích jazyků pro různé účely a široké spektrum různých typů dat.

Jazyk je určen především pro výměnu dat mezi aplikacemi a pro publikování dokumentů. Jazyk umožňuje popsat strukturu dokumentu z hlediska věcného obsahu jednotlivých částí, nezabývá se sám o sobě vzhledem dokumentu nebo jeho částí. Prezentace dokumentu (vzhled) se potom definuje připojeným stylem. Další možností je pomocí různých stylů provést transformaci do jiného typu dokumentu, nebo do jiné struktury XML.

Původní jazyk pro publikování HTML již přestal vyhovovat především pro svou složitost, která vznikla jeho postupným (a svévolným) rozšiřováním. Jazyk XML nemá žádné předdefinované značky (tagy, názvy jednotlivých elementů) a také jeho syntaxe je podstatně přísnější, než HTML.

Ukázka XML kódu - jednoduchý seznam (katalog) CD


            −<CATALOG>

              −<CD>

            <TITLE>Songs of Distant Earth</TITLE>

            <ARTIST>Mike Oldfield</ARTIST>

            <COUNTRY>GB</COUNTRY>

            <COMPANY>Warner</COMPANY>

            <PRICE>499</PRICE>

            <YEAR>1994</YEAR>

            </CD>

            −<CD>

            <TITLE>Seascapes</TITLE>

            <ARTIST>Michael Jones</ARTIST>

            <COUNTRY>USA</COUNTRY>

            <COMPANY>Narada</COMPANY>

            <PRICE>399</PRICE>

            <YEAR>1988</YEAR>

            </CD>

            </CATALOG>

XHTML (eXtensible Hypertext Markup Language – "rozšiřitelný hypertextový značkovací jazyk")

Na přelomu století se ukazuje, že HTML je díky svému odklonu od původní myšlenky příliš rozvolněný formát a potřeba více striktního formátu začíná být nutností. V roce 2000 tak přichází na svět první specifikace XHTML. XHTML je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý W3C. Původně se předpokládalo, že se stane nástupcem jazyka HTML, jehož vývoj byl verzí 4.01 ukončen. V roce 2007 však došlo k založení pracovní skupiny, která má za cíl vytvořit novou verzi HTML, která ponese označení HTML 5.0. XHTML je stále paralelně vyvíjeno a stále se pracuje na verzi 2.0.

CSS (Cascading Style Sheets – "tabulky kaskádových stylů")

Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML.

Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu byl Hakon Wium Lie. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2, dokončuje se revize CSS 2.1 a pracuje se na verzi CSS3. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují jen obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí.

Ukázka CSS kódu - pravidla pro formátování webové stránky


            /* CSS Document */

            *{  	padding:0;  	margin:0;  }    

            body{  	background-image: url(../images/design/background/bodybackground.jpg);  

            /*	background-image: url(../images/design/background/bodybackground_autumn.jpg);*/  

            /*	background-image: url(../images/design/background/bodybackground_winter.jpg);*/  	

            background-repeat: no-repeat;  	

            background-position:center;  	

            background-position:top;  	

            background-color: #133366;	  	

            font-family: Tahoma, Verdana, Arial, serif;  

            /*	font-family:Georgia, "Times New Roman", Times, serif;*/  	

            text-align:center; /*kvuli exploreru nutno centrovat a pak zase davat doleva*/  	

            font-size:62.5%; /*Richard Rutter trick 62.5 % z 16px je 10, pak 100 % = 1em */  }    

            strong {font-weight:bold;}    

			a[href$=".pdf"] 

            {  	background: url(../images/design/other/pdf-icon.gif) no-repeat right top;  	padding-right:1.3em;  }

Vývoj (X)HTML

Jazyk HTML byl navržen v roce 1990 (společně s protokolem http pro jeho přenos v počítačové síti). První verze HTML se označuje HTML 0.9 a nepodporuje žádnou grafiku (pouze text, odkazy apod.).

Připomeňme si co vlastně HTML je. Jedná se o takzvaný značkovací jazyk (Markup language) - viz lekce o značkovacích jazycích. Princip jazyka spočívá tedy v tom, že pomocí něj označujeme text a tím řekneme, co označený text znamená. Jazyk HTML obsahuje například značku <p>, která označuje začátek odstavce (z angl. paragraph = odstavec). Je-li tedy v HTML napsáno například "<p>Toto je odstavec.</p>", pak tento zápis říká, že věta "Toto je odstavec." je odstavec a má se taky tak zobrazit. Jak se zobrazí odstavec? Měl by se zobrazit tak, že začne na dalším řádku za předchozím textem a další text za značkou konce odstavce už bude až pod ním. Odstavec se tedy zobrazí jako tzv. blok textu a začíná na novém řádku a cokoli za ním také.

Dalším příkladem je například značka <h1>, která označuje hlavní nadpis na stránce. Takže napíši-li v HTML kódu "<h1>Toto je nadpis</h1>", pak se označený text "Toto je nadpis" zobrazí v prohlížeči větším písmem na zvláštním řádku a prohlížeč díky značkám ví, že se jedná o text, který je hlavním nadpisem stránky.

Ukázka HTML kódu


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

  <html>

  <!-- toto je komentář -->

  <head>

  <title>Titulek stránky</title>

  </head>


  <!-- tělo dokumentu -->

  <body>

  <h1>Nadpis stránky</h1>

  <p>Toto je tělo dokumentu</p>

  </body>

  </html>

Z uvedených dvou příkladů plyne, že tyto HTML značky jsou důležité pro počítač, aby poznal, co který text významově znamená. Počítač bez těchto značek nemůže pochopit, co autor v textu chápe jako nadpis, co jako odstavec, co jako odkaz atp. Takže pomocí těchto značek je počítač schopen zobrazovat vytvořený textový dokument tak, jak jej autor zamýšlel zobrazit. Autor těmito značkami přiřadil jednotlivým částem textu jejich význam (nikoliv podobu).

Každá verze HTML je množinou (skupinou) značek, kterými se označují jednotlivé části internetové stránky. Tato množina se postupem času vyvíjela a docházelo nejen k rozšiřování počtu značek, ale také k vyřazovaní (zavrhování) některých a jejich úplnému vypuštění nebo nahrazení.

Postupným vývojem vznikla v roce 1994 verze HTML 2.0. V té době přišla firma Netscape prohlížečem Netscape Navigator (NN), který obsahoval mnoho vlastních značek, které nebyly součástí aktuální verze HTML. Tyto značky však umožňovaly tvorbu internetových stránek s novými možnostmi (barva textu,...). Začaly se psát HTML stránky, které korektně fungovaly v tomto prohlížeči, ale jinde nikoli (jednalo se o značky dodané firmou Netscape nikoliv o značky oficiálně popsané a definované v HTML). Tento moment se označuje jako začátek války prohlížečů (browser wars).

Během dvou let se prohlížeč Netscape Navigator rozšířil a byl nejpoužívanějším prohlížečem vůbec. V roce 1996 na toto zareagovala firma Microsoft a vydala svůj prohlížeč Internet Explorer, který měl také definovánu nějakou vlastní rozšířenou množinu HTML značek. WWW se tak dostává do situace, kdy se začíná psát několik verzí jedné internetové stránky pro jednotlivé prohlížeče. Jediným řešením bylo definovat a prosadit HTML jako standard - prohlížeče obsahovaly chyby zobrazování HTML stránek a navíc každý podporoval nějaké nové značky navíc. Jediným řešením této situace bylo donutit výrobce prohlížečů k tomu, aby začali dodržovat definované standardy HTML jazyka, který vyvíjí organizace W3C - vede ji Tim Berners-Lee, autor WWW (odtud se lze dostat do sekce Web Architecture a podsekci All Standards and Drafts například na definici zatím poslední verze standardu HTML 4.01 nebo na novější standard XHTML 1.0).

V současné době se pro tvorbu internetových stránek nejčastěji používá některý z následujících standardů:

XHTML 1.0 Transitional (přechodový) - přechod od HTML 4.01 - poměrně benevolentní, umožňuje použití i některých starších a zavržených HTML značek (podívejte se na rozdíly mezi HTML4 a XHTML).
XHTML 1.0 Strict - "přísnější" verze předchozího (poznamenejme jen, že písmeno "X" před HTML znamená příklon HTML k XML).

Úkol

Pokuste se za stránek konsorcia W3C vyčíst informace o rozdílu mezi HTML4 a XHTML 1.0. Předpokládejme, že jste doposud psali HTML stránky ve standardu HTML4 a chcete přejít na standard XHTML. Co musíte ve stávajícím HTML kódu změnit, aby se z něj stal XHTML kód?

Struktura HTML stránky

Chceme-li napsat internetovou HTML stránku ve standardu XHTML 1.0, pak je třeba se řídit příslušnou specifikací. Pro psaní stránky si vytvoříme obyčejný textový soubor s příponou .html nebo .htm. Do něj začneme psát HTML kód. Pro psaní HMTL stránek lze použít mnoho programů jako je například Adobe Dreamweaver, Microsoft Visual Web Developer vynikající český editor PSPad nebo třeba jen poznámkový blok - nicméně psát HTML stránky v poznámkovém bloku je zbytečně zdlouhavé, neboť tento program skutečně umožňuje vytváření textového souboru, ale neposkytuje nic navíc (další informace naleznete v lekci software pro tvorbu webu).

Na stránkách W3C se můžeme o definici XHTML dokumentu dočíst následující (zjednodušeno):

Kořenový element musí být html (na pojem kořenový element vzpomeňte v souvislostí s lekcí o značkovacích jazycích a jazyku XML).
Kořenový element musí obsahovat xmlns deklaraci jmenného prostoru (nad rámec tohoto kurzu - více například na http://www.linuxzone.cz/index.phtml?idc=280&ids=2).
Deklaraci DOCTYPE.

Ukázka možné xmlns deklarace


			<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Ukázka možných DOCTYPE deklarací


			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"       
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Zjednodušeně řečeno: DOCTYPE a xmlns deklarace prohlížeči říkají jakou verzi (X)HTML jazyka je daná stránka napsána (v přechozí ukázce je to zvýrazněno tučně). Je to tedy naprosto zásadní úvodní informace, podle které prohlížeč ví jak má stránku zobrazovat. Tyto řádky vyjadřují vaše rozhodnutí o tom, jakou verzi (X)HTML v dokumentu dodržujete.

Na následujícím obrázku vidíte nově vytvořený soubor pro HTML stránku v programu Adobe Dreamweaver. Všechen HTML kód, který vidíte v souboru napsán byl automaticky doplněn programem. Vidíte také (nabídka DocType), že program při vytvoření HTML souboru umožňuje volit verzi (X)HTML, kterou si přejete použít a podle toho vytvoří základní strukturu HTML dokumentu. Vzhledem k tomu, že většina programů pro tvorbu HTML stránek vytvoří tyto potřebné informace v hlavičce, tak není nutné si je pamatovat, ale pouze správně použít (zde vidíme, že používání poznámkového bloku situaci zbytečně komplikuje a přidává práci).

ukázka generované hlavičky v programu Adobe Dreamweaver

V obrázku zároveň vidíme základní strukturu HTML stránky:

DOCTYPE.
Element html, který je na konci uzavřen značkou </html>.
Elementem <head> začíná hlavička stránky (v hlavičce stránky jsou uvedeny základní informace o stránce a případně vloženy některé odkazy na stránkou používané soubory).
Meta tag s informací o kódování (charsetu) stránky. Tomuto problému se budeme věnovat v některé z dalších lekcí.
Název stránky ve značce <title>.
Tělo stránky (mezi značkami <body></body>). Do této části se píše v podstatě vše, co uživatel vidí v prohlížeči.

Další čtení

Odkazy

Otázky

Co rozumíte pod pojmem značkovací jazyk?
Co rozumíte pod pojmem SGML?
Co rozumíte pod pojmem HTML?
Co rozumíte pod pojmem XML?
Co rozumíte pod pojmem XHTML?
Co rozumíte pod pojmem CSS?
Co je to HTML standard?
Jak se liší jednotlivé verze (X)HTML?
K čemu slouží DOCTYPE v HTML stránce?
Popište základní strukturu HTML stránky?

webdesign, xhtml, css, php - Mgr. Michal Mikláš