Stap 12 – foto’s

Aan mijn index.html document wil ik een graphic toevoegen. Graphics en foto’s worden op dezelfde manier ingesteld. Het verschil tussen de twee zit hem in de afbeelding zelf. Is het een geanimeerd of met de computer gecreëerd plaatje, dan spreek je van een graphic. Is de afbeelding een echte bloem of een persoon, dan spreek je van een een foto (image). HTML herkent beiden als image.

Logo toevoegen

In het index.html bestand ga ik een logo toevoegen. Het toevoegen van foto’s en graphics, zoals logo’s, aan een HTML document gaat op de volgende manier:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<IMG SRC="images/logo.gif" WIDTH=400 HEIGHT=161 ALT="logo">
<H2>Een korte introductie</H2>
</CENTER>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van allerlei internetdiensten,
zoals

<OL>
<LI> Webdesign</LI>
<LI> Webhosting</LI>
<LI> Domeinregistratie</LI>
</OL></P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media. Dit zijn een
aantal van de aangeboden diensten:

<UL>
<LI> Schrijven van blogs en artikelen</LI>
<LI> Optimaliseren van bestaande content</LI>
<LI> Voorprogrammeren van social media berichten</LI>
</UL></P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<CENTER>
<HR WIDTH=50% COLOR="#000000" NOSHADE SIZE=2>
</CENTER>
</FONT>
</BODY>
</HTML>

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

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 in jouw document wilt hebben. 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, wanneer je dit wel doorgeeft. 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. 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

Ook bij de IMG-tag heb je meer mogelijkheden. Zo kun je de lokatie van de image bepalen in verhouding tot de rest van het document (bijv. 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

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 (in pixels) bij HSPACE bepaalt de horizontale witruimte en de waarde bij VSPACE bepaalt de verticale witruimte.

Stap 12d – image border

Om de foto heen, kun je ook een border zichtbaar laten worden. Dit wordt meestal 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 images

Ik ga er, met deze cursus, vanuit dat je de images geplaatst hebt in de subdirectory “images” bij jouw HTML files. Stel, dat de graphic los bij jouw HTML files staat. Dan wordt de HTML code als volgt:

<IMG SRC="logo.gif">

of

<IMG SRC="./logo.gif">

De code “./” betekent dat de graphic zich bevindt in de directory, waar ook de 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 wordt de code “../../” en zo loopt het verder op.
Het heen en weer springen tussen directories is handig om ruimte op de server te beperken. Op deze manier hoef je vaste graphics van een website niet dubbel op de server te hebben staan.
Deze codes zijn ook van toepassing op het refereren naar overige bestanden, bijv. de overige HTML files.

Stap 12f – jpg en gif

Wanneer je een tijdje rondsurft op het Internet, zul je merken dat de meeste images van de bestandtypes .jpg of .jpeg en .gif zijn. Dit is, omdat zij het meest gangbaar zijn voor elke browser, het kleinst zijn qua formaat en nog een redelijk beeldkwaliteit bieden. Andere bestandtypes kunnen problemen veroorzaken.

Het verschil tussen .jpg en .gif is groot. Met .gif images kun je kleurgebruik beperken, animaties maken en achtergronden transparant maken. De onbewerkte .gif images bestaan uit 256 kleuren, maar met fotobewerkingprogramma’s, kun je hier zelf invloed op uitoefenen en dit eventueel terugbrengen, zodat het formaat kleiner wordt. Een kleiner formaat betekent dat het sneller te downloaden is.

Het bestandtype .jpg kan gebruik maken van miljoenen kleuren, maar is toch klein in formaat. Hierdoor is het goed bruikbaar voor foto’s van bijv. mensen, dieren en producten.
Let er wel op, dat je bij uitgebreide grafische software pakketten, zoals Adobe Photoshop, het bestandstype .jpg kan gebruiken bij twee verschillende kleurenpaletten. Voor het web moet je dan RGB gebruiken. Met CMYK kun je ook in .jpg opslaan, maar dat zal een browser niet weergeven. Dit type is namelijk bedoeld voor drukwerk.

Per situatie is verschillend welk bestandtype je het best kunt gebruiken. Vaak kun je het beste beiden proberen en bekijken welke van de twee het beste resultaat hebben kwa kwaliteit en downloadtijd.

Ook de bestandstypes .bmp en .png worden overigens door de meeste browsers ondersteund.

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.

De meest voorkomende reden, waarom een image niet werkt, wanneer de homepage online staat, is dat er in de bestandsnaam van de image hoofdletters voorkomen, bijvoorbeeld image.GIF, dit moet dan ook op deze manier gerefereerd zijn in de HTML, dus <IMG SRC=”image.GIF”> en niet <IMG SRC=”image.gif”>.

Bij .jpg bestanden moet het kleurenpalet van de foto RGB zijn. Bestanden in CMYK worden niet door de browser weergegeven.

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

Naar stap 13

Bookmark the permalink.

Comments are closed