HTML_Basics

📚 HTML Grundlagen – Zusammenfassung¶

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