Einsteigerhandbuch zum Erstellen von HTML5 / CSS3-Webseiten

Dieser Artikel ist Teil unseres "HTML5 / CSS3-Tutorials" - engagiert, um Sie zu einem besseren Designer und / oder Entwickler zu machen. Klick 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 geänderte Semantiken in der Art und Weise, in der Webdesigner erwartet werden, Webseiten zu erstellen, und mit ihrer Ankunft kommen eine Reihe großartiger Unterstützungen wie alternative Medien, Tags im XML-Stil und progressive Eingabeattribute für Webdesigner zum Träumen Funktionen wie Animation.

Obwohl die meisten Entwickler potentielle, aber dennoch komplizierte Demos zu präsentieren scheinen, sind HTML5 / CSS3 keine wirklichen Raketenwissenschaften. Ich werde Sie durch den entspannenden Prozess führen, um eine standardmäßige HTML5 / CSS3-Webseite mit umfassenden, aber ausführlichen Erklärungen und Tada zu erstellen! Bonusse wie Lernressourcen und kostenlose HTML5-Vorlagen stehen Ihnen zur Verfügung. Nutzen Sie die Gelegenheit, um Ihre HTML5-Reise zu beginnen!

Änderungen zwischen HTML4 und HTML5

Sie fragen sich vielleicht, warum es sogar wichtig ist, in HTML5 zu wechseln. Es gibt unzählige Gründe, aber vor allem, weil Sie es sind Arbeiten mit den globalen Internetstandards wie jeder andere Designer. Auf diese Weise finden Sie online mehr Unterstützung und Ihre Websites werden in modernen Browsern ordnungsgemäß dargestellt die ständig verbessert werden.

(Bildquelle: W3C)

Ein Vergleich zwischen HTML4 und HTML5 ist auf Oberflächenebene schwer zu erkennen. In der Anzeige des neuen HTML5-Entwurfs können Sie die vorgestellten Elemente sehen und Fehlerbehandlungsverfahren korrigieren. Browserentwickler haben die neuen Spezifikationen für das Rendern von Standardwebseiten besonders genossen.

Was mehr aus HTML5 ist, ist die Konvertierung unseres modernen Webbrowsers. Mit diesen neuen Spezifikationen wird das Web als Ganzes jetzt als Anwendungsplattform für HTML (insbesondere HTML5), CSS und JavaScript, auf denen aufgebaut werden soll. Auch dieses System elegant schafft Harmonie zwischen Webdesignern und Entwicklern durch die Festlegung gemeinsamer Standards, denen alle Browser folgen sollten.

Zusätzlich wurden viele Elemente erstellt vertreten die digitalen Medien des neuen Zeitalters. Diese schließen ein und was für die Multimedia-Unterstützung riesig ist. In einigen Browsern können Sie die Formularprüfung direkt in HTML durchführen. Zugegeben, es gibt immer noch einen großen Bedarf an jQuery, da es viele Softwareentwickler gibt, die die Funktionen noch nicht erkannt haben. Wenn Sie eine Liste mit Tags wünschen, lesen Sie diese W3Schools-Tabelle, um mehr darüber zu erfahren.

Nacktes HTML5-Skelett

Ich finde es am einfachsten, ein Thema zu verstehen tauche direkt hinein. Ich werde also eine sehr einfache HTML5-Skelettvorlage für eine Webseite erstellen. Ich habe einige der neueren Elemente aufgenommen, die ich später ein wenig kategorisieren möchte.

   Unsere erste HTML5-Seite       Herzlich Willkommen!
   Zuhause
 Über uns
 Kontakte
 
 
 
   etwas Inhalt hier.
 
  aber auch einige hier!
 
 
  Einige urheberrechtliche und rechtliche Hinweise hier. Verwenden Sie vielleicht das © -Symbol.

Das unterscheidet sich nicht sofort von einer Standard-HTML4-Webseite. Was Sie vielleicht bemerken, ist dass wir müssen keine weiteren selbstschließenden Tags enthalten. Dies sind wirklich wunderbare Neuigkeiten, da Sie viel Zeit für Ihre Entwicklungsprojekte einsparen können.

Für diejenigen, die es nicht wissen, gab es in XHTML-Entwürfen viele Elemente selbstschließend. Diese würden mit einem Schrägstrich vor dem Operator 'Größer als' enden, um anzugeben, dass Sie kein anderes schließendes Tag an anderer Stelle einfügen müssen. Um beispielsweise ein Meta-Stichwort-Tag zu erstellen, würden Sie es verwenden ohne die Notwendigkeit eines Abschlusses anderswo.

Diese Regel gilt auch in HTML5. Aber jetzt du Sie brauchen nicht einmal den zusätzlichen Schrägstrich! ist komplett gültig, Sie dürfen jedoch weiterhin den XHTML / XML-Standard verwenden. Bei allen standardkonformen Browsern werden beide Elemente auf dieselbe Weise dargestellt.

Definieren unserer Seitenbereiche

Die Mehrheit unseres neuen Codes sollte nicht zu schockierend sein. Unsere doctype ist witzig einfacher denn je, keine übermäßigen körperattribute, und Informationen in unserer Überschrift sind eindeutig gekennzeichnet. Ich möchte Ihre Aufmerksamkeit auf den Inhalt in unserem Web konzentrieren 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 aufnehmen können.

Zuerst sehen Sie die gesamte Seite eingekapselt in einem div Etikett. Ich habe dies mit einer ID von gekennzeichnet Verpackung, Dies bedeutet, dass es den gesamten Inhalt der Website umschließt. Das ist nützlich, um eine maximale Breite oder Position zu setzen auf dem Bildschirm herum. Als Nächstes habe ich die Seite in 3 Kernelemente aufgeteilt - eines

, ein Kern

, und eine kurze

. In meinem benutzerdefinierten Kopfzeilenbereich habe ich eine vereinfachte Darstellung des Seitentitels und der Navigationselemente mit dem hinzugefügt

tag als wrapper.

Nun zum

mit einer ID von Ader Ich habe eine sekundäre angewendet Clearfix. Diese Funktion macht es so, dass wir es können 2 Spalten frei nach innen schweben und wir werden keine heruntergefallenen Inhalte oder seltsamen Phänomene erleben. Und das zu Recht, denn ich habe zwei platziert

Tags, die unseren Hauptinhaltsbereich bzw. die Seitenleiste enthalten. Wir werden CSS-Stile verwenden, um sie voneinander zu trennen.

Ebenso die Ruhe Fußzeile Etikett funktioniert gut, um diesen Inhalt zwischen den Seiten zu unterscheiden. Darin habe ich einen feierlichen Absatz eingefügt, der einige Informationen zum Urheberrecht und Eigentum enthalten kann. Aber die Chancen stehen gut, dass Sie etwas mehr Inhalt hinzufügen möchten, beispielsweise sekundäre Links zu Ihren Seiten.

Kreative CSS3-Zauberei

Um dieses grundlegende Schablonenlayout zu beenden, können wir einige CSS-Stile verwenden. In der grundlegenden HTML5-Vorlage habe ich ein hinzugefügt externes CSS-Stylesheet So können wir unsere Codebereiche getrennt halten. Dieser Wille klären Sie viel Verwirrung auf auf lange Sicht, wenn Ihre Seiten und Stile für verschiedene Seiten laufen.

(Bildquelle: W3C)

Ich habe also nicht viel Zeit mit CSS verbracht, aber genug, um ein paar nette Effekte zu zeigen. Zunächst einmal habe ich einige davon benutzt Grenzradius-Einstellungen um sehr coole Navigations-Link-Hover-Effekte aufzubauen. Sie können diesen Effekt auch im Vorlagencode verwenden, indem Sie einfach die folgenden Zeilen in das CSS-Dokument einfügen.

 nav display: block; Rand unten: 10px;  nav ul list-style: none; Schriftgröße: 14px;  nav ul li display: inline;  nav ul li a display: block; Schwimmer: links; Polsterung: 3px 6px; Farbe: # 575c7d; Textdekoration: keine; Schriftdicke: fett;  nav ul li a: hover hintergrund: # deff90; Farbe: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; Polsterung: 3px 6px; Marge: 0; Textdekoration: keine;

Ein weiterer netter Effekt ist der Clearfix-Stile. Dies ist bei CSS3 kein völlig neues Konzept, aber es ist wichtig, um standardkonforme Webseiten zu erstellen. Wenn Sie Inhalte nebeneinander schweben möchten, treten häufig fehlerhafte Positionierungsstörungen auf. Dies wird durch Versatzränder und Fehler beim Festlegen der absoluten Breiten für den gleitenden Inhalt verursacht.

Dieses Konzept kann etwas verwirrend erscheinen, und ich habe unten ein wenig Code hinzugefügt, um zu helfen. Grundsätzlich zielen wir auf zwei

Elemente, #links und #Recht ihrer Seite der Seite entsprechen. Ich habe jedes mit einer bestimmten Breite und einem Linkslauf festgelegt, damit sie direkt nebeneinander liegen. Seit unserem Container div # Kern enthält das Clearfix Klasse, das heißt, alle internen Inhalte können sich frei bewegen können und löscht danach automatisch zusätzlichen Platz.

/ * Seitenkern * / div # Kern Anzeige: Block; Lösche beide; Rand unten: 20px;  section # left width: 550px; Schwimmer: links; Marge: 0 15px;  section # right float: left; Breite: 300px;  / * clearfix * / .clearfix: nach content: "."; Bildschirmsperre; Lösche beide; Sichtbarkeit: versteckt; Zeilenhöhe: 0; Höhe: 0;  .clearfix Anzeige: Inline-Block;  html [xmlns] .clearfix display: block;  * html .clearfix height: 1%;

Diese Bits sind für den Einstieg einfach. Sie beziehen sich auch auf unseren HTML5-Vorlagencode, der zuvor erstellt wurde. Dies ist also eine einfache Vorgehensweise. Aber wenn es um echte Web-Junkies geht, werden Sie mehr CSS3-Funktionalität in Betracht ziehen.

Weniger bekannte CSS3-Syntax

Um vollständige HTML5 / CSS3-Webseiten zu erstellen, verwenden Sie einige viel komplexere Stylesheets. Viele Designer kennen den Code der Kurzschrift (wie den font: Eigenschaft), da dies schon vor CSS2 Standards waren.

Es gibt jedoch einige neue Eigenschaften in CSS3, an die viele Designer nicht denken. Viele davon dienen nicht nur der Ästhetik, sondern enthalten auch Animationseffekte. Nachfolgend finden Sie eine kurze Liste, in der einige der Eigenschaften erläutert werden, mit denen Sie in Betracht ziehen könnten. Versuchen Sie, für Syntaxbeispiele zu googeln, wenn Sie sich verloren fühlen.

Box Schatten: fügt Ihren Seitenelementen einen schönen Schatteneffekt hinzu. Sie erhalten 4 Parameter, die die Position links / rechts, auf / ab, Schattenunschärfe und Farbe festlegen. Beachten Sie, dass Box-Schatten nicht als zusätzlicher Abstand zur ursprünglichen Breite / Höhe betrachtet werden.
Text-Schatten: Erzeugt schöne Schatten hinter Ihrem Seitentext. Mit den richtigen Effekten scheinen Ihre Buchstaben direkt von der Seite zu springen.
Grenzradius: Abgerundete Ecken haben lange gebraucht, um zu Standards zu werden. Vor einigen Jahren bauten viele Web 2.0-Designer Hintergrundbilder, um abgerundete Ecken in CSS einzufügen. Mit dem CSS3-Randradius können Sie jedoch die Kurve jedes Randes für jedes Element ändern.
Opazität: Scheint wie eine einfache Eigenschaft, die viele Designer nicht berücksichtigen. Die Deckkraft erwartet eine einzige numerische Eingabe zwischen 0 und 1,0 (0% - 100%). Dieser Effekt eignet sich hervorragend als Hover-Animation.
@Schriftart: Ein weiteres schönes Beispiel für einige komplexe CSS-Stile und Typografien. Webdesigner können jetzt mit ihren eigenen benutzerdefinierten Schriftarten arbeiten, indem sie sie als Variablen in Ihren CSS-Dokumenten definieren.
Box-SizingStandardmäßig werden bei Box-Size alle Ihre Elemente als gesetzt Inhaltsfeld. Dies bedeutet, dass Breite, Auffüllung und Ränder in der maximalen Breite enthalten sind. Aber setze dich an Border-Box Sie können eine maximale Breite definieren (z. B. 20 Pixel), und hinzugefügte Füllungen / Ränder schließen sich in diese ein, wodurch Platz innerhalb des Objekts entfernt wird. Es ist eine fantastische Eigenschaft, wenn Sie seine Einfallsreichtum beherrschen.

Diese Eigenschaften haben alle Vor- und Nachteile. Ich würde nicht empfehlen, sie alle in Ihre Webseiten zu stopfen. Aber Übung wird Ihnen eine klare Denkweise geben mit der Entwicklung weiterer Websites mit Leichtigkeit beginnen.

Ein weiterer Kern der hinzugefügten Syntax ist erwähnenswert Attributselektoren. Mit CSS3 ist das jetzt möglich Definieren Sie Stile basierend auf HTML-Attributen (wie type, href, title) und geben sogar bestimmte Werte an. So könnten wir zum Beispiel Links mit einem definierten Titelattribut anvisieren und ihnen einen Hintergrundsymbol geben.

 ul li [title ^ = "ico"] background: url ('my-icon.gif');

Wenn Sie merken, habe ich eine Caret-Symbol vor dem Gleichheitszeichen. Dies ist ein Operator der Definiert alle Listenelemente, die das Präfix enthalten, ico. Alternativ können Sie das Caret (^) durch ein Dollarzeichen ($) ersetzen, um den Suffixbereich Ihres Titels anzuvisieren. Auf diese Weise weiß CSS3, dass Sie Hintergrundbilder hinzufügen können, in denen Sie die Titel als "erster ico" oder "book ico" festlegen können. Lesen Sie mehr über die Attributselektoren, wenn Sie interessiert sind.

Alles zusammenfügen

Der Kern von HTML5- und CSS3-Webseiten ist Einfachheit. Webentwickler versuchen, kreative Webseiten in kürzerer Zeit und mit weniger Stress zu erstellen. Die neuen Funktionen in HTML5 ermöglichen dies mit viel Spielraum. Die Verwendung einiger neuer CSS3-Selektoren und -Eigenschaften bietet Ihnen auf lange Sicht Vorteile.

(Bildquelle: W3C)

Aber du solltest es auch sein unter Berücksichtigung des Endbenutzers. Der Aufbau einer Webseite endet nach dem Start der Website öffentlich. Ihr Ziel ist es, Bitte informieren Sie sich mit leicht zugänglichen Informationen, und nicht nur menschliche Leser, sondern Suchmaschinen-Crawler und Indexierung von Bots. Die Semantik hat sich stark weiterentwickelt, um neue HTML5-Layoutelemente einzubinden, die Seitenlayouts konsistent aufteilen. Es war noch nie einfacher, einen kleinen Navigations- und Fußzeilenabschnitt in Übereinstimmung mit allen modernen Webbrowsern zu erstellen.

Sobald Sie sich mit dem Erstellen von HTML5-Webseiten vertraut gemacht haben, werden Sie wahrscheinlich mit den Seitenanimationen beginnen. Selbst geringfügige Effekte mit JavaScript und AJAX können erheblich sein Verbesserung der Benutzererfahrung und der Website-Leistung. Obwohl dies nicht Teil des Artikels ist, empfehle ich, mit jQuery herumzuspielen, wenn Sie Zeit haben. Die Open-Source-Bibliothek ist erstaunlich und ermöglicht ein schnelles Prototyping auf HTML5-Seitenelementen.

Zusätzliche Ressourcen

Blogger auf der ganzen Welt haben die neuen Trends in HTML5 und CSS3 diskutiert und Ressourcen für die Öffentlichkeit freigegeben. Die Zeit ändert sich und die Web-Community verändert sich mit ihnen. Sie sollten ein paar Nischenbereiche in Betracht ziehen, um etwas zu studieren und ein kleines Interesse zu wecken.

Nachfolgend finden Sie einige zusätzliche Listen, Artikel und Tutorials, die Ihnen gefallen könnten. Ich habe mir die Freiheit genommen, die Listen in HTML5- und CSS3-Ressourcen aufzuteilen. Basierend auf dem, was Sie untersuchen, sollte hier für jeden ein paar Themen sein. Genießen Sie auch die kurze Galerie mit kostenlosen HTML-Themen, die Sie online herunterladen können!

HTML5

HTML5: 15 inspirierende Experimente
HTML5: 19 Webanwendungen
HTML5: 48 Potenzielle Flash-Kill-Demos
Erstellen Sie ein Ajax-basiertes HTML5 / CSS3-Kontaktformular

CSS3

CSS3: Anleitung für Anfänger
CSS3: Suchfeld erstellen
CSS3: Verwenden von Pseudo-Klassen
CSS3: 30+ nützliche Tutorials

Bonus: HTML5 Vorlagen und Designs

Designunternehmen

Bereit, in die wunderbare Welt von HTML5 einzusteigen? Hier ist eine komplett kostenlose HTML5-Vorlage mit jQuery-Skripts und benutzerdefinierten Schriftarten, die Sie frei testen können!

Ein HTML5 / CSS3-Theme

Dieses HTML5 / CSS3-gestützte Design hat ein allgemeines Layout für Blogs, in dem Sie entweder einen eigenen HTML5-Blog mit umfangreichen Funktionen erstellen oder einfach in den Code einsteigen und etwas darüber erfahren.

Yoko

Yoko ist ein modernes WordPress-Theme, das über Flexibilität spricht. Sein responsives Layout basiert auf CSS3-Medienabfragen, dh der Möglichkeit, sich an verschiedene Bildschirmgrößen anzupassen und mehr darüber zu erfahren!

Grau

Wenn Sie den Stil des klassischen WordPress-Blogs bevorzugen, ist Gray mit seinen integrierten CSS3-Funktionen wie Border-Radius, mehreren Hintergründen, Textschatten usw. für Sie wahrscheinlich geeignet.

Beginner's Guide zu Flock, dem Social Media Browser

Anfängerleitfaden zur iOS-Entwicklung Die Benutzeroberfläche - Teil I

Einsteigerhandbuch für das Einrichten von Windows 7 Media Center