Simulic
Deutsch

HTML- und CSS-Werkstatt – Inhalt, Struktur und Gestaltung

InformatikDigitale AnwendungenAlter 17–18

Wird geladen …

Mit meiner Klasse nutzen ✨ Mit KI anpassen Problem melden

Bearbeiten Sie Inhalt, HTML-Auszeichnung und ein CSS-Stylesheet in getrennten Feldern und sehen Sie, wie sich die Seite und der DOM-Baum beim Tippen ändern. Wechseln Sie das Stylesheet, um denselben Inhalt völlig anders dargestellt zu sehen; klicken Sie auf ein Element, um die geltenden CSS-Regeln, ihre Spezifität und das Boxmodell zu sehen. Eine Prüfung meldet nicht geschlossene oder falsch verschachtelte Tags sowie ungültige CSS-Eigenschaften und -Werte. Zwei weitere Reiter zeigen ein Formular mit Browserprüfung und der gesendeten GET/POST-Anfrage sowie click- und input-Ereignisse, die die Seite verändern.

Lektion: Webseiten mit HTML und CSS erstellen: Elemente, Attribute, Selektoren, Boxmodell, Formulare und Ereignisse

Was sie zeigt

Eine Webseite hat drei Schichten. HTML zeichnet den Inhalt mit Elementen wie h1, p, ul und table aus, und der Browser macht aus der Auszeichnung einen DOM-Baum. CSS-Regeln wählen Elemente mit Selektoren (Tag, .Klasse, #id) aus und setzen Eigenschaften wie color, margin und padding; bei Konflikten entscheiden Wichtigkeit, Spezifität und Reihenfolge, und manche Eigenschaften werden vererbt. Jedes Element ist eine Box aus Inhalt, Innenabstand, Rahmen und Außenabstand. Formulare senden Name=Wert-Paare per GET oder POST an einen Server, und JavaScript-Ereignisbehandler ändern den DOM, nachdem die Seite geladen ist.

So funktioniert es

Wählen Sie unter Seite und Stil eine Beispielseite und ein Stylesheet, bearbeiten Sie dann das Feld Inhalt, HTML oder CSS und beobachten Sie Seite und DOM-Baum. Klicken Sie auf ein Element der Seite oder eine Zeile des DOM-Baums, um seine Regeln und sein Boxmodell zu sehen; ein Klick auf eine Meldung springt zur Zeile. Füllen Sie unter Formular die Felder aus und senden Sie ab, um die HTTP-Anfrage zu sehen. Bearbeiten Sie unter Ereignisse die Behandler im Feld Ereignisse (JS) und klicken Sie auf die Schaltflächen.

Einstellbare Parameter

  • Reiter Seite und Stil, Formular, Ereignisse
  • Beispielseite Artikel, Profilkarten, Tabelle
  • Stylesheet Klassisch, Modern, Dunkel, Ohne CSS
  • Formularmethode GET, POST
  • DOM-Baum anzeigen
  • Boxmodell anzeigen

Fragen zum Erkunden

  1. Warum bleibt der DOM-Baum gleich, wenn Sie das Stylesheet wechseln?
  2. Welche Regel gewinnt, #lamp oder #lamp.on, und welche Spezifität haben beide?
  3. Wo legt ein GET-Formular seine Daten ab, und warum ist das für Passwörter schlecht?

Ähnliche Simulationen