Webseitengestaltung mit HTML5 und CSS — Basics

Dieser Grundlagenkurs führt systematisch und praxisnah in die Webseitengestaltung mit HTML5 und CSS ein. Webseiten sind das Fundament der digitalen Kommunikation, und das Wissen um ihren strukturellen Aufbau ist für viele Berufsfelder relevant — von Webdesign und Frontend-Entwicklung bis hin zu Marketing, Redaktion und Mediengestaltung. Im Kurs erlernen die Teilnehmenden, wie HTML-Dokumente aufgebaut sind, wie Texte, Listen, Tabellen und Formulare korrekt ausgezeichnet werden und wie CSS für die visuelle Gestaltung und Positionierung von Inhalten eingesetzt wird. Auch die Unterschiede zwischen HTML5, HTML4 und XHTML werden thematisiert, um ein fundiertes Verständnis der technischen Hintergründe zu schaffen. Am Ende des Kurses können die Teilnehmenden eigenständig einfache, korrekt strukturierte und optisch ansprechend gestaltete Webseiten erstellen.

Der erste Block widmet sich der Einführung in HTML und dem grundlegenden Dokumentaufbau. Für alle, die noch nie mit HTML gearbeitet haben, ist dies der entscheidende Startpunkt: Hier wird erklärt, was HTML überhaupt ist, wie Browser HTML-Dateien interpretieren und welche Struktur jedes gültige HTML-Dokument haben muss.

• Geschichte und Grundprinzip von HTML als Auszeichnungssprache
• Unterschiede zwischen HTML5, HTML4 und XHTML
• Aufbau eines minimalen HTML5-Dokuments: Doctype, html, head, body
• Zeichenkodierung, Metadaten und Viewport-Deklaration
• Editoren und Browser-Entwicklerwerkzeuge als Arbeitswerkzeug
• Validierung von HTML-Dokumenten mit dem W3C-Validator

Im zweiten Block werden alle wesentlichen Elemente zur Textstrukturierung und visuellen Darstellung von Inhalten erarbeitet. HTML bietet eine Vielzahl von semantischen Elementen, die weit mehr als nur optische Formatierung ermöglichen — sie geben dem Inhalt Bedeutung und verbessern Barrierefreiheit und Suchmaschinenoptimierung.

• Überschriften h1 bis h6 und Absatz-Tag p korrekt einsetzen
• Inline-Elemente für Hervorhebungen: strong, em, code, mark, small
• Blockzitate blockquote und inline-Zitate mit cite
• Semantische Abschnitte: header, main, footer, article, section, aside, nav
• Zeilenumbrüche, horizontale Trennlinien und Sonderzeichen mit HTML-Entities
• Farben in CSS: Hex-Codes, RGB, HSL und benannte Farben

Der dritte Block behandelt strukturierende Elemente: Listen, Tabellen und Formulare. Diese Elemente sind in der Praxis allgegenwärtig — Navigationslisten, Datentabellen und Kontaktformulare gehören zu den am häufigsten eingesetzten HTML-Konstrukten.

• Ungeordnete Listen ul und geordnete Listen ol mit Listenpunkten li
• Definitionslisten dl mit dt und dd für Glossare und FAQ-Strukturen
• Tabellen mit table, thead, tbody, tfoot, th, td, rowspan und colspan
• Barrierefreie Tabellen mit caption und scope-Attributen
• Formulare: form, input (text, email, number, date, checkbox, radio), select, textarea, button
• Validierungsattribute required, minlength, maxlength, pattern

Im vierten Block werden Hyperlinks, Grafiken und das Einbinden von Medien behandelt. Diese Elemente machen aus einer statischen Textseite eine vernetzte, medienreiche Webseite.

• Hyperlinks mit a href: absolute URLs, relative Pfade, Mailto- und Tel-Links
• Anker-Links innerhalb einer Seite mit id und href="#"
• Bilder einbinden mit img: Pfade, alt-Text, Breite und Höhe
• Bildformate im Web: JPEG, PNG, SVG und WebP im Vergleich
• figure und figcaption für semantisch korrekte Bildunterschriften
• Responsive Bilder mit srcset und sizes

Praxis-Aufgaben

• Vollständige Webseite mit korrektem HTML5-Grundgerüst erstellen
• Navigationsleiste mit ungeordneter Liste und CSS-Styling aufbauen
• Datentabelle für ein Kursangebot barrierefrei auszeichnen
• Kontaktformular mit Pflichtfeldern, E-Mail-Input und Absenden-Button
• Externe CSS-Datei anlegen und mit mehreren HTML-Seiten verknüpfen
• Farbpalette und Schriftstile per CSS-Variablen definieren
• Grafik-Galerie mit figure, figcaption und responsiven Bildgrößen
• Mehrseitige Mini-Website mit interner Navigation erstellen
• Validierung aller Seiten mit dem W3C-HTML-Validator
• CSS-Box-Modell an praktischen Layout-Beispielen verstehen und anwenden
• Unterschiede XHTML vs. HTML5 an konkreten Code-Beispielen vergleichen
• Abgabeprojekt: persönliche Portfolio-Seite mit allen erlernten Elementen

Die Übungen sind praxisnah und realitätsbezogen gestaltet — jede Aufgabe entspricht einem typischen Arbeitsschritt, der in der Webgestaltung tatsächlich gefordert wird. Alle Aufgaben werden im Browser kontrolliert, mit den Entwicklerwerkzeugen inspiziert und mit dem W3C-Validator auf Fehlerfreiheit geprüft. So entwickeln die Teilnehmenden von Beginn an professionelle Arbeitsgewohnheiten.

Der Kurs richtet sich an absolute Einsteiger in die Webseitengestaltung. Vorkenntnisse in HTML oder CSS sind nicht erforderlich. Angesprochen sind Personen, die zukünftig im Bereich der Webgestaltung tätig sein möchten, sowie Designer und Kreative, die ihre Fähigkeiten um technisches HTML-Wissen erweitern wollen.

• Personen ohne IT-Vorkenntnisse, die in die Webgestaltung einsteigen wollen
• Grafiker und Designer, die eigenständig einfache Webseiten umsetzen möchten
• Kaufleute und Büroangestellte mit Interesse an Digitalisierungsthemen
• Redakteure und Content-Manager, die HTML-Grundkenntnisse für CMS-Arbeit benötigen
• Personen in Umschulung oder beruflicher Neuorientierung im IT-Bereich

Der Kurs wird im Combined-Learning-Format angeboten und verbindet Online-Lernmodule mit praktischen Übungsaufgaben, die begleitend zu den Lehrinhalten bearbeitet werden. Die Teilnehmenden schreiben von Beginn an echten HTML- und CSS-Code und sehen die Ergebnisse ihrer Arbeit sofort im Browser. Tutoren stehen für Fragen zur Verfügung und geben Feedback zu den eingereichten Übungsprojekten. Der Kurs wird in Vollzeit absolviert und ist so konzipiert, dass innerhalb von einer Woche bis einem Monat eine solide Grundlage in HTML5 und CSS gelegt wird.

Die Weiterbildung dauert in der Regel zwischen einer Woche und einem Monat in Vollzeit. In diesem kompakten Zeitrahmen werden alle wesentlichen HTML5- und CSS-Grundlagen praxisnah vermittelt. Der tägliche Zeitaufwand entspricht einem Arbeitstag, inklusive Lerneinheiten, Übungsaufgaben und Selbststudium.

Nach erfolgreichem Abschluss erhalten die Teilnehmenden ein trägerinternes Zertifikat bzw. eine qualifizierte Teilnahmebescheinigung des jeweiligen Bildungsanbieters. Das Zertifikat bestätigt die erworbenen HTML5- und CSS-Grundkenntnisse und kann als Nachweis für Arbeitgeber oder als Baustein für weitere Webentwicklungs-Qualifizierungen eingesetzt werden.

HTML und CSS sind die Grundsprachen des World Wide Web. Wer diese beherrscht, kann eigenständig Webseiten erstellen, CMS-Templates anpassen, E-Mail-Newsletter gestalten und als Grundlage für die Arbeit mit JavaScript, PHP oder modernen Frontend-Frameworks wie React oder Vue dienen. Der Einstieg in die Webentwicklung öffnet ein breites Spektrum an Berufsmöglichkeiten. Besonders für Quereinsteiger, Designerinnen und Kaufleute ist dieser Kurs wertvoll: Er ergänzt das bestehende Fachprofil um eine zunehmend gefragte digitale Kernkompetenz, ohne dass tiefe Programmiervorkenntnisse nötig sind. Schon nach wenigen Tagen entstehen erste vorzeigbare Ergebnisse. Für AZAV-zertifizierte Bildungsträger kann der Kurs über einen Bildungsgutschein gefördert werden. Weitere Finanzierungsoptionen sind das Qualifizierungschancengesetz, die Berufsförderung der Bundeswehr, Leistungen zur Rehabilitation sowie Förderungen der Deutschen Rentenversicherung.