|
Er zijn veel verschillende soorten afbeeldingen die geschikt zijn om geplaatst te worden op internet. Het meest gebruikt zijn .jpg .jpeg .gif en .png-bestanden. Dit omdat deze bestanden een relatief goede kwaliteit kunnen vertonen en toch niet al te groot zijn. Voor bewegende afbeeldingen wordt meestal .gif gebruikt.
Als je een foto wilt plaatsen, zorg er dan voor dat de bestandsgrootte niet te groot is. Anders kost het de bezoeker zonder snelle internetverbinding veel tijd om je fotopagina te laden. Een bestandsgrootte tussen de 20 en 80 kB is acceptabel voor een gemiddelde afbeelding.
De <img> tag
Om de browser een afbeelding te laten weergeven moet je laten weten waar die afbeelding te vinden is. We hebben onze eerste pagina, index.html, opgeslagen in de map c:/www en daar sla je ook je afbeelding op. Bijvoorbeeld een foto van jezelf: bert.jpg. Je kunt er -voor de overzichtelijkheid als je straks veel foto's hebt- een aparte map voor aanmaken (bijvoorbeeld "c:/www/jpg/bert.jpg"). De tag voor het weergeven van een afbeelding is:
<img src="jpg/bert.jpg" width="250" height="250" border="1" alt="Bert">
Met 'src' geef je de browser aan welke afbeelding moet worden weergegeven (c:/www/jpg/bert.jpg in dit geval, maar omdat het HTML-document "index.html" zelf ook in de map c:/www staat, mag je dit weglaten). Je kunt ook een andere website als locatie opgeven voor een afbeelding. De tag kan er dan zo uitzien:
<img src="http://www.cesarsite.com/html/afb/webhtmllogo-rechthoek.jpg">.
Met 'width' en 'height' geef je resp. de breedte en lengte aan van je afbeelding in pixels. Als je ze weglaat wordt de afbeelding op ware grootte weergegeven.
'Border' gebruik je om een randje om je foto te laten weergeven en met het getal geef je de dikte van de rand aan. '0' is dus g้้n rand om je afbeelding.
En tot slot 'alt'; die kun je gebruiken om een tekst weer te laten geven als een bezoeker met z'n muis over de afbeelding gaat. De tekst is ook te zien als de foto om welke reden dan ook niet zichtbaar is.
Met de <img> tag krijg je de afbeelding bert.jpg te zien:
Plaatsen we nu de <img> tag in index.html (en centreren we de foto), dan krijgen we het volgende:
<html>
<head>
<title>Mijn Homepage</title>
</head>
<body bgcolor="#FF0000" text="#000000">
<font face="tahoma" size="3">
<p><b>Welkom op mijn website!</b></p>
<p>Hallo, mijn naam is <u>Bert</u>. Leuk dat je een bezoek brengt aan mijn site. Ik heb hier een aantal reisverhalen en foto's van mijzelf geplaatst. Ook vind je een pagina met <i>links</i> naar sites van reisgenoten van me.</p>
<p>Je kunt de <b>foto's en verhalen</b> bekijken door hieronder op de links te klikken.</p>
<p>Veel plezier!</p>
<p>Groeten,<br>
Bert</p>
<p><center><img src="jpg/bert.jpg" width="250" height="250" border="1" alt="Bert"></center></p>
</font>
</body>
</html>
Als je deze HTML-structuur in je document zet en opslaat, krijg je, als je je pagina met je browser bekijkt, het volgende resultaat:
.jpg)
Okee, door naar stap 6 van 7
1
2
3
4
5
6
7
| top |
| 
