plaatjes html codes Peter Vazed....

Plaatjes

mail me

index

home

basis

linken

lijsten

plaatje

varia

Intro HTML codes.

Images: is engels voor Plaatjes

Je kunt twee type plaatjes opnemen in je WebPagina:

GIF images (deze eindigen met een.gif file extensie)
JPEG images (deze eindigen met een .jpg file extensie)

Er zijn diverse sites waar je plaatjes kunt downloaden, oa: 321ClipArt.com.

The <IMG> (Image) tag is een "enkelvoudige" tag en er zijn diverse attributen om je plaatje aan te passen voor op je internetpagina:

SRC=
Als je een plaatje hebt met de filenaam mijn_plaatje.gif dan geef je dus door de filenaam de waarde in voor het SRC= attribuut (src betekent source=bron), zo dus:

<IMG SRC="mijn_plaatje.gif">

WIDTH= en HEIGHT=
Je kunt de height (hoogte) en width (breedte) attributen zo instellen:

<IMG SRC="mijn_plaatje.gif" WIDTH="100" HEIGHT="200">

De cijfers welke er vermeldt staan hebben betrekking op de afmetingen van het plaatje in PIXELS. Het bovengenoemde plaatje zal dus op de pagina verschijnen met een breedte van 100 pixels, en een hoogte van 200 pixels.
Pixels zijn Beeldpuntjes.

ALT=
Het is ALTIJD een goede gewoonte om het ALT= attribuut te benutten. Sommige mensen zetten "plaatjes bekijken" UIT in hun browsers, teneinde sneller te kunnen surfen, en als je dan niet een tekstbeschrijving van het plaatje hebt, kunnen ze niet zien waar je pagina over gaat. Dit is dus zeer zeker van belang, als je een menu hebt met buttons, want dit zijn dus plaatjes.

Zet je muis op de plaatjes en kijk wat er gebeurt:

Testen van de
ALT tekst truk

Een tekstbox komt tevoorschijn met de tekst welke je bij je plaatje opgaf in de ALT= attribuut. Zo zou je het in je html code op kunnen nemen:

<IMG SRC="voorbeeld.gif" WIDTH="140" HEIGHT="64" ALT="Testen van de ALT tekst truk" BORDER="0">

BORDER=
En je kunt aangeven of je plaatje wel of geen rand moet hebben. Je gebruikt dan de BORDER= attribuut, zoiets dus:

<IMG SRC="plaatje.gif" WIDTH="100" HEIGHT="200" ALT="Hier een test" BORDER="0">

BORDER="0" vertelt de browser om geen rand te gebruiken. (in feite vertel je de browser om een border van 0 [nul] pixels weer te geven. Wil je een rand, zet dan de border op 1 in plaats van 0 (nul) :

<IMG SRC="plaatje.gif" WIDTH="100" HEIGHT="200" ALT="Dit is een test" BORDER="1">

Mischien vindt je 2 of 3 ook wel leuk ipv 1.

Plaatje informatie gegevens

Je kunt meestal de waarden van je plaatjes terugvinden via een graphische editor program zoals Irfanview, dan wel Paint Shop Pro, of Adobe Photoshop. Sommige browsers kunnen je ook deze informatie verschaffen, in de title bar, als je de browser gebruikt om je plaatje te zien. Type het pad en de filenaam van het plaatje in de adres balk van je browser:

c:\plaatjes\mijn_plaatje.gif

Veranderen van Plaatjes afmetingen

HTML geeft je de mogelijkheid idere afmeting aan je plaatje te geven IN DE TAG. Het plaatje zelf kan wel 200 pixels breed en 150 pixels hoog zijn, maar je kunt aangeven om dit groter of kleiner in de browser weer te geven door de afmetingen in de Tag attribuut code.

Ter illustratie een voorbeeld plaatje en de code:

<IMG SRC="plaatje.gif" WIDTH="204" HEIGHT="37">

Dit plaatje is 204 pixels breed en 37 pixels hoog. Dit is de waarde die in een foto editor wordt aangegeven, de originele waarde.

Nu zullen we de waardes veranderen in de WIDTH= and HEIGHT= attributen en zien wat er gebeurt:

<IMG SRC="plaatje.gif" WIDTH="260" HEIGHT="47">

In dit voorbeld heb je de code gewijzigd, de browser dus opdracht gegeven een andere afmeting te tonen. Is je file 15k groot, dan blijft dit ook 15k , alleen de weergave is anders.

ATTENTIE: Het is belangrijk te weten dat een minder goede weergave het resultaat kan zijn. Vindt je de weergave niet scherp genoeg meer, dan kun je beter in een foto editor de afmetingen wijzigen en met de nieuwe waardes opslaan. Wil je een plaatje kleiner weergeven en ook minder in kb hebben, gebruik dan irfanview. Via de options kun je bv het percentage van een jpg file op 60 % zetten. Irfanview is ook nuttig om tekst op buttons te zetten.

Aligning tekst naast een plaatje

Door toevoegen van het ALIGN= attribuut aan je plaatjes tag, kun je tekst rond je plaatje uitlijnen. Op deze manier kun je de code voor het ALIGN attribuut in je tag zetten:

<IMG SRC="plaatje.gif" WIDTH="200" HEIGHT="100" ALIGN="left"> Hier komt dan je teksten de aligning (uitlijning) komt automatisch omdat het in de code van de plaatjes tag zit.

Correcte Waardes voor dit attribuut zijn: "bottom", "top", "middle", "left" en "right" zoals hier onder:

bever Peter V Standaard is de tekst onder het plaatje uitgelijnd. Je kunt zien waar deze start en hoe het bij het plaatje wordt weergegeven. Er hoeft dan ook geen ALIGN=BOTTOM gebruikt te worden, omdat dit gewoon de standaard instelling is.

Deze tekst is uitgelijnd met de bovenkant van het plaatje, dus "Top" (<IMG SRC="plaatje.gif" ALT="SampleImage" ALIGN=TOP>). Let even er op, dat alleen een regel met de bovenkant wordt uitgelijnd, en dat de rest van de tekst beneden het plaatje verder gaat.

bever Peter V En deze tekst is gecentreerd op het plaatje (<IMG SRC="plaatje.gif" ALT="plaatje" ALIGN=MIDDLE>). Slechts één regel is uitgelijnd in het midden, en de rest verschijnt wederom onder het plaatje.

En hier gaat de tekst volledig naar de rechterkant van het plaatje, omdat het plaatje zelf links is uitgelijnd (<IMG SRC="plaatje.gif" ALT="plaatje" ALIGN=LEFT>). Alle tekst zit rechts van het plaatje, totdat het gelijk komt met de onderkant van het plaatje, en gaat er dan onder weer verder.

En dit is dus net andersom als hier net boven. De tekst links van het plaatje. Omdat het plaatje rechts staat uitgelijnd. (<IMG SRC="plaatje.gif" ALT="plaatje" ALIGN=RIGHT>). Alle tekst is links, zolang het nog niet gelijk is met de onderkant van het plaatje. Zodra hier onder gekomen wordt, dan gaat het er onder weer verder.

Het gebruik van de uitlijning zoals hier beschreven is van veel nut, indien je kleinere plaatjes hebt, en er een korte beschrijving bij moet. Maar voor meer tekst bij plaatjes, zeer zeker voor een fraaiere layout, zou je toch maar beter tabellen toepassen.
Verder met Varia