HTML/Lekce 1
Z Wikiknih
Obsah |
[editovat] Ú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ů.
[editovat] 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.
[editovat] 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.
[editovat] 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>).
[editovat] 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> |
[editovat] 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).
[editovat] Tělo
V tělu stránky (<body>) je samotný obsah stránky. Ten je složen
[editovat] 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 <b>tučný</b>, <u>podtržený</u> a <strike>přeškrtnutý</strike> text, <i>kurzíva</i> 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> |
[editovat] 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ů.
[editovat] 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).
[editovat] Zalomení řádku
Efektu enteru docílíte na stránce použitím nepárového tagu <br />.
[editovat] 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í.
|
<b><i>Toto je správně.</i></b> <b><i>A toto je špatně.</b></i> |
[editovat] 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>
[editovat] Atribut HREF
Atribut href určuje, kam bude odkaz směřovat.
[editovat] Atribut TITLE
Obsahuje text popisku v žluté bublině, který se zobrazí po najetí na odkaz myší.
[editovat] 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.
[editovat] TEXT odkazu
Ten se nalézá přímo mezi tagem <a> a </a>. V našem příkladu to je Google.cz.
[editovat] 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.
[editovat] Dále
| HTML/Lekce 1 | HTML/Lekce 2→ |
