Theorietest HTML/CSS

Theorietest HTML/CSS – Kompakt-Zusammenfassung¶

Diese Seite deckt die Lernziele aus dem Screenshot ab: HTML-Dokumentaufbau, semantische Elemente, Standard-Elemente (Links/Listen/Tabellen/Bilder), Block- vs. Inline-Elemente, Validierung, Namensgebung; CSS-Einbindung, Selektoren & Eigenschaften, Box‑Modell, Layout (Grid/Float/Flexbox), Validierung, Responsive Design & Media Queries.

Lernziele-Checkliste (zum Abhaken)¶

1) Grundlagen von HTML¶

1.1 Dokumentaufbau (Grundstruktur)¶

Doctype deklariert HTML5; <html lang="de"> setzt Sprache.
Kopfbereich <head> enthält Metadaten, Titel und Ressourcenkopplung.
Sichtbarer Inhalt kommt in <body>.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Seitentitel</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>Inhalt …</body>
</html>

Prinzipien: Trennung von Struktur (HTML), Darstellung (CSS), Verhalten (JS). Zugänglichkeit (Alt‑Texte, korrekte Überschriften‑Hierarchie h1…h6).

1.2 Semantische Elemente (bessere Strukturierung)¶

Verleihen Bedeutung statt nur Layout: header, nav, main, section, article, aside, footer, figure, figcaption.

<header>
  <nav>…</nav>
</header>
<main>
  <section aria-labelledby="thema">
    <h2 id="thema">Thema</h2>
    <article>…</article>
  </section>
</main>
<footer>Kontakt</footer>

1.3 Standard‑Elemente (Links, Listen, Tabellen, Bilder)¶

Links: <a href="/ziel">Text</a>; mit target="_blank" rel="noopener" für neue Tabs.
Listen: ul/ol mit li.
Tabellen: table, thead, tbody, tr, th, td, caption.
Bilder: <img src="bild.jpg" alt="Beschreibung"> (Alt ist Pflicht für Barrierefreiheit).

1.4 Block‑ vs. Inline‑Elemente (Darstellungsart)¶

Block: nimmt gesamte Breite, beginnt neue Zeile (div, p, section, ul, table, h1…h6).
Inline: nur notwendige Breite im Textfluss (span, a, strong, em, img).

1.5 Formulare & Validierung (HTML)¶

Gebaute Validierung: Attribute required, type, min, max, minlength, maxlength, pattern, step.

<form>
  <label>Email <input type="email" required></label>
  <label>PLZ <input pattern="\d{4,5}" title="4–5 Ziffern"></label>
  <button>Absenden</button>
</form>

1.6 Namensgebung von Dokumenten (Best Practices)¶

Kleinbuchstaben, Bindestriche statt Leerzeichen (ueber-uns.html).
Sprechende Dateinamen und Ordnerstruktur; Assets in img/, styles/, js/.

2) Grundlagen von CSS¶

2.1 CSS-Einbindung (extern, intern, inline)¶

Extern (Best Practice): <link rel="stylesheet" href="styles.css">
Intern: <style> … </style> im head.
Inline: style="color:red" – nur ausnahmsweise.

2.2 Selektoren & Eigenschaften (Klassen, IDs, Attribute)¶

Grundprinzipien der Kaskade und Spezifität:

Reihenfolge: später definierter Stil gewinnt, wenn Spezifität gleich ist
Spezifität: ID > Klasse/Attribut/Pseudoklasse > Element/Pseudoelement
!important überstimmt alles – sparsam einsetzen

Beispiele für Selektoren und Kombinatoren:

/* Elementselektor */
p { margin-bottom: 1rem; }

/* Klassenselektor */
.note { background: #fffae6; }

/* ID-Selektor */
#header { position: sticky; top: 0; }

/* Attributselektor */
input[type="email"] { border-color: #0a7; }

/* Kombinatoren */
main p { color: #333; }      /* Nachfahre */
ul > li { list-style: disc; } /* direktes Kind */
h2 + p { font-weight: 600; }  /* direkter Nachbar */
h2 ~ p { opacity: .9; }       /* allgemeiner Nachbar */

Element: p {}
Klasse: .karte {} (mehrfach nutzbar)
ID: #header {} (einmalig pro Seite)
Attribut: input[type="email"] {}
Kombinatoren: Nachfahre main p, Kind ul > li, Nachbar h2 + p.

.karte { margin: 1rem; padding: .5rem; border: 1px solid #ccc; }
#header { background: #f8f9fa; }
input[required] { outline: 2px solid #ffcc00; }
h2 + p { font-weight: 600; }

Wichtige Eigenschaften: color, background, margin, padding, border, width/height, font-*, display.

2.3 Box‑Modell (content, padding, border, margin)¶

Gesamtbreite = margin-left/right + border-left/right + padding-left/right + content-width. Mit box-sizing: border-box; zählen padding und border in die definierte Breite.

* { box-sizing: border-box; }
.box { width: 200px; padding: 16px; border: 2px solid #333; margin: 12px; }
/* Visualisierung hilfreich: DevTools → Layout/Box Model */

2.4 Layout-Techniken (Grid, Float, Flexbox)¶

Float (historisch, noch prüfungsrelevant)¶

.bild-links { float: left; margin: 0 1rem 1rem 0; }
.clearfix::after { content: ""; display: table; clear: both; }

<div class="clearfix">
  <img class="bild-links" src="img.jpg" alt="…">
  <p>Text fließt um das Bild …</p>
  <p>Weitere Inhalte …</p>
  </div>

Flexbox (ein‑dimensionale Ausrichtung)¶

.row { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.col { flex: 1; }

Grid (zwei‑dimensionales Raster)¶

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid > div { background: #eee; padding: 12px; }

2.5 Responsive Design & Media Queries (Vorgehen)¶

@media (max-width: 768px) {
  .row { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
  html { font-size: 15px; }
}

Vorgehen:

Mobile‑First: Basis‑Styles für kleine Geräte schreiben, dann stufenweise erweitern
Breakpoints nach Inhalt wählen (nicht nach Gerät): z. B. 480px, 768px, 1024px
Relative Einheiten nutzen (rem, %, vw), Bilder/Videos responsiv (max-width: 100%)

Best Practices: Mobile‑First, relative Einheiten (rem, %), responsive Bilder (max-width:100%).

2.6 CSS‑Validierung & Qualität¶

Verwende den W3C CSS Validator.
Konsistente Namenskonventionen (BEM optional: block__element--modifier).
Keine IDs für Styling, Klassen bevorzugen.

2.7 Einheiten, Farben & Shorthands¶

Einheiten: px (absolut), em (relativ zum Element), rem (zur Root), %, vw/vh, fr
Farben: Hex #333, rgb(51,51,51), hsl(0 0% 20%); Transparenz via rgba/hsla oder #RRGGBBAA
Shorthands: margin: 10px 20px; (TB LR), border: 1px solid #ccc;, background: url(img) center/cover no-repeat

.hero {
  height: 50vh;
  padding: 2rem 1rem;
  color: hsl(0 0% 98%);
  background: url('header.jpg') center/cover no-repeat;
}

2.8 Positionierung & Anzeige (display/position/z-index/overflow)¶

display: block, inline, inline-block, flex, grid, none
position: static, relative, absolute, fixed, sticky
z-index: nur bei nicht‑static relevant; Stacking‑Contexts beachten
overflow: visible, hidden, scroll, auto

.badge { position: absolute; top: .5rem; right: .5rem; }
.navbar { position: sticky; top: 0; z-index: 10; }

2.9 Typografie & Abstände¶

font-family, font-size, font-weight, line-height, letter-spacing
Lesbarkeit: Kontrast, line-height: 1.4–1.7, Zeilenlänge ~60–80 Zeichen
Abstände: margin vs. padding; Rhythmus in rem

html { font-size: 16px; }
body { font: 400 1rem/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
h1 { font-size: clamp(1.8rem, 2.5vw, 2.4rem); }

2.10 Transitions & kurze Animationen¶

.btn { background: #0a7; color: #fff; transition: background .2s ease; }
.btn:hover { background: #096; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.toast { animation: fadeIn .4s ease-out; }

2.11 CSS‑Variablen (Custom Properties)¶

:root { --brand: #0a7; --radius: 8px; }
.card { border-radius: var(--radius); }
.btn-primary { background: var(--brand); }

2.12 Debugging & Tools¶

DevTools: Inspektor, Layout‑Overlays (Flex/Grid), Responsive Mode
Lighthouse/Checks, CSS‑Reset/Normalize

Sinnvolle alt‑Texte (dekorativ: alt="")
Formulare mit label for/id, required, verständlichen Fehlermeldungen
Überschriften‑Hierarchie, sichtbarer Tastatur‑Fokus

2.14 Typische Prüfungsfallen¶

Falscher Doctype/fehlendes lang
img ohne alt, a ohne sinnvollen Linktext
IDs für Styling → zu hohe Spezifität
Fixed Layout ohne Breakpoints → mobil kaputt
Ungültiges Markup (nicht geschlossene/verschachtelte Tags)

4) Kurze Übungen¶

Seite mit header/nav/main/section/footer und einem article bauen.
3‑Spalten‑Grid, das unter 768px auf 1 Spalte fällt.
Formular mit label, input[type=email], required, pattern erstellen.
Karte mit Bild (img + alt), Überschrift, Text, Button mit Hover‑Transition.

Glossar (kurz)¶

Semantik: inhaltliche Bedeutung durch passende Tags
Spezifität: Regel, die bestimmt, welcher Stil gewinnt
Box‑Modell: content → padding → border → margin
Mobile‑First: zuerst kleine Screens, dann erweitern
Clearfix: Float‑Rückfluss verhindern

3) Mini‑Cheat‑Sheet (zum schnellen Nachschlagen)¶

HTML Grundgerüst: siehe 1.1.
Semantik: nutze header/nav/main/section/article/footer statt div‑Wüste.
Bilder immer mit sinnvollem alt.
Liste: ul > li*3 erzeugt drei Einträge.
CSS Reihenfolge: Layout zuerst (Display/Flex/Grid) → Box‑Modell → Typografie → Farben/Abstände.
Debug: DevTools – Box‑Modell, Flex/Grid‑Overlay, Responsive Mode.

Stand: {{ config.site_name }} – konzentriert auf Prüfungsstoff Block 03.

Theorietest (PDF)¶

PDF in neuem Tab öffnen · PDF herunterladen

Theorietest HTML/CSS