HTML: Unterschied zwischen den Versionen

Aus ahrensburg.city
Zur Navigation springen Zur Suche springen
// via Wikitext Extension for VSCode
 
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
== Einführung in HTML ==
== Lernplan für HTML5 und HTML ==
HTML (HyperText Markup Language) ist die Standard-Auszeichnungssprache für Dokumente, die im Web angezeigt werden sollen. HTML beschreibt die Struktur einer Webseite und besteht aus einer Reihe von Elementen, die durch Tags dargestellt werden.


== Grundlegende HTML-Struktur ==
=== Einführung ===
Ein HTML-Dokument hat eine grundlegende Struktur, die aus den folgenden Teilen besteht: Doctype-Deklaration, HTML-Tag, Kopfbereich und Körperbereich.
* Was ist HTML?
* Geschichte von HTML
* Unterschiede zwischen HTML und HTML5


== Textformatierung ==
=== Grundlegende HTML-Struktur ===
HTML bietet verschiedene Tags zur Textformatierung, wie z.B. für fetten, kursiven und unterstrichenen Text.
<pre><!DOCTYPE html></pre>
* <pre><html>, <head>, <body></pre>
* Meta-Tags und ihre Bedeutung


== Links und Bilder ==
=== Textformatierung ===
Links und Bilder sind wesentliche Bestandteile einer Webseite. Links werden mit dem <code>&lt;a&gt;</code>-Tag erstellt und Bilder mit dem <code>&lt;img&gt;</code>-Tag eingefügt.
* Überschriften <pre><h1> bis <h6></pre>
* Absätze <pre><p></pre>
* Textformatierung <pre><b>, <i>, <u>, <strong>, <em></pre>


== Listen ==
=== Links und Bilder ===
HTML unterstützt geordnete und ungeordnete Listen, die mit den Tags <code>&lt;ul&gt;</code> und <code>&lt;ol&gt;</code> erstellt werden.
* Hyperlinks <pre><a></pre>
* Bilder einfügen <pre><img></pre>
* Alt-Text für Bilder


== Tabellen ==
=== Listen ===
Tabellen werden mit dem <code>&lt;table&gt;</code>-Tag erstellt und enthalten Zeilen und Zellen, die mit <code>&lt;tr&gt;</code> und <code>&lt;td&gt;</code> definiert werden.
* Ungeordnete Listen <pre><ul>, <li></pre>
* Geordnete Listen <pre><ol>, <li></pre>
* Verschachtelte Listen


== Formulare ==
=== Tabellen ===
Formulare ermöglichen die Eingabe von Daten durch den Benutzer und werden mit dem <code>&lt;form&gt;</code>-Tag erstellt.
* Grundlegende Tabellenstruktur <pre><table>, <tr>, <td></pre>
* Tabellenüberschriften <pre><th></pre>
* Tabellenrahmen und -abstände


== Multimedia ==
=== Formulare ===
HTML unterstützt die Einbindung von Multimedia-Inhalten wie Audio und Video, die mit den Tags <code>&lt;audio&gt;</code> und <code>&lt;video&gt;</code> eingefügt werden.
* Formularelemente <pre><form>, <input>, <textarea>, <button></pre>
* Formularattribute (action, method)
* Verschiedene Eingabetypen (text, password, email, etc.)


== HTML5-Neuerungen ==
=== Multimedia ===
HTML5 bringt viele neue Elemente und APIs mit sich, wie <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;canvas&gt;</code> und <code>&lt;video&gt;</code>.
* Einbetten von Videos <pre><video></pre>
* Einbetten von Audio <pre><audio></pre>
* Verwendung von <pre><source></pre> für verschiedene Formate


== Best Practices ==
=== Semantische HTML5-Tags ===
Einige Best Practices für HTML umfassen die Verwendung semantischer Tags, die Validierung des HTML-Codes und die Optimierung der Webseiten-Performance.
* 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

Aktuelle Version vom 7. März 2025, 00:05 Uhr

Lernplan für HTML5 und HTML

Einführung

  • Was ist HTML?
  • Geschichte von HTML
  • Unterschiede zwischen HTML und HTML5

Grundlegende HTML-Struktur

<!DOCTYPE html>
  • <html>, <head>, <body>
  • Meta-Tags und ihre Bedeutung

Textformatierung

  • Überschriften
    <h1> bis <h6>
  • Absätze
    <p>
  • Textformatierung
    <b>, <i>, <u>, <strong>, <em>

Links und Bilder

  • Hyperlinks
    <a>
  • Bilder einfügen
    <img>
  • Alt-Text für Bilder

Listen

  • Ungeordnete Listen
    <ul>, <li>
  • Geordnete Listen
    <ol>, <li>
  • Verschachtelte Listen

Tabellen

  • Grundlegende Tabellenstruktur
    <table>, <tr>, <td>
  • Tabellenüberschriften
    <th>
  • Tabellenrahmen und -abstände

Formulare

  • Formularelemente
    <form>, <input>, <textarea>, <button>
  • Formularattribute (action, method)
  • Verschiedene Eingabetypen (text, password, email, etc.)

Multimedia

  • Einbetten von Videos
    <video>
  • Einbetten von Audio
    <audio>
  • Verwendung von
    <source>
    für verschiedene Formate

Semantische HTML5-Tags

  • Bedeutung und Verwendung von
    <header>, <footer>, <article>, <section>, <nav>, <aside>
  • 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