Een website bouwen met HTML en CSS practicum 6
Multimedia op een website De webpagina's bestonden tot nu toe alleen maar uit tekst. Dat ziet er natuurlijk een beetje saai uit. Tijdens dit practicum gaan we kijken hoe plaatjes, geluidsfragmenten, FLASHmovies, MPEG-filmpjes en JAVA-applets op een webpagina geplaatst kunnen worden. Een html-bestand bestaat alleen uit tekst en tags. Afbeeldingen, geluid en filmpjes maken geen deel uit van het html-bestand. Vanuit het html-bestand wordt naar deze objecten verwezen. Op de cd-rom staat een voorbeeld van een webpagina, waarin verwezen wordt naar een aantal multimedia objecten.
-1-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 6 In de eerste versies van HTML werden er voor afbeeldingen, geluid en film verschillende elementen gebruikt: ·
voor het tonen van afbeeldingen op een webpagina
·
voor het plaatsen van een JAVA-applet op een webpagina
·
<embed> voor het afspelen van geluid en film op een webpagina
Vanaf HTML versie 4 is door het W3C aangegeven, dat het de voorkeur verdient om voor alle multimedia objecten het element te gebruiken. De elementen , en <embed> zullen op termijn niet meer worden ondersteund door modernere versies van browsers.
ActiveX Controls Om multimedia objecten goed te kunnen afspelen op een webpagina moeten er extra programma's worden toegevoegd aan de browser. De extra programma's, waarmee Internet Explorer moet worden uitgebreid, heten ActiveX Controls. Voorbeelden van ActiveX Controls zijn: · · ·
De Macromedia Flash Player waarmee je FLASHmovies kunt afspelen. De Windows Media Player waarmee geluid en mpeg-filmpjes kunnen worden afgespeeld. De Surround Video Control waarmee jpg-afbeeldingen een 3D-uiterlijk krijgen.
Een uitgebreid overzicht van verschillende ActiveX Controls kun je vinden op: http://activex.microsoft.com/activex
-2-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 6
Afbeeldingen Voor het weergeven van afbeelding op een webpagina met behulp van het element moet je de volgende sourcecode gebruiken:
Zoals je in het voorbeeld hebt kunnen zien, wordt de afbeelding door de browser Internet Explorer in een iframe geplaatst.
Bij het object-element worden de volgende attributen gebruikt: data type
Hier staat de afbeelding, die moet worden getoond. Wanneer de afbeelding in een aparte map staat, dan moet ook het pad vermeld worden. Hier staat het type afbeelding. Bijvoorbeeld: image/gif of image/jpg of image/png.
width Hier staat de breedte van de afbeelding. height Hier staat de hoogte van de afbeelding.
border Hier staat de dikte van de rand om de afbeelding. Attribuutwaarde 0 levert geen rand. Dat ziet er niet netjes uit, je kunt dus (voorlopig) beter gebruik blijven maken van het element :
-3-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 6
Geluid Voor het afspelen van geluid op een webpagina kun je gebruik maken van de Windows media Player:
Bij het object-element worden de volgende attributen gebruikt: classid width
height
Hier staat welke ActiveX Control er moet worden gebruikt. In dit geval de Windows Media Player.
Hier kun je de breedte van de Windows Media Player instellen. Hier kun je de hoogte van de Windows Media Player instellen.
codebase Hier staat de plaats, waar de Windows Media Player gevonden kan worden. type
Hier staat het type object, dat moet worden afgespeeld.
Met behulp van parameter-elementen kun je extra informatie over het afspelen van het geluid doorgeven aan de browser. Bij het parameter-element worden de volgende attributen gebruikt: name Hier staat de naam van de parameter. Bijvoorbeeld 'filename' of 'autostart'.
value Hier staat de waarde van de parameter. Bijvoorbeeld 'muziek.mid' of 'true'.
-4-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 6
FLASH-movies Voor het afspelen van een FLASH-movie op een webpagina heb je de Macromedia Flash Player nodig:
Bij het object-element worden de volgende attributen gebruikt: classid width
height
Hier staat welke ActiveX Control er moet worden gebruikt. In dit geval de Macromedia Flash Player. Hier kun je de breedte van de FLASH-movie instellen. Hier kun je de hoogte van de FLASH-movie instellen.
codebase Hier staat de plaats, waar de Macromedia Flash Player gevonden kan worden. type
Hier staat het type object, dat moet worden afgespeeld.
Met behulp van parameter-elementen kun je extra informatie over het afspelen van de FLASH-movie doorgeven aan de browser. Bij het parameter-element worden de volgende attributen gebruikt: name Hier staat de naam van de parameter. Bijvoorbeeld 'movie' of 'play'.
value Hier staat de waarde van de parameter. Bijvoorbeeld 'film.swf' of 'true'.
-5-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 6
JAVA-applets Wanneer je een JAVA-applet op een webpagina plaatst, dan moeten alle classbestanden in dezelfde map staan als het html-bestand:
Bij het object-element worden de volgende attributen gebruikt: classid width
height
Hier staat de class, die nodig is om de applet op de webpagina te tonen. De class(es) moeten in dezelfde map staan als het html-bestand!! Hier kun je de breedte van de JAVA-applet instellen. Hier kun je de hoogte van de JAVA-applet instellen.
codetype Hier staat het type object, dat moet worden afgespeeld. Met behulp van parameter-elementen kun je extra informatie over het tonen van de applet doorgeven aan de browser. Bij het parameter-element worden de volgende attributen gebruikt: name Hier staat de naam van de parameter. Bijvoorbeeld 'font' of 'size'.
value Hier staat de waarde van de parameter. Bijvoorbeeld 'Arial' of '20'.
-6-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 6
MPEG-movies Voor het afspelen van een MPEG-movie op een webpagina heb je de Windows Media Player nodig:
Bij het object-element worden de volgende attributen gebruikt: classid width
height
Hier staat welke ActiveX Control er moet worden gebruikt. In dit geval de Windows Media Player.
Hier kun je de breedte van de Windows Media Player instellen. Hier kun je de hoogte van de Windows Media Player instellen.
codebase Hier staat de plaats, waar de Windows Media Player gevonden kan worden. type
Hier staat het type object, dat moet worden afgespeeld.
Met behulp van parameter-elementen kun je extra informatie over het afspelen van de MPEG-movie doorgeven aan de browser. Bij het parameter-element worden de volgende attributen gebruikt: name Hier staat de naam van de parameter. Bijvoorbeeld 'filename' of 'autostart'.
value Hier staat de waarde van de parameter. Bijvoorbeeld 'film.mpeg' of 'true'.
-7-
© Edu’Actief