Afbeeldingen

Gegevens

Categorie: HTML Basiscursus

Tot nu toe hebben we slechts 'saaie' tekst behandeld. In een aantrekkelijke pagina mogen afbeeldingen, logo's, foto's en andere plaatjes uiteraard niet ontbreken.

Een afbeelding voeg je in met de image-tag <img>. De image-tag heeft net zoals de 'pagebreak'
géén closingtag. xHtml vereist dat de tag met een / wordt afgesloten: <img />

Alleen met het invoegen van <img /> kom je nog niet ver. Als attribuut geef je het pad en de naam van de afbeelding op: <img src="/plaatje.jpg" /?. Src staat voor source (bron) dat het pad aangeeft van het plaatje.

In een andere attribuut, de alt-tag', geef je een korte omschrijving van het plaatje. De omschrijving wordt weergegeven als de bezoeker om welke reden het weergeven van plaatjes uit heeft staan. Ook wordt de alt-tag weergegeven door screenreaders voor blinden. Vergeet die alt-tag dus niet! Bij Internet Explorer wordt de alt-tag ook in de tiptool weergegeven.

<img src="/images/htmlcursus/plaatje1.jpg" alt="Leer nu GRATIS HTML" />

Het eerste voorbeeld gebruikt het absolute pad. Het begint vanaf 'HTTP... enz. Het tweede voorbeeld geeft het relative pad aan. Het is aan jouw persoonlijke voorkeur welke je gebruikt.

Uitlijnen

Met <img src="/..." align="left" /> of <img src="/..." align="right" /> laat je het plaatje links of rechts van de tekst uitlijnen. Heel mooi is het niet, omdat de tekst helemaal tot het plaatje uitgelijnd wordt. Ik geloof niet dat ik nog moet zeggen dat je dit fraaier met CSS kunt krijgen en dat je dat in de CSS cursus kan lezen...;-)

Een plaatje als link

Om een link te maken van een plaatje, zet je er, net als bij tekst, de anchor-tag voor. Zie voor meer informatie het artikel over links

Samenvatting:

Ik wil nogmaals benadrukken dat het attribuut alt="omschrijving van het plaatje" héél belangrijk is en niet mag ontbreken.