📚 HTML Grundlagen – Zusammenfassung¶

Block 1:¶

HTML (HyperText Markup Language) ist die Basis jeder Webseite und definiert die Struktur des Inhalts. Es beschreibt, welche Elemente eine Webseite enthält, wie z. B. Texte, Bilder, Links und Tabellen.

1. Was ist HTML?¶

HTML ist eine Auszeichnungssprache, keine Programmiersprache. Sie besteht aus Tags, die den Inhalt einer Webseite strukturieren. Ein einfaches Beispiel für HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Dies ist meine erste Webseite.</p>
</body>
</html>

2. Die Struktur einer HTML-Seite¶

Eine HTML-Datei besteht aus folgenden Hauptbestandteilen: - <!DOCTYPE html> → Gibt an, dass es sich um eine HTML5-Datei handelt. - <html> → Das Wurzelelement der Seite. - <head> → Enthält Metadaten (z. B. Titel, Schriftarten, CSS-Links). - <body> → Der sichtbare Inhalt der Webseite.

3. Die wichtigsten HTML-Tags¶

Textstrukturierung¶

HTML bietet verschiedene Tags zur Strukturierung von Text: - Überschriften: <h1> bis <h6> (von wichtigster bis unwichtigster Überschrift) - Absätze: <p> (Absätze von Text) - Listen: - <ul> (ungeordnete Liste → Bullet Points) - <ol> (geordnete Liste → nummeriert) - <li> (Listenelement) - Links: <a href="https://example.com">Text</a> (verlinkt eine Seite) - Bilder: <img src="bild.jpg" alt="Beschreibung">

Tabellen¶

Tabellen werden mit <table> erstellt:

<table>
    <tr> <!-- Tabellenzeile -->
        <th>Name</th> <!-- Spaltenüberschrift -->
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max</td> <!-- Tabelleninhalt -->
        <td>25</td>
    </tr>
</table>

Formulare (Benutzereingaben)¶

Formulare ermöglichen die Eingabe von Daten durch den Nutzer:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Senden</button>
</form>

4. HTML5 & Semantische Elemente¶

Mit HTML5 wurden semantische Tags eingeführt, die den Code besser lesbar machen und SEO verbessern: - <header> → Kopfbereich einer Seite oder eines Abschnitts - <nav> → Navigation - <article> → Eigenständiger Artikel - <section> → Abschnitt mit zusammengehörigen Inhalten - <footer> → Fußzeile

Warum sind semantische Tags wichtig?¶

✅ Bessere Lesbarkeit für Entwickler
✅ Barrierefreiheit für Screenreader
✅ SEO-Optimierung durch klare Struktur

5. Webdesign & Layout-Techniken¶

HTML definiert nur die Struktur, für das Aussehen nutzt man CSS. Zwei moderne Layout-Techniken in CSS sind:

📌 Flexbox¶

Flexbox ermöglicht eine flexible Anordnung von Elementen in einer Zeile oder Spalte.

.container {
    display: flex;
    justify-content: space-between;
}

📌 CSS Grid¶

Grid ermöglicht komplexe Layouts mit Spalten und Zeilen:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Noch mehr Theorie¶

Alles aus deinem PDF/Lernzielen – als Theorie-Zusammenfassung, ohne erkennbare Testbezuge. Klar strukturiert, mit Code dort wo sinnvoll. ⚡

🧱 HTML – Struktur & Semantik¶

Grundgeruest: <!doctype html>, <html>, <head>, <body> (Head = Metadaten/Einbindung, Body = sichtbarer Inhalt).
Semantische Elemente: <header>, <main>, <footer>; nicht semantisch: div, body. Ziel: Inhalt logisch gliedern und Bedeutung transportieren.
Dateinamen (Konventionen): keine Leerzeichen, nicht mit Zahl beginnen, Kleinbuchstaben sind ok.

🎨 CSS – Einbindung & Selektoren¶

Externe CSS-Datei einbinden (im <head>):

<link rel="stylesheet" href="style.css">

Grundlegende Selektoren:
Klasse: .klasse (Punkt + Name)
ID: #id (Raute)
Nachfahre: div p (alle p innerhalb von div, egal wie tief)
Direktes Kind: div > p (nur unmittelbare Kinder)
Geschwister: p + div (direkt folgend), p ~ div (spaetere Geschwister)
Kurzmerker: Klassenselektor = Punkt, nicht #.

📦 Box-Modell & Box-Sizing¶

Bestandteile: content + padding + border + margin. padding = innen, margin = aussen.
Darstellung kann Verhalten aendern: Aussagen wie „wird nicht von display: inline beeinflusst“ sind falsch.
Box-Sizing:
Standard: content-box
Alternative: border-box (Groesse inkludiert Padding+Border)
Global setzen (alle Elemente):
```
*, *::before, *::after { box-sizing: border-box; }
```
(Universal-Selektor fuer „alle“ ist ausdruecklich thematisiert.)

🧩 Layout – Flexbox (Ausrichtung & Richtung)¶

Richtung (flex-direction): row = horizontal, row-reverse = horizontal umgekehrt, column = oben→unten, column-reverse = unten→oben.
Ausrichtung auf der Hauptachse: justify-content (z. B. start, center, space-between). (Eigenschaft wird gezielt nach „Hauptachse“ abgefragt.)

🧱 Layout – Grid (Spalten, Zeilen, Platzierung)¶

Spalten beeinflussen: grid-template-columns (explizit), grid-auto-columns (implizit erzeugte Spalten). column-gap regelt nur Abstand, nicht Anzahl/Groesse.
Zeilen implizit definieren: grid-auto-rows richtet sich am Inhalt aus, ohne Items explizit zu platzieren.
Grid-Bereich platzieren (Shorthand):

.item { grid-area: rowStart / colStart / rowEnd / colEnd; }

(Die Aufgabenstellung verlangt genau diese 4-wertige Schreibweise.) * Mehrspaltiges Layout erstellen/verwalten: grid-template-columns ist die gefragte Eigenschaft (nicht flex-direction, nicht float, nicht column-gap).

Menues werden haeufig als Liste notiert; fuer nebeneinander braucht es passende Display/Layout-Eigenschaften (z. B. Flex). (In der Pruefung wird explizit mit display in einem nav li {}-Block gearbeitet.)

📱 Responsive Design & Media Queries¶

Mobile-First Vorgehen: Basis-Styles fuer kleine Ansichten, dann erweitern mit Media Queries. (So wird es im Test direkt erfragt.)
Minimale Breite (greift ab X Pixel):

„minimale Breite von 1450 Pixeln“ → Regel gilt ab 1450 px. * Beispiel für max-width:

@media (max-width: 600px) {
  body { background-color: lightblue; }
}

(Konzept wird 1:1 im Testtext gezeigt.) * Pseudoelemente ::before/::after: wirken am selektierten Element (z. B. an der Features-Section), nicht an Elementen „davor/danach“. (Genau diese Fehlinterpretation wird geprueft.)

📝 Formulare – Grundbausteine¶

Tags, die zu einem Formular gehoeren: <form>, <input>, <button> (Textarea ist moeglich, aber nicht zwingend).
Einfacher POST-Submit (Name + E-Mail an URL):

<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>

(Genau dieses Szenario wird explizit genannt.)

📚 CSS – Grundwissen in Statements¶

CSS = „Cascading Style Sheets“.
Externe Datei einbinden: <link rel="stylesheet" href="style.css">.
Mehrspaltige Layouts: ueber Grid-Spalten; column-gap nur Abstand.
Box-Modell-Eigenschaften: content, padding, border, margin; display gehoert nicht dazu.

🔍 Selektor-Feinheiten (haeufig geprueft)¶

„p in div“: div p (alle Nachfahren) vs. div > p (nur direkte Kinder). Geschwister sind nicht „p in div“: p + div / p ~ div.

💡 Mini-Checkliste zum Durchgehen (vor dem Test)¶

Struktur parat? html/head/body, semantische Tags sicher.
Selektoren sicher? .klasse, #id, div p vs. div > p, Geschwisterformen.
Box-Modell sitzt? content/padding/border/margin; padding innen, margin aussen; Box-Sizing verstanden.
Flex-Basics? flex-direction Deutungen und justify-content = Hauptachse.
Grid-Basics? grid-template-columns, grid-auto-columns, grid-auto-rows, grid-area-Syntax.
Responsive? Mobile-First, min-width/max-width richtig einordnen, Pseudoelemente korrekt verstehen.
Formular? form, input, button; Action+Method Prinzip kapiert.