In diesem Lab lernen Sie, wie Sie Ihre erste HTML-Seite mit WebIDE (ähnlich VS Code), einem leistungsstarken und beliebten Code-Editor für die Webentwicklung, erstellen.
Dieser umfassende Leitfaden behandelt wichtige Aspekte wie die Konfiguration von WebIDE, die Erstellung einer HTML5-Boilerplate-Vorlage, das Hinzufügen von grundlegenden Inhalten zu Ihrer Webseite und die Vorschau des Ergebnisses in einem Webbrowser. Indem Sie diesen schrittweisen Anweisungen folgen, gewinnen Sie praktische Erfahrungen in den Grundlagen der Webentwicklung und legen eine solide Grundlage für die Erstellung interaktiver und strukturierten Webseiten.
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 Anfänger mit einer Abschlussquote von 87% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.
Einfach starten, ohne Installation.
Erstellen einer neuen HTML-Datei
Das LabEx WebIDE bietet eine moderne, VS Code-ähnliche Entwicklungsumgebung für Codierungsaufgaben. WebIDE ist gut geeignet für Webentwicklungsprojekte, einschließlich HTML, CSS und JavaScript.
Um zu beginnen, öffnen Sie das WebIDE, indem Sie auf die Registerkarte "WebIDE" in der LabEx-Oberfläche klicken. Das WebIDE zeigt links einen Dateiexplorer und rechts einen Code-Editor an. Unten befinden sich auch ein Terminal und einige andere Tools.
Dateiexplorer: Zeigt die Projektverzeichnisstruktur an, in der Sie Dateien erstellen, bearbeiten und verwalten können. Das Standardarbeitsverzeichnis ist ~/project.
Code-Editor: Bietet einen Texteditor zum Schreiben und Bearbeiten von Code. Sie können neue Dateien erstellen, vorhandene Dateien öffnen und Codeänderungen anzeigen.
Terminal: Bietet eine Befehlszeilenoberfläche zum Ausführen von Shell-Befehlen, Installieren von Paketen und Verwalten von Dateien. Sie können Befehle direkt im Terminal ausführen. Das Standardarbeitsverzeichnis ist ~/project.
In diesem Schritt lernen Sie, wie Sie im WebIDE eine neue HTML-Datei erstellen. HTML (HyperText Markup Language) ist die Standard-Markup-Sprache für die Erstellung von Webseiten. Jede Webseite beginnt mit einer HTML-Datei.
Im WebIDE folgen Sie diesen Schritten, um eine neue HTML-Datei zu erstellen:
Klicken Sie auf das Menü "Datei".
Wählen Sie "Neue Datei" aus.
Speichern Sie die Datei unter dem Namen index.html.
Alternativ können Sie die Tastenkombination Strg+N verwenden, um eine neue Datei zu erstellen, und sie dann als index.html speichern.
Beim Benennen von HTML-Dateien sollten Sie diese wichtigen Regeln beachten:
Verwenden Sie Kleinbuchstaben.
Verwenden Sie die Dateierweiterung .html.
Vermeiden Sie Leerzeichen in Dateinamen.
Verwenden Sie beschreibende Namen wie index.html, about.html usw.
Lassen Sie uns überprüfen, ob die Datei über das Terminal erstellt wurde:
ls ~/project
Beispielausgabe:
index.html
Die Datei ist nun bereit, um in den nächsten Schritten HTML-Inhalte hinzuzufügen. Die Dateierweiterung .html teilt Webbrowsern mit, dass dies ein HTML-Dokument ist.
Wenn Sie mit dem Terminal vertraut sind, können Sie die Datei auch mit dem folgenden Befehl erstellen:
touch ~/project/index2.html
Erfahren Sie mehr über Linux-Befehle, um Ihre Terminal-Fähigkeiten zu verbessern.
Generieren einer HTML5-Boilerplate-Vorlage
In diesem Schritt lernen Sie, wie Sie im WebIDE eine Standard-HTML5-Boilerplate-Vorlage generieren. Eine Boilerplate ist eine Standardvorlage, die die Grundstruktur für ein HTML-Dokument bereitstellt.
Im WebIDE können Sie mit einer integrierten Tastenkombination schnell eine HTML5-Vorlage generieren. Befolgen Sie diese Schritte:
Öffnen Sie Ihre index.html-Datei.
Geben Sie ! (Ausrufezeichen) ein.
Drücken Sie die Tab-Taste.
Dadurch wird automatisch eine vollständige HTML5-Vorlage mit allen wesentlichen Elementen generiert:
Tipp: Wenn die Tastenkombination nicht funktioniert, können Sie den Vorlagen-Code in Ihre index.html-Datei kopieren und einfügen.
Lassen Sie uns die wichtigsten Komponenten dieser HTML5-Vorlage analysieren:
<!DOCTYPE html> deklariert, dass es sich um ein HTML5-Dokument handelt.
<html lang="en"> ist das Wurzelelement mit Sprachangabe.
<head> enthält Metadaten über das Dokument.
<meta charset="UTF-8"> gibt die Zeichensatzkodierung an.
<meta name="viewport"> sorgt für eine korrekte Darstellung auf Mobilgeräten.
<title> legt den Seitentitel fest, der in der Browserregisterkarte angezeigt wird.
<body> ist der Bereich, in dem Sie den Seiteninhalt hinzufügen werden.
Sie können das <title>-Element ändern, um Ihrer Seite einen sinnvollen Namen zu geben.
Mehr als nur ein Lerntext – erlebe es selbst.
Hinzufügen von Grundinhalten zu einer HTML-Seite
In diesem Schritt lernen Sie, wie Sie mit verschiedenen HTML-Elementen Grundinhalte zu Ihrer HTML-Seite hinzufügen. HTML verwendet Tags, um Inhalte auf einer Webseite zu strukturieren und anzuzeigen.
Öffnen Sie Ihre index.html-Datei im WebIDE und ersetzen Sie den leeren <body>-Abschnitt durch den folgenden Inhalt:
Tipp: Kopieren Sie den Codeausschnitt in Ihre index.html-Datei, um Inhalte hinzuzufügen. Ersetzen Sie den vorhandenen <body></body>-Inhalt. Wir werden in den nächsten Labs mehr über HTML-Elemente lernen.
<body>
<h1>Welcome to My First Web Page</h1>
<p>
This is a paragraph of text. HTML allows you to create different types of
content easily.
</p>
<h2>My Favorite Hobbies</h2>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Traveling</li>
</ul>
<h2>Quick Links</h2>
<a href="https://www.example.com">Visit Example Website</a>
</body>
Lassen Sie uns die verwendeten HTML-Elemente analysieren:
<h1> und <h2> sind Überschrift-Tags (h1 ist die Hauptüberschrift, h2 ist eine Unterüberschrift)
<p> wird für Textabsätze verwendet
<ul> erstellt eine ungeordnete (aufzählende) Liste
<li> repräsentiert Listenelemente
<a> erstellt einen Hyperlink zu einer anderen Webseite
Diese Grundelemente helfen Ihnen, Inhalte auf Ihrer Webseite zu strukturieren und darzustellen. Experimentieren Sie mit verschiedenen Tags, um zu sehen, wie sich die Darstellung und das Layout Ihrer Inhalte ändern.
Einige zusätzliche Tipps für Anfänger:
Schließen Sie immer Ihre HTML-Tags.
Verwenden Sie sinnvolle und beschreibende Inhalte.
Richten Sie Ihren Code ein, um die Lesbarkeit zu verbessern.
Vorschau und Darstellung von HTML in einem Browser
In diesem Schritt lernen Sie, wie Sie Ihre HTML-Seite in einem Webbrowser vorschauen und darstellen können. Die LabEx-VM bietet im WebIDE eine integrierte Browser-Vorschaufunktion.
Um Ihre HTML-Datei zu vorschauen:
Klicken Sie im WebIDE auf die Schaltfläche "Go Live" in der unteren rechten Ecke.
Ein neuer Browser-Tab wird geöffnet, in dem Ihre HTML-Seite dargestellt wird.
Alternativ können Sie auf die Registerkarte "Web 8080" klicken, um die Vorschau zu öffnen.
Dadurch wird automatisch Folgendes durchgeführt:
Ein Webserver wird gestartet.
Ihre HTML-Seite wird in einem Vorschaufenster geöffnet.
Es werden Echtzeit-Updates bereitgestellt, wenn Sie Ihren Code ändern.
Tipp: Die LabEx-VM hostet die Vorschau auf Port 8080. Sie können den Vorschau-Link mit anderen teilen, um Ihre Arbeit zu präsentieren. Nachdem Ihre Lab-VM gestoppt wurde, funktioniert der Vorschau-Link nicht mehr.
Wichtige Dinge zu beobachten:
Die Seite wird mit verschiedenen Überschriftgrößen dargestellt.
Die Liste erscheint als Aufzählungspunkte.
Der Link ist anklickbar.
Der Seitentitel erscheint in der Browserregisterkarte.
Interaktive Übungen statt trockener Theorie.
Zusammenfassung
Dieses Lab hat die Lernenden durch die ersten Schritte der HTML-Entwicklung geführt, wobei der Schwerpunkt auf der Erstellung einer neuen HTML-Datei und dem Verständnis der Grundstruktur der Webseitenerstellung lag. Indem die Teilnehmer den schrittweisen Anweisungen folgten, haben sie praktische Erfahrungen in der Verwendung von WebIDE als Entwicklungstool gesammelt und die wesentlichen Fähigkeiten erlernt, die benötigt werden, um mit HTML5 an der Erstellung von Webseiten zu beginnen.
