Code-Editor

Erstelle deine erste Seite

1. 01

   Öffne index.html über den Dateireiter.

2. 02

   Füge den folgenden HTML-Code in den Editor ein.

3. 03

   Unter „Vorschau“ erscheint die Überschrift Hello. Die Vorschau aktualisiert sich nach einer kurzen Schreibpause.

4. 04

   Öffne style.css und füge den folgenden CSS-Code hinzu. Die Überschrift wird blau.

5. 05

   Öffne script.js und füge den folgenden JavaScript-Code hinzu. Die Überschrift ändert sich zu It works.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <script src="script.js"></script>
</body>
</html>

h1 { color: blue; }

document.querySelector("h1").textContent = "It works";

Das Startprojekt enthält index.html, style.css und script.js. Das HTML muss die CSS- und JavaScript-Dateien einbinden, wie in diesem Beispiel. Nur weil die Dateien existieren, verwendet der Browser sie noch nicht.

Vorschau und Konsole prüfen

Unter „Vorschau“ siehst du die Seite aus deinen Dateien. Verwendet wird index.html, sofern vorhanden, sonst die erste HTML-Datei im Projekt. Lokale CSS- und JavaScript-Verweise werden aus den Projektordnern aufgelöst.

Unter „Konsole“ findest du Meldungen und Fehler aus der Vorschau. Mit console.log("Preview ready") in deinem JavaScript-Code kannst du dort eine eigene Meldung ausgeben. Gib 2 + 3 in das Eingabefeld der Konsole ein und drücke Enter, um den Ausdruck in der Vorschau auszuwerten.

Die Vorschau führt JavaScript für den Browser aus. Sie startet keinen Server, installiert keine Pakete und führt weder Python noch PHP, Java oder andere serverseitige Sprachen aus. Ein Dateityp im Erstellungsdialog erlaubt dir, eine solche Datei zu schreiben. Er bedeutet nicht, dass der Browser sie ausführen kann.

Der Code läuft in einem eigenen Vorschau-Frame mit den Einschränkungen des Browsers. Externe Skripte, Bilder oder Netzwerkanfragen in deinem Code können trotzdem andere Websites kontaktieren. Führe nur Code aus, dessen Wirkung du verstehst.

Dateien hinzufügen, umbenennen und löschen

Klicke auf „Datei hinzufügen“, wähle einen Dateityp und gib einen Namen ein. Die gewählte Endung wird automatisch ergänzt. Ist der Name schon vergeben, wird eine Nummer angehängt, damit die vorhandene Datei erhalten bleibt.

Öffne eine Datei über ihren Reiter oder ihren Namen unter „Ordner und Dateien“. Die Reiter zeigen die Dateien des ausgewählten Ordners. Mit dem Plus neben einem Ordner legst du darin eine Datei oder einen Unterordner an.

Mit dem Stift neben einer Datei benennst du sie um. Enter oder ein Klick außerhalb des Feldes speichert den Namen, Escape bricht ab. Behalte dabei die Dateiendung bei, etwa .css.

Das Kreuz am Dateireiter löscht die Datei nach einer Bestätigung. Es blendet nicht nur den geöffneten Reiter aus. Lade eine Sicherung herunter, bevor du Arbeit löschst, die du später noch brauchen könntest.

Beim Umbenennen oder Verschieben werden die Verweise im HTML nicht angepasst. Verschiebst du style.css in den Ordner assets, ändere den Verweis zu assets/style.css. Bei einem fehlerhaften Verweis fehlen in der Vorschau möglicherweise die Gestaltung oder das Skript.

Dateien in Ordnern organisieren

Öffne den Ordnerbrowser, um das Projekt zu durchsuchen. Klappe einen Ordner auf, um seinen Inhalt zu sehen, und wähle ihn aus, um seine Dateireiter anzuzeigen. „Neuer Ordner“ erstellt einen Ordner im aktuell ausgewählten Ordner.

Ziehe eine Datei oder einen Ordner auf einen anderen Ordner, um sie zu verschieben. Halte das Element auf einem Touchscreen vor dem Ziehen gedrückt. Ein Ordner lässt sich nicht in sich selbst oder einen seiner Unterordner verschieben.

Es gibt zwei Arten, einen Ordner zu löschen. „Ordner löschen“ entfernt den Ordner und verschiebt seinen Inhalt ins Hauptverzeichnis des Projekts. „Ordner samt Inhalt löschen“ löscht auch die Dateien und Unterordner. Dafür musst du DELETE eingeben. Das Hauptverzeichnis kann nicht entfernt werden.

Auf einem größeren Bildschirm hält „Als schwebendes Fenster anheften“ den Ordnerbrowser beim Bearbeiten offen. Mit Minimieren klappst du das Fenster ein, mit „Schließen“ blendest du es aus.

Arbeit in getrennten Projekten halten

„Projekte“ öffnet deine gespeicherten Projekte. Wähle eines aus, um daran weiterzuarbeiten, oder wähle „Projekt erstellen“ und gib einen Namen ein. Mit dem Stift benennst du ein Projekt um, mit der Löschaktion entfernst du es nach einer Bestätigung.

Die Projekte werden in diesem Browser auf diesem Gerät gespeichert. Die Speicheranzeige zeigt, ob die letzten Änderungen gesichert sind. Dabei wird das Projekt weder in ein Konto hochgeladen noch als Sicherungsdatei auf deinem Computer abgelegt.

„Als ZIP exportieren“ lädt das aktuelle Projekt mit seinen Dateien und Ordnern herunter. Bewahre eine Kopie auf, bevor du Browserdaten löschst, das Gerät wechselst oder Änderungen machst, die du vielleicht zurücknehmen möchtest. Der aktuelle Editor kann ein Projekt nicht aus einem ZIP wiederherstellen.

Mit einem funktionierenden Beispiel starten

Auf dem Desktop bietet „Vorlagen“ die Beispiele „Snake-Spiel“, „Taschenrechner“ und „Zeichenprogramm“. Eine Vorlage erstellt ein eigenes Projekt mit HTML, CSS und JavaScript. Deine bisherigen Projekte bleiben in der Projektliste erhalten.

Probiere die Vorschau aus, ändere eine kleine Stelle im Code und prüfe das Ergebnis. So erkennst du leichter, welche Datei welchen Teil der Seite steuert.

Mehr Platz zum Bearbeiten schaffen

Auf dem Desktop wählst du die Anordnung unter „Layout“. Ziehe vorhandene Trennlinien, um Panels zu vergrößern oder zu verkleinern, oder nutze ihre Schalter zum Minimieren und Maximieren. Auf dem Smartphone gibt es eine kompakte Anordnung von Editor und Vorschau statt der Desktop-Layoutauswahl.

„Fokusmodus“ gehört zum Editor-Layout. Escape schließt dessen Dialoge, beendet diesen Modus aber nicht. Nutze dafür erneut den Fokus-Schalter.

Code angenehmer lesen

Unter „Einstellungen“ legst du das Editor-Design, Zeilennummern, Zeilenumbruch, das automatische Schließen von Tags und Klammern sowie die Hervorhebung der aktuellen Zeile fest. „System“ folgt deinem Gerät. Mit „Dunkel“ und „Hell“ wählst du das Design direkt.

Unter „Schrift“ wählst du eine Schrift und eine Größe von 12 bis 24 Pixeln. Unter „Einrückung“ legst du die Tabulatorbreite auf zwei, vier oder acht Leerzeichen fest. Diese Einstellungen bleiben im Browser gespeichert.

„Alle Editordaten löschen“ ist eine separate Aktion unter „Einstellungen“. Sie entfernt alle Projekte, Dateien, gespeicherten Daten, Statistiken und Einstellungen. Zur Bestätigung musst du DELETE eingeben. Exportiere vorher alle Projekte, die du behalten möchtest.

Mit der Tastatur arbeiten

Wenn das Ergebnis fehlt

Bleibt die Vorschau leer, prüfe, ob das Projekt eine HTML-Datei mit sichtbarem Inhalt enthält. Fehlen der Seite Gestaltung oder Funktionen, kontrolliere die verknüpften Dateinamen und Ordnerpfade auch auf Tippfehler.

Öffne „Konsole“ und prüfe die JavaScript-Fehler. Ein Fehler kann verhindern, dass die weiteren Anweisungen in diesem Skript ausgeführt werden. Der Editor repariert den Code nicht automatisch.

Wechselt die Speicheranzeige nicht zurück zu „Gespeichert“, lass die Seite geöffnet und exportiere das Projekt vor dem Neuladen. Privates Surfen, Speicherbeschränkungen oder das Löschen von Websitedaten können dazu führen, dass gespeicherte Projekte später nicht mehr verfügbar sind.