voorbereiding: het plaatje klaarmaken
Code voor een in te voegen plaatje
In je HTML code, die alleen uit tekst bestaat, wordt een plaatje nooit zichtbaar: het is zelf een stuk tekst, dat verwijst naar een -opgeslagen- afbeelding.Deze afbeelding moet voor elk computer-platform te zien zijn; internet is immers voor iedereen. Om zo weinig mogelijk computerdata over te brengen moeten deze bestandsformaten ook klein blijven. Daarom zijn er maar een beperkt aantal bestandsformaten, die voor het WEB geschikt zijn:
- *.GIF als de afbeelding uit weinig verschillende kleuren bestaat (logo's) of voor een deel transparant moet zijn. De beelden kunnen zelfs een reeks zijn, die als een animatie worden afgespeeld.
- *.JPG als de afbeelding bijvoorbeeld een foto is. Strakke logo's worden niet goed weergegeven, de mate van bestandscompressie is instelbaar. Werk er echter niet mee in een beeldbewerkingsprogramma, omsat bij elke keer dat je het als jpeg opslaat, de beeldkwaliteit afneemt.
- *.PNG (PING) is een bestandstype, dat zowel veel kleuren kan bevatten als ook transparante. zelfs gedeeltelijke transparatie is mogelijk, al ondersteunen nmiet alle browsers dit.
Als
het plaatje bijvoorbeeld een kurkentrekker is, en het plaatje heet kurkje.GIF
dan moet er ergens in de pagina (tussen <body> en </body>) de volgende
code voorkomen:<IMG SRC="kurkje.GIF">Dit moet al werken als wordt meestal wel wat meer informatie in de vorm van extra attributen toegevoegd:
<img src="kurkje.GIF" width=172 height=143>De attributen width en height in de tag reserveren de nodige ruimte in de pagina, nog voordat het plaatje wordt ingeladen. Er zijn ook attributen, die het plaatje links of rechts laten uitlijnen, een rand om het plaatje zetten, witruimte om het plaatje laten.
Hieronder is de tag IMG verder uitgebreid:
<IMG SRC="kurkje.GIF" width=172 height=143 align="right" hspace="15" vspace="9">
Hierbij is de figuur hiernaast te zien met de attributen zoals hierboven.Hierbij gelden voor de attributen:
- align heeft bij ons de waarde "right" meegekregen. Hierdoor staat hij rechts, en zal de tekst, die na de tag staat er aan de linkerzijde langslopen.
Het is ook mogelijk de waarde "left" mee te geven. Dan staat de afbeelding rechts en loopt de volgende tekst er rechts omheen. Het kan zijn dat een plaatje, dat je daarna ook weer wil uitlijnen, niet helemaal goed lijnt. Als je voor die nieuwe figuur de tag <BR CLEAR="all" > - hspace geeft de ruimte weer, die links en rechts om de figuur wordt vrijgehouden. In ons voorbeeld is dat 15 pixels.
- vspace geeft de ruimte weer, die boven en onder om de figuur wordt vrijgehouden. In ons voorbeeld is dat 9 pixels.
- alt heeft een tekst als waarde. Als het plaatje nog niet op de pagina is ingeladen, zie je op de plaats van het plaatje die tekst. Je ziet die tekst ook als je kijker met de muis boven het plaatje stilhoudt. (Probeer het maar!) Er zijn ook zoekmachines, die speciaal het internet afzoeken en letten op de tekst, die bij alt staat aangegeven.
In FirstPage kan het toevoegen van een afbeelding vrij snel gaan. Echter wel de bestanden goed voorbereiden: eerst alles in de map van de website plaatsen.
Vervolgens de html-pagina via FirstPage openen; dus via het linkervenster met de bestanden browser. vervolgens kun je de afbeelding vanuit de bestandenbrowser zoo op de juiste plaats in de code slepen. Voila!
Check even of de bestandsnaam een vreemde voorvoeging heeft. Door met de rechtermuisknop op de img-tag te klikken komt er nog mogelijkheden de tag aan te passsen voor de attributen.