HTML5 Content Authoring Fundamentals — HTML5 & CSS Grundlagen

HTML5 ist die Grundlage jeder Website — und obwohl es alt ist (seit 2014 W3C-Recommendation), entwickelt es sich kontinuierlich weiter. Dieser Einsteiger-Kurs richtet sich an alle, die noch nie HTML geschrieben haben, und vermittelt die Grundlagen für Content-Authoring (Texte, Bilder, Links, einfache Layouts). Block Inhalte in HTML verfassen: Dokument-Struktur (DOCTYPE, html, head, body), Meta-Tags (Charset, Viewport, Title, Description), Überschriften (h1-h6 mit klarer Hierarchie), Absätze (p), Listen (ul/ol/li, dl/dt/dd), Inline-Formatierung (strong, em, code, mark), Zeilenumbrüche und Trennlinien (br, hr), Zitate (blockquote, cite, q). Block Einbetten und Verlinken: Hyperlinks (a-Tag mit href, target, rel), Internal Links (href="#anchor"), externe Links mit rel="noopener noreferrer" für Security, Bilder (img mit src, alt, width, height), Lazy Loading (loading="lazy" für Performance), Picture-Tag für Responsive Images mit verschiedenen Sources, Video-Tag (video mit source, controls, poster, track für Untertitel), Audio-Tag, IFrames für externes Embedding (YouTube, Maps), figure und figcaption für Bild-mit-Beschreibung. Block Formatieren mit CSS: External vs. Internal vs. Inline-CSS (External via link-Tag empfohlen), CSS-Selektoren (Element, Class, ID, Attribut, Pseudo-Class wie :hover/:focus, Pseudo-Element wie ::before/::after), Box Model (margin, border, padding, content — box-sizing: border-box als Best Practice), Typography (font-family, font-size, line-height, color), Backgrounds (color, image, gradient), einfache Layouts mit Flexbox (display: flex, justify-content, align-items, gap). Block Komplexe Inhaltsstrukturen: Tabellen (table, thead, tbody, tr, td, th, mit colspan/rowspan), Forms (form, input mit verschiedenen Types, textarea, select, button, fieldset, legend, label mit for-Attribut), HTML5-Form-Validation (required, pattern, min/max, type=email/url/tel), semantische Tags (header, nav, main, article, section, aside, footer). Block Testen und Veröffentlichen: HTML-Validation mit W3C Validator (validator.w3.org), CSS-Validation, Cross-Browser-Testing (Chrome, Firefox, Safari, Edge), Mobile-Testing (Chrome DevTools Responsive Mode, echte Geräte), Veröffentlichung (FTP, GitHub Pages, Netlify, Vercel als moderne Hosting-Optionen). Block Zusätzliche Web-Technologien: JavaScript als Programmiersprache (für Interaktivität), CSS-Frameworks (Bootstrap, Tailwind CSS), Build-Tools (Vite, Webpack), Frontend-Frameworks (React, Vue, Angular) — alles als Ausblick für weitere Lernpfade.