Ü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.

Öffnen Sie Ihren Websiteordner in Visual Studio Code, und öffnen Sie die index.html Datei, indem Sie sie im Explorer auswählen.
Geben Sie auf der Seite ein und drücken Sie dann die Eingabetaste . 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.

Bearbeiten Sie den Vorlagencode so, dass er folgendem Beispiel ähnelt. Speichern Sie dann die Datei, indem Sie CTRL+S unter Windows oder BEFEHL+S unter macOS auswählen.

<!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 DOCTYPE<!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 meta Tag gibt Metadateninformationen an, die normalerweise nicht für den Viewer sichtbar sind, es sei denn, sie zeigen den Quellcode in ihrem Browser an. 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 mag unbedeutend erscheinen, aber es ist entscheidend, 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 über das HTML-Dokument, z. B. Zeichensatz, Skripts und den Browser, in dem die Webseite geöffnet wird.

Der Titel einer Webseite wird oben in einem Browserfenster angezeigt und ist auf viele Arten von Bedeutung. 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.

Ä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 Website-Kopfzeile 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. Die Verwendung einer separaten CSS-Seite wird 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.

Fügen Sie im Visual Studio Code-Editor eine leere Zeile hinter dem <title> Element hinzu, geben Sie linkein, 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="">
```

Aktualisieren Sie href=, zu href="main.css" und speichern Sie die Datei, indem Sie STRG+S unter Windows oder Befehl+S auf macOS auswählen.

...
<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>
...

Bearbeiten des Elements „body“

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

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

Fügen Sie innerhalb des <body> Elements ein Überschriftenelement<h1> hinzu, gefolgt von einem Absatzelement<p> , und erstellen Sie dann eine nicht sortierte Liste<ul> , die mehrere Listenelementelemente<li> enthält.

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>

Sie können ein (im <p>-Element verwendetes) ID-Attribut verwenden, um eine Element zu gestaltem, 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 Sie CTRL+S oder BEFEHL+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.

Um eine Vorschau mit Visual Studio Code anzuzeigen, klicken Sie mit der rechten Maustaste index.html , und wählen Sie " Im Standardbrowser öffnen" aus, oder wählen Sie die index.html Datei aus, und verwenden Sie die Tastenkombination ALT+B.

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 Visual Studio Code-Dialogfeld angezeigt wird, wählen Sie "Ja" aus, ich vertraue den Autoren; Dies ist das Feature "Arbeitsbereichsvertrauensstellung", mit dem Sie entscheiden können, ob Ihre Projektordner die 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!

Öffnen Sie Entwicklertools, indem Sie mit der rechten Maustaste auf die Webseite klicken und "Prüfen" auswählen, oder versuchen Sie die folgenden Tastenkombinationen:
- Drücken Sie die Tastenkombination für Entwicklertools, nämlich 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, lesen Sie die Webentwicklungstools. Wenn Sie installiert sind, wählen Sie Safari-Einstellungen >und dann "Erweitert" aus. Aktivieren Sie unten im Bereich das Kontrollkästchen "Entwicklungsmenü in der Menüleiste anzeigen". Klicken Sie auf Entwickeln > Web Inspector anzeigen. Weitere Informationen finden Sie in der Safari-Dokumentation zu Web Inspector.

Weitere Informationen zum Öffnen von Entwicklertools und den wichtigsten verfügbaren Features finden Sie im Artikel "Übersicht über DevTools".
Wählen Sie die Registerkarte "Elemente " aus.
Bewegen Sie die Maus über die HTML-Elemente, die auf der Registerkarte " Elemente " angezeigt werden, und erweitern Sie den Inhalt der verschiedenen Elemente.

Auf der Registerkarte "Elemente" in den Entwicklertools wird das Dokumentobjektmodell (DOM) so angezeigt, wie es im Browser gerendert wird. 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.