Stap 12a - toevoegen van foto's en graphics:
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.
Het toevoegen van foto's en graphics 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>
<FONT COLOR="#FF9B6A"><B>Nora Tol Virtual Publishing</B></FONT> werd zo'n 12 jaar geleden gestart toen eigenaresse <FONT COLOR="#FF9B6A"><I>Nora</I></FONT> begon met het aanbieden van haar webdesigndiensten..
<P>
Dit is een beknopte lijst van de diensten die Nora Tol Virtual Publishing levert:
<OL>
<LI> Webdesign
<LI> Webhosting
<LI> Domeinregistratie
</OL>
<CENTER>
<FONT SIZE=4>Kijk snel op haar homepage voor meer informatie.
<BR>
E-mailen kan natuurlijk ook!</FONT>
<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 de image die je in jouw document wilt hebben. In dit geval is dit "logo.gif", die in de directory "images" staat. (Zie voor meer details Stap 12e)
Het weergeven van de maten (WIDTH en HEIGHT) van de graphic is niet verplicht, maar helpt het downloaden versnellen. Doordat je de browser hebt verteld hoe groot de image is, hoeft dit niet eerst berekend te worden. De waarden bij WIDTH en HEIGHT zijn pixels.
ALT staat voor "alternative" en ook dit is niet verplicht. Wanneer de foto niet zou werken wordt de tekst tussen de aanhalingstekens weergegeven. Ook als je lang met de muis op een image blijft staan, zal deze tekst zichtbaar worden.
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 met 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 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 alsvolgt:
<IMG SRC="logo.gif">
of
<IMG SRC="./logo.gif">
De code "./" betekend dat de graphic zich bevind in de directory, waar ook de HTML file te vinden is.
Indien je de graphic een directory terug hebt geplaatst, dan kun je deze bereiken via de volgende HTML code:
<IMG SRC="../logo.gif">
De code "../" betekend dat de browser een directory terug moet om de graphic te vinden. Zou je verder terug willen, bijv twee directory's terug, dan wordt de code "../../" enz.
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 files, 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 betekend 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
Let goed op de benaming van de image! Wanneer de image en de HTML file 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 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, bijv. 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">.
