Jak vytvářet www stránky - 20. díl

Multimediální rozšíření HTML umožňují autorům webových stránek vkládání obrázků, apletů (aplety jsou programy, které se automaticky stáhnou a spustí na počítači uživatele), video klipů a dalších rozšíření, jež mohou stránku proměnit doslova k nepoznání.
Multimediální rozšíření HTML umožňují autorům webových stránek vkládání obrázků, apletů (aplety jsou programy, které se automaticky stáhnou a spustí na počítači uživatele), video klipů a dalších rozšíření, jež mohou stránku proměnit doslova k nepoznání.

Element OBJECT

Pokud například budete chtít do stránky vložit obrázek ve formátu PNG, můžete použít následující kód:

<BODY>
<P>Zde je snímek naší školy ve formátu PNG:
<OBJECT data="skola.png" type="image/png">
Toto je <EM>snímek</EM> naší školy.
</OBJECT>
</BODY>

Předchozí verze HTML umožňovala vkládání obrázků (pomocí tagu IMG) a apletů (tag APPLET), což přinášelo některá zásadní omezení:

  • nebylo možné vkládat nové typy souborů
  • tag APPLET pracoval pouze s aplety založených na Javě. Místo tohoto tagu upřednostňuje nová norma element OBJECT.
Element OBJECT dovoluje autorům určit vše potřebné k tomu, aby se vkládaný objekt zobrazil bez ohledu na použitý prohlížeč. Kromě toho, že lze pomocí tohoto tagu vkládat do stránky typy souborů, jež prohlížeč standardně nepodporuje, můžete jím alternovat i některé stávající tagy:
  • Obrázky - místo tagu IMG.
  • Aplety - místo tagu APPLET.
  • Další HTML dokumenty - místo tagu IFRAME ("plovoucí" rám).
Pojďme se tedy podívat na tag OBJECT poněkud podrobněji. Začneme, jak jinak, popisem atributů:
  • classid - určuje umístění programu, který zpracuje vložený objekt (například pokud vložíte video sekvenci, určíte v tomto atributu adresu přehrávače). Kromě adresy lze použít i volání knihovny z registrů a sice následujícím způsobem:

    <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="Zdravíme všechny čtenáře">
    <PARAM name="FontName" VALUE="Arial">
    <PARAM name="FontSize" VALUE="15">
    <PARAM name="FontBold" VALUE="0">
    <PARAM name="frcolor" VALUE="9999999">
    </OBJECT>

    Pokud se podíváte do registrů do klíče HKEY_CLASSES_ROOT\CLSID\, najdete zde větev nazvanou {99B42120-6EC7-11CF-A6C7-00AA00A47DD2} (tedy stejně jako hodnota našeho parametru classid). Při podrobnějším zkoumání zjistíte, že náš vložený objekt zpracovává ActiveX OLE komponenta IELABEL.OCX, jíž jsou předány všechny parametry v elementech PARAM. K tomu, abyste věděli, jak parametry přidat, musíte znát způsob volání zmíněné komponenty, což už je ovšem spíše doménou programátorů.

  • codebase - adresa, která je společná všem souborům uvedených v parametrech classid, data a archive. Pokud tento parametr neurčíte, dosadí si browser adresu právě otevřeného dokumentu.
  • codetype - určuje typ dat, které má prohlížeč stáhnout. Tento typ vychází z normy RFC2046, kterou můžete najít na http://ds.internic.net/rfc/rfc2046.txt.
Třemi výše uvedenými parametry jsme prohlížeči sdělili, kde najde program potřebný ke zpracování našeho vloženého objektu a jakým způsobem má tento program stáhnout. Nyní přichází na řadu vlastní objekt.
  • data - určuje adresu souboru, který bude zpracován výše uvedeným programem.
  • type - stejně jako codetype určuje typ dat, která budou stažena.
  • archive - tento parametr slouží k zadání alternativních adres pro případ, že by soubor zadaný v parametru data nebyl z jakéhokoli důvodu dostupný. Pokud budete chtít zadat více náhradních adres, oddělte je mezerami.
  • standby - velmi užitečný parametr, který prohlížeč zobrazuje do doby, než jsou nahrané všechny potřebné programy a data.
V tuto chvíli máme nadefinovaná jak data, tak i program potřebný k jejich prezentaci. Zbývá pouze nastavit parametry celého objektu, což je velmi podobné definování parametrů obrázků:
  • align - zarovnání
  • width - šířka (v pixelech)
  • height - výška (v pixelech)
  • border - šířka rámečku (v pixelech)
  • hspace - volný prostor kolem objektu v horizontálním směru (v pixelech)
  • vspace - volný prostor kolem objektu ve vertikálním směru (v pixelech)
Nyní se podívejte na následující ukázku a zkuste odhadnout, co se asi tak stane v případě, že takovýto kód vložíte do své stránky.

<OBJECT classid="http://www.observer.mars/TheEarth.py">
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<OBJECT data="TheEarth.gif" type="image/gif">
Obrázek <STRONG>země</STRONG> z vesmíru.
</OBJECT>
</OBJECT>
</OBJECT>

Právě tato vlastnost je na elementu OBJECT velmi užitečná - pokud totiž váš prohlížeč nebude umět otevřít soubor TheEarth.py (napsaný v jazyce Python), pokusí se na stejném místě zobrazit soubor TheEarth.mpeg. Jestliže ani v tomto případě nepochodí, otevře obrázek TheEarth.gif a pokud ani ten nepůjde z nějakého důvodu zpracovat, ukáže pouze textovou zprávu.

Element PARAM

Objektům lze, jak jsme si ukázali na příkladu s kolmým textem, předávat různé parametry. Ty se definují v elementu PARAM, který má následující atributy:
  • name - jméno parametru
  • value - hodnota parametru
  • valuetype - nabízí tři hodnoty: data, ref a object:
    • data - objektu je přímo předána hodnota uvedená ve value.
    • ref - value odkazuje na adresu, kde jsou umístěna data, jež budou předána objektu
    • object - odkazuje na jiný objekt na téže stránce.
  • type - používá se pouze v případě, že parametr valuetype má hodnotu ref a určuje typ dat, která budou stažena ze zadané adresy.
Pro lepší objasnění se podívejme na následující ukázku:

<OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
Váš prohlížeč neumí zobrazovat aplikace napsané v jazyce Python
</OBJECT>

V tomto případě se volá program analogclock.py a jsou mu předány parametry height a width s hodnotou 40. Je na samotném programu, jak tyto parametry zpracuje - ve zde uvedené ukázce nastaví šířku a výšku na 40 pixelů.

Myslím, že pro dnešek jste zavaleni informacemi až po krk, takže si dáme pohov. Zkuste si pohrát s vkládáním objektů a těšte se na příští týden, kdy nás čekají obrázkové mapy.

Váš názor Další článek: Počítačové mapy ovládly kartografii

Témata článku: Video, Software, Programování, Str, Vertikální video, Stráň, Parametr, Zavalení, Díl, Element, Jak, Potřebný prostor, Šířka


Určitě si přečtěte

Nejlepší notebooky do 10 000 korun: Co má ještě smysl kupovat. A co ne?

Nejlepší notebooky do 10 000 korun: Co má ještě smysl kupovat. A co ne?

** Notebooky s cenou do deseti tisíc korun jsou plné kompromisů ** Existuje několik modelů dobře použitelných pro nenáročné použití ** Vhodnou alternativou jsou tablety nebo repasované počítače

David Polesný | 94

David Polesný
Jak vybrat notebookNotebooky
Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

Dostali jste nový počítač? Tohle s ním udělejte, než ho začnete používat

** Každý nový počítač si zaslouží počáteční péči ** Odinstalujte bloatware a nezapomeňte na vhodné nastavení ** Poradíme, jak se o počítač s Windows 10 postarat

David Polesný, Stanislav Janů | 71

David PolesnýStanislav Janů
PočítačeNotebooky
Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

** Desktopový Linux funguje a vypadá stále lépe ** Fedora 33 není výjimkou ** Ve stínu Windows a macOS tu vyrostly skvělé alternativy

Jakub Čížek | 156

Jakub Čížek
FedoraOperační systémyLinux
Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4

redakce
Mapy GoogleStreet View
Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

** S cenou do 20 tisíc lze vybrat solidní notebook na práci i hry ** Přenosné notebooky nabídnou i kovová těla a rychlý hardware ** Možná největší problém je nedostupnost, nejžádanější kusy jsou vyprodané

David Polesný | 33

David Polesný
VánoceNotebooky
Microsoft Defender je jeden z nejlepších antivirových programů, tvrdí výsledky AV-TESTu
Karel Kilián
Windows DefenderAntivirusWindows 10

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5