'/%3e%3cpath%20id='cross_2'%20data-name='cross%202'%20class='cls-2'%20d='M20.612,30.43h0a5.361,5.361,0,1,0-10.723,0H0A33.709,33.709,0,0,1,30.569,0V9.75a5.361,5.361,0,1,1,0,10.723V30.43Z'%20transform='translate(67.193%200.007)%20rotate(90)'/%3e%3cpath%20id='cross_3'%20data-name='cross%203'%20class='cls-3'%20d='M20.612,30.43h0a5.361,5.361,0,1,0-10.723,0H0A33.709,33.709,0,0,1,30.569,0V9.75a5.361,5.361,0,1,1,0,10.723V30.43Z'%20transform='translate(67.186%2067.041)%20rotate(180)'/%3e%3cpath%20id='cross_4'%20data-name='cross%204'%20class='cls-4'%20d='M20.6,30.5h0a5.361,5.361,0,1,0-10.723,0H0A33.71,33.71,0,0,1,30.56,0V9.818a5.361,5.361,0,1,1,0,10.723V30.5Z'%20transform='translate(0%2067.041)%20rotate(-90)'/%3e%3c/svg%3e)
HTML-Dateien anzeigen
HTML-Dateien können Sie ohne Download direkt im Arbeitsbereich anzeigen. Um den Inhalt zu ändern, bearbeiten Sie den Quellcode.
HTML-Vorschau (Rendering)
- Öffnen Sie eine
.html-Datei, wird sie wie unten als Vorschau dargestellt.
- Bilder im selben Ordner werden so angezeigt, wie sie im HTML referenziert sind. CSS-Dateien (
<link>) und JS-Dateien aus demselben Ordner werden erst geladen, nachdem Sie die unten beschriebene Skriptausführung erlaubt haben. Stile, die direkt im HTML in<style>stehen, werden auch vor der Freigabe angewendet. Auch mit Vite oder ähnlichen Werkzeugen erzeugte Build-Ergebnisse funktionieren, wenn Sie den ganzen Ordner hochladen und die Skriptausführung erlauben. - Über
Rohdatenoben rechts sehen Sie den Originalinhalt. - Die Vorschau ist schreibgeschützt. Um den Inhalt zu ändern, wählen Sie über der Vorschau
Quelltext bearbeiten.
Interaktive Dokumente nutzen
Erlauben Sie die Skriptausführung, wird JavaScript (JS) ausgeführt, sodass HTML-Dateien mit Interaktionen wie Klicks, Animationen oder Tab-Wechseln unverändert laufen. Ohne separaten Server oder Deployment genügt es, die Datei in einen Ordner hochzuladen, damit das ganze Team sie ausführen kann.
Anwendungsbeispiele
- Prototyp-Entwürfe, bei denen sich die Ansicht per Klick auf eine Schaltfläche ändert
- Berichte mit Diagrammen oder Grafiken
- Angebote mit Interaktionen wie Tabs oder Akkordeons
Skriptausführung blockieren
Enthält eine HTML-Datei Skripte (<script>) oder Event-Handler, wird die Ausführung aus Sicherheitsgründen zunächst blockiert und über der Vorschau ein Hinweis angezeigt. Wählen Sie im Hinweis eine der folgenden Optionen, werden die Skripte ausgeführt. Hat Ihr Konto keine Ausführungsberechtigung, erscheint anstelle der Optionen der Hinweis, sich an einen Administrator zu wenden.
| Option | Beschreibung |
|---|---|
| Nur dieses Mal ausführen | Erlaubt Skripte nur, bis Sie den aktuellen Browser-Tab schließen. |
| Für diese Datei immer zulassen | Erlaubt Skripte für diese Datei in diesem Browser auch künftig automatisch. Ändert sich der Dateiinhalt, werden Sie erneut gefragt. |
HTML bearbeiten
HTML-Dateien werden ausschließlich als Quellcode bearbeitet. Ein visueller Editor mit Formatierungsschaltflächen wird nicht angeboten, und ein Doppelklick auf den Inhalt in der Vorschau wechselt nicht in den Bearbeitungsmodus.
- Wählen Sie über der Vorschau
Quelltext bearbeiten. Alternativ wählen Sie oben das Bearbeitungssymbol (Stift) oder doppelklicken unterRohdatenauf den Inhalt. - Ändern Sie den Inhalt im Code-Editor des Bildschirms
Rohdaten. MitCtrl+Fsuchen und ersetzen Sie Text. - Wählen Sie oben das Speichersymbol (Diskette) oder drücken Sie
Ctrl+S(macOS:Cmd+S), um zu speichern. - Kehren Sie zur Vorschau zurück und prüfen Sie das Ergebnis. Bei geändertem Dateiinhalt werden Sie erneut gefragt, ob Skripte ausgeführt werden dürfen.
Bearbeitet ein anderer Benutzer dieselbe Datei, können Sie die Bearbeitung nicht starten. Siehe Gemeinsamer Chat und Bearbeitungssperre.