So erstellen Sie in wenigen Minuten eine Website mit HTML5 Boilerplate

So erstellen Sie in wenigen Minuten eine Website mit HTML5 Boilerplate

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





Glücklicherweise ist die HTML5-Boilerplate-Vorlage kann helfen. Es handelt sich um eine einfache Front-End-Vorlage, mit der Sie in wenigen Minuten eine HTML5-Website erstellen können. Aber es ist auch leistungsstark genug, um es als Grundlage einer komplexen, voll ausgestatteten Website zu verwenden.



Wie verbinde ich den PS2-Controller mit dem PC?

In diesem HTML5 Boilerplate-Tutorial werden der Inhalt der Vorlage, die Grundlagen zur Verwendung und einige Ressourcen für weitere Informationen erläutert. Ich zeige Ihnen auch, wie ich mit der Vorlage eine sehr einfache Site mit nur wenigen HTML-Zeilen erstellt habe.





Die HTML5-Boilerplate-Vorlage

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

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---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, sondern nur die Grundlagen. Um sicherzustellen, dass Sie über die Ressourcen verfügen, um alle Dateien zu verwenden, beginnen wir jedoch mit den Hilfedokumenten.



HTML5 Boilerplate-Hilfedokumentation

Boilerplate hat eine Sammlung von in GitHub gehostete Hilfedokumente . Dies ist eine große Hilfe, wenn Sie technische Fragen haben oder sich fragen, warum etwas so konzipiert wurde, wie es war.

Fast alles in der Dokumentation ist auch im doc-Ordner der Vorlage enthalten. Sie sehen eine Reihe von Markdown-Dateien (.md), die eine große Hilfe bei der Erstellung Ihrer Boilerplate-Site sind.



Wenn Sie alles durchlesen möchten, beginnen Sie mit TOC.md und folgen Sie den Links von dort zu anderen Markdown-Dateien. Wenn Sie Hilfe zu einem bestimmten Problem suchen, suchen Sie nach der Datei, die sich anhört, als ob sie verwandt wäre. use.md ist ein guter Ausgangspunkt.

Beginnend mit dem CSS von HTML5 Boilerplate

Die HTML5 Boilerplate-Vorlage wird mit zwei CSS-Dateien geliefert: main.css und normalize.css.



Die zweite Datei, normalize.css, hilft verschiedenen Browsern, Elemente auf konsistente Weise zu rendern. Um mehr darüber zu erfahren, wie es funktioniert, besuchen Sie die normalize.css-Projekt auf GitHub .

In main.css fügen Sie den Code ein, den Sie benötigen Formatiere deine Seite mit CSS . 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 gut angezeigt.

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

Es gibt auch eine Reihe nützlicher Hilfsklassen, die im Basis-CSS enthalten sind. Einige von ihnen verbergen Elemente vor Standardbrowsern und Bildschirmleseprogrammen (oder einer Kombination).

Auch in main.css finden Sie Unterstützung für Responsive Design und hilfreiche Druckeinstellungen.

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

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

Hinzufügen Ihres eigenen HTML-Codes zur Vorlage

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

Auf der Indexseite erstellen Sie Ihre Homepage (oder Ihre einzige Seite, wenn Sie sich für einen einfachen One-Pager entscheiden).

Wenn Sie die Indexseite in einem Browser öffnen, sehen Sie eine einzelne Textzeile. Ein Blick in den HTML-Code zeigt jedoch noch viel mehr, der sich im Code verbirgt. Das einzige, was Sie wirklich ändern müssen, ist der Google Analytics-Code (finden Sie den Text 'UA-XXXXX-Y' und ersetzen Sie ihn durch Ihren eigenen Tracking-Code).

Der restliche HTML-Code auf der Indexseite enthält Informationen zu Web-Apps, Benachrichtigungen für alte Browser und nützliche JavaScripts. Wenn Sie anfangen, sollten Sie sich nicht damit herumschlagen müssen.

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

Um Ihre Seite zu erstellen, fügen Sie Ihren HTML-Code zwischen den Tags in der Datei ein. Hier sind einige grundlegende Informationen, die ich über mich hinzufügen werde:

Möchten Sie weitere Seiten erstellen? Erstellen Sie Kopien dieser Datei und benennen Sie sie um, damit Sie nicht den gesamten HTML-Code kopieren und einfügen müssen. Fügen Sie dann Ihre Inhalte hinzu.

Wenn Sie Ihre 404-Seite anpassen möchten, ändern Sie einfach die HTML-Datei. Sie sind sich nicht sicher, was Sie auf Ihre 404-Seite setzen sollen? Schauen Sie sich diese großartigen Beispiele für das Design von 404-Seiten an.

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 Ihr eigenes gestalten. Stellen Sie nur sicher, dass es 16 x 16 Pixel groß ist und den Dateityp .ico hat.

Wie berechnet man die prozentuale Änderung in Excel?

Es ist eine gute Idee, sich einige Gedanken über Ihr Favicon zu machen. Verwenden Sie diese berühmten Favicons, um Ihr Brainstorming zu leiten. Stellen Sie sicher, dass das neue Favicon beim Hinzufügen den Namen favicon.ico trägt.

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

  • 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 zu seinem Startbildschirm hinzufügt.
  • tile.png und tile-wide.png sind für die 'Pin'-Funktion von Windows vorgesehen und werden in Windows 10 angezeigt.

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

Hinzufügen weiterer Funktionen

Nachdem Sie Ihren HTML-Code und ein Favicon (sowie alle gewünschten CSS-Dateien) hinzugefügt haben, kann Ihre Website veröffentlicht werden. So einfach lässt sich HTML5 Boilerplate verwenden. Laden Sie es auf Ihren Server hoch, und Sie sind fertig!

So sieht unsere Seite aus:

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

Aber es gibt noch viel mehr, was Sie mit der Boilerplate-Vorlage tun können, wenn Sie möchten. Wenn Sie etwas Bestimmtes suchen, finden Sie es wahrscheinlich in der Hilfedokumentation.

Wenn Sie sich nicht sicher sind, was Sie mit HTML5 tun können, aber Sie möchten es herausfinden, gibt es viele Webdesign-Tutorials, die Ihnen dabei helfen.

Teilen Teilen Tweet Email Ist es in Ordnung, Windows 11 auf einem inkompatiblen PC zu installieren?

Sie können Windows 11 jetzt auf älteren PCs mit der offiziellen ISO-Datei installieren ... aber ist es eine gute Idee, dies zu tun?

Weiter lesen Verwandte Themen
  • Programmierung
  • HTML5
  • Codierungs-Tutorials
Über den Autor Dann Albright(506 veröffentlichte Artikel)

Dann ist ein Content-Strategie- und Marketingberater, der Unternehmen dabei unterstützt, Nachfrage und Leads zu generieren. Er bloggt auch über Strategie und Content Marketing auf dannalbright.com.

Mehr von Dann Albright

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren