HTML Editor: Code & Preview

Verwandeln Sie Ihre Webidee mit dem HTML-Editor in eine funktionierende Seite. Schreiben Sie HTML mit eingebettetem CSS und JavaScript, sehen Sie sich das Ergebnis in der Vorschau an und nutzen Sie kurze Lektionen, um den Code zu verstehen, den Sie bearbeiten. Es ist ein praktischer Arbeitsbereich für Schüler, Anfänger und Entwickler, die mit kleinen Webseiten auf mobilen Geräten experimentieren.

CODE SCHREIBEN UND ÜBERPRÜFEN

Arbeiten Sie in einem Code-Editor mit Syntaxhervorhebung, Klammererkennung, automatischem Schließen sowie Rückgängig- und Wiederherstellungsfunktionen. Zeigen Sie Zeilennummern an, suchen Sie nach Text oder springen Sie zu einer bestimmten Zeile, wenn ein Codeabschnitt länger wird. Die zusätzliche Symbolleiste bietet schnellen Zugriff auf häufig verwendete Programmierzeichen, sodass Sie Tags und Ausdrücke einfacher eingeben können, ohne ständig zwischen verschiedenen Tastaturlayouts wechseln zu müssen.

Wechseln Sie zwischen den Tabs „Code“, „Ausgabe“ und „Konsole“. Die Ausgabeansicht rendert Ihr Dokument innerhalb der App, inklusive Stilen und Skripten. Nutzen Sie die automatische Aktualisierung der Vorschau während der Bearbeitung oder deaktivieren Sie sie, wenn Sie die Aktualisierung lieber selbst steuern möchten. Konsolenmeldungen helfen Ihnen, die JavaScript-Ausführung Ihrer Seite zu analysieren.

VERSCHIEDENE VORSCHAUBREITEN ERKUNDEN

Wählen Sie zwischen Smartphone-, Tablet- oder Desktop-Vorschau, um zu sehen, wie sich ein Layout bei unterschiedlichen Bildschirmbreiten verhält. Diese Ansichten sind in der App integriert und eignen sich hervorragend, um Abstände und Anordnung beim Erstellen eines responsiven Designs zu überprüfen. Probieren Sie eine Überschrift aus, passen Sie eine Stilregel an und kehren Sie dann zur Ausgabe zurück, um die Auswirkungen zu sehen.

KONZEPTE LERNEN UND ÜBEN

Der Lernmodus vereint HTML-, CSS- und JavaScript-Themen. Filtern Sie nach Thema oder suchen Sie nach einem Konzept, anstatt alles der Reihe nach zu lesen. Jede Lektion enthält eine Erklärung, einen kurzen Tipp, praktische Anwendungsbeispiele, häufige Fehler, ein Beispiel und eine Code-Anleitung.

Nach jeder Lektion folgen zwei kurze Programmieraufgaben. Stellen Sie zunächst ein Beispiel wieder her und schreiben Sie dann einen neuen Code-Schnipsel, der das Konzept anwendet. Überprüfen Sie Ihre Lösung, lesen Sie das Feedback und setzen Sie den Startpunkt zurück, wenn Sie einen weiteren Versuch unternehmen möchten. Die zweite Aufgabe wird freigeschaltet, sobald die erste abgeschlossen ist. Ihr Lese- und Übungsfortschritt wird lokal gespeichert, sodass Sie zu begonnenen Themen zurückkehren können.

SPEICHERN UND TEILEN SIE IHRE ARBEIT

Erstellen Sie ein Dokument, öffnen Sie eine gespeicherte HTML-Datei oder verwenden Sie „Speichern“ und „Speichern unter“, um Ihre Arbeit als HTML-Datei zu speichern. Teilen Sie eine Datei, wenn Sie das Dokument selbst versenden möchten. Für die Online-Übergabe generieren Sie einen Übertragungscode oder einen Freigabelink und verwenden den zugehörigen Web-Editor, um mit dem Code-Snippet weiterzuarbeiten. Die Online-Übertragung sendet den aktuellen Code an den Dienst und erfordert eine Internetverbindung.

GESTALTEN SIE IHREN ARBEITSBEREICH KOMFORTABEL

Wählen Sie zwischen hellem, dunklem oder System-Design und passen Sie die Schriftgröße des Editors an. In den Einstellungen können Sie Zeilennummern, den Barrierefreiheitsmodus, automatisches Speichern, Backups beim Beenden und die Wiederherstellung der Sitzung steuern. Entwürfe und Arbeitsbereichskopien sind lokale App-Daten; speichern Sie wichtige Arbeiten als Dateien, anstatt eine lokale Sitzung als dauerhafte Sicherung zu verwenden.

Auf der Seite „Daten & Datenschutz“ können Sie Einstellungen überprüfen, temporäre Editordaten löschen oder lokale App-Daten zurücksetzen. Der Prämien-Hub bietet außerdem optionale tägliche Belohnungen und werbebasierte Coin-Aktivitäten. Prämien-Coins sind In-App-Gegenstände, kein Bargeld.

Das Bearbeiten einzelner Seiten und das Lesen von Lektionspaketen benötigen keine Internetverbindung. Für externe Bilder, Skripte, Online-Übertragungen und Werbung ist eine Internetverbindung erforderlich. Verwenden Sie den HTML-Editor, um ein Konzept zu lesen, eine Änderung auszuprobieren, das Ergebnis zu überprüfen und den Code zu speichern, auf dem Sie aufbauen möchten.