Kurz HTML - část I. - základy jazyka - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » Web  

1. prosince 2000, 00.00 | začátek seriálu o HTML. V prvních několika dílech se seznámíme se základní syntaxí, v následujících se pak převážně zaměříme na praktické tipy a triky.

HTML (Hypertext Markup Language) je základním jazykem pro vytváření webových stránek a jeho zvládnutí je nutné i pro používání složitějších skriptovacích jazyků, jako je PHP či ASP. My si ho v tomto seriálu postupně celý probereme.

Oficiální verzi jazyka HTML utváří konsorcium W3C. Slovíčko oficiální jsem zde použil hlavně proto, že dva hlavní výrobci prohlížečů, Netscape, ale hlavně Microsoft, neustále rozšiřují HTML o svoje příkazy a až po tom, kdy "naučí" svůj prohlížeč podporovat je, se snaží, aby je konsorcium W3C uznalo za oficiální standart HTML. HTML je dnes ve verzi 4.0, kterou se zde budeme zabývat, stejně jako několika zatím nepřijatými rozšířeními obou hlavních firem.

HTML je interpretovaným jazykem, což znamená, že zdrojový kód je přímo předložen prohlížeči, není tedy překladán do strojového kódu. To také znamená, že žádné vnější elementy, které jsou přeloženy do strojového kódu (obrázky, animace), se nenachází uvnitř HTML-dokumentu, ale je na ně z něj pouze odkazováno. HTML je zároveň jazyk velmi pružný, pokud totiž prohlížeč narazí na chybu, nebo na příkaz, který nezná, tak ho ignoruje a přesune se na další příkaz.

Nyní se již konečně podíváme na samotnou syntaxi HTML. Každý příkaz HTML se nachází v hranatých závorkách, za ním jsou potom jeho parametry. Takové útvary se nazývají tagy. V HTML máme tagy párové a nepárové, párové se vztahují na určitou oblast (například definice tučného písma), nepárové jsou jíž sami o sobě definovány (například obrázek). Vše osvětlí příklad:

<B>Tento text bude zobrazen tučným písmem,</B> tento už ne.

<IMG SRC="image\obrazek.gif" BORDER=0>

K prvnímu příkladu: Párový tag <B> zapříčiní, že všechen text umístěný uvnitř se v prohlížeči zobrazí tučným písmem, takže to bude vypadat takhle:

Tento text bude zobrazen tučným písmem, tento už ne.

Jistě jste si také všimli, že u uzavíracího tagu je použito zpětné lomítko - </B> - takto se uzavírají všechny párové tagy.
K druhému příkladu: Nepárový tag <IMG> prohlížeči říká, že má zobrazit obrázek, jeho parametry potom jsou SRC a BORDER. SRC říká, kde se nachází daný soubor s obrázkem, v našem případě je to soubor obrazek.gif v adresáři image. K zadání umístění jsme použili relativní cestu, která se počítá od aktuálního souboru HTML. Pokud bychom chtěli zadat absolutní cestu, museli bychom na začátku použít http://, tedy například SRC="http://www.mojestranky.cz/image/obrazek.gif". Také jste si jistě všimli, že cesta k souboru je v uvozovkách - všechna slova, s výjimkou chráněných slov HTML (příkazy a jejich parametry) a čísel, musí být uvnitř tagu umístěna do uvozovek. Druhý parametr BORDER=0 nám potom říká, že rámeček kolem obrázku bude mít tloušťku 0 pixelů, 0 zde nemusí být v uvozovkách, protože je to číslo. HTML také není citlivé na velikost písma, takže pokud napíšete <b>, je to to samé jako <B>. Stejně tak je HTML jedno, kolik uděláte mezer uvnitř tagu, vše opět ukáži na příkladě:

<IMG    SRC="image\obrazek.gif"    BORDER=0   >

Toto je jenom delší zápis předchozího příkladu, mezer si uvnitř tagu můžete udělat kolik chcete. Další příklad:

<IMG SRC="image\obrazek.gif" BORDER=0><B>Tento text bude zobrazen tučným písmem,<B> tento už ne.

<IMG SRC="image\obrazek.gif" BORDER=0>
<B>Tento    text bude     zobrazen tučným   písmem,    <B> tento už ne.

Pokud tento kód vložíte do HTML souboru a zobrazíte ho v prohlížeči, potom získáte v obou případech následující výsledek:

Tento text bude zobrazen tučným písmem, tento už ne.

Z toho vyplývá, že ať uděláte v HTML sebevíc mezer, tak prohlížeč zobrazí jen jednu, to samé platí i o řádkách:

Tady
je
text.

Tady je text.

Jak správně tušíte, oba zápisy vyústí v prohlížeči v ten samý výsledek:

Tady je text.

Pokud potřebujete víc mezer vedle sebe, musíte pro každou použít zápis'&nbsp;', pro okamžitý skok na novou řádku můžete použít <BR>.

A to už je pro dnešek vše. Položili jsme zatím jakési základy, na kterých již můžeme stavět v dalším díle tohoto seriálu.