Hypertext Markup Language (HTML) ist seit den frühen 1990er Jahren eine Kerntechnologie für das Web. Tim Berners-Lee entwickelte HTML 1989 als einfache, aber effektive Methode zur Codierung elektronischer Dokumente. Tatsächlich bestand der ursprüngliche Zweck eines Webbrowsers darin, als Lesegerät für solche Dokumente zu dienen. Zwei Jahrzehnte später ist der Browser selbst zu einem Portal zu einer Welt der Online-Medien geworden. Aus diesem Grund ist HTML5 nicht nur eine weitere HTML-Revision, sondern ein umfassender Standard für die Funktionsweise von Webseiten .
Um besser zu verstehen, was HTML5 einzigartig macht, drehen wir die Uhr ein wenig zurück. Im Jahr 1994 befand sich HTML noch in seiner ersten Revision, Mosaic und Netscape dominierten den Browsermarkt, und die meisten Menschen hatten dieses neue Ding namens World Wide Web noch nicht erlebt. In diesem Jahr leitete der HTML-Schöpfer Berners-Lee eine neu gegründete Gruppe für Webstandards, die als World Wide Web Consortium (W3C) bekannt ist.
Obwohl das W3C heute eine angesehene Standardisierungsbehörde ist, haben die kommerziellen Akteure auf dem Browsermarkt der 1990er Jahre diese Standards weitgehend ignoriert und ihre eigenen Wege eingeschlagen. Bis 1995 hatte das W3C die zweite Revision des HTML-Standards veröffentlicht, und der Web-Neuling Microsoft war mit seinem Browser Internet Explorer (IE) auf dem Vormarsch. Microsoft ignorierte Standards weitgehend, und Netscape bemühte sich, einen respektablen Marktanteil zu halten, während IE zu dominieren begann [Quelle: Harris].
Während dieser frühen Browserkriege standen Webentwickler vor der Herausforderung, ihre Websites mit jeder neuen Version der wichtigsten Browser sowie mit den weniger verbreiteten Browsern Opera und Apple Safari kompatibel zu halten. Obwohl das W3C 1997 HTML 3.2 veröffentlicht hatte, gefolgt von HTML 4 im Jahr 1998, schien die Befolgung der Standards weniger wichtig zu sein, als mit browserspezifischen Funktionen Schritt zu halten. Dies dauerte bis 2003, als die von der Community betriebene Mozilla Foundation den Trend brach. Nach seiner ursprünglichen Veröffentlichung des Mozilla-Browsers, gefolgt von seinem Firefox -Browser im Jahr 2004, hackte sich Mozilla schnell gegen die Dominanz des IE. Darüber hinaus folgten diese neuen Browser dabei tatsächlich bestehenden W3C-Standards.
Während Mozillas Firefox unter Verwendung des alternden HTML-4-Standards weiter wuchs, schloss sich Mozilla 2004 Apple und Opera an, um eine Gruppe namens Web Hypertext Application Technology Working Group (WHATWG) zu gründen. Das Ziel von WHATWG ist es, die HTML-Entwicklung am Leben zu erhalten. Obwohl es ursprünglich zögerte, schloss sich W3C 2006 der HTML-Wiederbelebung an. Gemeinsam kombinierten WHATWG und W3C bestehende Spezifikationen für HTML und XHTML und entwickelten sie weiter, um die neue HTML5-Spezifikation zu erstellen. Diese Spezifikation wird derzeit vom W3C gepflegt und veröffentlicht [Quelle: W3C , WHATWG ].
Dieser Artikel untersucht diese neue HTML5-Technologie. Wir werden uns XHTML und andere Technologien ansehen, die in HTML5 eingeflossen sind, und die grundlegenden Punkte behandeln, wie HTML5 verwendet werden kann, um attraktive, standardkonforme Webinhalte zu erstellen. Wir werden uns auch einige aufregende Möglichkeiten ansehen, wie Menschen HTML5 im Web verwenden. Beginnen wir mit einem Blick auf die Ziele von HTML5 und warum es weit mehr als nur HTML ist.
- HTML5 geht über HTML hinaus
- HTML5 Foundation-Technologien
- Grundlegender HTML-Inhalt
- Formen
- Semantische Elemente
- Medienelemente und die Flash-Rivalität
- Die Leinwand
- Erstellen des Looks mit CSS3
- JavaScript als zentrale Komponente
- Technologien für Webanwendungen
- Bahnbrechende Proofs of Concept
HTML5 geht über HTML hinaus
An sich konzentriert sich HTML auf die Präsentation statischer Dokumente, also Text, Links und sonst wenig. Durch HTML 4 war der HTML-Standard eins mit der HTML-Syntax, die verwendet wurde, um dieses Ziel zu erreichen. Der HTML5-Standard hat ein viel umfassenderes Ziel, den Inhalt, das Design und die Anwendungsschnittstellen hinter einer Webseite zu beschreiben, wenn sie in Ihren Browser geladen wird. Genauer gesagt richtet HTML5 eine einzige Syntax für die Interaktion mit allen Elementen ein, die die Webseite in den Speicher Ihres Computers geladen hat.
Es gibt einen potenziellen Verwirrungspunkt, den wir in Bezug auf den Begriff „HTML5“ klären sollten, bevor wir fortfahren. Es gibt eine neue Version der Auszeichnungssprache selbst namens HTML5. Diese Sprache ist jedoch nur ein Teil des breiteren Standards, der den Namen HTML5 trägt. Dieser Artikel behandelt alle Komponenten des HTML5-Standards, von denen die HTML5-Sprache ein Kernstück ist.
Wie lädt der Browser vor diesem Hintergrund eine Seite, die nach dem neueren HTML5-Standard und nicht nach der altbewährten Sprache HTML 4 geschrieben ist? Schließlich verlassen wir uns normalerweise nur darauf, dass unsere Browser Webseiten laden, ohne uns Gedanken über das HTML dahinter zu machen. Die Antwort ist einfach: Solange der Browser selbst HTML5 unterstützt, kann er mit allem umgehen, was Sie darauf werfen, ohne zwischen HTML-Revisionen unterscheiden zu müssen.
Um diese Magie zu verwirklichen, integriert der HTML5-Standard neue Versionen mehrerer Technologien, die zusammenarbeiten, um gemeinsame Ziele zu erreichen. Diese Ziele umfassen Folgendes:
- Halten Sie die Sprache einfach und intuitiv
- Stellen Sie sicher, dass der Code einfach zu lesen und zu warten ist
- Adressierung von Seiten als interaktive Anwendungen und nicht als statische Dokumente
- Verwenden von Cascading Style Sheets (CSS) zum Gestalten des Inhalts
- Erkennen von JavaScript als zentrale Scripting-Komponente für Webseiten
- Umfassen dynamischer Inhalte von serverseitigen Technologien wie PHP und ASP
Nachdem Sie nun wissen, dass HTML5 mehr ist als das HTML-Markup selbst, wollen wir uns die grundlegenden Technologien im Standard ansehen.
HTML5 Foundation-Technologien
Eine Auszeichnungssprache verwendet eine Reihe von Tags, um Elemente in einer Datei zu markieren. Das Markup stützt sich auf eine Art Modell, das definiert, was diese Elemente sind und wie sie verwendet werden. Da es bei HTML schon immer um die Kodierung von Dokumenten ging, stützt es sich auf ein sogenanntes Document Object Model (DOM). Das DOM ist in die Webbrowser-Anwendung selbst integriert. Die Auszeichnungssprache ist also nur eine Möglichkeit, dem Browser Anweisungen auf der Grundlage eines Modells zu geben, das er bereits versteht.
Um die Beziehung zwischen einem DOM und HTML besser zu verstehen, stellen Sie sich das DOM als eine Schachtel mit Stempeln vor. Jeder Stempel ist ein anderes Element innerhalb des DOM. Jede in HTML geschriebene Seite ist nur eine Reihe von Stempelabdrücken, die mit Ihren eigenen benutzerdefinierten Inhalten ausgefüllt werden. Der Webbrowser kann alles anzeigen, was aus den Stempeln in diesem Feld erstellt wurde.
Technisch gesehen ist das DOM eine Anwendungsprogrammierschnittstelle (API), die eine plattformneutrale Möglichkeit bietet, entweder HTML- oder XML-Dokumente zu verarbeiten. (Extensible Markup Language, oder XML, sieht ähnlich aus wie HTML, ermöglicht es dem Programmierer jedoch, einen benutzerdefinierten Satz von Elementen hinzuzufügen, die Sie in einem Dokument verwenden können.) Der HTML5-Standard erfordert das als DOM5-HTML bekannte DOM. Die neuesten Versionen der Browser Chrome , Firefox , IE, Safari und Opera sind auf das Wachstum von HTML5 vorbereitet und können alle Seiten unter dem DOM5-HTML verarbeiten.
Eine weitere wichtige Grundlage für HTML5 sind die zugehörigen MIME- Typen (Multipurpose Internet Mail Extensions). MIME ist ein Standard der Internet Engineering Task Force (IETF), um internetfähige Software darüber zu informieren, welche Art von Inhalt sie zu verarbeiten versucht. Dies entspricht normalerweise einem bestimmten Dateityp, z. B. einem HTML-Dokument oder einer MP3-Audiodatei.
Webentwickler geben MIME-Typen an, wenn sie eine Webseite codieren. Dadurch wird der Browser veranlasst, die entsprechenden Dateien ihrem Typ entsprechend zu laden. Es gibt zwei MIME-Typen, die DOM5-HTML verbinden, um die Basis des neuen HTML5-Standards zu bilden: der HTML-MIME-Typ (text/html) und der XML-MIME-Typ (application/xhtml+xml). HTML5 enthält Aktualisierungen in der Syntax für diese beiden MIME-Typen.
Kurz gesagt, die grundlegenden Technologien im HTML5-Standard sind DOM5-HTML und die HTML5-kompatiblen MIME-Typen für HTML und XML. Lassen Sie uns als Nächstes fortfahren, wie Sie eine Webseite mit HTML5 zusammenstellen.
Grundlegender HTML-Inhalt
HTML5 enthält mindestens Version 5 der grundlegenden HTML-Syntax. Der Beispielcode in der Seitenleiste auf dieser Seite zeigt, wie dieser HTML-Code für eine einfache Webseite aussehen könnte. Wenn Sie im Internet surfen, verwenden Sie die Option "Quelle anzeigen" oder eine ähnliche Option in Ihrem Browser, um den HTML-Code (und anderen Code) anzuzeigen, der zum Erstellen der Seite geladen wurde, die Sie gerade anzeigen. Der gesamte in unserem Beispiel gezeigte Code ist auch abwärtskompatibel mit HTML 4, was bedeutet, dass er keine der neuen Ergänzungen enthält, die in HTML5 verfügbar sind.
Obwohl es nicht auf allen Webseiten vorhanden ist, empfiehlt es sich, Ihre HTML-Datei mit einer Dokumenttypdeklaration (doctype) zu beginnen, wie im Beispiel gezeigt. Dies bestätigt, dass der Browser beim Interpretieren des Dokuments Standard-HTML erwarten sollte. Einige Entwickler verlassen sich auf Erweiterungen des HTML-Standards, die Document Type Definition (DTD)-Dateien verwenden. Wenn dies der Fall ist, gibt der Entwickler den Speicherort der DTD als Teil dieses Dokumenttyps an.
Neben dem Doctype ist der restliche Code im Beispiel die Standard-HTML-Syntax. Wenn Sie mit dieser Syntax nicht vertraut sind, lesen Sie unseren Artikel Funktionsweise von Webseiten .
Was ist also neu an diesen grundlegenden Elementen in HTML5? Hier ist die Liste, die wir uns auf den folgenden Seiten genauer ansehen werden.
- Neue und aktualisierte Formularelemente – Gestaltung der Formularstruktur und Verarbeitung von Formulareingaben des Benutzers
- Semantische Elemente – Identifizieren von Inhalt basierend auf seiner Rolle innerhalb einer Webseite
- Medienelemente – Einbetten von Audio, Video und anderen interaktiven Medien, ohne dass Browsererweiterungen von Drittanbietern erforderlich sind
- Ruby-Elemente - Unterstützung der Internationalisierung für Webseiten in asiatischer Sprache
Formen
Obwohl Formulare (Abschnitte einer Website, in die Benutzer bestimmte Daten wie Namen, Adressen usw. eingeben können) Teil der frühesten in HTML verfügbaren Elemente waren, fehlten ihnen vor HTML5 viele nützliche Funktionen. Um dies auszugleichen, haben Drittentwickler Software für Webformulare entwickelt, die grundlegende HTML-Formulare fast veraltet erscheinen lässt. HTML5 hauchte Formularen jedoch neues Leben ein, mit neuen Formularelementen, Eingabetypen und Attributen für vorhandene Elemente.
Lassen Sie uns, ohne zwischen alter und neuer Syntax zu unterscheiden, den allgemeinen Ansatz zum Erstellen eines Formulars für Ihre Webseite mit HTML5 untersuchen. Hier einige empfohlene Schritte für den Einstieg:
- Erstellen Sie einen Formularblock mit der
- Bestimmen Sie einen Block von Feldern innerhalb des Formulars mithilfe von
- Ordnen Sie jedes Feld im Feldsatz mithilfe von
- Fügen Sie in jedem Label-Tag den Feldnamen hinzu, wie er angezeigt werden soll, sowie dieTag für das Feld selbst.
- Verwenden Sie das type-Attribut innerhalb des Eingabe-Tags (), die den Browser auffordert, die Eingabe des Benutzers basierend auf diesem Typ zu validieren. Dadurch entfällt die Notwendigkeit für zusätzlichen Code, um die Validierung zu handhaben und zur erneuten Eingabe aufzufordern. HTML5 umfasst die folgenden Eingabetypen: Datum, Uhrzeit, Datum/Uhrzeit, Datum/Uhrzeit-lokal, Monat, Woche, Nummer, E-Mail, Tel, URL, Bereich, Farbe und Suche. Sie können das Musterattribut auch mit einem regulären Ausdruck verwenden, um ein benutzerdefiniertes Validierungsmuster zu erstellen.
- Geben Sie erforderliche Felder an, indem Sie das erforderliche Attribut für ein Eingabeelement hinzufügen.
- Verwenden Sie das Autofokus-Attribut, um ein bestimmtes Eingabeelement als erstes Element im Formular festzulegen. Hier platziert ein Webbrowser nach dem Laden des Formulars automatisch den Cursor des Benutzers.
- Verwenden Sie bei Bedarf das Platzhalterattribut, um Texthinweise dazu hinzuzufügen, was in ein bestimmtes Feld eingegeben werden soll.
- Legen Sie CSS-Stile für „:required“ und „:invalid“ fest, damit der Benutzer einen visuellen Hinweis auf fehlende Informationen oder Eingaben hat, die für einen bestimmten Eingabetyp nicht validiert werden.
Eine vollständige Liste der Formularelemente und ihrer Attribute finden Sie im aktuellen HTML5-Referenzhandbuch. Beachten Sie außerdem, dass die Unterstützung einiger Formularfelder je nach Webbrowser unterschiedlich ist. Stellen Sie sicher, dass Sie Ihr Formular in jedem Browsertyp testen, den Ihre Website unterstützen soll.
Während HTML-Formularelemente in Version 5 mehr Funktionen haben, ist der nächste Elementtyp komplett neu in HTML5.
Semantische Elemente
Semantische Elemente in HTML5 sind, wie der Name schon sagt, solche, die sich auf die Bedeutung bestimmter Inhalte beziehen. Die Verwendung von Tags allein reicht nicht aus, da die meisten Websites heutzutage mehrere unterschiedliche Arten von Inhalten auf einer einzigen Seite enthalten. Webentwickler müssen separate Regeln dafür anwenden, wie jede Art von Inhalt aussehen oder sich verhalten soll.
Ohne semantische Elemente haben Webentwickler gearbeitet
Im Laufe der Zeit wurden bestimmte Inhaltstypen auf Websites sehr verbreitet, wie z. B. Kopfzeilen, Fußzeilen, Menüs und Navigationspunkte. HTML5 integriert diese, indem es standardmäßige semantische Elemente hinzufügt. Das bedeutet, dass Sie Ihren Block in hilfreiche semantische Elemente statt in eine Reihe von aufteilen können
Das Folgende ist die Liste der semantischen Seitenelemente mit einer kurzen Definition von jedem. Stellen Sie sicher, dass Sie eine HTML5-Referenz finden, der Sie vertrauen können, um eine vollständige Liste gültiger Attribute und untergeordneter Elemente für jedes semantische Element zu erhalten.
Blockelemente:
- Abschnitt – eine generische Seitenaufteilung, die verwendet wird, um einen größeren Inhaltsblock aufzuteilen
- Artikel – Inhalt, der ursprünglich aus einer externen Quelle stammt und manchmal beim Laden der Seite mithilfe eines Aggregator-Skripts dynamisch hinzugefügt wird
- Kopf- und Fußzeile – Blöcke, die oben und unten auf jeder Seite erscheinen
- hgroup – eine Gruppierung mehrerer zusammengehöriger Header, z. B. Titel und Untertitel
- menu -- eine Liste von Befehlen (siehe Befehlselement) und Attributen, die das Verhalten des Menüs spezifizieren
- nav – identifiziert einen Block, der ausschließlich für die Website-Navigation bestimmt ist, normalerweise eine ungeordnete Liste von Links zu anderen Seiten auf der Website
- Adresse – enthält Kontaktinformationen für den Autor des Inhalts innerhalb eines Blocks, z. B. eines Artikels, Abschnitts oder des gesamten Seitentexts
- nebenbei -- gibt an, dass der Inhalt als Seitenleiste behandelt werden soll
Inline-Elemente:
- Zusammenfassung und Details – Wechseln Sie zwischen Teaser/Zusammenfassung und vollständigen Details für denselben Inhalt
- figure und figcaption – Elemente, die verwendet werden, um allgemeines Verhalten auf Bilder anzuwenden, unabhängig davon, welche Medienelemente (img, svg oder canvas) verwendet werden, um sie einzuschließen
- time – Text, der ein Kalenderdatum, die Uhrzeit oder beides darstellt, so formatiert, dass der Browser bei Bedarf Zeitzonenunterschiede anpassen kann
- Befehl -- ein Label und ein Verhalten, das diesem Label zugeordnet ist, wenn Sie die Tastatur oder Maus verwenden, um damit zu interagieren, normalerweise innerhalb eines Menüblocks verwendet
- dfn – ein Begriff, der innerhalb des Inhalts definiert wird
- wbr – ein Tag, das eine akzeptable Stelle angibt, an der Text innerhalb eines Wortes umgebrochen werden kann, wenn er über mehrere Zeilen umbrochen wird
Semantische Elemente wurden als Verbesserung gegenüber allgemeineren HTML-Elementen erstellt. Der nächste neue Elementtyp soll jedoch ein vollständiger Ersatz für Medienerweiterungen von Drittanbietern in Webbrowsern sein.
Platz oder kein Platz?
Sie haben vielleicht bemerkt, dass bei Verweisen auf andere HTML-Versionen wie HTML 4 ein Leerzeichen vor der Zahl steht, während Verweise auf HTML5 kein Leerzeichen enthalten. In der HTML-Community gab es viele Diskussionen und Debatten über genau dieses Thema, aber schließlich übernahmen sowohl WHATWG als auch W3C HTML5 als offizielle Schreibweise , um die Dokumentation konsistent zu halten.
Medienelemente und die Flash-Rivalität
Eines der am meisten diskutierten Features von HTML5 ist sein neuer Ansatz zum Einbetten von Medien in eine Webseite . Wir werden uns später in diesem Artikel einige erstaunliche Anwendungen dieser HTML5-Funktion ansehen. HTML5 bewerkstelligt diese Einbettung, ohne dass ein externes Browser-Plugin erforderlich ist. Im Folgenden sind die in HTML5 verfügbaren Medienelemente aufgeführt:
- audio -- bettet Audio in die Seite ein und enthält Attribute zur Angabe, wie es abgespielt werden soll; Die unterstützten Dateiformate variieren je nach Webbrowser
- video – bettet Video in die Seite ein und enthält Attribute zur Angabe, wie es abgespielt werden soll; Die unterstützten Dateiformate variieren je nach Webbrowser
- Quelle – wird mit Audio- oder Videoelementen verwendet, um eine Quelle zu identifizieren; Für ein einzelnes Element können mehrere Quellen angegeben werden
- Einbetten – bettet den Medientyp für Inhalte ein, die von anderen Medienelementen möglicherweise nicht unterstützt werden, und gibt sie an
- canvas – reserviert einen Teil der Seite oder des Computerbildschirms, auf dem JavaScript Bilder zeichnen kann; In Kürze werden wir mehr darüber erfahren, wie diese wichtige neue Funktion funktioniert
- svg – Betten Sie Vektorgrafiken ein, die mit der SVG-Markup-Sprache codiert sind, sodass sie dynamisch auf den Bereich der Seite skaliert werden können, in dem sie geladen werden, ohne dass die Grafikqualität verloren geht
Als sich HTML5 entwickelte, stellten Marktexperten die Frage, ob es Flash ersetzen würde, das derzeit von Adobe kontrolliert wird. Flash ist ein Mediaplayer, den Sie Ihrem Webbrowser als Plug-in hinzufügen können. Da Flash über alle Funktionen verfügt, die für eine Website zum Einbetten verschiedener Medientypen erforderlich sind, sind Websites wie YouTube seit Jahren darauf angewiesen. Es gibt sogar einige Webanwendungen, die vollständig auf Flash angewiesen sind, um ihre interaktiven Schnittstellen zu betreiben. Die Einführung von Flash war 2007 so weit verbreitet, dass viele Verbraucher bei der Veröffentlichung des mit Spannung erwarteten Apple iPhone verärgert waren, als sie hörten, dass sein Betriebssystem Apple iOS Flash nicht unterstützte.
Als Google , die wohl größte Marke im Internet, kopfüber in die Entwicklung seiner Apps mit HTML5 einstieg, wurden Flash-Unterstützer aufmerksam. Vor HTML5 war die einzige Bedrohung für die Dominanz von Flash Webanwendungsentwickler, die bereit waren, benutzerdefinierte HTML/JavaScript-Alternativen zu erstellen und zu pflegen. Mit HTML5 sind solche umständlichen Anpassungen nicht mehr erforderlich, wenn Sie ein interaktives Medienerlebnis schaffen, das mit der Flash-Technologie konkurrieren kann.
Also, wer wird gewinnen: Flash oder HTML5? Die kurze Antwort lautet: „Weder noch“. Jede Technologie hat ihre eigenen Merkmale, Vor- und Nachteile. Darüber hinaus haben Adobe und Google an Flash-zu-HTML5-Konvertierungstools gearbeitet. Zum Zeitpunkt des Verfassens dieses Artikels scheint es, dass, obwohl HTML5 an Status gewinnt, Flash wahrscheinlich auch noch eine Weile seine eigene Popularität behalten wird.
Wechseln Sie zur nächsten Seite, wo wir das Canvas-Element aufschlüsseln und erklären, wie Sie es in Ihren HTML5-Webseiten verwenden.
Die Leinwand
Eine der wichtigsten neuen Funktionen von HTML5 ist der Canvas. Mit der Canvas-Funktion können Sie einen Abschnitt einer Webseite identifizieren , Inhalte darin zeichnen und interaktive Funktionen hinzufügen. All dies ist durch eine Kombination aus HTML- und JavaScript -Code möglich. Sehen wir uns die drei Teile an, die Sie zum Einrichten einer Leinwand in HTML5 benötigen:
Teil 1: Verwenden Sie die
Breite = "400"
Höhe = "300>
Wenn Sie diesen Text sehen, Ihr Browser
hat keine HTML5-Canvas-Unterstützung.
Teil 2: Erstellen Sie das JavaScript, das Inhalte in die Leinwand zeichnet. Später erfahren Sie, wie Sie den einer HTML5-Webseite zugeordneten JavaScript-Code hinzufügen und verwalten. Sehen wir uns hier einfach ein Beispiel-JavaScript an, das Sie für Canvas-Objekte verwenden können. Der folgende Code zeichnet ein Rechteck innerhalb der obigen Leinwand:
Funktion drawRectangle() {
var targetCanvas = document.getElementById("sampleCanvas");
var rectContext = sampleCanvas.getContext("2d");
rectContext.fillStyle = "blau";
rectContext.fillRect(50, 25, 150, 100);
}
Diese Funktion zeichnet ein ausgefülltes blaues Rechteck innerhalb Ihrer Leinwand. Die beiden "var"-Zeilen erstellen Variablen, die Sie verwenden können. Das erste (targetCanvas) identifiziert das Canvas-Element, auf das Sie abzielen, anhand seiner ID aus dem HTML. Der zweite (rectContext) richtet einen zweidimensionalen Kontext zum Zeichnen ein. Stellen Sie sich den Kontext als eine klare Glasschicht vor, die auf die Leinwand gelegt wird, und Sie rufen Funktionen auf, um auf diesem Glas zu zeichnen.
Die „fillStyle“-Zeile identifiziert die Farbe Blau anhand des Namens, den HTML erkennt und mit einer seiner benannten Farben verknüpft. Sie können auch beliebige Farben, Muster oder Farbverläufe verwenden, wie Sie es beim Schreiben von Stilcode in HTML oder CSS tun würden. Die Zeile "fillRect" zeichnet das Rechteck beginnend mit einem Versatz von oben links, wobei die ersten beiden Zahlen die x- und y-Versätze sind, als ob sich die obere linke Seite der Leinwand bei den Koordinaten (0,0) befände. Die zweiten beiden Zahlen geben die Breite bzw. Höhe des Rechtecks an.
Teil 3: Aufruf der JavaScript-Funktion aus dem HTML-Code. Dies verbindet die beiden Teile miteinander. Sie könnten die Funktion aufrufen, sobald die Webseite geladen wird, was sinnvoll ist, wenn Sie Canvas verwenden, um interaktive Seiteninhalte zu zeichnen, die angezeigt werden müssen, sobald die Seite geladen wird. Eine weitere Option besteht darin, eine Schaltfläche, ein Menü oder ein anderes Element im HTML-Code zu erstellen, das das Zeichenereignis auslöst. Das Folgende ist ein Beispiel für eine Schaltfläche, mit der Sie das obige Beispielskript ausführen könnten:
Tauchen Sie ein in HTML5 hat eine leicht verständliche Anleitung zum Erstellen von Canvas-Elementen für Ihre Webseiten. Darüber hinaus sollte eine zuverlässige HTML5-Referenz umfangreiche Ressourcen zum Zeichnen anspruchsvoller Grafiken bieten, sowohl unbewegt als auch bewegt. Wenn Sie den Canvas in HTML5 ausgiebig nutzen möchten, müssen Sie mit der Programmierung in JavaScript vertraut sein. Lassen Sie uns als Nächstes untersuchen, wie CSS3 das Erscheinungsbild einer HTML5-Webseite erzeugt.
Erstellen des Looks mit CSS3
Jedes HTML-Element verfügt über eine Reihe von Attributen, die Sie im Code verwenden, um das Aussehen oder die Funktion dieses Elements zu ändern. Der Stil und verwandte Attribute passen die Größe, Farbe, Platzierung, Rahmen und andere physische Aspekte des Elements an. Im Laufe der Jahre des Bestehens des Webs haben Website-Entwickler weitgehend die Praxis übernommen, Stil und Inhalt zu trennen. Durch diese Trennung genießen Entwickler die folgenden Vorteile:
- Weniger zu wartender Code: Mehrere Elemente auf mehreren Webseiten können dieselben Stile verwenden, ohne den Stilcode für jedes Element zu wiederholen.
- Einfachere Wartung im Laufe der Zeit: Das Aktualisieren auf einen neuen Stil oder das Korrigieren eines vorhandenen Stils bedeutet, dass nur ein Teil des Stilcodes geändert wird, anstatt jedes Element mit diesem Code zu aktualisieren.
Obwohl das Styling in Übereinstimmung mit dem HTML-Code platziert werden kann, ist es daher die beliebtere Wahl für Webentwickler, Cascading Style Sheets (CSS) zu verwenden, um den gesamten Styling-Code zu verwalten, der mit einer Website verbunden ist. Der HTML-Code für jede Seite kann auf ein oder mehrere Stylesheets verweisen, die Ihr Browser laden sollte, wenn die Seite geladen wird. Diese Stylesheets in Form von CSS-Dateien sollen nachahmen, was Sie möglicherweise eingeben
