HTML5 Neue Elemente (2 von 4)

Vor ein paar Tagen haben wir eine Einführung in HTML5 veröffentlicht und einige der Inhalte, die wir in dieser Serie vorstellen werden, kurz behandelt. Der heutige Beitrag, der zweite in der Vierserie, wird einen Blick auf die Verwendung von sechs der neuen Elemente in HTML5 werfen: Canvas, Artikel, Audio, Video, Meter und Mark.

Denken Sie daran, dass HTML5 nicht für eine breite Verwendung geeignet ist - ändern Sie also noch nichts auf Ihrer Website. Seien Sie versichert, dass HTML5 in Kürze verfügbar ist. Daher können sich diese Konzepte in naher Zukunft als nützlich erweisen.

Das Canvas-Element

Das Element ist ein neuer Container für Grafiken. Beachten Sie, dass die Leinwand lediglich der Bereich ist, in dem Grafiken platziert werden können. Das Element sollte nur zwei Attribute enthalten: Breite und Höhe. Hier ist ein Beispiel:

Die eigentliche Zeichnung für dieses Beispiel erfolgt in JavaScript. Der Schlüssel zum Implementieren der Grafiken in Ihrem Skript besteht darin, durch die Methode auf einen Kontext zu verweisen getContext. Der einzige Kontext, den Sie aufrufen können, ist "2d". Stellen Sie sich den 2D-Kontext als Ihre eigentliche Zeichnungsebene (definiert durch die HTML-Zeichenflächengröße) vor, die bei den Koordinaten 0,0 (ganz oben links auf dem Bildschirm) beginnt. Um ein Objekt zu zeichnen, entscheiden Sie zuerst, an welchen Koordinaten das Objekt beginnen soll. Wenn Sie beispielsweise etwas zeichnen möchten, das zehn Pixel von links und zehn Pixel von oben ist, sind Ihre Koordinaten (10,10).

Es gibt verschiedene Möglichkeiten, den 2D-Kontext zum Erstellen von Grafiken zu verwenden. Es wird alles von einfachen Rechtecken über Kurven und Farbverläufe unterstützt. Für unsere Zwecke halten wir es einfach, um Ihnen den Einstieg zu erleichtern. Hier ist das JavaScript, das die oben umrissenen Prinzipien implementiert:

Funktion draw () {var canvas = document.getElementById ("graphicsCanvas"); if (canvas.getContext) {var context = canvas.getContext ("2d"); context.fillStyle = "rgb (50,50,50)"; context.fillRect (20, 20, 150, 150); context.strokeRect (20, 20, 300, 300); }}

Wenn Sie einen unterstützten Browser (Safari, Firefox oder Opera) verwenden, sollten Sie das folgende Ergebnis sehen, wenn Sie HTML-Code und JavaScript kombinieren, das wir gerade betrachtet haben.

Denken Sie daran, vor dem Zeichnen den 2D-Kontext zu implementieren, da sonst keine Grafiken angezeigt werden. Nur für den Fall, dass Sie sich fragen, was zum Teufel das ist? FillRect? Müll ist ungefähr, hier ist eine kurze Erklärung der Syntax für einige der Zeichnungsmethoden.

Zeichnen von Rechtecken

Zunächst sollten Sie wissen, dass, wenn Sie vier Zahlen im Format (0,0,0,0) sehen, dies (Abstand von links, Abstand von oben, Breite, Höhe) darstellt. Lassen Sie uns nun einige spezifische Syntaxbeispiele betrachten:
fillStyle =? rgb (50, 50, 50); Bestimmt die Farbe der Füllung
fillRect (20, 20, 150, 150); Erzeugt ein einfaches gefülltes Rechteck
strokeRect (20, 20, 150, 150); Erzeugt ein Rechteck mit Strichen
clearRect (20, 20, 150, 150); Erzeugt einen transparenten Bereich (ein Loch)

Formen zeichnen

beginPath (); Startet einen Pfad
closePath (); Schließt einen Pfad
moveTo (20, 20,); Hebt den Zeichenstift an und startet an einem neuen Ort
füllen (); Füllt die gezeichnete Form
Schlaganfall (20, 20); Streicht die gezeichnete Form

Viel mehr!

Weitere Informationen zum Zeichnen mit JavaScript und zur Verwendung des Canvas-Elements finden Sie in Mozillas Tutorial.
Hier ist auch ein praktisches Canvas Cheat Sheet von Jacob Seidelin.

Das Artikelelement

Das Artikelelement ist einfach eine Möglichkeit, auf einen Blogbeitrag, einen Nachrichtenartikel usw. auf Ihrer Seite zu verweisen. Hier ist die Syntax:

<p> Artikel Titel Hier Artikel </p>

Wie Sie sich vorstellen können, ist es sehr einfach, Artikel in Ihrem CSS zu zielen und zu gestalten, ohne eine Klasse zu definieren.

Die Audio- und Videoelemente

Wie das article-Element sind dies einfach Container, die Inhalte enthalten. Sie können den Vorteil sofort sehen, wenn Sie beginnen, diese mit CSS zu gestalten, ohne dass benutzerdefinierte Klassen erforderlich sind. Hier ist die einfache Syntax für jeden (jeder Text, der zwischen den Klammern steht, wird nur in nicht unterstützten Browsern angezeigt):

Nicht unterstützter Browser!> Nicht unterstützter Browser!

Audioattribute

Sowohl die Audio- als auch die Videoelemente enthalten wichtige Attribute, die Sie kennen sollten. Sehen wir uns zunächst das Audioelement an (Quelle: w3shcools).

<strong>Autoplay (wahr oder falsch)</strong> Wenn dies der Fall ist, wird der Ton abgespielt, sobald er bereit ist <strong>Steuerelemente (wahr oder falsch)</strong> Bei true werden dem Benutzer einige Steuerelemente angezeigt, beispielsweise eine Wiedergabetaste. <strong>Start (numerischer Wert)</strong> Legt fest, wo der Player im Audiostream abgespielt werden soll. Standardmäßig wird das Audio am Anfang abgespielt. <strong>Ende (numerischer Wert)</strong> Legt fest, wo der Player im Audiostream aufhören soll zu spielen. Standardmäßig wird das Audio bis zum Ende abgespielt. <strong>Höhe (Pixel)</strong> Legt die Höhe des Videoplayers fest <strong>Breite (Pixel)</strong> Legt die Breite des Videoplayers fest <strong>Endung (numerischer Wert)</strong> Legt fest, wo im Audiostream die Schleife angehalten werden soll, bevor zum Anfang der Schleife gesprungen wird. Standardwert sind die Werte des Endattributs. <strong>Loopstart (numerischer Wert)</strong> Legt fest, wo im Audiostream die Schleife beginnen soll. Standardwert sind die Werte des Startattributs <strong>Spielanzahl (numerischer Wert)</strong> Legt fest, wie oft der Audioclip abgespielt werden soll. Standardeinstellung ist 1. <strong>Poster (URL)</strong> Die URL eines Bildes, das angezeigt werden soll, bevor das Video fertig ist <strong>src (URL)</strong> Die URL des wiederzugebenden Audios

Videoattribute

Das Videoelement enthält die gleichen Attribute wie das Audioelement sowie 3 weitere (Quelle: w3shcools).

<strong>Höhe (Pixel)</strong> Legt die Höhe des Videoplayers fest <strong>Breite (Pixel)</strong> Legt die Breite des Videoplayers fest <strong>Poster (URL)</strong> Die URL eines Bildes, das angezeigt werden soll, bevor das Video fertig ist

Das Meterelement

Das Zählerelement kann für Messungen jeglicher Art (Prozentsatz, Score, Tageszähler usw.) verwendet werden. Bevor wir uns dieses Beispiel anschauen, gehen wir direkt zu den Attributen (wieder direkt von w3shcools).

<strong>hohe Zahl)</strong> Legt fest, an welchem ​​Punkt der Messwert einen hohen Wert berücksichtigt <strong>niedrig (Anzahl)</strong> Legt fest, an welchem ​​Punkt der Messwert als niedriger Wert betrachtet wird <strong>max (Anzahl)</strong> Legt den Maximalwert fest. Der Standardwert ist 1 <strong>min (Anzahl)</strong> Definiert den Mindestwert. Der Standardwert ist 0 <strong>Optimal (Anzahl)</strong> Legt fest, welcher Messwert der beste Wert ist. Ist dieser Wert höher als der Wert des Attributs "high", bedeutet dies, dass je höher der Wert ist, desto besser. Ist dieser Wert niedriger als der Wert des Attributs "low", bedeutet dies, dass je niedriger der Wert ist, desto besser. <strong>Wert (Anzahl)</strong> Definiert den Messwert

Die zwei besonders wichtigen Attribute in diesem Set sind max und min. Das Meterelement kann nur verwendet werden, wenn die Messung einen bekannten Maximal- und Minimalwert aufweist. Das bedeutet nicht notwendigerweise, dass Sie ein Maximum und ein Minimum definieren müssen (Sie können den Standardwert verwenden), nur dass Sie sich dessen bewusst sein müssen. Hier ist ein Beispiel:

<p>Sie haben 25 von 50 oder 50% der versteckten Wörter gefunden!</p>

Beachten Sie, dass für das erste Meter-Element die Angabe von min und max erforderlich war, da der Bereich zwischen 0 und 50 lag. Der zweite Meter verwendete jedoch den Standardbereich von 1-100, da die Prozentangaben normalerweise in diesen Bereich fallen.

Das Mark-Element

Das letzte Element, das wir uns ansehen, ist. Das mark-Element ist einfach im Konzept und kann verwendet werden, um einen bestimmten Textabschnitt hervorzuheben, damit er für den Leser besser wahrnehmbar ist. Hier ist ein Beispiel:

<p>Ein guter Textmarker ist schwer zu finden.</p>

Jetzt können wir das Markierungs-Tag verwenden, um den Abschnitt, den wir in unserem CSS hervorheben möchten, einfach anzuvisieren:

Markierung {Hintergrundfarbe: gelb; Schriftdicke: fett; }

Das Ergebnis ist schöner, hervorgehobener Text, den Sie sofort erkennen können.

Fazit

Zusammenfassend haben wir sechs brandneue Elemente aus HTML5 behandelt. Zuerst haben wir uns das angesehen Segeltuch Element, das ein Container für eine Vielzahl von grafischen Elementen ist, die Sie mit einer Reihe von JavaScript-Funktionen erstellen können. Dann haben wir etwas über das gelernt Artikel Element, das eine neue Möglichkeit darstellt, auf externen Inhalt zu verweisen. Als Nächstes haben wir beschrieben, wie Sie das verwenden Audio- und Video Tags zusammen mit ihren verschiedenen Attributen sowie das korrekte Kennzeichnen von Werten, die in einem bestimmten Bereich liegen, mithilfe von Meter Element. Schließlich haben wir herausgefunden, wie Sie einen bestimmten Textabschnitt mithilfe von markieren Kennzeichen Element.

Ich hoffe, Sie haben so viel lesen gelernt, wie ich es geschrieben habe! Verwenden Sie die folgenden Kommentare, um Ihre Fragen zu stellen oder Ihr eigenes HTML5-Wissen zu teilen. Der nächste Artikel in dieser Reihe ist möglicherweise der wichtigste, da wir uns ein paar neue Elemente ansehen, die einige gravierende semantische Änderungen in der Struktur von HTML-Dateien darstellen. Schauen Sie sich also bald wieder um, wie Sie Ihren HTML-Code für die nächsten Jahre gestalten werden!