Met de komst van HTML is het internet een stuk interactiever geworden. Zo introduceerde HTML 1.0 het fenomeen "hyperlinks": de mogelijkheid om een verwijzing naar een andere (externe) pagina te maken die de gebruiker kan gebruiken om op deze pagina te komen. Later heeft HTML de interactiviteit van het internet op een nieuw niveau gebracht met:

• afbeeldingen;
• en later geluids- en videofragmenten.

Hyperlinks

Voor een hyperlink, of kortweg "link", gebruiken we het A element. De HTML code voor een link ziet er als volgt uit:

<a href="http://modernmarkup.nl/">Modern Markup</a>

Zoals je misschien al begrijpt wordt het href attribuut gebruikt om aan te geven naar welke pagina de link moet gaan als je erop klikt. Een link moet dus altijd een href attribuut hebben, anders is het namelijk geen link. De echte kenner gebruikt bij een link soms ook het title attribuut. We kennen natuurlijk het TITLE element uit het hoofdstuk over de document structuur en zijn naamgenoot doet ongeveer hetzelfde. Het TITLE element geeft informatie over de hele pagina, maar het title attribuut geeft alleen informatie over het element waar het aan vast zit, zoals we ook al zagen in het vorige hoofdstuk bij afkortingen. Dus bij een link kan een title attribuut extra informatie geven over de pagina waar naar gelinkt wordt zodat de bezoeker makkelijker kan bepalen of hij/zij wel die pagina wilt bezoeken.

Afbeeldingen in HTML

Voordat we beginnen met afbeeldingen moet er één ding benadrukt worden: Afbeeldingen die alleen maar bedoeld zijn om een pagina mee op te fleuren horen enkel en alleen thuis in de CSS van je website. In HTML gebruiken we alleen afbeeldingen die extra waarde geven aan de inhoud van jouw pagina. Als je bijvoorbeeld helemaal naar boven scrollt, dan zie je het Modern Markup logo. Omdat een logo belangrijk is, aangezien dat het gezicht van een bedrijf is, hebben we besloten om die als afbeelding in de HTML te doen. De rest van de afbeeldingen die te zien zijn, zijn er alleen om de pagina's er wat mooier uit te laten zien.

Een ander voorbeeld van wanneer het toegestaan is om een IMG element te gebruiken is wanneer je iets uitlegt en je hebt een afbeelding die jouw uitleg kan verduidelijken. Zo hebben we in de paragraaf over Koppen in het hoofdstuk Tekststructuur een afbeelding gebruikt om een mogelijke structuur van een pagina over ridders aan te geven. Deze afbeelding is op de pagina geplaatst d.m.v. het IMG element omdat de afbeelding niet is bedoeld om de pagina er mooier uit te laten zien, maar om de inhoud van de paragraaf te versterken.

Nu dat duidelijk is, kunnen we beginnen met de uitleg over afbeeldingen in HTML. In HTML gebruiken we, als we een afbeeldingen willen invoegen, het IMG element. Dit element heeft altijd de src en alt attributen, net zoals dat een A element altijd het href attribuut heeft. Voegen we IMG samen met het src en alt attribuut, dan ziet dat er zo uit:

<img src="plaatje.png" alt="Een afbeelding van een gans.">

Zoals je ziet heeft de IMG element alleen maar een start-tag. Het src attribuut wordt gebruikt om de IRI (URL) van het plaatje aan te geven. Het alt attribuut wordt gebruikt om een beknopte omschrijving van de afbeelding te geven. Indien de afbeelding niet geladen kan worden, dan wordt de omschrijving van het alt attribuut gebruikt. Het is dus belangrijk dat je in alt altijd een goede, beknopte omschrijving geeft van de afbeelding voor het geval er probleem ontstaan met de afbeelding (iemand zou de afbeelding bijv. van de server kunnen verwijderen).

Geluids- en videofragmenten

Geluids- en videofragmenten in HTML worden geregeld door het OBJECT element. Dit element heeft twee belangrijke attributen:

type attribuut

Dit attribuut geeft aan wat voor soort multimediabestand het OBJECT element moet laden. De waarde van dit attribuut moet net zoals bij het type attribuut van het LINK een media type zijn. Voor CSS was het media type text/css. Aangezien we geen CSS bestanden laden met het OBJECT element, zullen we een ander media type moeten gebruiken. Voor bijv. een MP3 bestand is dit audio/mpeg. Alle media typen zijn te vinden op de IANA website.

data attribuut

Als we eenmaal hebben aangegeven wat voor soort mediabestand het OBJECT element moet laden, dan geven we de locatie van het bestand op d.m.v. het data attribuut. De locatie is net zoals bij het href attribuut van het A element de IRI (URL) van het bestand.

Dus stel, we willen een MP3 bestand laten afspelen op de pagina, gebruik dan de volgende code:

<object type="audio/mpeg" data="geluidsfragment.mp3"></object>

Let wel: Zet nooit een geluidsfragment zoals een muzieknummer op je pagina omdat je het een leuk nummer vindt. Veel mensen vinden dit irritant en zal dus alleen maar bezoekers wegjagen. In andere woorden: als het geluidsfragment niet belangrijk is voor de inhoud van de pagina en dus gewoon voor "de sier" erop is gezet, zal het overgrote gedeelte van je bezoekers dit als storend ervaren en misschien zelfs je website verlaten, zeker als ze het geluid niet uit kunnen zetten. En dat kan met het bovenstaande voorbeeld niet. Indien je wilt dat de gebruiker de beschikking krijgt over een aantal knoppen zoals Play en Pauze, dan moet het object eerst worden opgemaakt. Dit doen we simpelweg door het object een breedte en een hoogte te geven d.m.v. de volgende CSS:

object {
	width:300px;
	height:16px;
}

Wat ook altijd wel zo prettig is, is het voorkomen dat het geluidsfragment niet gelijk begint met afspelen zodra het is geladen. Willen we deze functie toevoegen, dan moeten we gebruik maken van het PARAM. Hiermee geef je extra instructies aan het programma dat het bestand afspeelt. De naam van de instructie wordt gegeven in het name attribuut en de waarde van deze instructie wordt gegeven door het value attribuut. De instructie wij nu willen doorgeven is de autoplay instructie met de waarde false. Hiermee komen we op de onderstaande code:

<object type="audio/mpeg" data="/voorbeelden/dennis-bergkamp.mp3">
 <param name="autoplay" value="false">
</object>

Nu vraag je je misschien af wat er gebeurt als de browser het mediabestand niet kan laden. Dan moet de browser dus iets anders doen. Wat de browser moet doen is in het voorbeeld van het OBJECT element niet aangegeven. We doen dit simpelweg door het element een inhoud te geven. Deze inhoud wordt vervolgens weergegeven als de browser niks met het mediaobject kan doen. We veranderen ons voorbeeld dus als volgt:

<object type="audio/mpeg" data="/voorbeelden/dennis-bergkamp.mp3">
 <param name="autoplay" value="false">

 <p>Het blijkt dat het geluidsfragment niet afgespeeld kan worden. Het fragment met
 commentaar van Jack van Gelder tijdens de kwartfinale van het WK voetbal in 1998
 tegen Argentinië kan <a href="/voorbeelden/dennis-bergkamp.mp3">hier</a> worden
 gedownload.</p>
</object>

Het P element wordt dus weergeven als het MP3 bestand in het data attribuut niet geladen kan worden. Laten we de bovenstaande code in actie zien:

Als je nu een videofragment wilt laten zien op je pagina moet je eigenlijk precies hetzelfde doen. Je geeft aan waar het videofragment te vinden is in het data attribuut en vervolgens geef je de media type van het bestand aan in het type attribuut.

Er moet echter wel één kanttekening worden geplaatst: Internet Explorer heeft nog steeds problemen met het OBJECT element. Internet Explorer richt zich voornamelijk op het EMBED, dat veel lijkt op het OBJECT element. Echter, ondanks deze gelijkenissen is het OBJECT element niet goed ondersteund en kan dus voor problemen zorgen in Internet Explorer.

Nu we genoeg HTML achter de rug hebben, wordt het maar eens tijd om aan de slag te gaan met CSS door te kijken naar de CSS-syntax »