Laten we een kijkje nemen naar het <img> label en de weergave van van afbeeldingen op onze webpagina's.
De start
Eerst een plekje vinden waar we kunnen werken. Je kan elke map gebruiken (directory) die je wenst of je maakt er een. We geven de voorkeur aan een map genaamd "MijnWebBestanden"
Nu hebben we een afbeelding nodig. Je kan er eentje van je zelf nemen, maar je kan er ook een van mij gebruiken, flower01.jpg. Downloaden;
- klik met rechts op de link naar flower01.jpg
- kies "Doel opslaan als" ["save target as"], (de exacte bewoording kan afwijken afhankelijk van welk systeem wordt gebruikt).
- Sla de afbeelding op in de MijnWebBestanden map.
Het verdient aanbeveling om de indeling van je bestanden hetzelfde te houden als op de server. Dat maakt het namelijk veel eenvoudiger om er zeker van te zijn dat het op beide plaatsen goed werkt.
Laten we een afbeelding bekijken
Start de HTML-Kit. Open een nieuw document. Kies "Bestand | Nieuw". Sla dit document op in de werkmap (MijnWebBestanden). Geef het een naam naar je keuze. Weet je geen naam? Noem het dan "hkimg.html".
Tussen de <body> en de
</body> labels typ je in:
<img src="flower01.jpg" alt="Gele bloem">
We vertellen later wat dit te betekenen heeft.
Klik nu op de Preview-tab. Je krijgt nu iets te zien als:
Gefeliciteerd! Je kan nu afbeeldingen weergeven op je webpagina's. Maar opgepast, er is meer...
De attributen
Binnen je <img> label gebruiken we de twee benodigde attributen; src en alt. Er zijn nog andere attributen maar daarover later meer.
src geeft aan de browser door waar de afbeelding zich bevindt. In onze oefening zijn de afbeelding en de pagina in dezelfde map te vinden dus alles wat we te doen hebben is het invullen van de naam en de extensie van het bestand, in dit geval .jpg. We praten zo meteen over het attribuut src verder.
Het alt attribuut staat voor "alternatief" en is de tekst die wordt weergegeven als een afbeelding om een of andere reden niet wordt getoond, zoals bij een erg trage internetverbinding en iemand de weergave van afbeeldingen heeft afgezet.
Het is belangrijk om te begrijpen dat met het wijzigen van deze
waarden niet de reeële grootte van de afbeelding zelf wordt
gewijzigd.
Het past alleen de afmetingen aan die worden gebruikt om de
afbeelding te tonen.
Laten we er eens verder op ingaan.
We gebruiken bijvoorbeeld een afbeelding met de echte afmeting
van 800 x 600 pixels van 1 Meg.
Je stelt de breedte en hoogte-attributen op 400 x 300 px.
Welnu, hoe groot deze afbeelding geworden? Je zou zeggen 500 K.
Nee hoor, de grootte is nog steeds 800 x 600 px en 1 Meg.
De echte afmetingen zijn niet gewijzigd, we hebben alleen de
maniet waarop het getoond wordt gewijzigd.
Waarom is dat zo belangrijk? Sta er even bij stil. Je verkwist de
tijd en bandbreedte van je bezoeker.
Waarom zal je een nogal grote afbeelding downloaden om het daarna
veel kleiner te tonen?
Je bezoeker scheep je alleen maar op met het wachten op de
completering.
Ja ik weet wat je denkt. Het is alleen maar een plaatje, nou
èn!
Maar pas op. Wat als je afbeeldingen als verkleinde voorbeelden
wil maken die als links fungeren voor vergrotingen?
Stel dat er een tiental op een pagina staan. De lezer moet dan 10
Meg laden om alleen maar 10 kleine plaatjes te zien.
En stel de bezoeker van je website heeft een inbelverbinding van
56 K? Die is dan allang vertrokken en zal je echte afbeeldingen
nooit te zien krijgen.
Daarom stel ik voor om je afbeeldingen te verkleinen in grootte
en een tweede plaatje te maken voor dit doel.
Onthoud dus: verander de grootte van je afbeeldingen als dat
nodig is voor verkleinde afbeeldingen. Ook wel thumbnails
genaamd.
Speciaal als ze gebruikt om door te linken naar de echte
afbeeldingen. En vergeet niet een hoogte en breedte in te geven
als attribuut.
SRC gaat een beetje verder
Wat, als je afbeeldingen op een andere plaats zijn opgeslagen dan je webpagina's? In zo'n geval moeten we de browser nog steeds vertellen waar het bestand zich bevindt door middel van het aanduiden van het pad daar naar toe. Er zijn twee verschillende methodes om dat te doen, we kunnen een relatief of een absoluut pad gebruiken.
Laten we er van uitgaan dat je alle bestanden die met je website te maken hebben in de map MijnWebBestanden staan. En in deze map zijn dan weer twee mappen t.w. MijnWebPaginas die de HTML bestandne bevat en MijnAfbeeldingen voor al je afbeeldingen.
Het relatieve pad
Dat betekent de relatieve verwijzing naar de plaats waar de HTML pagina staat. Uitgaande van ons voorbeeldbestand dan zou het src attribuut gewijzigd moeten worden in het <img> label op deze manier:
<img src="../MijnAfbeeldingen/flower.jpg" alt="Gele
bloem">
De "../" vertelt de browser om een stap omhoog te gaan vanuit de plaats waar de HTML pagina staat. Dan hebben we aangegeven om naar beneden te gaan naar de "MijnAfbeeldingen" map. Als het nodig is om twee stappen omhoog te gaan dan is de verwijzing "../../" enzovoort.
Laten we zeggen dat je twee mappen omhoog moet gaan om bij je webpagina's te komen en een paar mappen naar beneden om je afbeelding te pakken te krijgen. Het relatieve pad zou er dan zo uit kunnen zien:
"../../MijnAfbeeldingen/Map/Map/flower.jpg"
Voor: Het pad is makkelijk in te typen. Het werkt op je PC en op je website (aangenomen dat je op beide plaatsen dezelfde structuur hebt gemaakt).
Tegen: Het werkt niet als je bestanden hebt verplaatst of je hebt de structuur aangepast. De browser is dan niet langer in staat om de afbeelding te vinden. Het staat niet meer in de dezelfde realtieve positie.
Het absolute pad
Absolute paden zijn anders dan relatiev paden en het maakt dan niet meer uit waar de bestanden met de afbeeldingen staan ten opzichte van je webpagina's. Je geeft namelijk aan je browser aan waar de exacte plaats van het bestand op het web.
Laten we zeggen dat je website "www.mijnsite.com" heet en je hebt twee mappen gemaakt zoals we die al eerder hebben genoemd: MijnWebPaginas en MijnAfbeeldingen
Om het absolute pad toe te passen in je HTML-pagina moet je het src attribuut in het <img> label er zo uit laten zien:
<img
src="http://www.mijnsite.com/MijnAfbeeldingen/flower.jpg"
alt="Gele bloem">
Voor: Nu maakt het niet uit waar je het
HTML-bestand naar toe verplaatst, de afbeelding wordt altijd
gevonden. Tenzij je de afbeelding zelf verplaatst natuurlijk.
Tegen: Tenzij je je webpagina's maakt op
webserver zal het absolute pad niet op je PC kunnen werken. Dat
wil zeggen dat je het absolute pad niet kan gebruiken als je
afbeeldingen wilt weergeven in je webpagina. Het absolute pad op
je PC zou er bijvoorbeeld zo uit kunnen zien:
"C:\MijnWebPaginas\MijnAFbeeldingen\flower.jpg" Dit kan nogal
moeizaam zijn bij het werken op je PC.
Een truc voor het instellen van een absoluut pad is het maken van webpagina's met een absoluut pad op je PC (bijv. C:\MijnWebPaginas\flower.jpg). Vervolgens voer je een serie van zoek/vervang instructies uit in HTML-Kit d.m.v. de Ctrl=H toetsen. In de Find [Zoeken] regel typ je "C:\" (zonder de aanhalingstekens) en de de Replace [Vervangen] typ je "http://www.mijnsite.com/".
Wanneer dat eenmaal is gedaan start je de zoek/vervang optie nog een keer met alleen "\" in de Find regel en in de Replace regel "/". Afhankelijk van de tekst op je webpagina kan het voorkomen dat er onopzettelijk een wijziging van eventuele schuine streepjes worden gewijzigd die niets te maken hebben met een link.
Inline
Er is nog iets dat gedaan moet worden. Het <img> label
is een
inline element. Het verschil tussen
block en een inline elementen is een andere discussie, maar
om het in kort te schetsen, inline elementen worden net zo
behandeld al tekst voorzover deze hoe en waar ze te zien zijn in
je document. Het anker label (<a href=
"http://www.mijnwebsite.com">Mijn
link</a>) is een voorbeeld van een
inline-element. Het staat inline met de tekst.
Dat betekent dus dat je je afbeeldingen daar neer zet waar je ze wil hebben in het document. Laten we daarom maar eens wat proberen zodat we de resultaten kunnen bekijken.
We gebruiken opnieuw flower01.jpg. Maak een neiuw document en
sla het op in dezelfde map waar je in werkt. Je kan dat document
zo noemen als je zelf wilt. En we werken ook weer tussen de
labels <body> en
</body>.
Typ dit in je nieuwe HTML document (onthoud dat je dat steeds
doet tussen de <body> labels):
<p>Dit is mijn afbeelding <img
src="flower01.jpg" alt="Gele bloem"></p>
Klik nu op de Preview [Voorbeeld] tab. Je pagina zou er ongeveer zo moeten uitzien:
Laten we nu terug gaan en een paar dingetjes wijzigen. Klik op de editortab en probeer deze verschillende combinaties om te zien waar de afbeeldingen zullen verschijnen.
<p>Dit is <img src="flower01.jpg" alt="Gele
bloem"> mijn afbeelding</p>
<p><img src="flower01.jpg" alt="Gele bloem">
Dit is mijn afbeelding</p>
Geef nu flink wat tekst in en plaats de afbeelding binnen de tekst op verschillende plaatsen zodat je kan zien wat de resultaten zijn.