OBSAH:

1. Úvod
2. Vytváření interaktivních stránek
s


1. Definování dokumentu HTML*


2. Struktura a styl*


3. Pravidla syntaxe HTML*


4. Tagy a odkazy*


5. Struktura stránky*


3. Popis jazyka HTML 4.0


1. Nové vlastnosti HTML 4.0*


2. Popis jazyka HTML 4.0*


3. Argumenty použitelné všeobecně*


4. Označení verze HTML*


5. Hlavní značky*


6. Text a jeho strukturování*


7. Formátovací značky*


8. Značky pro odkazy*


9. Obrázky*


10. Seznamy*


11. Formulářové značky*


12. Tabulkové značky*


13. Rámy*


14. Multimediální značky*

4. Programování dynamického HTML


1. Objektový model*


2. Prvek SCRIPT*


3. Skripty jednotlivých prvků*


1. Prvky Body a Frameset*


2. Programování prvku A (Anchor, kotva)*


3. Programování prvku IMG a Map*


4. Programování prvku Object*


5. Programování prvku Table*


6. Skripty prvku Form*


7. Programování prvku Marquee*


4. Praktické ukázky*

5. CSS – kaskádovací styly
Kompletní seznam barev + kódy
Kompletní seznam vlastností CSS

1. Syntaxe parametrů v definici stylu*


2. Vlastnosti a typy použitého písma*


3. Barvy textu a pozadí*


4. Formátování textu*


5. Formátování a vlastnosti rámečku*


6. Umístění elementů*


7. Klasifikace elementů*


8. Dynamické styly*


6. CSS2 – kaskádovací styly – druhá verze


1. Nové funkce*


2. Práce s písmy*


7. WAP (Wireless Application Protocol)


1. Co to je Wap*


2. Požadavky na provozování Wapu*


3. Práce s Wapem*

1. Desky a karty*


2. Fonty*


3. Zarovnání a horizontální pravidla*
4. Odkazy - URL*


4. Dynamické stránky na displeji telefonu*


5. Budoucnost Wapu*

Word Wide Web spustil počítačovou revoluci tím, že umožnil každému publikovat dokumenty HTML. Donedávna byly informace v těchto dokumentech většinou statické a vyžadovali odpovědi serveru na vstupy uživatele. Po uvedení

dynamického HTML se tvorba těchto dokumentů přesunula od vyžadování interakce serveru do oblasti vytváření interaktivních položek sítě WWW a webových aplikacích. Protože dynamické HTML umožňující interakci uživatele s dokumenty HTML a zcela se zaměřily na klienta, můžeme tak vytvářet bohatší webové aplikace, než dříve. Dynamické HTML je postaveno na modelu objektu, který rozšiřuje tradiční statické dokumenty HTML.

Atributy a veškeré příklady pně fungují v Internet Exploreru 4.0 a výše, Netscape Communikator nepodporuje všechny prvky, které jsou uvedeny.

Koncepce vytváření interaktivních stránek není nová – Microsoft i Netscape zpočátku definovali jednoduchý model objektu, který byl uváděn jako způsob vytváření interaktivních stránek. Při bližším zkoumání se ukázalo, že tento model objektu byl účinný pouze pro základní formu vyhodnocení. Před nástupem Microsoft Internet Exploreru 4.0 byly dynamické dokumenty jenom mýty, protože jediným okamžikem, kdy bylo možné stránku změnit byla její vlastní příprava. Interaktivní dokumenty byly simulovány úplným novým zavedením stránky nebo objekty vkládanými do stránky. Mnoho z takových appletů Java, ovládacích prvků ActiveX nebo dokonce i animovaných obrázků GIF bylo navrženo k tomu, aby prováděly jakoby manipulaci textu, což umožňovalo obejít přirozenou statičnost HTML. Využití objektů jako náhražky ovládání stylu a obsahu je však ubohým řešením.

Potom, co vývojáři Internet Exploreru vyzkoušeli mnoho scénářů pro takové objekty a animované soubory GIF, si pro zpracování dokumentů uvědomili potřebu výkonnějšího API (Application Programming Interface – rozhraní aplikačních programů). S modelem objektu nabízejícím úplný přístup k dokumentu mohou autoři využít výhod možností zpracování vzhledu, vestavěných v HTML, a CSS (Cascading Style Sheets – kaskádní nebo postupné styly). Tento model objektu výrazně zvýšil výkon tím, že omezil potřebu zavádění velkých animovaných obrázků nebo appletů. Informace se tak staly trvale přístupné, protože již nebyly skryty v obrázcích nebo objektech.

Dynamické HTML nabízejí API, které je nezbytné pro celkovou kontrolu dokumentu HTML. Není již potřebné stránku při jejím zavádění definovat. Po zavedení může být kterákoliv část stránky dynamicky a okamžitě změněna. Například můžeme vytvořit aplikaci, která má rozšiřující se nebo naopak zmenšující se osnovu. Když uživatel osnovu rozšíří nebo zmenší, bude obsah okamžitě zobrazen nebo skryt. Jsou to možnosti přípravy stránek, které se automaticky mění nebo se sami upravují podle potřeb uživatele. Tohle všechno a mnohem více možností nabízí dynamické HTML.

HTML je aplikací SGML (Standart Generalized Markup Language – normalizovaný obecný jazyk strukturování a formátování dokumentu). V dokumentech SGML/HTML jsou tři významné momenty: struktura, styl a obsah. S pomocí dynamického HTML nyní HTML obsahuje čtvrtou komponentu: chování. Termín chování odkazuje na interakci mezi stránkou HTML a uživatelem.

Struktura nabízí kontext informací obsažených v dokumentu. Například prvky hlaviček H1 až H6 jsou míněny tak, aby definovaly různé hlavičky a jejich relativní důležitost. Po prvku H1 může následovat další H1 nebo H2, ale nesmí po něm následovat prvek H3. Jak však HTML rychle odvodilo, rozdíl mezi strukturou a prezentací byl často ignorován. Autoři používali označení HTML ne jako způsob nabídky struktury, ale jako způsob definování stylu. Prvek H1 byl často použit ve významu velký, tučný text místo toho, aby indukoval hlavičky nejvyšší úrovně. Jako odchylka od SGML byla uvedena stylistická označení. Například pro označení tučného textu a kurzívy byla použita označení <B> a <I>.

HTML rovněž definuje sadu pravidel pro správnou strukturu dokumentu. DTD (Document Type Definition – definice typu dokumentu) popisuje prvky, které mohou být obsaženy v jiných prvcích. Je důležité pochopit, že ne všechny prvky HTML mohou být v dokumentu libovolně umístěny. Když se v prohlížeči webová stránka špatně obnovuje, je to obvykle způsobeno HTML, které selhává při přizpůsobení se DTD. Naneštěstí mnoho stránek v síti WWW neodpovídá žádné HTML DTD, ale prohlížeče, místo aby uživatele nutily správně definovat dokumenty, obsahují neurčitou sadu pravidel pro analýzu dokumentu. Pak se pokoušejí vyložit úmysly autora – často s výsledky, které nejsou ideální.

V polovině roku 1996 byl pro specifikaci stylu v HTML představen nový jazyk, pojmenovaný Cascading Style Sheets, kaskádní styl. Charakteristika CSS byla společným dílem Berta Bose a Hakona Lie ze skupiny W3C mnoha příspěvky členů W3C a byla byla přijata jako hlavní implementace prohlížečů. V zásadě v CSS prvek Strong (a dokonce, pro tento příklad, ani prvek Bold) již neoznačují tučný text. Místo toho zůstává prvku Strong jeho původní účel, kterým je indikace důležitých slov. List stylu nyní určuje, že text prvku Strong bude zvýrazněn tučným písmem:

HTML je jazyk a má svou přesnou syntaxi. Její pozoruhodnost a unikátnost spočívá v tom, že je sice exaktně definována, ovšem součastně je velice flexibilní: i pokud se dopustíme poměrně značných chyb, lze odhalit a správně dekódovat “zdravé” části kódu. Uvádí se, že přes 90% webových stránek nesplňuje přesně pravidla HTML, přesto to nebrání jejich zobrazování a prohlížení.

Jazyk HTML je textového (ASCII) formátu a přímo v tomto formátu je požíván – není nikdy kompilován do binární či jakékoli jiné podoby. Znamená to že jakmile vytvoříme stránku HTML v textovém editoru, vytvořili jsme její finální tvar, který přímo čte a interpretuje prohlížeč. Soubory, které jsou vždy v binárním formátu, jako jsou zvuky nebo obrázky, nejsou umístěny do souborů HTML, tam jsou uvedeny pouze odkazy na tyto soubory.

Tag = je chráněné slovo jazyka HTML, uzavřené do špičatých závorek (k českému výrazu je nejblíže slovo štítek, návěští či označení). Všechny příkazy jazyka HTML jsou tagy – vše, co je mimo špičaté závorky, je vlastní obsah stránky. Tagy lze rozdělit do dvou skupin:

1. Párové tagy – ty mezi sebe uzavírají vlastní obsah a přiřazují mu vlastní hodnotu. Tag na levé straně výrazu je stejný s jediným rozdílem. Uzavírací tag má za závorkou uzavírací lomítko. Předpokládejme že existuje tag MODRÝ_TEXT a TUCNY_TEXT:

<MODRY_TEXT>Tento text bude <TUCNY_TEXT> modrý a tučný </MODRY_TEXT>a tento jen tučný</TUCNY_TEXT>

3. Odkaz – jedná se o odkázání na jiná data, která se nutně nemusejí nalézat v aktuální stránce (na jiný dokument na jiném serveru, na začátek kapitoly, na jinou stránku dokumentu...).

• Prvky Frameset a IFrame
• Rozšíření formy a přístupu
• Rozšíření tabulek pro hlavičky, patičky a sloupce
• Prvek Object pro vkládání vlastních objektů
• Prvek Script pro vkládání skriptů
• Schopnosti přenosu souboru pro odesílání souborů na server
• Rozšířenou sadu pojmenovaných entit

Více informací o HTML 4.0 a těchto vlastností nabízí webová stránka organizace W3C(Word Wide Web Consortium) – www.w3.org a nebo na stránce Microsoftu – www.microsoft.com .

za zastaralé se dají pokládat například tyto:

Neznamená to, že už nejsou používané nebo podporované, ale měly by se používat co nejméně. Proč ale nepoužívat tak klasický tag <FONT>? Protože

specifikace uvádí, že prakticky všechny atributy pro prezentaci, jako jsou barvy objektů, zarovnání, grafika či písma se označují jako zastaralé z toho důvodu, že se nyní dává přednost stylům (stylesheets, CSS či CSS2).

Za úplně vypuštěné tagy můžete považovat následující: XMP, PLAINTEXT, LISTING. Prohlížeče je nejspíš zobrazí, ale není to na 100%.

Dva nové argumenty s názvy lang a dir jsou použitelné téměř ve všech textových elementech.

lang = jazykový kód – udává jazyk dokumentu za účelem volby správné znakové sady u prohlížeče, pomoci vyhledávacím centrálám, atd.

Jazykový kód se stává z povinného dvoupísmenného kódu podle ISO 439. Jsou to: CZ (pro češtinu), SK, DR, FR, ES, EN, DE. U kódu jazyka také může být subkód, který určuje o jaký typ jazyku jde. Například en-US = americká angličtina.

dir : LTR nebo dir:RTL – určuje směr čtení textu, vlastní směr udává atribut dir. Pro nás má minimální význam, ale pro nemalou část lidstva kde čtou text  zprava do leva určitý význam má (LTR left-to-right, zleva doprava, toto je implicitní hodnota)

<!DOCTYPE ....atd......>, který oznamuje prohlížeči pro jaký typ prohlížeče je dokument napsán. S novou verzí jazyka HTML musí přibýt i nově označení. Těch označení je několik. Jeho syntaxe může mít více podob:

<HTML>
<HEAD>
<TITLE>Požití lokálně definovaných stylů</TITLE>
<STYLE TYPE=”text/css”>
BODY { background: black; color: white}
A:link {color:red}
A:visited {color:maroon}
A:active {color:fuchsia}
A:hover {color:gray} //rozšířšní z CSS2, vytváří nepodtržené odkazy

</STYLE>
</HEAD>
<BODY>
...tělo stránky...
</BODY>

</HTML>

Syntaxe:

První příklad nám něco spustí po načtení stránky, druhý až když browser (prohlížeč) odstraní dokument z okna či rámu. Místo hodnoty "něco" můžeme použít například script. Syntaxe by pak vypadala:

<BODY onload=script>

Tento tag dává prohlížeči najevo, že má spustit nějaký script, který je blíže definovaný ve stránce, ihned při načítání této stránky. Pokud budeme používat styly, můžeme dokonce využívat i nastavení vlastností z externího souboru, kde jsou popsány tyto vlastnosti. Tyto soubory s vlastnostmi mají příponu class. Syntaxe by vypadal následovně:

3.6 Text a jeho strukturování

Pravidla pro strukturování a formátování textu se skoro nemění, základní tagy (H1...H6, P, CODE atd.) zůstávají nezměněny, několik podružných elementů mizí a několik nových přibývá.

3.7 Formátovací značky

Základním tagem odkazujícím na jiný element je tag A (anchor, kotva), jeho syntaxe obsahuje řadu atributů, které se prakticky nepoužívají. Uvádím jen několik, které mají zásadní význam:

Kotva je buď typu HREF (hyperlink reference), neboli odkaz na jiný soubor. Nebo typu NAME, což je odkaz na jiné, pojmenované místo v aktuálním dokumentu. Pokud chceme vytvořit tento odkaz musíme na tomto místě vytvořit zarážku danou právě deklarací A NAME, které pak odkaz A HREF nalezne a zobrazí. Př:

SRC=”url” Zobrazuje obrázek z url

ALIGN=zarovnání Zarovnání obrázku vzhledem k okolnímu textu.

ALIGN=”left” Obrázek je umístěn na levý okraj okna či rámce a text jej obtéká bezprostředně zprava.
ALIGN=”right” Obrázek je umístěn na pravý okraj okna či rámce a text jej obtéká bezprostředně zleva.
ALIGN=”top” Zarovná horní okraj obrázku s nejvyšším elementem v daném řádku.
ALIGN=”texttop” Zarovná horní okraj obrázku s nejvyšším písmenem v daném řádku.
ALIGN=”middle” Zarovná základnu daného řádku textu s prostředkem obrázku.
ALIGN=”absmiddle” Zarovná prostředek daného řádku textu s prostředkem obrázku.
ALIGN=”baseline” Zarovná spodní okraj obrázku se základnou daného textového řádku. 
ALIGN=”bottom” Stejné jako ”baseline”.
ALIGN=”absbottom” Zarovná spodní okraj obrázku s nejspodnější linkou textu.
ALT=”alternativní text” Poskytuje alternativní popisný text pro uživatele s negrafickými prohlížeči.
USEMAP=”#nazev_mapy” Specifikuje obrázkovou mapu.
WIDTH=”x” HEIGHT=”x” Specifikuje rozměry obrázku v pixelech (x).
BORDER=”x” Specifikuje zda bude obrázek ohraničen okrajem (x: 0=ne, 1=ano).
HSPACE=”x” VSPACE=”x” Specifikuje horizontální a vertikální mezeru okolo obrázku v pixelech.
LOWSRC=”url” Specifikuje počáteční natahování obrázku s nízkým rozlišením, než bude natažen s plným rozlišením.
NAME=”jmeno” Pojmenovává obrázek pro použití uvnitř JavaScriptu.
DYNSRC=”jméno_videoklipu” Pokud chceme místo statického obrázku použít videoklip, k tomuto parametru se váží tři další:
LOOP Určuje kolikrát se má klip přehrát.
CONTROLS Zobrazí sadu ovládacích tlačítek.
START Určuje na jaký pokyn se má klip začít přehrávat.
Příklad:
<IMG DYNSRC=video.avi LOOP=3 START=”mouseover” HEIGHT=40 WIDTH=60>

Klikací mapy

Kliknutím na různé části obrázku vyvolá různé odkazy. Obrázku, za jehož částmi se skrývají odkazy, říkáme klikací mapa. Každou mapu, kterou vytváříme, musíme nějak pojmenovat. Pomocí toho jména se pak spojí obrázek a příslušnou mapou. Definice mapy:

Každá aktivní oblast je definována pomocí elementu AREA.

SHAPE=”tvar oblasti” COORDS=”souřadnice oblasti”>

SHAPE=”tvar oblasti” Tvar oblati může nabývat hodnot: RECT obdelník, CIRCLE kruh, POLY mnohoúhelník.

COORDS=”souřadnice oblasti” Souřadnice musejí být oddělené čárkami. První dvě čísla určují levý horní roh a druhé dvě pravý dolní roh. U kruhu jsou uvedeny souřadnice sředu a poloměru. U mnohoúhelníku se uvádějí souřadnice jednotlivých vrcholů.

Rozšířený element INPUT (tj. Element, s nímž uživatel různým způsobem pracuje a způsobí tak odesílání svého zadání směrem k serveru). Zde byly vynechány atributy HSPACE a VSPACE, které nejsou moc využívány.

TYPE=file Známý atribut rozšířený právě o hodnotu file, která určuje, že očekává jako vstup jméno diskového souboru s případnou celou cestou.

READSONLY U tohoto atributu nejsou žádné hodnoty, pokud je zadán, obsah políčka či jiného vstupního elementu je dán, je předán ke zpracování, ale uživatel nemůže jeho hodnotu měnit.

Tag TEXTAREA je párový a udává textovou oblast – oblast určenou pro zadávání textu.

<TEXTAREA ROWS=”x” COLS=”y” NAME=jméno WRAP=zalomení> implicitní text</TEXTAREA>

ROWS=x Počet řádků.

COLS=x Počet sloupců.

NAME=”jmeno” Identifikuje vstupní box.

WRAP Identifikuje automatické zalamování textu uvnitř boxu.

Dále lze používat stejné parametry jako u ostatních formulářových elementů: DISABLED, READONLY, TABINDEX, ONFOCUS, ONBUR, ONSELECT a ONCHANGE.

<OPTION>
- vytváří volby menu, které mohou být vybrány v menu formuláře (definuje obsah roletky)

<OPTION SELECTED=”implicitni_hodnota”>
- udává hodnotu, která je implicitně vybrána, jako by na ni uživatel klepl

<OPTION VALUE=”hodnota”>
- pravá hodnota předávaného argumentu

<OPTION DISABLED>
- hodnota takto označená je zašedlá a tudíž nepoužitelná

<SELECT multiple size=5 name="Jaké auto je nejhezčí:>
<OPTION selected value="Naše česká škodovka">Škodovka</OPTION>
<OPTION >Audi</OTPION>
<OPTION>BMV</OTPION>
<OPTION>Ford</OTPION>
<OPTION>Mercedes</OTPION>
</SELECT><\P>

Jak vidíme, je implicitně vybrána Škodovka, protože tak udává parametr selected v tomto řádku. A nevybereme-li jinou hodnotu, odešle se směrem k serveru hodnota "Naše česká škodovka", protože tato hodnota je nastavena parametrem value a ten má přednost před vlastním obsahem výběru.

NAME=”jmeno” Identifikuje data náležíc menu.

MULTIPLE Specifikuje více než jednu volbu v menu.

SIZE=”x” Specifikuje počet viditelných položek v menu (x)

Dále lze používat stejné parametry jako u ostatních formulářových elementů: DISABLED, READONLY, TABINDEX, ONFOCUS, ONBUR, ONSELECT a ONCHANGE.

<BUTTON NAME=jméno VALUE=hodnota TYPE=typ DISABLED TABINDEX=číslo>obsah tlačítka</BUTTON>

<FIELDSET>
<LEGEND align="left"><B>JAKÉ AUTO MÁŠ
NEJRADĚJI? </B></LEGEND>
<SELECT multiple size=5 name="Jaké máš nejraději?">
<OPTION selected value="Naší Škodovku">ŠKODA</OPTION>i
<OPTION >Audi</OTPION>
<OPTION>BMW</OTPION>
<OPTION>Ford</OTPION>
<OPTION>Trabant</OTPION>
</SELECT>
</FIELDSET>

for="jméno" Udává, co pošle serveru za hodnotu.
<FORM METHOD="POST" ACTION="http://www.něco">
<LABEL for="jmeno">Jméno</LABEL>
<INPUT TYPE="text" id="jmeno">
<LABEL for="prijmeni">Příjmení</LABEL>
<INPUT TYPE="text" id="prijmeni">
</FORM>

ISINDEX tento tag je označen v nové verzi jako zastaralý a jeho požívaní není doporučeno, protože nové prohlížeče jej zřejmě budou ingorovat. Jeho úlohu splní bez problémů tag INPUT.

<TABLE ALIGN=left/center/right BACKGROUND=”url” BGCOLOR=barva BORDER=”x” BORDERCOLOR=barva BORDERCOLORDARK=barva BORDERCOLORLIGHT=barva CELLPADDING=”x” CELLSPACING=”x” CLASS=type COLS=”x” FRAME=frame-type ID=value RULES=rule-type STYLE=css1-properties WIDTH=”x”> Obsah tabulky </TABLE>

RULES=rule-type Určuje, které vnitřní rámečky se zobrazí.

WIDTH=”%” Specifikuje šířku tabulky v % (relativně k šířce stránky prohlížeče) nebo v pixelech.

Ostatní parametry se používají jako u značky TABLE.

<TD ALIGN=left/center/right BGCOLOR=barva BACKGROUND=”url” BORDERCOLOR=barva BORDERCOLORDARK= barva BORDERCOLORLIGHT=barva COLSPAN=”x” ROWSPAN=”x” NOWRAP HEIGHT=”x” WIDTH=”x” VALIGN=top/middle/bottom AXIS=jméno AXES=jméno1, jméno2> buňka </TD>

Atributy ALIGN, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, VALIGN jsou již vysvětleny výše.

Záhlaví tabuky <TH></TH>, řídí se stejnými pravidly jako tag TD, jediný rozdíl je v tom že hlavička je implicitně tučným písmem a je zarovnaná na střed

<CAPTION ALIGN=left/center/right/top/bottom VALIGN=”top/bottom”> nadpis </CAPTION>
- definuje nadpis tabulky.

Elementy THEAD = hlavička tabulky TFOOT = patička tabulky TBODY = tělo tabulky.

Byli oficiálně uvedeny až ve verzi 4.0, jsou vytvořeny za účelem sloučení více řad do tří skupin: hlavičky, těla a patičky tabulky. Nejprve si musíme nadefinovat hlavičku, pak patičku a nakonec až tělo buňky (používají formátovací atributy jako element TR). Prohlížeč nejprve vykresluje hlavičku, pak tělo a až nakonec patičku, což je celkem logické. Jen je nelogická posloupnost v syntaxi:

<TABLE>
<THEAD>
<TR> ... hlavička tabulky
</THEAD>
<TFOOT>
<TR> ... patička tabulky
</TFOOT>
<TBODY>
<TR> ... první řádek tabulky
</TBODY>
<TBODY>
<TR> ... druhý řádek tabulky
</TBODY>
</TABLE>

Dokáže formátovat celé sloupce, můžeme tak zadat vlastnosti, které budou platit pro celý sloupec, nebo i více sloupců najednou. Například, chceme-li zadat šířku 50 pixelů pro čtvrtý sloupec, bude syntaxe vypadat takto:

<COLGROUP> …první sloupec
<COLGROUP> … druhý sloupec
<COLGROUP> … třetí sloupec
<COLGROUP span=2 width=50> …čtvrtý a pátý slupec s nastavenou šířkou

Novinkou je způsob zarovnávání - char a charoff. Char určuje znak v textovém řetězci v buňce, který bude použit pro vertikální zarovnání. Využití je zřejmé: lze snadno zarovnávat slupce čísel na desetinou čárku nebo tečku. Syntaxe je:

V praxi to znamená:

Znamená to, že příslušný sloupec tabulky bude zarovnáván na desetinnou tečku. S tímto atributem souvisí ještě druhý nový atribut charoff, který určuje odsazení příslušného zarovnávacího znaku zleva: syntaxe je: charoff=délka. Délka musí být opět v uvozovkách. Není-li v buňce zarovnávací znak přítomen, je na vzdálenost danou charoff odsazen první znak textu buňky.

<FRAMESET COLS=”x,x” ROWS=”x,x” BORDER=”0/1/2/atd.” FRAMESPACING=”1/0” FRAMEBORDER=”1/0”>Popis obsahu rámů </FRAMESET>

U tagu FRAMESET lze požít atributy které jsou popsány u tagu BODY a jsou to atributy ONLOAD a ONUNLOAD. Pomocí nich se spouští akce (skript) určená tímto atributem poté jakmile jsou všechny rámy určené tagem FRAMESET načteny a zobrazeny nebozrušeny.

Obash a formu rámu umožňuje tag FRAME

<FRAME ALIGN=left/center/right SRC=”url” FRAMEBORDER=”1/0” BORDERCOLOR=”#xxxxxx” FRAMESPACING= ”0/1/2/atd.” NAME=”jmeno” NORESIZE MARGINWIDTH=”x” MARGINHEIGHT=”x” SCROLLING=”0/1/auto”>

<IFRAME ALIGN=top/middle/bottom/right/left/texttop /absmiddle/baseline/absbottom BORDER=”šířka ohraničení” BORDERCOLOR=”barva” FRAMEBORDER=”0/1/no/yes” FRAMESPACING=”mezera_mezi_rámy” HEIGHT= ”výška_okna” VSPACE=”vertikální_odsazení” HSPACE=”horizontální _odsazení” SRC=”url” MARGINHEIGHT=string MARGINWIDTH=string NAME=”název_okna/_blank/_parent /_self/_top” NORESIZE=”noresize/resize” SCROLLING=”auto/no/yes” TITLE=jméno WIDTH=”šířka_okna”>

Pro prohlížeče, které nezvládají zobrazení rámů, je určen tag NOFRAMES, tento tag je párový a skryje do sebe vše co má být zobrazeno. Příklad:

<HTML>
<HEAD>
<TITLE>Dva rámy, alternativa bez rámů</TITLE>
<FRAMESET ROWS=”100%” COLS=”50%”>
<FRAME NAME=”ram1” SRC=”soubor1.html”>
<FRAME NAME=”ram2” SRC=”soubor2.html”>
<NOFRAMES>Váš prohlížeč nepodporuje rámy.</NOFRAMES>
</FRAMESET>
</HEAD>
</HTML>

<APPLET ALIGN=”zarovnání” CODE=”url” HEIGHT=”x” WIDTH=”x”></APPLET>
- vkládá Java applet ukázáním na jeho url, parametry byly již probrány

<BGSOUND LOOP=nnn SRC=”zdroj” TITLE=”jméno”>
- zvuk na pozadí, LOOP udává kolikrát se má soubor nahrát, SRC udává zdrojový soubor obsahující zvukovou stopu (ve formátu .waw, .au, .mid)

<EMBED SRC=”url” HEIGHT=”x” WIDTH=”x”> <NOEMBED> Váš prohlížeč nemá požadovaný plug-in! </NOEMBED> </EMBED>
- Netscape 3.0 + kompatibilní (ale nikoliv HTML 4.0 standart) metoda pro vkládání zvuků, videa a plug-in modulů zahrnující <NOEMBED> alternativu pro ty, kteří nemají schopnost zobrazit hudbu, video nebo jiné plug-in moduly

Slouží pro vkládání a definování souborových objektů, velmi často to bývají ovladače v ActiveX nebo Javě do stránek. Jaké to jsou objekty a co se s nimi děje (tj. zda se zobrazují, přehrávají jako zvuky, jaké mají způsoby ovládání atd.), už není úkolem tagu OBJECT – ten pouze formálně umístí objekt do daného místa na stránce.

Prvek Marquee

Internet Explorer poprvé uvedl tag s efektem ”rolující text”. Netscape N. jej ve svých starších verzích nepodporuje. Syntaxe:

<MARGUEE ALIGN=”zarovnání” BEHAVIOR=”chování” BGCOLOR=”barva” DIRECTION=”směr” HEIGHT=”výška” HSPACE=”číslo” LOOP=”opakování” SCROLLAMOUNT=”číslo” SCROLLDELAY=”číslo” VSPACE=”číslo” WIDTH=”šířka”>

...vlastní text...

K pochopení vytváření webových stránek plně vyžaduje porozumět architektuře IE 4.0. Tato architektura má podobu objektového modelu.

Většina aplikací jako je např. Microsoft Word, Microsoft Excel, Microsoft PowerPoint a Internet Explorer jsou složeny z objektů. Tyto aplikace jsou sestaveny z vhodně nadefinovaných softwarových modulů, s jejichž daty lze pracovat díky proměnným, známým jako vlastnosti (properties), a jejich služby lze využívat pomocí funkčních volání, známých jako metody (methods).

Vlastnosti a metody realizují užitečnou funkci pro určitou část softwaru. Kolekci vlastností a metod, jež definují určitý objekt, se říká rozhraní (interface). Rozhraní je vyvoláváno uživatelem pomocí nástrojových panelů a nabídek, může je však volat přímo programátor prostřednictvím programového kódu. Vše, co může provádět uživatel v aplikaci, může dělat i programátor, jenž provádí volání k objektům.

Základním objektem je window (představuje celý prohlížeč), přes který jsou dostupné všechny další objekty. Nejdůležitějším objektem je document, který v sobě zahrnuje všechny objekty a vlastnosti vztahující se k aktuálnímu dokumentu. Na jednotlivé objekty v hierarchii (obrázek 1.1) se odvoláváme pomocí tečkové notace:

Window.screen, window.document, window.document.body. Protože je objekt document nejpoužívanější, můžeme před ním vynechat specifikaci nadřazeného objektu window. Zkráceně tedy můžeme psát window.screen, document, document.body.

window
  |--location 
  |--frames 
  |--history 
  |--navigator 
  |--event 
  |--screen 
  +--document 
       |--links
       |--anchors
       |--images
       |--filters
       |--forms
       |--applets
       |--embeds
       |--plugins
       |--frames
       |--scripts
       |--all
       |--selection
       |--styleSheets
       +--body

Následující souhrn uvádí vývoj podpory objektu v různých prohlížečích.

Internet Explorer 3.0 podporuje následující objekty

• anchors – kotvy
• document – dokument
• document.frames – rámce dokumentu
• forms – formuláře
• history – historie
• links – propojení
• location – umístění
• navigator – navigátor
• window – okno
• window.frames -rámce okna

• applets –aplety
• images – obrázky

Internet Explorer 4.0 podporuje stejné objekty, IE 3.0 a NN 3.0 a přidává k nim následující objekty:

• all –všechno
• body – tělo
• clientInformation – informace pro klienta
• event – událost
• screen – obrazovka
• scripts – skripty
• selection – výběr
• styleSheets – styl listů

Window představuje celý prohlížeč a adresujeme-li tento objekt ve skriptu, manipulujeme přímo s IE 4.0.

Location poskytuje informace o aktuální poloze na Internetu. Díky tomu lze zjistit adresu aktuálního místa, a to pomocí vlastnosti Href, nebo získat její části pomocí vlastností Hash, Host, Hostname, Pathname, Port, Protocol, Search.

Frames slouží k práci se všemi rámy v prohlížeči. Tato kolekce představuje nástroj pro programovou manipulaci s jedním rámcem ze skriptu, který běží v jiném rámci. Obvykle se s touto kolekcí pracuje pomocí čísel počínaje jedničkou, přístup k oknům můžeme také provádět pomocí jejich jmen (jsou-li k dispozici). Poté co nadefinujeme rámy uvnitř množiny rámů, můžeme pomocí kolekce Frames pracovat s kterýmkoli z existujících rámů.

Navigator webová stránka s více rámy má pro každý rám zvláštní objekt Window, a proto je možné používat prohlížeč jako celek jen pomocí objektu Navigator.

Event tento objekt odpovídá událostem, ke kterým dochází v Internet Exploreru. Zjišťuje značky na které uživatel klepnul, identifikuje prvek který je do události zapojen, a obstarává šíření události. Je velmi důležitý pro dynamické HTML.

Screen představuje obrazovku klienta a vrací informace o jejích schopnostech. Nejdůležitější vlastnosti jsou Height (výška) a Width (šířka), které vracejí rozlišení obrazovky klienta v pixelech. Pomocí této informace pak lze přesně umístit prvky na webové stránce na základě rozlišení obrazovky.

Document představuje dokument aktuálně načtený v prohlížeči. Je to snad nejdůležitější objekt v hierarchii, protože funguje jako přístupová cesta ke všem součástem dokumentu, počínaje barvou pozadí konče každou jednotlivou značkou (tag) obsaženou v dokumentu. Dynamické HTML je značně závislé na přístupu ke značkám HTML skrze objekt Document.

Document umožňuje pracovat s mnoha prvky stránky, práce s těmito prvky se zpravidla provádí pomocí kolekce, zvláštního druhu objektu v objektovém modelu Internet Explorer. Kolekce představuje skupinu objektů stejné třídy a umožňuje snadný přístup ke každému členu takové třídy. Např. pomocí kolekce Form se můžeme dostat ke všem formulářům v dokumentu a provádět s nimi jejich funkce. Obecně platí, že s každou vlastností nebo metodou ovládacího prvku na formuláři je možné pracovat pomocí objektů Document a Form následujícím způsobem:

Document.jménoFormuláře.jménoOvládacíhoPrvku.Vlastnost[metoda]

Internet Explorer 4.0 umožňuje pracovat s kolekcemi u mnoha jiných objektů včetně Links, Anchors, Images, Filters, Forms, Applets, Embeds, PlugIns, Frames, Script a StyleSheet. Tyto kolekce nám umožňují pracovat s každým aspektem stránky HTML a jádrem Dynamického HTML.

Na dalších nižších úrovních v objektové hierarchii mohou být buď další objekty anebo přímo vlastnosti a metody jednotlivých objektů. Objekt document.all obsahuje všechny elementy obsažené v dokumentu. Podstata dynamického provádění změn HTML-obsahu spočívá v zacházení s každou značkou jako se samotným objektem. Z toho důvodu je zapotřebí značky pojmenovat, aby mohly být adresovány z kódu. Název značky je přístupný pomocí svého jména nadefinovaného atributem ID:

<H1 ID=Nadpis>nadpis</H1>
<P ID=Odstavec1>Nějaký odstavec

Jakmile je ID definováno, můžeme události, ke kterým může na značce dojít, přiřadit kód který napíšeme v některém ze skriptovacích jazyků. Dynamické HTML rozlišuje rozsáhlou řadu událostí, tyto události se zpracovávají na mnoha úrovních což umožňuje obsaženým prvkům obdržet oznámení o tom, kdy značky (tagy) v nich spouštějí události. Tento proces kdy se objektům oznamují události, ke kterým v nich došlo, je znám jako šíření událostí (event bubbling).

Nyní můžeme ve skriptech po pojmenování ID na stránce používat objekty document.all. Nadpis a document.all.Odstavec1, které zastupují element pro nadpis a odstavec. U těchto objektů máme k dispozici vlastnosti, které odpovídají atributům použitelným u odpovídajících elementů.

Pomocí vlastnosti document.all.Nadpis.align můžeme měnit způsob zarovnání nadpisu. Následující ukázka obsahuje skript, který po kliknutí myší na nadpis změní jeho zarovnání zleva doprostřed

<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeAlign()
{
  document.all.Nadpis.align = "center";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis ALIGN=LEFT
    onClick="ChangeAlign()">nadpis</H1>
<P ID=Odstavec1> Nějaký odstavec
</BODY>
</HTML>

U objektů, které odpovídají elementům stránky, máme k dispozici vlastnost i objekt style. Pomocí vlastnosti style můžeme přistupovat k definici stylu elementu stejně jako pomocí atributu STYLE. Následující kód by změnil barvu a velikost nadpisu:

document.all.Nadpis.style = "color: red; font-size: 30px";

Zajímavé je, že style je zároveň vlastnost i celý objekt. Vlastnosti objektu style odpovídají jednotlivým vlastnostem stylů. To samé tedy můžeme dosáhnout i následujícím kódem:

document.all.Nadpis.style.color = "red";
document.all.Nadpis.style.fontSize = "30px"

Location Udává adresu dokumentu, který je právě zobrazován Pokud tedy chceme přímo skriptem změnit stránku, která se právě zobrazuje, můžeme použít příkaz location="http://někde.jinde.cz".

Pokud máme stránku rozdělenou na rámy, můžeme z jakéhokoliv rámu měnit stránku zobrazenou v ostatních rámech. Stačí novou adresu zapsat do parent.jméno_rámu.location. Tímto způsobem můžeme dosáhnout speciálních efektů, jako je změna obsahu více rámů najednou po zvolení jednoho odkazu. Vždy bychom však měli zvážit, zda je chováni stránky snadno pochopitelné pro její uživatele.

Skripty nejsou jedinou cestou pro přístup k modelu objektu dynamického HTML. Ten může být proveden třemi způsoby:

• Pomocí skriptů ve stránce HTML nebo touto stránkou odkazovaných. Tyto skripty mohou zpřístupnit obsah aktuálního dokumentu nebo dokumentů ze stejné domény v jiných rámcích nebo oknech.
• Pomocí vkládaných appletů a ovládacích prvků, které jsou na stránce rezidentní.
• Pomocí hostitelů, kteří jsou mimo nebo vedle prohlížeče. Například pomocí dynamického HTML bylo vytvořeno dialogové okno Find v Internet Exploreru 4.0.

<SCRIPT TYPE="typ" LANGUAGE="jazyk" SRC="soubor_se_skriptem" TITLE="titulek_skriptu" EVENT="událost" FOR="objekt"> předávaná data - nejsou zobrazována ani formátována, nejsou povinná, každý skript nemusí přebírat vstupní data </SCRIPT>

<HEAD>
<TITLE>Stránka, která vám popíše stavovou řádku</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
  window.status = "Právě si prohlížíte moji stránku."
// -->
</SCRIPT>
</HEAD>

Před ukončením HTML komentáře --> použijeme dvě lomítka, aby se interpretr JavaScriptu nepokoušel konec HTML komentáře považovat za část skriptu. To dělá zejména Netscape Navigator.

Prříklad:

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Používáte prohlížeč " + navigator.appName
  + " " + navigator.appVersion)
// -->
</SCRIPT>
<NOSCRIPT>
Používáte prohlížeč, který nepodporuje JavaScript.
</NOSCRIPT>
</BODY>

Z ukázky vidíme, že text vygenerovaný programem v JavaScriptu se stává součástí stránky. Příkazy uvedené uvnitř elementu SCRIPT se provedou pouze jednou při načítání stránky.

Dokument může obsahovat libovolný počet prvků Script, který může pracovat v hlavičce dokumentu, nebo v těle (pro většinu účelů není umístění ve vztahu k návrhu stránky důležité).

Umístění nabývá důležitosti tehdy, když prvek skutečně zapisuje obsah do proudu nebo je odkazován na prvek v dokumentu. Zápis do proudu se provádí pomocí metody write nebo writeln objektu documenet:

<HTML>
<SCRIPT LANGGUAGE=”JavaScript”>
tímto skriptem je generován celý dokument
document.write(”<HEAD><TITLE>Můj dokument</TITLE></HEAD>”);
document.writeln(”<BODY><H1>Má stránka</H1></BODY>”);
</SCRIPT>
</HTML>
Tento program vytváří a obnovuje následující HTML:
<HTML>
<HEAD>
<TITLE>Můj dokument</TITLE>
</HEAD>
</BODY>
<H1>Má stránka</H1>
</BODY>
</HTML>

Odložení provedení skriptu

IE 4.0 může nabídnout vylepšený výkon pro skripty, které neobsahují bezprostředné prováděný program. Pokud prvek Script obsahuje pouze deklaraci funkcí, doplnění atributu DEFER do tagu <SCRIPT> upozorní prohlížeč, že nemusí čekat na celý skript, aby byl analyzován a přeložen.

Více jazyků skriptů

Při používání Internet Exploreru může být připravena stránka, obsahující jak program v JavaScriptu, tak program ve VBScriptu. Dále je pro jeden jazyk možné volat funkce definované jiným jazykem. Volání funkce, zapsané ve skriptu v jiném jazyce, je možno proto, že všechny funkce a proměnné jsou přidány objektu window jako metody a vlastnosti.

<SCRIPT LANGGUAGE=”VBScript”>
Tento skript vysune rámeček hlášení
sub MyAlert(str)
msgBox(str)
end sub
</SCRIPT>

<SCRIPT LANGGUAGE=”JavaScript”>
Volání MyAlert, definované v předchozím příkladě
MyAlert(”Hello World!”);
Window.MyAlert(”MyAlert je metoda objektu window.”) </SCRIPT>

Přesměrování na straně klienta

Jednou metodou pro zpracování různých softwarových verzí je přesměrování uživatele podle jím používaného prohlížeče na různé stránky. Přesměrování na straně klienta proběhne tehdy, když skript na pozadí stránky podmíněně přepne prohlížeč na jiný dokument. Pomocí podmíněného testování prohlížeče může být zavedena alternativní verze stránky. Při použití této techniky musí být základní stránka tou, na níž se zaměří vaše nejdůležitější návštěva, protože přesměrování bude mít důsledek na zobrazení. Když se objeví přesměrování, vede to k tomu, že budou zavedeny dvě stránky.

<SCRIPT LANGUAGE=”JavaScript”>
var MS = navigator.appVersion.indexOf(”MSIE”);
Zkontroluje, zda se jedná o IE4.
window.isIE4 = (MS > 0) &&
(parseInt(navigator.appVersion.substring(MS+5, Ms+6)) >= 4);
if (!isIE4) // Nejde-li o IE4. dostaneme nedynamickou stránku.
Window.location=”downlevelpage.html”;
</SKRIPT>

Výběr jazyka skriptu: JavaScriptu a VBScript

Model objektu dynamického HTML je jazykově neutrální a může být skriptem zpracován v libovolném dostupném programovacím jazyce. V součastné době existují dva základní jazyky pro skripty webových stránek: JavaScript a VBScript.

Výbor ECMA (European Computer Manufactures Association – Evropské sdružení výrobců počítačů), společně se zástupci firem Netscape, Microsoft a dalších prodejců, schválil normu pro jazyk JavaScript.

Aby byly naše dokumenty opravdu interaktivní, je potřeba, aby provedení určité části skriptu bylo vyvoláno událostí, kterou způsobil uživatel. Událostí může být přejetí myší přes určitý element, kliknutí myší apod.

onload=script Událost nastane, když prohlížeč načte rám nebo celé okno (tj. veškerá jeho data.). Podle toho, zda se jedná o jeden rám nebo všechny rámy, se tento element umísťuje do oblasti BODY nebo FRAMESET.

onunload=script Událost nastane, když je ukončeno zobrazení celého okna nebo rámu. To nastane, když uživatel zadá načtení jiného okna nebo rámu v okamžiku, kdy se okno se starým obsahem vyprázdní a je započato načítání druhého okna. Opět se používá v oblasti BODY nebo FRAMESET.

onclik=script Událost nastává v okamžiku, když uživatel klepne (klikne, stiskne levé tlačítko myši) nad elementem. Může se jednat i o text a postačí klepnutí nad kterýmkoliv písmenkem textu, není nutné cokoli vybírat (samozřejmě může jít také o obrázek, formulářový element, atd.).

ondblclick=script Totéž jako v předchozím případě, ale zde je nutný dvojstisk (doubleclick, poklepání).

onmousedown=script Podobně jako onclick, ovšem událost nastane, když uživatel drží nad elementem stisknuté levé tlačítko myši; jakmile jej uvolní, událost je ukončena.

onmouseup=script Tato událost nastane, když je tlačítko uvolněno, ovšem kurzor se vyskytuje stále na elementem.

onmouseover=script Událost nastane, ihned v okamžiku, když se kurzor přesune nad element (není nutné stisknout tlačítko).

onmousemove=script Obdobně jako výš uvedená událost: nastává, když se kurzor pohybuje, jakmile se pohyb zastaví, je událost ukončena.

onmouseout=script Doplňková událost k onmouseover - nastává v okamžiku, kdy je kurzor umístěn mimo element.

onfocus=script Událost nastává, když je element tzv. vybrán. Tato událost nemůže nastat u všech HTML elementů a týká se pouze elementů formulářových. Vybrání nastává například v okamžiku, když se pohybujete po dialogovém panelu pomocí klávesy TAB. Okolo vybraného elementu je vykreslen velmi tenký rámeček a element je možné ovládat klávesnicí (mezerník, kurzorové šipky). Lze tedy použít pouze u elementů LABEL, INPUT, SELECT, TEXTAREA a BUTTON.

onblur=script Komplementární událost k onfocus: dá se říci, že pokud není element "onfocus", tak je "onblur". Lze také použít pouze u tagů uvedených v předešlé události.

onkeypress=script Událost nastává, když je nad elementem stisknuta a uvolněna klávesa. Lze použít pouze u elementů, které se ovládají pomocí kláves (tj. opět například u formulářových elementů).

onkeydown=script Obdobně jako u předchozího elementu: událost nastává, když je klávesa stisknuta a přidržena.

onkeyup=script Doplňková událost k předchozí: událost nastává, když je klávesa uvolněna poté, co byla předtím nad elementem stisknuta.

onsubmit=script Událost nastává, když je formulář odeslán ke zpracování; je jasné, že může být proto použita pouze u elementu FORM.

onreset=script Událost nastává, když je formulář resetován, tj. když je stisknuto tlačítko reset <BUTTON type=reset>, opět je samozřejmě platný pouze pro tag FORM.

onselect=script Událost nastává, když uživatel vybere text v políčku, tj. když přes něj "přejede" s přidrženým tlačítkem myši či kurzorovými klávesami s přidrženou klávesou SHIFT. Lze použít u tagů INPUT a TEXTAREA.

onchange=script Jako výše, ovšem v případě, když je text ve vstupním poli změněn, a když uživatel editaci ukončí (nastává tedy v momentě, kdy uživatel překlepne první písmenko v políčku, ale až v okamžiku, kdy přenese fokusaci na jiný element). Lze použít u tagů INPUT, SELECT a TEXTAREA.

Atributy události

V dynamickém HTML byly všechny prvky dokumentu rozšířeny, aby podporovaly události klávesnice a myši. Tyto události jsou na každém prvku vytvořeny přímo jako atributy a umožňují přímé spojení mezi prvkem a chováním (podobná spojení jako u prvku a jeho stylem). Můžeme provádět událost tlačítka onclick k funkci, a to pomocí následujícího atributu:

...když uživatel klepne na tlačítko, bude volána funkce foo()...

<INPUT TYPE=button VALUE=”Klikni zde”
> ONCLICK=”foo();” LANGUAGE=”JavaScript” >

...po klepnutí na tlačítko se zobrazí hlášení a potom se zavolá funkce foo()...

<INPUT TYPE=button VALUE=”Klikni zde”
ONCLICK=”alert(‘Uživatel kliknul zde.’); foo();” LANGUAGE=”JavaScript” >

Všechny atributy HTML nejsou citlivé na velikost písmen, citlivost na velikost písmen může být důležitá tehdy, použijeme-li jiný mechanizmus vazby události (tj. spojení mezi určitou událostí a skriptem). Vazba události pomocí atributů HTML je šikovná, ale má celou řadu nevýhod. První je že jazyk HTML musí být rozšířen pokaždé, když bude vymyšlena nová událost. Také objekty nebo aplikace, vytvářejí libovolné události, také potřebují jazyk rozšířit nebo vytvořit své vlastní techniky vázání události. Proto je tento přístup využíván jen pro malou sadu vestavěných událostí. Pokud je na stránku vložen libovolný prvek, je jeho událost vytvořena více generickým způsobem

Pro vazbu funkcí k událostem využívá několik rozšíření prvku SCRIPT – atribut FOR a EVENT.

EVENT – odkazuje na událost a jakýkoli parametr, který do něj může být vložen.

FOR – určuje název nebo ID prvku, pro který je událost napsána.

Například v dokumentu je vytvořena událost onmousemove, pro vazbu k této události můžeme použít následující tag SCRIPT:

- tento ovladač události je volán pokaždé, když se myš pohybuje po dokumentu

Časování vazby události

V JavaScriptu jsou události při zavádění stránky spojovány asynchroně. Každý prvek Script a atribut události je zapojen tak, že je z dokumentu oddělen. VBScript události nesváže, dokud není analyzována celá stránka, nejsou zavedeny všechny externí skripty a nezačaly být zaváděny vložené objekty.

4.3 Skripty jednotlivých prvků

Identifikování prvků

Objekty prvků mají několik vlastností, které usnadňují jejich identifikaci. Vlastnosti objektu id a className obsahují hodnoty odpovídajících atributů prvku ID a CLASS a jeho vlastnost tagName obsahuje název tagu prvku. Prvky které mají atribut NAME, mají rovněž vlastnost name, která obsahuje hodnotu atributu.

4.3.1 Prvky Body a Frameset

• vrací BODY nebo FRAMESET v závislosti na typu dokumentu

Aby jsme určili, zda dokument obsahuje tělo nebo sadu rámů, můžeme použít vlastnost tagName. Následující program zobrazí hlášení které oznámí typ dokumentu (v tomto případě sadu rámů).

<HTML>
<HEAD>
<TITLE>sada rámů vyjádřená jako BODY</TITLE>
</HEAD>
<FRAMESET ROWS=”100%”
ONLOAD=”alert (document.body. tagName);”>
<FRAME SRC=”neco.html>
</FRAMESET>
</HTML>

Události okna

Prvky Body a Frameset obsahují atributy odpovídající všem událostem na úrovni okna. Dokument může obsahovat více sad rámů, může mít pro každou událost okna jen jeden ovladač. Pokud několik prvků Frameset v dokumentu definuje pro událost ovladač, bude proveden pouze ten poslední program ovladače.

<HTML>
<HEAD>
<TITLE>Událost sady rámů onload</TITLE>
</HEAD>
<FRAMESET ROWS=”100,*” ONLOAD=”alert (‘a’);”>
<FRAMESET COLS=”*.*” ONLOAD=”alert (‘b’);”>
<FRAME SRC=”a.html>
<FRAME SRC=”b.html>
</FRAMESET>
<FRAME SRC=”c.html>
</FRAMESET>
</HTML>

V této ukázce se provádí pouze druhý ovladač události onload, zobrazující hlášení “b”. Událost není spuštěna, dokud není zaveden celý dokument.

Událost onresize se spouští tehdy, když dojde ke změně velikosti fyzického okna. Je také definována v prvcích dokumentu, které mají definovanou velikost, v těchto případech se událost spouští, když se změní fyzická velikost prvku.

Událost onscroll se spouští kdykoliv, když je okno rolováno. Tato událost se vyskytuje jen v dokumentech s prvkem BODY.

Dokument sady rámů obsahuje sbírku all, která zajišťuje přímí přístup ke všem prvkům v dokumentu. Pomocí sbírky all mohou být zpřístupněny jednotlivé atributy každého prvku Frameset a prvku Frame a v mnoha případech mohou být dynamicky upraveny.

Prvek Anchor slouží ke dvěma účelům: aby specifikoval propojení pro navigaci k URL a nebo specifikoval záložky v dokumentu. Tyto vlastnosti byly již probrány v kapitole 3.8 Značky pro odkazy.

Kotvy a Base HREF

Mezi hodnotami Href a modelem objektu existuje vztah – částečně HREF je URL, které se explicitně nespouští příkazem (href=home.html). Všechny Href jsou označeny předdefinovaným umístěním. Pokud není zadáno jinak, je předdefinovaným umístěním umístění aktuálního dokumentu. Ke změně předdefinovaného umístění můžeme použít prvek BASE. Pro částečné URL, přiřazených k atributům, bude předdefinované umístění přidáno při analýze dokumentu. Pro částečné URL, přiřazené k vlastnostem, nebude předdefinované umístění přidáno do té doby, pokud nebude URL odkazováno. Viz. příklad:

<HTML>
<HEAD>
<TITLE>Ukázka Base Href</TITLE>
<BASE HREF=”http://Tom/”>
</HEAD>
<BODY>
<A HREF=”strana1.html”>Strana 1</A>
<A HREF=”http://Jan/strana2.html”>Strana 2</A>
<SCRIPT LANGUAGE=”JavaScript”>
alert(document.links[0].href); //http://Tom/srana1.html
alert(document.links[1].href); //http://Jan/strana2.html
document.links[0].href = ”novastr.html”;
alert(document.links[0].href); //novastr.html
</SCRIPT>
</BODY>
</HTML>

Tato technika je užitečná tehdy, když rám obsahuje krátký řetězec, protože se pak snižuje počet spojení se serverem. Např. když uživatel klepne na následující kotvu, vytvoří se jednoduchý dokument, který zobrazí řetězec Hello World.

<A HREF=”JavaScript:’Helo word’”>Atributy zadané skriptem běží poté, když se ukončí spuštění události onclick.

Tag A podporuje sadu standardních událostí, které nastanou poté, kdy uživatel klepne, přejede myší přes nebo ji do kotvy zapíše. Události mohou mít počátek v prvku A podle toho, zda je kotva propojením nebo záložkou. Všechny události mohou být definovány jako atributy v prvku, syntaxí <SCRIPT FOR= EVENT= > nebo pomocí vlastností prvku Anchor. Program přerušuje předdefinovanou akci určitého propojení:

Aby byla zaručena kompatibilita s jinými prohlížeči, můžeme vrátit hodnotu přímo ONCLICK=”return false”. Kotvy mohou být na úrovni dokumentu přepsány zpracováním události dokumentu onclick.

Obrázky a obrázkové mapy jsou v Internet Exploreru 4.0 plně programovatelné. Dnes můžeme změnit atribut SRC a zněmit velikost obrázku a z obrázkové mapy Area upravovat, přidávat a odstraňovat. Model objektu umožňuje, aby nové obrázky byly do pozadí zaváděny asynchronně, zatímco uživatel pracuje se stránkou.

Jedna  nejběžnější technika pro animaci obrázku je změna obrázku při vstupu myší na prvek nebo když myš prvek opustí. Toto vytvoříme pomocí událostí onmouseover a onmouseout:

Sekvence obrázku

Pro změny obrázku může být namísto uživatelsky generovaných událostí využit časovač událostí. Dynam. HTML zjednodušuje vytvoření sekvenceru obrázků, který obrázky v daném čase mění. Obrázky mohou být pomocí vzláštního konstruktéru obrázku předem zavedeny a atribut SRC prvku IMIG může být dynamicky změněn.

Internet Explorer 4.0 podporuje konstrukci nového obrázku pro zavádění v pozadí a využívá při tom operátor new jako doplněk metody createElement. Tento operátor je podporován proto, aby byla zajištěna kompatibilita s implementacemi JavaScriptu Netscape Navigatoru. Operátor new je technika vytváření nových prvků, která je jazykově nezávislá. Příklad:

NextImage = document.createElement(”IMIG”); může to být také zapsáno následujícím způsobem: nextImage = newImage();

Mapy obrázků

HTML přináší dva typy map obrázků: mapy na straně serveru a mapy na straně klienta. Mapa na straně serveru je určena pouhým přidáním atributu ISMAP k obrázku a vytvořením souboru mapy obrázku na serveru. Mapy obrázku na straně klienta využívá prvek Map a jejich výhodou oproti mapám na straně serveru je, že nevyžadují opakovaný přístup na server.

Mapy obrázků a události

Mapu můžeme umístit kamkoli do dokumentu. Protože může více obrázků sdílet jedinou mapu obrázku, umožňuje model objektu dynam. HTML při spuštění událostí mezi obrázkem a jeho mapou vztah. Když dojde ke spuštění událostí v mapě obrázku, přijímá událost prvek Area, následován prvkem Map a prvkem IMG, na který uživatel klepnul. Potom, když událost přijme obrázek, pokračuje probublávání událostí přes rodičovské prvky obrázku. Tudíž mohou být sdíleny jediná mapa obrázku a události, nebo v závislosti na okolnostech, může obrázek sám přepsat nebo přidat své vlastní chování do mapy obrázku. Prvky, které ve zdroji HTML obsahují mapu obrázku, nesmí nikdy přijímat události, které pocházejí z mapy obrázku.

Zpřístupnění mapy

Vlastnost prvku IMG useMap obsahuje název spojené mapy obrázku, která má předponu znak #. Odstraněním předpony # z vlastnosti useMap můžeme mapu zpřístupnit. Vlastnost useMap je v režimu čtení/zápis, což umožňuje, aby mapy obrázků s ním byly dynamicky spojeny.

Function getMap(elImage) {
//Zajistíme, aby pro daný obrázek byla zadána mapa.
if (null !=elImage.useMap) {
//Odstraní předponu # ze záložky.
var strMap = elImage.useMap.substring(1);
//Vrací prvek se zadaným názvem
return document.all[strMap];
}
else
return null; }

Zpřístupnění prvků Area

Dynamické HTML obsahuje prvky Area ve sbírkách: Links, All, Areas v prvku Map. Proto, aby bylo možno atributy prvku Area dynamicky upravit, je mohou skripty zpřístupnit kterýmkoliv z těchto přístupů. Prvek Area má atribut Href, který obsahuje Url, a ten obsahuje stejné vlastnosti, obsahující části Url, jaké mají objekty location a anchor.

Sbírka areas nabízí novou funkci, která novým prvkům Area umožňuje, aby byly k mapě obrázku přidány nebo z ní odstaněny. Sbírka Areas má metody add a remove. Metoda add používá prvek Area, vytvořený metodou createElement, a přidává jej ke sbírce areas. Metoda remove se používá k odstranění existujícího prvku Area z mapy.

Object může mít vlastnosti, metody a události, které mohou být použity ve skriptech stejným způsobem, jako to provádějí jeho vlastní členové.

Konflikty vlastností

Konflikt může vzniknout mezi členy objektu a členy generického prvku Object. Např. obsahuje-li objekt vlastnost ID, bude tato vlastnost kolidovat s vlastností ID, která se vyskytuje v prvku Object. Když k takové kolizi dojde, odkazování vlastnosti ID ukazuje na verzi prvku, nikoli objektu. Při odkazování verze objektu vlastnosti ID mají všechny prvky vlastnost object. Tato vlastnost vrací přístup ke vloženým členům objektu.

Document.all.mujObject.id //Vlastnost id prvku HTML.

Document.all.mujObject.object.id //Vlastnost id vloženého prvku.

Objekt může spouštět své vlastní události. Můžeme provázat ovladač tak, ady událost používala syntaxi <SCRIPT FOR= EVENT= > nebo mechanizmus nezávislý na jazyku, ale nepoužívala atribut v tagu prvku.

Tabulky obsahují řádky, každá řádka obsahuje libovolný počet buněk. Dynamické HTML používá v tabulkách vlastní model objektu, který zajišťuje snadný přístup k podřízeným řádkám tabulky.

Tento objekt zajišťuje přístup ke třem různým částem tabulky: THhead, TBody a TFoot. Tabulka může mít jenom jeden prvek THead a Tfoot, ale libovolný počet prvků TBody. Proto model objektu obsahuje jedinou vlastnost tHead a tFoot a sbírku tBodies.

CreateTHead(), CreateTFoot(), CreateCaption()Vytváří a vrací určitou část, pokud tato část neexistuje.

DeleteTHead() Pokud v tabulce daná část existuje, vymaže z tabulky tuto určenou část a její řádky.

InsertRows([index]) Vkládá do tabulky řádek před daný index. Není-li zadán index, bude řádka přidána na konec tabulky.

DeleteTFoot(),DeleteCaption(),DeleteRow(index) Odstraňují z tabulky určité části.

Sbírky rows a cells

Objekt table obsahuje vztahy mezi řádky a buňkkami tabulky. Sbírka rows v objektech tHead, tBody a tFoot obsahuje prvky TR v jejich odpovídajících částech. Každá řádka následně přináší sbírku cells, která odkazuje v řádce prvky TD a TH. Vlastnost Id prvku můřeme využít pro její přímé provázání ve sbírce rows nebo cells.

<TABLE ID=”mojeTabulka”>
<THEAD>
<TR ID=”hlavicka”><TH>Město</TH><TH>Stát</TH>
</THEAD>
<TBODY>
<TR><TD>Praha</TD><TD>Č.Republika</TD></TR>
<TR><TD>Brno</TD><TD>Č.Republika</TD></TR>
</TBODY>
</TABLE>

V tomto příkladě sbírka rows tabulky mojeTabulka obsahuje tři řádky. Vlastnost parentElement jednotlivé řádky může být použita pro zjištění, zda se řádka nachází uvnitř prvku TBody nebo THead.

document.all.mojeTabulka.rows.length // 3
document.all.mojeTabulka.THead.rows.length // 1
document.all.mojeTabulka.rows[0].parentElement.tagName
// THead
document.all.mojeTabulka.rows[1].parentElement.tagName
// TBody

Pozici kterékoliv řádky v tabulce můžeme snadno zjistit, vlastnost sourceIndex představuje umístění prvku v dokumentu. Vlastnost rowIndex představuje index řádky v celé tabulce. Vlastnost selectionRowIndex představuje index řádky v části.

Každá řádka rovněž nabízí pomocí sbírky cells přístup ke svým buňkám. Buňky do řádky přidávají a odstraňují metody insertCell a deleteCell. Tyto metody pracují jako metody insertRow a deleteRow. Příklad ukazuje způsob přístupu a zpracování buněk v předchozí tabulce:

document.all.mojeTabulka.rows[0].cells.length // 2 buňky

document.all.header.cells.length //buňky, přístupné pomocí ID

document.all.header.deleteCells(0)//odstraní první buňku v řádce hlavičky

Formuláře v dokumentu jsou odhalovány pomocí sbírky all a sbírky forms. Následující program demonstruje několik cest, jak zpřístupnit prvky Form pomocí modelu objektu (komentáře popisují hlášení, která budou zobrazovány v dialogových oknech Alert):

<HTML>
<HEAD>
<TITLE>Formuláře v modelu objektu</TITLE>
</HEAD>
<BODY>
<FORM NAME=”form1”>
</FORM>
<FORM NAME=”form2”>
</FORM>
<SCRIPT LANGUAGE=”JavaScript”>
alert(document.forms.lenght); // 2
alert(document.forms[0].name); // form1
alert(document.forms.form2.name); // form2
alert(document.form1.name); // form1
alert(document.all.form2.name); // form2
alert(document.forms[”form1”].name); // form1
</SCRIPT>
</BODY>
</HTML>

Můžeme také použít sbírku elements, která umožňuje přístup ke každému ovládacímu prvku, který ve formuláři existuje (jako sbírka forms).

Document.forms[0].lenght // Počet prvků na prvním formuláři.

Documnet.forms[0].elements[2] //Zpřístupní třetí vnitřní ovládací prvek ve formuláři.

Prvek Marquee podporuje všechny standardní události myši a klávesnice. Všechny prvky obsažené v Marquee rovněž pokračují ve spoštění individuálních událostí.

Metody má prvek dvě, pro spuštění a zastavení animace: start a stop. Použitím těchto metod vytvoříme program, který umožní, aby uživatel zastavil marquee stisknutím a uvolněním tlačítka myši, když se myš nachází v prvku.

<HTML>
<HEAD>
<TITLE>Metody prvku Marqee</TITLE>
</HEAD>
<BODY>
<MARQUEE TITLE=”Pro zastavení podržte stisknuté tlačítko myši.”
onMouseDown="this.stop();" onMouseUp="this.start()";>
<H1>Test</H1>
<P>Klepnutím na tlačítko myši a jeho podržení jako stisknuté zastaví rolování.</P>
<INPUT TYPE=button VALUE=”Demo button” onClick="alert('zmáčknuto');">
</MARQUEE>
</BODY>
</HTML>

Vytvoříme stránku, kde se barva odkazu změní z modré na černou vždy, když bude myš nad odkazem.

Abychom nemuseli předělávat celý dokument a u každého odkazu psát obsluhu události, využijeme další objekt z objektové hierarchie. Objekt window.event.srcElement odpovídá elementu, ke kterému se váže aktuálně zpracovávaná událost.

Události vyvolávající zvýraznění odkazů nastavíme pro celý dokument u elementu BODY. V obsluze události si pak zkontrolujeme, zda element, nad kterým je myš, je odkaz (A). Pokud ano, odkaz zvýrazníme, případně mu vrátíme původní barvu. V dokumentu pak můžeme mít odkazů kolik chceme, barevně zvýrazňovat se budou všechny.

IE 4.0 podporuje tři druhy zdrojů světla: rovnoměrný (Ambient), bodový (Point) a kuželový (Cone). Zdroje světla nelze definovat přímo jako parametry filtru, musí se přidat až přímo ve skriptu voláním metody addAmbient, addCone nebo addPoint. Nejjednoduší je přidání rovnoměrného zdroje světla:

addAmbient(R, G, B, intenzita)

Parametry R, G a B určují intenzitu základních složek barvy světla. Mohou nabývat hodnot od 0 do 255. Celková intenzita světelného zdroje je určena pomocí posledního celočíselného parametru.

addCone(x1, y1, z1, x2, x2, R, G, B, intenzita, úhel)

Souřadnice (x1, y1, z1) udávají prostorové souřadnice zdroje světla, který svítí do bodu (x2, y2, 0). úhel určuje vrcholový úhel vrhnutého kuželu světla. Ostatní parametry mají stejný význam jako u rovnoměrného zdroje světla.

addPoint(x, y, z, R, G, B, intenzita)

Po přidání světel můžeme měnit jejich polohu pomocí metody:

moveLight(číslo_světla, x, y, z, true)

<HTML>
<HEAD>
<TITLE>světelné zdroje</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { color: white;
background-color: black;
text-align: center }
#napis { position: relative;
width: 700px;
height: 80px;
font: bold 60px Arial;
filter: Light() }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var MinX=0,
MaxX=700,
X=0,
Y=40,
Step=10,
id;

function Move()
{
// Přesun zdroje světla
document.all.napis.filters.Light.moveLight(0, X, Y, 0, true);
// Aktualizace
X += Step;
if (X >= MaxX) {
Step =-Step;
};
if (X <= MinX) {
Step = -Step;
};
}
function Init()
{
document.all.napis.filters.Light.addCone((MinX+MaxX)/2, Y, 100, X, Y,255, 255, 255, 100, 20); // Kuželový zdroj světla
document.all.napis.filters.Light.addAmbient(0, 0, 127, 100); // Rovnoměrný zdroj světla
id = setInterval("Move()", 100); // Aktivace pohybu
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Init()">
<DIV ID=napis>Světelný zdoj</DIV>
</BODY>
</HTML>

Následující příklad zobrazí vlnící text, pomocí VBScript. Je tu použito jiné volání metody ONLOAD okna prohlížeče, není to volání v tagu BODY, ale je použita vlastní procedura, v jejím těle je nastaven časovač. Je mu předán název procedury, která má být opakovaně vykonávaná, a dále časový údaj.

<HTML>
<HEAD>
<TITLE>Vlnění</TITLE>
</HEAD>
<BODY>
<DIV ID=vl_text STYLE="height: 70; width: 500; color: red; font-size: 48pt; font-weight: bold; filter: Wave (Add=0, Freq=2, LightStrength=0, Phase=0, Strength=6">
Vlnici se text</DIV>
<SCRIPT LANGUAGE="VBScript">
<!--
Public typ_vlneni
typ_vlneni=0
Sub vlneni()
typ_vlneni=(typ_vlneni+10) mod 100
vl_text.filters(0).phase=typ_vlneni
End Sub
Sub window_onload()
timerID=window.setInterval ("vlneni()",30)
End Sub
-->
</SCRIPT>

</BODY>

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.

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.

<HTML>
  <HEAD>
    <TITLE>Titulek stránky</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
          HREF="http://style.com/super" TITLE="Super styl">
    <STYLE TYPE="text/css">
      @import url(http://style.com/zakladni);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Nadpis je krásně modrý</H1>
    <P STYLE="color: green">Paragraf je zelený.
  </BODY>
</HTML>

První dva způsoby pracují se stylem uloženým v separátním souboru. Tento soubor se stylem lze k dokumentu připojit buď použitím elementu LINK s odpovídajícími atributy nebo pomocí příkazu @import v samotné definici stylu.

Styl může být definován i přímo v dokumentu mezi tagy <STYLE> a </STYLE>. Za pozornost stojí atribut TYPE. Pomocí něj určujeme druh použitého stylového jazyka. V budoucnu možná vzniknou i jiné stylové jazyky a proto bychom měli tento atribut používat k určení použitého druhu stylů. Pro styly CSS se používá MIME typ text/css.

Poslední možností je definice stylu pouze pro jeden konkrétní element. Toho lze dosáhnout použitím atributu STYLE, který můžeme použít u všech elementů. Tento způsob však poněkud odporuje samotné filosofii stylů - míchá totiž obsah dokumentu s jeho grafickou prezentací.

H1, H2, H3 { color: blue }

H1 { font-weight: bold;
     font-size: 12pt;
     line-height: 14pt;
     font-family: sans-serif;
     font-variant: normal;
     font-style: normal }

H1 { font: bold 12pt/14pt sans-serif }

V první ukázce stylu jsme barvu elementu H1 nastavili na modrou. Co se stane, když uvnitř elementu H1 použijeme například element pro zvýraznění?

<H1>Tato kapitola <EM>je</EM> důležitější než ostatní</H1>

Pokud jsme stylem neurčili barvu elementu EM, slovo "je" bude zobrazeno modře. Tuto barvu zdědí z nadřazeného elementu H1, který je modrý. Většina vlastností se dědí podobně jako barva.

Pokud chceme nastavit nějakou vlastnost jako základní pro celý dokument, můžeme použít deklaraci se selektorem BODY.

BODY { color: black;
       background-color: white }

Zatím jsme si ukázali, jak nastavit vzhled určitého elementu pro celý dokument společně. Někdy však potřebujeme stejný element zobrazit v různých výskytech rozdílně. Proto můžeme u každého elementu, který patří do těla dokumentu BODY, určit jeho třídu pomocí atributu CLASS. Na jméno třídy definované tímto atributem se samozřejmě můžeme odkazovat i v definici stylu. Dejme tomu, že naše stránka obsahuje poznámky, které jsou zapisovány následujícím způsobem:

<DIV CLASS=poznamka>
...tady je text poznámky...
</DIV>

DIV.poznamka  { font-size: smaller;
               margin-left: 2em;
               margin-right: 2em }

Jako selektor můžeme použít i samotný název třídy. Pak deklarace platí pro všechny elementy, kterým je atributem CLASS přiřazena daná třída.

.poznamka	 { font-size: smaller;
            margin-left: 2em;
            margin-right: 2em }
	

Použití tagu <DIV> způsobí zalomení textu a text elementu pokračuje až na další řádce. Pokud chceme třídu přiřadit nějakému textu, který je součástí odstavce, použijeme k jeho značení element SPAN společně s atributem CLASS. SPAN je nový element, který byl do HTML přidán právě kvůli stylům.

Identifikátor elementu jako selektor

Pro použití se styly bylo HTML rozšířeno ještě o jeden atribut. U každého elementu můžeme použít atribut ID. Ten slouží k definici jedinečného jména elementu v rámci dokumentu. Na takto pojmenované elementy jednak můžeme vytvářet odkazy (v URL použijeme fragment) a jednak pro ně lze ve stylu uvést zvláštní deklaraci.

#L027 { letter-spacing: 1pt }
H1#L027 { letter-spacing: 2pt }

První deklarace vyhoví všem elementům, jejichž atribut ID je nastaven na hodnotu L027. Např.:

<P ID=L027>Odstavec prostrkaného textu

Druhá deklarace stylu se použije pouze v případech, kdy je ID=L027 použito u elementu pro nadpis první úrovně.

Poznámka: Vidíme, že pomocí této konstrukce můžeme nastavit styl pro každý element zvlášť. Tomu bychom se však měli vyhnout -- styl by měl být jednotný pro všechny elementy. Pokud potřebujeme u nějakého elementu rozlišit několik jeho různých významů, můžeme použít rozlišení pomocí tříd (atribut CLASS).

Kontextové selektory

To, že se vlastnosti ve stylech dědí, nám při vytváření stylů ušetří mnoho práce. Místo pracného nastavování všech vlastností, stačí nastavit jejich základní hodnoty a poté pouze vyjmenovat výjimky. Pro nastavování výjimek je velice výhodné použít kontextové selektory. Kontextový selektor může vypadat třeba takto: H1 EM. Vyhovuje všem elementům EM, které jsou uvnitř elementu H1. Uvedenou vlastnost můžeme elegantně použít pro nastavení menšího písma pro položky hlouběji vnořených seznamů:

LI OL, LI UL { font-size: smaller }

V kontextových selektorech můžeme kromě elementů používat i třídy (CLASS), názvy elementů (ID) a jejich kombinace:

.preface BLOCKQUOTE { font-style: italic }
#x81a CODE { color: yellow }

V definici stylu můžeme používat komentáře, které se zapisují mezi dvojici znaků /* a */.

EM { color: red } // všechna zvýraznění budou červená 

Výše popsaný způsob práce se selektory nám dovoluje mnoho. Existují však některé speciální případy, které je potřeba ošetřit samostatně. Pro tyto účely slouží speciální selektory. Jejich specialita spočívá v tom, že se v HTML stránce nikde neobjeví. V HTML zápisu stránky jim neodpovídá žádný element. Jsou pouze myšleně doplněny prohlížečem na potřebná místa.

A:link          { color: blue }   // nenavštívený odkaz 
A:visited       { color: red }    // navštívený odkaz 
A:active        { color: yellow } // aktivní odkaz 

Pomocí pseudoelementů můžeme dosáhnout velice mocných grafických efektů. Bohužel je zatím většina prohlížečů nepodporuje. Pseudoelementy existují dva first-line a first-letter a slouží k nastavení vlastností první řádky resp. prvního písmene textu v daném elementu. Následující deklarace nám umožní používat odstavce třídy iniciala (<P CLASS=iniciala>), které budou obsahovat iniciálu. Tj. jejich první písmeno bude zvětšené a zasazené do textu.

P.iniciala:first-letter { font-size: 300%; float: left }

Tato skupina vlastností slouží pro určení použitého druhu písma. Asi nejvýraznějším rysem, odlišujícím jednotlivé typy písma, je rodina písma.

font-family Požívá se k nastavení rodiny písma.

BODY { font-family: Arial, Helvetica, sans-serif }

Prohlížeč se pro zobrazení stránky pokusí použít písmo Arial. Pokud písmo s tímto názvem nebude k dispozici, použije se písmo Helvetica. Pokud ani to není k dispozici, použije se libovolné bezpatkové písmo dostupné v systému. Toto chování zajišťuje právě poslední hodnota sans-serif. Jedná se o tzv. obecnou rodinu písma. Obecná rodina neurčuje konkrétní font, ale pouze jeho základní vlastnosti. Pokud tedy prohlížeč nemá k dispozici písmo uvedené v seznamu, použije to, které svými parametry odpovídá obecnému písmu. Přehled pěti obecných rodin písem, které můžeme použít, uvádí tabulka:

font-style Touto vlastností ovlivníme styl písma.
normal normální písmo
italic kurzíva
oblique skloněné písmo

POZNÁMKA: Kurzíva a skloněné písmo nejsou stejné. Skloněné písmo vzniká pouhou geometrickou transformací normálního písma. Kurzíva je naopak jedinečný řez písma.

font-variant. Můžeme použít buď normální (normal) nebo kapitálky (small-caps).

Pokud tedy chceme, aby citace byly zobrazovány kapitálkami tak, jak to bylo obvyklé dříve v knižní sazbě, můžeme použít následující deklaraci:

CITE { font-variant: small-caps; font-style: normal }

Mezi nejznámější Tolkienova díla patří trilogie <CITE>Pán
prstenů</CITE>.

font-weight Tato vlastnost ovlivňuje duktus (sílu) písma.
bold tučné písmo
bolder o něco tučnější písmo než je běžné
lighter zvolí o něco světlejší písmo.

font-size Další vlastností písma je velikost.

Nejčastěji velikost nastavíme absolutně na nějaký rozměr (např. 12pt). Přehled délkových jednotek, které můžeme použít ve stylech je uveden v přehledu vlastností stylů.

Velikost písma lze zadat i relativně v procentech. Budeme-li chtít použít dvakrát větší písmo než je běžné, stačí použít konstrukci font-size: 200%. Pro použití většího písma, můžeme použít hodnotu larger. Pro menší písmo pak obdobně smaller.

K dispozici jsou i názvy pro jednotlivé velikosti. Uvedeme si je od nejmenší až po tu největší velikost: xx-small, x-small, small, medium, large, x-large, xx-large.

Vidíme, že při výběru písma máme k dispozici mnoho možností a že nastavení všech potřebných parametrů může být poměrně zdlouhavé. Práci si lze ušetřit použitím vlastnosti font.

Ta slouží k nastavení všech charakteristik písma jedinou deklarací. Následující krátká deklarace:

BLOCKQUOTE { font: bold italic 12pt/14pt "Times Roman", serif }

Je ekvivalentní mnohem delšímu zápisu:

BLOCKQUOTE { font-weight: bold;
    font-style: italic;
    font-size: 12pt;
    line-height: 14pt;
    font-family: "Times Roman", serif }

Celý souhrn všech výše popsaných vlastností písma lze zadat jediným zkratkovým příkazem font, s následující syntaxí:

Pomocí stylu lze samozřejmě určit i barvu elementu. K nastavení barvy slouží vlastnost color.

H1 { color: red }

Pokud nám nestačí předdefinované barvy, můžeme se namíchat vlastní ze základních barev (červené, modré a zelené). Používá se opět stejný způsob jako v HTML. Za hash-mark (#) uvedeme hexadecimálně zapsané intenzity tří složek. Pro oranžovou barvu můžeme použít zápis #FFC000.

background-color Pomocí této vlastnosti můžeme nastavit barvu pozadí pro každý element (transparent nastavuje průhledné pozadí).
Pokud vlastnost aplikujeme na element BODY, použije se pro celý dokument (má stejný účinek jako specifikování barvy pozadí pomocí atributu BGCOLOR u tagu <BODY>).

background-image K určení obrázku, který chceme mít na pozadí.
Jako hodnota se uvádí URL obrázku. Při zápisu URL však musíme použít poněkud nezvyklý funkcionální zápis:

url(http://www.server.cz/images/logo.gif)

Používat lze samozřejmě i relativní URL. Za základní se však považuje URL stylu. Pokud tedy není styl přímo zapsán ve stránce, musíme si uvědomit, kam přesně relativní URL ukazuje.
Pokud nastavíme obě vlastnosti background-color i background-image použije prohlížeč na pozadí obrázek. Pokud však bude obrázek z nějakých příčin nedostupný, bude mít pozadí barvu určenou vlastností background-color. Obě vlastnosti můžeme nastavit i najednou pomocí vlastnosti backround:

BODY { background: black url(/images/hvezdy.gif) }

Obrázek pozadí lze nastavit pro každý element zvlášť. Můžeme si tedy vytvořit např. styl, který použije pro tabulku zvláštní obrázek jako její podklad:

<HTML>
<HEAD>
	<TITLE>použití obrázku na pozadí</TITLE>
	<STYLE><!--
 	 .IDG { background-image: url(idglogo.gif);
         background-repeat: no-repeat;
         background-position: center center;
         font-weight: bold;
         font-family: Arial, sans-serif }
 	 .IDG TH { color: yellow;
         background-color: blue }
 	 .IDG TD { text-align: center }
--></STYLE>
</HEAD>
   <BODY>
     <TABLE CLASS=IDG BORDER=1 CELLPADDING=3>
       <TR><TH>Měsíc<TH>Čtenost Computerworldu
       <TR><TD>leden<TD>112 %
       <TR><TD>únor<TD>130 %
       <TR><TD>březen<TD>102 %
       <TR><TD>duben<TD>117 %
       <TR><TD>květen<TD>107 %
       <TR><TD>červen<TD>103 %
     </TABLE>
   </BODY>
</HTML>

Určují to hodnoty scroll a fixed. Kde hodnota scroll zabezpečí, že obrázek se roluje součastně s rolováním stránky. Hodnota fixed zaručí, že obrázek zůstává nehybně na pozadí a text stránky spolu s ostatními elementy rolují samostaně.

background-position Určuje přesné umístění obrázku.

Obrázek lze přesně umístit buď pomocí číselného zadání umístění (v procentech či délkových jednotkách), nebo hrubého umístění do rohů kombinacemi top/center/bottom, left/center/right.
Takovýto zápis znamená, že bod obrázku vzdálený 25% zleva a 16% shora od jeho levého horního rohu je se souladem se stejným bodem (25%, 16% vzdálenosti od levého horního rohu) oblasti. background-position: 25% 16%

Celkový souhrn všech vlastností barev lze zadat jediným zkratkovým příkazem, jako u písma:

background: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

5.4 Formátování textu

Mezi nejznámější atribut, kterým lze popsat formátování odstavce, je způsob zarovnání. K jeho určení slouží vlastnost:

text-align která může nabývat jedné ze čtyř hodnot:


left zarovnání na levý praporek
right zarovnání na pravý praporek
center centrování
justify zarovnání do bloku

Vidíme, že pomocí této vlastnosti můžeme efektivně řídit způsob zarovnání, který bychom v klasickém HTML museli u každého odstavce nastavit zvlášť pomocí atributu ALIGN.

line-height Je další důležitou vlastností a určuje velikost řádkování.

Můžeme ji zadat buď absolutně (14pt) nebo relativně jako násobek či procento velikosti písma. Aby se text dobře četl, mělo by být řádkování alespoň o 2 body větší než písmo.

word-spacing Určuje mezeru mezi slovy.

Hodnotou normal určíme běžné hodnoty mezer, odpovídající obvykle šířce písmene “n”. Nebo zadáním hodnoty lze pak mezery měnit.

word-spacing: 0,5cm

vertical-align Tato vlastnost určuje jak se budou jednotlivé elementy na řádce vertikálně zarovnávat.

Z HTML již známe hodnoty top, bottom a middle. Zajímavou možností je sub a super. Ty zajistí, že element bude umístěn jako dolní resp. horní index.

Standardní hodnotou je baseline, která zajistí vyrovnání účaří elementu s účařím okolí. Při vertikálním zarovnání můžeme použít i procenta. Interpretují se jako posunutí elementu nahoru o poměrnou část výšky řádky. Pokud chceme, aby byl nějaký element posunut o čtvrtinu řádky dolů, použijeme deklaraci vertical-align: -25%.

text-decoration Jedná se o běžné řezy.

Hodnota none tyto efekty vypíná, underline text podtrhne, overline nadtrhne, linethrough přeškrtne a blink zapříčiní blikání.

text-indent Umožňuje nastavit velikost odstavcové zarážky (tj. o kolik bude první řádka odstavce odsazena).

Můžeme použít buď absolutní určení délky nebo relativní jako procento z šířky nadřazeného elementu (tím je běžně šířka okna prohlížeče).

text-transform Slouží k zadávání verzálky, kapilárky a mínusky.

Parametr capitalize převádí na kapilárky, uppercase na verzálky a lowecase na mínusky (malá písmena).

letter-spacing Slouží k tomu pokud potřebujeme nějaký text zvýraznit p r o s t r k á n í m, použijeme tuto vlastnost která udává délku mezery, která se vloží mezi jednotlivé písmena.

 

5.5 Formátování a vlastnosti rámečku

Abychom správně pochopili všechny vlastnosti, které ovlivňují formátování stránky, musíme se seznámit s formátovacím modelem, který je v CSS používán. V tomto modelu je výsledkem zobrazení každého elementu jeden nebo několik obdélníkových boxů. Všechny boxy se skládají ze samotného obsahu elementu. Kromě toho mohou obsahovat vnitřní okraj, rámeček a vnější okraj (viz obr. 3).

Vlastnosti rámečku

margin Slouží k nastavení okraje rámečku .
margin-top Řídí místo nad textem.
margin-right Řídí místo vpravo od textu.
margin-bottom Řídí místo pod textem.
margin-left Řídí místo vlevo od textu.

Čtyři za sebou následující hodnoty nastavují velikost okraje postupně pro místo nad rámečkem, vpravo od něj, pod ním a vlevo.

padding Řídí velikost volného prostoru okolo elementu.

Implicitně rámeček nepřesahuje ani o milimetr obdelník opsaný bloku textu (lze jej však zvětšit nebo pomocí záporných hodnot zmenšit).

padding-top Řídí velikost rámečku nahoře.
padding -right Řídí velikost rámečku vpravo od textu.
padding -bottom Řídí velikost rámečku dole pod textem.
padding -left Řídí velikost rámečku vlevo od textu.
padding: 15pt 15pt 15pt 15pt Okolo textu je všude rozšířený rámeček o patnáctibodovou šířku.

Vlastní rámeček je v normálním případě neviditelný (má nulovou tloušťku). Pomocí vlastnosti border můžeme zadat jeho tloušťku a tím ho zviditelnit.

border-top-width Řídí tloušťku rámečku nad elementem.
border-bottom-width Řídí tloušťku rámečku pod elementem.
border-left-width Řídí tloušťku rámečku vlevo.
border-right-width Řídí tloušťku rámečku vpravo.

Implicitní šířka je nulová, zadáme-li jinou hodnotu, je rámeček rozšiřován vždy vně elementu, takže do něj nikdy nezasáhne. Tloušťka se zadává buď číselně, nebo jedním z vyhrazených slov: thin je tenký rámeček, medium středně široký, thick široký.

 

border-color Nastavení barvy rámečku.

border-style Nastavení stylu rámečku.

Styl rámečku můžeme nastavit na hodnoty: none žádný rámeček, solid plný, double dvojitý, dotted tečkovaný, dashed čárkovaný, groove prostorový žlábek, ridge prostorový vystouplý rámeček, inset vykreslí napodobeninu osvětlení zapuštěného prostorového rámečku, outset vykreslí napodobeninu osvětlení vystouplého prostorového rámečku

Mnoho z výše uvedených vlastností lze nastavit jedinou deklarací pro všechny čtyři strany (horní, pravá, dolní a levá). Počet hodnot přiřazených takovéto souhrnné vlastnosti může být od jedné do čtyř. Použijeme-li pouze jednu hodnotu, bude platit pro všechny čtyři strany. Při použití dvou hodnot bude první platit pro horní a dolní stranu a druhá pro levou a pravou stranu. Při použití tří hodnot budou postupně odpovídat horní, pravé a dolní straně. Pro levou stranu bude použita stejná hodnota jako pro pravou. Př.:

BODY { margin: 1em 2em }  BODY { margin: 1em 2emem  }

je ekvivalentní s

BODY { margin-top: 1em;    BODY { margin-top: 1em;
       margin-bottom: 1em;     margin-bottom: 3em;
       margin-right: 2em;      margin-right: 2em;
       margin-left: 2em }      margin-left: 2em }

 

5.6 Umístění elementů

width Nastavení šířky elementu (jako jsou obrázky a aplety).

height Nastavení výšky elementu (jako jsou obrázky a aplety).

float Pomocí této vlastnosti můžeme z elementu udělat plovoucí objekt.

To znamená, že pak bude obtékán okolním textem zleva či zprava, tato vlastnost odpovídá nastavení atributu ALIGN u obrázků na hodnotu LEFT nebo RIGHT.

clear Vlastnost která určuje, zda se element zobrazí až po skončení všech plovoucích objektů. Můžeme si vybrat, zda se bude čekat na skončení všech objektů (hodnota both) nebo jen na skončení objektů vpravo (right) či vlevo (left).

Následující krátký styl umístí všechny obrázky jako plovoucí objekty vlevo. Všechny nadpisy první a druhé úrovně budou vždy začínat až pod obrázky.

IMG     { float: left }
H1, H2  { clear: both }

 

5.7 Klasifikace elementů

Zde máme dva druhy vlastností. První slouží k určení druhu elementu a způsobu jeho zobrazení. Do druhé skupiny patří vlastnosti, které určují druh zobrazení seznamů.

Pomocí vlastnosti display můžeme změnit druh elementu. Styly rozdělují všechny elementy do tří skupin:

• Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1 a P).

• Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádné zalomení řádek (např. STRONG).

• Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT).

Z blokového elementu (hodnota block) tak můžeme udělat třeba inline element (hodnota inline). Tato možnost v praxi asi uplatnění nenajde. Užitečná je však hodnota:

none Která způsobí nezobrazování daného elementu. Chceme-li tedy, aby se v dokumentu nezobrazovaly obrázky, můžeme použít:

IMG {display: none }

list-style-type Pomocí této vlastnosti si vybíráme způsob odrážek a jejich číslování. Na výběr máme stejné možnosti, které nám nabízí atribut TYPE v HTML u seznamů.

list-style-image Slouží ke specifikování URL obrázku, který se použije místo odrážky.

UL LI {list-style-image: url(sipka.gif) }

Pokud není obrázek z nějakého důvodu k dispozici, použije se odrážka nastavená pomocí list-style-type.

list-style-position Určuje pozici odrážky vůči položce seznamu (viz obr. 3).

list-style Vlastnost odrážek můžeme nastavit najednou pomocí této vlastnosti

list-style: disc outside url(sipka.gif)

Příklad použití stylu, jehož definice je uložena v separátním souboru. Tento způsob práce se styly je výhodný tehdy, když chceme, aby více dokumentů mělo stejný vzhled. Svůj styl si tak můžeme vytvořit a používat ho ve všech stránkách.

Styl uložíme do souboru music.css:

BODY { background: silver url(noty.gif) } 

.logo { 
    color: pink;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 21pt;
    text-align: center;
    width: 100px;
    float: right;
    margin-right: 20px;
    border: 5px ridge red }

.amp { font-size: 45pt }

.pop { letter-spacing: 5pt }

.logo HR { 
    color: white;
    width: 90% }

.disco { 
    color: white;
    font-size: 8pt;
    text-transform: uppercase;
    margin: 0px;
    border-width: 0px;
    padding: 0px }

.verse { 
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif }

.author { 
    font: bold 20pt Script, Zapf-Chancery, cursive }

H1 { 
    text-transform: lowercase;
    font-family: Arial Black, sans-serif;
    font-weight: 900 }

Styl ke stránce připojíme pomocí elementu LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Použití stylů</TITLE>
<LINK REL=StyleSheet TYPE="text/css"
      HREF="music.css">
</HEAD>

<BODY>

<DIV CLASS=logo>
HOUSE<BR>
<SPAN CLASS=amp>&amp;</SPAN><BR>
<SPAN CLASS=pop>DANCE</SPAN>
<HR>
<SPAN CLASS=disco>Diskografie</SPAN>
</DIV>

<H1>DVA ZPŮSOBY HUDBY </H1>

<SPAN CLASS=author>od Ian Anderson</SPAN>

<PRE CLASS=verse>
Tyto dva způsoby hudby 
jsou na první posleh stejné 
...
...
Zase někdy příště.</PRE>

</BODY>
</HTML>


 


5.8 Dynamické styly

V Internet Exploreru dynamické styly upravují styl dokumentu definovaný CSS tím, že nám umožní v každém prvku definovat vloženou vlastnost style, zapínat a vypínat všechny globální a propojené styly listů a přidávat a měnit pravidla pro existující styly listů.

Například styl prvku může být při pohybu myši přes prvek změněn, jak ukázka znázorňuje:
<H1 onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='';">
Nějaký text
</H1>
 



Tento prvek pracuje tak, že zpřístupní vložený styl prvku H1 a vlastnosti 

BackgroundColor přiřadí novou hodnotu.

Následující ukázka umožňuje přepínání mezi různými náhledy stejných dat. Tato technika je užitečná pro zajištění několika úrovní detailu, ve kterém zobrazuje podřízená data bez požadavku zavedení více stránek:

<HTML>
<HEAD>
<TITLE>Více náhledů</TITLE>
<STYLE ID="all" TYPE="text/css">
#headOnly {display:none}
#allText {color:red; cursor:default}
</STYLE>
<STYLE ID="headers" TYPE="text/css" DISABLED>
#allText {display:none}
#headOnly {color:navy; cursor:default}
DIV {display:none}
</STYLE>

</HEAD>
<BODY>
<H1>Demonstrace více náhledů</H1>
<P ID="allText"
ONCLICK="document.styleSheets['headers'].
disabled = false; document.styleSheets['all']. disabled = true;">
Zobrazuje celou verzi dokumentu. Abyste přepnuly
náhledy, klepněte na tento odstavec.</P>
<P ID="headOnly" ONCLICK="document.styleSheets['headers'].
disabled=true; document.styleSheets['all'].disabled =false;">
Zobrazuje pouze hlavičky dokumentů. Abyste přepnuli mezi náhledy, klepněte na tento odstavec.</P>

<H2>Více náhledů</H2>
<DIV>Pomocí modelu objektu CSS můžeme nabídnout více náhledů dat.</DIV>
<H2>Výměna dat</H2>
<DIV>Vyměňovaná data můžeme rovněž zobrazit.</DIV>
</BODY>
</HTML>

6. CSS2 Kaskádovací styly – druhá verze

 

Již od března 1998 je k dispozici CSS2, druhá verze kaskádovacích stylů. Ale jejich podpory se nedočkáme dříve než v pátých verzích obou prohlížečů. Nová verze přinesla:

• Řada atributů má nyní nové hodnoty k použití, například u atributu font: je k dispozici hodnota icon, která znamená, že je použita ta velikost písma, která je v daném nastavení operačního systému použita pro text u ikon.
• Texty mohou obsahovat efekt stínu.
• Místo ručičky, která se objeví po přejetí myší nad odkazem, může být i jiný druh kurzoru.
• Při umístění kurzoru nad text lze automaticky docílit jeho změny.
• Styly nyní umí řídit práci s tabulkami.
• Lze definovat různé vzhledy stran v různých oblastech použití.

6.1 Nové funkce

Různé typy médií

Parametr @media vypisuje typy médií jako seznam oddělený čárkami, který určuje různé typy vlastností stránky pro různé typy médií.

@media print {
BODY {font-size: 5pt}
}
@media screen {
BODY {font-size: 10pt}
}

Znamená to že základní text je tištěn pětibodovým písmem, ale zobrazen písmem desetibodovým.

CSS2 umožňují v jednom stylu definovat některé vlastnosti odlišně pro různá výstupní zařízení. Podporovány jsou následující typy výstupních zařízeni:

hlasové syntetizátory
on-line zobrazovače braillova pisma
tiskárny braillova písma
malé obrazovky (PDA)
tiskárny
slide pro zpětné projektory
obrazovky
znakové terminály
televizní obrazovky

Kromě nejběžnější potřeby odlišit způsob zobrazení na obrazovce od tisku, je kladen velký důraz na usnadněni výstupu pro uživatele s různými postiženími a na podporu zařízení s menší rozlišovací schopnosti (např. WebTV).

Typ media nemusí být určen jen v kaskádovém stylu. Při připojovaní stylu k HTML dokumentu nyní můžeme určit typ media, pro který je styl určen. Prohlížeč sám zvolí vhodný styl podle toho, zda chceme dokument zobrazit na obrazovce nebo např. vytisknout.

 

Podpora medií se stránkovaným výstupem

Při tisku HTML dokumentu musí prohlížeč rozdělit výstup do několika stránek. Tento úkol vypadá na první pohled jednoduše, ale v praxi přináší mnoho problémů. Největším problémem je pravě nalezeni vhodného místa pro zalomeni strany. Určitě se vám někdy stalo, že se při tisku webovské stránky objevil stránkový zlom uprostřed obrázku, tabulky nebo bezprostředně za nadpisem.

Některé z těchto problémů pomáhají prohlížeči vyřešit právě nové vlastnosti přidané do CSS2. U každého elementu nyní můžeme specifikovat, zda se před či za ním stránka musí, může nebo nesmí zalomit. Obvykle je tedy takové nastavení, které zakáže zalomení strany za všemi nadpisy a naopak jej před všemi nadpisy umožní.

Dále můžeme nastavit minimální počet řádku jednoho odstavce na konci nebo na začátku stránky. Tím lze zamezit vzniku sirotku a vdov při tisku.

Můžeme nastavit i velikost a orientaci papíru, oboustranný tisk, okraje zvlášť pro první stranu a pro všechny levé a pravé strany.

 

Vlastnosti pro hlasové syntetizátory

Hlasové syntetizátory nejsou zatím zcela běžným doplňkem každého počítače, ale CSS2 pro ně již nabízí celkem dobrou podporu. Pro každý element můžeme nastavit mnoho vlastností. Např.: velikost prodlev, sílu a tón hlasu, druh hlasu (muž, žena, dítě), hlasitost, směr odkud hlas přichází atd.

Nastavit lze například i to, zda se bude obsah elementu číst nebo hláskovat. To je velmi užitečné, zvlášť když v HTML 4.0 existuji elementy pravě pro označení zkratek.

 

Tabulky

CSS2 nově přidávají vlastnosti pro formátování tabulek. Tato část návrhu však ještě není ve finální podobě.

Vlastnosti pro řízeni pozice

Vlastnosti pro řízení pozice umožňují pro každý element určit jeho přesnou polohu na obrazovce. Tento rys již dnes podporují prohlížeče Netscape Communicator a Internet Explorer, protože je to jeden ze základů dynamického HTML.

Kromě pozice lze určit i pořadí elementu, které se překrývají, a tím ovlivňovat jejich viditelnost.

 

Selektory

Selektor slouží v kaskádových stylech k určení elementu, na které se budou daná pravidla stylu aplikovat. V nove verzi stylu byly možnosti selektoru podstatně rozšířeny.

CSS1 umožňovaly použití kontextově selektoru X Y, který platnost pravidla omezil na elementy Y obsažené v elementu X. Nyní můžeme použít i selektor X > Y, který pravidlo aplikuje na elementy Y obsažené pouze přímo v elementu X.

Nový pseudoelement X:first-child, aplikuje pravidlo pouze na první element obsazený v elementu X.

Pokud chceme, aby se pravidlo aplikovalo na element Y, který bezprostředně následuje za elementem X, můžeme použít nový selektor X + Y.

Novinkou jsou selektory, které pracují na základě obsahu atributu. Selektoru X[z] vyhovují všechny elementy X, které mají na nějakou hodnotu nastaven atribut z. Pokud chceme pravidlo aplikovat pouze pro určitou hodnotu w atributu z, použijeme selektor X[z=w]. Poslední nová varianta selektoru má tvar X[z~=w]. Oproti předchozí variantě nyní stačí, aby hodnota atributu obsahovala slovo w.

 

Automatické číslování

Návrh počítá s tím, že ve stylu půjde definovat několik čítačů. Citace pak můžeme využít např. pro automatické číslovaní nadpisu, obrázku nebo tabulek. Kromě samotného obsahu citace můžeme před nebo za element připojit libovolný text (např. Tabulka č.).

 

6.2 Práce s písmy

V CSS2 jsou možné čtyři metody, kterými uživatel “přijde” k písmu:

• Původní metoda CSS1, uživatel musí mít písmo stejného jména, jaké je uvedeno ve stylu.
• Metodou inteligentního hledání, kde je hledáno písmo, které je nejpodobnější zadanému, nikoli však jménem, ale skutečným vzhledem (vykreslováním).
• Metoda syntézy: je nalezeno nejpodobnější písmo, ale je navíc při vykreslování přizpůsobeno tak, aby nejvíce odpovídalo zejména v klíčových vlastnostech, jako jsou metriky písma.
• Načtení písma: pokud písmo není nalezeno nebo podobné písmo nevyhovuje, je jeho definice načtena z Internetu.

CSS2 navíc umožní tzv. Progresivní vykreslování: písmo není nalezeno, je tedy provedeno inteligentní hledání a syntéza, poté se písmo zobrazí na obrazovce. Součastně se definice načítá z webu a instaluje, a po ukončení tohoto procesu je zobrazené písmo nahrazeno pravým. Veškeré definice písmem se nyní řídí pravidlem @font-face. Syntaxe:

@font-face {<font-description>}

a <font-description> má syntaxi:

deskriptor: hodnota

deskriptor: hodnota

...

deskriptor: hodnota

Příklad:

@font-face { font-family: ”Bodoni Black”;

src: url (http://www.fonts.com/Bodoni) }

V tomto příkladě existují jen dva deskriptory – první sděluje, jak se písmo jmenuje, druhý pak uvádí, odkud lze načíst jeho plnou definici. Pokud je toto písmo již nainstalováno, je zkontrolováno, zda jeho parametry odpovídají písmu, které se má načíst z webu. Pokud odpovídá je použito písmo nainstalované.

Deskriptory	Hodnoty	Popis
font-family	<family-name>|<generic-family>	Popisuje vlastní jméno písma.
font-style	All | [normal | italic | oblique]	Popisuje řez písma.
font-variant	Normal | smal-caps	Popisuje zda je varianta s kapilárkami či bez nich.
font-weight	All | normal | bolt | 100..900	Tučnost písma, přibyla hodnota all-povolena shoda s veškerými písmy.
font-stretch	All | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded	Popisuje rozšířené nebo naopak zúžené řezy písma.
font-size	All | [<lenght>[,[<lenght>]] ]	Velikost písma, jen absolutní hodnoty.
unicode-range	<urange>+	Implicitní hodnota: U+0-7FFFFFFF. Národní sady znaků, které písmo podporuje.
units-per-em	<číslo>	Délková jednotka písma (kolik jednotek se vejde do čtverčíku em).
src	[<uri> [format(<string>[,<string>]] | <font-face-name ]	Seznam odkazů na soubor/y obsahující definici písma, jak lokálně (na lokálním počítači), tak na webu. Formát<string> určuje specifikace písem různých druhů a různých platforem.
panose	[<number>] {10}	Deskriptor pro shodování písma podle Panose.
stemv	<number>	Vertikální šířka písma.
stemh	<number>	horizontální šířka písma.
slope	<number>	Základní úhel sklonu písma od svislé osy.
cap-height	<number>	Výška verzálky.
x-height	<number>	Výška mínusky.
ascent	<number>	Max. výška znaku bez diakritiky.
descent	<number>	Max. výška písma pod základnou, bez diakritiky.

 

Pozicování elementů

Důležitá vlastnost dispaly má nyní dva nové parametry:

run-in Znamená, že se daný element stane tzv. inline elementem, bezprostředně vloženým před element následující. Např. bez zalomení řádku:

<H4>Nadpis</H4>

<P>Text dalšího odstavce</P>

Nadpis je oddělen od dalšího řádku novým odstavcem. Zatím co:

<H4 style=”display:run-in>Nadpis</H4>

<P>Další text</P>

Příklad se zobrazí následovně: Nadpis Další text

compact Má podobný účinek jako <DL compact> a znamená, že se element umístí do okraje (marginu) následujícího elementu. Snáze se pak vytvářejí výčty, kde je vlevo pojem a vpravo od něj na stejném řádku vysvětlení.

Další novinkou je pozicování elementů (hlavně u tabulek). Není nutné navrhovat vzhled tabulky a pak plnit její jednotlivá nadefinované políčka, pouze se jednotlivé elementy oddělí tagem <DIV> a přidají se další pravidla pro určení oddělovacích linek atd.

Je také možné vytvářet stránky se vzhledem rámů, ale bez použití FRAMES. Potom stránka nemá žádné definované rámce. Pokud se tato vlastnost zažije pravděpodobně se bude upouštět od klasických rámů.

V CSS2 jsou tři možná schémata pozicování elementů:

Normální, tj. bolokové, inline, relativní + dva nové typy compact a run-in.

Obtékající: element je umístěn doprava nebo doleva, jak je to jen možné, ostatní elementy jej obtékají.

Absolutní: element je vyňat z obtékání a ovlivňování ostatních elementů, je mu přiřazeno pevné místo na stránce.

K určení pozicování jsou vlastnosti position a float.

position Má hodnoty static: znamená normální pozicování, tato hodnota je implicitní (nemusí se zadávat). Hodnota relative: element je posunutý vzhledem ke své normální pozici o hodnotu offsetu. Hodnota absolute: element je vyjmut z normálního stránkového obtékání a jeho pozice na stránce je přesně určena. Hodnota fixed: je podobná jako absolute, ale spíše se využívá zejména u alternativních médií.

float Aplikuje se na všechny elementy, kromě těch které mají pozici typu absolute. Má hodnoty left: umísťuje plovoucí objekt na levý okraj, kde je obtékán. Right: umísťuje na pravou stranu. None: určuje volné obtékání. Inherited: znamená zdědění vlastnosti z nadřízeného (otcovského) elementu, tato vlastnost je všeobecná tudíž použitelná i jinde.

Výčet všech nových a změněných elementů v CSS2 (syntaxe a popis je rozveden na stránkách organizace www.w3c.org):

Tetx-shadow

font-size-adjust
cursor
content
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
position
direction
top
right
botom
left
z-index
min-width
max-width
min-height
max-height
overflow
clip
visibly
page-break-before
page-break-after
orphans
widows
size
marks
row-span
column-span
border-collapsa
table-laylout
cell-spacing
caption-side
speak-header-cell
volume
speak
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-date
speak-numeral
speak-time
:hover
:left
:right
:before
:after
@media
@font-face
@page
all properties
inherit
display
run-in, compact, table, inline-table, table-row-group, table-colum-group, table-header-group, table-footer-group, table-row, table-cell, table-caption
font
caption, icon, menu, messagebox, smallcaption, statusbar
<color> values
activeborder, activecaption, appworkspace, background, button-face, button-highlight, buttontext, captiontext, graytext, highlight, highlighttext, inactiveborder, inactivecaption, inforbackground, infotext, menu, menutext, scrollbar, threeddarkshadow, threedface, threedhighlight, threedlightshadow, threedshadow, window, windowframe, windoutext

 

 

7. WAP ( Wireless Application Protocol)

 

7.1 Co to je Wap

Digitální bezdrátová zařízení jako jsou mobilní telefony se v průběhu let stala velmi populárními. Technicky řečeno, mobilní telefony již nejsou pouze telefony - staly se komunikačními zařízeními schopnými spouštět aplikace a komunikovat s dalšími zařízeními a aplikacemi přes bezdrátové sítě.

WAP jako standard specifikuje dva zásadní elementy bezdátové komunikace a to end-to-end aplikační protokol a aplikační prostředí založené na prohlížeči. Aplikační protokol je vrstva komunikačního protokolu, který je obsažen v každém WAP zařízení. Na straně sítě obsahuje serverové komponenty, implementující další konec protokolu, který je schopen komunikace s jakýmkoliv WAP zařízením. Často serverové komponenty vstupují do role brány routující požadavky WAP zařízení na aplikační server. Brána může být fyzicky posazena buď do telefonní sítě nebo počítačové sítě, vytvářejíce tím most mezi oběmi sítěmi.

WAP Protocol má čtyři vrstvy:

• "Základní" vrstvu
• Transakčí vrstvu
• Bezpečnostní vrstvu
• Datagram vrstvu

Jak funguje WAP?

1. Uživatel zmáčkne na WAP telefonu tlačítko s přiřazeným URL.
2. WAP telefon pošle URL dotaz na WAP gateway používající WAP protokol
3. WAP brána generuje HTTP dotaz na specifikovanou URL a posílá jí web serveru
4. Web server obdrží HTTP požadavek a rozhodne co odešle. Pokud URL specifikuje statický soubor, web server odešle soubor a přidá k němu HTTP hlavičku. Pokud URL specifikuje CGI nebo jiný skript aplikace, web server spustí aplikaci.
5. Web server vrátí WML stránku s přidanou HTTP hlavičkou nebo WML výstupem z CGI nebo skriptu jiné aplikace.
6. WAP brána ověří HTTP hlavičku a WML obsah a zakóduje je do binární podoby.Brána potom vytvoří WAP odpověď obsahující WML a pošle jí zpět do WAP telefonu.
7. WAP telefon obdrží WAP odpověď, kterou zpracuje a zobrazí na displeji první kartu z WML stránky uživateli.

 

WAP síťová struktura.

WAPová aplikace se skládá z aplikačního serveru a klientské aplikace, kterou brána stahuje z aplikačního serveru do WAP zařízení pro použití. Standardní aplikační prostředí je potřeba pro běh stejné klientské aplikace na jiném WAP zařízení. WAP poskytuje standard skládající se z browseru a skriptu. Prohlížeč je velice podobný webovému prohlížeči a dokáže zpracovávat obsah popsaný ve Wireless Markup Languge (WML je jazyk používaný pro zápis WAPu). Prohlížeč také obsahuje vestavěný skript pro běh aplikací ve WAP zařízení. Tyto aplikace jsou psány ve skriptovém jazyce zvaném WMLScript. Jako dodatek k programovacímu jazyku jako takovému, skript také implementuje množinu knihoven, které umožňují aplikaci přístup k různým službám pro WAP zařízení. WML a WMLScript jsou vytvořeny pro bezdrátové použití, narrowband sítě a jsou binárně kódovány pro optimální efektivitu přenosu.

7.2 Požadavky na provozování WAPu

 

Webserver

Především si vystačíte s úplně normálním webserverem, jako je Apache na Linuxu nebo IIS na NT a další podobné webservery. Vše, co potřebujete, je změnit MIME typy pro určité koncovky souborů - zde doporučím manuál, pokud nevíte, jak na to. Pokud to s WAPem myslíte vážně, je také vhodné asociovat nějaký soubor typu main.wml nebo index.wml jako implicitní soubor, který webserver vrací, pokud zadáte URL adresáře - tedy například wap.mobil.cz servíruje vlastně wap.mobil.cz/main.wml - i zde se držte manuálu ke svému webserveru.

To znamená, že nepotřebujete speciální instalaci ani speciální software proto, abyste mohli provozovat WAP - dokonce si jako WAP ready můžete nastavit pouze nějaké adresáře.

Nastavení MIME:

text/vnd.wap.wml wml
text/vnd.wap.wmlscript wmls
image/vnd.wap.wbmp wbmp
application/vnd.wap.wmlc wmlc
application/vnd.wap.wmlscriptc wmlsc

 

WapGateway neboli wapbránu

Funkce WapGatewaye je takováto: přes ni proudí požadavky do internetu a zpět na mobilní telefon, na ní jsou přeloženy do binárního tvaru a do mobilu odeslány, nebo z binárního tvaru přeloženy do normálního requestu a poslány na příslušnou adresu.

Gateway o všech těchto procesech vede záznamy a pro mobilní telefon je skutečnou branou do mobilního internetu, bez ní WAP nemůže fungovat

(v ČR ji již provozuje EuroTel, RadioMobil ji chystá).

Gateway především použijeme pokud potřebujete zabezpečení po celé trase přenosu, tedy pokud vytváříte či provozujete aplikace takovéto zabezpečení vyžadující.

 

Vývojové nástroje

Pro tvorbu můžeme použít český program WAPtor. Tento program lze doporučit pro rychlé skycování WML kódu, umožňuje jeho snadné zadávání i preview. Preview není ale dostatečný pro scripty, takže na jemné doladění složitějších projektů používajících scripty doporučíme ještě Ericsson WapIDE nebo Nokia WAP Toolkit.

 

7.3 Práce s WAPem

Struktura WML souboru (WML je jazyk používaný pro zápis WAPu) je téměř podobná, jako u HTML.

U WML je ale třeba si pozor dávat na syntaktiku - především všechny WML značky jsou malými písmeny a pokud je napíšete jinak, nefungují, neboť velikost písmen je rozlišovacím znakem. Pokud ve WML souboru uděláte syntaktickou chybu, mobilní telefon jej nezobrazí, ale nahlásí chybu, stejně tak velké vývojové nástroje. Dokud není dokument bez chyb, není zobrazen.

Většina značek je stejná nebo podobná, jako v HTML Také většina značek je párových, tedy mají značku označující konec a začátek. Nepárové značky se pak zapisují s lomítkem na konci, aby bylo jasné, že jsou nepárové.

 

 

7.3.1 Desky a karty

Základní jednotkou WML je karta, která specifikuje jednoduchou interakci mezi WAP zařízením a uživatelem. Karty jsou slučovány do desek. Což jsou nejmenší jednotky WML, které web server umí poslat na WAP zařízení. V okamžiku kdy WAP zařízení obdrží desku, aktivuje automaticky první kartu, kterou tato deska obsahuje.

Obr. 1. Slučování karet do desek

Následující příklad je jednoduchá WML deska obsahující jednu kartu:

První tři řádky definují úvod dokumentu, který identifikuje XML. Tento úvod musí obsahovat začátek každé WML desky, to znamená před každým <WML>. V Nokia SDK se používá interní Document Type Definition což vám umožňuje vynechávat tyto hlavičky při tvorbě WML stránek v SDKčku, je lepší tuto hlavičku vždy zadávat. Čtvrtá řádka definuje hlavičku WML desky. Všechny WML desky musí začínat <WML> a končit s </WML>. Následující řádky definují kartu - začátek a konec karty s obsahem pro zobrazení uživateli. Poznámka: NAME atributy nemohou obsahovat mezery např. Test stranka, ale musí být ve tvaru Test_stranka. Poslední řádek obsahuje zakončení desky. WAP zařízení považuje vše mezi začátkem a zakončením desky jako jednu WML desku. Když si uživatel natáhne desku např. do telefonu zobrazí se mu takto.

Obr. 2. Zobrazení desky na dipleji telefonu

  Komentář WML umožňuje vložit komentář, který WAP zařízení při zpracovávání WML ignoruje. <!-- komentář -- > Komentář je určen pro potřeby autora WML stránek a nezobrazuje se uživateli.

7.3.2 Fonty

Document Type Definition (DTD) soubor definuje všechny elementy použité ve WML. Používá se při WML kódování. Cesta k vlastnímu DTD souboru musí být definována v úvodu WML desky. Všechna WAP zařízení nemusí být schopna rozeznat všechny elementy a atributy obsažené v DTD souboru, v takovém případě, bude zařízení fungovat tak jako by element nebyl přítomen. DTD soubor může být umístěn buď někde na síti nebo ho můžete mít uložen lokálně pro rychlejší přístup k němu. Příklad DTD naleznete na http://www.wapforum.org/DTD/wml.xml WML specifikace definuje 6 různých typů písma: Bold, Italic, Podtržené, Velké, Malé a Silné fonty. Příklad použití těchto fontů:
<B>Bold text</B>
<I>Italic text</I>
<U>Podtrzeny text</U>
<BIG>Text s velkym fontem</BIG>
<SMALL>Text s malym fontem</SMALL>
<STRONG>Silny</STRONG>

 

7.3.3 Zarovnání a horizontální pravidla

BR Odkazuje na začátek nového řádku a zlom řádku s parametry zarovnání pro novou řádku. WML má dva módy zalomení: WRAP- zalomení NOWRAP- nezalomení Ve WRAP módu jakákoliv mezera v textu znamená zalomení řádku. Pro předejití nežádoucímu lámání řádků a prázdnému místu by se mělo používat &npsb (non-breaking-space). Pokud je použit NOWRAP mód znamená to , že by mělo být možno zobrazovat text horizontálně. Příklad:
<BR ALIGN="LEFT/RIGHT/CENTER" MODE="WRAP/NOWRAP"/>

Příklad zarovnání textu na střed řádku s WRAP módem:
<BR ALIGN="CENTER" MODE="WRAP"/>

Atributy:
ALIGN definuje mód zarovnání textu pro řádek. LEFT zarovnání text vlevo je vždy nastaveno jako výchozí.
MODE definuje mód zalomení řádky pro následující textový řádek. WRAP mód je nastaven jako výchozí.
TAB Používá se pro vytvoření sloupců textu. TAB a BR je možné vytvořit jednoduché "tabulky" rozdělením dat do sloupců a řádek. Každý řádek je ukončen BR nebo jiným elementem ukončujícím řádku. Je také možné definovat vzhled textu v "buňce" informací o zarovnání přidanou jako atribut k TAB. Příklad:
<TAB ALIGN="LEFT/RIGHT/CENTER"/>

Atribut ALIGN specifikuje zarovnání textu v sloupci, výchozí hodnota je LEFT. Příklad:

<WML>
<CARD NAME="první" TITLE="Pisma">
<B>Bold</B><BR/>
<I> Italic</I><BR/>
<U>Podtrzene</U><BR/>
<BIG>Velke</BIG><BR ALIGN="RIGHT"/>
<SMALL>Male</SMALL><BR/>
Jedna <TAB/> Dva <BR/>
1 <TAB/> 2 <BR/>
A <TAB/> B <BR/>
</CARD>
</WML>

 

7.3.4 Odkazy – URL (Uniform Resource Locator)

WML používá stejnou architekturu hyperlinků, odkazů, jako Hypertext Markup Language (HTML) a World Wide Web (WWW). Obsah je pojmenován použitím URL a a opět získán přes standardní protokol, který má Hypertext Transport Protocol (HTTP), jako je Wireless Session Protocol (WSP).

WML podporuje absolutní a relativní URL. To znamená, že autor je schopen odkazovat na jiný WML dokument nebo zdroj obsahu bez definování celé HTTP cesty požadavku.

Například:

<GO URL=../welcome.wml>

Tento odkaz odkazuje na WML deck welcome.wml v hlavním adresáři daného decku (desky).

WML adoptovalo způsob HTML pojmenování polohy v rámci zdroje. WML používá fragmentové kotvy (Anchors) pro identifikaci individuální karty v rámci WML decku. To je dáno zahrnutím fragmentového identifikátoru (#) a jména karty na konec odkazované URL. Následující příklad indikuje odkaz na kartu pojmenovanou second_card v deku nazvaném main.wml.

<GO URL=main.wml#second_card/>

Příklad odkazů:

Na takto vytvořené odkazy lze z mobilního telefonu poklepat (systém poklepání se liší od telefonu) - a budete přeneseni na zadané URL.

 

7.4 Dynamické stránky na displeji telefonu

Standard technologie WAP částečně ošetřuje i vývoj dynamických stránek prostřednictvím WMLScriptu. Ten má však dost omezené možnosti, zejména co se týče styku s jakýmkoliv okolím (např. práce s poštou, s databázemi atd.).

Dynamické stránky pro WAP využívají tedy skriptů PHP. Proto je třeba pro tvorbu dynamických stránek pro Wap ovládat programování skriptovacího jazyka PHP. Ve většině případů by ani pro nepříliš znalé jazyka PHP neměl být problém pochopit některé z programátorských tipů.

PHP se přirozeně nepoužívá pouze v kombinaci s WML, ale zejména tedy při tvorbě běžných WWW stránek. Nejjednodušším příkladem je zřejmě generování stránky WML pomocí PHP.

Zjednodušeně řečeno, v praxi se to realizuje tak, že přikážeme kompilátoru PHP, aby příkazem pro výpis (typicky "echo") vypsal zdrojový text ve WML, který je pak stravitelný WAP-browserem.

Aby však WAP-browser věděl, že soubor končící příponou .php3 obsahuje přeci jen kód WML, je nutné jej na to upozornit na prvním řádku následující hlavičky:

<?
 // header("Content-type: text/vnd.wap.wml");
 echo("<?xml version=\"1.0\"?>\n");
 echo("<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML     1.1//EN\" \
"http://www.wapforum.org/DTD/wml_1.1.xml\">\n\n");
?>

Přesněji řečeno, že typem obsahu je přeci jen WML. Jak už bylo řečeno, příkaz "echo" slouží pro výstup na obrazovku (resp. displej). Další dva řádky tedy zajistí vytvoření standardní hlavičky WML souboru:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www.wapforum.org/DTD/wml_1.1.xml">
<!-- Source Generated by WML Deck Decoder -->

Není nutné i samotnou hlavičku generovat dynamicky pomocí PHP. Lze ji zapsat i standardně ve WML. Takto zapsaná však nesmí být uzavřena mezi znaky <? a ?>, které signalizují následující PHP kód.

Příklad: výpis několika řádků na displej a umístění odkazu pro přechod na jiné stránky:

<?
  header("Content-type: text/vnd.wap.wml");
  echo("<?xml version=\"1.0\"?>\n");
  echo("<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\" \
"http://www.wapforum.org/DTD/wml_1.1.xml\">\n");
?>

<wml>

<?
echo("<card id=\"jedinakarta\" title=\"Stranka\">\n");
    echo("<p>\n");
    echo("Vase prvni stranka\n");
    echo("<br/>\n");
    echo("Dynamicky obsah!!!\n");
    echo("<br/>");
    echo("Odkaz:\n");
    echo("<br/>\n");
    echo("<anchor>Mobil server
<go href=\"http://wap.mobil.cz\"/></anchor>\n");
?>

</p>
</card> 
</wml>

Operátor “\n” znamená že každý příkaz WML bude ve svém výsledku na samostatném řádku. A takto bude stránka vypadat na displeji:

Obr. 3. Výsledné zobrazení na displeji telefonu.

Ještě můžeme přidat i vzhled kódu WML po jeho vygenerování PHP kompilátorem:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www.wapforum.org/DTD/wml_1.1.xml">
<!-- Source Generated by WML Deck Decoder -->

<wml>
  <card id="jedinakarta" title="Stranka">
    <p>
       Vase prvni stranka 
      <br/>
       Dynamicky obsah!!! 
      <br/>
      Odkaz: 
      <br/>
      <anchor>Mobil server
	<go href="http://wap.mobil.cz"/></anchor>
    </p>
  </card>

</wml>

Co se týče příkazů jazyka PHP, zatím jsme použili pouze echo. Obecná definice příkazu echo je echo("něco"). Pokud však do uvozovek umístíme tag WML, který také obsahuje uvozovky, musíme nějak kompilátoru sdělit, které uvozovky patří k "echo" a které např. k "a href". Toho dosáhneme tak, že před uvozovky patřícím k tagům WML umístíme zpětné lomítko.

V našem příkladu jsme také použili tagy "wml" a "card id" , ty jsou vytvořeny dynamicky, k jejich uzavření už ale dochází standardním způsobem (bez použití PHP).

Hlavní výhody PHP se však projeví v okamžiku, kdy potřebujeme použít podmíněný výpis. Tzn. když se určitý např. řádek nebo odkaz má zobrazit pouze za předem definovaných podmínek.

 

Práce s proměnými

Na příkladu si ukážeme stránku, jejíž obsah je už skutečně dynamický.

Aby bylo předvedeno předávání hodnot proměnných mezi skripty, příklad bude obsahovat dvě stránky. Tady je první:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="zadaniudaju" title="Zadani udaju" newcontext="true">
<p>
Hodnota1: <input format="*N" name="cislo1" title="Hodnota1:"/>
Hodnota2: <input format="*N" name="cislo2" title="Hodnota2:"/>

Operace: <select name="operace" value="secti" title="Operace">
<option value="secti">Scitani</option>
<option value="odecti">Odecitani</option>
<option value="nasob">Nasobeni</option>
</select>
<br/>

<anchor>Proved<go href="http://127.0.0.1/sdil3skript.php3?
cislo1=$(cislo1)&amp;cislo2=$(cislo2)&amp;operace=$
operace)"/>
</anchor>
</p>
</card>
</wml>

Smyslem příkladu je zadat dvě čísla a vybrat operaci, která se nad nimi následně provede (tzn. sčítání, odčítání, násobení). První stránka je napsaná pomocí standardního WML a žádá uživatele o uvedené 3 vstupy. Na displeji se projeví následně:

Obr. 4. Výsledné zobrazení na displeji telefonu.

Odkaz pro provedení operace směřuje do skriptu kombinujícího WML a PHP, který vybranou operaci nad čísly provede a vypíše základní informace. V definici URL skriptu můžete také vidět, jak probíhá předání potřebných proměnných, aby byly na další stránce zadané hodnoty opět přístupné. Obecný tvar lze tedy zapsat jako:

cílovýskript?proměnná1=$(proměnná1).

Zde je výpis skriptu, do kterého směřuje odkaz (druhá stránka):

<?
  header("Content-type: text/vnd.wap.wml");
  echo("<?xml version=\"1.0\"?>\n");
  echo("<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\" \
"http://www.wapforum.org/DTD/wml_1.1.xml\">\n");
?>

<wml>
  <card id="vysledek" title="Vysledek">
  <p>
  <?
   $vysledek = 0;
   echo("Prvni hodnota: $cislo1\n");
   echo("<br/>\n");
   echo("Druha hodnota: $cislo2\n");
   echo("<br/>\n");
   if ($operace == 'secti') {
    $vysledek = $cislo1 + $cislo2;
    $vybrano = 'Scitani';
   } else if ($operace == 'odecti') {
    $vysledek = $cislo1 - $cislo2;
    $vybrano = 'Odecitani';
   } else {
    $vysledek = $cislo1 * $cislo2;
    $vybrano = 'Nasobeni';
   }	
 echo("Operace: $vybrano");
 echo("<br/>\n");
 echo("Vysledek: $vysledek\n");				
?>
</p>
</card> 
</wml>

Jak vidíme, tato stránka je už napsána z větší částí pomocí PHP. Jejím úkolem je vypsat zadaná čísla, vybranou operaci, tuto operaci provést a zobrazit výsledek. Na displeji to bude vypadat přibližně takto:

Obr. 5. Výsledné zobrazení na displeji telefonu.

Vzhledem k tomu, že WAP má být bohatým mobilním informačním zdrojem, musíme najít "místo", kde je informací (dat) nejvíc. Jsou to databáze.

Skriptovací jazyk PHP nabízí knihovny funkcí pro práci s hezkou řádkou databází (Microsoft SQL, Oracle, SyBase, MySQL a řada dalších). V našem příkladu demonstrujícím přístup do databáze z WAPových stránek využijeme produktu MySQL.

Tento výběr nemá žádný zvláštní důvod a význam. Pro využití jiných databází nahlédněte do manuálu k PHP pro nalezení funkcí spolupracujících s produkty jiných výrobců. Většinou mají velmi podobnou syntaxi.

Vycházíme ze situace, kdy máme vytvořenu databázi jmen. Přesněji řečeno, v této databázi máme vytvořenu tabulku pojmenovanou "nazvy", která má následující strukturu:

• prijmeni char(20)
• krestni char(20)

Úkolem pak bude vyhledat záznamy z tabulky odpovídající zadanému příjmení a následně zobrazit.

Nejprve vytvoříme zdrojový text úvodní stránky, která se táže na příjmení, podle kterého budou osoby vyhledávány:

<?
  header("Content-type: text/vnd.wap.wml");
  echo("<?xml version=\"1.0\"?>\n");
  echo("<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\" 
\"http://www.wapforum.org/DTD/wml_1.1.xml\">\n\n");
?>

<wml>

<card id="zadani" title="Zadani hledani" newcontext="true">
<p>
<?
echo("Zadej prijmeni: <input type=\"text\" name=\"klic\"/>\n");

echo("<anchor>Hledej zadani <go href=\
"sdil4skript.php3?klic=$(klic)\"/></anchor>\n");  
?>
</p>
</card> 
</wml>

Na displeji se zobrazí přibližně tímto způsobem:

Obr.6. Výsledné zobrazení na displeji telefonu.

Odkaz pro vyhledání záznamů předává následujícímu skriptu proměnnou obsahující příjmení jako kritérium pro vyhledávání. A zde je text vyhledávacího skriptu:

<?
  header("Content-type: text/vnd.wap.wml");
  echo("<?xml version=\"1.0\"?>\n");
  echo("<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\" 
\"http://www.wapforum.org/DTD/wml_1.1.xml\">\n\n");
?>

<wml>

<card id="vysledek" title="Nalezeno">
<p>
<?
$konexe=mysql_connect('localhost','root','');
$navrat=mysql_db_query('jmena','SELECT 
	krestni,prijmeni FROM nazvy',$konexe);

 echo("Vyhledavani dle: $klic");
 echo("<br/>\n");
 echo("Jmeno a prijmeni\n");
 echo("<br/>\n");
 echo("------------------\n");
 echo("<br/>\n");
  while (list($krestni,$prijmeni) = mysql_fetch_row($navrat)) {
	$prijmeni=trim($prijmeni);
 if ($prijmeni == $klic) 
  {
  echo("$krestni $prijmeni");
  echo("<br/>\n");
  }
 }

echo("-----------------\n");
echo("Konec vypisu\n");
?>

</p>
</card> 
</wml>

Pro pochopení funkcí umožňujících spojení s MySQL databází odkazuji do manuálu PHP. Stěžejní část skriptu je pak v cyklu while, kde dochází k procházení záznamů z tabulky jmen a jejich kontrole, zda se hledané příjmení s nimi shoduje (viz opět manuál PHP). Výsledkem pak může být např. následující výpis:

Obr. 7. Výsledné zobrazení na displeji telefonu.

TransWAP

Tato služba dokáže přinutit stránky napsané v jazyce HTML k zobrazení na WAPovém zařízení. Vše navíc probíhá bez nutnosti předchozího konvertování stránek z HTML do WML, popř. zásadnějších zásahů do HTML kódu.

Popis principů fungování:

• část HTML stránky, kterou chcete zobrazovat na WAPovém zařízení ohraničíte následujícími poznámkovými značkami: <!-- WAP_START --> a <!-- WAP_END -->
• stránku na WAPovém zařízení pak zobrazíte prostřednictvím URL: amaro.g-art.nl/wap/?u=adresavašíHTML

Skript běžící na výše uvedené URL dynamicky překonvertuje naši stránku v HTML a zašle zařízení vybavenému WAPem. HTML stránky navíc nebudou přidáním výše uvedených dvou poznámkových značek nijak ohroženy v jejich hlavní funkci - tedy zobrazování v běžném HTML browseru (neboť se jedná pouze o poznámky).

Skript má samozřejmě řadu omezení v tom smyslu, že přirozeně ne vše je schopen překonvertovat. Např. z HTML stránky převedeny grafika, reklamní bannery, čáry ap. nebudou zachovány, ale nebudou zachovány i hypertextové odkazy.

Takže konvertovací skript převede pouze holý text. Vzhledem k časové nenáročnosti takových úprav by jsme se mohli spokojit i s takovým výsledkem.

 

7.5 Budoucnost Wapu

Na březen příštího roku je oznámena verze WAP 1.2 - ta už toho bude mít více, až bude GPRS, budeme se moci těšit i na skutečná multimediální rozšíření. Zatím je limitem WAPu přenosová rychlost 9600 případně 14400 bps, dále malá monochromatická obrazovka a nedostatečná vstupní jednotka, tedy klávesnice a ne všechny mobilní telefony dnes podporují Wap.

S WAPem je to nyní podobné, jako s internetem a s WWW v jeho dřevních dobách - je to pomalé, graficky nepříliš rozvinutelné a ve zobrazovacích možnostech omezené specifiky jednotlivých přístrojů. Jenže s největší pravděpodobností se to chytí a rozvine.

 

8. Závěr

Dynamické HTML je jakousi vysokou školou vytváření stránek WWW. K tomu, aby jsme jej mohli plně používat, musíme mít poměrně hodně znalostí a celou řadu skušeností. Ovšem potom to, co budete s pomocí dHTML schopni uživatelům a návštěvníkům vašich stránek nabídnout, jistě za tu námahu stojí.

Dynamické HTML je forma publikování na webu, která se i nadále dynamicky vyvíjí. V současnosti nejde již jen o dynamickou změnu vzhledu webové stránky, ale též i o dynamickou změnu obsahu stránky. Tento problém již řeší jazyk XML (eXtensible Markup Language). XML pracuje s obsahem dokumentu, nikoliv s jeho formou. Jeho význam bude postupně sílit, a to jako zcela univerzální formát pro ukládání dat zcela nezávislých na prohlížeči. Dá se očekávat, že v blízké budoucnosti se HTML a XML budou vzájemě prolínat..

Praktická část

K diplomové práci jsou přiloženy diskety, na kterých je zpracovaná praktická ukázka webové stránky, která využívá dynamického HTML. Dále si je zde možno prohlédnout některé z příkladů uváděných v této práci, a mnoho dalších ukázek. Také uvádím komletní přehled vlastností CSS a kompletní přehled barev + jejich kódy.