HTML-Editoren

In dieser Lektion lernst du verfügbare Code-Editoren und Online-Spielwiesen kennen, wie du sie installierst und effektiv während der Entwicklung nutzt.

Was ist ein Code-Editor?

Ein Code-Editor ist ein Programm, das das Schreiben von HTML, CSS und JavaScript erleichtert. Er bietet Syntaxhervorhebung, Autovervollständigung, Linting und andere Entwicklerwerkzeuge.

Beliebte Desktop-Editoren

Die folgenden Editoren sind entweder kostenlos oder bieten kostenlose Testversionen an und werden häufig von Webentwicklern verwendet:

• Visual Studio Code: Unser Favorit ist VS Code wegen seines umfangreichen Erweiterungssystems und integrierten Terminals.
• Sublime Text: Schnell und ressourcenschonend mit Plugin-Unterstützung.
• Atom: Von GitHub entwickelt, anpassbarer und erweiterbarer Editor.

Alle modernen Editoren verfügen über folgende wichtige Funktionen:

• • Syntaxhervorhebung und Designs
• • Intelligente Autovervollständigung
• • Echtzeit-Linting
• • Unterstützung für Snippets und Makros
• • Integriertes Terminal für schnelle Befehle
• • Git-Integration und Versionskontrolle

HTML in Visual Studio Code bearbeiten

Visual Studio Code (VS Code) ist einer der beliebtesten Code-Editoren, besonders für Webentwicklung. Die folgenden Schritte zeigen, wie du HTML-Dateien darin bearbeiten kannst.

1. Visual Studio Code herunterladen und installieren

Besuche die offizielle Website (https://code.visualstudio.com/) und lade die passende Version für dein Betriebssystem herunter. Die Installation ist einfach – folge einfach den Anweisungen.

2. Neues Projektverzeichnis erstellen und öffnen

Erstelle auf deinem Computer einen neuen Ordner, z. B. 'html-practice'. Starte anschließend VS Code, gehe zu 'Datei' → 'Ordner öffnen...' und wähle den neu erstellten Ordner aus.

3. Neue HTML-Datei erstellen

Klicke im Datei-Explorer auf der linken Seite mit der rechten Maustaste auf den Ordner und wähle 'Neue Datei'. Gib z. B. 'index.html' als Namen ein.

4. Grundgerüst eingeben

Gib eine grundlegende HTML-Struktur manuell ein oder tippe '! + Enter', um mit der integrierten Emmet-Erweiterung automatisch eine Vorlage zu generieren.

5. HTML-Datei im Browser öffnen

Klicke mit der rechten Maustaste auf die Datei und wähle 'Im Datei-Explorer anzeigen' oder 'Im Finder anzeigen'. Doppelklicke dann auf die Datei, um sie im Standardbrowser zu öffnen.

Erweiterungen und Add-ons

Die meisten Editoren verfügen über einen Marktplatz, auf dem du zusätzliche Funktionen, Designs und Sprachpakete installieren kannst.

Online-Editoren und Spielwiesen

Wenn du nichts installieren möchtest, sind diese webbasierten Tools sofort einsatzbereit:

• • ReadyTools – ReadyTools bietet mehrere HTML-Editoren, darunter einen kostenlosen integrierten Editor mit der Academy.
• • CodePen – Interaktive Umgebung zum Testen von HTML, CSS und JavaScript.
• • CodeSandbox – Projektbasierte Umgebung mit Modul- und Paketunterstützung.