HTMLWiki.de: Spielwiese
HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Die HTML-Spielwiese

Hier kannst du HTML direkt im Browser ausprobieren: Code oben eintippen, auf den Knopf drücken, Ergebnis unten ansehen. Nichts wird gespeichert, nichts kann kaputtgehen, und niemand schaut zu. Genau so lernt man am schnellstn.

Ergebnis

Ideen zum Ausprobieren

  • Bau einen Link: <a href="https://www.htmlwiki.de/">zum Wiki</a>
  • Probier eine kleine Tabelle oder eine nummerierte Liste.
  • Style per style-Attribut herum: style="background: #FFFFCC; padding: 10px;". Für echte Projekte gehört CSS zwar in eine Datei (warum), zum Experimentieren ist inline völlig okay.
  • Bau absichtlich einen Fehler ein (schließendes Tag weglassen) und schau was der Browser draus machtt.

Wie die Spielwiese funktioniert (und warum sie sicher ist)

Dein Code landet in einem iframe mit gesetztem sandbox-Attribut, also in einem abgeschotteten Mini-Dokument: Skripte werden dort nicht ausgeführt und dein Code kann die Seite drumherum nicht verändern. Deshalb funktionieren hier HTML und CSS, aber kein JavaScript, das ist Absicht und der Grund warum du hier gefahrlos alles reinwerfen kannst was du willst. Gespeichert wird nichts: Seite neu laden, Feld ist wieder im Anfangszustand.

Vom Spielen zum Bauen

Die Spielwiese ist bewusst als Nullschwellen-Einstieg gebaut: kein Konto, kein Speichern, keine Konsequenzen. Genau deshalb eignet sie sich für die Momente, in denen du beim Lesen eines Artikels denkst "Moment, stimmt das wirklich?", Codeschnipsel aus der Referenz hierher kopieren, verändern, kaputtmachen, verstehen. Das ist exakt die Lernmethode aus der Frühzeit des Webs, nur ohne den Umweg über den Texteditorr.

Sobald etwas Bleibendes entstehen soll, wechselst du in den richtigen Arbeitsmodus: eine echte Datei im Texteditor, gespeichert als index.html, geöffnet im Browser. Wie das geht, zeigt Teil 1 des Tutorials in einer Viertelstunde, und ab dann wächst dein Projekt Datei für Datei, so wie im Kapitel Dateien und Ordner beschrieben. Die Spielwiese bleibt daneben das, was ihr Name verspricht: der Ort für schnelle Experimente zwischendurchh.

Genug gespielt? Der Tutorial-Fahrplan wartet, oder du schlägst Elemente in der Referenz nach.