Test 1

Zusammenfassung V293 Theorietest¶

Inhaltsverzeichnis¶

HTML¶

Dokumentaufbau

Element	Bedeutung
`<html>`	Umfasst die ganze HTML-Seite
`<head>`	Enthält Metadaten, Titel, CSS-Links, Skripte
`<body>`	Enthält den sichtbaren Inhalt der Webseite

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Flips Seite</title>
</head>
<body>
    <h1>Willkommen auf Flips Webseite</h1>
    <p>Dies ist ein Beispieltext.</p>
</body>
</html>

<html> → orange Rahmen außen (zeigt die Seite insgesamt)
<body> → grüner gestrichelter Rahmen
<header> → blauer Block mit Beschriftung <header>
<main> → hellblauer Block mit Beschriftung <main>
<p> → eigener Block innerhalb von <main>

Semantik

Tag	Bedeutung
`<header>`	Kopfbereich, z. B. Navigation oder Titel
`<footer>`	Fussbereich, z. B. Impressum oder Kontakt
`<main>`	Hauptinhalt der Seite
`<section>`	Abschnitt eines Themas oder Artikels
`<article>`	Eigenständiger Beitrag oder Artikel
`<nav>`	Navigation (Menü, Links)

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Semantik sichtbar machen</title>
    <link rel="stylesheet" href="/css$/style.css">
</head>
<body>
    <header> (1)
        <h1>Meine Webseite</h1>
    </header>

    <nav> (2)
        <a href="#home">Home</a>
        <a href="#about">Über mich</a>
    </nav>

    <main> (3)
        <section>  (4)
            <h2>Willkommen</h2>
            <p>Hier steht der Hauptinhalt.</p>
            <div class="image1">
                <img src="images/R.png" alt="67 Bild">
            </div>

        </section>
    </main>

    <footer>  (5)
        <p>© 2025 Meine Webseite</p>
    </footer>
</body>
</html>

Standardelemente

Element	Beispiel	Verwendung
Link	`<a href="https://example.com">Klick mich</a>`	Verlinkung zu anderen Seiten
Liste	`<ul><li>Item 1</li><li>Item 2</li></ul>`	Ungeordnete Liste
Geordnete Liste	`<ol><li>Erster Punkt</li><li>Zweiter Punkt</li></ol>`	Nummerierte Liste
Tabelle	`<table>...</table>`	Daten in Tabellenform
Bild	`<img src="bild.jpg" alt="Beschreibung">`	Bilder einfügen
Überschrift	`<h1>Meine Überschrift</h1>`	Titel oder Untertitel auf der Seite
Absatz	`<p>Dies ist ein Absatz.</p>`	Textabschnitte schreiben
Button	`<button>Klick mich</button>`	Interaktive Schaltfläche
Formular	`<form><input type="text"></form>`	Benutzereingaben sammeln
Bildlink	`<a href="seite.html"><img src="bild.jpg" alt="Bild"></a>`	Bild als Link nutzen

<table border="1">
    <tr>
        <th>Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Philipp</td>
        <td>17</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>15</td>
    </tr>
</table>

Block- und Inline-Elemente

Typ	Element	Beschreibung
Block	`<div>`	Erstellt einen eigenen Block, nimmt ganze Zeile ein
Inline	`<span>`	Bleibt innerhalb einer Zeile, wird oft für Textformatierung genutzt

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Block- und Inline-Elemente sichtbar</title>
    <link rel="stylesheet" href="/css$/style.css">
</head>
<body>
    <div class="block">
        <p>Dies ist ein Block.</p>
        <span class="inline">Dies ist ein Inline-Text.</span>
    </div>
</body>
</html>

Validierung

HTML-Code sollte valide sein, damit er in allen Browsern korrekt angezeigt wird.
Tools: https://validator.w3.org
Fehler: fehlende Tags, falsche Verschachtelung, Tippfehler

Inhaltsverzeichnis

CSS¶

EInbindung CSS

Methode	Beispiel	Beschreibung
Extern (empfohlen)	`<link rel="stylesheet" href="style.css">`	CSS in einer eigenen Datei (`style.css`)
Intern	`<style>p {color: red;}</style>`	CSS im `<head>` der HTML-Datei
Inline	`<p style="color: red;">Text</p>`	CSS direkt im Tag (ungenau, unübersichtlich)

Selektoren

Selektor	Beispiel	Wirkung
Element	`p { color: blue; }`	Alle `<p>`-Tags werden blau
Klasse	`.info { color: green; }`	Alle Elemente mit `class="info"` grün
ID	`#header { background: yellow; }`	Element mit `id="header"` gelb
Attribut	`input[type="text"] { border: 1px solid black; }`	Nur Textfelder stylen

Beispiel¶

<p class="info">Text mit Klasse</p>
<p id="header">Text mit ID</p>
<input type="text" value="Eingabe">

.info { color: green; }
#header { background: yellow; }
input[type="text"] { border: 1px solid black; }

Boxmodell

Teil	Erklärung	CSS-Beispiel
content	Inhalt (Text, Bild, etc.)	`width: 200px; height: 100px;`
padding	Innenabstand zum Inhalt	`padding: 10px;`
border	Rahmen um das Element	`border: 2px solid black;`
margin	Abstand zu anderen Elementen	`margin: 20px;`

FLoat Grid und Flexbox

Links

Flexbox Grid Float

!!! success "Responsive Design"

Thema	Erklärung	Beispielcode
Bedeutung	Webseiten passen sich an verschiedene Bildschirmgrössen (Handy, Tablet, PC) an.	–
Vorgehen	Flexible Layouts (z. B. mit Prozenten oder `max-width`), Media Queries für Breakpoints.	–
Media Query	Mit `@media` können unterschiedliche CSS-Regeln je nach Bildschirmgrösse angewendet werden.	`css<br>@media (max-width: 600px) { body { background: lightblue; } }<br>`
Beispiel Layout	Navigation wechselt von horizontal zu vertikal auf kleineren Screens.	`css<br>nav ul { display: flex; }<br>@media (max-width: 600px) { nav ul { flex-direction: column; } }<br>`
Bildanpassung	Bilder passen sich automatisch an die verfügbare Breite an.	`css<br>img { max-width: 100%; height: auto; }<br>`
Typische Breakpoints	Häufig: 600px (Handys), 768px (Tablets), 1024px (Laptops), 1200px+ (Desktops).	`css<br>@media (max-width: 768px) { ... }<br>@media (max-width: 1200px) { ... }<br>`

Einheit	Wofuer	Merksatz
%	Breiten/Container	passt sich Elternbreite an
rem	Schrift/Abstaende	skaliert mit Root-Schriftgroesse
vw/vh	Viewport-breite/-hoehe	z. B. volle Breite: 100vw
fr	CSS Grid Spalten	verteilt freien Platz
min(), max(), clamp()	Grenzen setzen	verhindert zu klein/gross

Bereich	Breakpoint	Zweck
Handy	bis 600px	einspaltig, grosse Touch-Targets
Tablet	ab 900px	2 Spalten, breitere Seitenraender
Desktop	ab 1200px	3+ Spalten, Sidebar moeglich

!!! "Pflicht für Responsive Design"

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Inhaltsverzeichnis

Grundlagen von HTML¶

Dokumentaufbau: Grundstruktur mit , , und -Tags.
Semantische Elemente: Nutzung von "
", "
", "
",
, etc., zur besseren Strukturierung.
Standard-Elemente: Links, Listen, Tabellen, Bilder etc.
Block- und Inline-Elemente:
(Block) und (Inline).
Validierung
Namensgebung Dokumente

Inhaltsverzeichnis

Grundlagen von CSS¶

Einbindung von CSS externe Datei.
Selektoren und Eigenschaften: Arbeiten mit Klassen, IDs, und Attributselektoren sowie grundlegende CSS-Eigenschaften wie color, background, margin, padding, border.
Box-Modell: Verständnis des Box-Modells, einschliesslich der Eigenschaften content, padding, border, margin.
Layout Techniken: Anwendung von Grid, Float und Flexbox
Validierung
Responsive Design Bedeutung und Vorgehen, Media queries

Inhaltsverzeichnis