Eine kleine Webseite anklicken: dein erster Versuch im HTML-Spielplatz

Vom Textfeld zum sichtbaren Knopf

HTML beschreibt, was auf einer Webseite steht. Im Webseiten-Spielplatz kannst du einen kleinen HTML-Text einsetzen und direkt in einer eingebetteten Vorschau betrachten. Ein Titel wird sichtbar, ein Knopf lässt sich anklicken und ein kurzer Text zeigt sich darunter.

Das ist ein guter Ort zum Üben. Die Vorschau wird in einem abgeschirmten Rahmen geöffnet. Skripte im Beispiel dürfen dort laufen. Daraus wird weder automatisch eine veröffentlichte Website noch ein richtiges Benutzerkonto, ein Shop oder ein angebundenes Adminsystem.

Dein erstes kleines Beispiel

Kopiere diesen Text in das HTML-Feld:

<h1>Meine erste Seite</h1>
<p>Heute probiere ich einen Knopf aus.</p>
<button onclick="this.textContent='Geschafft!'">
  Klick mich
</button>

Klicke auf Vorschau öffnen. Suche den Knopf in der Ergebnisansicht und tippe darauf. Sein Text ändert sich zu „Geschafft!“. Damit siehst du den Unterschied zwischen der Beschreibung im Eingabefeld und dem sichtbaren Ergebnis im Browser.

Verändere immer nur eine Sache

• Ändere zuerst den Titel und öffne die Vorschau erneut.
• Ändere danach den kurzen Erklärungstext.
• Ändere zuletzt die Beschriftung des Knopfes.

Wenn du nur eine Sache auf einmal veränderst, kannst du leichter erkennen, welche Eingabe zu welchem Ergebnis geführt hat. Das hilft auch später bei größeren Projekten.

Was mit Dateien und Formularen passiert

Die Vorschau kann einfache HTML-Inhalte und Skripte darstellen. Sie besitzt aber keinen eigenen Server für deine Anwendung. Ein Formular, das echte Nachrichten verschicken oder Daten dauerhaft speichern soll, braucht zusätzliche Programmierung und passende Serverfunktionen.

Verwende nur Beispiele, deren Inhalt du verstehst oder sorgfältig prüfen lässt. Eine Abschirmung macht unbekannten Code nicht automatisch vertrauenswürdig. Skripte und externe Bilder können zum Beispiel Netzwerkanfragen auslösen. Setze daher keine Passwörter oder vertraulichen Inhalte in ein fremdes Beispiel.

So sicherst du die richtige Fassung

Behalte den HTML-Quelltext zusätzlich in einer eigenen Textdatei. Der Knopf Als Text laden lädt beim Spielplatz die sichtbare Ergebnisdarstellung und ist kein vollständiger Website-Export. Für deinen Code kopierst du deshalb den Inhalt aus dem ursprünglichen HTML-Feld.

Wenn du später ein richtiges Projekt daraus machen möchtest, schreibe auf, welche Funktionen fehlen: Navigation, Smartphone-Ansicht, Formulare, Datenspeicherung und Veröffentlichung. So weiß ein Entwickler genau, was gebaut werden soll.

Merksatz: Im Spielplatz siehst du deine Idee und kannst kleine Dinge anklicken. Eine vollständige Online-Anwendung entsteht erst mit den dafür nötigen Funktionen.