Stap 5
Organiseer nu je tekstlayout in kladblok, zodat je dit krijgt:
<html>
<head>
<title>test homepage maken met kladblok</title>
</head>
<body>
<table width=100% bgcolor="yellow" border="3">
<tr>
<td bgcolor="gray" width=15%>cel 1 </td>
<td><h1><font color="red"><center><marquee behavior=alternate scrolldelay=200 width="120%"> test kladblok</marquee></center></h1></td>
<td bgcolor="green" width=25%>cel 3 </td>
</tr>
<tr>
<td>cel 4</td>
<td>cel 5</td>
<td>cel 6</td>
</tr>
</table>
</body>
</html>
Nu kunnen we zien waar de td tags staan voor onze invoer.
Voorbeeld: popup 1
We gaan een plaatje invoeren:
basiscode
<img src="lokatie waar plaatje staat.jpg">
<td>cel 5 < img src="c:\plaatjes\auto\ferarri400.jpg"> </td>
normaal gesproken zet je je plaatje in dezelfde map als je pagina, dan wordt de link:
<td>cel 5 < img src="ferarri400.jpg"> </td>
Voorbeeld: popup 2
Nu gaan we de layout aanpassen:
dit is de code: valign=top voor bovenste positie en align=center om in het midden te zetten.
Als je een keer valign=top hebt ingevoerd, kun je dit kopieren en plakken in de andere td tags.
Resultaat:
<td valign=top> cel 4 </td >
<td valign=top align=center>cel 5 <img src="ferarri400.jpg"</td>
<td valign=top>cel 6</td>
Voorbeeld: popup 3
Ter info:
img is de afkorting van image= plaatje
src is de afkorting van source = bron
valign is vertikaal uitlijnen
en align is horizont aal uitlijnen
De borders op "0" zetten geeft dit resultaat:
Voorbeeld: popup 4
In dit voorbeeld is bij de onderste tabel de middelste cel eruit gehaald, en in de twee overblijvende cellen een auto gecentreerd weggezet.
De achtergrondkleur van deze tabel heeft dezelfde kleur gekregen als de achtergrond van de foto.
De kleur kies je met pixie, een progie, freeware op te halen op: http://www.nattyware.com/ 63 kb
Echter er zit een geel randje rond de buitenste cellen.
Dit lossen we op door deze toevoegingen:
cellpadding="4" zorgt voor een padje IN de cel, dan blijft de tekst van de rand vandaan
cellspacing="0" zorgt voor ruimte TUSSEN de cellen, "0" is dus geen ruimte.
Nu zul je constateren dat de marquee niet meer wordt weergegeven.
Dit lossen we op door ook cel twee met een width="60%" te voorzien.
Het verdient aanbeveling om ALTIJD alle cellen van de bovenste rij van een width te voorzien, omdat Netscape anders een verkeerde weergave geeft.
Dan krijg je dit als resultaat:
Voorbeeld: popup 5
Nu de achtergrond dezelfde kleur maken door in de bodytag bgcolor in te voeren.
De letters zijn met cellpadding vrij gekomen, de auto's zijn lager gezet met de break tag <br>
deze zijn er twee vóór het plaatje gezet. De oortjes zijn ferrari rood gemaakt, weer met pixie.
Het wordt nog wel wat.
Voorbeeld: popup 6
En de auto kan ook rijden.
En dit zetten we in de body erbij:
body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"
dan is de rand weg, en wordt het scherm beter gevuld
Voorbeeld: popup 7
Naar: volgende pagina | 
Kladblok 
