HTML-Editoren & Tools
Aus dem vorherigen Kapitel haben wir gelernt, dass HTML eine Auszeichnungssprache ist, die zum Erstellen von Webseiten verwendet wird. Beim Erstellen von Webseiten benötigen Sie folgende Tools und Programme:
- einen Text- oder HTML-Editor zum Schreiben und Bearbeiten des Quellcodes,
- einen Browser zum Überprüfen der Ergebnisse,
- einen Validator – ein spezielles Programm, das die Gültigkeit oder syntaktische Korrektheit des Quellcodes überprüft.
Lassen Sie uns diese im Detail besprechen.
HTML-Editoren
Es gibt mehrere professionelle Editoren, die Webentwickler zum Coden verwenden. Allerdings erfüllt nicht jeder Editor alle Ihre Anforderungen. Ein guter HTML-Editor sollte daher über folgende Funktionen verfügen:
- Syntax-Hervorhebung – die Anzeige von Text, insbesondere Quellcode, in verschiedenen Farben und Schriftarten,
- Unterstützung der Registerkartenansicht – gleichzeitiges Öffnen mehrerer Webseiten in Tabs,
- Überprüfung eines HTML-Dokuments auf Fehler,
- Code-Faltung – das Ausblenden großer Codefragmente, um nur eine Zusammenfassung oder die erste Zeile anzuzeigen.
Die beliebtesten HTML-Editoren sind die folgenden:
Da Sie gerade erst anfangen, können Sie Notepad (Windows) oder TextEdit (macOS) verwenden, um Ihre erste Datei zu schreiben. Da diese grundlegenden Editoren jedoch keine Syntax-Hervorhebung unterstützen, empfehlen wir, mit einem kostenlosen Editor zu beginnen, der dies unterstützt, wie z. B. Visual Studio Code oder Notepad++. Werfen wir einen Blick darauf, wie Sie Ihre erste Datei erstellen.
Schritt 1. Notepad auf Ihrem Computer öffnen
Drücken Sie die Windows-Taste, geben Sie Notepad ein und drücken Sie die Eingabetaste.
Schritt 2. Code schreiben
Schreiben oder kopieren Sie HTML-Code.
Beispiel für HTML-Code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>Ergebnis
Schritt 3. HTML-Dokument speichern
Gehen Sie im Notepad-Menü zu Datei und wählen Sie Speichern unter. Geben Sie Ihrem Dokument einen Namen und verwenden Sie dabei die Dateierweiterung .htm oder .html. (Wir empfehlen die Verwendung der Erweiterung .html). Stellen Sie sicher, dass die Codierung auf UTF-8 eingestellt ist und das Dropdown-Menü Dateityp auf Alle Dateien steht, um zu verhindern, dass Windows automatisch eine .txt-Erweiterung hinzufügt. Speichern Sie die Datei in einem dedizierten Ordner, den Sie zuvor erstellt haben, um alle Ihre HTML-Dokumente zu speichern.
Schritt 4. HTML-Datei in einem Browser überprüfen
Öffnen Sie Ihre HTML-Datei in einem Browser (Rechtsklick auf die Datei und wählen Sie Öffnen mit).
Browser
Sie benötigen einen Browser, um HTML-Dateien zu überprüfen. Um zu beginnen, reicht jeder Browser aus, z. B. Google Chrome, Opera oder Firefox, aber später werden Sie alle benötigen. Der Grund dafür ist, dass jeder Browser über eine eigene Rendering-Engine verfügt und Sie Ihren Code in jedem von ihnen überprüfen müssen. Moderne Browser enthalten außerdem integrierte Developer Tools (F12 drücken), wobei Chrome DevTools am weitesten verbreitet ist, um HTML zu untersuchen und zu debuggen. Für das browserübergreifende Testing können Sie Online-Dienste oder virtuelle Maschinen nutzen, sobald Ihr Projekt wächst.
Validator
Ein wesentlicher Bestandteil des Webseitenerstellungsprozesses ist die Überprüfung der Gültigkeit des HTML-Codes. Spezielle Validator-Programme oder -Dienste können verwendet werden, um die Gültigkeit oder syntaktische Korrektheit eines Codefragments oder Dokuments zu überprüfen.
Der gängigste Online-Dienst ist validator.w3.org. Geben Sie die URL einer Webseite ein, und der Dienst überprüft den Code auf Fehler oder gibt eine Meldung zurück, die bestätigt, dass Ihr Dokument gültig ist.
Zur Überprüfung der Gültigkeit lokaler Dateien können Sie Online-Validator oder integrierte Linter in modernen Editoren wie Visual Studio Code verwenden. Einige Editoren bieten zudem eine Echtzeit-Syntaxprüfung während der Eingabe.
Praxis
Welche der folgenden sind empfohlene HTML-Editoren laut dem im angegebenen URL bereitgestellten Inhalt?