Tmw 3 html3_2010

doc. Ing. Zdislav EXNAR, CSc.

Tvorba multimediálnych web stránok

HTML - 3

Klikacie mapy

Klikaciu mapu predstavuje obrázok, ktorý má v

určených miestach odkazy na iné stránky.

Typy aktívnych oblastí:

rec – obdĺžnik (shape="rect" coords="20,100,6 0,200")

circle – kruh (shape="circle" coords="30,100,100“)

poly – mnohouholník (shape="poly" coords="30,100,90,100,50, 50"

Videoklipy

Pre animáciu sa používajú obrázky typu gif.

Možnosť použitia aj videoklip formátu *.avi.

<img alt=„popisok" dynsrc=„názov_súboru.avi" />

<img alt="babusky" dynsrc="babusky.avi" height="600" width="900" />

Môže byť doplnený atributmi:

- loop=“nnn“ - počet opakovaní

- controls – zobrazí sadu ovládacích tlačidel

- start –určuje na aký pokyn sa má začínať s prehrávaním

start=“onmouseover“ – prehrávaní začne keď sa myšou prejde nad

obrázkom

Formuláre

Poskytujú možnosť základnej odozvy návštevníkov stránky

Formulár je ohraničený značkou

<form name=“meno_formulára“> </form>

Meno formulára umožňuje previazanie s akciou, ktorá je

definovaná skriptom.

Do formulára sa vkladajú prvky (okna pre vpisovaní textu,

tlačidla a roletky) a pomenovaním prvku sa prvok stáva

objektom, ktorému užívateľ priraďuje hodnotu (vlastnosti).

Parametre formulára umožňujú definovať akcie, ktoré sa majú

s formulárom vykonať (napr. zaslanie elektronickou poštou

alebo zapísanie do databáze).

Príklad formulára

<body>

<form name="anketa">

<table summary="">

<tr><td>Vaše meno</td>

<td><input type="text" name="Meno" /></td></tr>

<tr><td>Čo raňajkujete</td>

<td><input type="text" name="Ranajky" /></td></tr>

<tr><td>Váš obľúbený nápoj</td>

<td><input type="text" name="Napoj" /></td></tr>

<tr><td>Máte pre mňa vzkaz?</td>

<td><textarea name="Vzkaz" cols="50" rows="3"></textarea></td></tr>

</table>

<input type="submit" value="Odošli" />

<input type="reset" value="Vymaž" />

</form>

</body>

Prvky formulára

Textová políčka<input type=“text“ name=“názov_políčka“ />

Parameter:

• type – určuje charakter, typ políčka

• name – názov políčka

• size – dĺžka políčka (prednastavená 20 znakov)

• maxlength – maximálny počet znakov,

• value – prednastavený text

• type=“password“ – zápis hesla, miesto písmen sa zobrazujú *

<input type="text" name="Meno" size="30" maxlength="35" value="Jan Novotný" />

Prvky formulára

Políčka o väčším počtu riadkov<textarea name=“meno_prvku“> Implicitný text </textarea>

Implicitný text – text ktorý bude vložený do pola pred zobrazením

Parameter:

• name – názov políčka

• cols – počet stľpcov - dĺžka políčka (prednastavená 20 znakov)

• rows – počet riadkov

• wrap – zalamovanie riadkov (implicitne on)

<textarea name="Vzkaz" cols="50" rows="3">Zdelenie: </textarea>

Prvky formulára

Výber zo zoznamuVýber z niekoľkých prednastavených hodnôt. Príklad

<select name="vyber">

<option>Položka 1</option>




</select>

Parametre značky option:

• selected – preddefinovaná položka (bude vybraná ako prioritná)

• value – odovzdáva serveru hodnotu, ktorá je definovaná týmto parametrom

(keď nie je definovaný odovzdáva sa reťazec ktorý je daný Pložkou)

<option selected value=“4“>Položka 4</option>

Prvky formulára

Zatrhávacie políčkaPoužívajú sa tam, kde treba vyjadriť súhlas alebo nesúhlas

Značka pre tlačítko <input type="checkbox" name=„Názov" />

PrepínačePoužívajú sa tam, kde treba vybrať z niekoľkých možností

Značka pre prepínač <input type="radio" name=„Názov" value=„Hodnota" />Text

<p>Váš plat</p>

<input type="radio" name="Plat" value="3000" /> do 3000 euro<br />




Prvky formulára

Tlačidlá formulárovUmožňujú aby prehliadač vykonal s prvkami formulára požadovanú činnosť

<input type="button" value="Tlačítko" />

Parameter:

• type=“reset“ – reset(vymazani, nastavenie) pôvodných hodnôt formulára

• type=“submit“ – tlačidlo pre odoslanie obsahu formulára

<button name="Button" value="hodnota" type="button">Obsah tlačidlá</button>

Parameter:

• name – meno tlačidla na ktoré sa odkazujú skripty

• value – hodnota, ktorá sa predá serveru, keď sa tlačidlo stiskne

• type – typy: button (spúšťa zadaný skript), submit, reset

• obsahom tlačidlá môže byť aj obrázok

Odoslanie formulára

Spôsoby odoslania sa definujú v značke <form><form name="anketa" method="post"

action="mailto:[email protected]?Subject=anketa" enctype="text/plain">

Parametre

• Metohod=“post“ – definuje spôsob odoslania dát

• action=mailto:[email protected]?Subject=anketa – odosiela na zadanú adresu

dáta formulára anketa

• enctype="text/plain„ - definuje spôsob odoslania e-mailovej správa, v tomto

prípade prostý text bez formátovacích znakov

Príjemcovi príde správa typu:

Meno=Františe Drbohlávek Ranajky=ovsenú kašu Napoj=rum Vzkaz=Zdelenie: neotravujte. vyber=Položka 3

mailto:[email protected]?Subject=anketa

Rámy

Umožňujú rozdeliť okno prehliadača na niekoľko

častí a v každej zobraziť iný dokument. Používanie

rámov vo www dokumentoch je často diskutované

a nie je jednoznačné.

Štruktúra stránky s rámami sa líši od zvyčajných

HTML stránok. Telo dokumentu, v ktorom je rám

definovaný, neobsahuje značku <body > ale:

<frameset>...... </frameset>

Značka definuje rozdelenie stránky na riadky a stĺpce

podobne ako tabuľka.

Atribúty rámu

Základným atribútom je definícia počtu riadkov a

stĺpcov. Súčasne sa definuje ich výška a šírka.

Veľkosť je možné zadať absolútne v počte pixelov,

alebo relatívne vzhľadom na veľkosť okna

prehliadača.

Príklad:

• rozdelenie na riadky

<frameset rows="50%,*"></frameset>

• rozdelenie na stĺpce

<frameset cols="100,2*,*"></frameset>

Veľkosť rámu

• Rozdelenie na riadok a dva stĺpce

<frameset rows="50,*">

<frameset cols="50%,50%">

</frameset>

</frameset>

Definícia rámu

Pre definíciu jednotlivých rámov sa používa značka

<frame name=“Názov rámu“>

Atribút src určuje, ktorá stránka sa má v ráme otvoriť.

Atribúty <frame marginheight="2" marginwidth="3"> udávajú vzdialenosť obsahu rámu od jeho okraja

Veľkosť rámov je možné pomocou myši meniť. Atribút <frame noresize="1"> zakáže tuto možnosť.

Definícia rámu

Definícia zobrazenia posuvníku pri veľkých obsahoch

rámov:

<frame scrolling="no"> zakáže zobrazenie posuvníku,

zvyšok obsahu rámu bude nedostupný

<frame scrolling="yes"> posuvník bude trvale

zobrazený

<frame scrolling="auto"> automatické zobrazenie

posuvníku, keď bude obsah rámu väčší, ako je jeho

veľkosť.

Hypertextové odkazy a rámy

Pri rámoch umožňuje definovať, v ktorom ráme sa

má stránka otvoriť<a href="http:\\www.lm.uniza.sk" target="Hlavni">Naša stránka</a>

Základné hodnoty atribútu target:

"_blank“ stránka sa otvorí v novom prázdnom okne

"_self“ stránka sa otvorí v rovnakom ráme (základné)

"_top“ rámy sa zrušia a stránka sa otvorí cez celé okno

"_parent„ stránka sa otvorí v najbližšom nadriadenom okne

Validita stránok

Predstavuje kontrolu dodržiavania pravidiel stanovených

W3C (Worl Wide Web Consortium), SGML (Standard

Generalized Markup Language) a XML (Extensible

Markup Language).

Obyčajne sa problém kontinuity rieši tak, že nové riešenie

umožňuje všetko, čo aj predošlé, ale ponúka niečo

naviac. Do nového riešenia sa tak dostanú všetky

chyby prameniace zo zlých rozhodnutí, ktoré sa

v minulosti do normy dostali. V prípade HTML bolo

prijaté opatrenie, ktoré umožňuje „zbaviť“ sa nežiaducich

prvkov či atribútov. Tie sú označené ako zastarané,

alebo sú zaradené do zoznamu zavrhovaných prvkov.

Validita stránok

Zastaralé prvky (obsolete elements) sú také, ktoré

nová norma už nepodporuje a nemali by sa už

používať, hoci webové prehliadače spravidla voči

nim „neprotestujú“. Také sú napríklad prvky

LISTING, PLAINTEXT a XMP. Všade, kde sa

voľakedy používali tieto prvky, treba použiť prvok

PRE.

Validita stránok

Zavrhované prvky (deprecated elements) sú také,

ktoré nie je odporúčané používať, ale aj napriek

tomu sú súčasťou normy. Medzi také prvky patrí

APPLET, BASEFONT, CENTER, DIR, FONT,

ISINDEX, MENU, S, STRIKE a U. Odporúčanie

nepoužívať tieto prvky zrejme smeruje k tomu, aby

si tvorcovia stránok od nich odvykli a možno príde

čas, keď budú z normy odstránené.

Vyhodnotenie dodržania

pravidiel

Dodržiavanie pravidiel v dokumentoch uverejnených

vo webe môžu skontrolovať špeciálne programy,

tzv. validátory. Na stránkach W3C sú dostupné

validátory, ktorým stačí zadať adresu stránky.

Získame tak nielen informáciu o počte chýb, ale aj

o mieste, kde a aká chyba tam je. Ak v našej

stránke chyba nie je, dostaneme odporúčanie, aby

sme na svoju stránku umiestnili obrázok, ktorý

bude potvrdzovať dodržiavanie pravidiel W3C.

Porovnanie slovenčiny

a jazykov webu

Slovenčina Web

Bernolákova kodifikácia HTML

Štúrova kodifikácia XHTML

písaný text kód stránky

recitátor webový prehliadač

sloh dokument

pravidlá pravopisu pravidlá HTML/XHTML

pokyny na úpravu tabuľky štýlov (CSS)

učiteľ validátor W3C

jednotka za pravopis

jednotka za úpravu

Documents

Tmw 3 html3_2010