HTML-Layout

Webseiten zeigen oft Inhalte in mehreren Spalten an (wie Magazine und Zeitungen).

HTML-Layout mit dem <div>-Element

Anmerkung:<div>-Element wird häufig als Layout-Werkzeug verwendet, da es leicht durch CSS positioniert werden kann.

This example uses four <div> elements to create a multi-column layout:

Beispiel

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
Its history goes back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Versuchen Sie es selbst

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height: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>

Use HTML5 for website layout

HTML5 provides new semantic elements that define different parts of a webpage:

HTML5-Semantische Elemente

header Define the header of a document or section
nav Define a container for navigation links
section Define a section within a document
article Define an independent self-contained article
aside Define content outside the main content (such as sidebars)
footer Define the footer of a document or section
details Define additional details
summary Define the title of the details element

This example uses <header>, <nav>, <section>, and <footer> to create a multi-column layout:

Beispiel

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
Its history goes back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Versuchen Sie es selbst

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height: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-Layout mit Tabellen

Anmerkung:Das <table>-Element wurde nicht als Layoutwerkzeug gestaltet.

Das <table>-Element dient zur Anzeige tabellarischer Daten.

Die Verwendung des <table>-Elements ermöglicht ein Layout, da die Stile des Tabellenelements über CSS eingestellt werden können:

Beispiel

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Hinweis" style="height:32px;width:32px">
  </th>
  <td>
    Das Tabellenlement wurde nicht als Layoutwerkzeug konzipiert.
  </td>
</tr>
</table>
</body>

Versuchen Sie es selbst

CSS

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