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:
- afbeeldingen die inhoudelijk iets toevoegen aan een pagina komen meestal direct in de html terecht
- afbeeldingen die puur decoratief zijn (presentatie/opmaak) komen zoveel mogelijk in de css
- hoe minder afbeeldingen in de html, hoe beter
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>
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>
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>
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.