Upload
grep1
View
192
Download
0
Embed Size (px)
Citation preview
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>
<option>Položka 2</option>
<option>Položka 3</option>
<option>Položka 4</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 />
<input type="radio" name="Plat" value="4000" /> do 4000 euro<br />
<input type="radio" name="Plat" value="5000" /> do 5000 euro<br />
<input type="radio" name="Plat" value="6000" /> do 6000 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
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