SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:Iframe-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html> <head>
<title>Live HTML-Vorschau mit JS und CSS</title>
<style>
body {
font-family: sans-serif;
}
textarea {
width: 100%;
height: 200px;
}
iframe {
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head> <body>
Schreib Dein eigenes HTML, CSS & JavaScript!
<textarea id="editor">
<!DOCTYPE html> <html> <head>
<style>
body { background-color: lightyellow; color: #337599; font-family: sans-serif; }
h1 { text-align: center; }
</style>
</head> <body>
Hello!
<button onclick="alert('Du hast den Button im iframe angeklickt!')">Klick mich!</button>
</body> </html>
</textarea>
Vorschau:
<iframe id="preview" ></iframe>
<script>
const editor = document.getElementById("editor");
const preview = document.getElementById("preview");
function updatePreview() {
preview.srcdoc = editor.value;
}
editor.addEventListener("input", updatePreview);
// Initial render updatePreview(); </script>
</body> </html>
