<HTML>

<HEAD>
<TITLE>
titel in de werkbalk
</TITLE>
</HEAD>

<BODY style="background-color: fuchsia">
<SPAN style="width: 300px">
<IMG src="hayworth.jpg" style="position: absolute; top: 40px; left: 40px">
</SPAN>
</BODY>

</HTML>
LES 3

Een webpagina is te vergelijken met een prikbord, waar verschillende elementen op geprikt kunnen worden, zoals briefjes, foto's, kranteknipsels, ansichten. Wat het laatst wordt opgeprikt, zit bovenop.

Voor webpagina's die zich beperken tot één scherm (dus zonder scrollen) nemen we de maat van ons prikbord. Als u op uw bureaublad met rechts klikt, geeft het menu een optie voor de scherminstellingen. Daar worden mogelijke resoluties aangegeven, bijvoorbeeld:

   1440x900 (native)
   1280x720
   1024x768

In het algemeen kunt u het beste voor "native" kiezen. Houd er rekening mee dat er van de hoogte flink wat af gaat wegens de werkbalken aan de boven- en onderkant. Voor deze html-cursus stel ik de schermgrootte op 1000x700.

We hebben dus nu een prikbord in de kleur fuchsia en het is 1000 pixels breed en 700 pixels hoog.

We kunnen nu exact opgeven waar een element geplaatst moet worden. Dit kan op verschillende manieren. Bij een relatieve plaatsbepaling werkt het met procenten, bij een absolute plaatsbepaling met pixels. In deze cursus heeft het laatste mijn voorkeur. Binnen de tag moet dan staan: POSITION: ABSOLUTE, gevolgd door de plaats van de linker bovenhoek van het element door middel van TOP en LEFT. De absolute waarde van de pixels telt vanaf de randen van de eenheid waarbinnen het commando zich bevindt, dus in dit geval binnen de SPAN.

Kijk nu in de html-tekst links hoe ik een kleine foto op 40px van boven en van links heb gezet. Ook in het kadertje heb ik de tekst vervangen door een fotootje. De tag is <IMG> (geen eindtag nodig) en de foto moet een bron, SRC, hebben. Op de eigenschappen van de elementen "tekst" en "foto" kom ik later terug.

We hebben nu binnen een SPAN geen stukje tekst gezet, maar een afbeelding.
HOME vorige les volgende les