In een HTML pagina kunnen plaatjes opgenomen worden. Dit kan zowel voor de achtergrond als voor plaatjes op de pagina.
De positie van een plaatje kan in de HTML direct in de tag's worden vastgelegd. Beter is het om het met behulp van CSS Styles te doen. Dit biedt meer mogelijkheden, is makkelijker te onderhouden en daarnaast blijft de HTML codering vrij van allerlei attribuut toevoegingen.
In de HTML kun je de positie van een plaatje bepalen door in de <IMG> tag het attribuut Align op te nemen. Dit attribuut zorgt ervoor dat het plaatje horizontaal zijn plaats krijgt op de pagina. Er zijn een aantal mogelijkheden om de plaats van het plaatje vast te leggen.
De plaats waar het plaatje moet komen te staan, links of rechts op de pagina, kan dmv. het align attribuut in de <IMG> tag, worden gewijzigd.
Standaard zal het plaatje, zonder in de HTML in de <IMG>-tag een uitlijning op te geven, links worden geplaatst.
De eerste regel tekst staat rechts naast het plaatje, gelijk met de onderkant daarvan en de volgende regels eronder.
Met <IMG align="left"> wordt het plaatje links op de pagina gezet en zal de tekst rechts ernaast komen te staan.
De eerste regel tekst staat rechts naast het plaatje, gelijk met de bovenkant daarvan.
Alle verdere tekstregels worden, al naar gelang de hoogte van het plaatje en de beschikbare ruimte op de pagina, ernaast geplaatst.
Past de tekst er niet meer naast, dan loopt de eerstvolgende regel onder het plaatje door.
Met <IMG align="right"> staat het plaatje nu rechts op de pagina en de eerste regel tekst staat links van het plaatje gelijk met de bovenkant daarvan.
Alle verdere tekstregels worden, al naar gelang de hoogte van het plaatje en de beschikbare ruimte op de pagina, ernaast geplaatst.
Past de tekst er niet meer naast, dan loopt de eerstvolgende regel onder het plaatje door.
Het centreren van een afbeeling met het Align attribuut is niet mogelijk. Met <IMG align="center"> komt het plaatje nu automatisch links op de pagina te staan en de eerste regel tekst staat rechts van het plaatje gelijk aan het midden daarvan.
Alle verdere tekstregels worden, automatisch onder het plaatje geplaatst.
De afbeelding wordt automatisch zo vaak geplaatst dat de hele achtergrond er mee bedekt is.
Algemeen ondersteunde formaten van afbeeldingen zijn GIF en JPG. Kies hierbij voor een achtergrond afbeelding die niet al te groot is, het laden van de pagina kan hierdoor vertragen.
Met CSS kan de positie van een plaatje worden vastgelegd in diverse elementen door er een class voor aan te maken. Hierbij zijn er diverse mogelijkheden om de plaats, de afstand tot andere elementen en de wijze waarop het plaatje moet worden getoond, met of zonder kader, vast te leggen.
We beperken ons tot het beschrijven van 3 mogelijkheden. Rechts, links en gecentreerd.
Met behulp van het attribuut "float" toegevoegd aan het element <IMG> kan de opmaak en daarmee ook de positie van een afbeelding in CSS worden vastgelegd.
De opmaak voor diverse elementen in CSS noemen we styles. Een specifieke opmaak voor een element kan worden vastgelegd in een afzonderlijke stijlregel de class
In onderstaande voorbeeld tekst "Lorem Ipsum" (een tekst reeds gebruikt in 1500) geven we de drie voorbeelden. Links, rechts en gecentreerd.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id erat. Vestibulum a leo. Sed velit lacus, sagittis at, auctor eu, mollis sit amet, urna. Aenean eleifend risus. Donec elit sapien, interdum sed, vestibulum a, hendrerit ac, urna. Aenean cursus. Phasellus tristique libero. Donec nec ipsum vel lorem ornare sollicitudin. Sed ornare augue quis arcu. Nullam non erat tempus diam luctus tempus. Ut pharetra fermentum ligula. Nam dolor.
Praesent tincidunt consequat sem. Fusce sed libero. Etiam at nibh ac nibh tristique vestibulum. Morbi euismod tristique ante. Fusce quam wisi, accumsan quis, mollis at, sodales sed, augue. Suspendisse potenti. Nulla eget orci non elit mollis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam ullamcorper ullamcorper justo. Nam tempus, purus in faucibus tincidunt, sapien lacus varius neque, eget consectetuer odio purus eu mi. Donec sit amet est. In pede nunc, fermentum a, nonummy sed, hendrerit eu, est. Praesent consequat libero nec risus. Nulla sed urna. Nunc aliquet nunc id sapien. Nunc laoreet mattis libero. Sed orci dui, viverra non, tincidunt a, tristique sed, neque. Proin eu libero. Cras pharetra orci eu ligula. Fusce hendrerit, sapien quis eleifend convallis, dolor tortor facilisis quam, sed porttitor tellus risus eu massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id erat. Vestibulum a leo. Sed velit lacus, sagittis at, auctor eu, mollis sit amet, urna. Aenean eleifend risus. Donec elit sapien, interdum sed, vestibulum a, hendrerit ac, urna. Aenean cursus. Phasellus tristique libero. Donec nec ipsum vel lorem ornare sollicitudin. Sed ornare augue quis arcu. Nullam non erat tempus diam luctus tempus. Ut pharetra fermentum ligula. Nam dolor.
Praesent tincidunt consequat sem. Fusce sed libero. Etiam at nibh ac nibh tristique vestibulum. Morbi euismod tristique ante. Fusce quam wisi, accumsan quis, mollis at, sodales sed, augue. Suspendisse potenti. Nulla eget orci non elit mollis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id erat. Vestibulum a leo. Sed velit lacus, sagittis at, auctor eu, mollis sit amet, urna. Aenean eleifend risus. Donec elit sapien, interdum sed, vestibulum a, hendrerit ac, urna. Aenean cursus. Phasellus tristique libero. Donec nec ipsum vel lorem ornare sollicitudin. Sed ornare augue quis arcu. Nullam non erat tempus diam luctus tempus. Ut pharetra fermentum ligula. Nam dolor. Praesent tincidunt consequat sem. Fusce sed libero. Etiam at nibh ac nibh tristique vestibulum. Morbi euismod tristique ante. Fusce quam wisi, accumsan quis, mollis at, sodales sed, augue. Suspendisse potenti. Nulla eget orci non elit mollis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
Pellentesque tempus velit in wisi. Vivamus mi. Sed nunc. Etiam rhoncus mollis metus. Cras volutpat augue sit amet quam. Donec iaculis euismod dui. Morbi non nibh. Duis adipiscing nunc vitae est.
Nunc quis orci vitae quam sagittis malesuada. Maecenas in augue.
Quisque auctor mauris et dui. Vestibulum dolor diam, porttitor vitae, pretium eu, ullamcorper quis, tellus. Nunc pulvinar pede nec odio.
Nulla facilisi.