OBSAH:


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

    1. Definování dokumentu HTML*

    2. Struktura a styl*

    3. Pravidla syntaxe HTML*

    4. Tagy a odkazy*

    5. Struktura stránky*

  4. 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*

  1. 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*

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

    2. Syntaxe parametrů v definici stylu*

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

    4. Barvy textu a pozadí*

    5. Formátování textu*

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

    7. Umístění elementů*

    8. Klasifikace elementů*

    9. Dynamické styly*

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

    1. Nové funkce*

    2. Práce s písmy*

  3. 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*

8. Závěr


1.Úvod

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.

 

2. Vytváření interaktivních stránek

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.

 

2.1 Definování dokumentu 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 je vystavěna v sadě sbírek prvků, styl je vystavěn v každém prvku a ve sbírce stylů stránek, a obsah je tvořen každým prvkem a objektem TextRange. Aby vytvořily chování dokumentu, zpracovávají skripty strukturu, styl a obsah jako odpověď na události.

2.2 Struktura a styl

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í.

Do poloviny roku 1996 byly styly v HTML ovládány zcela jednoduše pomocí tagů a stylistických atributů, jako je ALIGN. Za těchto podmínek HTML nebyl skutečným jazykem SGML, ve kterém je struktura a styl definován odděleně. V pravém jazyce SGML může mít dokument připojený list stylu, který definuje, jak jsou prvky struktury obnovovány. SGML pro definování listu stylu nabízí mnoho jazyků.

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:

STRONG {font-weight:bold}

Aby byla plně výhoda dynamického HTML, musí váš dokument správně oddělovat obsah a strukturu od prezentace. Dynamické HTML se snadněji používá a pracuje očekávaným způsobem s platnými dokumenty HTML.

2.3 Pravidla syntaxe HTML

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.

Textové soubory HTML využívají celé osmibitové ASCII sady. Lze tedy používat znaky národní abecedy, musíme ale brát ohled na kódování, které je různé na různých platformách – Macintosh, DOS, Windows, UNIX.

2.4 Tagy a odkazy

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 modrý</MODRY_TEXT>

Párové tagy lze vnořovat a dokonce překrývat:

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

2. Nepárové tagy – umísťují do stránky jediný element, který je svou podstatou nedělitelný. Jsou to např. elementy jako je pozadí, vodorovná linka nebo vložení obrázku. Popis daného elementu je vložen přímo mezi špičaté závorky:

<IMG SRC=”obrazek1.gif”>

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...).

2.5 Struktura stránky

Ve správné webové stránce, která plně vyhovuje dnes zřejmě nejběžnějšímu standartu HTML 3.2, by neměli chybět následující sekce:


<DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 3.2//EN”> ..........označení typu dokumentu
<HTML> ..........počátek textu ve formátu HTM
<HEAD> .........počátek hlavičky
<TITLE>Jméno dokumentu</TITLE>
<META NAME=”popis” CONTENT=”Obsah dokumentu”>
..........meta-informace
</HEAD> ..........konec hlavičky
<BODY> ..........počátek těla stránky

..........vlastní tělo stránky, zobrazovaný obsah

</BODY> ..........konec těla stránky
</HTML> ..........konec formátu HTML

 

 

3. Popis jazyka HTML 4.0

3.1 Nové vlastnosti HTML 4.0

Všechny prvky Frameset a IFrame, rozšíření tabulek a prvky Object a Script byly v Internet Exploreru 3.0 podporovány.

Internet Explorer 4.0 rozšířil předchozí verzi tím, že nabídl podporu i zbývajícím vlastnostem uvedeného seznamu.

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 .

3.2 Popis jazyka HTML 4.0

 

V nové verzi jazyka HTML 4.0 přibyli tyto nové tagy:

Q, INS, DEL, ACRONYM, LEGEND, LABEL, COLGROUP, BUTTON, FIELDSET

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

ISINDEX, APPLET, CENTER, FONT, BASEFONT, STRIKE, S, U, DIR, MENU

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%.

3.3 Argumenty použitelné všeobecně

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)

 

3.4 Označení verze HTML

Vždy na prvním řádku nového dokumentu by měl být tag:

<!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:


<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Draft//CZ">

- dokument je napsán jazykem HTML verze 4.0 a to v neúplné verzi tohoto jazyka

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Final//CZ">

- dokument je napsán jazykem HTML verze 4.0 a to ve finální, tedy končenou, verzi (podle slova Final).


V obou dvou případech si všimněme, že na konci je označení také jazyka, ve kterém je dokument napsán. To proto, aby mohl prohlížeč zobrazit příslušnou znakovou sadu.




3.5 Hlavní značky



<HTML></HTML>

-
počáteční/koncová značka HTML dokumentu

<HEAD></HEAD>

- identifikátory sekce záhlaví HTML dokumentu
Přibyl argument PROFILE se syntaxí:
PROFILE=URI
Určující umístění jednoho nebo více datových profilů (metasouborů). Element HEAD je nyní nepovinný.
Poznámka: W3C nahrazuje ve všech novějších doporučeních zkratku URL zkratkou URI (I=identifer), která je obecnější.


<META>

- slouží pro vyhledávací stroje v síti Internetu. Udáme co naše stránka obsahuje a podle toho ji vyhledávače zařadí. Základní syntaxe:

<META NAME=typ informace CONTENT=vlastní informace>

<
META HTTP-EQUIV = ”refresh” CONTENT = ”x”>
- občerství aktuální stránku každých x vteřin


<
META HTTP-EQUIV = ”refresh” CONTENT = ”x”; url=nasledujici.html>
- občerství aktuální stránku každých x vteřin


<
META NAME = ”keywords” CONTENT= ”x”>
- předává vyhledávacím strojům rozpoznávacích
<META> značku klíčová slova stránky (x)

<
META NAME = ”description” CONTENT= ”x”>
- předává vyhledávacím strojům rozpoznávacích <META> značku
obsahový popis stránky

Přibyly parametry CONTENT – informace o obsahu

SCHEME – schéma pro interpretování hodnoty obsahu
LANG – použitý jazyk
Př.

<META NAME=”keywords” LANG=”cz” CONTENT=”
počítače,
programy, prodejce>


<TITLE></TITLE>

- povinný element stránky, který identifikuje titulek

<BODY></BODY>

- identifikuje tělo nebo hlavní sekci HTML dokumentu

U tohoto elementu by se již neměli používat tyto argumenty: BACKGROUND, TEXT, VLINK, ALINK, LINK. Jsou označovány jako zastaralé. HTML 4.0 dává přednost stylům pro formátování textu, odkazů, vlastností pozadí atd. Příklad:



<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:

<BODY BACKGROUND=”url” BGCOLOR=”#xxxxxx” TEXT=”#xxxxxx” LINK”#xxxxxx” ALINK=”#xxxxxx” VLINK=”#xxxxxx” MARGINWIDTH=”0” MARGINHEIGHT=”0” LEFTMARGIN=”0” TOPMARGIM=”0”>


BACKGROUND=”url”
Specifikuje dlaždicový obrázek pozadí.
BGCOLOR=”#xxxxxx”
Specifikuje barvu pozadí stránky hexadecimální hodnotou (od ”#000000” do ”#FFFFFF”).
TEXT=”#xxxxxx”
Specifikuje barvu HTML textu uvnitř stránky.
LINK”#xxxxxx”
Specifikuje barvu HTML odkazu nebo okraje obrázkového odkazu uvnitř stránky.
ALINK=”#xxxxxx”
Specifikuje barvu aktivovaného HTML odkazu nebo okraje aktivovaného obrázkového odkazu uvnitř stránky.
VLINK=”#xxxxxx”
Specifikuje barvu navštíveného HTML odkazu nebo okraje navštíveného obrázkového odkazu uvnitř stránky.
MARGINWIDTH=”0” MARGINHEIGHT=”0”
Nastavuje levý a horní okraj stránky na 0 v Netscape 4.0 +.
LEFTMARGIN=”0” TOPMARGIM=”0”
Nastavuje levý a horní okraj stránky na 0 v Internet Exploreru.
Tag BODY je označován jako nepovinný, přibyly dva nové argumenty:

onload=něco

onunload=něco

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ě:

<LINK REL="stylesheet" TYPE="styly/css" HREF="main.css">

Tím říkáme prohlížeči, aby styly načetl ze souboru main.css, který se nachází ve stejném adresáři jako náš dokument. Pokud pak něco změníme v tomto souboru, změny se projeví i ve všech stránkách, které používají styly definované v tomto dokumentu.

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á.



<BASEFONT SIZE=”x”>

- nastavuje základní velikost písma od 1 do 7 (implicitní je 3) pro celou HTML stránku

<H></H>

- hlavička od 1 do 6 (jinými slovy <H1
></H1>, <H2></H2>, atd.)

<STRONG></STRONG>

- silně zvýrazněný text (podobný tučnému)


<B></B>

- tučný text


<I></I>

- kurzívní text

<U></U>

- podtržený text


<STRIKE></STRIKE>

- přeškrtnutý text


<SUB></SUB>

- text v provedení a úrovni dolního indexu

<SUP></SUP>

- text v provedení a úrovni horního indexu

<TT></TT>

- text písmem psacího stroje (s pevnou šířkou písma)

<CODE></CODE>

- text neproporcionálním písmem ( tagy SAMP, BD, TT, a VAR dělají ve většině případů totéž jako CODE)


<SMALL></SMALL>
- text lehce menším písmem než normální velikost


<BIG></BIG>

- text lehce větším písmem než normální velikost

<FONT SIZE=”x”>

- specifikuje velikost písma od 1 do 7

<
FONT FACE=”nazev fontu”>
- specifikuje název písma (jinými slovy Verdana, Arial, atd.)

<
FONT COLOR=”#xxxxxx”>
- specifikuje barvu písma hexadecimální hodnotou (jinými slovy #000000 až #FFFFFF)

<Q> </Q>

Tento nový tag se v ničem neliší od starého známého BLOCKQUOTE, který vyjadřuje citaci. Q jako quote – citovat. Přibyla jen nová syntaxe, která obsahuje adresu zdrojového dokumentu. Vypadá takto:


<Q cite="http
://www.citace.cz ">Zde je nějaká citace </Q>

<INS>

- do tagu INS uzavíráme ten text, který byl přidán jako pozdější úprava. Syntaxe je:


<INS DATETIME=datum_čas> …Vložená část dokumentu… </INS>

Datum a čas se vkládají tímto způsobem: RRRR-MM-DDThh:mm:ssTZD, což znamená: RRRR = rok, MM = měsíc, DD = den, hh = hodina, mm = minuta, ss = sekunda a TZD určuje časovou zónu. Písmeno "T" odděluje datum od času. Takže pro náš stát by to mohlo vypadat nějak takto:

1998-04-12T21:21:00-05:00
Znamená to: tento text byl vložen dne 12.března tohoto roku v 21. hodin a 21. minut. Časové pásmo je minus pět hodin od Greenwiche.

<DEL> </DEL>

- má úplně stejné parametry jako tag INS. Tento tag má sloužit k tomu, aby označil tu část textu, která byla z dokumentu vyjmuta. MSIE 4.0 tento text jenom přeškrtne.


<ACRONYM> </ACRONYM>

Používá se pro vyhledávací a indexovací centrály, ale i pro popis zkratky. Pokud se v dokument vyskytuje někde zkratka a možný čtenář neví o co jde, najede si myší na tuto zkratku a bublinková nápověda nebo ve stavové řádce (to podle toho, jak tento tag pojmou tvůrci prohlížečů) vám vysvětlí pojem této zkratky. Syntaxe vypadá takto:


<ACRONYM TITLE=vysvětlení_zkratky>..zkratka..</ACRONYM>


Použití v praxi by vypadala asi takto:

Díky <ACRONYM TITLE=eXtensible Markup Language”
>XML</ACRONYM> se autorům otevírají nové možnosti.

<ABBR> </ABBR>

- tento element je určen k podobnému použití jako ACRONYM, tj. K uvedení zkratek jako HTTP, WWW, atd.

3.7 Formátovací značky



<BLOCKQUOTE></ BLOCKQUOTE>

- odsazuje blok textu

<BR>

- vkládá zalomení řádku

<
BR CLEAR=left/right/all>
- vkládá pročišťující zalomení řádku


<CENTER></CENTER>

- centruje objekty

<DIV>

- člení stránku do lokálních sekcí


<
DIV ALIGN=left/center/all>
- zarovná data uvnitř DIV
sekce

<
DIV CLASS=”nazev tridy”>
- přiřazuje DIV sekci třídu CLASS


<HR>

- vkládá vodorovnou dělící čáru napříč stránky anebo uvnitř tabulkové datové buňky


<HR ALIGN=left/center/all>
- vkládá zarovnanou vodorovnou dělící čáru


<
HR SIZE=”x”>
- specifikuje tloušťku dělící čáry

<
HR WIDTH=”x”>
- specifikuje délku dělící čáry


<HR NOSHADE>
- vytváří plně černou dělící čáru


<NOBR>

- zakazuje zalamovat na hraně stránky


<P></P>

- vytváří nový odstavec


<
P ALIGN=left/center/all>
- zarovnává text odstavce

<PRE></PRE>

- přeformátovaný text (zachovává exaktní konce řádků a mezerování)

3.8 Značky pro odkazy

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:


<A HREF
=externí_odkaz NAME=intrení_odkaz TITLE=jméno
REL
=dop
ředný_odkaz REV=zpětný_odkaz URN=uniform_ resource_name METHODS=činnost TARGET=jméno_
cíle> Zobrazený text </A>

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ř:


Odkaz na <A HREF=”#strana8> stranu č.8</A>
...několik stran texu...
<A NAME=”#strana8”> </A>

(text pokračuje na osmé straně)


HREF=”url”
Odkazuje text nebo obrázek na url.
TARGET=”nazev ramu”
Odkazuje text nebo obrázek na url dovnitř rámu.
TARGET=”_blank”
Odkazuje text nebo obrázek na url dovnitř nového okna prohlížeče.
TARGET=”_self”
Uvnitř rámu odkazuje text nebo obrázek na url rámu, z něhož byl odkaz aktivován.
TARGET=”_parent”
Odkazuje text nebo obrázek na url dovnitř FRAMESET rodičovského dokumentu.
TARGET=”_top”
Uvnitř rámu vylučuje FRAMESET rodiče a odkazuje text nebo obrázek na url dovnitř vlastního okna prohlížeče.
TITLE=”Popis odkazu”
Uvádí alternativní název odkazu (pokud nad okazem podržíme kurzor myši objevý se popiska uvedená v TITLE).

Další atributy tagu A: REV, REL, URN a METHODS patří mezi méně používané. Ale přibyli i další atributy:

CHARSET=znaková_sada
Parametr určuje znakovou sadu, která bude použita při načítání stránky, která je určena odkazem.
ACCESSKEY=znak
Zkratková klávesa pro rychlý přístup k odkazu. Obsahem je jediný znak (rozlišujte malá a velká písmena!), jehož stisknutí vyvolá odkaz stejně jako klepnutí myší.

U systémů WINDOWS je nutné současně stisknout ještě klávesu ALT. Využití v praxi:

<A HREF="index.html" accesskey=i>
ZDE STISKNĚTE MYŠ PRO NÁVRAT NA ZAČÁTEK</A> a zmáčknout klávesovou zkratku ALT+I.

SHAPE=tvar
Při použití imagemap na straně klineta definuje tvar "citllivého" regionu.

Hodnoty jsou: default- definuje celý dostupný region

rect - definuje obdélník

circle – kruh

poly - určuje polygonální oblas. Přímo s tímto argumentem je svázán další argument, který definuje rozměry a souřadnice tohoto obdélníka:
COORDS=seznam_souřadnic
Pro každý druh shape je tento seznam jiný: pro obdélník jsou to souřadnice rohů v pořadí levý(x), horní(y), pravý(x), dolní(y). Pro kružnice je to střed(x), střed(y), velikost poloměru; pro polygon jsou to postupně souřadnice jeho rohů: x1, y1, x2, y2.

TABINDEX=číslo
Pořadí navigování mezi jednotlivými políčky ve formuláři pomocí klávesy TAB.

3.9 Obrázky

<IMG SRC=url” LOWSRC=”url” ALT=”alternativní_text” ALIGN=zarovnání WIDTH=”x” HEIGHT=”x” VSPACE=”x” HSPACE=x” BORDER=”x” USEMAP=”url” DYNSRC= ”jméno_videoklipu”>

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:

<MAP NAME=jméno mapy>

definice aktivních oblastí

</MAP>

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

<AREA HREF=”url” ALT=”popis odkazu”

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ů.

3.10 Seznamy



<DL></DL>

- zahajuje/ukončuje seznam definic

<DD></DD>

- zahajuje/ukončuje definici pojmu


<DT></DT>

- zahajuje/ukončuje definici termu


<OL></OL>

- zahajuje/ukončuje uspořádaný seznam


<
OL COMPACT></OL>
- vytváří kompaktní uspořádaný seznam


<
OL TYPE=A/a/I/i/1>
- vytváří uspořádaný seznam specifikovaný typem (A pro velká písmena, a pro malá písmena, I pro římské číslování, a 1 pro arabské číslování – implicitní)


<LI></LI>

- položka seznamu (implicitně odrážka je-li použita ve spojení s
<UL> a číslování, je-li použita ve spojení s <OL>

<
LI TYPE=A/a/I/i/1>
- řídí formát položky seznamu


<UL></UL>

- zahajuje/ukončuje neuspořádaný seznam


<
UL COMPACT></UL>
- vytváří kompaktní neuspořádaný seznam


<
UL TYPE=disc/circle/square></UL>
- specifikuje styl odrážky

 

3.11 Formulářové značky



<FORM ACTION=”url” METHOD=get/post></FORM>

- zahajuje/ukončuje a definuje parametry formuláře


<INPUT
TYPE=typ ALIGN=zarovnání CHECKED MAXLENGTH=délka NAME=jméno SIZE=velikost SRC=url TITLE=text VALUE=hodnota>
Tag INPUT vytváří elementy, na které uživatel přímo reaguje. INPUT je blokovým nepárovým tagem, který obsahuje veškeré informace v jediných závorkách.

TYPE=”text/password/checkbox/radio/submit/reset/image/hidden

Specifikuje vstupní pole formuláře jako text, heslo, pole, zaškrtávací, přepínač, odesílací tlačítko, nulovací tlačítko nebo grafické odesílací tlačítko a skryté pole.
NAME=”jméno”
Pojmeovává pole formuláře.
CHECKED
Specifikuje vybrané zaškrtávací políčko nebo zapnutý přepínač.
MAXLENGTH=délka
Určuje maximální počet znaků, který je možný do políčka zapsat.
SIZE=”x”
Specifikuje velikost políčka v počtu znaků.
VALUE=hodnota
Pro zobrazení implicitního textu v políčku.

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.


ALT=”popis”
Protože vstupní elementy jsou grafické je specifikovat atribut ALT, který je popisuje.
USEMAP="url"
Adresa imagemapy na straně klienta.
TABINDEX=číslo
Pořadí při přeskakování z pole na pole tabulátorem.
ONFOCUS=skript
Skript, který je spuštěn, když uživatel umístí kurzor do tohoto políčka.
ONBLUR=skript
Skript, který je spuštěn, když uživatel umístí kurzor mimo toto políčko.
ONSELECT=skript
Skript který je spuštěn, když uživatel zadá do vstupního políčka text.
ONCHANGE=skript
Skript, který je spuštěn, když uživatel změní implicitní hodnotu elementu.
ACCEPT=seznam
Seznam typů souborů podle MIME, které určují, které z nich lze načítat.

U každého tagu pracující s textem je možné požít i atributy ID, CLASS, LANG, STYLE a další

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á

Příklad:

<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.

<SELECT></SELECT>

- vytváří ve formuláři menu (roletku), můžeme použít tyto paramety:

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.

 

Prvek BUTTON

Je úplnou novinkou ve verzi HTML 4.0 a slouží k vytvoření tlačítka, které může být velmi rozsáhle formátováno. Jeho syntaxe je:

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


NAME=jméno
Jméno tohoto tlačítka, na které se odkazují řídící skripty. Nezbytné pro řízení práce tlačítka.
VALUE=hodnota
- Hodnota předávaná serveru, když je tlačítko stisknuto.
TYPE=button/submit/reset
Jeden ze tří druhů tlačítka:
submit
: předává veškeré vyplněné hodnoty formuláře serveru a (obvykle) ukončuje práci s tímto formulářem
reset
: nastaví implicitní hodnoty formuláře a nic směrem k serveru neodsílá
button
: pouze spouští zadaný skript
DISABLED
Tlačítko nelze použít, je zašedlé.
TABINDEX=číslo
Pořadí při navigování tabulátorem.
ONFOCUS=skript
Skript, který je spuštěn, když uživatel umístí kurzor do tohoto políčka.
ONBLUR=skript
Skript, který je spuštěn, když uživatel umístí kurzor mimo toto políčko.

Vlastní obsah tlačítka pak může tvořit cokoli: formátovaný text, i víceřádkový text, popřípadě i grafické elementy.


Elementy FIELDSET a LEGEND

Jsou použitelné pouze v HTML 4.0 +, a slouží k hezčímu uspořádání více vstupních formulářových prvků.


FIELDSET
Ohraničuje tyto prvky tenkou čárou
LEGEND
Vytvoří nadpis této skupinky a přeruší tenkou čáru tagu FIELDSET.

align=top/center/bottom/left/right

- určuje zarovnání nadpisu formulářových prvků


accesskey=klávesa

- klávesová zkratka, po jejímž stisku se daná oblast vstupních políček umístí do horního okraje okna

Příklad:

<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>

 

Element LABEL

Je to tag, který popisuje vstupní formulářová políčka (nejčastěji textová).

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>

Všimněme si, že vstupní tag INPUT obsahuje identifikátor (id="něco"), který se shoduje s atributem tagu LABEL.

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.

 

3.12 Tabulkové značky

 

<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>


ALIGN=left/center/right
Zarovnání tabuky vzhledem k šířce stránky.
BACKGROUND=”url”
Na pozadí tabuky může být obrázek, který leží na této url adrese.
BGCOLOR=barva
Barva pozadí celé tabulky.
BORDER=”x”
Specifikuje, zda-li tabulka má (x=1) nebo nemá okraj (x=0).
BORDERCOLOR=barva
Určuje barvu rámečku. BORDECOLORDARK určuje barvu tmavší části, BORDECOLORLIGHT světlejší části.
CELLSPACING=”x”
Definuje volný prostor mezi buňkami v pixelech.
CELLPADDING=”x”
Definuje tloušťku vnitřního okraje tabulkových buněk v pixelech.
COLS=”x”
Udává počet sloupců “x” tabulky.
FRAME=frame-type
Určuje, jak vypadá vnější rámeček tabulky.

Může nabývat hodnot: VOID odstraní všechny vnější rámečky, ABOVE rámeček pouze nad horním okrajem tabulky, BELLOW pouze pod dolním okrajem tabulky, HSIDES rámeček bude pod a nad tabulkou, VSIDES zobrazí rámeček vlevo a vpravo od tabulky, LHS rámeček bude vlevo vedle tabulky, RHS bude vpravo.

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

Může nabývat hodnot: NONE odstraní veškeré vnitřní rámečky, BASIC zobrazí vodorovné linky mezi hlavičkou THEAD, tělem TBODY a patičkou TFOOT, ROWS linky mezi všemi řádky tabulky, COLS mezi všemi sloupci tabulky, ALL zobrazí všechny vnitřní linky v tabulce.

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

 

řádky tabulky TR

<TR ALIGN=left/center/right BGCOLOR=barva BORDERCOLOR=barva BORDERCOLORDARK=barva BORDERCOLORLIGHT=barva NOWRAP


VALIGN
=top/middle/bottom>
vlastní obsah řádku </TR>
VALIGN=top/middle/bottom
Vertikální zarovnání obsahu tabulkového řádku.
NOWRAP
Specifikuje zákaz zalamování řádek uvnitř datové buňky tabulky (označen za zastaralý).

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

 

datová buňka tabulky TD (objevuje se uvnitř tabulkových řádků)

<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>


BACKGROUND=”url”
Na pozadí může být bitmapa (obrázek).
NOWRAP
Specifikuje zákaz zalamování řádek uvnitř datové buňky tabulky.
COLSPAN=”x”
Specifikuje počet sloupců (x) pro datovou buňku tabulky, přes než se má buňka roztáhnout ve vodorovném směru.
ROWSPAN=”x”
Specifikuje počet řádků (x) pro datovou buňku tabulky, přes než se má buňka roztáhnou ve svislém směru dolů.
WIDTH=”x”
Specifikuje šířku datové buňky v pixelech nebo v %.
HEIGHT=”x”
Určuje výšku buňky.
AXIS=jméno
Pojmenování obsahu konkrétní buňky (platí i pro TH).
AXES=jméno1, jméno2
Pojmenování buňek v hlavičce daného sloupce, ve kterém je tento element TD (platí i pro TH).

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>

tag COLGROUP

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

tag COL

Tento tag slouží k nadefinování implicitních vlastností jednotlivých vlastnosí sloupců tabulky. Jeho syntaxe je následující:

<COL ALIGN=center/left/right/char/charoff CHAR="znak" ID= string SPAN=integer STYLE=string TITLE=string VALIGN=baseline/bottom/center/top WIDTH=string event=script>


ALIGN
Zarovnání sloupce vzhledem k šířce tabulky (center = doprostřed; left = doleva; right = oprava).
VALIGN
Určuje svislé zarovnání textu ve všech buňkách sloupce.
SPAN
Sděluje, na kolik za sebou jdoucích slupců se daná pravidla aplikují.
STYLE
Definuje styl (podrobnější vysvětlení je v kapitole CSS-kaskádovací styly).
TITLE
Titulek sloupce
WIDTH
Šířka sloupce
ID
Identifikátor

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:

char="znak"

V praxi to znamená:

<COL ALIGN="char" CHAR=".">

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.

 

3.13 Rámy

 

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

Tento tag určuje kolik bude v okně vytvořeno rámů, co obsahují a jak jsou uspořádány.

S
COLS=”x,x”
Definuje sloupcové rámy stanovením šířky v pixelech nebo v procentech-absolutní umístění, relativní-pomocí hvězdiček (1:3 = *,3*).
ROWS=”x,x”
Definuje řádkové rámy stanovením výšky v pixelech nebo v procentech-absolutní umístění, relativní-pomocí hvězdiček (1:3 = *,3*).
BORDER=”0/1/2/atd.
Specifikuje tloušťku okraje rámu na (1,2,3,atd.) nebo bez rámu (0).
FRAMESPACING=”1/0”
Definuje mezery mezi rámy (1 = ano, 0 = ne).
FRAMEBORDER=”1/0”
Definuje viditelnost (1) neviditelnost (0) okrajů rámu.

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”>


ALIGN=left/center/right
Definuje zarovnání položek uvnitř rámu.
FRAMEBORDER=”1/0”
Specifikuje, zda se zobrazí (1) nebo ne (0) okraje rámu.
BORDERCOLOR=”#xxxxxx”
Určuje barvu okraje pro rám (pouze je-li specifikován).
FRAMESPACING=”0/1/2/atd.”
Specifikuje mezeru (je-li) přidanou mezi rámy.
NAME=”jmeno”
Pojmenovává rám pro budoucí cílení.
NORESIZE
Znemožňuje divákům měnit velikost rámu.
MARGINWIDTH=”x”
Specifikuje výšku neviditelného okraje uvnitř rámu.
MARGINHEIGHT=”x”
Specifikuje šířku neviditelného okraje uvnitř rámu.
SCROLLING=”0/1/auto”
Určuje zda rám bude mít rolovací proužek ano (1) nebo ne (0), AUTO přinutí prohlížeč detekovat zda je rolovací proužek vzhledem k situaci nutný či nikoliv.
SRC=”url”
Určuje soubor, který bude do tohoto rámu umístěn.

tag IFRAME

Tento tag vytváří plovoucí rámy které odstraňují některé nevýhody konvenčních rámů a rozšiřuje možnosti jejich použití. Plovoucí rám se od klasických rámů následovně odlišuje:

 

<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”>


ALIGN=top/middle/bottom/right/left/texttop /absmiddle/baseline/absbottom
Zarovnání rámů k následující řádce
textu či následujícímu objektu stejný způsobem, jako by se jednalo o obrázek.

BORDER=”šířka ohraničení”
Udává šířku ohraničení rámečku.
BORDERCOLOR=”barva”
Udává barvu rámečku.
FRAMEBORDER=”0/1/no/yes”
Zapíná nebo vypíná rámeček.
NORESIZE=”noresize/resize”
Určuje, zda bude možné měnit velikost
rámu vlečením za okraj. Parametr noresize udává že velikost okna není upravovatelná, resize určuje že velikost okna je upra
vovatelná.
NAME
Má stejný význam jako TARGET popsaný výše.

Ostatní parametry byly již popsány výše.

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>

 

3.14 Multimediální značky

 

<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

tag OBJECT

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.

<OBJECT ALIGN=top/middle/bottom/right/left/texttop /absmiddle/baseline/absbottom BORDER=x” DATA=”url” DECLARE HEIGHT=”x” VSPACE=”x” HSPACE=”x” NAME=url” SHAPES STANDBY=hlášení STYLE=styl TITLE=textTYPE=MIME-typ USEMAP=”url” WIDTH=”x”>


<PARAM NAME
=”jméno1” VALUE=”hodnota1”>
<PARAM NAME
=”jméno2” VALUE=”hodnota2”>
<PARAM NAME
=”jméno3” VALUE=”hodnota3”>


DATA=”url”
Odkaz na vlastní soubor, který tvoří vkládaný objekt.
DECLARE
Je-li přítomen, není objekt po načtení automaticky aktivován.
USEMAP=”url”
Objekt slouží také jako imagemapa.
NAME=”url”
Má význam, když je objekt součastně použit jako objekt ve formuláři (proměnná která je předávána zpracovávači formuláře).
STANDBY=hlášení
Hlášení, které se zobrazí když se objekt aktivuje.
PARAM NAME=”jméno”
Parametry předávané danému objektu, může jich být libovolný počet. Každý parametr má přiřezenou hodnotu VALUE.
Jelikož se formuláře používají stále ve větší míře, byl tag OBJECT rozšířen o několik dalších atributů:

CLASSID=url
Odkazuje na adresu URL, kde se nalézá mechanismus pracující s objektem.
CODEBASE=url
Základní cesta, do které pak CLASSID "odpíchne" cestu relativní nebo i cestu absolutní.
TYPE=typ_obsahu
Typ dat podle specifikace MIME.
CODETYPE=typ_dat
Typ dat, které očekává mechanismus pracující s objektem (určený pomocí CLASSID).
SHAPES=tvar
Definuje tvar citlivého regionu (viz tag "A"). TABINDEX=číslo Pořadí navigování mezi jednotlivými políčky ve formuláři pomocí klávesy TAB.

 

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ěrHEIGHT=”výška” HSPACE=”čísloLOOP=”opakování” SCROLLAMOUNT=”čísloSCROLLDELAY=”čísloVSPACE=”čísloWIDTH=”šířka>

...vlastní text...

</MARQUEE>


ALIGN=”zarovnání”
Zarovnání rolujícího textu .
BEHAVIOR=”chování”
Chování textu, hodnota SCROLL udává že text se objevuje u zadaného okraje. Hodnota SLIDE znamená že text roluje od zadaného okraje na druhý a tam se zastaví, ALTERNATE znamená že text roluje od jednoho okraje k druhému a tam se odrazí.
BGCOLOR=”barva”
Barva pozadí řádku, ve kterém je rolující text.
DIRECTION=”sm
ěrSměr ve kterém text roluje (down, left, right, up).
HEIGHT=”výška”
Výška obdelníku.
HSPACE
a VSPACE Atributy jsou stejné jako u obrázku.
LOOP=”opakování”
Určuje počet rolování.
SCROLLAMOUNT=”
čísloUdává počet pixelů mezi jednotlivými ”poskoky” rolujícího textu.
SCROLLDELAY=”
čísloUdává dobu mezi jednotlivými poskoky textu
WIDTH=”
šířkaŠířka obdelníku.

 

4. Programování dynamického HTML

 

4.1 Objektový model

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.

Objektové modely Microsoftu jsou založeny na technologii známé jako Component Object Model (COM), což je specifikace, v níž je definováno, jak objekty komunikují za účelem sdílení služeb. Sdílení služeb dodává objektovým modelům výkonnost a flexibilitu.

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.

Základní hierarchie objektů

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

Obr. 1. Objektová hierarchie

Vývoj hierarchie dynamického HTML

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

Netscape Navigator 3.0 podporuje stejné objekty jako Internet Explorer 3.0 kromě objektu document.frames, ale navíc ještě následující objekty:

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

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ů.

Předpokládejme, že jsme nadefinovali tři rámy Toolbar, Banner a Main. S oknem Main můžeme z okna Toolbar manipulovat prostřednictvím:

Window.parent.frames(”Main”).navigate ”adresa odkazu”

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).

Díky šíření událostí můžeme určit v jednom místě ošetřovací událostní rutinu pro většinu značek na webové stránce a pro kteroukoli značku specifikovat určité chování. K šíření dochází automaticky a lze je odchytit každým objektem v hierarchii. Když u značky (tagu) dojde k nějaké události, objekt Document tuto událost automaticky získá po ukončení jejího ošetření značkou.

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>

Z principu práce s dynamickým HTML vidíme, že stránka bez problémů bude pracovat i s prohlížeči, které dynamické HTML nepodporují. Jen se po kliknutí myší na nadpis nic nestane, protože tyto prohlížeče neumějí dynamicky měnit obsah stránky po jejím zobrazení.

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.

Dynamické obtékání

Vždy, když skript zpracuje a změní atribut prvku nebo stylu listu nebo upraví obsah, dokument inteligentně přepočítá a překreslí stránku s využitím nových informací.

Model dokumentu dynamického HTML přináší odraz dokumentu v jazyce skriptu. Skript může například změnit atribut CLASS v každém prvku HTML. V jazyce skriptu je atribut CLASS, podobně jako všechny atributy, vystaven jako vlastnost prvku – v tomto případě jako vlastnost className.

Příprava skriptů

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

4.2 Prvek SCRIPT

Uzavírá do sebe skripty a určuje některé jejich vlastnosti nejčastěji jsou používány skripty vytvořeny ve Visual Basicu, JavaScriptu či Tcl.

<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>


TYPE="typ"
Nastavuje typ skriptu (TYPE=text/JavaScript).
LANGUAGE="jazyk"
Je nedoporučován, jeho místo zaujímá právě TYPE.
SRC="url"
Soubor obsahující vlastní skript (knihovny skriptů). Toto odkazování na jiný soubor zvyšuje výkon a běžné funkce nemusejí být zapsány na každou stránku.
TITLE="titulek_skriptu"
Popisující titulek skriptu.
EVENT="událost"
Určuje události typu intrinsic.
Lze také specifikovat implicitní jazyk pro všechny skripty na stránce, aby nebylo nutné jej pokaždé vypisovat, a to v tagu META, typu HTTP-EQUIV:

<META http-equiv="Content-Script-Type" content= jazyk_skriptu>

Při vkládání skriptů je rovněž vhodné jejich obsah skrýt před staršími prohlížeči pomocí komentářů:

<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.

NOSCRIPT

Tento tag slouží jako "vyhýbka" pro ty prohlížeče, které skriptování nepodporují. Příklad:


<SCRIPT TYPE="vbScript">

zde je nějaký skript, který například od uživatele vyžádá data či jinou reakci

</SCRIPT>
<NOSCRIPT>

... zde je náhradní způsob, jak tato data získat bez pomocí skriptů, či jak uživatele alespoň upozornit na nepodporování skriptů jeho prohlížečem ...

</NOSCRIPT>
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.

Umístění skriptů v dokumentu

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.

UDÁLOSTI TYPU INTRINSIC

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”
>

Atribut ONCLICK může buď volat funkci, nebo přímo provést jeden nebo více řádků programu.

...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

Podpora generické události

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:

<SCRIPT FOR=”dokument” EVENT=”onmousemove()” LANGUAGE=”JavaScript”>

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

Poznámka: JavaScript je v tagu <SCRIPT> citlivý na velikost písmen jak pro hodnotu EVENT tak pro atribut FOR. Hodnoty musejí být zapsány malými písmeny.

Č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.

V JavaScriptu to znamená, že události mohou začít odpovídat uživateli nebo na jinou akci ještě před tím, než je zavedena celá stránka.

 

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.

Atribut

Vlastnost

Citlivost na velikost písmen

Použitelné prvky

(žádný)

tagName

Vždy velká písmena

Všechny, včetně komentářů

ID

id

Ano

Všechny, mimo komentářů

CLASS

className

Ano

Všechny, mimo komentářů

NAME

name

Ano

A, Applet, Button, Form, IMG, Input, Map, Meta, Object, Select a TextArea

 

4.3.1 Prvky Body a Frameset

Dokument HTML může obsahovat oba dva typy obsahu: obsah těla nebo definici sady rámů. V obou případech platí pro dokument podobný model objektu. Prvek Body nebo Frameset je také obsažen ve sbírce dokumentu all, proto vlastnost body může být zpřístupněna přímo z dokumentu.

document.body.tagName

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.

Programování obsahu sady rámů

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.

 

4.3.2 Programování prvku A (Anchor, kotva)

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>

Atribut Href zadaný skriptem

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.

Události prvku A (Anchor)

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í:

<A HREF=”foo.ht#100” ONCLICK=event.returnValue=false;”>

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.

 

4.3.3 Programování prvků IMG a MAP

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.

 

Animace obrázku

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:

<IMG SRC=”start.gif”
ONMOUSEOVER=”this.src = ’over.gif’;”
ONMOUSEOUT=”this.src = ‘start.gif’”;>

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.

4.3.4 Programování prvku Object

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.

Události objektu

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.

 

4.3.5 Programování prvku Table

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.

Objekt Table

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.

Objekt table přináší metody pro vytváření a odstraňování prvků THead, TFoot a Caption:

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

4.3.6 Skripty prvku Form

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.

Document.forms[0].elements.lenght

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

4.3.7 Programování prvku Marquee

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í.


onStart
Začíná rolovat, v režimu scroll nebo slide spouští tato událost pokaždé novou sekvenci animace.
onMouse
Tato událost se spouští jen tehdy, když je vlastnost behavior nastavena na alternate.
onFinish
Když Marquee dokončilo rolování.

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>

 

4.4 Praktické ukázky

 

Zvýraznění odkazů po přejetí myší

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.

<HTML>
<HEAD>
<TITLE>Stránka s aktivními odkazy</TITLE>
<STYLE TYPE="text/css">
<!--
:link { color: black; font-weight: bold;
font-size: lagre }
center { font-size: 15pt; font-weight: bold }
-->

</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function HighlightAnchor()
{
if (window.event.srcElement.tagName == "A")
window.event.srcElement.style.color = "blue";
}
function LowlightAnchor()
{
if (window.event.srcElement.tagName == "A")
window.event.srcElement.style.color = "black";
}
// -->
</SCRIPT>
</HEAD>

<BODY onMouseOver="HighlightAnchor()"
onMouseOut="LowlightAnchor()">

<CENTER>Zvýraznění odkazů po přejetí myší</CENTER>

<P>Zde může být libovolný dokument.</P>

<A HREF="">HoMe PaGe</A><br>
<A HREF="">Novinky</A><br>
<A HREF="">Zábava</A><br>

<P>Vždy, když vytvoříme odkaz, tak bude mít tyto vlastnosti.</P>

</BODY>
</HTML>

Použití zdrojů světla

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.

K přidání kuželového zdroje světla potřebujeme zadat více parametrů:

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.

Přidání bodového zdroje světla je velmi jednoduché:

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)

Světla v jednom filtru jsou číslována od nuly podle pořadí v jakém byla přidána.

Vytvoříme stránku s nápisem. Nápis bude částečně viditelný (díky zdroji rovnoměrného světla) a bude přes něj jezdit kužel světla, který vždy zviditelní osvětlenou část nápisu.

<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>

 

5. CSS – Kaskádovací styly

 

HTML je značkovací jazyk, ve kterém by se pomocí značek měl vyznačovat význam jednotlivých částí textu. Z vlastní zkušenosti však víme, že dnes v HTML existuje několik atributů a elementů, které ovlivňují pouze grafický vzhled. Použitím těchto atributů a elementů sice můžeme získat graficky atraktivní stránku, má to však řadu nevýhod.

Text stránky je mnohdy špatně strukturován, protože jednotlivé elementy jsou využívány účelově k dosažení určitých grafických efektů. Druhou velkou nevýhodou je velká pracnost - většina z vizuálních atributů musí být nastavována opakovaně u všech elementů.

Obě tyto nevýhody odstraňují kaskádové styly -- Cascading Style Sheets (CSS). Styly umožňují definovat způsob zobrazení (druh a velikost písma, barvu, zarovnání apod.) každého elementu na stránce. Styl však není přímo součástí textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný. Navíc styly umožňují definovat jednotný vzhled určitého elementu v celém dokumentu jedním zápisem - nemusíme jej opakovat u každého elementu.

5.1 Syntaxe parametrů v definici stylu

 

Typová syntaxe při definici stylu:
<STYLE TYPE=”text/css”>

<!--
.jméno_stylu {
parametr: hodnota
parametr1; hodnota1
}
.jméno_stylu2 {
parametr: hodnota
parametr1; hodnota1
}
atd.

-->
</STYLE>

 

Definice je uvozena tagem STYLE (s parametrem TYPE, viz. Připojení stylu k HTML dokumentu), za kterým následuje otevření pseudo-komentáře (to aby byla zachována kompatibilita s prohlížeči, které nepodporují styly, starší prohlížeče ji pak ignorují), a potom následuje výčet jednotlivých stylů (redefinice bez tečky, nové styly s tečkou). Parametry každého stylu jsou ve složených závorkách, přičemž následují ve dvojicích: jméno parametru, dvojtečka, hodnota parametru, středník. Na rozdíl od ostatních standardů HTML není nutné řetězcové hodnoty uzavírat do uvozovek (mezi jednotlivými parametry mohou být volné řádky). Definice stylu je ukončena uzavírací složenou závorkou, následuje uzavření pseudo-komentáře a ukončení definice STYLE.  > ipojení stylu k HTML dokumentu

Aby mohl při zobrazování stránky použít prohlížeč styl, musí o něm mít informaci. V HTML jsou čtyři možnosti, jak styl k HTML dokumentu připojit. Následující ukázka obsahuje všechny čtyři najednou:

<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í.

 

Slučování definic

Abychom ušetřili místo, můžeme použít pro několik selektorů stejnou deklaraci. Selektory v tomto případě oddělujeme čárkou:

H1, H2, H3 { color: blue }

Sloučit můžeme i několik deklarací, ty se však oddělují středníkem:

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

Některé vlastnosti lze nastavit společně pomocí jediné. Předchozí příklad můžeme zkráceně zapsat jako

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

 

Dědičnost vlastností

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 }

Takto definované vlastnosti zdědí ty elementy, které neobsahují ve stylu vlastní deklaraci použitých vlastností. Dokument tedy bude zobrazen černě na bílém podkladu.

Třída jako selektor

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>

V definici stylu lze selektor doplnit o název třídy. Název třídy se od jména elementu odděluje tečkou:

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 }

Tato deklarace nám neříká nic jiného než, že v číslovaných a nečíslovaných seznamech obsažených uvnitř položky jiného seznamu bude použita menší velikost písma.

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 }

Komentáře

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á 

Pseudotřídy a pseudoelementy

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.

Pseudotřídy existují tři. Slouží pro nastavení barvy odkazů, navštívených odkazů a aktivovaných odkazů:

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

Pseudotřídy mohou být použity i v kontextových selektorech.

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 }



5.2 Vlastnosti a typy použitého písma

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.

Jako hodnota atributu se uvádí seznam čárkami oddělených jmen písem. Prohlížeč k zobrazení použije první písmo v seznamu, které má k dispozici. Pokud tedy chceme k zobrazení stránky použít bezpatkové písmo, použijeme ve stylu následující deklaraci:

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:

Název

Popis

serif

patkové písmo

sans-serif

bezpatkové písmo

cursive

ozdobná kurzíva

fantasy

ozdobné písmo

monospace

neproporcionální písmo

Po výběru rodiny písma můžeme měnit ještě další parametry písma.

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.

Na výběr máme rovněž ze dvou variant písma pomocí vlastnosti

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 }

Na stránce, pak můžeme citovat dle libosti:

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í:

Font: [<font-style> || <font-variant> || <font-weight>]?
<font-size> [/<line-height>]? <font-family>

 

5.3 Barvy textu a pozadí

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

Jako její hodnotu můžeme uvést hned několik různých typů hodnot. Asi nejběžnější je uvedení jména barvy. Jména můžeme použít stejná jako v HTML:


aqua
(jasná modrozelená)
navy (tmavá modř)
black
(černá)
olive (olivová)
blue
(modrá)
purple (purpurová)
fuchsia
(anilínová červeň)
red (červená)
gray
(šedivá)
silver (stříbrná)
green
(zelená)
teal (tmavá modrozelená)
lime
(citrónově zelená) white (bílá)
maroon
(kaštanová)
yellow (žlutá)

Pokud tedy chceme, aby byly všechny nadpisy první úrovně zobrazeny červeně, stačí do stylu přidat následující deklaraci:

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.

Existují i další způsoby zápisu barev, ale dva výše uvedené jsou nepoužívanější.

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) }

background-repeat Slouží pro opakování obrázku, tj. způsob vyskládání “dlaždic” z obrázku na pozadí a určují to tyto parametry:
repeat Opakuje obrázek v obou dvou osách tak, aby vyplnil dostupný prostor.
repeat-x Opakuje pouze ve vodorovné ose.
repeat-y Opakuje ve svislé ose.
no-repeat Vypíná opakování.

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>
background-attachment Vlastnost slouží k připíchnutí obrázku na pozadí.
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ů</TITL
E>
<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.
 Zobrazení desky na dipleji telefonu
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ů:

 Zobrazení desky na dipleji telefonu

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.