HTML - Die Sprache des Internets

Kurze Geschichte des Internets

1950 -> Arpanet
1989 -> WWW am Cern
2000 -> Web 2.0, dotcom
2020 -> IOT, Data-centrism
2025 -> WTH

Was ist HTML?

HTML = HyperText Markup Language

Auszeichnungssprache (keine Programmiersprache!)
Grundlage jeder Webseite
Beschreibt Struktur und Inhalt
Wird vom Browser interpretiert

HTML ≠ Design (dafür gibt es CSS)

Erste Website: https://info.cern.ch/

Aufteilung Front- und Backend

Frontend -> Was Benutzer:innen sehen
Backend -> Datenspeicher, Logik, Sicherheit, KI,

~~~graph-easy --as=boxart
[ Browser ] - Website aufruf -> [ Server ]
[ Server ] - liefert webseite -> [ Browser ]
[ Browser ] - Formularanfrage -> [ Server ]
[ Server ] - speichert/ändert/liest -> [ Datenbank ]
[ Server ] - liefert resultat -> [ Browser ]
~~~

Heute ist diese Aufteilung oft nicht mehr ganz so klar

Anatomie eines HTML-Elements

html

<tagname>Inhalt</tagname>

Komponenten:

Öffnendes Tag: <tagname>
Inhalt
Schließendes Tag: </tagname>

Selbstschließende Tags:

html

<img src="bild.jpg" alt="Beschreibung">
<br>
<hr>

Attribute

Zusätzliche Informationen zu Elementen:

html

<tagname attribut="wert">Inhalt</tagname>

Wichtige Attribute:

href - Link-Ziel
src - Bildquelle
alt - Alternative Beschreibung
class - CSS-Klasse
id - Eindeutige ID

Live Code: Einfaches Element

html

<h1>Meine erste Überschrift</h1>
<p>Dies ist ein <strong>wichtiger</strong> Absatz.</p>

Grundstruktur einer HTML-Seite

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Seitentitel</title>
</head>
<body>
    <!-- Hier kommt der Inhalt -->
</body>
</html>

Grundstruktur erklärt

<!DOCTYPE html> - Deklariert HTML5
<html lang="de"> - Wurzelelement, Sprache
<head> - Meta-Informationen (unsichtbar)
<body> - Sichtbarer Inhalt
<meta charset="UTF-8"> - Zeichenkodierung
<title> - Titel im Browser-Tab

Text-Elemente

Überschriften

6 Ebenen verfügbar:

html

<h1>Hauptüberschrift (h1)</h1>
<h2>Zweitüberschrift (h2)</h2>
<h3>Drittüberschrift (h3)</h3>
<h4>Viertüberschrift (h4)</h4>
<h5>Fünftüberschrift (h5)</h5>
<h6>Sechstüberschrift (h6)</h6>

Regel: Nur eine <h1> pro Seite!

Absätze und Umbrüche

html

<p>Dies ist der erste Absatz.</p>
<p>Dies ist der zweite Absatz.</p>

<p>Erste Zeile<br>Zweite Zeile</p>

<hr>

<p>Text nach horizontaler Linie</p>

Text-Formatierung

html

<p><strong>Wichtiger Text (fett)</strong></p>
<p><em>Betonter Text (kursiv)</em></p>
<p><mark>Markierter Text</mark></p>
<p><small>Kleinerer Text</small></p>
<p><del>Durchgestrichener Text</del></p>
<p>H<sub>2</sub>O - Tiefgestellt</p>
<p>x<sup>2</sup> - Hochgestellt</p>

Listen: Ungeordnet

html

<h3>Einkaufsliste:</h3>
<ul>
    <li>Milch</li>
    <li>Brot</li>
    <li>Käse</li>
    <li>Eier</li>
</ul>

<ul> = unordered list <li> = list item

Listen: Geordnet

html

<h3>Anleitung:</h3>
<ol>
    <li>Wasser zum Kochen bringen</li>
    <li>Nudeln hinzufügen</li>
    <li>8 Minuten kochen</li>
    <li>Abgießen und servieren</li>
</ol>

<ol> = ordered list

Verschachtelte Listen

html

<h3>Kategorien:</h3>
<ul>
    <li>Obst
        <ul>
            <li>Äpfel</li>
            <li>Bananen</li>
            <li>Orangen</li>
        </ul>
    </li>
    <li>Gemüse
        <ul>
            <li>Karotten</li>
            <li>Tomaten</li>
        </ul>
    </li>
</ul>

Links und Bilder

Links (Hyperlinks)

html

<a href="ziel-url">Linktext</a>

Beispiele:

Externer Link:

html

<a href="https://www.google.com">Zu Google</a>

Link in neuem Tab:

html

<a href="https://example.com" target="_blank">Neuer Tab</a>

Verschiedene Link-Typen

html

<p><a href="https://www.wikipedia.org">Externe Website</a></p>
<p><a href="kontakt.html">Interne Seite</a></p>
<p><a href="mailto:info@example.com">E-Mail senden</a></p>
<p><a href="#unten">Zum Anker springen</a></p>

<br><br><br><br><br>
<p id="unten">Anker-Ziel hier unten!</p>

Bilder

html

<img src="pfad/zum/bild.jpg" alt="Beschreibung">

Wichtige Attribute:

src - Pfad zum Bild (erforderlich)
alt - Beschreibung (erforderlich!)
width - Breite in Pixeln
height - Höhe in Pixeln

Immer alt angeben (Barrierefreiheit!)

Bild-Beispiel

html

<img src="https://picsum.photos/300/200" 
     alt="Zufälliges Beispielbild" 
     width="300">

<p>Ein Bild von <a href="https://picsum.photos">Lorem Picsum</a></p>

Bild als Link

html

<a href="https://www.wikipedia.org" target="_blank">
    <img src="https://picsum.photos/200/150" 
         alt="Klickbares Bild zu Wikipedia" 
         width="200">
</a>
<p>↑ Klick auf das Bild!</p>

Strukturelemente

Semantisches HTML5

Bedeutungsvolle Struktur statt nur <div>:

html

<header>  - Kopfbereich
<nav>     - Navigation
<main>    - Hauptinhalt
<article> - Eigenständiger Artikel
<section> - Thematischer Abschnitt
<aside>   - Seitenleiste
<footer>  - Fußbereich

Semantische Struktur - Beispiel

html

<header style="background: #f0f0f0; padding: 10px;">
    <h1>Meine Website</h1>
    <nav>
        <a href="#">Home</a> | 
        <a href="#">Über</a> | 
        <a href="#">Kontakt</a>
    </nav>
</header>

<main style="padding: 10px;">
    <article>
        <h2>Artikel-Titel</h2>
        <p>Dies ist der Hauptinhalt des Artikels.</p>
    </article>
</main>

<footer style="background: #f0f0f0; padding: 10px;">
    <p>&copy; 2025 Meine Website</p>
</footer>

Division & Span

<div> - Block-Container:

html

<div style="background: lightblue; padding: 10px; margin: 5px;">
    <h3>Container 1</h3>
    <p>Nimmt ganze Breite ein</p>
</div>
<div style="background: lightgreen; padding: 10px; margin: 5px;">
    <h3>Container 2</h3>
    <p>Neuer Block</p>
</div>

Span - Inline-Container

<span> - Inline-Container:

html

<p>
    Dies ist normaler Text mit 
    <span style="color: red; font-weight: bold;">rotem fetten Text</span> 
    und 
    <span style="background: yellow;">gelbem Hintergrund</span> 
    dazwischen.
</p>

<span> nur so breit wie Inhalt!

div vs span

`<div>`	`<span>`
Block-Element	Inline-Element
Ganze Breite	Nur Inhalts-Breite
Neue Zeile	Gleiche Zeile
Für Layout	Für Textteile

Tabellen (Basics)

Einfache Tabelle

html

<table border="1" style="border-collapse: collapse;">
    <tr>
        <th>Vorname</th>
        <th>Nachname</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max</td>
        <td>Mustermann</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>Schmidt</td>
        <td>30</td>
    </tr>
</table>

Tabellen-Elemente

<table> - Die Tabelle
<tr> - Table Row (Zeile)
<th> - Table Header (Kopfzelle)
<td> - Table Data (Datenzelle)

Optional:

<thead> - Tabellenkopf
<tbody> - Tabellenkörper

Tabelle mit Struktur

html

<table border="1" style="border-collapse: collapse; width: 100%;">
    <thead style="background: #e0e0e0;">
        <tr>
            <th>Produkt</th>
            <th>Preis</th>
            <th>Anzahl</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apfel</td>
            <td>2,50 €</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Brot</td>
            <td>3,20 €</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

Formulare (Basics)

Formular-Grundstruktur

html

<form action="/submit" method="post">
    <!-- Formular-Elemente -->
</form>

Attribute:

action - Wohin werden Daten gesendet
method - Wie (get oder post)

Text-Eingabe

html

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" 
           placeholder="Max Mustermann">
    <br><br>
    
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" 
           placeholder="name@example.com">
</form>

Immer <label> verwenden!

Verschiedene Input-Typen

html

<form>
    <label>Passwort:</label>
    <input type="password" placeholder="******">
    <br><br>
    
    <label>Alter:</label>
    <input type="number" min="0" max="120">
    <br><br>
    
    <label>Datum:</label>
    <input type="date">
    <br><br>
    
    <label>Farbe:</label>
    <input type="color">
</form>

Checkbox und Radio

html

<form>
    <h4>Checkbox (mehrere möglich):</h4>
    <input type="checkbox" id="cb1" name="hobby1">
    <label for="cb1">Lesen</label><br>
    <input type="checkbox" id="cb2" name="hobby2">
    <label for="cb2">Sport</label><br>
    
    <h4>Radio (nur eine möglich):</h4>
    <input type="radio" id="r1" name="geschlecht" value="m">
    <label for="r1">Männlich</label><br>
    <input type="radio" id="r2" name="geschlecht" value="w">
    <label for="r2">Weiblich</label>
</form>

html

<form>
    <label for="land">Land:</label>
    <select id="land" name="land">
        <option value="">-- Bitte wählen --</option>
        <option value="de">Deutschland</option>
        <option value="at">Österreich</option>
        <option value="ch">Schweiz</option>
    </select>
    <br><br>
    
    <label for="msg">Nachricht:</label><br>
    <textarea id="msg" rows="3" cols="30"></textarea>
</form>

Buttons

html

<form>
    <button type="submit" style="padding: 10px 20px;">
        Absenden
    </button>
    
    <button type="reset" style="padding: 10px 20px;">
        Zurücksetzen
    </button>
    
    <button type="button" style="padding: 10px 20px;">
        Normaler Button
    </button>
</form>

Vollständiges Mini-Formular

html

<form style="border: 1px solid #ccc; padding: 15px; max-width: 400px;">
    <h3>Kontakt</h3>
    
    <label for="vname">Vorname:</label><br>
    <input type="text" id="vname" required style="width: 90%;"><br><br>
    
    <label for="mail">E-Mail:</label><br>
    <input type="email" id="mail" required style="width: 90%;"><br><br>
    
    <label for="msg">Nachricht:</label><br>
    <textarea id="msg" rows="4" style="width: 90%;"></textarea><br><br>
    
    <input type="checkbox" id="cb">
    <label for="cb">Newsletter abonnieren</label><br><br>
    
    <button type="submit">Senden</button>
</form>

Best Practices

Code richtig strukturieren

Gut - mit Einrückung:

html

<div>
    <h1>Titel</h1>
    <p>Text</p>
</div>

Schlecht - ohne Einrückung:

html

<div>
<h1>Titel</h1>
<p>Text</p>
</div>

Kommentare verwenden

html

<!-- Dies ist ein Kommentar -->

<!-- 
    Mehrzeiliger
    Kommentar für längere
    Erklärungen
-->

<p>Sichtbarer Inhalt</p>

Kommentare sind im Browser unsichtbar!

Barrierefreiheit

Wichtig für alle Nutzer:

alt bei allen Bildern
<label> für Formular-Felder
Semantische HTML-Elemente nutzen
Aussagekräftige Linktexte

html

<!-- Gut -->
<a href="bericht.pdf">Jahresbericht 2024 (PDF)</a>

<!-- Schlecht -->
<a href="bericht.pdf">Hier klicken</a>

Häufige Fehler

❌ Tags nicht schließen

html

<p>Text
<p>Mehr Text

✅ Richtig:

html

<p>Text</p>
<p>Mehr Text</p>

Häufige Fehler (2)

❌ Falsche Verschachtelung

html

<strong><em>Text</strong></em>

✅ Richtig:

html

<strong><em>Text</em></strong>

Wichtigste Tags - Zusammenfassung

Struktur & Text

<html>, <head>, <body>     - Grundstruktur
<h1> bis <h6>              - Überschriften
<p>                        - Absatz
<br>                       - Zeilenumbruch
<strong>, <em>             - Fett, Kursiv
<ul>, <ol>, <li>           - Listen

Links, Bilder & Container

<a href="">                - Link
<img src="" alt="">        - Bild

<div>                      - Block-Container
<span>                     - Inline-Container

<header>, <nav>, <main>    - Semantische
<article>, <section>         Struktur
<footer>

Tabellen & Formulare

<table>, <tr>, <th>, <td>  - Tabelle

<form>                     - Formular
<input type="">            - Eingabefeld
<textarea>                 - Textbereich
<select>, <option>         - Dropdown
<button>                   - Button
<label>                    - Beschriftung

Was kommt als Nächstes?

CSS - Styling und Layout
- Farben, Schriftarten
- Positionierung
- Responsive Design
JavaScript - Interaktivität
- Animationen
- Formulare validieren
- Dynamischer Inhalt

JavaScript

Praktische KI

Slides

Python

Frontend

Slides

HTML - Die Sprache des Internets ​

Kurze Geschichte des Internets ​

Was ist HTML? ​

Aufteilung Front- und Backend ​

Anatomie eines HTML-Elements ​

Attribute ​

Live Code: Einfaches Element ​

Grundstruktur einer HTML-Seite ​

Grundstruktur erklärt ​

Text-Elemente ​

Überschriften ​

Absätze und Umbrüche ​

Text-Formatierung ​

Listen: Ungeordnet ​

Listen: Geordnet ​

Verschachtelte Listen ​

Links und Bilder ​

Links (Hyperlinks) ​

Verschiedene Link-Typen ​

Bilder ​

Bild-Beispiel ​

Bild als Link ​

Strukturelemente ​

Semantisches HTML5 ​

Semantische Struktur - Beispiel ​

Division & Span ​

Span - Inline-Container ​

div vs span ​

Tabellen (Basics) ​

Einfache Tabelle ​

Tabellen-Elemente ​

Tabelle mit Struktur ​

Formulare (Basics) ​

Formular-Grundstruktur ​

Text-Eingabe ​

Verschiedene Input-Typen ​

Checkbox und Radio ​

Dropdown und Textarea ​

Buttons ​

Vollständiges Mini-Formular ​

Best Practices ​

Code richtig strukturieren ​

Kommentare verwenden ​

Barrierefreiheit ​

Häufige Fehler ​

Häufige Fehler (2) ​

Wichtigste Tags - Zusammenfassung ​

Struktur & Text ​

Links, Bilder & Container ​

Tabellen & Formulare ​

Was kommt als Nächstes? ​

Ressourcen ​

Lernen ​

Validierung ​

Übung ​

Viel Erfolg! 🚀 ​

HTML - Die Sprache des Internets

Kurze Geschichte des Internets

Was ist HTML?

Aufteilung Front- und Backend

Anatomie eines HTML-Elements

Attribute

Live Code: Einfaches Element

Grundstruktur einer HTML-Seite

Grundstruktur erklärt

Text-Elemente

Überschriften

Absätze und Umbrüche

Text-Formatierung

Listen: Ungeordnet

Listen: Geordnet

Verschachtelte Listen

Links und Bilder

Links (Hyperlinks)

Verschiedene Link-Typen

Bilder

Bild-Beispiel

Bild als Link

Strukturelemente

Semantisches HTML5

Semantische Struktur - Beispiel

Division & Span

Span - Inline-Container

div vs span

Tabellen (Basics)

Einfache Tabelle

Tabellen-Elemente

Tabelle mit Struktur

Formulare (Basics)

Formular-Grundstruktur

Text-Eingabe

Verschiedene Input-Typen

Checkbox und Radio

Dropdown und Textarea

Buttons

Vollständiges Mini-Formular

Best Practices

Code richtig strukturieren

Kommentare verwenden

Barrierefreiheit

Häufige Fehler

Häufige Fehler (2)

Wichtigste Tags - Zusammenfassung

Struktur & Text

Links, Bilder & Container

Tabellen & Formulare

Was kommt als Nächstes?

Ressourcen

Lernen

Validierung

Übung

Viel Erfolg! 🚀