login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > HTML


Gegevens:
Geschreven door:
Dennisvb
Moeilijkheidsgraad:
Normaal
Hits:
47173
Punten:
Aantal punten:
 (3.61)
Aantal stemmen:
18
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (4)
 



Tutorial:

Afbeeldingen

Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.

1. Inleiding
2. Type afbeeldingen
   2.1 Lijst van type afbeeldingen
   2.2 Wanneer welk type gebruiken
3. Afbeeldingen plaatsen
   3.1 HTML code
   3.2 Attributen
4. Image map
   4.1 Vierkant
   4.2 Cirkel
   4.3 Veelhoek
   4.4 Resultaat


1. Inleiding

Wanneer je een site hebt, wil je hem natuurlijk wel zo mooi mogelijk hebben. Wanneer je nog maar net begint met HTML dan heb je nog geen idee van de mogelijkheden en valkuilen met afbeeldingen. Daarom bied deze tutorial de mogelijk om meer te begrijpen hoe afbeeldingen werken in HTML.

 top

2. type afbeeldingen

Er zijn verschillende type afbeeldingen. Elke afbeelding heeft zijn eigen specifieke kenmerk. Let erop waarvoor je de afbeelding gaat gebruiken, want je wilt natuurlijk wel het optimale uit je afbeelding en site halen!


» 2.1 Lijst van type afbeeldingen
GIF
(Graphics Interchange Format)
GIF wordt meestal gebruikt bij kleinere afbeeldingen, zoals bepaalde knoppen, opsommigen en logo's. Het maximale aantal kleuren is 256.

JPEG
(Joint Photographic Expert Group)
JPEG/JPG is een type dat geschikt is voor ondermeer foto's en fotografische logo's. Het maximale aantal kleuren loopt op tot in de miljoenen. Helaas ondersteunt dit type geen transparantie.

PNG
(Portable Network Graphics)
Wanneer je een combinatie van GIF en JPEG wilt, dan biedt PNG de uitkomst. Je kunt nu foto's met miljoenen kleuren van transparantie voorzien. het nadeel is echter dat PNG niet door alle browsers wordt ondersteunt.

SWF
(ShockWave Flash)
SWF is niet echt een afbeeldingtype, maar hoort wel in dit rijtje thuis. De laatste jaren zie je steeds meer 'flashy' afbeeldingen op het web. Zelfs complete intro's zijn er mee gemaakt. Met een SWF (gemaakt met het programma Flash, of een iets eenvoudigere variant; Swish) kan je bewegend afbeeldingen maken. Nu zal je zeggen, dat kan met GIF ook, maar SWF is toch weer anders, omdat je er complete websites mee kan maken. Voor meer informatie wil ik jullie verwijzen naar Flashfocus
BMP
(BitMaP)

Het oudste bestandstype is BMP, wat bij Windows hoort. Je allereerste afbeelding die je ooit gemaakt hebt, is hoogstwaarschijnlijk gemaakt in Paint en was van het type BMP Dit ype heeft ÚÚn groot nadeel: het kent geen compressie. Daarom worden deze afbeeldingen soms wel meer dan ÚÚn MB groot, wat veel te groot is voor een afbeelding.
» 2.2 Wanneer welk type gebruiken

Wanneer je afbeeldingen voor op je website wilt gaan maken, moet je nagaan waarvoor je de afbeelding wilt gaan gebruiken. Wordt het een logo, een knop, een banner of een intro? Voor al deze doeleinden zijn er andere afbeeldingstypen (zie 2.1). Om je wat uitleg te geven gebruik ik deze site hiervoor (Sitemasters)

Als je op de pagina komt, valt als eerste de header op. Die staat helemaal bovenin de site met het logo erin verwerkt. Je zien dat er heel veel kleuren zijn gebruikt, maar voornamelijk blauw. Zoveel tinten blauw zijn niet ze vinden in het afbeeldingstype GIFDeze valt al af. Omdat het geen 'flashy' header is, hoeven we ook geen SWF te gebruiken. We hebben nu twee keuzes: JPEG of PNG. We willen dat de site zo mooi mogelijk wordt voor alle gebruikers, en dus ook alle browsers. Daarom valt PNG af. Daarom is voor de header gekozen voor JPEG

Als je hier naar links kijkt zie je een blauwe menubalk. Deze hoeft maar 1 pixel breed te zijn. Daarom wordt het een kleine afbeelding. Er zijn niet zoveel kleuren gebruikt. Daarom is er voor die kleine afbeeldingen GIF gebruikt.

 top

3. Afbeeldingen plaatsen

Om afbeeldingen op je site te plaatsen, kunnen we gewoon gebruik maken van HTML. Je kunt nog verschillende voorwaarden stellen op de manier waarop je afbeelding wordt weergegeven.


» 3.1 HTML code

Om een normale afbeelding te plaatsen maken we gebruik van de IMG tag. Deze zorgt ervoor dat de computer weet dat er een afbeelding aankomt. Nu een paar voorbeelden met de resultaten eronder

<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif">

Resultaat:

De afbeelding wordt nu weergegeven. Je ziet dat 'SRC' ervoor zorgt dat de computer de locatie van de afbeelding weet.


<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="Dit is de Nederlandse vlag">

Resultaat: De Nederlandse vlag

Wanneer je nu over de afbeelding gaat, zul je de tekst "De Nederlandse vlag" zien. Dit wordt aangegeven met ALT


<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" Width="25" HEIGHT="20">

Resultaat: De Nederlandse vlag

Je ziet dat je de breedte en de hoogte van de afbeelding ook kunt bijstellen. Dit kan nuttig zijn wanneer een afbeelding groter dan het scherm is. Nieuwere browsers passen de afbeelding zelf aan.


<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" BORDER="2">

Resultaat: De Nederlandse vlag

In sommige browsers wordt er weleens een 'border' (rand) om de afbeeling geplaatst. Deze kun je uitzetten door als borderwaarde '0' te nemen. je kan de border ook dikker maken zoals in het voorbeeld


<IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" ALIGN=RIGHT>

Resultaat: De Nederlandse vlag

Je kunt een afbeelding net als teksten ook uitlijnen. Geldige waardes zijn 'left', 'center' en 'right'


<A HREF="http://www.sitemasters.be"> <IMG SRC="http://www.sitemasters.be/images/vlaggen/nl.gif" ALT="De Nederlandse vlag" BORDER="0"> </A>


Resultaat: De Nederlandse vlag

Je ziet dat je ook afbeeldingen naar een andere pagina kan laten linken. Dit gaat dus hetzelfde als met gewone links.


» 3.2 Attributen

De volgende attributen zijn beschikbaar voor de IMG tag

ALIGN De uitlijning van een afbeelding wordt hiermee bepaald. Geldige waardes zijn left, center en right
ALT De tekst die wordt weergegeven wanneer de gebruiker met de muis over de afbeelding gaat.
BORDER Dit bepaalt de dikte van de rand van de afbeelding. Voor geen rand moet je 'o' als border gebruiken
HEIGHT Hiermee wordt de hoogte van de afbeelding bepaald.
WIDTH Hiermee wordt de breedte van de afbeelding bepaald.
HSPACE De witruimte (in pixels) links en rechts van de afbeelding
VSPACE De witruimte (in pixels) boven en onder van de afbeelding
SRC De lokatie van de afbeelding
USEMAP Verwijzing naar de co÷rdinaten in een image map



 top

4. Image map
Wanneer je meerdere links in ÚÚn afbeelding wilt plaatsen, dan moet je een image map maken van je afbeelding. Je geeft dan de co÷rdinaten van je link door. Dit kan bijvoorbeeld erg handig zijn wanneer je een landkaart hebt en je wilt dat wanneer je op een plaats klikt, er een nieuwe pagina over die plaats wordt geopend.

Co÷rdinaten zijn het aantal pixels gezien vanuit de linkerbovenhoek. De horizontale (_) as is de x-as en de verticale (|) as is de y-as. Wiskundigen (of mensen die op school zitten) weten dat natuurlijk al. Er zijn verschillende programma'tjes of javascripts die de co÷rdinaten kunnen opzoeken voor je

Er zijn 3 mogelijkheden voor imagemaps. je kunt een vierkant (rect), een cirkel (cirle) en een veelhoek (poly) gebruiken om je links te definieren.

je moet eerste weer de afbeelding op het scherm laten verschijnen, maar dit keer maken we gebruik van USEMAP. Daarmee geven we een naam aan de image map. Zorg wel dat die naam altijd begint met een #. Wanneer je dit gedaan hebt en je wilt de links gaan geven, open je een MAP tag. Hierin zet je bij de NAME de naam die je je image map eerder gegeven hebt, maar dit keer zonder #

<IMG SRC="afbeelding.gif" ALT="Mijn image map" USEMAP="#mapnaam">


» 4.1 Vierkant

Wanneer we de link in de vorm van een vierkant (rect) willen hebben, dan hebben we de co÷rdinaten van de linkerbovenhoek (x,y) en de rechteronderhoek (x,y) nodig. Deze plaats je achter elkaar in COORDS. Onze linkerbovenhoek is (0,0) en onze rechteronderhoek is (80,40).

<AREA SHAPE="rect" COORDS="0,0,80,40" HREF="link-voor-vierkant.php" ALT="Dit is een rechthoek">


» 4.2 Cirkel

Bij een cirkel hebben we maar 3 co÷rdinaten nodig; het x-co÷rdinaat van het middelpunt, het y-co÷rdinaat van het middelpunt, en de straal (afstand van middelpunt tot de rand, in pixels). Onze middelpunt ligt op (120,80) en de straal is 40px (de doorsnede is dus 80 voor degenen die het niet snappen).

<AREA SHAPE="circ" COORDS="120,80,40" HREF="link-voor-cirkel.php" ALT="Dit is een cirkel">


» 4.3 Veelhoek

Bij een veelhoek geef je altijd een co÷rdinatenpaar op. Je gaat langs de omtrek en neemt bij elke hoek die je maakt de x en de y. Je hebt dus altijd een even aantal co÷rdinaten. Zorg wel dat de laatste co÷rdinaat weer op de eerste aansluit, zodat je een gesloten link hebt.

<AREA SHAPE="poly" COORDS="160,0,160,40,200,40,200,120,240,120,240,0" HREF="link-voor-veelhoek.php" ALT="Dit is een veelhoek">


» 4.4 Resultaat

<IMG SRC="afbeelding.gif" ALT="mijn image map" USEMAP="#voorbeeld" BORDER="0"> <MAP NAME="voorbeeld"> <AREA SHAPE="rect" COORDS="0,0,80,40" HREF="link-voor-vierkant.php" ALT="Dit is een rechthoek"> <AREA SHAPE="circ" COORDS="120,80,40" HREF="link-voor-cirkel.php" ALT="Dit is een cirkel"> <AREA SHAPE="poly" COORDS="160,0,160,40,200,40,200,120,240,120,240,0" HREF="link-voor-veelhoek.php" ALT="Dit is een veelhoek"> </MAP>

Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.



« Vorige tutorial : Formulieren Volgende tutorial : Ankers »

© 2002-2022 Sitemasters.be - Regels - Laadtijd: 0.011s