WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Bestandsformaten en -grootte
Afbeeldingen in de tekst
WIDTH en HEIGHT attributen
TITLE attribuut

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Afbeeldingen

Je website is nogal saai zonder afbeeldingen. Je wilt bijvoorbeeld foto's en logo's toevoegen. Dit hoofdstuk geeft informatie over de verschillende bestandsformaten voor afbeeldingen en hoe je afbeeldingen in je pagina plaatst.

Bestandsformaten en -grootte

Het meest gebruikte digitale formaat is JPEG. De bestanden hebben namen die eindigen in *.jpeg of *.jpg. Bijna alle digitale camera's maken foto's in dit formaat. Andere veelgebruikte formaten voor afbeeldingen zijn GIF en PNG. Alle onderstaande voorbeelden werken met al deze bestandsformaten.

Sommige tekenprogramma's kunnen GIF bestanden met een andere lijnvolgorde bewaren, "interlaced" heet dat in het Engels. Daarmee kunnen browsers een ruwe versie van de afbeelding tekenen voor het hele bestand binnengehaald is. Nu bandbreedte steeds goedkoper wordt, is dit minder relevant.

Als je afbeeldingen bewaart voor het web, let er dan op dat ze niet te groot worden. Als je afbeelding 100 kB groot is, heeft iemand met een 512 kbps aansluiting (zoals een goedkope ADSL aansluiting) twee seconden nodig om de afbeelding binnen te halen. Als je tien van zulke afbeeldingen op je pagina hebt heeft de lezer twintig seconden nodig om je afbeelding binnen te halen. Dat kan lang genoeg zijn om de lezer door te laten klikken naar een andere pagina.

Als je bijvoorbeeld een fotoalbum online zet, verwacht de lezer dat de pagina's groot zijn. Maar alle andere pagina's moeten snel binnen te halen zijn. Probeer gewone pagina's onder de 100 kB te houden, inclusief afbeeldingen en stylesheets.

To the top

Afbeeldingen in de tekst

Het element om een afbeelding in te voegen is heel eenvoudig:

<IMG SRC="valid-html401.png" ALT="HTML logo">

HTML logo

Het attribuut SRC="valid-html401.png" geeft de naam van het bestand (SRC betekent "source", bron).

Het ALT="HTML logo" attribuut geeft de tekst die de browser toont als de afbeelding niet getoond kan worden of als de gebruiker er voor kiest om geen afbeeldingen te tonen. Blinden en slechtzienden gebruiken braille computers om het web te bekijken en die zijn volledig afhankelijk van het ALT attribuut. Als je afbeeldingen als links gebruikt is het belangrijk een ALT attribuut te gebruiken.

To the top

WIDTH en HEIGHT attributen

Het WIDTH en HEIGHT kun je gebruiken om de grootte van je afbeelding in pixels aan te geven:

<IMG SRC="parts/valid-html401.png" WIDTH="88" HEIGHT="31" ALT="HTML logo">

Als de browser de afmetingen van de afbeeldingen kent kan met de opmaak van de pagina begonnen worden voor alle afbeeldingen helemaal gedownload zijn. In de meeste tekenprogramma's kun je de grootte van een afbeelding vinden. De meeste browsers laten de grootte van een afbeelding zien als je die opent in een nieuw venster (rechts klikken of ctrl-klik). Goede HTML editors kunnen WIDTH en HEIGHT automatisch invoegen.

Als je iets anders dan de werkelijke grootte van de afbeelding opgeeft, proberen de meeste browsers de afbeelding te vergroten of verkleinen. Kijk eens naar dit voorbeeld:

<IMG SRC="parts/valid-html401.png" WIDTH="400" HEIGHT="31" ALT="HTML logo">

HTML logo

Er zijn echter grenzen aan hoever je een afbeelding uit kunt rekken en de resultaten zijn niet altijd voorspelbaar.

To the top

TITLE attribuut

Bij afbeeldingen kun je een TITLE attribuut gebruiken. Daarmee kun je tekst laten verschijnen als de muiscursor boven een afbeelding hangt. Hiermee kun je bijvoorbeeld extra toelichting geven:

<IMG SRC="parts/valid-html401.png" WIDTH="88" HEIGHT="31" ALT="HTML logo" TITLE="Dit is het officiële HTML 4 logo">

HTML logo

Hierdoor verschijnt de tekst "Dit is het officiële HTML 4 logo" als de muis boven de afbeelding hangt. Het TITLE attribuut werkt met de meeste elementen.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.