značkovací jazyk založený na SGML pro popis struktury
webových stránek
nezávislý na platformě
první formální specifikace
HTML 2.0 -- základní formátování a strukturování
dokumentu, obrázky, formuláře
1995: ambiciózní návrh HTML 3.0 -- matematické vzorce,
tabulky, obtékání obrázků, styly dokumentů; HTML 3.0 nebylo nikdy přijato jako
standard, protože bylo příliš složité a žádná firma nebyla schopna
naprogramovat jeho podporu ve svém prohlížeči
1996: výrobci prohlížečů přidávají nestandardní rozšíření
HTML => konsorcium W3C vybírá
společnou podmnožinu rozšíření a schvaluje
HTML
3.2, které přináší zlepšení zejména v lepších
možnostech formátování dokumentu
1997:
HTML 4.0 -- velký skok vpřed; podpora
kaskádových stylů, skripty vložené do stránky, multimediální objekty,
rozšířené možnosti tabulek, i18n (podpora více jazyků, tok textu zleva
doprava), rozšíření formulářů, rámy
téměř kompletní podporu HTML 4.0 má IE 4.0 a 5.0, NN silně
pokulhává
1999:
XHTML 1.0 -- HTML 4.0 lehce upravené
tak, aby stránky v XHTML byly XML dokumenty
trendy:
modularizace -- rozložení celého standardu HTML 4.0/XHTML
1.0 na několik základních skupin elementů; různé výstupní zařízení podporují
různé skupiny elementů
podpora mobilních a bezdrátových zařízení -- podmnožiny
HTML definované pomocí profilů; WAP/WML -- jednoduchý protokol a značkovací
jazyk pro mobilní zařízení
HTML editory
HTML kód lze samozřejmě zapisovat pomocí obyčejného textového editoru jako
je Notepad ve Windows nebo viapp či joe v Unixu. Pokud HTML stránky
vytváříme často, můžeme si práci usnadnit použitím některého z editorů,
které mají podporu pro psaní HTML kódu. Editory lze obecně rozdělit do
několika skupin.
Textové editory s podporou HTML
Oblíbeným představitelem této skupiny programů jsou editory HomeSite a HTML-Kit.
Ty byly vytvořeny speciálně pro potřeby jazyka HTML. Zvýrazňování syntaxe
nabízejí i klasické editory jako Emacs či vim.
Strukturní editory
Tyto editory na první pohled vypadají podobně jako editory z předchozí
skupiny. Oproti nim však nabízejí důležitou vlastnost navíc – neumožní nám
vytvořit syntakticky nesprávnou stránku. Do místa, které editujeme, můžeme
vložit pouze tagy, které se zde mohou objevit. Nestane se nám tedy, že
stránka obsahuje zkřížené elementy nebo že chybí ukončovací tagy.
Velice pěkným programem, který patří do této kategorie, je program asWedit.
WYSIWYG editory
Tato kategorie zahrnuje editory s jejichž pomocí můžeme vytvářet stránky bez
znalosti HTML. WYSIWYG editor se ovládá podobně jako nějaký textový procesor
(např. Word). Píšeme text, můžeme měnit použité písmo a zarovnání, vkládat
obrázky apod. Výsledek se však ukládá ve formátu HTML.
WYSIWYG editory již během editace zobrazují stránku přibližně tak, jak bude
zobrazena v prohlížeči. Problémem těchto programů je, že zaostávají za
vývojem HTML a tak mnohdy nepodporují jeho novější rysy. S podivem je, že
některé z těchto editorů generují HTML kód, který není správný a navíc je
pro následnou ruční editaci nepřehledně zformátován.
Asi nejznámějším programem této skupiny je FrontPage Editor od Microsoftu.
Použití grafiky a multimédií na webových
stránkách
Grafika a další multimediální prvky zařazené do stránky (audio, video) jsou
sice krásná věc, ale jsou nesmírně náročné na přenosové kapacity sítě. Zatím
co průměrná stránka má sama o sobě velikost několika kilobajtů, je to u
obrázku spíše několik desítek kilobajtů, o zvuku a videu nemluvě.
Při návrhu stránek proto musíme vždy vhodně skloubit požadavek na co
nejmenší velikost přenášených dat a požadovaný estetický výsledek!
V mnoha případech však stále platí, že v jednoduchosti je síla. Mnoho
stránek se ve skutečnosti bez grafiky téměř obejde. Stačí, když se autor
stránky smíří s tím, že nemusí dát na stránku deset obrázků, aby všichni
věděli, že umí na stránky zařazovat obrázky.
Mnohé grafické efekty, které se obvykle realizují pomocí obrázků, lze již
dnes obejít použitím kaskádových stylů.
Zařazování obrázků do stránek Grafické formáty
Abychom mohli obrázek na stránku zařadit, musíme ho mít v nějakém vhodném
grafickém formátu, který je podporován dnešního prohlížeči. Dnešní
prohlížeče bohužel podporují jen bitmapové grafické formáty (GIF, JPEG a PNG),
které jsou mnohdy zbytečně náročné na přenosovou kapacitu. Bohužel dosud
neexistuje široce rozšířený a podporovaný vektorový grafický formát, který
by mnohé vyřešil. V současné době se jako nejperspektivnější formát pro
vektorovou grafiku na Webu jeví SVG (Scalable Vector Graphics).
GIF
I přes některá svá omezení je formát GIF jedním z nejpoužívanějších.
Umožňuje vytvářet obrázky maximálně ve 256 barvách, takže není příliš
vhodný pro zařazování naskenovaných fotografií na stránky. Umožňuje
vytvářet animované obrázky, kdy je v jednom souboru několik obrázků,
které se periodicky střídají a vytvářejí iluzi animace.
Jednu z barev použitou na obrázku můžeme definovat jako transparentní –
bude skrz ní prosvítat pozadí stránky.
Pokud chceme, aby se obrázek nejprve alespoň hrubě vykreslil a postupně
se zobrazil v plné kvalitě, můžeme použít prokládání obrázku (ve většině
grafických editorů je tato možnost ukrytá pod volbou Interlaced nebo
GIF89a Interlaced. Výsledný obrázek je nepatrně větší, ale uživatel v
prohlížeči rychleji získá představu o tom, co je na obrázku.
JPEG
Formát JPEG podporuje pouze barevný režim TrueColor. Používá ztrátovou
komprimaci dat, která dosahuje mnohem lepších výsledků než komprese
použitá v GIFu. Použitá kompresní metoda se díky své ztrátovosti nehodí
na jednoduché obrázky a různá schémata – v obrázku jsou pak často
viditelné různé mapy a "fleky".
Podobně jako mohou být obrázky ve formátu GIF prokládané, můžeme obrázek
do formátu JPEG uložit v tzv. progresivním formátu, který v některých
prohlížečích dříve zobrazí přibližný náhled obrázku.
PNG
Formát PNG je zamýšlen jako náhrada formátu GIF, kvůli patentovým
omezením a zastaralosti formátu GIF. PNG umožňuje vytvářet obrázky v
mnoha barevných hloubkách včetně TrueColor (dokonce i 48bitový TrueColor),
v odstínech šedi apod. Možnosti transparentní barvy GIFu dále rozvíjí
podporou tzv. alfa-kanálu. Pokud jej použijeme, můžeme pro každý bod
obrázku definovat jeho průhlednost.
Narozdíl od GIFu neumožňuje PNG tvorbu animovaných obrázků. Metoda
prokládaných obrázků je v PNG ještě vylepšena.
Formát PNG zatím podporují jen novější verze prohlížečů (NN a IE až od
verzí 4.0).
URL je adresa, která jednoznačně identifikuje nějaký zdroj
v Internetu. URL nejsou omezena jen na službu WWW, ale pokrývají celé spektrum
služeb (WWW, FTP, e-mail, telnet, ...).
Jednotlivé části HTML stránky se
označují pomocí elementů. Každý element se skládá z počátečního tagu, obsahu
elementu a ukončovacího tagu. Malý příklad:
<p>Pokusný odstavec a zároveň element.</p>
Ukázka obsahuje jeden element,
počáteční tag
<p> a
ukončovací tag
</p>.
Některé elementy (například
<br> a <hr>)
nemusí mít ukončovací tag:
Elementy se obvykle používají pro
vyznačení struktury dokumentu. Pokud potřebujeme nějak podrobněji vymezit význam
elementu, použijeme k tomu atribut. Atribut se zapisuje za počáteční tag.
Atribut má vždy nějakou hodnotu,
která se mu přiřazuje. Pokud hodnota obsahuje pouze písmena, číslice, pomlčku a
tečku, nemusí se hodnota atributu uzavírat do uvozovek. V opačném případě musíme
hodnotu atributu uzavřít do uvozovek nebo do apostrofů. U jednoho tagu můžeme
samozřejmě použít více atributů. Atributy se mohou používat pouze u počátečních
tagů, nikoliv u ukončovacích.
Všechny elementy jazyka HTML můžeme rozdělit do několika kategorií podle
jejich významu. My si zopakujeme jen ty nejdůležitější a nejpoužívanější
elementy.
HTML je značkovací jazyk, ve kterém by se pomocí značek měl
vyznačovat význam jednotlivých částí textu. Z vlastní
zkušenosti však víme, že dnes v HTML existuje několik
atributů a elementů, které ovlivňují pouze grafický vzhled.
Použitím těchto atributů a elementů sice můžeme získat graficky
atraktivní stránku, má to však řadu nevýhod.
Text stránky je mnohdy špatně strukturován, protože jednotlivé
elementy jsou využívány účelově k dosažení určitých
grafických efektů. Druhou velkou nevýhodou je velká pracnost –
většina z vizuálních atributů musí být nastavována opakovaně
u všech elementů.
Obě tyto nevýhody odstraňují kaskádové styly –
Cascading Style Sheets (CSS). Styly umožňují
definovat způsob zobrazení (druh a velikost písma, barvu,
zarovnání apod.) každého elementu na stránce. Styl však není přímo
součástí textu stránky a tak může být zápis stránky přehlednější a
dobře strukturovaný. Navíc styly umožňují definovat jednotný
vzhled určitého elementu v celém dokumentu jedním zápisem
– nemusíme jej opakovat u každého elementu. Pokud styl
uložíme do externího souboru, může ho využívat více stránek
najednou. Definice designu všech stránek je pak uložena na jednom
místě. Při požadavku na změnu vzhledu stránek stačí upravit styl a
změny se automaticky promítnou do všech stránek.
Vše vypadá tak báječně, že v tom musí být určitě nějaký háček.
Problém je opět (jak jinak) podpora prohlížečů. Dobrou podporu
kaskádových stylů mají prohlížeče IE4, IE5, Opera, Amaya a beta
verze NN5. Podpora kaskádových stylů v NN4 a IE3 je velmi chabá a
obsahuje spoustu chyb. S přechodem uživatelů na novější verze
prohlížečů se však podmínky pro větší použití kaskádových stylů
budou již jen zlepšovat.
Javascript - Skriptovací jazyk vyvinutý
firmou Netscape, pro generování dynamických HTML stránek.
PHP -
PHP je velice jednoduchý a přitom výkonný skriptovací jazyk,
který umožňuje
generování dynamických HTML
stránek na straně serveru.. Zapisuje se přímo
do HTML kódu a umožňuje velice přirozeným způsobem kombinovat HTML
s příkazy. PHP je možno provozovat s libovolným webovým serverem
(dokonce i ve Windows), ale nejlepších výsledků dosáhneme právě ve spojení se
serverem Apache.
ASP - Active Server Pages.
Technologie pro generování dynamických HTML stránek na straně serveru vyvinutá
firmou Microsoft.