Softwareentwicklung mit HTML5 - Foundation

HTML5 ist die technische Grundlage jeder modernen Webseite — und der Ausgangspunkt für alle, die beruflich im Web arbeiten wollen. Dieser Foundation-Kurs vermittelt die wesentlichen Sprachkonzepte von HTML5 sowie die Styling-Grundlagen mit CSS, die nötig sind, um eine vollständige, barrierearme Webseite eigenständig aufzubauen. Der Fokus liegt auf strukturiertem Denken: Was bedeutet semantisches HTML? Wie trennt man Inhalt und Präsentation? Wie entstehen Formulare, Tabellen und Layouts, die in realen Projekten bestehen?

Der erste thematische Block legt das Fundament: HTML5-Dokumentstruktur und semantische Auszeichnung. Wer von Anfang an versteht, warum Semantik wichtig ist — für Suchmaschinen, für Barrierefreiheit, für wartbaren Code — entwickelt von Beginn an gute Gewohnheiten. Die Teilnehmenden bauen ihren ersten vollständigen Seitenrahmen auf und lernen, welches Element für welchen Zweck vorgesehen ist.

• DOCTYPE-Deklaration und HTML5-Dokumentenstruktur
• Head-Bereich: Zeichensatz, Viewport-Meta, Seitentitel, Favicon-Einbindung
• Semantische Elemente: header, nav, main, article, section, aside, footer
• Textauszeichnung: h1–h6, p, strong, em, small, blockquote, pre, code, abbr
• Listen: geordnet (ol), ungeordnet (ul), Definitionslisten (dl, dt, dd)
• Hyperlinks: href-Attribute, relative und absolute Pfade, target, download, mailto

Das zweite Modul dreht sich um Medien und Hyperlinks als Bausteine des vernetzten Webs. HTML5 hat die nativen Möglichkeiten zur Medieneinbindung erheblich erweitert — ohne Plugins, browserübergreifend und mit klarer Barrierefreiheitsunterstützung.

• Bilder einbinden: img, src, alt, width/height, Lazy Loading
• Responsive Bilder: srcset und sizes für unterschiedliche Bildschirmgrößen
• Audio und Video: source-Element, Formate, controls, autoplay, loop
• iFrame: sichere Einbindung externer Inhalte, sandbox-Attribut
• Figure und figcaption: semantische Bild-Beschriftung
• Barrierefreiheit bei Medien: Alternativen, Transkripte, ARIA-labels

Das dritte Modul widmet sich Tabellen und Formularen — den Werkzeugen für strukturierte Dateneingabe und tabellarische Darstellung. Tabellen für Layout zu missbrauchen ist Vergangenheit; hier lernen die Teilnehmenden, wann Tabellen legitim und sinnvoll sind, und wie man Formulare so baut, dass sie nutzbar und zugänglich sind.

• Tabellen: table, thead, tbody, tfoot, tr, th, td
• colspan und rowspan für komplexe Zellverschmelzung
• caption und scope für barrierefreie Tabellen
• Formulare: form, action, method, input-Typen (text, email, tel, number, date, checkbox, radio, range)
• Labels, fieldset, legend: Formularstrukturierung und Zugänglichkeit
• HTML5-Validierung: required, min/max/minlength, pattern-Attribut

Der Praxisblock verbindet HTML5 mit CSS-Grundlagen zu einem vollständigen Webprojekt. Hier entsteht Schritt für Schritt eine mehrseitige Website mit Navigation, Inhaltsseiten und einem Kontaktformular.

• CSS einbinden: inline, internal, external (Linked Stylesheet)
• Selektoren: Element-, Klassen-, ID-, Attribut-, Pseudoklassen-Selektoren
• Kaskade und Spezifität: welche Regel gewinnt wann
• CSS Box-Modell: margin, border, padding, content — und box-sizing: border-box
• Schriftgestaltung: font-family, font-size, line-height, color, text-decoration
• Hintergrundfarben und -bilder, einfache Farbpaletten
• Einfache Navigation mit CSS (horizontale Linkliste, aktiver Zustand)
• Grundlagen des Page-Layouts: display-Werte, float (historisch) vs. Flexbox-Einstieg
• Barrierefreies Farbkontrast-Check mit Browser-DevTools
• Validierung des HTML mit dem W3C-Markup-Validator
• Seite im Browser testen: DevTools, Responsive-View, Konsole
• Abschlussprojekt: vollständige mehrseitige Website mit Navigation, Inhalten und Formular

Am Ende steht ein lauffähiges Webprojekt, das die Teilnehmenden eigenständig erstellt haben — ein greifbarer Nachweis der erworbenen Fähigkeiten und eine Grundlage für weiterführende Kurse in GUI-Konzepten, JavaScript oder CSS-Frameworks.

Der Kurs richtet sich bevorzugt an Personen aus dem Medienumfeld, die bisher ohne tiefere Webkenntnisse arbeiten, sowie an Berufswechselnde, die den Einstieg in die Webentwicklung suchen.

• Mediengestalter und Grafikdesigner, die HTML5 in die eigene Arbeit integrieren wollen
• Online-Redakteure und Content-Manager, die ihre technische Basis ausbauen möchten
• Personen aus Print, Fotografie oder Film, die ins digitale Webpublishing wechseln
• Berufswechselnde mit Interesse an Frontend-Entwicklung ohne Programmiererfahrung
• Quereinsteiger mit abgeschlossener Ausbildung oder Studium und ausgeprägtem Interesse an Gestaltung und Publizieren

Theorieinputs werden konsequent durch direkte Übungen am Rechner ergänzt. Jedes neue HTML-Element und jede CSS-Regel wird sofort angewendet: lesen, schreiben, im Browser prüfen. Diese unmittelbare Rückkopplung zwischen Erklärung und Ergebnis ist für einen Einsteigerkurs besonders wertvoll. Eigenständige Übungsphasen mit anschließendem Dozenten-Feedback wechseln sich mit gemeinsamen Code-Reviews im Plenum ab. Das Lernmaterial steht in digitaler Form zur Verfügung, sodass nach dem Kurs weitergeübt werden kann.

Genaue Stunden- und Wochenzahlen variieren je nach Anbieter. Derzeit sind 2 Anbieter mit 36 Terminen aktiv. Detailangaben sind beim jeweiligen Anbieter erhältlich.

Nach Abschluss des Kurses und Fertigstellung des Abschlussprojekts erhalten Teilnehmende ein trägerinternes Zertifikat bzw. eine qualifizierte Teilnahmebescheinigung. Dieses Dokument bestätigt die erfolgreiche Einarbeitung in HTML5 und CSS auf Foundation-Niveau und eignet sich als Beleg für gezielten Kompetenzerwerb im Webbereich.

HTML5 zu beherrschen ist in vielen Medienberufen heute keine Zusatzqualifikation mehr, sondern eine Basiserwartung. Wer Webseiten verstehen, pflegen und aufbauen kann, ist in Redaktionen, Agenturen, PR-Abteilungen und kleinen Unternehmen flexibler einsetzbar — und kann Kommunikationsaufgaben übernehmen, die vorher externe Dienstleister erforderten. Dieser Kurs schafft das technische Fundament dafür. Gleichzeitig ist HTML5 der Einstiegspunkt in eine breite Kompetenz-Pyramide. Wer hier mit semantischen Prinzipien und dem Box-Modell anfängt, baut die richtige Denkweise auf, um anschließend CSS-Layouts, JavaScript-Interaktivität oder Frameworks wie Bootstrap effektiv zu erlernen. Eine foundation-starke Wissensbasis verhindert viele Fehler, die Einsteiger später mühsam ausbessern müssen. Ein besonderer Wert liegt in der Barrierefreiheits-Perspektive, die von Anfang an eingebettet ist. Alt-Texte, semantische Formulare und sinnvolle Tabulatorreihenfolgen sind keine Nacharbeiten, die man am Ende hinzufügt — sie entstehen natürlich, wenn man von Beginn an strukturiert arbeitet. Dieser Kurs legt dieses Fundament von der ersten Stunde an.