HTML und CSS

Update Juni 2023
Das folgende minimale Dokument kann als Vorlage für eigene Versuche und Beispiele dienen.
HTML ganz ausführlich siehe HTML - Living Standard

Ein minimales HTML-Dokument

Der HTML-Code des Dokuments

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ein minimales HTML-Dokument</title>
  </head>
  <body>
     <!-- hier kommt der sichtbare Inhalt hinein -->
  </body>
</html>

Erläuterungen im Detail

<!DOCTYPE html>
Der DOCTYPE-Ausdruck signalisiert dem Browser, dass ein HTML-Dokument vorliegt.
<html lang="de">
...
</html>
Das Element html umschliest das ganze HTML-Dokument. Der Wert des Attributs lang enthält das Kürzel der Sprache, die im Inhalt verwendet wird. 
  <head>
  ...
  </head>
  <body>
  ...
  </body>
Der Inhalt des html-Elements wird von den Elementen head und body in zwei Teile geteilt. Das Element head (der Dokumentkopf) enthält Informationen zur Gestaltung des HTML-Dokuments, die i.d.Regel nicht sichtbar sind. Der sichtbare Inhalt wird von body (dem Dokumentkörper) umschlossen. 
    <meta charset="utf-8">
Ganz wichtig, dass der Hinweis auf den verwendeten Zeichensatz gleich am Anfang des Dokumentkopfs steht. Unicode utf-8 wird in unserem Kulturkreis empfohlen.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Seit Webseiten nicht nur auf dem PC, sondern zunehmend auf mobilen Geräten angeschaut werden, kann dieser Eintrag in den Header empfohlen werden. Er signalisiert dem Browser, den Inhalt der Webseite an die gesamte Breite des verwendeten Displays anzupassen, egal ob quer oder hochkant.
    <title>Ein minimales HTML-Dokument</title>
Im Element title wird der gewünschte Titel des HTML-Dokuments hinterlegt. Es ist keine sichtbare Überschrift, sondern eher ein Hinweis für Suchmaschinen. Allerdings, so ganz unsichtbar ist der Titel nicht. Browser, die Tab-Reiter verwenden, können den Titel auf dem Reiter anzeigen.
     <!-- hier kommt der sichtbare Inhalt hinein -->
Das ist ein HTML-Kommentar, der hier stellvertretend im Dokumentkörper für einen beliebigen Inhalt steht. Kommentare kann ein Bearbeiter, der den HTML-Code direkt editiert, als Merkhilfe im Dokument einbauen. Kommentare werden vom Browser ignoriert.

Dokumenterweiterung mit CSS und JavaScript

    <link rel="stylesheet" href="css-datei.css">
CSS-Styles sind zweckmäßig in einer CSS-Datei notiert und mithilfe das gezeigten link-Elements wird die Datei den Browser bekanntgegeben, der diese Datei automatisch lädt.
Der Eintrag wird im Dokumentkopf (in head) platziert. Mehrere link-Einträge (bei mehr alseiner CSS-Datei) sind möglich.
    <style>
      /* Hier können CSS-Styles direkt eingetragen werden */
    </style>
Es ist möglich, CSS-Styles direkt im HTML-Dokument zu notieren. Dazu wird das Element style im Dokumentkopf platziert. Zu beachten ist, dass innerhalb von style die für CSS verbindliche Syntax gilt! Daher ist der Kommentar Hier können CSS-Styles direkt eingetragen werden auch ein CSS-Kommentar.
So weit wie möglich sollte CSS-Code in einer Datei notiert werden. Bei Verwendung sehr weniger Styles oder für seitenspezifische Styles ist das style-Element günstig.
  <script src="JavaScript-Datei.js"></script>
Code in JavaScript wird normalerweise in einer eigenen Datei platziert, die mithilfe ein oder mehrerer script-Elemente im HTML-Dokument notiert wird. Das kann sowohl im Dokumentkopf als auch im Dokumentkörper sein. Die JavaScript-Datei wird durch das src-Attribut bekanntgegeben und vom Browser automatisch geladen.
  <script>
    // hier können JavaScript-Anweisungen direkt notiert werden
  </script>
Ohne Verwendung des src-Attributs können JavaScript-Anweisungen direkt im script-Element notiert werden. Es gilt die Syntax von JavaScript, deswegen ist der gezeigte Kommentar kein HTML-, sondern ein JavaScript-Kommentar.

Nicht nötig, aber hilfreich

Browser haben ein Reload-Button, aber auf Mobilgeräten kann es umständlich sein, eine Seite nochmal zu laden. Bei vielen Beispielen ist aber ein Reload sehr hilfreich, daher können wir einfach den folgenden Button innerhalb von body einsetzen. 
<button onclick="location.reload()">Seite neu laden</button>
Dieser Button macht nur genau das, was es soll und kommt mit anderen Code nicht in Konflikt.

Auch nicht nötig, aber hilfreich

Im Browser zur Seite zuvor zurückzukehren ist einfach, auf Mobilgeräten kann auch dieses umständlich sein. Bei vielen Beispielen ist eine einfache Rückkehr hilfreich, daher setzen wir den folgenden Button bei Bedarf innerhalb von body ein. 
<button onclick="window.history.back()">Zurück</button>
Auch dieser Button macht nur genau das, was es soll und kommt mit anderen Code nicht in Konflikt.

Grunddokument für Beispiele und Demos

In den meisten unserer Beispiele sind CSS-Styles und JavaScript-Anweisungen nicht sehr umfangreich, sodass wir diese direkt in die Elemente style und script eintragen. Hier das ganze HTML-Grunddokument im Überblick: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ein HTML-Grunddokument</title>
    <style>

      /* CSS-Bereich, hier können CSS-Styles direkt eingetragen werden */

    </style>
    <script>

      // Scriptbereich 1; hier können JavaScript-Anweisungen direkt notiert werden

    </script>
  </head>
  <body>
    <button onclick="location.reload()">Seite neu laden</button>

    <!-- HTML-Bereich -->

    <script>

      // Scriptbereich 2; sinnvoll bei einfachen Beispieldateien

    </script>
  </body>
</html>