Übung – Erstellen einer HTML-Seite

  • 5 Minuten

In dieser Übung beginnen Sie damit, die Webseite für Ihren Lebenslauf zu erstellen. Zunächst fügen Sie einige allgemeine Informationen hinzu, z. B. Ihren Namen und die Abschnittsüberschriften. Außerdem fügen Sie einige Kommentare hinzu, die wir in einer späteren Übung als Marker zum Einfügen von Informationen nutzen.

Diese Übung verwendet vscode.dev – eine webbasierte Version von Visual Studio Code und CodeSwing. Diese Tools helfen dabei, den Entwicklungsprozess zu optimieren. Für die Durchführung der folgenden Übungen ist keine lokale Installation erforderlich.

Erstellen einer HTML-Seite mit CodeSwing

Sie erstellen zunächst einen Ordner, richten Ihre Tools ein und erstellen mit CodeSwing einen „Swing“ in vscode.dev. Ein Swing zeigt automatisch die Ergebnisse Ihres Codes an, den Sie in vscode.dev schreiben. Auf diese Weise können Sie schnell Änderungen vornehmen, und die Aktualisierungen erfolgen in Echtzeit.

Das folgende Video zeigt, wie CodeSwing in Visual Studio Code installiert wird. Diese Schritte sind auch in den Übungsschritten aufgeführt.

  1. Erstellen Sie einen Ordner auf Ihrem Desktop mit dem Namen Lebenslauf.
  2. Öffnen Sie vscode.dev.
  3. Wählen Sie Ordner öffnen aus.
  4. Navigieren Sie zum Ordner resume, den Sie zuvor erstellt haben, und klicken Sie auf Ordner auswählen.
  5. Wenn Sie die Aufforderung Anzeige von Dateien durch Website zulassen? erhalten, wählen Sie Dateien anzeigen aus.
  6. Klicken Sie auf die Schaltfläche Erweiterungen.

    Screenshot des Symbols

  7. Geben Sie im Textfeld Nach Extensions in Marketplace suchen den Suchbegriff CodeSwing ein.
  8. Wählen Sie Installieren aus, um CodeSwing zu installieren.
  9. Öffnen Sie die Befehlspalette, indem Sie Ctl-Shift-P- oder Cmd-Shift-P- auf einem Mac auswählen.
  10. Geben Sie CodeSwing- in die Befehlspalette ein, und wählen Sie CodeSwing: New Swing in Directory...aus.
  11. Wählen Sie Select Folder (Ordner auswählen) aus, um das aktuelle Verzeichnis zu verwenden (das Verzeichnis, das Sie in einem vorherigen Schritt erstellt haben).
  12. Wählen Sie Basic: HTML-Only (Einfach: Nur HTML) aus.
  13. Wenn Sie aufgefordert werden, Änderungen am Ordner resume zu speichern, wählen Sie Save changes (Änderungen speichern) aus.

Visual Studio Code erstellt zwei nebeneinander angeordnete Fenster. Auf der linken Seite befindet sich Ihr Editor, in dem Sie Ihren HTML-Code eingeben können. Das rechte Fenster verhält sich wie ein Browser und zeigt die Ergebnisse Ihres HTML-Codes an.

Hinzufügen von HTML zum Erstellen der Struktur Ihrer Seite

Im nächsten Schritt fügen Sie HTML-Code ein, um die Struktur Ihrer Seite zu erstellen. Sie erstellen die drei Hauptelemente html, head und body. Innerhalb von body fügen Sie einen Abschnitt hinzu, der allgemeine Informationen über Sie enthält, z. B. Ihren Namen und Informationen zu sozialen Medien. Anschließend fügen Sie Abschnitte hinzu, in denen Informationen zu Ihrer Ausbildung und beruflichen Erfahrung aufgeführt werden.

Das folgende Video zeigt, wie Html in Visual Studio Code erstellt und der Code in CodeSwing gerendert wird. Diese Schritte sind auch in den Übungsschritten aufgeführt.

Sie können Your name durch Ihren Namen ersetzen. In den weiteren Übungen erstellen Sie Listen und Links zu Ihrer E-Mail-Adresse, Social Media-Handles sowie Informationen zu Ihrer Ausbildung und Ihrer beruflichen Erfahrung.

Nachdem Sie den Code hinzugefügt haben, überprüfen Sie, welcher Code hinzugefügt wurde.

  1. Fügen Sie in index.htmlden folgenden HTML-Code hinzu:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Jedes der Elemente im HTML-Code führt bestimmte Aktionen aus. In der folgenden Tabelle werden die Tags beschrieben, die Sie in Ihrem HTML-Code verwendet haben und wie der Browser sie versteht.

Tag Beschreibung
<html> Das Tag "container" für das gesamte HTML-Dokument. Alle anderen Tags werden innerhalb des HTML-Elements geschrieben.
<head> Der Headercontainer. Die Kopfzeile enthält in der Regel Verweise auf andere Dateien, die die Seite oder Website benötigt. Sie kann auch Daten enthalten, die Suchmaschinen und Social Media-Websites verwenden, um Ihre Website besser zu finden.
<body> Dieses Tag erstellt den Textcontainer für die Webseite. Die meisten Anzeigeelemente werden im body-Element platziert.
<div> Das division-Tag erstellt einen Abschnitt in HTML. Abschnitte weisen in der Regel ähnliche Inhalte oder Inhalte auf, die miteinander verknüpft sind.
<h1> - <h6> Hierbei handelt es sich um Überschriftentags. Sie geben dem HTML-Dokument eine Struktur. Sie weisen den Browser an, den Text zwischen ihnen auf eine bestimmte Weise zu formatieren, um diese Hierarchie anzuzeigen.
<!-- comment text --> Diese Tags sind Kommentare in HTML. Sie erstellen keine gerenderte Ausgabe. Sie werden von Entwicklern dafür verwendet, dass ihr Code besser auffindbar ist, gemeinsam genutzt werden kann und für Dritte verständlicher ist.
/* CSS comment */ Diese Kommentartags werden in Cascading StyleSheets verwendet.
  1. Während der Eingabe wird die Seite automatisch aktualisiert. Das Endergebnis entspricht in etwa dem folgenden Bild:

Screenshot der Lebenslaufstruktur.

Überprüfen des Codes

Jede HTML-Seite hat html als Stammkernelement, mit allen Inhalten, die darin enthalten sind. html verfügt normalerweise über zwei direkte untergeordnete Elemente, head, die Metadaten enthält, und body, die die anzuzeigenden Informationen enthalten.

Beachten Sie, dass Sie nur ein h1 Element für Ihren Namen verwenden, und h2 Elemente für Kopfzeilen für jeden Abschnitt. Dies soll dazu beitragen, die wichtigsten Teile der Seite hervorzuheben. Ihr Name ist die wichtigste Information auf der Seite; deshalb wird er mit h1hervorgehoben.

Schließlich gibt es Kommentare für E-Mail-Adresse, soziale Medien, Bildungund Erfahrung. Diese werden als Platzhalter verwendet und in einer späteren Übung in diesem Modul ersetzt.