Image
15.6.2016 0 Comments

Vytvárame WWW stránky / 10. časť

Späť na úvod >> Späť na seriál

V desiatom pokračovaní nášho seriálu dokončíme rámy a vrhneme sa hneď na multimediálne rozšírenie našich stránok.

Tag Noframes
V predošlej časti sme si povedali, že nie všetky prehliadače podporujú rámy a že ani na používateľov s takýmito prehliadačmi by sme nemali zabúdať. Práve pomocou tagu Noframes im ponúkneme alternatívnu cestu, ako sa dostať k informáciám na našich stránkach. Tag Noframes je párový a umiestňuje sa spravidla pred posledný uzatvárací tag Frameset. Medzi tagy <Nofarmes> a </Noframes> môžeme vložiť v podstate hocičo. Väčšinou tu však len nájdeme upozornenie, že náš prehliadač nepodporuje rámce. To však nášho návštevníka určite nepresvedčí, aby sa poobzeral po nejakom inom prehliadači. Okrem toho tento návštevník sa na naše stránky už určite nevráti. Musíme preto pripraviť taký alternatívny obsah, aby mali návštevníci rovnakú možnosť získať všetky potrebné informácie. Ukážeme si to na príklade z predošlej časti: 

<HTML>
<HEAD>
<TITLE>Stránka s rámami</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
...
<FRAMESET cols="100, *">
...
...
</FRAMESET>
<NOFRAMES>
Váš prehliadač nepodporuje rámy. Môžete si však pozrieť <A href="dva.htm">obsah týchto stránok</A>.
</NOFRAMES>
</FRAMESET>
</HTML>

Bolo to jednoduché, však? A teraz budú s našimi stránkami spokojní používatelia s novšími, staršími a aj textovými prehliadačmi.

Rámy vnútri stránky
V štandarde HTML 4.0 sa objavil nový tag Iframe, ktorý dovoľuje definovať rámy vnútri stránky. Príklad nájdete na viacerých serveroch, napr. v niektorých diskusiách k článkom, keď je v ráme zobrazený samotný článok a zvyšok stránky je venovaný diskusii. Teraz sa pozrieme na jeho parametre:

  • name – rovnako ako pri klasických rámoch určuje tento parameter meno rámu
  • src – adresa dokumentu, ktorý má byť v ráme zobrazený
  • frameborder – určuje, či bude rám ohraničený ( 0 – nie, 1 – áno )
  • marginwidth – vzdialenosť rámu od horného a dolného okraja; určuje sa v pixeloch
  • marginheight – vzdialenosť rámu od ľavej a pravej strany; určuje sa v pixeloch
  • scrolling – určuje, či bude možné obsah rámu posúvať; tento parameter môže mať tri hodnoty: yes (na okraji rámu je vždy zobrazený posuvník), no (posuvník nie je zobrazený nikdy) a auto (posuvník je zobrazený, iba ak je potrebný)
  • align – zarovnávanie rámu; použitie tohto parametra je rovnaké ako pri tagu Img
  • height – výška rámu
  • width – šírka rámu

Pre názornosť tu máme jeden príklad:
 

<HTML>
<HEAD>
<TITLE>Ukážka tagu Iframe</TITLE>
</HEAD>
<BODY>
...
obsah stránky
...
vložený rám:<BR>
<IFRAME src="ram.htm" width="200" height="300" scrolling="auto" frameborder="1">
Váš prehliadač nepodporuje rámy vnútri stránky (iframe). Ak chcete vidieť obsah vloženého rámu <A HREF="ram.htm">kliknite sem</A>
</IFRAME>
</BODY>
</HTML>

Určite ste si všimli, že na zobrazenie alternatívneho obsahu sme nepoužili tag Noframes, ale obsah sme vložili priamo medzi tagy <Iframe> a </iframe>.

Nevýhody rámov
Teraz už vieme všetko na to, aby sme vytvárali stránky s rámami. Musíme si však uvedomiť, že rámy prinášajú veľa nevýhod a treba zvážiť, či ich použijeme. Všeobecne sa dá povedať, že stránky bez rámov sú pre používateľov lepšie.

  1. Problém s ukladaním stránok
    Ak používateľ zvolí štandardný postup, teda v Internet Exploreri položku Súbor | Uložiť ako, uloží sa mu iba stránka s informáciami o rozložení rámov, ale nie ich obsah. To je vyriešené až v Intenet Exploreri 5.0, kde je možné v tejto ponuke vybrať možnosť Stránka WWW úplná.
  2. Problém s tlačou
    Ak chce používateľ vytlačiť iba obsah jedného rámu, má len jednu možnosť, a to kliknúť pravým tlačidlom myši do príslušnej časti. Veľa používateľov však o tom nevie a tlačí zbytočne aj obsah rámov, ktoré ich nezaujímajú.
  3. Obťažné pridávanie stránok s rámami k obľúbeným položkám
    Ak sa dostanete na nejakú konkrétnu stránku a zvolíte pridanie k obľúbeným položkám, načíta sa vám nabudúce iba úvodná strana, takže sa budete musieť vždy preklikať na cez odkazy, aby ste sa dostali tam, kam potrebujete. 
  4. Vyššia náročnosť na spracovanie
    Na zobrazenie stránok s rámami potrebujete vyšší výkon počítača ako na zobrazenie štandardných stránok. To je spôsobené tým, že každý rám je vlastne nové okno prehliadača, a teda viac zaťažuje systém.
  5. Nižšia rýchlosť načítavania
    Uvedomme si, že čím viac rámov máme, tým viac stránok sa bude musieť k používateľovi prenášať. Pri prehliadaní doma na disku to síce nezbadáme, ale pri naťahovaní tých istých stránok cez modem uvidíme zmenu rýchlosti.

Okrem spomínaných nevýhod existujú aj výhody. Ak sa teda rozhodnete svoje stránky vytvárať pomocou rámov, dajte si záležať na tom, aby boli optimalizované a s primeraným množstvom grafiky.

Multimediálne rozšírenie HTML
Multimediálne rozšírenie HTML nám umožňuje vkladanie obrázkov, apletov, videoklipov a ďalších možných rozšírení, ktoré môžu zmeniť našu stránku na nepoznanie.

Element Object
Ak budeme napríklad do stránky vložiť obrázok vo formáte TIFF, môžeme použiť nasledujúci kód:

<BODY>
<P>Tu je obrazok vo formate TIFF:
<OBJECT data="obrazok.tiff" type="image/tiff">
Toto je <EM>ten</EM> obrazok.
</OBJECT>
</BODY>

Predchádzajúce verzie HTML umožňovali vkladanie obrázkov (tag Img) a appletov (tag Applet), ale prinášalo to isté obmedzenia: Nebolo možné vkladať nové typy súborov a tag Applet pracoval iba s appletmi založenými na Jave.
Element Object nám dovoľuje určiť všetko potrebné na to, aby sa vkladané objekty zobrazovali v každom prehliadači. Okrem toho, že môžete do stránky vkladať typy súborov, ktoré štandardne prehliadač nepodporuje, môžete ním nahradiť tagy, ako je Img pre obrázky, Applet pre applety a Iframe pre ďalšie dokumenty.

Teraz sa pozrieme na opis atribútov tagu Object:

  • classid – určuje umiestnenie programu, ktorý spracuje vložený objekt. Okrem adresy je možné použiť aj volanie knižnice z registrov nasledujúcim spôsobom:
    <OBJECT classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" id=lbl1 width=40 height=250>
    <PARAM name="angle" VALUE="90">
    <PARAM name="alignment" VALUE="2">
    <PARAM name="BackStyle" VALUE="0">
    <PARAM name="caption" VALUE="Príklad atribútu classid">
    <PARAM name="FontName" VALUE="Verdana">
    <PARAM name="FontSize" VALUE="10">
    <PARAM name="FontBold" VALUE="0">
    <PARAM name="frcolor" VALUE="000000">
    </OBJECT>

    Ak sa pozrieme do registrov do vetvy HKEY_Classes_Root\CLSID\, nájdeme tam  vetvu nazvanú {99B42120-6EC7-11CF-A6C7-00AA00A47DD2}. Pri podrobnejšom skúmaní zistíme, že ide o ActiveX OLE komponent IELabel.OCX.
     
  • codebase – adresa, ktorá je spoločná pre všetky súbory uvedené v parametri classid, data a archive. Ak tento parameter neurčíme, dosadí si prehliadač adresu práve otvoreného dokumentu.
  • codetype – určuje typ dát, ktorý má prehliadač stiahnuť. Tento typ vychádza z normy RFC2046 (http://ds.internic.net/rfc/rfc2046.txt.).

Týmito parametrami sme prehliadaču povedali, kde nájde program potrebný na spracovanie nášho vloženého objektu a akým spôsobom má tento program stiahnuť. Teraz sa dostávame k samotnému objektu:

  • data – určuje adresu súboru, ktorý bude spracovaný
  • type – určuje typ dát, ktoré budú stiahnuté
  • archive – slúži na zadávanie alternatívnych adries pre prípad, že by súbor zadaný parametrom data nebol dostupný; keby sme chceli zadať viac alternatívnych adries, oddelili by sme ich medzerami
  • standby – užitočný parameter, ktorý prehliadač zobrazuje dovtedy, kým sú nahrané všetky potrebné programy a dáta

Teraz, keď máme nadefinované už aj dáta, ostáva nám nastaviť parametre celého objektu, ktoré sú podobné parametrom obrázkov:

  • align – zarovnávanie
  • width – šírka v pixeloch
  • height – výška v pixeloch
  • border – šírka okraja v pixeloch
  • hspace – voľný priestor okolo objektu v horizontálnom smere v pixeloch
  • vspace – voľný priestor okolo objektu vo vertikálnom smere v pixeloch

Príklad:

<OBJECT classid="http://www.planetarium.sk/Mesiac.py">
<OBJECT data="Mesiac.mpeg" type="application/mpeg">
<OBJECT data="Mesiac.gif" type="image/gif">
Obrázok <STRONG>mesiaca</STRONG> zo Zeme
</OBJECT>
</OBJECT>
</OBJECT>

Ak náš prehliadač nebude vedieť otvoriť súbor Mesiac.py (napísaný v jazyku Python), pokúsi sa na jeho mieste zobraziť súbor Mesiac.mpeg. Ak sa mu nepodarí ani toto, otvorí obrázok Mesiac.gif, a ak sa mu nepodarí ani to, zobrazí iba textovú správu. Samozrejme, celý príklad je fiktívny.

Záver
To je nateraz všetko. V nasledujúcej časti budeme pokračovať multimediálnym rozšírením a povieme si niečo napríklad aj o klikacích mapách.

 

 

Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá