IT-Kurs HTML-Grundlagen 015_HTML5 Neue Funktionen

HTML5 Neue Funktionen

HTML5 ist die neueste Version von HTML und führt viele neue Tags, Attribute und Funktionen ein, die die Funktionalität und Interaktivität des Webs erheblich verbessern.

Einige interessante neue Funktionen in HTML5:

• Das canvas-Element zum Zeichnen
• Die video- und audio-Elemente zur Medienwiedergabe
• Bessere Unterstützung für lokale Offline-Speicherung
• Neue spezielle Inhaltselemente wie article, footer, header, nav, section
• Neue Formularsteuerelemente wie calendar, date, time, email, url, search

<canvas>

Das HTML5 <canvas>-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Das <canvas>-Element basiert auf der JavaScript-Zeichen-API und kann zur Erstellung verschiedener Grafiken verwendet werden, einschließlich Diagrammen, Grafiken, Animationen usw.

Beispiel:

1
<canvas width="500" height="500">
2
    Ihr Browser unterstützt das HTML5 canvas-Tag nicht.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Zeichenkontext abrufen
7
    const ctx = canvas.getContext("2d");
8
    // Kreis zeichnen
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Effekt:

<svg>

Das HTML5 SVG-Element wird zur Erstellung von SVG-Grafiken auf Webseiten verwendet. SVG-Grafiken sind XML-basierte Vektorgrafiken, die verlustfrei skaliert werden können und sich für verschiedene Zwecke eignen, einschließlich:

SVG-Elemente umfassen:

• <svg>-Element: Definiert das Wurzelelement der SVG-Grafik.
• <path>-Element: Definiert Pfadformen.
• <rect>-Element: Definiert rechteckige Formen.
• <circle>-Element: Definiert kreisförmige Formen.
• <ellipse>-Element: Definiert elliptische Formen.
• <line>-Element: Definiert gerade Linien.
• <polygon>-Element: Definiert Polygone.
• <polyline>-Element: Definiert Polylinien.
• <text>-Element: Definiert Text.
• <g>-Element: Definiert eine Gruppe, die verwendet wird, um SVG-Elemente zusammenzufassen.
• <defs>-Element: Definiert globale Attribute, die auf mehrere SVG-Elemente angewendet werden können.

Beispiel:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

Effekt:

SVG und Canvas sind beide Werkzeuge zur Erstellung von Grafiken auf Webseiten. Sie haben jeweils ihre eigenen Vor- und Nachteile und eignen sich für unterschiedliche Szenarien.

SVG ist eine XML-basierte Vektorgrafik, die verlustfrei skaliert werden kann. Das bedeutet, dass SVG-Grafiken in beliebiger Größe angezeigt werden können, ohne an Qualität zu verlieren. SVG-Grafiken können auch mit CSS und JavaScript manipuliert und animiert werden.

Canvas ist eine JavaScript-basierte Zeichen-API, die Bitmap-Grafiken erstellen kann. Das bedeutet, dass Canvas-Grafiken nicht verlustfrei skaliert werden können, aber mit JavaScript komplexere Grafiken erstellt werden können. Canvas-Grafiken können auch mit JavaScript manipuliert und animiert werden.

Spezifische Unterschiede zwischen SVG und Canvas:

• SVG eignet sich für Szenarien:

  • Grafiken, die verlustfrei skaliert werden müssen, wie Symbole, Logos, Illustrationen
  • Grafiken, die mit CSS und JavaScript manipuliert und animiert werden müssen

• Canvas eignet sich für Szenarien:

  • Szenarien, die komplexe Grafiken erfordern, wie Spiele, Animationen
  • Szenarien, die komplexe Operationen mit JavaScript erfordern

HTML5-Formulare

HTML5 führt einige neue Eingabetypen und Attribute ein, um die Funktionalität und Benutzerfreundlichkeit von Formularen zu verbessern.

Neue Formularelemente:

• <datalist>-Element: Wird für eine vordefinierte Optionsliste des <input>-Elements verwendet.

Beispiel:

1
<label for="browser">Browser auswählen:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

Effekt:

Neue Formularattribute:

• <form> / <input> autocomplete-Attribut: Gibt an, dass das form- oder input-Feld eine Autovervollständigungsfunktion haben soll. Wenn der Benutzer beginnt, in ein Autovervollständigungsfeld einzugeben, sollte der Browser die ausgefüllten Optionen in diesem Feld anzeigen.

Beispiel:

1
<form action="demo-form.php" autocomplete="on">
2
  Familienname:<input type="text" name="fname"><br>
3
  Vorname:<input type="text" name="lname"><br>
4
  E-Mail:<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Effekt:

Neue input-Typen:

1
<form action="/submit" method="post">
2
  <label for="name">Name:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">E-Mail-Adresse:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Geburtsdatum:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Telefonnummer:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Absenden" />
15
</form>

Effekt:

[!Zusammenfassung]