Documentatie: HTML pagina's

Over het algemeen is er niet veel veranderd vergeleken met de structuur van oude HTML pagina's. Er zijn wat opties bijgekomen en verdwenen. Er is echter één optie bijgekomen die van groot belang is, namelijk de tag <fmfbox>. We vragen jullie om in ieder geval dat stukje goed door te lezen.

Voor verdere informatie verwijzen we je graag naar een van de vele zeer goede HTML-tutorials op het internet, bijv W3schools. Let erop dat de template er vanuit gaat dat je pagina XHTML-valid is. Je kan hiervan enigszins afwijken, maar een tabel moet bijvoorbeeld afgesloten zijn, anders gaat het hopeloos fout.

Volgende: Submenu's

Template

Om de template te kunnen gebruiken moet elke HTML pagina beginnen met de tag <templatepage>. Daarmee wordt jouw pagina in de template gezet. Je hoeft dan geen structurele HTML commando's (zoals bijv <html>, <head>, <body> en <title>) te gebruiken, want dit wordt allemaal door de template gegenereerd.

De oude templatepage tag kende behalve het 'title' attribuut ook nog de attributen 'globalsection' en 'localsection'. Deze zijn vanwege de nieuwe menustructuur overbodig en kunnen achterwege gelaten worden. Aan het 'title' attribuut wordt de tekst "FMF - " toegevoegd en het is daarom onnodig om 'FMF' in je titel op te nemen.

Uiteindelijk ziet de eerste regel van je HTML bestand er zo uit:

<templatepage title="Documentatie: HTML pagina's" />

waarbij de tekst tussen de quotes natuurlijk voor eigen invulling is.

FMFBox

Zoals je ziet staat alle inhoud in witte boxen met een rode rand en schaduw. Erboven staat een grote blauwe titel of een iets kleinere rode titel. Elk van deze boxen (inclusief titel) is een fmfbox, die gemaakt kan worden met de gelijknamige tag.

<fmfbox>
 ...
</fmfbox>

Om de blauwe titel te krijgen kun je het attribuut 'title' gebruiken. Deze wordt eigenlijk alleen voor de eerst fmfbox op een pagina gebruikt en is dus tevens de pagina titel. De rode kopjes kun je maken met het attribuut 'subtitle', waarbij de naam van het attribuut al zegt dat deze in feite de rest van je pagina opdeelt.

<fmfbox title="Dit is een kopje">

en

<fmfbox subtitle="Dit is een subkopje">

Voor goede opmaak moet tekst geplaatst worden tussen paragrafen <p> .. </p>, subkopjes <h3> .. </h3>, preformatted tekst <pre> .. </pre>, tabellen of divisions.

Floats ed.

Het gebruik van de "float" style levert enige problemen op in de template (voorbeeld). Het plaatje valt hierdoor buiten de fmfbox. Een oplossing is de volgende: Na het plaatje en de tekst vul je de volgende regel in:

<div style="clear:both;height:0">
&nbsp;</div>

Dit voorkomt het eerder genoemde probleem (voorbeeld). Wellicht niet de meest elegante oplossing, maar het werkt wel.

Button tag

Om de juiste lay-out te krijgen bij knoppen is het nodig om voor knoppen de button tag te gebruiken. Dus gebruik

<button name="submit" value="Knop">Knop</button>  

In plaats van

<input type="submit" value="Knop">