HTML - Layouts: A Comprehensive Guide for Beginners

Hallo dort, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Layouts ein. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich hier, um Sie auf dieser Reise Schritt für Schritt zu führen. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und los geht's!

HTML Layout Elements

Bevor wir mit dem Erstellen von Layouts beginnen, lassen Sie uns uns mit den Bausteinen von HTML-Layouts vertraut machen. Denken Sie an diese Elemente als Lego-Steine Ihrer Webseite - jeder hat einen bestimmten Zweck und Platz.

Hier ist eine Tabelle der häufigsten HTML-Layout-Elemente:

Element	Beschreibung
<header>	Enthält einleitende Inhalte oder Navigationslinks
<nav>	Definiert eine Gruppe von Navigationslinks
<main>	Gibt den Hauptinhalt des Dokuments an
<article>	Definiert unabhängigen, selbstaufrechterhaltenden Inhalt
<section>	Definiert einen Abschnitt im Dokument
<aside>	Definiert Inhalt aside vom Hauptinhalt (wie eine Seitenleiste)
<footer>	Definiert einen Footer für ein Dokument oder einen Abschnitt
<div>	Ein allgemeiner Container für Flussinhalt

Nun schauen wir uns jedes dieser Elemente im Detail an.

Das <header> Element

Das <header> Element ist wie die Willkommensmatte Ihrer Webseite. Es wird typischerweise für einleitende Inhalte oder eine Gruppe von Navigationslinks verwendet.

<header>
<h1>Willkommen auf meiner großartigen Webseite</h1>
<p>Wo Träume wahr werden und Code zum Leben erwacht!</p>
</header>

In diesem Beispiel haben wir das <header> verwendet, um eine Willkommensbanner für unsere Webseite zu erstellen. Es enthält eine Hauptüberschrift (<h1>) und einen ansprechenden Slogan.

Das <nav> Element

Das <nav> Element ist wie das Navigationsgerät Ihrer Webseite. Es definiert eine Gruppe von Navigationslinks, um den Benutzern zu helfen, sich auf Ihrer Website zurechtzufinden.

<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>

Hier haben wir ein einfaches Navigationsmenü mit einer unsortierten Liste (<ul>) innerhalb des <nav> Elements erstellt. Jeder Listenpunkt (<li>) enthält einen Link (<a>) zu einem anderen Abschnitt der Webseite.

Das <main> Element

Das <main> Element ist, wo die Magie passiert. Es enthält den primären Inhalt Ihrer Webseite.

<main>
<h2>Über uns</h2>
<p>Wir sind ein Team von leidenschaftlichen Codern, die großartige Webseiten erstellen!</p>
</main>

In diesem Beispiel enthält unser <main> Element eine Überschrift und einen Absatz über die Webseite oder das Unternehmen.

Das <article> Element

Das <article> Element ist perfekt für eigenständigen Inhalt, der auch für sich allein Sinn macht, wie einen Blogbeitrag oder einen Nachrichtenartikel.

<article>
<h3>Der Aufstieg von HTML5</h3>
<p>HTML5 hat die Webentwicklung revolutioniert, indem es neue semantische Elemente und APIs bietet...</p>
</article>

Hier haben wir das <article> Element verwendet, um einen Blogbeitrag über HTML5 zu umschließen.

Das <section> Element

Das <section> Element wird verwendet, um verwandten Inhalt zusammenzufassen. Denken Sie daran als ein Kapitel in einem Buch.

<section>
<h3>Unsere Dienstleistungen</h3>
<ul>
<li>Webdesign</li>
<li>Webentwicklung</li>
<li>SEO-Optimierung</li>
</ul>
</section>

In diesem Beispiel haben wir ein <section> verwendet, um Informationen über die angebotenen Dienstleistungen zusammenzufassen.

Das <aside> Element

Das <aside> Element ist wie die Seitenleiste in einem Buch. Es enthält Inhalt, der mit dem Hauptinhalt verwandt ist, aber auch für sich allein stehen kann.

<aside>
<h4>Schöner fatto</h4>
<p+Wussten Sie? Die erste Webseite, die jemals erstellt wurde, ist immer noch online!</p>
</aside>

Hier haben wir ein <aside> verwendet, um ein interessantes fatto im Zusammenhang mit der Webentwicklung zu teilen.

Das <footer> Element

Das <footer> Element ist wie die Abspanncredits eines Films. Es enthält in der Regel Informationen über den Autor, das Copyright oder Links zu verwandten Dokumenten.

<footer>
<p>&copy; 2023 Meine großartige Webseite. Alle Rechte vorbehalten.</p>
</footer>

In diesem Beispiel haben wir einen einfachen Footer mit einem Copyright-Hinweis erstellt.

Das <div> Element

Das <div> Element ist das Schweizer Taschenmesser von HTML. Es ist ein allgemeiner Container, der verwendet werden kann, um andere Elemente für Stylingzwecke zu gruppieren.

<div class="container">
<h2>Willkommen</h2>
<p>Dieser Inhalt wird in einem div gruppiert.</p>
</div>

Hier haben wir ein <div> verwendet, um eine Überschrift und einen Absatz zusammenzufassen. Das class Attribut kann verwendet werden, um diese Gruppe von Elementen mit CSS zu stylen.

Examples of HTML Layout

Nun, da wir die einzelnen Elemente behandelt haben, sehen wir uns an, wie sie alle zusammenkommen, um ein komplettes HTML-Layout zu erstellen.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine großartige Webseite</title>
</head>
<body>
<header>
<h1>Willkommen auf meiner großartigen Webseite</h1>
<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>

<main>
<section id="about">
<h2>Über uns</h2>
<p>Wir sind ein Team von leidenschaftlichen Codern, die großartige Webseiten erstellen!</p>
</section>

<section id="services">
<h2>Unsere Dienstleistungen</h2>
<ul>
<li>Webdesign</li>
<li>Webentwicklung</li>
<li>SEO-Optimierung</li>
</ul>
</section>

<article>
<h3>Der Aufstieg von HTML5</h3>
<p>HTML5 hat die Webentwicklung revolutioniert, indem es neue semantische Elemente und APIs bietet...</p>
</article>

<aside>
<h4>Schöner fatto</h4>
<p+Wussten Sie? Die erste Webseite, die jemals erstellt wurde, ist immer noch online!</p>
</aside>
</main>

<footer>
<p>&copy; 2023 Meine großartige Webseite. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>

In diesem Beispiel haben wir alle Elemente, die wir gelernt haben, kombiniert, um ein komplettes HTML-Layout zu erstellen. Der <header> enthält den Seitentitel und die Navigation. Das <main> Element hält den primären Inhalt, einschließlich <section>s für "Über uns" und "Unsere Dienstleistungen", einen <article> über HTML5 und ein <aside> mit einem有趣的事实. Schließlich haben wir einen <footer> am Ende der Seite.

Ways to Create HTML Layouts

Es gibt mehrere Möglichkeiten, HTML-Layouts zu erstellen, jede mit ihren eigenen Vorteilen. Hier sind die gängigsten Methoden:

1. HTML-Tabellen: Dies ist eine alte Schule Methode, die nicht für moderne Webentwicklung empfohlen wird, aber trotzdem nützlich zu wissen.
2. CSS-Float-Eigenschaft: Eine flexiblere Methode, die es Elementen ermöglicht, links oder rechts ihres Behälters zu schweben.
3. CSS-Flexbox: Eine leistungsstarke Layoutmethode zur Verteilung von Raum und Ausrichtung von Inhalten auf komplexe Weise.
4. CSS-Grid: Das leistungsstärkste Layoutsystem in CSS, perfekt für die Erstellung von zweidimensionalen Layouts.

Lassen Sie uns einen kurzen Blick auf jede dieser Methoden werfen:

1. HTML-Tabellen

<table width="100%" border="0">
<tr>
<td colspan="2"><header>Header</header></td>
</tr>
<tr>
<td width="20%"><nav>Navigationsleiste</nav></td>
<td width="80%"><main>Hauptinhalt</main></td>
</tr>
<tr>
<td colspan="2"><footer>Footer</footer></td>
</tr>
</table>

While this method works, it's not recommended for modern web development as it mixes structure with presentation.

2. CSS-Float-Eigenschaft

<style>
.column { float: left; }
.left { width: 20%; }
.right { width: 80%; }
</style>

<div class="column left">Navigationsleiste</div>
<div class="column right">Hauptinhalt</div>

Diese Methode verwendet CSS, um Elemente nach links zu schweben, und erstellt ein einfaches zweispaltiges Layout.

3. CSS-Flexbox

<style>
.container {
display: flex;
}
.nav { flex: 1; }
.main { flex: 4; }
</style>

<div class="container">
<div class="nav">Navigationsleiste</div>
<div class="main">Hauptinhalt</div>
</div>

Flexbox ist großartig für die Erstellung flexibler Layouts, die sich leicht an verschiedene Bildschirmgrößen anpassen können.

4. CSS-Grid

<style>
.grid-container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
</style>

<div class="grid-container">
<header class="header">Header</header>
<nav class="nav">Navigationsleiste</nav>
<main class="main">Hauptinhalt</main>
<footer class="footer">Footer</footer>
</div>

CSS Grid ist das leistungsstärkste Layoutsystem, das die Erstellung von komplexen Layouts mit Leichtigkeit ermöglicht.

Und das war's, Leute! Wir haben die Welt der HTML-Layouts durchquert, von den grundlegenden Bausteinen bis hin zu fortgeschrittenen Layouttechniken. Denken Sie daran, dass Übung den Meister macht, also fürchten Sie sich nicht, mit diesen verschiedenen Methoden zu experimentieren. Bald genug werden Sie atemberaubende Web layouts wie ein Profi erstellen!

Frohes Coden und möge Ihre Layouts immer pixelgenau sein! ??‍??‍?

Credits: Image by storyset