Live-Online: Einführung in HTML5

1. Einleitung

Zuerst wird eine Übersicht über das HTML5-Framework gegeben und die Struktur von Webseiten untersucht. Außerdem lernst du die Syntax von HTML5 genauer kennen.

• Architektur, Versionen
• Markup-Sprachen
• Syntax: Element, Attribut, Kategorie
• Style Guide für HTML5

2. Dokumente

In diesem Modul wird der Aufbau einer Webseite genauer untersucht. Dabei wird jedes Element einzeln mit seinen Funktionen vorgestellt.  

• Dokumenttyp HTML5
• Elemente html, head, title, body
• Standardattribute von Webseiten
• Kommentierungen im Code

3. Metainformationen

Die Metainformationen einer Webseite werden zwar nicht dem Betrachter angezeigt, sie liefern aber wichtige Informationen an Browser, Server und Robots. Hier lernst du, wie du alles richtig einstellst. 

• Elemente base und meta
• Welcher Zeichensatz ist richtig?
• Entitäten im Detail erklärt
• Den Viewport bestimmen

4. Überschriften

Die Überschriften einer Website sind maßgeblich für die Struktur der Seite, sowohl für die Benutzer:innen als auch für Robots, die die Webseiten maschinell erfassen.

• Überschriftenebenen im Detail erklärt

5. Abschnitte

Auch wenn das Layout einer Webseite mit anderen Mitteln vorgenommen wird, gibt es grundlegende Elemente, mit denen Abschnitte und Absätze dargestellt werden können. Die Möglichkeiten und Grenzen zeigt dieser Teil des Kurses auf.

• Zeilenumbrüche mit br und wbr
• Horizontale Trennlinien mit hr
• Die Absatzelemente p und pre

6. Zitate

Für die Hervorhebung von Text gibt es mehrere Optionen. Du erfährst, wann welches Element richtig ist und was das für die Darstellung bedeutet.

• Elemente blockquote, address, q, cite

7. Definitionen

Die Definitionen in HTML5 dienen der Auszeichnung von semantischer Bedeutung, Stil und Lesbarkeit des Codes. Hier werden die Elemente vorgestellt und gezeigt, wann sie eingesetzt werden.. 

• Elemente dfn, abbr, details. summary

8. Texte

Die Gestaltung von Textelementen erfolgt mit CSS. Trotzdem gibt es viele Elemente, mit der die Darstellung von Text verändert werden kann.

• Standardelemente für die Textauszeichnung
• Spezialelemente für Formeln
• Elemente für die Formatauszeichnung 

9. Annotationen

Das ruby-Element wird verwendet, um Text mit Anmerkungen anzuzeigen, die typischerweise über oder neben dem Haupttext erscheinen. Es wird hauptsächlich für ostasiatische Schriftsysteme wie Chinesisch und Japanisch verwendet, um Aussprachehinweise (Furigana) oder Übersetzungen für Schriftzeichen bereitzustellen.

• Elemente ruby, rt, rp
• Anwendungsfälle für Annotationen

10. Listen

Lerne die verschiedenen Listentypen in HTML kennen und erfahre, wie man Listenelemente verwendet und Listen verschachtelt.

• Elemente ol, li, ul
• Elemente dl, dt, dd
• Verschachtelung

11. Verweise

Erfahre, wie Hyperlinks zur Navigation in der Webseite erstellt werden und wie iframe-Elemente zur Einbettung von Inhalten verwendet werden. Entdecke auch, wie du Links zu internen und externen Quellen setzen kannst.

• Elemente a, iframe, link

12. Bilder

Erkunde die Verwendung des img-Elements zum Einfügen von Bildern in Webseiten. Lerne dabei auch weitere Elemente kennen, mit denen du interaktive und responsive Bilder erstellen kannst.

• Element img
• Elemente map, area, picture, source

13. Grafiken

Verstehe, wie du die meter- und progress-Elemente für Messanzeigen verwendest, und entdecke die Möglichkeiten von Vektorgrafiken mit svg und die Erstellung von Zeichnungen und Animationen mit canvas.

• Elemente meter und progress
• Element svg
• Element canvas

14. Multimedia

Erfahre, wie Audio- und Video-Inhalte in die Webseite integriert werden und sogar sogar Untertitel und Textspuren in der Seite hinzufügen kannst.

• Element audio
• Element video
• Element track

15. Abbildungen

Lerne, wie du das figure-Element einsetzt, um Abbildungen und Diagramme zu strukturieren und wie du mit figcaption Beschreibungen und Legenden für Abbildungen hinzufügen kannst.

• Element figure
• Element figcaption

16. Tabellen

Tabellen sind ein wichtiges Werkzeug in HTML5, es lassen sich auch komplexe Konstruktionen darstellen. Erfahre, wie du Tabellen erstellst und wie du die erweiterten Techniken anwendest.

• Element table
• Elemente tr, th, td
• Spezialelemente zur Gestaltung von Tabellen

17. Layouts

Entdecke, mit welchen Layoutelementen du die Struktur deiner Webseite gestaltest, und lerne, wie diese Elemente zur semantischen Gliederung und besseren Zugänglichkeit beitragen.

• Das Haupt-Layoutelement div
• Elemente für einzelne Seitenbereiche 

18. Formulare

Erfahre alles über die Erstellung von Formularen mit dem form-Element und den vielen verschiedenen Eingabeelementen. Dabei erfährst du auch, wie du benutzerfreundliche und interaktive Formulare gestaltest.

• Das Element form
• Elemente zur Texteingabe
• Interaktive Elemente 
• Elemente für Kontextattribute

• Du erwirbst fundierte Kenntnisse über die grundlegenden und fortgeschrittenen HTML5-Elemente und -Techniken.
• Du lernst, wie du verschiedene HTML5-Elemente effektiv einsetzt, um ansprechende und funktionale Webseiten zu gestalten.
• Du erfährst wie du die besonderen Funktionen in HTML5 zur Integration von Multimedia, Grafiken und interaktiven Elementen einsetzt.
• Du verstehst, wie du Inhalte semantisch korrekt und benutzerfreundlich strukturieren, um die Zugänglichkeit und Suchmaschinenoptimierung zu verbessern.

Dieser Kurs richtet sich an alle, die Webseiten erstellen müssen:

• Webmaster
• Webentwickler:innen
• Webdesigner:innen
• Softwareentwickler:innen
• Content-Manager:innen
• u.v.m.