PFAD: ./module/html/html1/

DATEI: string(25) "00Inhaltsverzeichnis1.php"
DATEI: string(21) "01HTML Grundlagen.php"
DATEI: string(15) "02HTML-Head.php"

html mit Adi Prinz

HTML Basic / Erste Schritte

Was ist HTML?

HTML ist die grundlegende Auszeichnungssprache für Webseiten. Die Abkürzung steht für HyperText Markup Language.

Mit HTML wird der Inhalt einer Webseite strukturiert. Dazu gehören beispielsweise Überschriften, Absätze, Bilder, Links, Listen, Tabellen und Formulare.

HTML ist keine Programmiersprache. Es verwendet sogenannte Elemente, mit denen Inhalte ausgezeichnet und ihre Bedeutung innerhalb eines Dokuments beschrieben werden. 

<h1>Meine erste Webseite</h1>

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

<a href="https://www.example.com">Webseite besuchen</a>

Dieses Beispiel enthält drei HTML-Elemente:

  • <h1> kennzeichnet die wichtigste Überschrift.
  • <p> kennzeichnet einen Absatz.
  • <a> erzeugt einen Link.

Ein Browser wie Chrome, Edge oder Firefox liest den HTML-Code und stellt den beschriebenen Inhalt als Webseite dar.

Was wird benötigt?

Zum Erstellen einer einfachen HTML-Seite werden nur ein Texteditor und ein Webbrowser benötigt.

Texteditor

HTML-Dateien können grundsätzlich mit jedem Texteditor erstellt werden. Für die Webentwicklung empfiehlt sich jedoch ein Quellcode-Editor wie Visual Studio Code. Er unterstützt unter anderem die farbliche Darstellung des Codes, automatische Ergänzungen und eine übersichtliche Formatierung.

Webbrowser

Der Webbrowser liest die HTML-Datei und stellt deren Inhalt als Webseite dar. Geeignete Browser sind beispielsweise:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Safari

HTML-Datei

Eine HTML-Datei wird mit der Dateiendung .html gespeichert. Die Startseite einer Website trägt häufig den Dateinamen index.html.

Weitere mögliche Dateinamen sind beispielsweise:

  • kontakt.html
  • ueber-uns.html
  • produkte.html

Nach dem Speichern kann die HTML-Datei direkt in einem Webbrowser geöffnet werden. Bei Änderungen muss die Seite im Browser neu geladen werden, damit das aktualisierte Ergebnis sichtbar wird.

Was ist HTML?

HTML ist die grundlegende Auszeichnungssprache für Webseiten. Die Abkürzung steht für HyperText Markup Language.

Mit HTML wird der Inhalt einer Webseite strukturiert. Dazu gehören beispielsweise Überschriften, Absätze, Bilder, Links, Listen, Tabellen und Formulare.

HTML ist keine Programmiersprache. Es verwendet sogenannte Elemente, mit denen Inhalte ausgezeichnet und ihre Bedeutung innerhalb eines Dokuments beschrieben werden. 

<h1>Meine erste Webseite</h1>

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

<a href="https://www.example.com">Webseite besuchen</a>

Dieses Beispiel enthält drei HTML-Elemente:

  • <h1> kennzeichnet die wichtigste Überschrift.
  • <p> kennzeichnet einen Absatz.
  • <a> erzeugt einen Link.

Ein Browser wie Chrome, Edge oder Firefox liest den HTML-Code und stellt den beschriebenen Inhalt als Webseite dar.

Was wird benötigt?

Zum Erstellen einer einfachen HTML-Seite werden nur ein Texteditor und ein Webbrowser benötigt.

Texteditor

HTML-Dateien können grundsätzlich mit jedem Texteditor erstellt werden. Für die Webentwicklung empfiehlt sich jedoch ein Quellcode-Editor wie Visual Studio Code. Er unterstützt unter anderem die farbliche Darstellung des Codes, automatische Ergänzungen und eine übersichtliche Formatierung.

Webbrowser

Der Webbrowser liest die HTML-Datei und stellt deren Inhalt als Webseite dar. Geeignete Browser sind beispielsweise:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Safari

HTML-Datei

Eine HTML-Datei wird mit der Dateiendung .html gespeichert. Die Startseite einer Website trägt häufig den Dateinamen index.html.

Weitere mögliche Dateinamen sind beispielsweise:

  • kontakt.html
  • ueber-uns.html
  • produkte.html

Nach dem Speichern kann die HTML-Datei direkt in einem Webbrowser geöffnet werden. Bei Änderungen muss die Seite im Browser neu geladen werden, damit das aktualisierte Ergebnis sichtbar wird.

Zusammenspiel mit CSS und JavaScript

Moderne Webseiten bestehen meist aus HTML, CSS und JavaScript. Diese drei Technologien übernehmen unterschiedliche Aufgaben.

  • HTML strukturiert die Inhalte einer Webseite.
  • CSS bestimmt das Aussehen und die Anordnung der Inhalte.
  • JavaScript ermöglicht Interaktionen und dynamische Veränderungen.

HTML – Struktur

<button id="info-button">Information anzeigen</button>

<p id="information">HTML strukturiert den Inhalt.</p>

CSS – Gestaltung

#info-button {
  padding: 10px 20px;
  color: white;
  background-color: steelblue;
  border: 0;
  border-radius: 5px;
}

JavaScript – Verhalten

const button = document.getElementById("info-button");
const information = document.getElementById("information");

button.addEventListener("click", function () {
  information.textContent = "Der Text wurde mit JavaScript verändert.";
});

HTML bildet somit die Grundlage. CSS und JavaScript ergänzen das HTML-Dokument, um ansprechende und interaktive Webseiten zu erstellen.

Die Syntax von HTML

Tag, Attribut und Attributwert

HTML-Dokumente bestehen aus Elementen. Die meisten HTML-Elemente setzen sich aus einem Start-Tag, dem Inhalt und einem End-Tag zusammen. 

<p>Das ist ein Absatz.</p>
  • <p> ist das Start-Tag.
  • Das ist ein Absatz. ist der Inhalt.
  • </p> ist das End-Tag.

Das End-Tag enthält vor dem Namen des Elements einen Schrägstrich (/).

Attribute

Attribute enthalten zusätzliche Informationen über ein HTML-Element. Sie werden im Start-Tag angegeben. 

<a href="https://www.example.com">Webseite besuchen</a>

In diesem Beispiel gilt:

  • a ist der Name des HTML-Elements.
  • href ist das Attribut.
  • https://www.example.com ist der Attributwert.
  • Webseite besuchen ist der sichtbare Inhalt.

Zwischen dem Attribut und seinem Wert steht ein Gleichheitszeichen. Der Attributwert wird üblicherweise in Anführungszeichen geschrieben. 

attribut="attributwert"

Ein Element kann auch mehrere Attribute besitzen:

<img
  src="bilder/landschaft.jpg"
  alt="Berglandschaft im Sommer"
  width="600"
>

Die Attribute werden jeweils durch ein Leerzeichen voneinander getrennt. Ihre Reihenfolge ist normalerweise nicht entscheidend.

Der Quellcode von HTML

Der HTML-Quellcode ist der Text, aus dem eine Webseite aufgebaut ist. Der Browser liest diesen Code, interpretiert die HTML-Elemente und stellt den Inhalt als Webseite dar. 

<h1>Willkommen auf meiner Webseite</h1>

<p>Hier finden Sie Informationen über HTML.</p>

Im Browser werden die Tags nicht angezeigt. Sichtbar sind nur die Inhalte und ihre durch HTML festgelegte Struktur.

Quellcode einer Webseite anzeigen

Der HTML-Quellcode einer geöffneten Webseite kann in den meisten Browsern über das Kontextmenü angezeigt werden:

  1. Mit der rechten Maustaste auf einen freien Bereich der Webseite klicken.
  2. Seitenquelltext anzeigen auswählen.

In vielen Browsern kann der Seitenquelltext auch mit der Tastenkombination Strg + U geöffnet werden.

Entwicklertools

Mit den Entwicklertools des Browsers kann die aktuelle Struktur einer Webseite untersucht werden. Sie lassen sich meistens mit F12 öffnen.

Dabei ist zu beachten: Der angezeigte Seitenquelltext enthält den ursprünglich geladenen HTML-Code. Die Entwicklertools zeigen dagegen den aktuellen Zustand des Dokuments, der bereits durch JavaScript verändert worden sein kann.

Kommentare

Kommentare sind Hinweise im Quellcode. Sie werden vom Browser nicht als Inhalt der Webseite dargestellt. 

<!-- Dieser Text ist nur im Quellcode sichtbar. -->

Kommentare können zur Gliederung des Codes oder für kurze Erklärungen verwendet werden.

Standalone-Tags

Nicht alle HTML-Elemente besitzen einen Inhalt und ein End-Tag. Elemente ohne Inhalt werden als leere Elemente bezeichnet. Gelegentlich wird dafür auch der Begriff Standalone-Tags verwendet.

Typische Beispiele sind:

<br>
<hr>
<img src="bild.jpg" alt="Beschreibung des Bildes">
<input type="text" name="vorname">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
  • <br> erzeugt einen Zeilenumbruch.
  • <hr> kennzeichnet einen thematischen Wechsel.
  • <img> bindet ein Bild ein.
  • <input> erzeugt ein Formularelement.
  • <meta> enthält Metadaten zum Dokument.
  • <link> bindet eine externe Ressource ein.

In HTML5 wird am Ende eines leeren Elements kein Schrägstrich benötigt. Deshalb wird beispielsweise folgende Schreibweise verwendet: 

<br>

Auch diese aus XHTML bekannte Schreibweise wird von Browsern verstanden:

<br />

Für moderne HTML-Dokumente ist der zusätzliche Schrägstrich jedoch nicht erforderlich.

Das HTML-Grundgerüst

Jedes HTML-Dokument besitzt einen grundlegenden Aufbau. Dieser teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt, legt die Sprache fest und unterteilt das Dokument in den Head und den sichtbaren Seiteninhalt.

Das HTML-Dokument

Das Grundgerüst einer modernen HTML-Datei sieht folgendermaßen aus:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel der Webseite</title>
  </head>

  <body>
    <h1>Meine erste Webseite</h1>
    <p>Das ist der sichtbare Inhalt.</p>
  </body>
</html>

Das Dokument besteht aus folgenden grundlegenden Bereichen:

  • <!DOCTYPE html> kennzeichnet das Dokument als HTML5-Dokument.
  • <html> ist das Wurzelelement und umschließt das gesamte HTML-Dokument.
  • <head> enthält Informationen über das Dokument.
  • <body> enthält den sichtbaren Inhalt der Webseite.

Die Einrückungen sind für den Browser nicht erforderlich. Sie machen den Quellcode jedoch übersichtlicher und zeigen, welche Elemente ineinander verschachtelt sind.

Dokumenttypdeklaration (DOCTYPE)

Die Dokumenttypdeklaration steht immer am Anfang eines HTML-Dokuments: 

<!DOCTYPE html>

Sie teilt dem Browser mit, dass das Dokument nach dem aktuellen HTML-Standard verarbeitet werden soll.

<!DOCTYPE html> ist kein gewöhnliches HTML-Element. Es besitzt deshalb weder Inhalt noch ein End-Tag.

In älteren HTML-Versionen waren wesentlich längere Dokumenttypdeklarationen erforderlich. Für HTML5 genügt die kurze, übersichtliche Schreibweise.

Hinweis: Die frühere Bezeichnung DTD steht für Document Type Definition. Bei HTML5 wird jedoch üblicherweise von der Dokumenttypdeklaration oder kurz vom DOCTYPE gesprochen.

Das HTML-Wurzelelement

Das Element <html> ist das Wurzelelement eines HTML-Dokuments. Alle weiteren HTML-Elemente befinden sich innerhalb dieses Elements. 

<html lang="de">
  ...
</html>

Das Attribut lang legt die Hauptsprache des Dokuments fest. Der Wert de steht für Deutsch.

Weitere Beispiele sind:

  • lang="en" für Englisch
  • lang="fr" für Französisch
  • lang="it" für Italienisch

Die Sprachangabe unterstützt unter anderem Suchmaschinen, Übersetzungsprogramme und Screenreader. Sie sollte deshalb in jedem HTML-Dokument angegeben werden.

Head und Body

Innerhalb des HTML-Wurzelelements befinden sich die beiden Hauptbereiche <head> und <body>.

Der Head

Der Head enthält Informationen über das Dokument, die normalerweise nicht direkt im Inhaltsbereich der Webseite angezeigt werden. Dazu gehören beispielsweise:

  • der Titel der Webseite,
  • die verwendete Zeichenkodierung,
  • Angaben für responsive Webseiten,
  • Verknüpfungen mit CSS-Dateien,
  • Beschreibungen für Suchmaschinen.
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titel der Webseite</title>
</head>

Der Body

Der Body enthält den eigentlichen Inhalt der Webseite. Dazu gehören unter anderem Überschriften, Absätze, Bilder, Links, Listen, Tabellen und Formulare. 

<body>
  <h1>Willkommen</h1>
  <p>Das ist der sichtbare Inhalt der Webseite.</p>
</body>

Die Elemente des Heads behandeln wir ausführlicher in der nächsten Section. Anschließend beschäftigen wir uns mit den Elementen des Bodys.