• Finalist Infinity Blog Award banner

Stap 12 – Foto’s

Laatste update: 2 maart 2019

Wat is een website zonder plaatjes of foto’s? Voor een HTML document maakt het niet uit of een plaatje onderdeel van het design is of van de content. Een plaatje wordt altijd op dezelfde manier ingesteld.

Foto toevoegen met HTML

We gaan een logo toevoegen in index.html:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>Een korte introductie</h2></center>
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf, <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Dit is een korte lijst van diensten:
<ol>
<li> Webdesign</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domeinregistraties</li>
<li> Trefwoordenonderzoek</li>
<li> SEO</li>
<li> Adverteniecampagnes</li>
</ol>
</p>
<center><p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center></body>
</html>

Met de regel <IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo” /> heb ik een referentie gemaakt naar mijn (oude) bedrijfslogo, waardoor deze in de browser zichtbaar zal worden.

Waar staat de code voor?

IMG is een afkorting van het woord “image”.
SRC staat voor het woord “source”. Aan SRC koppel je het bestand van de image die je wilt laten zien. In dit geval is dat “logo.gif”, die in de directory “images” staat. (Zie voor meer details Stap 12e)
Het weergeven van de maten (WIDTH en HEIGHT) van de image is niet verplicht, maar helpt het downloaden versnellen. Doordat je de browser hebt verteld hoe groot de image is, hoeft dit namelijk niet eerst berekend te worden. De waarden, die je invult bij WIDTH en HEIGHT, zijn pixels.
ALT staat voor “alternative” en ook dit is niet verplicht, maar wel aan te raden om te gebruiken vooral voor zoekmachines. Wanneer de foto niet zou werken, wordt de tekst die je hier tussen de aanhalingstekens hebt gezet, weergegeven. Ook als je lang met de muis op een image blijft staan, zal deze tekst zichtbaar worden. In mijn voorbeeld zul je dus zien dat het om een logo gaat.

Stap 12b – lokatie bepalen van images

Deze attribute wordt niet meer ondersteund vanaf HTML5. Er wordt verwacht dat je hier CSS voor gebruikt.

De IMG-tag heeft verschillende attributes die je kunt gebruiken. Zo kun je de lokatie van de image bepalen in verhouding tot de tekst die je gebruikt hebt. Voor de lokatie heb je de keuze uit:

<img src=”images/logo.gif” align=”left” /> voor links
<img src=”images/logo.gif” align=”right” /> voor rechts
<img src=”images/logo.gif” align=”middle” /> voor midden
<img src=”images/logo.gif” align=”top” /> voor bovenaan
<img src=”images/logo.gif” align=”bottom” /> voor onderaan

Stap 12c – witruimte bepalen van images

Deze attribute wordt niet meer ondersteund vanaf HTML5. Er wordt verwacht dat je hier CSS voor gebruikt.

Wanneer je voor de lokatie LEFT of RIGHT kiest, zul je merken dat de tekst direct om de image heen zal lopen. Vooral bij de lokatie LEFT zal de tekst tegen de image aangeplakt zitten. Dit is vaak niet mooi, en daarom wil je rondom de image wat witruimte hebben. Dit doe je als volgt:

<img src="images/logo.gif" align="left" hspace="2" vspace="2" />

De waarde wordt in pixels gegeven. Bij HSPACE zal dit de horizontale witruimte instellen en de waarde bij VSPACE bepaalt de verticale witruimte. In het voorbeeld gaat het dus om 2 pixels ruimte horizontaal en verticaal. Zo heb je een onzichtbare rand gecreëerd.

Stap 12d – image border

Deze attribute wordt niet meer ondersteund vanaf HTML5. Er wordt verwacht dat je hier CSS voor gebruikt.

Je kunt echter ook een echte rand meegeven. Overigens wordt dit standaard zichtbaar, wanneer je images gebruikt als links (denk bijvoorbeeld aan buttons). Om het uit te schakelen gebruik je de volgende code:

<img src="images/logo.gif" border="0" />

De waarde die hier ingevoerd wordt is in pixels. Wanneer je de border op 2 zou zetten, dan wordt er een rand zichtbaar van 2 pixels groot:

<img src="images/logo.gif" border="2" />

De kleur van de border wordt bepaald door de kleuren die ingesteld zijn bij BODY als LINK, ALINK of VLINK (zie stap 3b).

Stap 12e – refereren naar het pad van images

Als je mijn instructies hebt gevolgd, in het begin van deze cursus, dan heb je de images geplaatst in de subdirectory “images” bij de HTML files. Stel, dat je dat niet hebt gedaan. De foto staat in dezelfde directory als het index.html file. Dan wordt de HTML code als volgt:

<img src="logo.gif" />

of

<img src="./logo.gif" />

De code “./” betekent dat het fotobestand zich bevindt in de directory, waar ook de opgevraagde HTML file te vinden is.

Indien je de graphic een directory hoger (terug) hebt geplaatst, dan kun je deze bereiken via de volgende HTML code:

<img src="../logo.gif" />

De code “../” betekent dat de browser een directory hoger moet om de graphic te vinden. Zou je verder terug willen, bijv twee directory’s hoger, dan moet je niet denken dat je gewoon meer puntjes moet toevoegen. Bij twee houdt het namelijk op. Wil je verder terug (hoger), dan wordt de code:

<img src="../../logo.gif" />

Deze codes zijn ook van toepassing op het refereren naar overige bestanden, bijv. de overige HTML files. Uiteraard kun je op een webserver ook het volledige webadres gebruiken:

<img src="https://www.domein.nl/images/logo.gif" />

Stap 12f – Fototypes (jpg, png en gif)

De meeste images online zijn van de bestandtypes .jpg of .jpeg, .png en .gif. Zij zijn het meest gangbaar voor elke browser. Daarnaast bieden ze de beste compressie, waardoor ze klein in formaat zijn en nog een redelijk beeldkwaliteit bieden. Andere bestandtypes kunnen problemen veroorzaken.

Het verschil tussen .jpg, .png en .gif is groot. Met .gif images kun je kleurgebruik beperken en animaties maken. De onbewerkte .gif images bestaan uit 256 kleuren. Van .gif en .png bestanden kun je de achtergronden transparant maken. Heel fijn! Het bestandtype .jpg kan gebruik maken van miljoenen kleuren, maar is toch klein in formaat. Samen met het .png bestand is het goed bruikbaar voor foto’s van bijv. mensen, dieren en producten. met fotobewerkingprogramma’s kun je met instellingen van al deze bestanden spelen, zodat het formaat bijvoorbeeld kleiner wordt. Een kleiner formaat betekent dat het sneller te downloaden is.

In HTML 5 wordt .svg ook belangrijker. Je kunt dan zelfs met HTML vector graphics samenstellen. Daar heb je geen foto’s meer bij nodig.

Stap 12g – image problemen

Met foto’s werken is ontzettend foutgevoelig. Let goed op de benaming van de image! Wanneer de image en de HTML files online staan, kunnen er images niet werken. Weet je zeker dat desbetreffende image op de server staat, dan kan het zijn dat de referentie vanuit HTML code niet goed is.

Vermijd spaties in namen

Let op bij het bedenken van bestandsnamen. Vermijd spaties. Gebruik hier bijvoorbeeld underscores voor (_).

Wees consistent met hoofdletters en kleine letters 

De meest voorkomende reden dat een image niet werkt, is dat er in de bestandsnaam van de image hoofdletters voorkomen, die je niet in je code hebt overgenomen. Alles moet helemaal matchen. Bijvoorbeeld image.GIF moet in HTML echt zo aangegeven worden: <IMG SRC=”image.GIF”> en dus niet <IMG SRC=”image.gif”>.

Pad checken

Klopt de code en de bestandsnaam van de foto, controleer dan de locatie. Verwijs je wel naar de juiste plek op de server? Zie hierboven!

JPG problemen

Er zijn 2 kleurenmodellen die bij JPG files gebruikt kunnen worden. Voor het web gebruik je RGB. Krijg je bestanden van een drukker, dan is de kans groot dat dit het CMYK-model gebruikt. Dat zie je dus niet aan de .jpg extensie. Helaas zal deze foto dan niet door een browser weergeven worden. Dit type is namelijk bedoeld voor drukwerk. Je moet ze dan door een fotoprogramma heenhalen die dit model kan aanpassen, bijvoorbeeld Photoshop.

Naar stap 13

Bookmark the permalink.

Comments are closed.