Anfängerleitfaden für: Erstellen von HTML5 / CSS3-Webseiten

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

HTML5 und CSS3 haben das Web in nur 2 Jahren im Sturm erobert. Vor ihnen gab es viele veränderte Semantiken in der Art und Weise, wie Webdesigner Webseiten erstellen sollen, und mit ihrer Ankunft kommen eine Reihe toller Unterstützungen wie alternative Medien, XML-Stil-Tags und progressive Eingabeattribute für Webdesigner, um verträumt zu werden Funktionen wie Animation.

Obwohl die meisten Entwickler potentielle, aber dennoch komplizierte Demos vorführen, sind HTML5 / CSS3 nicht wirklich Raketenwissenschaft, und ich werde Sie durch den entspannenden Prozess führen, um eine Standard-HTML5 / CSS3-Webseite mit umfassender, aber detaillierter Erklärung und Tada! Bonusse wie Lernressourcen und kostenlose HTML5-Vorlagen stehen Ihnen zur Verfügung. Nutzen Sie diese Chance und starten Sie Ihre HTML5-Reise!

Änderungen zwischen HTML4 und HTML5

Sie wundern sich vielleicht, warum es sogar wichtig ist, in HTML5 zu wechseln. Es gibt eine Vielzahl von Gründen, aber vor allem, weil Sie wie jeder andere Designer mit den globalen Internetstandards arbeiten werden. Auf diese Weise finden Sie online mehr Unterstützung und Ihre Webseiten werden in modernen Browsern, die ständig verbessert werden, richtig dargestellt .

(Bildquelle: W3C)

Der Vergleich zwischen HTML4 und HTML5 ist auf der Oberfläche schwer zu erkennen. Aus dem neuen HTML5-Entwurf können Sie vorgestellte Elemente und korrigierte Fehlerbehandlungsverfahren sehen. Browser-Entwickler haben besonders die neuen Spezifikationen zum Rendern von Standard-Webseiten genossen.

Was mehr von HTML5 ist, ist die Umwandlung unseres modernen Webbrowsers. Mit diesen neuen Spezifikationen wird das Web als Ganzes nun als eine Anwendungsplattform für HTML (insbesondere HTML5), CSS und JavaScript angesehen, auf die aufgebaut werden soll. Außerdem schafft dieses System eine elegante Harmonie zwischen Webdesignern und Entwicklern, indem es gemeinsame Standards setzt, denen alle Browser folgen sollten.

Zusätzlich wurden viele Elemente geschaffen, um digitale Medien der neuen Generation darzustellen . Diese beinhalten

Bare HTML5 Skelett

Ich finde, der einfachste Weg, jedes Thema zu verstehen, ist, direkt hineinzutauchen . Also werde ich eine sehr einfache HTML5-Vorlage für eine Webseite erstellen. Ich habe ein paar der neueren Elemente aufgenommen, die ich später ein wenig kategorisieren möchte.

 Willkommen, ein und alles! 
etwas Inhalt hier.
aber auch hier!

Sofort unterscheidet sich dies nicht wesentlich von einer HTML4-Standardseite. Was Sie bemerken können, ist, dass wir keine selbstschließenden Tags mehr benötigen . Das sind wirklich wundervolle Neuigkeiten, da es Ihnen viel Zeit für Ihre Entwicklungsprojekte spart.

Für diejenigen, die es nicht wissen, gab es in XHTML-Entwürfen viele Elemente, die als selbstschließend bezeichnet wurden . Diese würden mit einem Schrägstrich vor dem Operator "größer als" enden, um anzuzeigen, dass Sie kein anderes schließendes Tag an anderer Stelle benötigen. Um beispielsweise ein Meta-Schlagwort-Tag zu erstellen, das Sie verwenden würden ohne die Notwendigkeit einer Schließung anderswo.

Diese Regel gilt weiterhin für HTML5. Aber jetzt brauchst du nicht mal den zusätzlichen Schrägstrich ! ist vollständig gültig, obwohl Sie den XHTML / XML-Standard weiterhin verwenden dürfen. Bei allen standardkonformen Browsern werden beide Elemente auf die gleiche Weise dargestellt.

Definition unserer Seitenbereiche

Der Großteil unseres neuen Codes sollte nicht zu schockierend sein. Unsere Doctype ist urkomisch einfacher denn je, keine Notwendigkeit für übermäßige Körperattribute, und Informationen in unserer Überschrift ist eindeutig gekennzeichnet. Im weiteren Verlauf möchte ich Ihre Aufmerksamkeit auf den Inhalt unserer Website lenken Etikett. Dies umfasst die gesamte Struktur der Hauptseite. Ich habe absichtlich ein paar nette HTML5-Tags verwendet, um anzuzeigen, wie Sie sie in Ihre eigene Arbeit einbeziehen können.

Zuerst sehen Sie, dass die gesamte Seite in einem Div- Tag gekapselt ist. Ich habe dies mit einer ID von Wrapper beschriftet, was bedeutet, dass es sich um den gesamten Inhalt unserer Website handelt. Dies ist nützlich, um eine maximale Breite oder Position auf dem Bildschirm festzulegen. Als nächstes habe ich die Seite in 3 Kernelemente aufgeteilt - eins