Eigenlijk moet er wel een tekening of een afbeelding op de site voorkomen. Anders wordt het een volle boel met alleen maar tekst en tekst. Echt interessant wordt het hierdoor niet.
Als u tot nu toe de cursus heeft gevolgd dan heeft u nu een pagina met alleen maar tekst. En dat is best wel saai. Het wordt aantrekkelijker door er af en toe een plaatje tussen te zetten.

Er is hier heel simpel een afbeelding voor nodig. Deze bestaan in allerlei formaten: gif, jpg, bmp, jif, en cpt. Dat is dus de opmaak en niet de grootte, het is de wijze waarop het plaatje is opgeslagen. JPG is over het algemeen kleiner en laad dus sneller, maar met GIF is meer mogelijk; transparante achtergrond, animaties enz. Maar daar komen wij nog op terug.

<IMG>

IMG staat voor IMAGE. Zo'n afbeelding komt niet IN het dokument te staan, maar 'ernaast'. Er wordt een link naar gemaakt. De browser zorgt ervoor dat deze in de pagina komt te staan. Daarvoor nemen wij het volgende label op in onze pagina: <IMG SRC="plaatje.gif">. SRC staat voor SOURCE. En zoals u ziet is er deze keer geen eind-label nodig. Denk aan de aanhalingstekens en hoofd- en kleine letters. Leuk om op te merken is dat de afbeelding uiteraard ook bij de provider geplaatst moet worden.

Tweety is links uitgelijnd dmv ALIGN=LEFT Plaatsing van de afbeelding in de pagina

De browser-bakkers zijn ons gunstig geweest en hebben ons enkele mogelijkheden gegeven. Want als de afbeelding geplaatst wordt zoals hierboven dan zal het plaatje links staan, met hiernaast 1 regel tekst. Hier kan iets mooiers van worden gemaakt:

<IMG ALIGN="x" BR CLEAR="x" WIDTH="x" HEIGHT="x" ALT="x" >

Het moge duidelijk zijn dat hiermee de afbeelding aan de rechter- of de linkerzijde kan worden geplaatst van de pagina. Je gebruikt hiervoor LEFT of RIGHT. Standaard is dit LEFT (links). De tekst zal over meerdere regels naast de afbeelding worden geplaatst. Maar ook TOP kan worden gebruikt, de tekstregel zal gelijk met de bovenkant van de afbeelding staan. Met BOTTOM is dit juist andersom.
Tweety op deze pagina is links uitgelijnd door middel van ALIGN=LEFT

BR CLEAR=RIGHT/LEFT/ALL="x"

Als u met een nieuwe alinea wil beginnen komt u er meestal niet met <BR> of <P>. U springt wel naar een nieuwe regel, maar als er genoeg ruimte is naast de afbeelding dan gaat deze hier vrolijk verder. Daarvoor zou u de volgende 3 opties afzondelijk kunnen gebruiken. Met BR CLEAR=LEFT begint de volgende tekst onder de linker afbeelding. Met BR CLEAR=RIGHT onder de rechter afbeelding. En met BR CLEAR=ALL onder de beide afbeeldingen. U merkt dat u dit ook kan gebruiken bij 2 afbeeldingen die aan de linker- EN aan de rechterzijde staan.

WIDTH="x" en HEIGTH="x"

Hiermee geeft men in pixels aan hoe groot het plaatje moet worden. Bedenk dat als de grootte groter wordt opgeven dat het plaatje daadwerkelijk is, het plaatje wordt uitgerekt en dus minder scherp zal zijn. Als u alleen WIDTH opgeeft zal de hoogte in verhouding meegaan. En andersom bij HEIGHT.

ALT=x

Er zijn browsers die geen plaatjes ondersteunen. En er zijn mensen die dit in hun browser hebben uitgeschakeld. Door deze toch een ALTernatief te geven kunt u een (alternatieve) tekst opgeven waardoor het toch duidelijk is wat hier wordt bedoeld. Voeg daarom <ALT="tekst..."> toe aan het IMG-label. Let wel op de aanhalingstekens.

<BACKGROUND="x">

Om de pagina nog meer inhoud te geven of nog vrolijker te maken kunt u een achtergrond opgeven. Door een afbeelding op te geven zal de browser deze net zolang naast en onder elkaar plaatsen totdat de gehele pagina is gevuld. Het einde van de rechterzijde moet dus eigenlijk weer aan de linkerkant passen om het mooi te houden. Er er dus een patroon-plaatje nodig. Dit geldt natuurlijk ook voor de onder- en bovenkant. Deze zijn genoeg te vinden op internet.
Wilt u ook zo'n achtergrond? Neem dan de volgende attribuut op in de BODY-label: BACKGROUND="plaatje.gif". Voor plaatje.gif vul je uiteraard je eigen plaatje in.