S problematikou internetu a webových stránek se setkává mnoho z nás
takřka denně. V tomto seriálu se podíváme na to, jak lze tyto webové prezentace
vytvářet a spravovat. V několika lekcích popíšu základy programování v jazyce
HTML a formátování pomocí kaskádových stylů. Všechny nové konstrukce vždy předvedu
na příkladech. Podrobné informace o specifikaci HTML lze nalézt na adrese
www.w3.org.
Zdrojový kód HTML
Jako každý programovací jazyk, i HTML má svůj zdrojový text, který použije prohlížeč
pro zpracování výsledné stránky. K zapsání tohoto zdrojového kódu můžeme použít
různé programy. Nejzákladnější je asi Poznámkový blok ve Windows, ale
je lepší použít nějaký ze specializovaných HTML editorů.. Ty můžeme v zásadě rozdělit
na dva typy: Programy pro přímou editaci kódu a WYSIWYG (What You See Is What
You Get) editory, ve kterých můžete stránky navrhovat vizuálně, prakticky
bez znalosti HTML. Hlavní nevýhodou WYSIWYG editorů je však větší velikost kódu,
který tyto programy generují. Mezi "klasickými" editory vynikají
1st Page či
ACE HTML (oba jsou Freeware), známé WYSIWYG produkty jsou např. komerční
FrontPage nebo
HomeSite. Já osobně preferuji psaní kódu, neboť
se bez toho stejně v pokročilejším programování neobejdete a navíc bude kód
později přehlednější a kratší. Soubory vytvořené v jazyce HTML musí mít
příponu
.htm nebo
.html.
Základní značky HTML
HTML (Hypertext Markup Language) je značkovací jazyk, to znamená, že používá
značek (tagů), pomocí kterých se stránka strukturuje a formátuje. Všechny značky
HTML se uzavírají do závorek
< a
>. Značky mohou být párové a nepárové. Párové značky
mají vliv na obsah, který je mezi nimi uveden. Použití:
<značka>HTML kód, který je značkou ovlivněn</značka>
Nepárové značky definují nějaký prvek v HTML, např. vložení obrázku.
Vše, co se v HTML dokumentu vyskytuje mimo tyto značky, je text, který
prohlížeč zobrazí. Značky mohou mít i různé parametry, ovšem každá má vlastní,
takže je popíšu u každého tagu zvlášť.
Než začnu popisovat základní stavbu HTML dokumentu, uvedu jednoduchý příklad
zdrojového textu, na kterém předvedu použití značek:
<html>
<head>
<title>Moje první stránka</title>
</head>
<body>
Ahoj lidi, jak se máte?
</body>
</html>
Jak je patrné z příkladu, celý HTML dokument začíná párovou značkou
<html> a je ukončen značkou
</html>. Dále je dokument rozdělen na dvě
části, HEAD a BODY.
Sekce HEAD
V sekci HEAD, ohraničené párovými značkami
<head> a
</head>, se nachází hlavně informace prohlížeči,
které nemají přímo vliv na zobrazení stránky. Jedná se o titulek stránky, který
se zobrazí v horní liště prohlížeče - text uzavřený mezi značky
<title> a
</title> (viz příklad), odkazy na externí soubory,
tzv. metatagy a další značky, či skripty, o kterých se zde nebudu zmiňovat.
Navíc se tady mohou definovat tabulky stylů, které se používají pro formátování
stránky, o kterých bude pojednávat jedna z
příštích lekcí.
Za zmínku stojí značka
<base>, která definuje
kořenový adresář, ke kterému se vztahují odkazy na soubory zadané relativní
cestou bez ohledu na to, kde se nachází aktuálně zobrazovaný dokument. Adresa
se definuje:
<base href="adresa">, tedy např.
<base href="http://www.web.cz/data/index.html">.
Sekce BODY
Sekce BODY je ohraničena značkami
<body> a
</body>.
V těle dokumentu se nachází vlastní obsah webové stránky, kterou má prohlížeč
zobrazit, z toho vyplývá, že značek je zde použito podstatně více než v hlavičce.
Ty hlavní popíšu v příštích lekcích.
Tomigun