Das-Head-Tag

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 4 von 76.

In HTML ist das head-Tag ein Container für Metadaten über das HTML-Dokument. Metadaten sind Daten, die das Dokument beschreiben, aber nicht auf der Seite selbst angezeigt werden. Das head-Element wird zwischen dem <html>-Tag und dem <body>-Tag platziert.

Das head-Tag kann verschiedene Elemente enthalten, zum Beispiel:

<title>: Gibt den Titel des HTML-Dokuments an, der in der Titelleiste oder im Tab des Browsers angezeigt wird.

<style>: Enthält interne CSS-Stile für das Dokument.
<link>: Verweist auf externe Ressourcen, z. B. CSS-Dateien.

<meta>: Stellt Metadaten über das Dokument bereit, z. B. Zeichensatz, Beschreibung und Schlüsselwörter.
<script>: Bettet clientseitige Skripte wie JavaScript ein.

Hier ist ein Beispiel dafür, wie das head-Tag in einem HTML-Dokument verwendet wird:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

In diesem Beispiel enthält das head-Tag den title der Seite und einige interne CSS-Stile. Der Titel „My Web Page“ wird in der Titelleiste des Browsers angezeigt, und die Hintergrundfarbe des Bodys wird auf Hellblau gesetzt.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit einem <head>-Tag gegeben. Füge darin <style> hinzu und füge den folgenden CSS-Code darin ein:

body {
    background-color: lightgreen;
}

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <h1>Welcome!</h1>
</body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Styling mit CSS

1Einführung

Was ist CSS?CSS-Syntax CSS-KommentareDas-Head-TagDas-Title-Tag

4Textgrundlagen

Textfarbe Schriftfamilie Schriftgröße Schriftstärke Textausrichtung Textdekoration Wiederholungsaufgabe Nr. 1 Wiederholungsaufgabe Nr. 2

7Box-Modell Teil 1

Was ist das Box-Modell?Innenabstand Außenabstände Rahmen Breite und Höhe Wiederholungs-Challenge

10Anmeldeformular

Body Formularcontainer

Eingabefeld

Schaltfläche

13Tonga-Webseite

Navigationsmenü Willkommensüberschrift

2CSS hinzufügen

Inline-CSS Internes CSS Externes CSS Herausforderung: Grundlegendes Styling

5Farben und Hintergründe

Hintergrundfarbe HEX-Farben RGB-Farben Transparenz mit RGBA Wiederholungs-Challenge #1

8Box-Modell Teil 2

Box-Größe Rahmenradius Überlauf Box-Schatten Wiederholungsherausforderung

11Layout-Techniken

Block- vs. Inline-Elemente Grundlagen der Positionierung Relative Positionierung Absolute Positionierung Fixierte Positionierung Grundlagen von z-index Wiederholungs-Challenge

14Letzte Herausforderungen

Elemente anordnen Filmliste Hochzeitseinladungskarte Schwebende Benachrichtigung

Übe selbstständig: Web-Playground