HTML Layout

Website-Layout verbessert das Erscheinungsbild einer Website.

Bitte entwerfen Sie Ihr Website-Layout sorgfältig.

Examples

Online-Beispiele


So verwenden Sie das <div>-Element, um Layout hinzuzufügen


So verwenden Sie das <table>-Element, um Layout hinzuzufügen

Website-Layout

Die meisten Websites ordnen ihre Inhalte in mehreren Spalten an (wie Zeitschriften oder Zeitungen).

Die meisten Websites können mehrere Spalten mit <div>- oder <table>-Elementen erstellen. CSS wird verwendet, um Elemente zu positionieren oder Hintergründe und farbenfrohe Erscheinungsbilder für die Seite zu erstellen.

lamp Obwohl wir mit HTML-Tabellen-Tags schöne Layouts gestalten können, wird nicht empfohlen, Tabellen als Layoutwerkzeuge zu verwenden - Tabellen sind keine Layoutwerkzeuge.

HTML-Layout - Verwenden des <div>-Elements

Das <div>-Element ist ein Block-Level-Element, das verwendet wird, um HTML-Elemente zu gruppieren.

Unten sehen Sie ein Beispiel, das fünf <div>-Elemente verwendet, um ein mehrspaltiges Layout zu erstellen:

Beispiel

<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>Beispiel-Tutorial (example.com)</title>  </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Haupttitel der Webseite</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menü</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Inhalt hier</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">© example.com</div> </div> </body> </html>

Ausprobieren »

Der folgende HTML-Code erzeugt das folgende Ergebnis:

HTML-Layout - Tabelle verwenden

Die Verwendung des HTML-<table>-Tags ist eine einfache Möglichkeit, Layouts zu erstellen.

Die meisten Websites können mehrere Spalten mit <div>- oder <table>-Elementen erstellen. CSS wird verwendet, um Elemente zu positionieren oder Hintergründe und farbenfrohe Erscheinungsbilder für die Seite zu erstellen.

lamp Auch wenn Sie mit HTML-Tabellen schöne Layouts erstellen können, ist das Gestalten von Tabellen für die Darstellung tabellarischer Daten gedacht – Tabellen sind keine Layout-Werkzeuge!

Unten ist ein Beispiel mit drei Zeilen und zwei Spalten – die erste und letzte Zeile verwenden das colspan-Attribut, um zwei Spalten zu überspannen:

Beispiel

<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>Beispiel-Tutorial (example.com)</title>  </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Haupttitel der Webseite</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>Menü</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;">Inhalt hier</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;">© example.com</td> </tr> </table> </body> </html>

Ausprobieren »

Der folgende HTML-Code erzeugt das folgende Ergebnis:


HTML-Layout - Nützliche Tipps

Tipp:Der größte Vorteil der Verwendung von CSS ist, dass die Website leichter zu pflegen ist, wenn der CSS-Code in einem externen Stylesheet gespeichert wird. Durch Bearbeiten einer einzigen Datei können Sie das Layout aller Seiten ändern. Weitere Informationen zu CSS finden Sie auf unsererCSS-Tutorial。

Tipp:Da das Erstellen fortgeschrittener Layouts sehr zeitaufwändig ist, sind Vorlagen eine schnelle Option. Durch die Suche nach kostenlosen Website-Vorlagen im Internet finden Sie viele Vorlagen (Sie können diese vorgefertigten Website-Layouts verwenden und optimieren).

HTML-Layout-Tags

<div>Beschreibung
<div>Definiert einen Dokumentblock, ein Block-Level-Element.
<span>Definiert span, dient zum Kombinieren von Inline-Elementen.
Andere Erweiterungen