HTML Lay-out

Website toont vaak inhoud in meerdere kolommen (zoals tijdschriften en kranten).

Gebruik van HTML-lay-out met het <div>-element

Opmerking:Het <div>-element wordt vaak gebruikt als lay-outhulpmiddel, omdat het gemakkelijk kan worden geplaatst met CSS.

Dit voorbeeld gebruikt vier <div>-elementen om een meercolombeweging te creëren:

Voorbeeld

<body>
<div id="header">
<h1>Stadsgalerij</h1>
</div>
<div id="nav">
Londen<br>
Parijs<br>
Tokyo<br>
</div>
<div id="section">
<h1>Londen</h1>
<p>
Londen is de hoofdstad van Engeland. Het is de meest bevolkte stad in het Verenigd Koninkrijk
met een stedelijk gebied van meer dan 13 miljoen inwoners.
</p>
<p>
staand aan de rivier de Theems, is Londen al duizend jaar een belangrijke nederzetting
zijn geschiedenis gaat terug tot zijn oprichting door de Romeinen, die het Londinium noemden.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Probeer het zelf

CSS：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    hoogte:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

gebruik de website-indeling van HTML5

De nieuwe semantische elementen van HTML5 definiëren verschillende delen van een webpagina:

HTML5 Semantische Elementen

header definieer de kop van een document of sectie
nav definieer een container voor navigatiekoppelingen
section definieer een sectie in een document
article definieer een onafhankelijk zelfstandig artikel
aside definieer inhoud buiten de inhoud (bijvoorbeeld een zijbalk)
footer definieer de voettekst van een document of sectie
details definieer extra details
summary definieer de titel van het element details

Deze voorbeeld gebruikt <header>, <nav>, <section>, en <footer> om een meercolombeweging te creëren:

Voorbeeld

<body>
<header>
<h1>Stadsgalerij</h1>
</header>
<nav>
Londen<br>
Parijs<br>
Tokyo<br>
</nav>
<section>
<h1>Londen</h1>
<p>
Londen is de hoofdstad van Engeland. Het is de meest bevolkte stad in het Verenigd Koninkrijk
met een stedelijk gebied van meer dan 13 miljoen inwoners.
</p>
<p>
staand aan de rivier de Theems, is Londen al duizend jaar een belangrijke nederzetting
zijn geschiedenis gaat terug tot zijn oprichting door de Romeinen, die het Londinium noemden.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Probeer het zelf

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    hoogte:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

HTML lay-out met tabellen

Opmerking:Het <table> element is niet ontworpen als lay-outhulpmiddel.

Het <table> element wordt gebruikt om tabular data weer te geven.

Gebruik van de <table> element om lay-outeffecten te verkrijgen, omdat de stijl van het tabel-element kan worden ingesteld met CSS:

Voorbeeld

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Opmerking" style="hoogte:32px;breedte:32px">
  </th>
  <td>
    Het tabel-element is niet ontworpen om een lay-outhulpmiddel te zijn.
  </td>
</tr>
</table>
</body>

Probeer het zelf

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>