Afbeeldingen verwerken in de markup (html).

Bron: http://www.sceneone.nl/afbeeldingen/in_markup.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Eerst even een paar vuistregels waar ik mezelf altijd aan houd. Het zijn geen ijzeren wetten waar je jezelf absoluut aan moet houden, maar meer richtlijnen:

Een afbeelding die je direct in je markup zet heeft minimaal de volgende attributen:

HTML: <img src="een_afbeelding.gif" width="100" height="75" alt="korte omschrijving" />

Let op:
De 'forward-slash' helemaal aan het einde van de <img> tag gebruik je alleen in het geval van xhtml

Je kunt ook een afbeelding in je markup zetten zonder de breedte en hoogte aan te geven. Op zich gaat dat goed, maar wanneer je de html gaat valideren zul je daar foutmeldingen op krijgen: width en height zijn verplichte attributen.
Datzelfde geldt voor de alt-tekst. Deze alt-tekst is bedoeld voor tekstbrowsers en screenreaders. Je geeft hier een korte omschrijving van de afbeelding, voor diegene die de afbeelding niet kunnen zien.
Het alt attribuut is overigens nooit bedoeld als zogenaamde tooltip, dat is het title attribuut

Eigenschappen van afbeeldingen beschrijven in je css

Het spreekt voor zich dat je de eigenschappen van de afbeeldingen die direct in de markup staan in je css kunt vastleggen. Uitgebreid zelfs:

CSS: img.voorbeeld{
float: left;
padding: 5px;
margin: 5px 5px 0 0;
border: 1px solid #999;
}
HTML: <p>
<img src="../_img/duiken.jpg" width="100" height="109" alt="duiken in Turkije" class="voorbeeld" />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

bekijk het resultaat

Of misschien zo:

CSS: img.voorbeeld{
float: right;
padding: 5px;
margin: 5px 0 5px 15px;
background: #999;
}

p.uitlijnen{
text-align: justify;
}
HTML: <p class="uitlijnen">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea <img src="../_img/duiken.jpg" width="100" height="109" alt="duiken in Turkije" class="voorbeeld" />
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

bekijk het resultaat

Of wat ingewikkelder:

CSS: p.image{
float: right;
padding: 10px 10px 5px 10px;
margin: 15px 0 0 15px;
background: #999;
font-style: italic;
font-size: 90%;
color: #fff;
text-align: center;
}

p.uitlijnen{
text-align: justify;
}
HTML: <p class="image"><img src="../_img/duiken.jpg" width="100" height="109" alt="duiken in Turkije" /><br />
duiken in Turkije</p>
<p class="uitlijnen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

bekijk het resultaat

Je ziet dat je afbeeldingen, door ze rechts of links te laten floaten keurig in je tekst kunt laten lopen. Ik denk dat het eigenlijk wel voor zich spreekt. Als je het hoofdstuk over positionering hebt doorgenomen denk ik dat je met de afbeeldingen die je direct in je markup plaatst een heel eind komt.

naar het begin van de pagina