HTML/Lekce 1

Z Wikiknih

Úvodem[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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

Editace textu[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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

Formátování textu[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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

Atribut TITLE[editovat | editovat zdroj]

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

Atribut TARGET[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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

Obrázky[editovat | editovat zdroj]

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[editovat | editovat zdroj]

◄ HTML/Slovo úvodem Lekce 1 HTML/Lekce 2 ►