HTML & CSS Spickzettel für LB2¶

HTML-Themen¶

Grundlagen & Struktur¶

Aufbau einer HTML-Seite: DOCTYPE, <html>, <head>, <body>, Meta-Tags
Inline- und Block-Elemente: <span>, <div>, Überschriften, Absätze

HTML-Semantik¶

Bedeutung semantischer Tags: <header>, <nav>, <section>, <article>, <footer>
Richtiges Einsetzen von Überschriften: H1–H6, Listen, Tabellen

Attribute¶

Verwendung von Attributen: id, class, type, name, value, placeholder bei Formularen
Barrierefreiheit und sinnvolle Nutzung von Attributen: alt bei Bildern

Formulare¶

Aufbau und Struktur von Formularen: <form>, <label>, <input>, <textarea>, <select>
Formular-Attribute: Action, Method, Name
Validierung: Grundzüge und Einsatz des W3C Validators

Allgemeine Webdesign-Themen¶

Sinnvolle Gliederung einer Seite
Navigations-Struktur: HTML-Navigation anlegen

CSS-Themen¶

Selektoren & Eigenschaften¶

Grundlegende Selektoren: Element-, Klassen-, ID-Selektoren
Erweiterte Selektoren: Kindselektoren, Geschwisterselektoren
Verwendung von CSS-Attributen: Farbe, Hintergrund, Schrift

Box-Modell¶

Padding, Margin, Border, Content
Verständnis für den Platzbedarf und das Layouten von Elementen

Inline- und Block-Elemente¶

Unterschied zwischen display: inline, display: block, display: inline-block

Positionierung & Float¶

position: static, relative, absolute, fixed, sticky
Floats und Clearen: float: left; clear: both;

Layout-Techniken¶

Flexbox: Container und Items, Achsen, justify-content, align-items
CSS Grid: Container, Rows, Columns, grid-template-Eigenschaften
Kombination aus Flexbox und Grid

CSS-Styling für horizontale/vertikale Navigation
Hover-Effekte, aktive Zustände

Farben & "Kunterbunt"¶

Farbdefinition: Hex, RGB, RGBA, HSL
Hintergrundgestaltung, Textfarben

Responsive Webdesign¶

Media Queries: Breakpoints, unterschiedliche Bildschirmgrößen
Mobile-First-Ansatz
Responsives Layout mit Flexbox/Grid

Repetition / Zusammenfassung¶

Allgemeines Anwenden von CSS auf einer fertigen HTML-Struktur
Optimierung/Anpassung für verschiedene Endgeräte

Nützliche Ressourcen¶

Erweiterte HTML-Konzepte¶

Multimedia-Elemente¶

Audio: <audio controls src="audio.mp3"></audio>
Video: <video controls src="video.mp4"></video>

Tabellen¶

<table>
    <tr>
        <th>Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max</td>
        <td>30</td>
    </tr>
</table>

Erweiterte CSS-Konzepte¶

Selektoren und Spezifität¶

Attributselektor: input[type="text"] { border: 1px solid #ccc; }
Pseudoklassen: a:hover { color: red; }

Layout-Techniken¶

Flexbox: display: flex; justify-content: space-between;
Grid: display: grid; grid-template-columns: repeat(3, 1fr);

Responsive Design¶

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

Animationen¶

@keyframes slidein {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}

.element {
    animation: slidein 3s ease-in-out;
}

Box-Modell mit Bild¶

CSS-Variablen¶

:root {
    --main-color: #06c;
}

body {
    color: var(--main-color);
}

Nützliche Ressourcen¶

Fortgeschrittene HTML-Konzepte¶

Semantische Elemente¶

<header>: Kopfbereich einer Seite
<footer>: Fußbereich einer Seite
<article>: Eigenständiger Inhalt
<section>: Thematische Gruppierung

Meta-Tags und SEO¶

<meta name="description" content="Beschreibung der Seite">
<meta name="keywords" content="HTML, CSS, Webentwicklung">

Canvas und SVG¶

Canvas: <canvas id="myCanvas"></canvas>
SVG: <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>

IFrames¶

<iframe src="https://example.com" width="600" height="400"></iframe>

Fortgeschrittene CSS-Konzepte¶

CSS-Architektur¶

BEM: Block, Element, Modifier
OOCSS: Objektorientiertes CSS

CSS-Frameworks¶

Bootstrap: Schnelle Entwicklung mit vorgefertigten Komponenten
Tailwind: Utility-First CSS Framework

CSS-Methodologien¶

SMACSS: Scalable and Modular Architecture for CSS
ITCSS: Inverted Triangle CSS

Fortgeschrittene Animationen¶

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

.bounce {
    animation: bounce 2s infinite;
}

CSS-Hacks und Browser-Kompatibilität¶

CSS-Hacks: Spezielle Techniken zur Umgehung von Browserproblemen
Autoprefixer: Automatische Präfixe für CSS-Eigenschaften

Nützliche Ressourcen¶

Can I use: Überprüfen der Browser-Kompatibilität
CSS Grid Layout

Detaillierte CSS-Konzepte¶

Float und Clear¶

Float: Elemente können links oder rechts im Container schweben.

.float-left {
    float: left;
}
.float-right {
    float: right;
}

Clear: Verhindert, dass nachfolgende Elemente um ein gefloatetes Element fließen.
```
.clear-both {
    clear: both;
}
```

Box-Modell¶

Margin: Außenabstand eines Elements.
Border: Rahmen eines Elements.
Padding: Innenabstand zwischen Inhalt und Rahmen.
Content: Der eigentliche Inhalt des Elements.

Positionierung¶

Static: Standardpositionierung, folgt dem normalen Dokumentenfluss.

Relative: Bewegt sich relativ zu seiner normalen Position.

.relative {
    position: relative;
    top: 10px;
    left: 10px;
}

Absolute: Positioniert relativ zum nächsten positionierten Vorfahren.

.absolute {
    position: absolute;
    top: 20px;
    left: 20px;
}

Fixed: Bleibt relativ zum Ansichtsfenster.

.fixed {
    position: fixed;
    top: 0;
    right: 0;
}

Sticky: Wechselt zwischen relative und fixed, je nach Scrollposition.
```
.sticky {
    position: sticky;
    top: 0;
}
```

Grid¶

Grid-Container: Definiert ein Rasterlayout.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

Grid-Items: Elemente innerhalb des Rasters.

.grid-item {
    grid-column: span 2;
}

HTML-Konzepte¶

Buttons:
Buttons sind interaktive Elemente, die Aktionen auslösen können, wie das Absenden eines Formulars oder das Ausführen von JavaScript.
```
<button type="button" onclick="alert('Button geklickt!')">Klick mich!</button>
```
Tabellen:

Tabellen strukturieren Daten in Zeilen und Spalten.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max</td>
        <td>30</td>
    </tr>
</table>

Verlinkungen:

Links navigieren zu anderen Seiten oder Ressourcen.

<a href="https://example.com" target="_blank">Besuche Example.com</a>

Formulare:

Formulare sammeln Benutzereingaben und senden sie an einen Server.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <input type="submit" value="Absenden">
</form>

Bilder:

Bilder werden mit dem <img>-Tag eingebunden.

<img src="bild.jpg" alt="Beschreibung des Bildes" width="300">

CSS-Konzepte¶

Selektoren:

Selektoren bestimmen, welche HTML-Elemente von CSS-Regeln betroffen sind.

p { color: blue; } /* Elementselektor */
.klasse { font-size: 14px; } /* Klassenselektor */
#id { margin: 10px; } /* ID-Selektor */

Box-Modell:

Das Box-Modell beschreibt die Struktur eines Elements.

.box {
    margin: 10px;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

Positionierung:

Positionierung legt fest, wie ein Element im Dokument platziert wird.

.relative {
    position: relative;
    top: 10px;
    left: 10px;
}

Flexbox:

Flexbox ist ein Layout-Modell, das flexible Layouts ermöglicht.

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

Grid:

Grid ist ein leistungsstarkes Layout-System für komplexe Designs.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

Responsive Design:

Media Queries passen das Layout an verschiedene Bildschirmgrößen an.

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

Animationen:

CSS-Animationen ermöglichen Übergänge und Bewegungen.

@keyframes slidein {
    from { transform: translateX(0%); }
    to { transform: translateX(100%); }
}
.element {
    animation: slidein 3s ease-in-out;
}

CSS-Variablen:

Variablen ermöglichen die Wiederverwendung von Werten in CSS.

:root {
    --main-color: #06c;
}
body {
    color: var(--main-color);
}

Diese umfassende Dokumentation soll dir helfen, alle wichtigen und fortgeschrittenen Konzepte von HTML und CSS zu verstehen und anzuwenden. Viel Erfolg bei deiner Prüfung!

HTML & CSS Spickzettel für LB2¶

HTML-Themen¶

Grundlagen & Struktur¶

HTML-Semantik¶

Attribute¶

Formulare¶

Allgemeine Webdesign-Themen¶

CSS-Themen¶

Selektoren & Eigenschaften¶

Box-Modell¶

Inline- und Block-Elemente¶

Positionierung & Float¶

Layout-Techniken¶

Navigation & Menügestaltung¶

Farben & "Kunterbunt"¶

Responsive Webdesign¶

Repetition / Zusammenfassung¶

Nützliche Ressourcen¶

Erweiterte HTML-Konzepte¶

Multimedia-Elemente¶

Tabellen¶

Erweiterte CSS-Konzepte¶

Selektoren und Spezifität¶

Layout-Techniken¶

Responsive Design¶

Animationen¶

Box-Modell mit Bild¶

CSS-Variablen¶

Nützliche Ressourcen¶

Fortgeschrittene HTML-Konzepte¶

Semantische Elemente¶

Meta-Tags und SEO¶

Canvas und SVG¶

IFrames¶

Fortgeschrittene CSS-Konzepte¶

CSS-Architektur¶

CSS-Frameworks¶

CSS-Methodologien¶

Fortgeschrittene Animationen¶

CSS-Hacks und Browser-Kompatibilität¶

Nützliche Ressourcen¶

Detaillierte CSS-Konzepte¶

Float und Clear¶

Box-Modell¶

Positionierung¶

Grid¶

HTML-Konzepte¶

CSS-Konzepte¶