HTML-Editoren und Tools – Kostenloses Online-Tutorial

Aus dem vorherigen Kapitel haben wir gelernt, dass HTML eine Auszeichnungssprache ist, die zur Erstellung von Webseiten verwendet wird. Beim Erstellen von Webseiten benötigst du die folgenden Werkzeuge und Programme:

einen Text- oder HTML-Editor zum Schreiben und Bearbeiten von Quellcode,
einen Browser zur Überprüfung der Ergebnisse,
einen Validator – ein spezielles Programm, das die Gültigkeit oder syntaktische Korrektheit von Quellcode prüft.

Sprechen wir darüber im Detail.

HTML-Editoren

Es gibt mehrere professionelle Editoren, die Webentwickler zum Programmieren verwenden. Nicht jeder Editor kann jedoch alle deine Anforderungen erfüllen. Ein guter HTML-Editor muss daher die folgende Funktionalität besitzen:

Syntax-Hervorhebung – Anzeige von Text, insbesondere Quellcode, in verschiedenen Farben und Schriftarten,
Tab-Ansicht – gleichzeitiges Öffnen mehrerer Webseiten in Tabs,
Prüfung eines HTML-Dokuments auf Fehler,
Code-Faltung – Ausblenden großer Code-Fragmente, um nur eine Zusammenfassung oder die erste Zeile anzuzeigen.

Die beliebtesten HTML-Editoren sind die folgenden:

Visual Studio Code — kostenlos und Open-Source, und die am häufigsten empfohlene Standardwahl. Er läuft auf Windows, macOS und Linux. Seine Stärke liegt im Erweiterungs-Ökosystem: Füge Prettier hinzu, um deinen Code automatisch zu formatieren, Live Preview (oder Live Server), um Änderungen sofort im Browser zu sehen, und das integrierte IntelliSense für die automatische Vervollständigung von Tags und Attributen.
Sublime Text — die Wahl für rohe Geschwindigkeit. Er startet sofort und bleibt auch bei sehr großen Dateien reaktionsschnell, was ihn für schnelle Bearbeitungen beliebt macht. Es handelt sich um kostenpflichtige Software, die kostenlos evaluiert werden kann, und läuft auf allen drei großen Plattformen.
Notepad++ — ein kostenloser, leichtgewichtiger Editor, der nur für Windows verfügbar ist. Auf macOS oder Linux ist eine vergleichbare leichtgewichtige Option der integrierte Editor (TextEdit auf macOS, gedit/nano auf Linux), oder verwende einfach das plattformübergreifende VS Code.
WebStorm — eine vollständige IDE von JetBrains. Es handelt sich um kostenpflichtige Software (Abonnement) und ist schwerer als die oben genannten Editoren, bietet aber umfassendes Refactoring, Debugging und Framework-Unterstützung direkt aus der Box, was es für größere Projekte geeignet macht.

Wenn du gerade erst anfängst und keine Einrichtung möchtest, kannst du Notepad (Windows) oder TextEdit (macOS) verwenden, um deine erste Datei zu schreiben. Diese einfachen Editoren bieten jedoch keine Syntax-Hervorhebung, daher empfehlen wir, mit einem kostenlosen Editor zu beginnen, der diese Funktion unterstützt, wie Visual Studio Code (alle Plattformen) oder Notepad++ (Windows). Sobald du einen Editor hast, lerne die grundlegende Struktur eines HTML-Dokuments, bevor du weitermachst.

Deine erste HTML-Datei

Die folgenden Schritte verwenden Windows Notepad, da es auf jedem Windows-Computer installiert ist und keine Einrichtung erfordert. Dieselbe Idee gilt für jeden Editor: Schreibe den Code, speichere ihn mit der Erweiterung .html, und öffne ihn dann in einem Browser.

Schritt 1. Notepad öffnen

Drücke die Windows-Taste, tippe Notepad und drücke Enter. (Auf macOS öffne TextEdit und wechsle über Format → In reinen Text umwandeln in den Nur-Text-Modus.)

Schritt 2. Deinen Code schreiben

Schreibe oder kopiere das folgende HTML.

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

Probier es selbst »

Wenn dieser Code in einem Browser geöffnet wird, rendert er eine Seite mit der Überschrift „Simple example" in großem Fettdruck, gefolgt vom Absatz „Some text you want to show here".

Schritt 3. Das HTML-Dokument speichern

Gehe in der Notepad-Menüleiste auf File und wähle Save As. Gib deinem Dokument einen Namen mit der Dateiendung .htm oder .html. (Wir empfehlen die Verwendung der Endung .html.) Stelle sicher, dass du die Kodierung auf UTF-8 setzt und das Dropdown-Menü Save as type auf All Files stellst, um zu verhindern, dass Windows eine .txt-Erweiterung hinzufügt. Speichere die Datei in einem dedizierten Ordner, den du vorher erstellst, um alle deine HTML-Dokumente zu speichern.

Schritt 4. Die HTML-Datei im Browser prüfen

Öffne deine HTML-Datei in einem Browser (Rechtsklick auf die Datei und wähle Open with). Du solltest die Überschrift und den Absatz aus dem obigen Code sehen.

Browser

Du benötigst einen Browser, um HTML-Dateien zu prüfen. Zunächst reicht jeder Browser aus – Google Chrome, Opera oder Firefox –, aber später wirst du alle von ihnen benötigen. Jeder Browser hat seine eigene Rendering-Engine, und du musst deinen Code in jedem von ihnen prüfen. Moderne Browser enthalten auch integrierte Entwicklerwerkzeuge (drücke F12, oder rechtsklicke auf ein Element und wähle Untersuchen). Die DevTools ermöglichen es dir, das Live-HTML und CSS jedes Elements zu inspizieren, Stile anzupassen und das Ergebnis sofort zu sehen, sowie die Console zu lesen, in der der Browser JavaScript-Fehler und Warnungen meldet. Sie sind der schnellste Weg herauszufinden, warum eine Seite nicht so aussieht oder sich verhält, wie du es erwartest. Für browserübergreifende Tests kannst du Online-Dienste oder virtuelle Maschinen nutzen, sobald dein Projekt wächst.

Validator

Ein wesentlicher Teil des Entwicklungsprozesses von Webseiten ist die Prüfung der Gültigkeit des HTML-Codes. Spezielle Validatoren, Programme oder Dienste können verwendet werden, um die Gültigkeit oder syntaktische Korrektheit eines Code-Fragments oder Dokuments zu prüfen.

Der bekannteste Online-Dienst ist validator.w3.org. Gib die URL einer Webseite ein (oder füge deinen Code direkt ein), und der Dienst prüft ihn anhand des HTML-Standards. Die Ausgabe ist eine Liste von Meldungen: Errors (rot) kennzeichnen Code, der den Standard verletzt, z. B. ein nicht geschlossenes Tag oder ein falsch geschriebener Elementname; Warnings (gelb) weisen auf Dinge hin, die technisch erlaubt, aber nicht empfohlen sind. Wenn keine Probleme vorliegen, erhältst du eine grüne Meldung, die bestätigt, dass das Dokument gültig ist. Das Beheben von Validator-Fehlern ist eine gute Gewohnheit, da ungültiges Markup in verschiedenen Browsern unterschiedlich dargestellt werden kann.

Zum Prüfen der Gültigkeit lokaler Dateien kannst du Online-Validatoren oder integrierte Linter in modernen Editoren wie Visual Studio Code verwenden. Einige Editoren bieten auch eine Echtzeit-Syntaxprüfung während des Tippens.

Übungen

Übung

Welche der folgenden HTML-Editoren werden in diesem Kapitel empfohlen? (Alle zutreffenden auswählen)