So erstellen Sie eine Website in Minuten mit HTML5 Boilerplate

Wenn Sie eine neue Website erstellen, möchten Sie heutzutage, dass sie HTML5-kompatibel ist. Sie möchten aber auch nicht unnötig viel Zeit damit verbringen, die Feinheiten von HTML5 von Grund auf zu lernen, oder??

Glücklicherweise kann die HTML5-Boilerplate-Vorlage helfen. Es handelt sich um eine einfache Front-End-Vorlage, mit der Sie in wenigen Minuten eine HTML5-Website erstellen können. Es ist jedoch auch so leistungsfähig, dass Sie es als Grundlage für eine komplexe, voll funktionsfähige Website verwenden können.

In diesem HTML5-Tutorial für Boilerplate werden die in der Vorlage enthaltenen Informationen, die Grundlagen, die Sie zur Verwendung der Vorlage benötigen, sowie einige Ressourcen für das weitere Lernen erläutert. Ich zeige Ihnen auch, wie ich mit der Vorlage eine sehr einfache Website mit nur wenigen HTML-Zeilen erstellt habe.

Die HTML5-Vorlage für Heizplatten

Wenn Sie die Vorlage von HTML5 Boilerplate herunterladen, erhalten Sie eine Reihe von Ordnern und Dateien. Hier sind die Inhalte der ZIP-Datei:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- hersteller --- jquery.min.js --- modernizr.min.js .editorconfig .htaccess 404.html browserconfig.xml favicon.ico humans.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

Wir werden hier nicht jedes Element in der Vorlage durchgehen, nur die Grundlagen. Um sicherzustellen, dass Sie über die Ressourcen zur Verwendung aller Dateien verfügen, beginnen wir mit den Hilfedokumenten.

Hilfedokumentation zur HTML5-Schnellplattform

Boilerplate verfügt über eine Sammlung von Hilfedokumenten, die in GitHub gehostet werden. Dies ist eine große Hilfe, wenn Sie technische Fragen haben oder sich fragen, warum etwas so gestaltet wurde, wie es war.

Fast alles in der Dokumentation ist auch im doc-Ordner der Vorlage enthalten. Es werden eine Reihe von Markdown-Dateien (.md) angezeigt, die eine große Hilfe beim Erstellen der Boilerplate-Site sind.

Wenn Sie alles durchlesen möchten, beginnen Sie mit TOC.md und folgen Sie den Links zu anderen Markdown-Dateien. Wenn Sie zu einem bestimmten Problem nach Hilfe suchen, finden Sie die Datei, die sich anhört, als sei sie verwandt. usage.md ist ein guter Anfang.

Beginnend mit HTML5 Boilerplates CSS

Die HTML5-Boilerplate-Vorlage enthält zwei CSS-Dateien: main.css und normalize.css.

Die zweite Datei, normalize.css, hilft verschiedenen Browsern, Elemente auf konsistente Weise darzustellen. Weitere Informationen zur Funktionsweise finden Sie im Projekt normalize.css in GitHub.

In main.css geben Sie in der Zwischenzeit jeden Code ein, den Sie zum Formatieren Ihrer Site mit CSS benötigen. 10 Einfache CSS-Code-Beispiele, die Sie in 10 Minuten lernen können 10 Einfache CSS-Code-Beispiele, die Sie in 10 Minuten lernen können Wir gehen weiter So erstellen Sie ein Inline-Stylesheet, mit dem Sie Ihre CSS-Kenntnisse trainieren können. Dann werden wir mit 10 grundlegenden CSS-Beispielen fortfahren. Von dort aus ist Ihre Fantasie die Grenze! Weiterlesen . Das in der Vorlage enthaltene Standard-CSS ist das Ergebnis von Untersuchungen, die von Entwicklern und der HTML5-Boilerplate-Community durchgeführt wurden. Es ist lesbar und wird in verschiedenen Browsern angezeigt.

Wenn Sie Ihr eigenes CSS hinzufügen möchten, können Sie es dem Abschnitt Benutzerdefinierte Stile des Autors hinzufügen. Ich werde ein bisschen Link-Styling für unsere Beispielseite hinzufügen:

Es gibt auch eine Reihe nützlicher Hilfsklassen, die im Basis-CSS enthalten sind. Einige davon verbergen Elemente in Standard-Browsern und Bildschirmlesegeräten (oder eine Kombination davon).

In main.css finden Sie auch Unterstützung für responsives Design und hilfreiche Druckeinstellungen.

Alle diese Punkte werden durch CSS-Kommentare klar erklärt:

Im Allgemeinen können Sie mit dem Basis-CSS beginnen.

Eigenes HTML zur Vorlage hinzufügen

Boilerplate enthält zwei HTML-Dateien: 404.html und index.html.

Auf der Indexseite erstellen Sie Ihre Startseite (oder Ihre einzige Seite, wenn Sie einen einfachen Pager verwenden möchten.) Nur eine einzige Seitenwebsite: 3 Gründe, warum diese Idee für Ihre Idee geeignet ist. Nur eine einzelne Seitenwebsite: 3 Gründe, warum es für Ihre Idee funktionieren kann Lesen Sie mehr).

Wenn Sie die Indexseite in einem Browser öffnen, wird eine einzelne Textzeile angezeigt. Ein Blick in den HTML-Code offenbart jedoch viel mehr, was sich im Code versteckt. Das einzige, worüber Sie sich wirklich Gedanken machen müssen, ist der Google Analytics-Code. Ihr Leitfaden für Google Analytics Ihr Leitfaden für Google Analytics Haben Sie eine Idee, woher Ihre Besucher kommen, welche Browser die meisten verwenden und welche Suchmaschinen sie verwenden oder welche Ihrer Seiten ist am beliebtesten? Lesen Sie mehr (finden Sie den Text “UA-XXXXX-Y” und ersetze es durch deinen eigenen Tracking-Code).

Der Rest des HTML-Codes auf der Indexseite enthält Informationen für Web-Apps, Benachrichtigungen für alte Browser und nützliche JavaScripts. Wenn Sie erst einmal anfangen, sollten Sie sich nicht mit irgendwelchen Dingen herumschlagen.

Wenn Sie sie bereits vorab ausgefüllt haben, können Sie jedoch sicherstellen, dass Ihre Website bereit ist, HTML5 optimal zu nutzen.

Um Ihre Seite zu erstellen, fügen Sie Ihren HTML-Code zwischen das Tags in der Datei. Hier einige grundlegende Informationen, die ich über mich selbst hinzufügen möchte:

Möchten Sie weitere Seiten erstellen? Erstellen Sie Kopien dieser Datei und benennen Sie sie um, sodass Sie nicht den gesamten HTML-Code kopieren und einfügen müssen. Dann fügen Sie Ihren Inhalt hinzu.

Wenn Sie Ihre 404-Seite anpassen möchten, ändern Sie einfach die HTML-Datei. Sie sind sich nicht sicher, was Sie auf Ihrer 404-Seite einfügen sollen? Schauen Sie sich diese großartigen 404-Seiten-Designbeispiele an. So erstellen Sie eine große 404-Fehlerseite und 10 Beispiele So erstellen Sie eine große 404-Fehlerseite und 10 Beispiele Eine intelligent gestaltete 404-Fehlerseite kann den Unterschied zwischen einer langweiligen Website und einer denkwürdigen Website ausmachen. Weiterlesen .

Hinzufügen eines Favicons (und anderer Symbole)

Möchten Sie Ihr Favicon ersetzen? Dann ist favicon.ico die Datei, die Sie ersetzen müssen.

Wenn Sie noch keinen haben, müssen Sie einen erstellen. Sie können einen Online-Favicon-Generator verwenden oder Ihren eigenen entwerfen. Stellen Sie nur sicher, dass es 16 x 16 Pixel ist und den .ico-Dateityp hat.

Es ist eine gute Idee, einige Gedanken in Ihr Favicon zu bringen. Verwenden Sie diese berühmten Favicons. Ihre Lieblingssymbole: 14 Favicons, die sich von der Masse abheben Ihre Lieblingssymbole: 14 Favicons, die sich von der Menschenmenge abheben Wenn Sie anfangen, die Favicons zu erkennen, erkennen Sie, wie sehr sie sich unterscheiden. Die meisten sind langweilig, vorhersehbar und sofort vergessen. Aber manche sind gut genug, um sich von der Masse abzuheben. Lesen Sie mehr, um Ihr Brainstorming zu steuern. Stellen Sie sicher, dass das neue Favicon beim Hinzufügen favicon.ico heißt.

Möglicherweise stellen Sie fest, dass sich drei weitere Bilder im Stammverzeichnis Ihrer Site befinden: icon.png, tile.png und tile-wide.png. Wozu sind diese da??

• icon.png wird für Apple-Touch-Symbole verwendet. Wenn Sie eine Web-App erstellen, wird dieses Symbol verwendet, wenn ein iPhone- oder iPad-Benutzer die App zum Startbildschirm hinzufügt.
• tile.png und tile-wide.png sind für Windows ' “Stift” Funktionalität und wird in Windows 10 angezeigt.

Es ist eine gute Idee, Symbole für alle diese Fälle bereitzustellen. Wenn Sie jedoch keine Webanwendung erstellen, kann dies eine niedrigere Priorität haben.

Mehr Funktionalität hinzufügen

Nachdem Sie Ihren HTML-Code und ein Favicon hinzugefügt haben (sowie alle CSS, die Sie möglicherweise hinzufügen möchten), ist Ihre Website zur Veröffentlichung bereit. So einfach ist die Verwendung von HTML5-Boilerplate. Laden Sie es auf Ihren Server hoch und fertig!

So sieht unsere Seite aus:

Wie Sie sehen, haben nur wenige Textzeilen eine voll funktionsfähige (wenn auch etwas fade) Website erstellt. Es ist nicht viel, aber es dauerte nur wenige Minuten. Und es ist mit HTML5 sehr erweiterbar. Das ist die Stärke der Boilerplate-Vorlage.

Sie können jedoch mit der Boilerplate-Vorlage noch viel mehr tun, wenn Sie möchten. Wenn Sie nach etwas Bestimmtem suchen, finden Sie in der Hilfedokumentation eine gute Chance.

Wenn Sie sich nicht sicher sind, was Sie mit HTML5 machen können, aber Sie möchten es herausfinden, gibt es eine Vielzahl von Webdesign-Tutorials. Brauchen Sie ein Website-Design-Tutorial? Verwenden Sie diese 10 großartigen Ressourcen. Benötigen Sie ein Website-Design-Tutorial? Verwenden Sie diese 10 fantastischen Ressourcen. Webdesign ist eine großartige Fähigkeit - Sie können Ihre eigene Website erstellen und ein guter Weg in eine neue Karriere sein. So lernen Sie die Grundlagen. Lesen Sie mehr, um Ihnen zu helfen.

Erfahren Sie mehr über: Codierungs-Tutorials, HTML5.