Inhoud

Website template

Als het goed is weet je nu genoeg om de HTML template te gaan gebruiken. Op deze pagina leg ik uit hoe je het template gebruiksklaar maakt. Op de volgende pagina ga ik in op het opzetten van een website structuur op basis van dit HTML template.

Selecteer de HTML code in onderstaand tekstvak en kopieer het in een tekst editor, bijvoorbeeld Notepad/Kladblok (géén Word!).

<textarea name='template' cols='50' rows='7'> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Website template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <p><body> <table width="100%" border="0" cellspacing="2" cellpadding="3"> <tr> <td width="33%" colspan="3"><img src="/img/website_logo.gif" alt="logo"></td> </tr> </table> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#516B88"> <tr> <td width="10%" bgcolor="#C5CED3"><a href="/">Home</a></td> <td width="10%" bgcolor="#D6DDE0"><a href="/produkten">Produkten</a></td> <td width="10%" bgcolor="#E6EAEC"><a href="/bedrijfsinfo.html">Bedrijfsinfo</a></td> <td width="10%" bgcolor="#EDEEF1"><a href="/contact.html">Contact</a></td> <td width="10%" bgcolor="#F4F5F7"> </td> <td width="50%" bgcolor="#F4F5F7"> </td> </tr> </table> <table width="100%" border="0" cellspacing="2" cellpadding="15"> <tr> <td width="14%" height="116" valign="top"><ul> <li><a href="/pagina1.html">link1</a></li> <li><a href="/pagina1.html">link2</a></li> <li><a href="/pagina1.html">link3</a></li> </ul></td> <td width="65%" valign="top"><h1>Pagina titel</h1> <p>Hier komt de tekst en eventueel plaatjes. De tekst is ingedeeld in paragraafjes met behulp van de <p></p> tags. Verder is gebruik gemaakt van de <h1></h1> tags voor de pagina titel en <h2></h2> tags voor subkopjes. </p> <h2>Subkopje: CSS</h2> <p>Het template zoals het er nu uitziet is misschien niet helemaal naar wens. Je wilt bijvoorbeeld een ander lettertype voor de tekst, andere kleuren voor links en geen balletjes in het linklijstje. Dat kan, met behulp van CSS. Je kunt met CSS centraal de opmaak van alle elementen op de pagina regelen. Op CSS ga ik niet in in deze uitleg, maar wellicht komt het later op de site aan bod. </p> <h2>Tot slot</h2> <p>Dit is het einde van de pagina tekst. Je kunt dit template gebruiken als basis voor alle pagina's op de website die je gaat maken. </p> </td> <td width="21%" valign="top"> </td> </tr> </table> <table width="100%" border="0" cellspacing="2" cellpadding="3"> <tr> <td> </td> </tr> </table> </body> </html>   </textarea>

Sla de template op als 'index.html' in jouw website directory. Als je de standaardinstellingen van Abyss X1 hebt gebruikt is dit de directory C:\Program Files\Abyss Web Server\htdocs. Je kunt de aanwezige index.html overschrijven. Dat is de welkom pagina van Abyss die je zag bij het installeren van de webserver. Je kunt de template nu alvast testen door met je browser naar http://localhost te gaan. Het logo zal ontbreken.

Maak in de root directory (htdocs) een nieuwe directory aan genaamd "img". <br /> <br /> website

Rechtermuisklik op deze link en kies 'save picture as' (afbeelding opslaan als). Sla de afbeelding op in de map C:\Program Files\Abyss Web Server\htdocs\img.

Ga (opnieuw) naar http://localhost met je browser. Als het goed is zie je de temlpate in actie.

template

Het template bestaat uit 3 tabellen. Alle tabellen bestaan uit 1 rij. In de bovenste tabel staat het website logo plaatje. Dit wordt opgehaald met de <img> tag. Om precies te zijn <img src="/img/website_logo.gif" alt="logo">. Het alt attribuut is een stukje tekst dat verschijnt als je je muis op het plaatje laat rusten. Als het plaatje niet gevonden kan worden op de server wordt de alt tekst ter vervaning afgedrukt. De alt tekst is verplicht als je valide HTML wil schrijven. het src (source) attribuut bevat het pad naar het plaatje. In dit geval <website root>/img/website_logo.gif.

In de middelste tabel zijn links opgenomen naar de hoofdsecties van de website. Deze navigatiebalk heeft een donkere achtergrond en 1 pixel cellspacing zodat de donkere achtergrond als omlijning van de cellen fungeert. De cellen zelf hebben elk een iets andere achtergrondkleur.

De derde en laatste tabel bestaat uit 1 rij in die rij 2 grote cellen. In de linkercel vind je een lijst (<ol></ol>) met links naar de pagina's binnen de sectie. In de rechtercel komt de hoofdtekst van de pagina. Bovenaan de tekst is een paginatitel opgegeven tussen <h1></h1> tags. Daaronder is de tekst verdeeld in <p>paragraafjes</p> en de <h2></h2> tags zijn gebruikt voor subkopjes.

Je kunt dit template naar wens aanpassen met een HTML editor of in notepad. Als je de HTML eenmaal kent en begrijpt dan is er op het gebruik van een HTML editor niets tegen. Een editor kan je in dit geval helpen om sneller te werken. Populaire editors zijn Macromedia Dreamweaver, Frontpage en CoffeeCup HTML Editor.