Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

We hebben in deze cursus al heel wat tekst bekeken maar het web zou wel heel vervelend zijn als we enkel tekst zouden gebruiken. We gaan nu bekijken hoe we het web tot leven kunnen brengen met veel interessantere inhoud! In deze module onderzoeken we hoe je HTML kan gebruiken om multimedia in je wepagina's in te bedden. Dit houdt het gebruik van afbeeldingen in en hoe we video, audio en zelfs volledige webpagina's kunnen inbedden.

Vereisten

Voor je met deze module begint, zou je een redelijke basiskennis van HTML moeten hebben, zoals die in Introductie op HTML is behandeld. Als je deze module niet eerst hebt gelezen en verwerkt (of iets gelijkaardigs) doe dat dan eerst en kom dan terug!

Opmerking: Als je op een computer/tablet/ander apparaat werkt en je bent niet in staat om je eigen bestanden te creëren, kan je de (meeste) codevoorbeelden uitproberen in een online codeerprogramma zoals JSBin of Thimble.

Gidsen

Deze module bevat een aantal artikelen waarin alle basisprincipes over het inbedden van multimedia worden doorgenomen.

Afbeeldingen in HTML
Er bestaan ook nog andere soorten multimedia, maar het is logisch om met het nederige <img>-element te beginnen, dat we gebruiken om een eenvoudige afbeelding in een webpagina te plaatsen. In dit artikel gaan we dieper in op het gebruik van dit element. We bespreken de basis, hoe we er verklarende bijschriften (captions in het Engels) aan kunnen toevoegen met het <figure>-element, en hoe het zich verhoudt tot CSS-afbeeldingen voor de achtergrond.
Video en audio
In dit artikel bekijken we hoe de HTML5 <video>- en <audio>-elementen gebruiken om video en audio in onze pagina's in te bedden. We bespreken de basis, hoe we de toegang tot verschillende bestandsformaten op verschillende browsers mogelijk maken, hoe we bijschriften en ondertitels toevoegen en hoe we noodoplossingen voor oudere browsers creëren.
Van <object> tot <iframe> — andere technologiën waarmee we inhoud kunnen inbedden
Nu gaan we een zijpad inslaan en een aantal elementen bekijken waarmee je een breed gamma van inhouden en bestandstypes in je webpagina's kan inbedden: de <iframe>-, <embed>- en <object>-elementen. <iframe>s zijn er om andere webpagina's in je pagina in te bedden en met de andere twee kan je PDFs, SVG, en zelfs Flash — een technologie die op zijn retour is, maar die je toch op nog wel eens zal tegenkomen.
Vectorafbeeldingen aan het web toevoegen
Vectorafbeeldingen kunnen in een aantal situaties zeer nuttig zijn. In tegenstelling tot gewone formaten zoals PNG/JPG, zullen ze niet vervormd worden of verpixelen (de afbeelding verandert in een hoop blokjes) als je erop inzoomt. Ze kunnen glad en mooi blijven als ze worden vergroot of verkleind. Dit artikel is een inleiding op wat vectorafbeeldingen zijn en hoe je dit populaire SVG-formaat in je webpagina's kan opnemen.
Responsieve afbeeldingen
Met zo veel verschillende soorten apparaten waarmee je vandaaag op het web kan surfen, van mobiele telefoons tot vaste computers — is responsief ontwerp een essentieel concept dat je goed moet begrijpen in de moderne webwereld. Responsief ontwerp verwijst naar de creatie van webpagina's die hun eigenschappen automatisch aanpassen aan de verschillende schermgroottes, resoluties enz.  Later gaan we dit in onze CSS-module in veel groter detail bekijken. Nu beperken we ons tot de instrumenten waarover HTML beschikt, waaronder het <picture> element, die we kunnen gebruiken om responsieve afbeeldingen te maken.

Evaluatie

De volgende evaluaties dienen om je kennis te testen van de HTML-basisprincipes die hierboven werden besproken :

Mozilla splash pagina
In deze evaluatie testen we je kennis van een aantal technieken die in de artikelen van deze module werden doorgenomen. Je zal een aantal afbeeldingen en video aan een funky splash page over Mozilla toevoegen!

Zie ook

Een afbeeldingsmap bovenop een afbeelding toevoegen
Afbeeldingsmappen beschikken over een mechanisme waarmee je verschillende delen van een afbeelding kan verbinden met verschillende plaatsen (zie het als een map die je met extra informatie verbindt over elk land waarop je klikt.) Deze techniek is soms nuttig.
Basis Webvaardigheden 2

Dit is een uitstekende cursus van de Mozilla stichting die een aantal van de vaardigheden test en onderzoekt waar we in Multimedia inbedden hebben besproken. Hier kan je dieper ingaan op de basisprincipes waarmee we webpagina's samenstellen, hoe we ze toegankelijk maken voor iedereen, hoe we  hulpmiddelen delen, online media gebruiken en en open source projecten werken.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Tonnes, mientje
 Laatst bijgewerkt door: Tonnes,