Übung: Hinzufügen von HTML-Basiscode zu Ihrer Web-App

  • 10 Minuten

Derzeit verfügt Ihre Website über eine leere HTML-Datei. Wir wollen nun Code zu dieser hinzufügen. Das Ziel ist die Verwendung von HTML (Hypertext Markup Language) zur Beschreibung der Webseite, die der Browser Ihrer Kunden anzeigen soll. Dabei kann eine Startvorlage hilfreich sein. Editors können Sie beim Ausfüllen von häufig verwendeten Textbausteinen oder der HTML-Struktur unterstützen.

In dieser Lerneinheit fügen Sie grundlegende HTML-Inhalte hinzu, öffnen die HTML-Seite im Browser und werfen einen ersten Blick auf die Entwicklertools.

Hinzufügen von HTML-Code

Visual Studio Code bietet grundlegende Unterstützung beim standardmäßigen Programmieren in HTML. Dies umfasst u. a. die Syntaxhervorhebung, die intelligente Vervollständigung mit IntelliSense und anpassbare Formatierungen.

  1. Öffnen Sie Ihre Website in Visual Studio Code, und öffnen Sie dann die Datei index.html durch Auswählen der Datei index.html im Explorer.

  2. Geben Sie auf der index.html-Seite html:5 ein, und wählen Sie dann die EINGABETASTE aus. HTML5-Vorlagencode wird der Datei hinzugefügt.

    Hinweis

    Wenn der HTML5-Vorlagencode der index.html-Datei nicht hinzugefügt wird, versuchen Sie, die Datei zu schließen und erneut zu öffnen.

  3. Bearbeiten Sie den Vorlagencode so, dass er folgendem Beispiel ähnelt. Speichern Sie die Datei dann mit STRG+S unter Windows oder CMD+S unter macOS.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Es gibt verschiedene HTML-Versionen. Der Dokumenttyp<!DOCTYPE html> gibt an, dass dieses HTML-Dokument HTML5-Code enthält.

Auch wenn wir nicht ausführlich auf alle HTML-Elemente eingehen werden, weisen wir dennoch auf einige wichtige Elemente hin. Das Tag meta gibt Informationen zu den Metadaten an, die Sie in der Regel nur sehen können, wenn Sie den Quellcode in Ihrem Browser anzeigen. Metaelemente bzw. Tags geben beschreibende Informationen zur Webseite an. So kann zum Beispiel der Suchmaschinenprozess darin unterstützt werden, welche Informationen auf Ihren Webseiten in den Suchergebnissen angezeigt werden sollen.

Der Zeichensatz (charset) für UTF-8 scheint auf den ersten Blick nicht wichtig zu sein, aber er spielt eine bedeutende Rolle beim Festlegen der Art und Weise, wie Computer Zeichen interpretieren. Wenn die Metadaten für den Zeichensatz fehlen, kann die Sicherheit kompromittiert werden. Hinter dem charset-Attribut steckt einiges an Geschichte und technischen Informationen. Wichtig bei dieser Übung ist jedoch, dass der Visual Studio Code-Codebaustein einige sinnvolle Standards bereitstellt.

Bearbeiten der Kopfzeile

Das <head>-Element in Ihrem HTML-Code enthält Informationen zu Ihrer Website, die auf der Browserregisterkarte nicht sichtbar sind.

Die Metadaten definieren Daten zum HTML-Dokument, z. B. den Zeichensatz, Skripts und den Browser, in dem die Webseite geöffnet wird.

Der Titel einer Webseite wird im oberen Bereich des Browserfensters angezeigt und spielt aus verschiedenen Gründen eine wichtige Rolle. Beispielsweise wird der Titel von Suchmaschinen verwendet und angezeigt. Wir wollen nun einen Titel hinzufügen.

Wichtig

Im Folgenden deuten Auslassungspunkte (...) darauf hin, dass zuvor deklarierter Code vorausgeht bzw. folgt. Es sollte genügend Code als Kontext bereitgestellt werden, um erforderliche Änderungen vorzunehmen oder Ihre Arbeit zu aktualisieren. Sie sollten die Auslassungspunkte jedoch nicht kopieren und in Ihren Code einfügen.

  1. Ändern Sie im Editor das <title>-Element, damit es dem folgenden Beispiel entspricht.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Zum Anwenden von Formatvorlagen auf HTML-Elemente auf der Webseite können Sie den CSS-Code direkt in die Kopfzeile der Website schreiben. Das Schreiben von CSS auf der HTML-Seite wird als internes CSS bezeichnet. Es wird allerdings empfohlen, die HTML-Struktur von den CSS-Stilen zu trennen. Separate CSS-Seiten werden als externes CSS bezeichnet. Code ist einfacher zu lesen, wenn er präzise und in Abschnitte gegliedert ist. Mehrere Webseiten können Sie entweder mit einer oder mit mehreren externen Stylesheets warten. Sie müssen nicht jede HTML-Seite einzeln mit repliziertem CSS-Code aktualisieren, sondern können die Änderungen an einer einzelnen CSS-Datei vornehmen und anschließend diese Updates auf alle abhängigen Webseiten übertragen. Wir wollen nun einen Link zu einer externen CSS-Datei herstellen.

  1. Fügen Sie im Visual Studio Code-Editor nach dem <title>-Element eine leere Zeile hinzu, geben Sie link ein, und wählen Sie dann die EINGABETASTE aus. Visual Studio Code sollte der index.html-Datei die folgende Zeile hinzufügen.

    <link rel="stylesheet" href="">

  2. Aktualisieren Sie href= auf href="main.css", und speichern Sie die Datei durch Auswählen von STRG+S unter Windows bzw. CMD+S unter macOS.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task List</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Bearbeiten des Elements „body“

Wir wollen nun das Element <body> ausfüllen.

Das <body>-Element enthält den Inhalt Ihrer Website, der für Ihre Kunden in ihren Browsern sichtbar ist.

  1. Fügen Sie in einem <body>-Element ein <h1>-Element als Überschrift hinzu, gefolgt von einem <p>-Element als Paragraph, und erstellen Sie anschließend eine unsortierte Liste,<ul>, die mehrere <li>-Elements des Listenelemente enthält.

  2. Sie müssen den Code bearbeiten bzw. über die Zwischenablage einfügen, damit er wie das folgende Beispiel aussieht.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Ein (im <p>-Element verwendetes) ID-Attribut kann zur Gestaltung eines Elements dienen, während das (im <li>-Element verwendete) Attribut „class“ zur Gestaltung aller Elemente der gleichen Klasse dient.

Stellen Sie vor dem nächsten Schritt sicher, dass Ihre Datei gespeichert wird, indem STRG+S bzw. CMD+S auswählen.

Im Browser öffnen

Sie können eine lokale Vorschau Ihrer Website erstellen, indem Sie die HTML-Datei in einem Browser öffnen. Dann zeigt Ihr Browser auf den lokalen Dateipfad anstatt auf eine Website, die mit https:// beginnt. Dies sollte ähnlich wie dieses Beispiel aussehen: C:/dev/simple-website/index.html.

  • Wenn Sie mithilfe von Visual Studio Code eine Vorschau erstellen möchten, klicken Sie mit der rechten Maustaste auf index.html und anschließend auf Im Standardbrowser öffnen, oder wählen Sie die index.html-Datei aus und verwenden die Tastenkombination ALT+B.

    Screenshot of the Open in Browser context menu item in Visual Studio Code.

    Wichtig

    Wenn dabei Probleme auftreten sollten, vergewissern Sie sich, dass Sie direkt auf das Symbol für den Dateinamen oder den Text klicken. Wenn ein Dialogfeld Visual Studio Code angezeigt wird, wählen Sie Yes, I trust the authors (Ja, ich vertraue den Autoren) aus. Dies ist das Feature für das Arbeitsbereichsvertrauen, mit dem Sie entscheiden können, ob Ihre Projektordner automatische Codeausführung zulassen oder einschränken sollen. Sie haben die Datei soeben erstellt, sie ist also sicher.

    Die Webseite wird in Ihrem Standardbrowser geöffnet.

Anzeigen der Seite mithilfe von Entwicklertools

Sie können mithilfe der Entwicklertools in Ihrem Browser Webseiten untersuchen. Probieren Sie es aus!

  1. Öffnen Sie die Entwicklertools, indem Sie mit der rechten Maustaste auf die Webseite klicken und dann Inspect (Untersuchen) auswählen, oder versuchen Sie es mit den folgenden Tastenkombinationen:

    • Drücken Sie die Tastenkombination für die Entwicklertools, also F12.

    • Drücken Sie STRG+UMSCHALT+I unter Windows und Linux oder OPTION+CMD+I auf einem Mac.

    Diese Tastenkombinationen funktionieren in Microsoft Edge, Chrome und Firefox. Wenn Sie Safari verwenden, finden Sie weitere Informationen unter Webentwicklungstools. Wenn Safari installiert ist, klicken Sie auf Safari > Einstellungen und dann auf Erweitert. Aktivieren Sie unten im Bereich das Kontrollkästchen Menü „Entwickler“ in der Menüleiste anzeigen. Klicken Sie auf Develop > Show Web Inspector („Entwickeln“ > „Web Inspector anzeigen“). Weitere Informationen finden Sie in der Safari-Dokumentation zu Web Inspector.

    Weitere Informationen zum Öffnen der Entwicklertools und zu den wichtigsten verfügbaren Features finden Sie im Artikel Übersicht über die Entwicklertools.

  2. Klicken Sie auf die Registerkarte Elements.

    Screenshot showing a browser window with the website, and the Developer Tools next to it with the Elements tab selected.

  3. Bewegen Sie den Mauszeiger über die auf der Registerkarte Elemente angezeigten HTML-Elemente, und erweitern Sie den Inhalt der verschiedenen Elemente.

Die Registerkarte Elements (Elemente) in den Entwicklertools zeigt das im Browser gerenderte Dokumentobjektmodell (DOM). Beim Debuggen ist es häufig wichtig festzustellen, wie der Browser Ihren Quellcode interpretiert.

Wenn Sie die Seite in einem Browser prüfen, erhalten Sie alle möglichen hilfreichen Informationen, u. a. zum Lösen von Problemen. Sie können sich bei der Prüfung auch CSS-Details anzeigen lassen. Mehr dazu erfahren Sie im nächsten Abschnitt.