Er worden twee soorten bestandsformaten op internet geaccepteerd als plaatjes-bestanden, namelijk GIF (extentie .gif) en JPEG (extentie .jpg).
Een algemene regel is:
Zitten er veel kleuren in je plaatje gebruik dan JPEG, anders GIF.
U moet ook letten op de omvang van het plaatje. Plaatjes nemen veel meer ruimte (in bytes) in dan tekst en worden dus ook trager over het internet verstuurd.
Een plaatje in een document zetten
Om een plaatje aan een document toe te voegen, typt u de volgende code op de plek waar je het plaatje wilt hebben: <IMG SRC="path">.
Voor path typt u een relatief of een absoluut path.
Mijn advies is altijd: gebruik zoveel mogelijk de relatieve soort.
Als je je site dan van schijf naar internet kopieert hoef je niet al je links te veranden.
Maak bijvoorbeeld een map met daarin je HTML-bestanden en een sub-map met daarin je plaatjes.
Stel uw website staat op c:\website\index.html en het plaatje op c:\website\images\plaatje.gifAbsoluut: <IMG SRC="c:\website\images\plaatje.gif"> Relatief: <IMG SRC="images/plaatje.gif">Op deze site heet die sub-map "images".
De code <IMG> heeft een flink aantal opties:
ALT="tekst" Sommige browsers staan zo ingesteld dat ze de plaatje niet weergeven. Deze tekst komt dan in het kader van het plaatje te staan. WIDTH=x
HEIGHT=yHier kunt u de hoogte en breedte van het plaatje opgeven (in pixels), zodat de browser tijdens het laden van de pagina alvast de juiste ruimte vrij kan houden voor het plaatje. BORDER=x Hiermee kunt u het plaatje een kader geven VSPACE=x
HSPACE=yHiermee kunt u de witruimte (verticaal en horizontaal) tussen het plaatje en de tekst instellen. (Wederom in het aantal pixels) ALIGN=LEFT Zet het plaatje aan de linker kantlijn. De tekst gaat verder rechts naast het plaatje, op gelijke hoogte met de bovenkant van het plaatje. ALIGN=RIGHT Als boven, maar net omgekeerd. ALIGN=TOP De bovenkant van het plaatje komt op gelijke hoogte met de tekst ALIGN=MIDDLE Het midden van het plaatj komt op gelijke hoogte met de tekst. ALIGN=BOTTOM De onderkant van het plaatje komt op gelijke hoogte met de tekst. (Dit is de standaard instelling). Een voorbeeld:
<html> <head> <title>Plaatjes</title> <body> <CENTER><h1><IMG SRC="images/escher1.gif" ALT="Rare kubus">Rare kubus</h1></CENTER> <IMG SRC="images/escher1.gif" ALT="Rare kubus" ALIGN=LEFT>Deze staat links <IMG SRC="images/escher1.gif" ALT="Rare kubus" ALIGN=RIGHT BORDER=5> <IMG SRC="images/escher1.gif" ALT="Rare kubus" HSPACE=30 ALIGN=MIDDLE>Er is ruimte tussen tekst en plaatje </body> </html>Klik hier om te zien hoe het voorbeeld er uit zal zien.
Transparante plaatjes
Zoals je in het vorige voorbeel hebt kunnen zien heeft het plaatje zelf een achtergrond kleur. In sommige tekenpakketten in het mogelijk om één kleur transparant te kiezen.
Een voorbeeld:
<html> <head> <title>Transparante plaatjes</title> </head> <body bgcolor="lightblue"> De achtergrondkleur van deze pagina is lichtblauw.<br> <IMG SRC="images/escher1.gif" ALT="Rare kubus met gewone achtergrond">Gewone achtergrond<br> <IMG SRC="images/escher2.gif" ALT="Rare kubus met tranparante achtergrond">Transparante achtergrond </body> </html>Klik hier om te zien hoe het voorbeeld er uit zal zien.