Zpět na seznam článků     Číst komentáře (1)     Verze pro tisk

HTML pro začátečníky - Úvod

Autor: Tomigun   
13.4.2004

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


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

Líbil se Vám článek?
Budeme potěšeni, pokud vás zaujme také reklamní nabídka

Social Bookmarking

     





Hodnocení/Hlasovalo: 1.81/16

1  2  3  4  5    
(známkování jako ve škole)