HTML Layout
De layout van een webpagina is erg belangrijk en het kost veel tijd om de layout van een website te ontwerpen. Alle moderne websites maken gebruik van CSS en Javascript om zo de website dynamische mogelijk te maken, maar je kunt ook een goede layout maken met behulp van eenvoudige HTML tabellen in combinatie met opmaakcodes. In dit hoofdstuk zullen we je enkele voorbeelden geven over hoe je een eenvoudige layout kunt maken voor je webpagina met behulp van HTML en zijn attributen.Gebruik van tabellen
De eenvoudigste en meest populaire manier van het creëren van een layout is met behulp van de HTML <table> tag. Deze tabellen zijn gerangschikt in kolommen en rijen, je kan ze op elk gewenste manier gebruiken.Bijvoorbeeld, de volgende HTML-indeling wordt bereikt met behulp van een tabel met 3 rijen en 2 kolommen, maar de kolomkop en voettekst omspant beide kolommen met de colspan attribuut:
Voorbeeld:
<table width="100%" border="0" cellpadding="10">
<tr>
<td colspan="2" bgcolor="#000000">
<font color="#ffffff"><h1>Codecenter</h1></font></td>
</tr>
<tr valign="top">
<td bgcolor="#eeeeee" width="20%">
<b>MENU</b><p>
HTML<br>
PHP<br>
CSS
</td>
<td bgcolor="#ffffff" width="80%" height="200">
<b>LES: 1</b>
<p>Online HTML leren met behulp van live voorbeelden.</p>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#000000">
<font color="#ffffff">
<center>Copyright © <i>Codecenter.nl</i></center>
</font>
</td>
</tr>
</table>
Meerdere kolommen Layout
Je kunt de inhoud van je webpagina in de middelste kolom houden en kan je de linkerkolom gebruiken voor een menu. De rechter kolom kan worden gebruikt om reclame of andere spullen in te zetten. Deze layout is vergelijkbaar met wat we hebben gebruikt op onze website codecenter.nl
Voorbeeld:
<table width="100%" border="0" cellpadding="10">
<tr valign="top">
<td bgcolor="#eeeeee" width="20%">
<b>MENU</b><p>
HTML<br />
PHP<br />
CSS
</td>
<td bgcolor="#0099ff" height="200" width="60%">
<b>Drie kolommen layout</b>
<p>Online HTML leren met behulp van live voorbeelden</p>
</td>
<td bgcolor="#eeeeee" width="20%">
<b>Rechter menu</b><p>
HTML<br />
PHP<br />
CSS
</td>
</tr>
<table>
 |
Met tabellen kunnen we aardige layouts maken, maar de tabellen zijn eigenlijk niet echt ontworpen als een layout tool. Tabellen zijn meer geschikt voor het bekijken van gegevens in tabelvorm. |
Gebruik van het element <div> en <span>
Het <div> element is een blok level element dat wordt gebruikt voor het groeperen van HTML-elementen. Terwijl de HTML <span> element gebruikt wordt voor het groeperen van elementen op een inline-niveau. Met het <div> element kan je ervoor zorgen dat je pagina overzichtelijker wordt, maar deze tag kan je ook gebruiken om een specifieke style te geven aan bepaalde stukken van je webpagina.In het volgende voorbeeld maken we gebruik van Cascading Style Sheets (CSS) voor het maken van een layout.
Voorbeeld:
<body>
<div id="header">
<h1>Codecenter</h1>
</div>
<div id="menu">
<b>MENU</b><p>
HTML<br>
PHP<br>
CSS<br>
</div>
<div id="inhoud">
<h2>Introductie</h2>
<p>
Met HTML kan je eenvoudig je eigen website maken.
Wil je goede webpagina's bouwen, dan moet je weten hoe je ze maakt,
maar ook hoe je ze moet onderhouden.
</p>
<p>
Deze cursus leert je alles over HTML.
HTML is eenvoudig te leren en is leuk om mee te werken.
</p>
</div>
<div id="footer">
Copyright © <i>Codecenter.nl</i>
</div>
</body>
De bijhorende CSS code:
<style>
#header {
background-color:#333;
color:white;
text-align:left;
padding:10px;
}
#menu{
background-color:#eee;
height:250px;
width:100px;
float:left;
padding:35px 0 0 10px;
}
#inhoud {
width:50%;
float:left;
padding:10px 0 0 15px;
}
#footer {
background-color:#333;
color:white;
clear:both;
text-align:center;
padding:10px;
}
</style>
