|
|
| Zeile 1: |
Zeile 1: |
| == Lernplan für HTML5 und HTML ==
| | {{#mermaid:sequenceDiagram |
| | Client->>DispatcherServlet: HTTP-Anfrage |
| | DispatcherServlet->>Controller: Auswahl der Methode |
| | Controller->>Service: Geschäftslogik |
| | Service->>Repository: Datenzugriff |
| | Repository-->>Service: Daten |
| | Service-->>Controller: Daten |
| | Controller-->>DispatcherServlet: Antwort |
| | DispatcherServlet-->>Client: HTTP-Antwort |
| | }} |
|
| |
|
| === Einführung ===
| | <br> |
| * Was ist HTML?
| |
| * Geschichte von HTML
| |
| * Unterschiede zwischen HTML und HTML5
| |
|
| |
|
| === Grundlegende HTML-Struktur ===
| | {{#mermaid:graphTD |
| <pre><!DOCTYPE html></pre>
| | A[Client: HTTP-Anfrage] --> B(DispatcherServlet: Anfrageempfang); |
| * <pre><html>, <head>, <body></pre>
| | |
| * Meta-Tags und ihre Bedeutung
| | }} |
| | |
| === Textformatierung ===
| |
| * Überschriften <pre><h1> bis <h6></pre>
| |
| * Absätze <pre><p></pre>
| |
| * Textformatierung <pre><b>, <i>, <u>, <strong>, <em></pre>
| |
| | |
| === Links und Bilder ===
| |
| * Hyperlinks <pre><a></pre>
| |
| * Bilder einfügen <pre><img></pre>
| |
| * Alt-Text für Bilder
| |
| | |
| === Listen ===
| |
| * Ungeordnete Listen <pre><ul>, <li></pre>
| |
| * Geordnete Listen <pre><ol>, <li></pre>
| |
| * Verschachtelte Listen
| |
| | |
| === Tabellen ===
| |
| * Grundlegende Tabellenstruktur <pre><table>, <tr>, <td></pre>
| |
| * Tabellenüberschriften <pre><th></pre>
| |
| * Tabellenrahmen und -abstände
| |
| | |
| === Formulare ===
| |
| * Formularelemente <pre><form>, <input>, <textarea>, <button></pre>
| |
| * Formularattribute (action, method)
| |
| * Verschiedene Eingabetypen (text, password, email, etc.)
| |
| | |
| === Multimedia ===
| |
| * Einbetten von Videos <pre><video></pre>
| |
| * Einbetten von Audio <pre><audio></pre>
| |
| * Verwendung von <pre><source></pre> für verschiedene Formate
| |
| | |
| === Semantische HTML5-Tags ===
| |
| * Bedeutung und Verwendung von <pre><header>, <footer>, <article>, <section>, <nav>, <aside></pre>
| |
| * Vorteile semantischer Tags für SEO und Barrierefreiheit
| |
| | |
| === HTML5 APIs ===
| |
| * Einführung in HTML5 APIs
| |
| * Canvas API
| |
| * Geolocation API
| |
| * Web Storage API
| |
| | |
| === Best Practices ===
| |
| * Sauberer und valider HTML-Code
| |
| * Barrierefreiheit (Accessibility)
| |
| * SEO-freundliche HTML-Struktur
| |
| | |
| === Weiterführende Ressourcen ===
| |
| * Offizielle HTML5-Spezifikation
| |
| * Online-Tutorials und Kurse
| |
| * Bücher und Dokumentationen
| |
| | |
| == Abschluss ==
| |
| * Zusammenfassung der wichtigsten Punkte
| |
| * Nächste Schritte und weiterführende Lernpfade
| |