HTML5 & CSS Grundlagen – Kurs für Einsteiger

HTML5 ist das Herzstück jeder modernen Webseite. Als Auszeichnungssprache definiert HTML5 die Struktur und die semantische Bedeutung von Webinhalten — ob Texte, Bilder, Videos, Formulare oder interaktive Elemente. In Kombination mit CSS (Cascading Style Sheets) entsteht daraus eine leistungsfähige Grundlage für ansprechendes, zugängliches und technisch einwandfreies Webpublishing. Dieser Kurs legt das Fundament für das Erstellen und Veröffentlichen von Webinhalten mit HTML5 und CSS. Teilnehmer lernen, semantisch korrekte HTML5-Dokumente zu schreiben, Inhalte mit modernem CSS zu gestalten, Medien einzubetten, komplexe Inhaltsstrukturen aufzubauen und fertige Webseiten zu testen und zu veröffentlichen. Der Kurs richtet sich an Einsteiger und alle, die Web-Content-Kompetenz für ihre berufliche Praxis aufbauen möchten.

Modul 1 — Grundlagen von HTML5 und Dokumentstruktur Der Einstieg in HTML5 beginnt mit dem Verständnis, wie Browser Webseiten interpretieren und darstellen. Teilnehmer lernen, die Grundstruktur eines HTML5-Dokuments aufzubauen, semantische Elemente sinnvoll einzusetzen und typische Textelemente zu strukturieren. Ziel ist ein sicheres Fundament für alle weiteren Kursmodule.

• HTML5-Dokumentstruktur: DOCTYPE, html, head, body und Metadaten
• Semantische Strukturelemente: header, nav, main, section, article, aside, footer
• Textelemente: Überschriften (h1-h6), Absätze, Zeilenumbrüche, Betonungsmarkierungen
• Listen: geordnet (ol), ungeordnet (ul) und Definitionslisten (dl)
• HTML5 Validierung mit dem W3C-Validator
• Zeichenkodierung und Metadaten im head-Bereich korrekt setzen

Modul 2 — Einbetten und Verlinken von Inhalten Moderne Webseiten sind reich an Medieninhalten. Dieses Modul zeigt, wie Bilder, Audio, Video und externe Inhalte korrekt in HTML5-Dokumente eingebunden werden. Verlinkungen — intern, extern und ankerbasiert — werden ebenso behandelt wie die Einbettung von Inhalten aus anderen Quellen.

• Bilder mit dem img-Element einbetten: src, alt, width, height, srcset
• Audio und Video mit HTML5-nativen Elementen einbinden: source, controls, autoplay
• Iframes für externe Inhalte (Videos, Karten, Widgets) einsetzen
• Hyperlinks: relative und absolute URLs, target-Attribut, Anker-Links
• Tabellen für tabellarische Daten korrekt strukturieren: thead, tbody, tfoot, colspan, rowspan
• Formulare aufbauen: input-Typen, labels, textarea, select, button, form-Validierung

Modul 3 — Formatieren von Inhalten mit CSS CSS gibt dem strukturellen HTML5-Gerüst sein visuelles Erscheinungsbild. Dieses Modul führt in die Grundprinzipien von CSS ein und vermittelt, wie Selektoren, Eigenschaften und der Kaskaden-Mechanismus zusammenarbeiten. Das Box-Modell als fundamentales Layout-Konzept wird ausführlich behandelt und in praktischen Übungen gefestigt.

• CSS einbinden: inline, intern (style-Tag), extern (Stylesheet-Datei)
• Selektoren: Element-, Klassen-, ID-, Kombinations- und Pseudoklassen-Selektoren
• Kaskade, Spezifität und Vererbung in CSS
• Box-Modell: content, padding, border, margin im Detail
• Farben, Schriften und Typografie mit CSS gestalten
• Hintergründe, Ränder und einfache visuelle Effekte (border-radius, box-shadow)

Modul 4 — Komplexe Strukturen, Testen und Veröffentlichen Im abschließenden Modul werden fortgeschrittene Layout-Techniken eingeführt und die gesamte Prozesskette vom Entwurf bis zur veröffentlichten Webseite durchlaufen. Responsive Design, Debugging im Browser und der Upload auf einen Webserver runden die Ausbildung ab.

• Flexbox-Layouts: flex-container, flex-items, Ausrichtung und Reihenfolge
• Grundlegende CSS-Grid-Konzepte für komplexere Seitenlayouts
• Media Queries für Responsive Design: breakpoints, mobile-first-Ansatz
• Browser Developer Tools zum Inspizieren und Debuggen von HTML und CSS
• Webseiten für alle Nutzer zugänglich gestalten: Accessibility-Grundlagen (WCAG)
• Webseiten auf einem FTP-Server oder Cloud-Hosting-Dienst veröffentlichen

Praktische Übungen und Projektarbeit

• Aufbau einer semantisch korrekten HTML5-Seite von Grund auf
• Einbinden einer CSS-Datei und Gestaltung der Seite nach einem einfachen Design-Mockup
• Erstellung einer mehrspaltigen Seite mit Flexbox ohne zusätzliche Frameworks
• Aufbau eines einfachen Kontaktformulars mit HTML5-Formularvalidierung
• Einbindung eines Videos und einer Bildergalerie mit srcset für verschiedene Auflösungen
• Anpassung des Layouts für Mobilgeräte mit Media Queries
• Überprüfung und Korrektur von HTML- und CSS-Syntaxfehlern mit dem W3C-Validator
• Debuggen von Layout-Problemen mit den Browser-Dev-Tools
• Aufbau einer kompletten Mini-Website mit mindestens drei untereinander verlinkten Seiten
• Einbau von Metadaten für SEO (title, description, Open-Graph-Tags)
• Zugänglichkeit prüfen: alt-Texte, aria-Labels, Tab-Reihenfolge kontrollieren
• Fertigstellung und Upload der Mini-Website auf einen realen oder simulierten Webserver

Jede Übungseinheit ist auf die prüfungsrelevanten Themen der Microsoft Technology Associate (MTA) HTML5 Application Development Fundamentals abgestimmt, sodass Teilnehmer gleichzeitig auf eine mögliche Zertifizierungsprüfung vorbereitet werden. Am Ende des Kurses haben Teilnehmer eine vollständige Mini-Website erstellt, die als konkretes Portfolio-Stück in Bewerbungen eingesetzt werden kann.

Der Kurs richtet sich an Einsteiger ohne Vorkenntnisse in HTML oder CSS sowie an Personen, die ihre Web-Content-Kenntnisse systematisch ausbauen möchten.

• Quereinsteiger, die in Frontend-Entwicklung oder Web-Design einsteigen wollen
• Marketing-Mitarbeiter, die Webinhalte eigenständig pflegen und einfache Anpassungen vornehmen möchten
• Redakteure und Content-Manager, die ein technisches Grundverständnis von Webtechnologien aufbauen möchten
• IT-Support-Mitarbeiter, die einfache Web-Aufgaben ohne externen Dienstleister erledigen wollen
• Auszubildende und Studenten im Bereich Medien, Kommunikation oder Informatik

Der Kurs wird überwiegend als Combined Learning mit Präsenz- und Online-Anteilen durchgeführt. Theorieinhalte werden durch Live-Coding-Demonstrationen sofort anschaulich gemacht; praktische Übungsaufgaben vertiefen das Gelernte unmittelbar. Ergänzende Materialien, Musterlösungen und Videoaufzeichnungen stehen zum Nacharbeiten bereit. Die kleinen Gruppengrößen erlauben intensive individuelle Betreuung. Teilzeit-Optionen machen den Kurs auch für Berufstätige zugänglich.

Im Vollzeit-Format dauert der Kurs mehr als drei Tage bis zu einer Woche. Im Teilzeit-Modus kann er über mehrere Wochen bis hin zu mehreren Monaten gestreckt werden. Flexible individuelle Starttermine können mit dem Anbieter vereinbart werden.

Nach erfolgreichem Kursabschluss erhalten Teilnehmer ein international anerkanntes Herstellerzertifikat sowie ein Lehrgangszertifikat des Anbieters. Beide Dokumente belegen die erworbenen Kenntnisse in HTML5 und CSS und werden von Arbeitgebern als Qualifikationsnachweis für Web-Content-Tätigkeiten akzeptiert.

HTML5 und CSS sind die grundlegenden Bausteine jeder professionellen Webpräsenz. Wer diese Technologien beherrscht, kann Webinhalte eigenständig erstellen, pflegen und optimieren — ohne auf externe Dienstleister angewiesen zu sein. Für Marketing-Teams, Redakteure und Content-Manager bedeutet das mehr Geschwindigkeit und Flexibilität im Arbeitsalltag. Für Berufseinsteiger in der Webentwicklung oder im Web-Design bilden die erworbenen Kenntnisse das unverzichtbare Fundament für alle weiteren Spezialisierungen wie JavaScript-Entwicklung, CSS-Frameworks oder CMS-Integration. Darüber hinaus ist das Wissen aus diesem Kurs direkt transferierbar: Wer HTML5 und CSS versteht, lernt moderne Frameworks und Content-Management-Systeme (WordPress, TYPO3, Webflow) schneller und gezielter — denn das Verständnis der zugrundeliegenden Technologie erleichtert die Arbeit mit jedem Abstraktionslayer erheblich. Die im Kurs erstellte Mini-Website kann unmittelbar als Portfolio-Stück in Bewerbungen eingesetzt werden und demonstriert praktisch erworbene Kompetenz.