weballey logo
 
left HTML - plaatjes backnext right
hometoolssite mape-mail
inleiding
software
tags
basis
tekst
layout
< plaatjes >
achtergrond
tekstkleur
hyperlinks
samenvatting
publiceren
promotie
slot
      Tot nu toe hebben we alleen tekst bekeken. Heel aardig, maar je pagina ziet er toch nog wat kaal uit. We gaan eens proberen om een plaatje op de pagina te zetten. In HTML begruik je hiervoor de <IMG> (image) tag. Het plaatje zelf is een apart bestand, het staat dus niet in de pagina zelf. De tag verwijst naar het bestand met de SRC (source) attribute. Zet het plaatje je in dezelfde directory als je webpagina. Anders vindt je browser niets en krijg je het plaatje niet op je scherm.

<IMG SRC="pam.jpg">

Pamela Anderson


    Op zich kun je volstaan met de bestandsnaam. Je kunt echter beter ook de afmetingen (in pixels of beeldpunten) van het plaatje aangeven. De browser reserveert dan ruimte bij het opbouwen de pagina. Anders bouwt de browser de pagina elke keer opnieuw op, als hij een plaatje tegenkomt. Vaak krijg je ook helemaal niets te zien tot alle plaatjes geladen zijn. Wat wel eens een tijdje kan duren.
    De afmetingen geef je aan met de WIDTH (breedte) en HEIGHT (hoogte) attributes. Weet je niet wat de afmetingen van het plaatje zijn, dan kun je deze eenvoudig te weten komen. In Netscape Navigator roep je het bestand op en klik je vervolgens op View|Document Info. Je krijgt dan een nieuw venster te zien met in de titel de bestandsnaam en de afmetingen. Let ook weer op de aanhalingstekens.
<IMG SRC="pam.jpg" WIDTH="144" HEIGHT="192">

    Veel browsers laten een randje om het plaatje zien. De breedte van dit randje kun je regelen met de BORDER attribute. In de meeste gevallen wil je natuurlijk helemaal geen randje zien. Dan geef je bij BORDER de waarde nul aan.
    Een laatste attribute is de ALT (alternative text). Sommige surfers zetten de plaatjes uit in hun browser. Een enkeling gebruikt nog wel eens een browser die helemaal geen plaatjes kan laten zien. In plaats van de afbeelding kun je dan een tekst laten zien die het plaatje beschrijft.
<IMG SRC="pam.jpg" WIDTH="144" HEIGHT="192" BORDER="0" ALT="Pamela Anderson">

    Gebruik alleen plaatjes van het type GIF of JPEG (JPG). Andere bestandsformaten zijn vaak niet in alle browsers leesbaar. Je kunt afwijkende typen vaak eenvoudig converteren meet grafische programma's als Lview Pro of Paint Shop Pro. Zorg ervoor dat de plaatjes niet groter zijn dan zo'n 25 kiloByte. Anders duurt het te lang om ze te laden in de browser.
    Hoe je aan plaatjes komt? Je kunt elk plaatje wat je in je browser ziet kopieëren naar je harde schijf. Klik met je rechter muisknop en er verschijnt een menu. Klik hierin "Save Image As..." aan. Je kunt de bestandsnaam aangeven en het plaatje opslaan. Gebruik de plaatjes die je op het web vindt niet zomaar lukraak. Denk wel om het copyright. Er zijn genoeg plaatjes te vinden die je wel mag gebruiken.

goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right