Met HTML is het mogelijk media-objecten zoals figuren, animaties, geluiden, interactieve toepassingen zoals Java-applets op een webpagina in te voegen.
Voor al deze toepassingen hoef je in principe slechts één tag te kennen : de OBJECT-tag. Dit is de overkoepelende tag voor het invoegen van objecten op een webpagina.
Daar webauteurs de specifieke IMG-tag (voor figuren) en de APPLET-tag nog steeds veelvuldig gebruiken, komen die ook aan bod in deze cursus.
De IMG-tag: figuren
Gebruik van de IMG-tag
Met de IMG-tag kan je figuren invoegen op een webpagina. Het attribuut src bevat de URI waar de figuur kan worden gehaald (absolute of relatieve verwijzing). Het attribuut alt bevat een beschrijving van de figuur (voor bv. niet Visuele User Agents).
<img src="../images/bos.jpg" alt="Een bos">
Veelgebruikte attributen
alt:
Alternatieve tekst voor de figuur
width:
De breedte van de figuur
height:
De grootte van de figuur
border:
De rand rond de figuur
align:
Uitlijning van tekst ten opzichte van de figuur
hspace:
Witruimte links en rechts van de figuur
vspace:
Witruimte boven en onder de figuur
usemap:
Voor gebruik van een client-side imagemap (zie verderop)
De APPLET-tag stelt je in staat JAVA-applets op te nemen op je webpagina. JAVA-applets worden gemaakt in de programmeertaal JAVA. Meer over JAVA bij de ontwikkelaars van SUN.
Aan de applet kunnen parameters worden meegegeven met de PARAM-tag.
De APPLET-tag is afgekeurd met al zijn attributen ten voordele van de OBJECT-tag.
Naar de toekomst toe is het de bedoeling om voor het invoegen van objecten zoals figuren, JAVA-applets, fimpjes, geluiden, animaties, ... de OBJECT-tag te gebruiken.
Het is evenwel nog niet aan te raden dit nu reeds volop te gebruiken daar een aantal voorname browsers (Netscape, IE) dit nog niet ten volle ondersteunen.
De OBJECT-tag ondersteunt onder meer de attributen width, height, align, hspace, vspace, border, alt.
Figuren
Daar niet alle browsers de OBJECT-tag ondersteunen voor het invoegen van figuren is het aan te raden de IMG-tag te blijven gebruiken.
In onderstaand voorbeeld wordt de figuur ingevoegd met behulp van de OBJECT-tag. Als dit niet lukt wordt de figuur ingevoegd met de IMG-tag.
<OBJECT data="../images/bos.jpg" type="image/jpg" width="200" height="133">
<i>Geen OBJECT-insluiting : we gebruiken de IMG-tag :</i><br><br>
<img src="../images/bos.jpg" width="200" height="133" type="image/jpg">
</OBJECT>
Een flash-animatie kan je invoegen met de OBJECT-tag.
Het attribuut classid bevat een waarde waardoor uniek wordt vastgelegd welk object zal worden gebruikt: hier de code voor een flash-animatie.
Voor flash-animaties, geluidfragmenten, fimpjes kan je ook gebruik maken van de EMBED-tag. Hier gebruiken we ze beiden: wanneer OBJECT niet wordt herkend wordt EMBED geprobeerd.EMBED is een veelgebruikte tag, maar is niet erkend door het W3C.
<object classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">
<param name="BackColor" value="13434879">
<param name="TitleFontColor" value="0">
<param name="DayLength" value="2">
<p>
Kalendercontrol kan niet worden geladen.
</p>
</object>
Meer over deze controls op de website van Microsoft MSDN
Imagemaps
Met een imagemap kan je ervoor zorgen dat op één figuur meerdere aanklikbare gebieden gedefiniëerd kunnen worden.
Imagemaps kunnen client-side en server-side worden gebruikt. Client-side imagemaps zijn aanklikbare figuren waarbij het afhandelen van de plaats waar de gebruiker klikte en de daarmee gekoppeld hyperlink door de browser gebeuren. Bij server-side imagemaps worden de coordinaten waar werd geklikt naar de webserver gestuurd waar dan de actie wordt afgehandeld. In dit deel van de cursus beperken we ons tot client-side programmeren.
Om aan te geven dat je op een figuur een imagemap wenst toe te passen gebruik je het attribuut usemap. Dit attribuut bevat de naam van de te gebruiken map, voorafgegaan door een spoorwegteken (#).
De naam van de map leg je vast in het attribuut name van de MAP-tag. Binnen dit MAP-element maak je een patroon dat de aanklikbare gebieden aangeeft die op de figuur worden toegepast.
Je definiëert de aanklikbare gebieden met de AREA-tag. Deze gebieden kunnen drie vormen (shapes) aannemen:
rect : rechthoekig, coordinaten : links-x, top-y, rechts-x, onder-y
circle : cirkel, coordinaten : middelpunt-x, middelpunt-y, straal
Deze vorm duid je aan met het shape-attribuut van de AREA-tag. De afmetingen van het gebied geef je aan met het coords-attribuut van de AREA-tag. Het href-attribuut geeft aan welk document moet worden geopend wanneer de koppeling wordt gevolgd.
Figuur als achtergrond
Het attribuut background van de BODY-tag
In het hoofdstuk structuur van een document heb geleerd hoe je de achtergrondkleur van een pagina kan instellen.
Je kan voor het opmaken van de achtergrond van een document ook gebruik maken van een figuur. Hiervoor kan je gebruik maken van het afgekeurde attribuut background van de BODY-tag. Je zorgt er dan natuurlijk voor dat de attribuutwaarde een correcte verwijzijng naar de figuur bevat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gebruik van een achtergrondfiguur</title>
</head>
<body background="../../images/achter1.jpg">
<h2>Gebruik van figuren een achtergrondfiguur</h2>
<p>De figuur wordt zowel horizontaal als verikaal herhaald.
</body>
</html>
De achtergrondfiguur wordt steeds herhaald, zowel horizontaal als vertikaal.
De gebruikte figuur ziet er zo uit :
Wanneer de figuur geschikt is om steeds te worden herhaald verkrijg je op deze manier een mooie achtergrond.
Wanneer een figuur reeds de volledige breedte van het scherm vult, wordt deze enkel vertikaal herhaald :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gebruik van een achtergrondfiguur 2</title>
</head>
<body background="../../images/achter2.gif" leftmargin="100px">
<h2>Gebruik van figuren een achtergrondfiguur 2</h2>
<p>Wanneer de figuur breed genoeg is wordt deze enkel vertikaal herhaald.
</body>
</html>
De figuur (met een randje errond voor de duidelijkheid):
In dit laatst voorbeeld wordt met het afgekeurde attribuut leftmargin gezorgd dat de tekst niet in de 'zwarte band' van de pagina terechtkomt.
Achtergrondfiguur met Style Sheets
Wanneer je een achtergrondfiguur voor de volledige pagina wenst op te geven met behulp van Style Sheets maak je gebruik van de eigenschap background of background-image, die je koppelt aan de BODY-tag.
De bestandsnaam van de figuur geef je op na de vermelding url (we maken een verwijzijng naar een extern bestand).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gebruik van een achtergrondfiguur met CSS 1</title>
<STYLE type="text/css">
BODY { background: url("../../images/achter1.jpg")}
</STYLE>
</head>
<body>
<h2>Gebruik van figuren een achtergrondfiguur met CSS 1</h2>
<p>Wanneer de figuur breed genoeg is wordt deze enkel vertikaal herhaald.
</body>
</html>
Als je CSS gebruikt kan je er ook voor zorgen dat de figuur vaststaat ten opzicht van de tekst, zich niet herhaald, een welbepaalde positie op het document heeft:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gebruik van een achtergrondfiguur met CSS 2</title>
<STYLE type="text/css">
BODY {
background: url("../../images/achter3.gif");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center left;
height:2000px;
}
</STYLE>
</head>
<body>
<h2>Gebruik van figuren een achtergrondfiguur met CSS 2</h2>
<p>Wanneer de figuur breed genoeg is wordt deze enkel vertikaal herhaald.
<p style="margin-top:300px">Tekst kan gewoon over de achtergrondfiguur scrollen.
</body>
</html>
