Grafika i multimedia

Uwagi ogólne

Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w sieci i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi.

Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i dźwiękowe, pozwalając przeglądarce sięgać do zasobów na dysku lokalnym, a nie do Sieci, co wydatnie zmniejsza ruch na łączach. Z tego też powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Nie przyjął się jeszcze dostatecznie powszechnie chwalony przez specjalistów format PNG (Portable Network Graphics).

Zaprezentujmy zatem podstawowe metody posługiwania się grafiką w procesie budowania dokumentów internetowych.

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny">

IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło). Efekt zastosowania konstrukcji jest następujący:

Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka.

Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład:

<IMG SRC="tucows.gif" HEIGHT=150>

<IMG SRC="tucows.gif" WIDTH=200>

Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka:

<IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50>

Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy o malejącej rozdzielczości obrazka na ekranie przeglądarki.

Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli:

<IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5>

Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu:

<IMG SRC="tucows.gif" HSPACE=50>

Ten tekst jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten, o 100 pikseli

<IMG SRC="tucows.gif" VSPACE=50>

Ten obrazek jest odsunięty od akapitu poprzedzającego i następującego po nim o 100 pikseli w pionie

Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

Konstrukcja ma postać <IMG SRC="obrazek" ALIGN=abc>

ALIGN=left abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=right abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=top abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=bottom abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

ALIGN=middle abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Przypomnijmy sobie również uwagi na temat roli parametru CLEAR, który pozwala regulować wzajemne położenie obrazka i tekstu (polecenie <BR> w Blokach).

Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron.

Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></CENTER>

Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań, na przykład:

Animacja Marquee

Uwaga: animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0. Odradzamy jej stosowanie na stronach WWW, choć może ona bardzo dobrze spełniać swoją rolę w archiwach elektronicznych HTML Help, które są oparte właśnie na Internet Explorerze, czy też w firmowych intranetach, w których standardową przeglądarką jest produkt Microsoftu.

Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis.

Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu.

Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</MARQUEE>. Na przykład:

Tekst sobie pływa

Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE parametr>

Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>:

Tekst może się poruszać na trzy sposoby:

BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.

behavior=scroll

BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.

behavior=slide

BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.

behavior=alternate

BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

Kolor Red

Kolor Yellow

Kolor Fuchsia

Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.

Ruch w lewo

Ruch w prawo

Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu.

Wysokość 50 pikseli

Szerokość 50 procent

Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy.

Ten napis przesunie się 20 razy i zatrzyma się

Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu.

Tekst przed animacjąTa animacja jest oddalona o 100 pikseli od sąsiadującego tekstuTekst za animacją

Tekst nad animacją
Ta animacja jest oddalona o 30 pikseli od sąsiadujących akapitów
Tekst pod animacją

Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>.

Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE.

Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT COLOR=kolor> Tekst </FONT>.

Kilka przykładów:

Biały tekst na czerwonym tle

Zauważmy, że w polu animacji można wstawić więcej spacji, w przeciwieństwie do zwykłego tekstu.

Czerwony tekst na żółtym tle

Biały, pogrubiony tekst na zielonym tle

Biały, pochylony tekst na zielonym tle

Biały, podkreślony tekst na zielonym tle

Uwaga: z nieznanych powodów nie jest możliwe zdefiniowanie białego tekstu na czarnym tle!

Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej.

Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy.

Scrollamount=5

Scrollamount=30

Scrollamount=50

Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda.

Scrolldelay=500 - skok co 0,5 sekundy

Scrolldelay=2000 - skok co 2 sekundy o 50 pikseli

Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją:

Tekst u góry pola Animacja

Tekst w połowie pola Animacja

Tekst u dołu pola Animacja

Publikacje elektroniczne w formacie Adobe PDF

W ostatnich latach ostatecznie wykrystalizował się niekwestionowany standard w kategorii publikacji elektronicznych - jest nim Adobe Portable Document Format (lub Portable Digital Format), znany pod popularnym skrótem PDF. Jeszcze kilka lat temu bardzo poważnym konkurentem był Envoy, firmy Tumbleweed Software, który był dołączany za darmo do pakietu biurowego WordPerfect Office. Producent zrezygnował jednak z rozwijania Envoya i Corel dostarcza teraz WordPerfect Office 2000 razem z narzędziami do tworzenia dokumentów PDF bezpośrednio z poziomu edytora WordPerfect 9 i pakietu prezentacyjnego Corel Presentations 9, bez konieczności kupowania bardzo kosztownego oprogramowania Adobe - niewątpliwie będzie to sprzyjać zarówno samemu PDF, jak i WordPerfectowi.

Dokumentacja w formacie PDF jest bardzo rozpowszechniona na świecie i jest ogólnie przyjętym standardem w firmach, biurach czy na uczelniach. PDF współpracuje bezpośrednio z dokumentami w formacie HTML i możliwe jest użycie dość skomplikowanych sposobów wbudowania PDF, łącznie z zastosowaniem skryptów (zainteresowanym Czytelnikom polecamy tutaj dostępną w Polsce książkę Thomasa Merza, "Web Publishing with Acrobat PDF"). Na codzienne potrzeby można się jednak ograniczyć do trzech bardzo prostych metod. Należy jednak pamiętać, że czytelnik naszej strony musi dysponować Acrobat Readerem - jest to akurat jedyny składnik rozbudowanego oprogramowania PDF, który Adobe dostarcza za darmo (jeszcze kilka lat temu nawet za Readera trzeba było płacić). Najnowsza wersja finalna ma numer 4.05 (połowa roku 2000).

Pierwszy sposób polega na bezpośrednim odwołaniu się do dokumentu PDF w dokumencie HTML, np.

<a href=licence.pdf>kliknij tutaj</a>

Dokument PDF ukazuje się bezpośrednio w przeglądarce (testowane w IE 5 i NC 4.5) i jest opatrzony narzędziami nawigacyjno-zarządzającymi Acrobat Readera. Sam Reader uruchamia się także w tle (odrębna "instancja"), jeśli jest to wersja 3, natomiast w wersji 4 uruchamia się wyłącznie jako wtyczka w przeglądarce. Ponadto wersja 4 pozwala zapisywać plik PDF bezpośrednio z poziomu przeglądarki (ikonka dyskietki w menu Readera), na co nie pozwala wersja 3. Tym bardziej należy więc zachęcać czytelnika do zainstalowania nowszego Readera.

kliknij tutaj - dokument ma objętość 9 KB

Drugim sposobem, będącym tylko odmianą pierwszego, jest odwołanie do oddzielnej strony, na której z kolei jest zawarte odwołanie do dokumentu PDF.

kliknij tutaj

Trzecia metoda to użycie polecenia EMBED. Najwygodniej jest je oczywiście umieścić na odrębnej stronie, w przykładowej postaci:

<embed src="licence.pdf" width=700 height=500>

Użycie rozmiarów zagnieżdżenia jest konieczne, gdyż IE nie poradzi sobie z powiększeniem okienka Readera. Z kolei posiadacz Navigatora zobaczy wprawdzie wbudowany dokument, ale i tak będzie musiał kliknąć prawym przyciskiem myszki i wybrać polecenie Open this (plik.pdf). Dopiero wtedy ukaże się całe menu Readera.

kliknij tutaj

Jak z tego widać, najwygodniejsze jest użycie bezpośredniego odwołania do pliku PDF, czyli pierwsza z podanych metod.

Dźwięk, wideo, VRML

Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek, co ciekawe, dokumentacja HTML 4 właściwie milczy na temat dźwięku! Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady:

Plik dźwiękowy WAV (styl Netscape) - <embed src="../wav/complete.wav" border=0 width=x height=y>

Plik dźwiękowy WAV (styl Microsoft) <bgsound src="../wav/complete.wav" loop=infinite>

Plik dźwiękowy MIDI (styl Netscape) - <embed src="../midi/airwolf.mid" border=0>

Przykład dźwięku zagnieżdżonego:

loop=x określa liczbę powtórzeń dźwięku
width=x height=y określa rozmiary wyświetlanego obrazka wtyczki (np. dla natywnej wtyczki LiveAudio Netscape'a jest to 145x60, dla Crescendo 200x55, a dla WebTracks 56x50.)
autostart=true | false nakazuje lub zakazuje automatycznego startu odtwarzania
hidden=true|false nakazuje schować|wyświetlić obrazek wtyczki
palette=foreground|background pozwala uniknąć ewentualnego migotania palety kolorów, gdy przeglądarka pracuje w trybie 256 kolorów
pluginspace="url" wskazuje miejsce, gdzie znajduje się wtyczka, jeśli użytkownik jej jeszcze nie zainstalował. Adres ten powinien być zgodny ze wskazaniami producenta wtyczki.

Użycie hidden=true pozwala symulować dźwięk w tle (podobnie jak w przypadku BGSOUND dla IE). Jest to rozwiązanie uniwersalne dla obu czołowych przeglądarek Zaleca się wtedy umieszczenie polecenia EMBED na samym końcu dokumentu, gdyż wtedy wcześniej wczyta się tekstowa zawartość strony.

Starsze przeglądarki, które nie akceptują polecenia EMBED, mogą zobaczyć polecenie NOEMBED:
<EMBED SRC="plik.mid" WIDTH="200" HEIGHT="150">
<NOEMBED>Potrzebujesz Navigatora lub Internet Explorera aby to usłyszeć</NOEMBED>
</EMBED>

Polecenie EMBED sprawia trochę kłopotów, jeśli chodzi o wielkość wyświetlanego panelu. Każda z wtyczek jest wyświetlana najlepiej w sobie tylko należnych wymiarach, więc podanie 145x60, co miałoby honorować LiveAudio, spowoduje, że wtyczka Crescendo albo Windows Media Player będą wyświetlane "kulawo". Problem polega na tym, że nie wiemy, jakim programem dysponuje czytelnik naszej strony, choć możemy założyć z dużą dozą pewności, że posiadacze Internet Explorera (jakieś trzy czwarte internetowej populacji w Polsce) korzystają głównie z Windows Media Playera, a właściciele Navigatora, zwykle z LiveAudio. Oczywiście może się zdarzyć, że jakiś popularny odtwarzacz dźwiękowy, np. WinAmp, przejmuje domyślnie obsługę plików MIDI, zabierając je LiveAudio i Media Playerowi.

Gdybyśmy zrezygnowali z podawania wymiarów, jedynie Windows Media Player poprawnie wyświetli podstawową wersję panelu, natomiast inne wtyczki przyjmą rozmiary nie bardzo zgodne z właściwymi. Wszystko to powoduje, że webmaster staje przed problemem czysto estetycznym, choć takie brzydko wyglądające panele także jakoś tam spełniają swoje zadanie, zwłaszcza że pod lewym lub prawym klawiszem myszki widnieją polecenia wtyczki.

Plik dźwiękowy MIDI (styl Microsoft) - <bgsound src="../midi/antartic.mid" loop=1>

Przykład dźwięku w tle (IE):

loop=x oznacza liczbę powtórzeń. Loop=infinite nakazuje powtarzać dźwięk bez końca.
balance=x (x=-10000;10000) określa równowagę między głośnikami w przypadku dźwięku stereofonicznego
volume=x (x=-10000;0) wyznacza głośność. Wartość tę należy samodzielnie wypraktykować.

Jedynie Internet Explorer obsługuje konstrukcję BGSOUND. Navigator ignoruje ją i "milczy". Z kolei polecenie EMBED jest obsługiwane przez obie przeglądarki - Navigator obsługuje zagnieżdżony w ten sposób plik dźwiękowy przez wtyczkę (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przeglądarką Windows Media Playera. Obie przeglądarki mogą także korzystać z innych wtyczek - dość popularny jest program Cresendo, istniejący w wersjach ActiveX dla IE i wtyczki dla Navigatora (http://www.liveupdate.com), ale istnieją też inne wtyczki, np. WebTracks, firmy WildCat Software (http://www.wildcat.com). WebTracks obsługuje pliki MIDI, ale w pierwszym rzędzie swój własny format WTX.

Interesującym rozwiązaniem jest wtyczka Beatnik, firmy Headspace, która obsługuje format RMF, czyli Rich Music Format (proszę zauważyć podobieństwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalająca uzyskać bardzo bogate brzemienie, przy niewielkiej objętości pliku. Jest to ciągle jednak mało popularna technika.

Przykładowe polecenie zagnieżdżające plik RMF może wyglądać następująco:

<EMBED SRC="affectio.rmf" TYPE="audio/rmf" WIDTH=144 HEIGHT=60 DISPLAY=SONG MODE=SCOPE AUTOSTART=TRUE LOOP=FALSE VOLUME=100>

A oto przykład (jeśli dysponujesz wtyczką Beatnik)

Beatnik jest dostępny w postaci wtyczki dla Navigatora lub ActiveX dla Internet Explorera. najlepiej jest skopiować z witryny Headspace program instalacyjny, który zawiera obie wtyczki jednocześnie.

Plik wideo AVI (styl Netscape) - <embed src="../DRAGDROP.AVI" border=0>

Przykład

Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

dynsrc=url podaje adres pliku AVI
loop=x określa liczbę powtórzeń, loop=infinite oznacza powtarzanie bez końca
loopdelay=n określa w milisekundach opóźnienie między kolejnymi powtórzeniami
start=fileopen|mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesunięciu kursora nad ikonę odtwarzacza
controls wyświetla panel kontrolny odtwarzacza AVI

Przykład

Uwaga: styl Microsoftu nie jest zalecany.

Plik VRML (styl Netscape)

<EMBED SRC="vrlm.wrl" WIDTH="200" HEIGHT="150">

Przykład (za "HTML Reference Library")

Pliki VRML jest obsługiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera.

Plik RealAudio

Na stronie możemy też umieścić plik RealAudio. Pliki takie można sporządzić za pomocą popularnego programu do obróbki dźwięku, CoolEdit, albo za pomocą oryginalnego RealAudio Encoder, dostępnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV. Do tworzenia plików RA najlepszy jest darmowy RealProducer G2, dostępny na stronie RealNetworks.

Wystarczy umieścić na stronie bezpośredni odsyłacz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a>

Przykład

Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest użycie polecenia EMBED, np.:

<embed src="plik.ra" height=105 width=275 autostart=true type=audio/x-pn-realaudio-plugin>

Spowoduje to wyświetlenie interfejsu RealPlayera, jeśli jest on zainstalowany w systemie użytkownika. Do odtwarzania dźwięku RealAudio w środowisku Windows najlepiej się nadaje darmowy RealPlayer G2.

Przykład

Pliki VQF

W pewnym momencie popularnością cieszył się format VQF (TwinVQ Technology) japońskiej firmy Yamaha, aczkolwiek ostatnio jakoś mniej o niej słychać (formaty Microsoftu, Real Networks czy QuickTime, nie mówiąc już o MP3, zdecydowanie zawładnęły Internetem). Pliki w tym formacie charakteryzują się wysokością jakością przy dużym stopniu kompresji. Do odtwarzania używany jest darmowy YAMAHA SoundVQ Player, który jednocześnie stanowi wtyczkę dla przeglądarek internetowych. Do tworzenia dźwięku w tym formacie można wykorzystać również darmowy enkoder firmy Yamaha.

Webmaster chcący wstawić plik VQF na swoją stronę, musi sporządzić nie tylko ten plik, ale i specjalny, tekstowy plik "wprowadzający" .vqe, który podaje adres internetowy pliku VQF. Co istotne, konieczne jest w nim podanie adresu bezwzględnego, czyli http://www.../pliczek.vqf (takiego pliku nie da się odtworzyć lokalnie, natomiast podanie adresu względnego spowoduje, że nie będzie on odtwarzany w Sieci, choć na dysku będzie działać). Jest to tylko i wyłącznie adres pliku VQF, nic więcej.

Przykładowa składnia wywołująca panel odtwarzacza na stronie wygląda następująco:

<EMBED SRC="welcome.vqe" AUTOSTART="true"
REPEAT="FALSE" VOLUME="100"
WIDTH="150" HEIGHT="40"
TYPE="audio/x-twinvq-plugin"
PLUGINSPAGE="http://www.yamaha.co.jp/xg/SoundVQ/">

A oto przykład, w którym wykorzystujemy plik welcome.vqf, dostarczany z odtwarzaczem (ok. 70 KB).

Plik MPEG i MP3

Pliki MPEG czy MP3 możemy umieszczać na stronie w postaci zwykłego odsyłacza albo zagnieżdżać je za pomocą polecenia EMBED, np.

<embed src="plik.mp3" autostart=true>

Przykład - (objętość ok. 63 KB).

Plik MOV (QuickTime)

<embed src="charriot.mov" border=0 width=200 height=17>

Przykład (Charriots of Fire)

Plik ASF (Advanced Streaming Format, Microsoft) i WMA (Windows Media Audio)

Kliknij tutaj (wymaga Windows Media Player)

Można także zagnieździć Windows Media Player na stronie.

Na przykład:

<Embed type="application/x-mplayer2" src="pliczek.asf" Name=MMPlayer1 Autostart=1 ShowControls=1 ShowDisplay=1 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=300>

Nawiasem mówiąc, możemy wymusić użycie Windows Media Playera, stosując zagnieżdżenie jego kontrolki na stronie, za pomocą polecenia <object>:

<OBJECT 
  ID="mediaPlayer"  
  CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 
    TYPE="application/x-oleobject">
  <PARAM NAME="fileName"   VALUE="jazzball.mid">
  <PARAM NAME="autoStart" VALUE="false">
  <PARAM NAME="showControls" VALUE="true">
</OBJECT>

Przykłady użycia (wczytanie chwilkę potrwa, gdyż strona zawiera kilka przykładów)

Rozwiązanie to można stosować bezpiecznie zwłaszcza w firmowych intranetach, opartych na Internet Explorerze.

Plik Flash (Macromedia)

Wersja 3 Shockwave Flash oferuje znacznie udoskonalone możliwości budowania efektownych, a zarazem zajmujących stosunkowo niewiele miejsca, interaktywnych animacji. Dobrym przykładem zastosowania tego formatu jest strona firmy Polbox, którą można oglądać zarówno w wersji tradycyjnej (HTML), jak i multimedialnej (Flash). A oto mały przykład zaczerpnięty z serwisu Webdesign.

Kliknij tutaj (15 KB) - konieczne jest posiadanie wtyczki w wersji 3, a jeszcze lepiej 4, która jest dostarczana standardowo z Internet Explorerem i Netscape Navigatorem.

Oto przykład zagnieżdżenia animacji. Proszę w nim zwrócić uwagę na wymiary, kolor tła, typ MIME.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://www.ceti.com.pl/~flash/swflash.cab#version=3,0,0,0"
ID=film WIDTH=100 HEIGHT=120>
    <PARAM NAME=movie VALUE="film.swf"> 
    <PARAM NAME=loop VALUE=false> 
    <PARAM NAME=quality VALUE=high> 
    <PARAM NAME=scale VALUE=exactfit> 
    <PARAM NAME=bgcolor VALUE=#FFFFFF> 
    <EMBED SRC="film.swf"
       NAME=film swLiveConnect=TRUE WIDTH=100 HEIGHT=120
       LOOP=false QUALITY=high SCALE=exactfit BGCOLOR=#FFFFFF
       TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.ceti.com.pl/~flash">
   </EMBED>
  </OBJECT>