Studijní materiál ke kurzu HTML 		
v.001-2011

HyperText Markup Language

Tento materiál popisuje tvorbu Webu pomocí technologie HTML kódu, tedy základní technologií, která je využívána i všemi navazujícími systémy a procesy tvorby Webu.

Webové stránky jsou tvořeny systémem souborů, uložených na webovém serveru, zapojeného do celosvětové sítě Internet. Programátor tyto sobory vytváří ve svém PC a pomocí přenosové technologie FTP přenese na webový server. K tomu jsou určeny FTP aplikace, které jsou dnes v hojné míře dostupné a většinou zdarma využitelné. 

Webový prohlížeč, např. Internet Explorer, se po zadání webové adresy připojí k požadovanému webovému serveru. Webový prohlížeč stáhne do počítače soubor ve formátu HTML a provede příkazy v něm uvedené. Například stáhne obrázky, přehraje video. Každý server je nastaven tak, že ke stahování poskytne jako první úvodní stránku, nejčastěji je to soubor index.htm nebo index.html. 

HTML soubory lze vytvářet pomocí speciálních editorů nebo lze využít prostý ASCII editor jako je standardní poznámkový blok (notepad.exe), který je součástí instalace MS Windows.	 

HTML soubor obsahuje dva stavební prky – zobrazovaný text a příkazy. Text nese informační hodnotu stránky, příkazy definují formu zobrazení a funkčnost. Příkazy jsou od textu odlišeny tak, že jsou uzavřeny do značek < a >. Příkazy jsou nazývány "tagy".

příklad:
<příkaz>text, který bude zobrazen</příkaz> 

Text, který chceme zobrazit a upravit jeho vlastnosti, je nejprve označen uvozovacíznačkou (příkazem) a na konci bývá ukončen příkazem stejným, doplněným navíc o zpětné lomítko. To platí v případě párových příkazů, které mají svůj začátek a konec působnosti.

Standartní struktura HTML dokumentu vypadá takto:

<html>
   <head>
      <title>Název dokumentu</title>
   </head>
   <body>
    Hlavní tělo dokumentu 
  </body>
</html>

Význam příkazů je následující

<html>  	informace o typu dokumentu - určuje, že soubor je Webovou stránkou
<head>  	hlavička nesoucí globální informace 
<body> 	obsahuje vlastní data webové prezentace

Hlavička HTML může obsahovat důležité informace o chování celé webové stránky. 

příklad:
<meta http-equiv="refresh" content="X; url=SOUBOR">

Tento tag je typu "meta" a určuje, chování stránky "refresh", tedy znovunačtení stránky se jménem SOUBOR za X vteřin.

Samotný tag  <body> může obsahovat další informace, např. barvu textů v těle dokumentu. Barvy jsou definovány klíčovými slovy nebo hexakódy RGB složek.

Bgcolor 	- barva pozadí 
Text 		- brva textu obsahu
Link 		- barva odkazů na stránce
Vlink 		- barva navštívených odkazů
Alink 		- barva aktivních odkazů
background 	- "adresar/podklad.jpg" - obrázek na pozadí dokumentu

příklad:
<body bgcolor=black text="#000000" background="podklad.jpg"> 

Další zde uvedené tagy jsou užitné v těle dokumentu.

zarovnání na střed - tag <center>

<center> 
  text
</center> 

Text nebo objekty uvedené mezi tagy <center> a </center> jsou zobrazeny na stránce tak, aby byly středově souměrné podle svislé osy.

dělicí čára - tag <hr>

<hr width="70%" color=black>

Zobrazí podélnou dělicí čáru s šířkou definovanou parametrem "width" v pixelech nebo % a barvou definovanou parametrem "color".

řádková mezera - tag <br>

text 1<br><br>
text 2

Text 1 a text 2 budou odděleny prázdnou řádkou. V HTML souboru jsou řádkové mezery ignorovány a nahrazeny jednou prostou mezerou mezi znaky. Odřádkování v HTML souboru je vhodné pouze pro formální úpravu a lepší čitelnost zdrojového textu.

pevný mezerník - značka &nbsp;

text 1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text 2

Mezi texty "text 1" a "text 2" bude vloženo 5 mezer. Jinak více mezer za sebou ve zdrojovém HTML je jinak redukováno na jednu jedinou

vložení obrázku - tag <img>

<img src="adresar/obrazek.jpg" align="left" border=0 height=100 width="30%" hspace=10 vspace=5 alt="obrazek"> 

Src 	- URL, adresa umístění souboru s obrazkem
Align 	- zarovnání, umístění obrázku na řádce
Alt 	- alternativní textový popis obrázku pro negrafické prohlížeče - namísto obrázku se vypíše text
Border 	- šířka rámečku okolo obrázku
Height	- výška v pixelech nebo v %
Width 	- šířka
Hspace - horizontální odsazení od ostatních objektů na řádce
Vspace - vertikální odsazení

vložení odkazu - tag <a>

<a href="mailto:info@tyflokabinet-cb.cz">poslat mail</a> 
Tento příkaz zobrazí na Webové stránce text "poslat mail". Při kliknutí na něj se spustí poštovní klient s připraveným e-mailem na adresu uvedenou za parametrem "mailto:", tedy na info@tyflokabinet-cb.cz

<a href=#navesti_1>přechod na začátek</a> 
Tento příkaz zobrazí na Webové stránce text "přechod na začátek" jako odkaz. Při kliknutí na něj se webová stránka v prohlížeči posune tak, že bude zobrazen text dokumentu bezprostředně za návěstím definovaným následujícím způsobem.
<a name=navesti_1> 

<a href="http://www.tyflokabinet-cb.cz">Tyflokabinet ČB, o.p.s.</a> 
Příkaz definující odkaz na webový server s uvedenou adresou za parametrem "href".

Mezi tagem <a .....> a jeho ukončovacím párovým tagem </a> může být kromě textu definován příkaz pro zobrazení obrázku. 

tabulky - tag <table>

<table border=1>
  <tr>
    <td colspan=2>
      nadpis
    </td>
  </tr>
  <tr>
    <td bgcolor=navy>
      Položka 1.1
    </td>
    <td>
      Položka 1.2
    </td>
  </tr>
</table>

Parametr "border" určuje šířku rámečků tabulky. Tagy <tr> jsou oddělovače řádek a tagy <td> oddělovače slouců. Parametr "colspan" definuje počet horizontálně zřetězených buněk v řádku. Prametr "bgcolor" definuje barvu pozadí buňky klíčovým názvem barvy nebo hexakódem.

Obsah tabulky může být text i obrázky a zapisuje se výhradně mezi tagy <td>. 

definice fontů - tag <font>

<font face="Calibri, MS Sans Serif, Arial CE" size=5 color="red">
  text text text text text
</font> 

Parametr "face" definuje název fontu, název náhradního fontu a název dalšího náhradního fontu v případě, že předchozí fonty nejsou v PC k dispozici. Parametr "size" určuje velikost textu a parametr "color" barvu klíčovým názvem barvy nebo hexakódem.

předdefinované styly písma 

<b>text</b>		
- tučný text, tzv. bold

<i>text</i>		
- nakloněný text, tzv. italika

<u>text</u>		
- podtržený text, underline

<h1>text</h1>
- nadpisový styl, za "h" lze použít číslice od 1 do 5 s tím, že 1 definuje největší text

<pre>
  text 1 text 2
  text 3
</pre>

- výsledný text je zobrazen fontem s pevnou šířkou, mezery jsou zobrazovány ve stejném počtu jako v HTML zdrojovém souboru, k přechodu na nový řádek není třeba používat tag <br>