📄 HTML - HyperText Markup Language
HTML ist die Grundlagensprache des Webs. Mit HTML definierst du die Struktur und den Inhalt einer Webseite. Hier lernst du die wichtigsten Konzepte.
Was ist HTML?
HTML (HyperText Markup Language) ist eine Auszeichnungssprache, die verwendet wird, um die Struktur und den Inhalt von Webseiten zu definieren.
HTML ist keine Programmiersprache, sondern eine Markup-Sprache. Das bedeutet, sie beschreibt, wie der Inhalt einer Webseite strukturiert ist, nicht wie er funktioniert.
Wichtige Eigenschaften:
- Definiert die Struktur einer Webseite
- Besteht aus Elementen (Tags)
- Wird vom Browser interpretiert
- Arbeitet mit CSS und JavaScript zusammen
Grundstruktur einer HTML-Datei
Jede HTML-Datei hat eine grundlegende Struktur. Hier ist ein einfaches Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Dies ist mein erster Absatz.</p>
</body>
</html>Erklärung:
<!DOCTYPE html>- Deklariert den Dokumenttyp als HTML5<html>- Das Wurzelement der Seite<head>- Enthält Meta-Informationen (nicht sichtbar)<body>- Enthält den sichtbaren Inhalt
Wichtige HTML-Tags
HTML besteht aus vielen verschiedenen Tags. Hier sind die wichtigsten:
<h1>-<h6>
Überschriften (h1 = größte, h6 = kleinste)
<p>
Absatz / Paragraph
<a>
Link / Anchor
<img>
Bild / Image
<ul>
Ungeordnete Liste
<ol>
Geordnete Liste
<div>
Container / Division
<span>
Inline-Container
HTML im Tetris-Spiel
Hier siehst du einen Ausschnitt aus dem HTML-Code des Tetris-Spiels auf dieser Webseite:
Wichtige Punkte:
- HTML definiert nur die Struktur der Seite
- Das
<canvas>-Element wird für das Tetris-Spielfeld verwendet - JavaScript fügt die Funktionalität hinzu
- CSS sorgt für das Design und Layout
HTML ist nichts allein!
HTML allein ist eine tolle Spielerei, aber ohne andere Technologien kann man fast nichts Interaktives oder Schönes erstellen.
Die drei Säulen der Webentwicklung:
HTML
Definiert die Struktur und den Inhalt der Webseite.
CSS
Bestimmt das Aussehen, Layout und Design der Webseite.
JavaScript
Fügt Interaktivität und Dynamik hinzu (z.B. Chatbots, Tetris).
Zusätzliche Technologien:
Mit PHP kann man z.B. Anmeldungssysteme codieren. JavaScript ist ein gutes Tool, um z.B. Chatbots oder Tetris in deine Webseite einzubauen. CSS ist dafür da, mehr Farbe und Grafiken in deine Webseite einzubauen.