HTML

HTML5 Die Grundlagen (1 von 4)

Die nächste Iteration von HTML wurde von einigen aufgeregt, von anderen verabscheut und Verwirrung / Angst von allen anderen. Ob Sie es lieben oder hassen, HTML 5 definiert bald, wie Sie Websites erstellen. Dies ist der erste Artikel in einer vierteiligen Serie, in der HTML5 und seine grundlegenden Funktionen vorgestellt und die wichtigsten Unterschiede zu HTML4.01 und XHTML 1.0 erläutert werden, sodass Sie sich und Ihre Websites auf den Übergang vorbereiten können. In der nächsten Woche konzentrieren wir uns auf drei Hauptbereiche:

1. Neue Elemente
2. Semantische Änderungen
3. Holen Sie es heute zum Laufen

In diesem Artikel werden die einzelnen Themen kurz vorgestellt, um Sie auf die folgenden ausführlichen Artikel vorzubereiten.

APIs

Bevor wir uns mit den oben aufgeführten Themen beschäftigen, möchte ich kurz auf ein äußerst wichtiges Feature eingehen, das wir in seinem eigenen speziellen Artikel nicht behandeln werden: die neuen APIs. HTML5 enthält mehrere neue APIs, die in einige der neuen HTML5-Elemente integriert sind (die wir später betrachten werden). Hier ist die vollständige Liste direkt von W3.org:

  • 2D-Zeichnungs-API, die mit dem neuen Canvas-Element verwendet werden kann.
  • API zum Abspielen von Video und Audio, die mit den neuen Video- und Audioelementen verwendet werden kann.
  • Eine API, die Offline-Webanwendungen ermöglicht.
  • Eine API, mit der sich eine Webanwendung für bestimmte Protokolle oder Medientypen registrieren kann.
  • Bearbeitungs-API in Kombination mit einem neuen globalen inhaltsfähigen Attribut.
  • Drag & Drop-API in Kombination mit einem ziehbaren Attribut.
  • API, die den Verlauf anzeigt und das Hinzufügen von Seiten zulässt, um zu verhindern, dass die Zurück-Schaltfläche beschädigt wird.
  • Dokumentübergreifendes Messaging

    • Wie Sie sehen, besteht der Hauptzweck dieser APIs darin, die Erstellung von Webanwendungen zu erleichtern. Beachten Sie, dass die dritte API Offline-Webanwendungen aktiviert. Dies ist eine ausgezeichnete Nachricht für Benutzer und Programmierer, da sie die Verwendung von internetfähigen Anwendungen in einer Offline-Umgebung ermöglicht. Sie können davon ausgehen, dass viele Ihrer bevorzugten Anwendungen Gmail bei der Einführung des Offline-Zugriffs folgen werden.

    Neue Elemente in HTML5

    HTML5 führt einige neue Elemente ein. In Artikel 2 dieser Serie werden einige davon ausführlich behandelt. Im Folgenden finden Sie eine vollständige Liste mit kurzen Beschreibungen (Quelle: w3schools):


  •  Definiert externen Inhalt

  •  Definiert einige Inhalte neben dem Artikel, in dem sie platziert werden
  • Definiert Sound wie Musik oder andere Audioströme
  • Definiert Grafiken wie Grafiken oder andere Bilder
  • Definiert eine Befehlsschaltfläche, z. B. einen Radiobutton, ein Kontrollkästchen oder eine Schaltfläche
  • Definiert eine Liste auswählbarer Daten. Das Datagrid wird als Baumliste angezeigt
  • Definiert eine Liste auswählbarer Daten. Verwenden Sie dieses Element zusammen mit dem Eingabeelement, um eine Dropdown-Liste für den Wert der Eingabe zu erstellen
  • Definiert einen Container für die Datenvorlage. Dieses Element muss über untergeordnete Elemente verfügen, um eine Vorlage zu definieren: Elemente

  •  Definiert die Details eines Elements, das der Benutzer sehen kann, und klicken Sie auf, um es auszublenden
  • Definiert ein Dialogfeld, z. B. eine Konversation
  • Definiert eingebetteten Inhalt, z. B. ein Plug-In
  • Definiert eine Quelle für Ereignisse, die von einem Server gesendet werden

  •  Wird verwendet, um einige Elemente zu gruppieren

  •  Definiert die Fußzeile eines Abschnitts oder Dokuments. Enthält normalerweise den Namen des Autors, das Datum, an dem das Dokument geschrieben wurde, und / oder Kontaktinformationen

  •  Definiert die Kopfzeile eines Abschnitts oder Dokuments
  • Definiert markierten Text. Verwenden Sie das Tag, wenn Sie Teile Ihres Textes hervorheben möchten
  • Definiert eine Messung. Wird nur für Messungen mit bekanntem Minimal- und Maximalwert verwendet

  •  Definiert einen Abschnitt von Navigationslinks
  • Definiert einen Verschachtelungspunkt in einer Datenvorlage für untergeordnete Elemente. Wird zusammen mit den Elementen und verwendet
  • Definiert verschiedene Arten von Ausgaben, z. B. von einem Skript geschriebene Ausgaben
  • Definiert die laufenden Arbeiten. Verwenden Sie das progress-Element, um den Fortschritt einer zeitaufwändigen Funktion in JavaScript anzuzeigen
  • Definiert die Regeln zum Aktualisieren einer Datenvorlage. Wird zusammen mit den Elementen und verwendet

  • Definiert Abschnitte in einem Dokument. B. Kapitel, Kopfzeilen, Fußzeilen oder andere Abschnitte des Dokuments
  • Definiert Medienressourcen für Medienelemente wie und
  • Definiert eine Uhrzeit oder ein Datum oder beides
  • Definiert Video, z. B. einen Movieclip oder andere Videostreams

    • Obwohl wir keine Zeit haben, diese detailliert zu besprechen, werden wir einige der wichtigen Themen wie und untersuchen.

    Semantische Änderungen

    Dies ist der Teil, der die Strukturierung Ihrer Sites grundlegend ändern sollte. In der obigen Liste sind sechs neue Strukturelemente enthalten, die dazu beitragen, den grundlegenden Rahmen von Websites im gesamten Web einheitlich zu gestalten. Diese sechs Elemente sind:

    1.

    2.

    3.

    4.

    5.

    6.

    Stellen Sie sich diese als Ersatz für viele der DIVs vor, die Sie derzeit zur Strukturierung Ihrer Site verwenden. Also statt?

    ,? hast du einfach?

    . Beachten Sie, dass ich? Div class? anstelle von? div id? Dies liegt daran, dass diese Elemente auf der gesamten Seite auf dieselbe Weise wie Klassen wiederholt werden können. Wir werden das später in dieser Woche in Artikel 3 genauer untersuchen.

    HTML5 noch heute zum Laufen bringen

    Lassen Sie sich von dieser Schlagzeile nicht zu sehr begeistern. Wie jeder gute Webentwickler weiß, unterscheiden sich alle großen Webbrowser nach wie vor (einige sind schlechter als andere, Sie wissen, von wem ich spreche), was HTML4.01 und XHTML 1.0 unterstützt. Stellen Sie sich jetzt vor, was dies für eine Änderung bedeutet, die so groß und neu ist wie HTML5. Obwohl Mega-Entwickler wie Google die Akzeptanz von HTML5 weiter vorantreiben, wird dies auf lange Sicht nicht allgemein unterstützt. Das bedeutet jedoch nicht, dass Sie sich heute nicht auf den großen Schalter vorbereiten sollten, und es bedeutet sicherlich nicht, dass es keine cleveren Tricks gibt, um sofort mit HTML5 spielen zu können. In Artikel 4 erfahren Sie, wie Sie früher oder später Ihre HTML5-Reise beginnen können.

    Fazit

    In diesem Artikel wurden die neuen Elemente und APIs in HTML5 kurz vorgestellt.Wir sprachen darüber, wie Sie sich auf die Änderungen freuen sollten, die HTML5 für die Web-Apps von morgen bringen wird. Wir haben auch einen Eindruck von den künftigen semantischen Änderungen und der neuen Struktur erhalten, die unsere Webseiten in der Zukunft annehmen sollen. Schließlich haben wir gelernt, dass HTML5 zwar nicht für die Massen bereit ist, aber wir können unseren schmuddeligen Entwickler noch in die Finger bekommen und heute mit dem Experimentieren beginnen. Schauen Sie sich in der nächsten Woche regelmäßig wieder an, um einen tieferen Einblick in jedes dieser Themen zu erhalten!