HTML-Beispiel: Schritt-für-Schritt-Anleitung zum Erstellen einer grundlegenden Webseite

Was ist HTML?

HTML steht für Hypertext Markup Language und ist das grundlegende Gerüst für die Gestaltung von Webseiten. Es ermöglicht dir, die Struktur und den Inhalt einer Webseite zu definieren und zu organisieren, damit sie von Webbrowsern wie Google Chrome oder Mozilla Firefox interpretiert und angezeigt werden können. HTML ist eine Auszeichnungssprache, d. h. sie verwendet Tags, um die Bedeutung unterschiedlicher Teile eines Dokuments zu kennzeichnen.

Wie funktioniert HTML?

HTML-Dokumente bestehen aus einer Reihe von Elementen, die mit spitzen Klammern <> gekennzeichnet sind. Jedes Element hat einen Start- und einen End-Tag. Der Text zwischen den Tags definiert den Inhalt des Elements. Beispielsweise wird der Titel einer Webseite durch das Element

Bedeutung von HTML

HTML ist entscheidend für die Erstellung von Webseiten, da es die Grundlage bildet, auf der alle anderen Webtechnologien aufbauen. Es ermöglicht dir:

• Struktur zu definieren: Du kannst Überschriften, Absätze, Listen und andere Strukturelemente erstellen, um den Inhalt deiner Seite zu organisieren.
• Inhalte hinzuzufügen: Du kannst Text, Bilder, Videos und andere Inhalte einbetten, um deine Seite informativ und ansprechend zu gestalten.
• Hyperlinks bereitzustellen: Du kannst Links zu anderen Webseiten, E-Mail-Adressen oder Dokumenten erstellen, um eine einfache Navigation zu ermöglichen.
• Erscheinungsbild anpassen: Durch die Verwendung von CSS (Cascading Style Sheets) kannst du das Aussehen deiner Seite anpassen, z. B. Schriftart, Farbe und Layout.

Vorteile der Verwendung von HTML

• Einfach zu erlernen: HTML ist eine relativ einfach zu erlernende Sprache, die von Anfängern bis hin zu erfahrenen Entwicklern verwendet werden kann.
• Weit verbreitet: HTML wird von allen gängigen Webbrowsern unterstützt und ist somit eine zuverlässige Möglichkeit, Webseiten zu erstellen, die auf jedem Gerät angezeigt werden können.
• Grundlage für komplexere Technologien: HTML bildet die Grundlage für komplexere Webtechnologien wie CSS, JavaScript und jQuery, die zusätzliche Funktionen und Interaktivität ermöglichen.
• Suchmaschinenfreundlich: HTML-Dokumente sind für Suchmaschinen wie Google leicht zu crawlen und zu indizieren, was dazu beiträgt, deine Webseite in Suchergebnissen sichtbar zu machen.

Wozu dient HTML?

HTML (Hypertext Markup Language) ist eine Auszeichnungssprache, die zum Erstellen von Webseiten und Webanwendungen verwendet wird. Sie bietet eine strukturierte Möglichkeit, Inhalte auf einer Webseite zu organisieren und zu formatieren.

Wie verwende ich HTML?

• Erstellung von Webseiten: HTML ist die Grundlage für das Erstellen von Webseiten. Du kannst HTML verwenden, um Text, Bilder, Videos und andere Inhalte auf einer Webseite hinzuzufügen.
• Strukturierung von Inhalten: HTML verwendet Tags, um Inhalte in logische Abschnitte zu unterteilen, z. B. Überschriften, Absätze, Listen und Tabellen. Dies hilft Suchmaschinen, den Inhalt deiner Webseite zu verstehen und zu indizieren.
• Formatierung von Inhalten: HTML-Tags können auch verwendet werden, um Text zu formatieren, z. B. indem du ihn fett, kursiv oder unterstrichen machst. Du kannst auch die Ausrichtung von Elementen auf der Webseite steuern.
• Hinzufügen von Interaktivität: HTML kann verwendet werden, um Formulare, Schaltflächen und andere interaktive Elemente auf Webseiten hinzuzufügen. Dies ermöglicht es Benutzern, mit deiner Webseite zu interagieren und Informationen einzugeben.

HTML ist eine wesentliche Grundlage für die Webentwicklung. Es ermöglicht es dir, ansprechende und informative Webseiten zu erstellen, die einfach zu navigieren und für Suchmaschinen optimiert sind.

Grundlagen der HTML-Strukturs

HTML (Hypertext Markup Language) ist eine strukturierte Auszeichnungssprache, die du zum Erstellen von Webseiten verwendest. Sie bildet die Grundlage für das World Wide Web und ermöglicht es dir, Inhalte zu definieren, zu organisieren und zu präsentieren.

Die Struktur eines HTML-Dokuments

Ein HTML-Dokument besteht aus verschiedenen Elementen, die in einer hierarchischen Struktur organisiert sind. Diese Struktur wird mit Tags definiert, die den Beginn und das Ende eines Elements markieren. Beispielsweise umfasst ein grundlegendes HTML-Dokument die folgenden Elemente:

• <html> Element: Umschließt den gesamten Inhalt der Webseite.
• <head> Element: Enthält Metadaten wie Titel, Autor und Schlüsselwörter.
• <body> Element: Definiert den Hauptteil der Webseite, in dem der Inhalt angezeigt wird.

Die wichtigsten HTML-Tags

Die gängigsten HTML-Tags, die du kennen solltest, sind:

• <h1>-<h6> Tags: Erstellen Überschriften unterschiedlicher Größe.
• <p> Tag: Definiert einen Absatz.
• <a> Tag: Erstellt einen Hyperlink.
• <img> Tag: Bet startet ein Bild ein.
• <div> und <span> Tags: Erstellen Blöcke oder Bereiche innerhalb des Dokuments.

Die hierarchische Natur von HTML

HTML ist hierarchisch organisiert, wobei jedes Element in ein übergeordnetes Element verschachtelt ist. Dies ermöglicht es dir, komplexe Strukturen zu erstellen, in denen Elemente in anderen Elementen enthalten sind. Diese Hierarchie bildet die Grundlage für das Layout und die Formatierung deiner Webseite.

Semantische Bedeutung von HTML

HTML-Tags haben eine semantische Bedeutung, was bedeutet, dass sie den Zweck oder die Bedeutung des umschlossenen Inhalts angeben. Beispielsweise weist das <h1>-Tag den Browser an, den eingeschlossenen Text als wichtige Überschrift anzuzeigen. Die Verwendung semantischer Tags verbessert die Zugänglichkeit und Wartbarkeit deiner Webseite.

Aufbau eines HTML-Dokuments

Der Aufbau eines HTML-Dokuments ist entscheidend für seine Struktur und Funktionsweise. Ein typisches HTML-Dokument besteht aus folgenden Elementen:

HTML-Deklaration

Jedes HTML-Dokument muss mit der HTML-Deklaration beginnen, die die Version des verwendeten HTML-Standards angibt. Diese Deklaration wird in der Regel wie folgt geschrieben:

<!DOCTYPE html>

HTML-Element

Das HTML-Element stellt das Wurzelelement des Dokuments dar. Es umschließt den gesamten Inhalt der Webseite.

Head-Element

Das Head-Element enthält Metadaten über die Webseite, die für Webbrowser und Suchmaschinen wichtig sind. Hier kannst du Informationen wie den Seitentitel, Schlüsselwörter und die Zeichensatzkodierung festlegen.

Body-Element

Das Body-Element enthält den sichtbaren Inhalt der Webseite, den die Nutzer sehen. Hier kannst du Texte, Bilder, Links und andere Inhalte einfügen.

Strukturelle Elemente

HTML bietet eine Reihe struktureller Elemente, mit denen du den Inhalt deiner Webseite organisieren kannst. Zu diesen Elementen gehören Überschriften (<h1>, <h2>, etc.), Absätze (<p>), Listen (<ul>, <li>), Tabellen (<table>, <tr>, <td>) und andere.

Semantische Elemente

Neben strukturellen Elementen gibt es auch semantische Elemente, die den Inhalt deiner Webseite beschreiben. Diese Elemente helfen Webbrowsern und Suchmaschinen, den Zweck und die Bedeutung verschiedener Teile deiner Webseite zu verstehen. Zu den semantischen Elementen gehören beispielsweise <header>, <footer>, <nav> und <article>.

Kommentare

Kommentare sind eine weitere wichtige Komponente eines HTML-Dokuments. Sie ermöglichen es dir, Anmerkungen und Notizen in deinen Code einzufügen, ohne dass diese auf der Webseite sichtbar sind. Kommentare werden mit <!-- und --> gekennzeichnet.

Beispielcode einer grundlegenden Webseite

Struktur des HTML-Dokuments

Der Code einer grundlegenden Webseite besteht aus drei Hauptteilen:

1. HTML-Deklaration: Beginnt mit <!DOCTYPE html> und deklariert das Dokument als HTML5-Dokument.
2. HTML-Head: Umfasst alle Metadaten über die Webseite, wie z. B. Titel, Beschreibung und Links zu Stilblättern.
3. HTML-Body: Enthält den sichtbaren Inhalt der Webseite, wie Text, Bilder und Formulare.

Beispielcode

Hier ist ein Beispielcode für eine grundlegende Webseite:

<!DOCTYPE html>
<html>
<head>
  <title>Meine grundlegende Webseite</title>
</head>
<body>
  <h1>Willkommen auf meiner Webseite!</h1>

  <p>Dies ist ein Absatz mit Text.</p>

  <img src="bilder/bild1.jpg" alt="Ein Bild">

  <a href="https://www.example.com">Beispiel-Link</a>
</body>
</html>

Erklärung der wichtigsten HTML-Tags

• <html>: Definiert die Struktur des HTML-Dokuments.
• <head>: Enthält Metadaten über die Webseite.
• <body>: Enthält den sichtbaren Inhalt der Webseite.
• <h1>: Überschrift der ersten Ebene.
• <p>: Absatz.
• <img>: Eingebettetes Bild.
• <a>: Link.

Einbetten von Inhalten

Um Inhalte in deine Webseite einzubetten, kannst du folgende Tags verwenden:

• Für Text verwendest du <p>.
• Für Bilder verwendest du <img>.
• Für Links verwendest du <a>.

Formatierung von Text

Du kannst Text mit HTML-Tags formatieren:

• Für fett verwendest du <b>.
• Für kursiv verwendest du <i>.
• Für Unterstreichung verwendest du <u>.

Ausrichtung von Elementen

Elemente können mit CSS-Attributen ausgerichtet werden:

• Für Zentrierung verwendest du text-align: center;.
• Für Rechtsausrichtung verwendest du text-align: right;.
• Für Linksausrichtung verwendest du text-align: left;.

Abschließendes HTML-Dokument

Wenn du den Beispielcode in einen Texteditor kopierst und als .html-Datei speicherst, kannst du die Webseite in einem Webbrowser öffnen, um das Ergebnis zu sehen.

Erklärung der wichtigsten HTML-Tags

Beim Erstellen einer Webseite verwendest du eine Reihe wichtiger HTML-Tags, die die Struktur und den Inhalt deiner Seite definieren. Hier erklären wir die wichtigsten Tags für Einsteiger:

<html> und </html>

Diese Tags bilden den äußersten Rahmen deiner Webseite. Alles, was du auf deiner Seite anzeigen möchtest, befindet sich innerhalb dieser Tags.

<head> und </head>

Der head-Bereich enthält Informationen über deine Seite, die für Browser und Suchmaschinen bestimmt sind. Hier kannst du den Titel, die Beschreibung und weitere Metadaten angeben.

<body> und </body>

Der body-Bereich enthält den sichtbaren Inhalt deiner Webseite. Hier platzierst du Text, Bilder, Links und andere Elemente.

Überschriften (h1-h6)

Überschriftstags (<h1> bis <h6>) definieren Überschriften auf deiner Seite. <h1> ist die größte Überschrift, während <h6> die kleinste ist.

<p>

Der <p>-Tag definiert einen Absatz. Damit kannst du Text in Absätze aufteilen und deine Seite übersichtlicher gestalten.

<img>

Mit dem <img>-Tag kannst du Bilder in deine Seite einfügen. Du musst die Quell-URL des Bildes angeben, z. B.: <img src="bild.jpg">.

<a>

Der <a>-Tag erstellt Links. Du kannst den Link-Text und die Ziel-URL angeben, z. B.: <a href="https://www.example.com">Beispiel-Link</a>.

<ul> und <li>

Mit dem <ul>-Tag kannst du ungeordnete Listen erstellen. Der <li>-Tag definiert einzelne Listenelemente, z. B.:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Tabellen (<table>, <tr>, <td>)

Tabellen ermöglichen dir die Anzeige strukturierter Daten. Der <table>-Tag definiert die Tabelle, <tr> die Zeilen und <td> die Zellen.

Formatierungstags (fett, kursiv, unterstrichen)

Du kannst Text mit den Tags <b> (fett), <i> (kursiv) und <u> (unterstrichen) formatieren.

Ausrichtungs-Tags (<div>, <align>)

Mit dem <div>-Tag kannst du Bereiche definieren und ihre Ausrichtung mit text-align festlegen, z. B.: <div style="text-align: center;">Zentrierter Text</div>.

Weitere Ressourcen

• HTML-Referenz
• W3Schools HTML-Tutorial
• HTML-Tag-Generator

Einbetten von Inhalten wie Text, Bildern und Links

Als Nächstes kommt das Einbetten von Inhalten auf deine Webseite. Dazu gehören Text, Bilder und Links.

Einbetten von Text

Text ist das Herzstück jeder Webseite. Du kannst Text mit Hilfe des <p>-Tags einbetten. So erstellst du einen Absatz:

<p>Dies ist ein Absatz.</p>

Einbetten von Bildern

Bilder machen deine Webseite ansprechender. Du kannst Bilder mit Hilfe des <img>-Tags einbetten. So fügst du ein Bild ein:

<img src="bild.jpg" alt="Bildbeschreibung">

Denke daran, den Pfad zum Bild anzugeben und einen Alternativtext für Zugänglichkeit bereitzustellen.

Einbetten von Links

Links ermöglichen es Besuchern, andere Webseiten oder Teile deiner eigenen Webseite zu besuchen. Du kannst Links mit Hilfe des <a>-Tags erstellen. So erstellst du einen Link:

<a href="ziel.html">Linktext</a>

Denke daran, die URL des Ziels und den Text anzugeben, der als Link dienen soll.

Formatierung von Text und Ausrichtung von Elementen

Um deinen Text zu formatieren und die Ausrichtung von Elementen auf deiner Webseite zu steuern, bietet HTML verschiedene Tags und Attribute.

Überschriften und Absätze

Verwende die Headings-Tags (z. B. <h1>, <h2>, <h3>) für Überschriften verschiedener Größen. Um Absätze zu erstellen, verwende das <p>-Tag.

Textausrichtung

Mit dem text-align-Attribut kannst du die Ausrichtung von Text steuern:

• left: Linksbündiger Text
• center: Zentrierter Text
• right: Rechtsbündiger Text
• justify: Blocksatz

Beispiel:

<p style="text-align: center;">Dies ist ein zentrierter Absatz.</p>

Schriftformatierung

Zur Schriftformatierung stehen dir folgende Tags zur Verfügung:

• : Fettdruck
• : Kursivschrift
• : Unterstreichung
• : Hochgestellt
• : Tiefgestellt

<h1><b>Willkommen auf meiner Webseite</b></h1>

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

<table>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
  </tr>
  <tr>
    <td>Zelle 3</td>
    <td>Zelle 4</td>
  </tr>
</table>

<table border="1">
  ...
</table>