Zum Inhalt

HTML – Struktur & Semantik

  • Grundgeruest: <!doctype html>, <html>, <head>, <body>. Zweck: Dokumentrahmen, Metadaten im <head>, sichtbarer Inhalt im <body>.
  • Semantische Elemente: header, main, footer (beschreiben Inhalt); nicht semantisch: div, span. body = Rahmen, nicht inhaltsbeschreibend.
  • Standard-Elemente (Auswahl): Links/Listen/Abschnitte; Navigation oft als Liste in nav aufgebaut (siehe Nav-Beispiel unten). (aus Lernzielen)
  • Dateinamen (Konventionen): keine Leerzeichen, nicht mit Zahl starten, kleinbuchstaben ok.

Formulare – Basics

  • Bausteine: form (Container), input/textarea (Felder), button (Aktion).
  • Einfacher POST-Submit (Name + E-Mail):
<form action="https://example.com/submit" method="post">
  <label>Name <input name="name" required></label>
  <label>E-Mail <input type="email" name="email" required></label>
  <button type="submit">Senden</button>
</form>

CSS einbinden & Selektoren

  • Externe Datei einbinden (im <head>):

<link rel="stylesheet" href="style.css">
``` :contentReference[oaicite:5]{index=5}
* Selektor-Grundlagen:

  • Klasse: .klasse (Punkt) ✔️ / ID: #id (Raute)
  • Nachfahre: div p (alle p irgendwo in div)
  • Direktes Kind: div > p
  • Geschwister: p + div (direkt danach), p ~ div (spaetere Geschwister)

Box-Modell & Box-Sizing

  • Bestandteile: content + padding + border + margin. padding = innen, margin = aussen.
  • Darstellung beeinflusst Verhalten: display: inline kann Box-Verhalten aendern (Aussage „wird nicht beeinflusst“ ist falsch).

  • Box-Sizing:

  • Standard: content-box

  • Alternative: border-box (Breite inkl. Padding+Border)

  • Global sinnvoll setzen:

    *,*::before,*::after{ box-sizing:border-box; }
``` :contentReference[oaicite:9]{index=9}

Layout – Flexbox (modern)

  • Richtung: flex-direction: row | row-reverse | column | column-reverse – row = horizontal, row-reverse = horizontal umgekehrt, column = oben→unten, column-reverse = unten→oben.

  • Ausrichtung:

  • Hauptachse: justify-content (start, center, space-between …)

  • Querachse: align-items (stretch, center …)
  • Mehrzeilig: align-content (wirkt, wenn Zeilen umbrechen)
  • Flexible Layout-Kombis (praxisnah):
/* Variante A: Flex */
.wrap { display:flex; flex-wrap:wrap; }

/* Variante B: Grid */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); }

Layout – Grid (modern)

  • Spalten/Zeilen definieren:

  • Explizite Spalten: grid-template-columns

  • Implizite Spalten: grid-auto-columns
  • Implizite Zeilen: grid-auto-rows
  • column-gap steuert nur Abstand, nicht Anzahl/Groesse.
  • Items platzieren (Shorthand):
.item { grid-area: rowStart / colStart / rowEnd / colEnd; }

Navigation – Liste horizontal

  • Praxis-Variante (einfach & robust):
nav ul { display:flex; gap:.5rem; }
nav li { list-style:none; }

Responsive Design & Media Queries

  • Bedeutung & Vorgehen: Layout passt sich Geraet/Breite an; Mobile-First = Basis fuer klein, dann erweitern. (aus Lernzielen)
  • Media Query – mind. Breite (typisch Mobile-First Erweiterung):
@media (min-width:1450px){ /* Styles fuer breite Screens */ }

(„minimale Breite 1450px“ = Regel greift ab dieser Breite.) * max-width (Alternative):

@media (max-width:600px){ body{ background-color:lightblue; } }
``` :contentReference[oaicite:17]{index=17}
* Pseudoelemente: ::before/::after fuegen Inhalt am selektierten Element ein (z. B. an der Features-Section), nicht an „Elementen davor/danach im DOM“.

Validierung & Benennung (aus Lernzielen)

  • HTML/CSS Validierung: Ziel ist formal korrekte Struktur/Styles (Fehler erkennen & beheben). (aus Lernzielen)
  • Dokument-Benennung: Regeln oben beachten; konsistente, sprechende Namen verwenden.

Wichtiste sachen ganz kurz:

  • CSS einbinden: <link rel="stylesheet" href="style.css">.
  • Klassenselektor: .klasse (nicht #klasse).
  • **div p vs. div > p vs. p + div/p ~ div kennen.
  • Box-Modell: content, padding, border, margin; padding innen, margin aussen.
  • Flex-Ausrichtung: justify-content = Hauptachse.
  • Grid-Spalten: grid-template-columns (nicht column-gap).
  • Mobile-First: Basis klein, erweitern mit @media (min-width: …).