HTML und CSS für Anfänger: Wie man einfache Webseiten erstellt
Einführung in HTML und CSS
Das Erstellen von Webseiten beginnt mit zwei grundlegenden Technologien: HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets). Diese beiden Bausteine bilden die Grundlage für modernes Webdesign und sind unverzichtbare Kenntnisse für angehende Webentwickler.
Was ist HTML?
HTML ist die Standardsprache für das Erstellen von Webseiten. Es definiert die Struktur einer Webseite durch die Verwendung von Tags, die verschiedene Elemente wie Text, Bilder und Links darstellen. Hier sind einige grundlegende HTML-Tags:
- <h1> bis <h6>: Überschriften
- <p>: Absätze
- <a>: Hyperlinks
- <img>: Bilder
Was ist CSS?
CSS wird verwendet, um das Aussehen und die Layoutgestaltung von HTML-Elementen zu steuern. Mit CSS kannst du Stilregeln anwenden, die das Design deiner Webseite erheblich beeinflussen. Wichtige CSS-Konzepte umfassen:
- Farbe und Schriftarten
- Abstände und Margen
- Layouts: Flexbox und Grid
- Responsive Design
Erstellen einer einfachen Webseite mit HTML und CSS
Schritt 1: HTML-Grundstruktur
Beginne mit einer grundlegenden HTML-Seite. Hier ist ein Minimalbeispiel:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Meine erste Webseite</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Willkommen auf meiner Webseite</h1> <p>Dies ist ein einfacher HTML-Text.</p> </body> </html>
Schritt 2: CSS hinzufügen
Erstelle eine Datei mit dem Namen styles.css und füge folgende Regeln hinzu:
body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: #333; } Schritt 3: Vorschau deiner Webseite
Öffne die HTML-Datei in einem Webbrowser, um deine erste Webseite in Aktion zu sehen.
Best Practices für HTML und CSS
Sauberer Code
Es ist wichtig, deinen Code sauber und gut strukturiert zu halten. Dies erleichtert die Wartung und das Verständnis. Achte auf:
- Verwendung von Kommentaren
- Ordnungsgemäße Einrückungen
Barrierefreiheit
Stelle sicher, dass deine Webseiten für alle Benutzer zugänglich sind, indem du alt Attribute für Bilder hinzufügst und klare, beschreibende Links verwendest.
Ressourcen zur Weiterentwicklung
Hier sind einige nützliche Ressourcen, um deine Fähigkeiten in HTML und CSS zu verbessern: