Katschmarz Software
Professionelle Softwareentwicklung
1. Beginners Guide
Kategorie: HTML
Erstellt am: 2026-01-13 13:51:01
Beginner-Guide für HTML
Was ist HTML?
HTML steht für HyperText Markup Language. Es ist die Standard-Auszeichnungssprache für Webseiten. Mit HTML beschreibst du die Struktur einer Seite: Überschriften, Absätze, Bilder, Links und vieles mehr.
Wofür wird HTML eingesetzt?
- Erstellung von Webseiten und Webanwendungen
- Strukturierung von Inhalten (Text, Bilder, Videos)
- Grundlage für CSS (Design) und JavaScript (Interaktivität)
Was kann ich mit HTML alles machen?
Mit HTML kannst du:
- Texte formatieren (Überschriften, Absätze, Listen)
- Bilder und Videos einbinden
- Links zu anderen Seiten erstellen
- Formulare für Benutzereingaben bauen
- Tabellen und strukturierte Daten darstellen
Was benötige ich für den Anfang mit HTML?
- Einen Texteditor (z. B. Visual Studio Code, Notepad++, Sublime Text)
- Einen Webbrowser (Chrome, Firefox, Edge) zum Testen deiner Seiten
- Grundkenntnisse in HTML-Tags und Attributen
HTML installieren?
HTML muss nicht installiert werden! Es ist eine Auszeichnungssprache, die von jedem Browser verstanden wird. Du brauchst nur einen Editor und einen Browser.
Editor für HTML
Beliebte Editoren:
- Visual Studio Code – kostenlos, viele Erweiterungen
- Sublime Text – schnell und leichtgewichtig
- Notepad++ – einfach und kostenlos
Erste Lernressourcen
Grundbegriffe für den Einstieg ins Programmieren mit HTML
- Tag: Ein HTML-Element, z. B.
<p>für Absatz - Attribut: Zusätzliche Information für ein Tag, z. B.
hrefbei Links - Element: Kombination aus Start-Tag, Inhalt und End-Tag
- Verschachtelung: Tags können ineinander liegen
Grundstruktur einer HTML-Seite
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste HTML-Seite</title>
</head>
<body>
<h1>Willkommen auf meiner Seite!</h1>
<p>Dies ist ein Beispiel für die Grundstruktur einer HTML-Seite.</p>
</body>
</html>Die Grundstruktur einer HTML-Seite besteht aus mehreren wichtigen Komponenten, die zusammen die Basis für jede Webseite bilden. Hier ist eine ausführliche Erklärung:
✅ 1. DOCTYPE-Deklaration
<!DOCTYPE html>- Gibt an, dass das Dokument HTML5 verwendet.
- Muss ganz oben stehen, damit der Browser die Seite korrekt interpretiert.
✅ 2. HTML-Tag
<html lang="de">- Umschließt den gesamten Inhalt der Seite.
- Das Attribut
lang="de"gibt die Sprache an (hier Deutsch), was für Suchmaschinen und Screenreader wichtig ist.
✅ 3. Head-Bereich
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seitentitel</title>
</head>- Enthält Metadaten, die nicht direkt auf der Seite angezeigt werden.
- Wichtige Elemente:
<meta charset="UTF-8">: Zeichensatz für korrekte Darstellung von Umlauten.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Optimiert die Darstellung für mobile Geräte.<title>: Titel der Seite, erscheint im Browser-Tab und ist wichtig für SEO.
✅ 4. Body-Bereich
<body>
<h1>Überschrift</h1>
<p>Hier steht der sichtbare Inhalt.</p>
</body>- Enthält den sichtbaren Inhalt der Webseite.
- Hier kommen alle Elemente wie:
- Überschriften (
<h1>bis<h6>) - Absätze (
<p>) - Listen (
<ul>,<ol>) - Links (
...) - Bilder (
...) - Formulare, Tabellen, Videos etc.
- Überschriften (
Erste Übung
Erstelle eine HTML-Seite mit:
- Einer Überschrift „Meine Lieblingsseiten“
- Einer Liste mit 3 Links zu deinen Lieblingswebseiten
Lösung:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Lieblingsseiten</title>
</head>
<body>
<h1>Meine Lieblingsseiten</h1>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
<li><a href="https://www.github.com" target="_blank">GitHub</a></li>
</ul>
</body>Tipp: Speichere die Datei als
index.html und öffne sie im Browser.💬 Kommentare (0)
Kommentar hinterlassen
Noch keine Kommentare. Sei der/die Erste!