K čemu slouží HTML
HTML (HyperText Markup Language) je programovací jazyk. To je celkem jasné. Ale k čemu se dá využít zrovna tento jazyk? Odpověď je jednoduchá. Slouží k prezentaci dat nezávisle na platformě a je tedy přenositelný mezi jednotlivými operačními systémy jako Microsoft Windows, Unix, Linux, Apple Mac OS a Mac OS X, BeOS, Solaris ... Rozšířil se zejména díky Internetu, kde se stal páteří všech dokumentů. Nikde by jste nenašli žádnou WWW stránku, jež by nebyla napsána v tomto jazyce (zatím). Jde o jazyk poměrně jednoduchý a lehký pro pochopení. Stačí se podívat na jednotlivé syntaxe a soustavným používáním si vše zapamatujete. To můžu potvrdit z vlastní zkušenosti!
Aby jste nám věřili, že tak skutečně je, tak zkuste spustit tuto prezentaci na počítačích s různými operačními systémy. Vytvořili jsme ji právě v HTML a tudíž by jste neměli mít žádné problémy se zobrazením na různých počítačích.
HTML je jazyk značkovací. To znamená, že jeho struktura je dána pevně stanovenými značkami, jež se nemění. Výhodou je, že neobsahuje žádné řetězové podmínky, větvení a podobné programátorské obraty používané ve složitějších jazycích. Značky, v HTML zvané tagy, mohou být párové či nepárové.
- Nepárové: například <IMG> . Jde o značku, jež sama vkládá nějaký prvek nebo definuje. Nemá žádné ukončení. Obvykle zastupuje obrázek, vodorovnou čáru, konec řádku ...
- Párové: například <P></P> . Tento typ tagu nic nevkládá, nýbrž definuje vlastnosti objektu, jež sám uzavírá jako text, obrázek, buňka tabulky, celý dokument, ....
Struktura stránky je vždy uložena v souboru s příponou ".html". Tento soubor obsahuje takzvaný zdrojový kód. Prohlížeč (aplikace zobrazující Internetové stránky) načte takový soubor a podlůe zdrojového kódu sestaví stránku. V takovém kódu se nenachází pouze texty, ale i adresy vkládaných obrázků, zvuků a další doplňků. Vše dohromady pak tvoří celou WWW stránku
Abychom už přestali teoretizovat a začali s praktickou výukou, ukážeme Vám základní syntaxi souboru.
<HTML>
<HEAD>
... hlava dokumentu ...
</HEAD>
<BODY>
... tělo dokumentu ...
</BODY>
</HTML>
Pokud jste si dobře přečetli předchozí řádky, tak jste poznali, že základní struktura je tvořena třemi párovými tagy. Ty uzavírají jednotlivé části dokumentu, resp. <HTML> celý dokument. Do hlavy dokumentu patří obecné informace, jež se až na titulek v prohlížeči nezobrazí. Naopak v těle je umístěno vše, co tvoří samotnou stránku a zobrazí se v okně prohlížeče.
Během ladění této prezenatce jsme narazili na poměrně zasjímavý dotaz. Už nevím, koho to zajímalo, ale dotyčný se ptal, jak uspořádat soubory a jak se mezi nimi následně orientovat. Protože si dobře pamatuji na své začátky, rozhodl jsem se toto téma alespoň trochu osvětlit Vám všem. Třeba budeme mít lehčí začátek.
Základem je vědět, co je to soubor a složka. Složka je něco jako virtuální šuplík, do něhož si ukládáte veškeré věci (v počítači ukládané v souborech). Pokud si tvoříte nějaké stránky, doporučuji si přes nějaký typ manažeru či Průzkumníku vytvořit samostatnout složku, abychom neměli následně nepořádek. Název je libovolný, ale měl by jasně vystihovat obsah - web, stránky, www, či jméno projektu.
V něm by jste si měli vytvořit následně tzv. podadresáře - jde o adresář vložený v adresáři. Proč více podadresářů? To máte jednoduché. Zvlášť dáte zvukové soubory, zvlášť soubory s externími skripty a zvlášť třeba fotografie z galerie. Mít všechny soubory na jednom místě je krajně nepraktické. Proto jsme připravili ukázku:
Tady vidíte, jak by to mohlo vypadat - zobrazili jsme si jednoduchou adresářovou strukturu v Průzkumníku z Windows 98 -. Je zcela jasné, co se bude do kterého adresáře ukládat. Malé náhledy fotografií budou v adresáři "mala_fota" a naopak skripty v adresáři "skripty". Myslím, že složitěji nemá tuto problematiku cenu popisovat. Přesto budu pokračovat. Víte, jak zadávat cestu k jednotlivým souborům? Představte si, že máte uloženu stránku galerie.html v podadresáři "stranky" a chceme do ní vložit obrázek pes.jpg uložený v podadresáři "grafika". V této chvíli musíme vědět, kde se nachází soubor se stránkou - v adresáři stranky -.
../grafika/pes.jpg
Takhle zapíšeme cestu do zdrojového kódu. Jistě se ptáte, co znamená znak ../. Jde o zápis v adrese, kdy počítač v prohlížení pokračuje o adresář víše, tedy přímo v adresáři mujweb. Tam začne teprve hledat složku grafika a následně v ní soubor pes.jpg. Jak jednoduché, že? Zatím to vypadá složitě, ale až začnete vytvářet své první stránky, rychle proniknete i do tohoto problému!
Pár užitečných věcí ...
Nyní Vám ukážeme některé věci, jež se nedají zařadit jinam.
Jak jsme už opatrně naznačili, jedinou věcí vloženou do hlavy dokumentu, která se zobrazí, je tzv. titulek stránky. Jde o popisek zobrazený v horní liště prohlížeče. Uživatelům slouží k jednoduché orientaci zejména v historii, mezi okny a také po uložení stránky (soubor se pojmenuje právě podle titulku). Malá ukázka:
Celý trik se děje pomocí párového tagu <TITLE></TITLE>, jež se nachází kdekoliv v sekci HEAD. Titulek se vloží mezi tyto tagy. Ještě ukázka zápisu:
<HTML>
<HEAD>
<TITLE>Galerie fotografií</TITLE>
</HEAD>
<BODY>
... tělo dokumentu ...
</BODY>
</HTML>
Další poměrně zajímavou věcí, jež může oživit vaše stránky, je zvuk na pozadí. Hned v úvodu si musíme říct, že nemůžeme pracovat se zvukem stejně, jako když si pouštíme CD na HI-FI věži nebo v počítači z MP3. HTML umožńuje přehrát zvuk na pozadí jednou, víckrát nebo nepřetržitě. I to však může stačit. Celé se to děje pomocí následujícího tagu a jeho atributů:
...
<HEAD>
<BGSOUND src="zvuk.wav" loop="infinite/n">
</HEAD>
...
Zvuk se vkládá pomocí nepárového tagu BGSOUND, jež je umístěn v sekci !HEAD! - nejde o překlep! Dále jsou zde dva atributy, bez kterých se nic přehrávat nebude. SRC udává umístění souboru obsahujícího danou nahrávku. LOOP pak počet opakování přehrání tohoto zvuku. Můžeme zadat infinite a pak se nám zvuk bude přehrávat stále dokole a nebo napíše přirozené číslo (celé kladné) a tím přesně udáme počet opakování. To je celá věda.