Úvodem

HTML je jedním ze dvou nejpoužívanějších jazyků (HTML, xHTML) pro vytváření internetových webových stránek, které jsou doplňovány rozšířením v podobě CSS nebo JavaScriptu a serverovskými skripty (PHP, ASP apod.).

Můžete se s ním setkat i v mnohých webových aplikacích založených na HTML - například blogovací systémy. Hodí se znát jeho základy zejména pokud vestavěný WYSIWYG editor nepracuje podle Vašich představ a udělá nějakou formátovací chybu.

Je charakteristický používáním značek (tagů) a v nich přítomných atributů.

Tag

Tag neboli značka je základní součástí jazyka HTML. Z něj je HTML složeno.

<p>text je obalený párovým tagem</p>
<hr /> - horizontální čára

V příkladu vidíte jednoduchý příklad párového tagu <p>, který se používá pro označení odstavce. A nepárového tagu <hr /> pro vložení horizontální čáry.

Tagy jsou tedy párové a nepárové. Párové se skládají ze dvou částí z označení začátku (<p>) a konce (</p>). Na rozdíl od nepárových (<hr />), které se skládají pouze z jedné části. Nepárové tagy v závislosti na verzi mohou být psány <hr>, což je ale starší zápis a vzhledem k vývoji jazyka HTML a jeho nástupci xHTML je doporučeno psát nepárový tag spíše <hr />. Tedy ukončit ho mezerou a lomítkem.

Obsah tagů může být zapsán malými i VELKÝMI písmeny. Význam se při tom nemění. Ale vzhledem k již zmiňovanému vývoji jazyka HTML je doporučeno psát tagy spíše malými písmeny, protože je to modernější a slučitelné s xHTML.

Atributy

K některým tagům se dají navíc přidělit další hodnoty a ty se označuji jako atributy.

<p align="right">Odstavec zarovnaný vpravo</p>

Hodnota atributu může být, ale ani nemusí být v uvozovkách. Opět to závisí na verzi HTML a zase platí, že použití uvozovek je modernější a slučitelné s xHTML.

Poznámka k zápisu

Ať si vyberete zapisování tagů pomocí malých nebo velkých tagů nebo atributů pomocí uvozovek nebo bez, tak používejte na svých stránkách pouze jeden typ zápisu (tudíž nestřídejte jednou <DIV> a <div>).

Základní struktura

Dokument HTML <html> je složen z hlavičky <head> a těla <body>.

<html>
 <head>
  <title>Titulek stránky</title>
 </head>

 <body>
  <p>Text mé první webové stránky</p>
 </body>
</html>

Hlavička

V hlavičce jsou informace o stránce. Pro začátek bude stačit vědět, že je v ní obsažen titulek stránky (<title>).

Později se dozvíme o metatazích a jejich použití (zejména o kódování diakritiky).

Tělo

V tělu stránky (<body>) je samotný obsah stránky. Ten je složen

Editace textu

Všimněte si následujícího příkladu. Postupně si ho vysvětlíme.

<div>
 <p>Odstavec číslo jedna.<br />
  Nový řádek odstavce číslo jedna.</p>
 <p>Odstavec, v kterém je obsažen '''tučný''', <u>podtržený</u> a <strike>přeškrtnutý</strike> text, 
  ''kurzíva'' a <a href="http://www.google.cz">jednoduchý odkaz</a>
 <p>Do textu můžete také vkládat obrázky pomocí tagu IMG</p>
 <img src="wiki.png">
 <p align="center">Odstavec se zarovnáním na střed.</p>
</div>

Oddíl

Tag <div> je párový tag a používá se pro vyznačení oddílů, čehož se poté využívá hlavně ve spojení s CSS.

Může obsahovat více oddílů i odstavců.

Odstavec

Tag <p> slouží pro označení odstavců. Je také párový. Pozor: Na rozdíl od oddílu nemůže obsahahovat žádný oddíl nebo jakýkoliv další odstavec!

Má svůj atribut align, který umožňuje zarovnat odstavec vlevo (left), na střed (center), vpravo (right) nebo do bloku (justify).

Zalomení řádku

Efektu enteru docílíte na stránce použitím nepárového tagu <br />.

Formátování textu

Formátujeme vždy pomocí párových tagů. První z nich označí začátek změněného formátování a druhý jeho konec.

Tučného písma dosáhnete použitím tagu <b>, podtrženého, ~~přeškrtnutého textu~~ pomocí tagů <u> a <strike>, kurzívy pomocí <i>.

Tyto tagy můžeme i kombinovat. Při jejich použití musíme ale dbát na to, abychom je uzavřeli v opačném pořadí, než v jakém jsme je použili. Tedy ten, který jsme požili jako první, uzavíráme až jako poslední.

'''''Toto je správně.'''''
'''''A toto je špatně.'''''

Odkazy

Odkazujeme jednoduše pomocí párového tagu <a href>.

<a href="http://www.google.cz" target="_blank"
title="popisek ve žluté bublině u odkazu">Google.cz</a>

Atribut HREF

Atribut href určuje, kam bude odkaz směřovat.

Atribut TITLE

Obsahuje text popisku v žluté bublině, který se zobrazí po najetí na odkaz myší.

Atribut TARGET

V uvedeném příkladě atribut target určuje, že se odkazovaná stránka otevře v novém okně. Nechcete-li, aby se otevřela v novém okně, tak atribut target i s hodnotou _blank vynechte.

Atribut target najde hlavně využití při práci s rámy.

TEXT odkazu

Ten se nalézá přímo mezi tagem <a> a </a>. V našem příkladu to je Google.cz.

Obrázky

Obrázky se vkládají pomocí nepárového tagu <img>. Adresa obrázku se vloží jako hodnota k atributy src za rovnítko a do uvozovek.

Jako obrázek můžete vkládat grafické soubory typu JPG (typické pro fotky), PNG (typické pro grafiku stránky), GIF (typické pro grafiku stránky nebo animace) nebo BMP (nekomprimované obrázky - nemělo by se používat! - nahradit pomocí PNG ;) ) Další formáty jsou nestandardní a některé prohlížeče by mohly mít problémy s jejich zobrazením - zejména ty pro mobilní zařízení (nejznámějším je Opera Mini).

U obrázků je možno nastavit mnoho parametrů, ale o tom až v dalších lekcích.

Dále

◄ HTML/Slovo úvodem

Lekce 1

HTML/Lekce 2 ►