Tento návod by měl sloužit k prvnímu seznámení s jazykem HTML, měl by pomoci pochopit jeho filozofii, strukturu a základní prvky. Po osvojení obsahu jednotlivých kapitolol by měl být vážený čtenář schopen tvořit standardní HTML stránky bez použití různých (často obskurních) HTML editorů. Vystačit by si měl s jakýmkoli textovým editorem (mým favoritem je pro tyto účely Notepad) a prohlížečem, ve kterém by kontroloval výslednou podobu svého "díla". Tento text také čtenáři umožní orientovat se ve zdrojovém kódu cizích stránek (včetně této!), jejichž "studium" jeho znalosti ještě prohloubí. Při tvorbě složitějších webů se ale bez kvalitního HTML editoru neobejdete, proto jestli chcete poradit, nejlepším editorem široko daleko je HomeSite od firmy Allaire.
|
1. STRUKTURA HTML KÓDU
Základem jazyka HTML jsou tzv. tagy [čti tæg], jakési "značky", které prohlížeči říkají, co má zobrazit. Např. hypertextový odkaz, základní prvek webové stránky, se v HTML jazyku definuje pomocí párového tagu <A>. Tagů je nesčetně mnoho, jde o určitá slova či zkratky "zabalené" do špičatých závorek, často obsahují určité parametry. Dělí se na párové (např. <A>...</A>) a nepárové (<BR>, <IMG>, ...). Vše, co není ohraničeno špičatými závorkami, je vlastní text HTML dokumentu, který je prohlížečem přímo zobrazen.
HTML stránka má svoji závaznou strukturu, člení se na "hlavičku" (head) a vlastní obsah (body). Celý dokument je navíc ohraničen párovým tagem <HTML>. Více nám ukáže názorný příklad:
<HTML>
<HEAD>
<TITLE>Ukázka stránky</TITLE>
</HEAD>
<BODY bgcolor="#ffffcc" background="clouds.jpg" text="#aa0000" link="red" vlink="red" alink="#ffffaa">
<BR>
<B>Ukázka stránky</B><BR>
<BR>
Tak takhle vypadá zdrojový kód každý WWW stránky. Hlavička HEAD slouží k nadefinování určitých parametrů stránky (např. kódování češtiny, jméno autora, použité styly, atd.) a také obsahuje tag TITLE, ten definuje titulek stránky, který se objeví v hlavní liště okna prohlížeče.<BR>
Vlastní obsah stránky, který se zobrazí v prohlížeči, je v sekci BODY.
</BODY>
</HTML>
Jak je z ukázky vidět, tag <BODY> "obaluje" vlastní text a obsahuje navíc určité parametry, které definují vzhled stránky. Jenom stručně popíšu ty základní:
BGCOLOR................definuje barvu pozadí (implicitně bílá, někdy světle šedá)
BACKGROUND...........definuje obrázek-pozadí stránky (má před BGCOLOR přednost)
TEXT......................definuje barvu písma na stránce (implicitně černá - nemusí se zadávat)
LINK......................definuje barvu textových odkazů (implicitně modrá - "blue")
VLINK.....................definuje barvu navštíveného odkazu (implicitně tmavě modrá - "navy")
ALINK.....................definuje barvu aktivovaného odkazu (implicitně červená - "red")
Ukázková stránka taky obsahuje významný tag <BR>, který zalamuje řádek, jako enter. Samotný enter ve zdrojovém kódu totiž neznamená vůbec nic, musí se tedy definovat "ručně" tagem <BR>. Druhou záludností jazyka HTML jsou mezery - prohlížeč neumí zobrazit více než jednu mezeru vedle sebe, pro tento účel se musí použít tzv. nedělitelná mezera . Tři mezery vedle sebe by se např. museli napsat jako: " ", popř. " ".
Na konci této kapitolky bych ještě zmínil způsob zadávání barev v HTML kódu. Existují dva způsoby - buď zadáme barvy ve formě #RRGGBB, což je kombinace různých stupňů červené, zelené a modré, anebo zadáním anglického názvu barvy (používá se black, white, blue, navy, red, yellow, orange, silver, gray, green, maroon, purple). Sekce BODY pak může obsahovat tyto parametry:
bgcolor="white" link="red" vlink="red" alink="orange"
nebo
bgcolor="#ffeeaa" link="#ff0000" vlink="#cc0000" alink="#800000"
Doporučuji používat pro link a vlink stejnou barvu (viz příklad 1), popř. velmi podobnou (viz př. 2).
|
2. Formátování textu
V této kapitolce postupně popisuji způsoby zadávání vlastností písma nebo celého odstavce (tučné písmo, kurzíva, podtržení, velikost písma, zarovnání řádku nebo odstavce). Nově jsem přidal i pár řádků o kaskádových stylech.
Tučné písmo se definuje párovým tagem <B>, kód Toto je <B>tučné</B> písmo. se tedy zobrazí takto:
Toto je tučné písmo.
Úplně stejně se definuje kurzíva (tagem <I>) a podtržení (tagem <U>). Podtrhávání obyčejného textu (včetně nadpisů) však moc nedoporučuji, je vyhrazeno pro odkazy a může být proto poměrně matoucí. Tagy se ve zdrojovém textu mohou různě kombinovat i křížit, např. takto:
<u>Tento text je <b>formátován</u> pomocí</b> <i>kombinace tagů</i>.
Prohlížeč tento kód zobrazí následovně:
Tento text je formátován pomocí kombinace tagů.
Důležitá je také definice písma, která se uskutečňuje prostřednictvím tagu <font>. Ten má následující možné parametry:
SIZE.........určuje velikost písma v relativním vyjádření (hodnoty jsou -3, -2, -1, +1, +2, +3, +4)
COLOR......určuje barvu písma (pokud není zadán, použije prohlížeč definici barvy písma v tagu <BODY>)
FACE........určuje řez písma neboli font, např. Arial, Courier, apod. (nedoporučují se málo známé fonty)
Definice písma pak v kódu vypadá takto:
<font face="Arial" size="+1" color="#008000"><b>Obsah článku:</b></font>
Fontů použitelných na webu není moc. Implicitním fontem bývá většinou Times New Roman (záleží na vlastním nastavení prohlížeče), ten ale nepůsobí zrovna profesionálně. Zkuste Tahomu, Verdanu, případně tradiční Arial a Courier. Víc písem se obvykle nepoužívá, ne každý návštěvník má na svém počítači nainstalován např. font Handwriting CZ. Rád bych ještě poznamenal, že písmo o velikosti +2 a více nevypadá na stránkách zrovna nejlépe, používejte spíš menší velikosti (-1, -2), a to i pro nadpisy.
Další důležitou oblastí v definování formátu je zarovnání. Používá se (párový) tag <DIV> (popř. tag <P>) s parametrem ALIGN. Ten může nabývat hodnot "left", "right", "center" a "justify" (do bloku). Hodnotě "justify" však rozumí jen Microsoft Internet Explorer 4.0, ostatní prohlížeče jej ignorují nebo zobrazují ne zrovna čistě (viz Netscape 4).
Kód pak vypadá následovně: <DIV align="center">Nadpis kapitoly</DIV>.
Pozn.: <P> slouží k vymezení jednoho odstavce (vkládá před něj vždy volný řádek), šikovnější tag <DIV> umožňuje definovat stejné zarovnání pro celé úseky textu (i celý dokument). Pokud je odstavec ohraničen tagy <p> nebo <div>, nemusí se už zalomit tagem <br>. Mimochodem já osobně zarovná-vám text výhradně pomocí <div>, tag <p> vůbec nepoužívám.
K centrování se také používá párový tag <CENTER> (spíš než pro text pro zarovnání vložených objektů - obrázků, tabulek, apod.)
Posledním tagem, který bych zde zmínil, je <BLOCKQUOTE>. Slouží k odsazení celého odstavce o cca 2 cm, a to z obou stran. Zadává se párově a může se použít i vícekrát za sebou. Např. kód <BLOCKQUOTE><BLOCKQUOTE>Bla bla bla bla bla ...</BLOCKQUOTE></BLOCKQUOTE> odsadí textový sloupec na obou stranách o přibližně 40 pixelů.
Pro tento účel se využívá i párový tag <UL> (který dokonce odsadí text jen zleva), přesto jde o poněkud nestandardní řešení, které bych moc nedoporučoval.
Pro detailnější formátování se používají kaskádové styly (viz dodatek).
|
3. Vodorovná linka
Než se pustíme do definování hypertextových odkazů, zmíním ještě jeden poměrně šikovný formátovací prvek, vodorovnou linku. Myslím, že víte, o čem je řeč, popíši proto jen její parametry:
WIDTH.....definuje šířku linky v pixelech (šířka obrazovky=800, popř. 1024 pixelů) nebo procentech šířky obrazovky
SIZE........definuje tloušťku linky, implicitní je 2 pixely (nemusí se zadávat)
COLOR.....definuje barvu linky, většinou se nepoužívá a nechá se implicitní stříbrná
ALIGN......určuje zarovnání (hodnoty jsou left, right, center, implicitní je "left")
Kód pak vypadá takto: <HR width="600" align="center" size="2">, ale často stačí zadat linku bez parametrů (jen <HR>, prohlížeč použije implicitní hodnoty). Následuje pár příkladů:
<hr align="center" width="400">
<hr align="center" width="400" color="black" size="1">
<hr align="center" width="400" size="15">
|
4. Textové odkazy a záložky
Odkazy se v HTML jazyku definují výhradně párovým tagem <A>. Pomocí něj se lze odkazovat jak na jiné www stránky, tak na různé soubory uložené na serveru (jpg, gif, zip, txt, xls soubory). Prohlížeč je buď zobrazí (pokud to umí) nebo nabídne jejich uložení na disk. Odkazovat ale jde i na místa ve stávajícím dokumentu, na tzv. záložky, které musí být předem nadefinovány. Následují ukázky použití tagu <A>:
<A href="http://sorry.vse.cz/~xmatm22">Toto</A> je odkaz na Pivkovu page.
<A href="index2.htm">Toto</A> je odkaz na jiný soubor v jednom adresáři.
<A href="#zalozka1">Toto</A> je odkaz na určité místo na stránce.
<A href="index2.htm#zalozka1">Odkaz</A> na záložku na jiné stránce.
<A href="textiky/matfyzak.htm"><IMG src="tomas_dzik.jpg"></A>
Takto definovaný odkaz se podtrhne a obarví podle definice v tagu <BODY> (odkazem může být i obrázek, jak ukazuje pátý příklad - ten se pak automaticky orámuje, rám má barvu odkazu):
Toto je odkaz na Pivkovu page.
Záložka (viz třetí příklad) se definuje takto: <A name="zalozka1">1. kapitola</A>, definice odkazu na tuto záložku musí pak obsahovat před názvem záložky tzv. hash (#). Standardně se tag <A> používá bez parametrů, přesto jich pár existuje:
HREF.......základní parametr definice odkazu, určuje cíl (další stránku, obrázek, dokument doc, atd.)
TITLE.......popisek odkazu, objeví se vedle kurzoru (jako parametr ALT u obrázku), moc se nepoužívá
TARGET....definuje, kde se odkazovaný cíl zobrazí, jestli ve stejném nebo novém okně - implicitně ve stejném,
hodnota "_blank" způsobí načtení do nového (ještě více variant pak existuje při použití framů)
TIP: Pokud chcete vypnout automatické podtrhávání odkazů, stačí do tagu <A> přidat parametr style="text-decoration:none". Pokud tento parametr umístíte do tagu BODY, vypne se pod-trhávání na celé stránce (bohužel ne všechny prohlížeče tomuto parametru rozumí).
|
5. Využití obrázků na stránce
Vkládání obrázků je poměrně jednoduchá záležitost, použije se tag <IMG>, který má však řadu parametrů, které je třeba podrobněji osvětlit. Vzorová struktura tagu vypadá takto:
<IMG src="" border="" width="" height="" alt="" hspace="" vspace="" align="">
SRC...........adresa a název obrázku (např. "images/fotka1.jpg")
BORDER......šířka okraje v pixelech (většinou 0 nebo 1, implicitní je 0, je-li obrázek odkazem, tak 2)
WIDTH........šířka obrázku v pixelech (nepovinné)
HEIGHT.......výška obrázku v pixelech (nepovinné)
ALT............alternativní popis, zobrazí se vedle kurzoru myši
HSPACE.......volný okraj napravo a nalevo od obrázku (moc se nepoužívá, i když někdy se hodí)
VSPACE.......volný okraj nad a pod obrázkem (moc se nepoužívá)
ALIGN.........zarovnání textu vzhledem k obrázku (left, right, top, middle, bottom)
Často se však používá pouze jediný parametr scr (source), u ostatních použije prohlížeč implicitní hodnoty. Tag <IMG> se používá i pro vložení animovaného gifu či videa (formáty avi, mpg, ...). U videa je však parametr src nahrazen parametrem dynsrc.
Vložený obrázek se chová jako písmeno v textu, dá se za něj vložit mezera, může se zarovnávat pomocí tagů <div> a <center>, apod. U členitějších stránek se však doporučuje zakotvit obrázek (obrázky) pomocí tabulky. |
6. Seznamy a výčty, tabulky
Poměrně šikovným nástrojem HTML jazyka jsou číslované a nečíslované seznamy. Nečíslovaný seznam přiřadí jednotlivým řádkům odrážky (u vnořených seznamů umí použít i víceúrovňové odrážky). Uvozuje se párovým tagem <UL> (unnumbered list), jednotlivé položky se označují nepárovým tagem <LI>. Následuje jednoduchý příklad:
| |
<ul>
<li>Leden
<li>Únor
<ul>
<li>Pondělí
<li>Úterý
</ul>
<li>Březen
</ul>
|
Uvedený kód pak bude vykreslen takto:
|
Mezery a entery ve zdrojovém kódu nehrají žádnou roli, proto si tvůrce může jednotlivé řádky pro větší přehlednost logicky odsadit.
Číslovaný seznam se definuje úplně stejně, jednotlivé položky jsou však ohraničeny párovým tagem <OL> (ordered list).
Tabulky již patří do vyšších pater jazyka HTML (vedle rámů, formulářů, kaskádových stylů a skriptů), přesto se dají poměrně snadno definovat přímo ve zdrojovém kódu, což si hned ukážeme. Používají se v zásadě 3 párové tagy - <TABLE>, <TR> a <TD>. <TABLE> definuje vlastnosti celé tabulky, <TR> vymezuje řádek tabulky a konečně tag <TD> definuje vlastnosti konkrétní buňky.
Tabulky na webových stránkách neslouží pouze k uspořádání položek do určité pravidelné matice, nýbrž umožňují tzv. vícesloupcovou sazbu, stabilnější umístění obrázků na stránce, odsazení textového bloku, napodobení vzhledu rámů (frames), apod.
Bez dlouhých řečí následuje jednoduchý příklad...
| |
<table border="1">
<tr><td width="50%">PONDĚLÍ</td>
<td width="50%">ÚTERÝ</td></tr>
<tr><td>kozy</td>
<td>slepice</td></tr>
<tr><td>králící</td>
<td>kočky</td></tr>
</table>
|
...který prohlížeč vykreslí takto:
| PONDĚLÍ |
ÚTERÝ |
| kozy |
slepice |
| králíci |
kočky |
|
Opět bych rád zdůraznil, že členění zdrojového textu je zcela na vůli tvůrce a výsledné vykreslení prohlížečem neovlivní. Uvedená tabulka může být zapsána i takto:
<table border="1"><tr><td width="50%">PONDĚLÍ</td><td width="50%">ÚTERÝ </td></tr><tr><td>kozy</td><td>slepice</td></tr><tr><td>králíci</td><td> kočky</td></tr></table>
A teď k jednotlivým prvkům podrobněji. Tag <TABLE> má následující základní parametry:
ALIGN...............zarovnání vůči stránce, funguje jen v MSIE 4.0, proto je lepší použít <div>, popř. <center>
BACKGROUND.....podobně jako v tagu <BODY> určuje obrázek-pozadí tabulky
BGCOLOR..........určuje barvu pozadí tabulky
BORDER............určuje šířku okraje tabulky v pixelech, implicitní (a také nejpoužívanější) je 0
WIDTH..............nastavuje šířku tabulky (pokud nejsou nadefinovány šířky políček v <TD>)
CELLSPACING......určuje mezery mezi políčky v pixelech (implicitně 2)
CELLPADDING......určuje vnitřní okraje v buňce, na všech 4 stranách (implicintě 1)
Rozhodně jednodušší je tag <TR>:
ALIGN...............určuje vodorovné zarovnání textu v buňkách celého řádku
VALIGN.............definuje svislé zarovnání obsahu buněk v celém řádku (hodnoty jsou top, middle a bottom)
BGCOLOR..........určuje barvu pozadí řádku
Nejdůležitějším tagem pro formátování tabulky je pak <TD>:
ALIGN...............vodorovné zarovnání obsahu buňky (left, right, center, justify), implicitně doleva
VALIGN.............svislé zarovnání obsahu buňky (top, middle, bottom), implicitně middle
BACKGROUND.....umožňuje vložit obrázek pod samotný obsah, jako pozadí políčka
BGCOLOR..........definuje barvu pozadí, užívá se poměrně často a s efektními výsledky
WIDTH..............šířka políčka v pixelech nebo procentu šířky tabulky
HEIGHT.............výška políčka v pixelech nebo procentu výšky tabulky
ROWSPAN..........umožňuje sloučit buňky ve více řádcích, spojuje aktuální buňku s řádkem (řádky) pod ní
COLSPAN...........umožňuje sloučit více buněk vedle sebe, hodnota n sloučí n buněk napravo od aktuální
Tag <TD> tedy uzavírá již samotný obsah buněk. Tím může být text (jakkoli bohatě formátovaný), obrázek nebo často další tabulka(!) Buňka ale nikdy nesmí zůstat prázdná, pro vyplnění prázdné buňky se proto používá .
Závěrečnou kapitolku zakončíme poněkud složitější tabulkou, na které si všechny možné parametry procvičíme (všimněte si, že je tato tabulka už vnořená, a sice do tabulky, která ohraničuje celou tuto kapitolku):
| Leden |
Únor |
Březen |
Duben |
Květen |
| Projekce |
Terénní práce |
Hrubá stavba |
Vnitřní práce |
Předávání |
| dohromady 5 mil. Kč |
4 mil. Kč |
10 mil. Kč |
Kód této tabulky je následující:
<center>
<table border="1" width="500" bgcolor="#999999" cellspacing="1">
<tr align="center" valign="middle" bgcolor="#ffdd80">
<td width="20%" height="30"><b>Leden</b></td>
<td width="20%" height="30"><b>Únor</b></td>
<td width="20%" height="30"><b>Březen</b></td>
<td width="20%" height="30"><b>Duben</b></td>
<td width="20%" height="30"><b>Květen</b></td>
</tr>
<tr bgcolor="#fffff9" align="center">
<td><i>Projekce</i></td>
<td><i>Terénní práce</i></td>
<td><i>Hrubá stavba</i></td>
<td><i>Vnitřní práce</i></td>
<td rowspan="2" valign="middle"><i>Předávání</i></td>
</tr>
<tr bgcolor="#fffff9">
<td colspan="2" align="center"> dohromady 5 mil. Kč</td>
<td align="center">4 mil. Kč</td>
<td align="center">10 mil. Kč</td>
</tr>
</table>
</center>
|
No a to je vše. Pokud si to chcete projet ještě jednou, můžete tudy na začátek.
|
|
![[dočasně mimo provoz]](images/Counter3.gif)
Stáhněte si