Meisterung der HTML-Dokument-Metadaten

Einführung

In diesem Lab lernst du, wie du eine HTML-Datei mit der HTML <head>-Tag erstellst. Der <head>-Tag wird verwendet, um Metadaten und andere Informationen über die Webseite bereitzustellen, die für den Benutzer nicht sichtbar sind. Wir werden die Schritte durchgehen, die erforderlich sind, um einen <head>-Tag für deine HTML-Datei zu erstellen.

Hinweis: Du kannst im index.html programmieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend kannst du die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 78% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Erstellen Sie ein HTML-Dokument

Zunächst erstellen wir eine HTML-Datei in einer Datei namens index.html:

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

Fügen Sie Ihrem HTML-Dokument einen Titel hinzu

Der <title>-Tag wird verwendet, um den Titel der Webseite zu definieren. Er sollte innerhalb des <head>-Tags platziert werden. Fügen Sie den <title>-Tag zu Ihrem HTML-Dokument hinzu:

<!doctype html>
<html>
  <head>
    <title>Meine fantastische Webseite</title>
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
  </body>
</html>

Ändern Sie den Titel Ihres HTML-Dokuments

Ändern wir den Titel des HTML-Dokuments, indem wir den Text "Meine fantastische Webseite" in etwas anderes umwandeln. Ersetzen Sie den Text "Meine fantastische Webseite" durch Ihren gewünschten Titel:

<!doctype html>
<html>
  <head>
    <title>Meine erstaunliche Website</title>
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
  </body>
</html>

Fügen Sie die Zeichensatzkodierung hinzu

Die Zeichensatzkodierung wird verwendet, um zu definieren, wie Zeichen im Browser angezeigt werden. Wir können die Zeichensatzkodierung mithilfe des <meta>-Tags definieren. Fügen Sie das folgende <meta>-Tag innerhalb des <head>-Tags hinzu:

<!doctype html>
<html>
  <head>
    <title>Meine erstaunliche Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
  </body>
</html>

Fügen Sie der HTML-Datei CSS-Stile hinzu

Sie können das <style>-Tag innerhalb des <head>-Tags verwenden, um CSS-Stilgebung für die Webseite bereitzustellen. Fügen Sie das folgende <style>-Tag innerhalb des <head>-Tags hinzu:

<!doctype html>
<html>
  <head>
    <title>Meine erstaunliche Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        farbe: blau;
      }
    </style>
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
  </body>
</html>

Fügen Sie Links zu externen Stylesheets hinzu

Sie können auch externe CSS-Stylesheets an Ihr HTML-Dokument über das <link>-Tag anknüpfen. Erstellen Sie eine neue Datei namens styles.css und fügen Sie die folgenden CSS-Stile hinzu:

h1 {
  farbe: rot;
}

Verknüpfen Sie dann dieses Stylesheet mit Ihrem HTML-Dokument, indem Sie das folgende <link>-Tag innerhalb des <head>-Tags verwenden:

<!doctype html>
<html>
  <head>
    <title>Meine erstaunliche Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
  </body>
</html>

Fügen Sie eine Basis-URL hinzu

Das <base>-Tag wird verwendet, um eine Basis-URL für alle in das HTML-Dokument verwendeten relativen URLs bereitzustellen. Fügen Sie das <base>-Tag innerhalb des <head>-Tags hinzu:

<!doctype html>
<html>
  <head>
    <title>Meine erstaunliche Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hallo, Welt!</h1>
  </body>
</html>

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML <head>-Tag verwenden, um Metadaten und andere Informationen über die Webseite bereitzustellen. Sie können das <title>-Tag verwenden, um den Titel des HTML-Dokuments zu definieren, das <meta>-Tag, um die Zeichensatzkodierung und andere Metainformationen zu definieren, das <style>-Tag, um CSS-Stilgebung bereitzustellen, das <link>-Tag, um externe Stylesheets anzuknüpfen, und das <base>-Tag, um eine Basis-URL für alle relativen URLs bereitzustellen.