So verwenden Sie ein HTML-Boilerplate
Willkommen in der Anleitung von Creative Bloq zur Verwendung eines HTML-Boilerplates. Beim Erstellen einer Website sind die zugrunde liegenden Grundlagen in der Regel immer sehr ähnlich. Anstatt jede neue Seite von vorne zu beginnen, ist es sinnvoll, ein HTML-Boilerplate zu verwenden, das die wesentliche HTML-Struktur enthält. Es ist eine schnelle und einfache Möglichkeit, mit dem Erstellen einer Website zu beginnen, und es spart viel Zeit und Mühe. (Wenn Sie eine Website von Grund auf neu starten, sehen Sie sich unseren Favoriten an Website-Ersteller ).
Werfen Sie einen Blick auf den HTML-Code einer Website oder Seite, und wir garantieren, dass Sie viele der gleichen HTML-Tags sehen (wenn Sie mehr erfahren möchten, lesen Sie unseren Leitfaden zu HTML-Tags ), die die Grundstruktur eines Web-Erlebnisses bilden. Jede Webseite, die jemals erstellt wurde, beginnt mit dem Tag und es ist fast sicher, dass Sie die wesentlichen Tags wie sehen ,, ,,. Und es sind nicht nur HTML-Tags, an die Sie denken müssen. Webdesigner und -entwickler müssen sich mit den Macken einzelner Browser auseinandersetzen. Ein Browser rendert bestimmte HTML-Tags anders als ein anderer, was bedeutet, dass das Layout einer Seite in verschiedenen Browsern unterschiedlich aussehen kann. Schauen Sie sich unsere perfektes Website-Layout Post, um einige wichtige Tipps zu erhalten, wie Sie Ihr Design richtig machen können. Und wählen Sie sorgfältig zwischen Web-Hosting Dienstleistungen, um sicherzustellen, dass Ihre Website genau richtig ist. CSS und JavaScript sind ebenfalls eine Überlegung. Auch hier interpretieren nicht alle Browser diese gleich. Fast alle diese Probleme können jedoch mit einem HTML-Boilerplate behoben werden. Und das Beste daran ist, dass Sie vor dem Start Ihres neuesten Projekts wissen, dass es einfach funktionieren wird. Der perfekte Weg, um ein Projekt zu starten. Boilerplates ähneln Templates in dem Sinne, dass sie die Elemente bereitstellen, die zum Erstellen der Basis eines Builds erforderlich sind. In der Regel besteht ein HTML-Boilerplate aus einer Reihe von Dateien, die eine Grundlage für jede Website bilden und von Branchenfachleuten erstellt wurden, die dieselben Probleme hatten und nicht möchten, dass andere dieselben Probleme haben. Boilerplates enthalten normalerweise eine Reihe von Dateitypen, die mit Webbuilds verknüpft sind, darunter HTML-Dokumente, grundlegende CSS-Stylesheets, wichtiges JavaScript, Platzhalterbilder und Dokumentationen zur Verwendung der gerade heruntergeladenen Dateien. Um sich auf den Weg zum HTML-Himmel zu machen, müssen Sie die HTML5 Boilerplate ist ein großartiger Ort, um zu beginnen. Es beschreibt sich selbst als 'beliebteste Frontend-Vorlage im Web' und ist eine schlanke und einfache HTML-Vorlage, die alle wichtigen Dateien und Assets enthält, die Sie benötigen, um sofort mit dem Erstellen zu beginnen. Die neueste Version von HTML5 Boilerplate (v7) ist mit einer index.html-Datei ausgestattet, die Tags für wichtige mobile Optionen, Google Analytics und einen Link zu enthält Normalize.css Dies hilft, Browser-Inkonsistenzen auszubügeln. Um eine Vorstellung davon zu bekommen, wie HTML5 Boilerplate funktioniert, schauen Sie sich das Video an, das sie auf ihrem YouTube-Kanal veröffentlicht haben. Es ist ein paar Jahre alt, vermittelt aber eine allgemeine Vorstellung davon, wie die Heizplatte funktioniert. Eine weitere sehr beliebte Option zum Erkunden ist Bootstrap . Dies ist eine 'Frontend-Komponentenbibliothek' und ein weitaus umfassenderes Angebot als das HTML5-Boilerplate-Framework. Es bietet Optionen für Layout, Inhalt, Schriftarten, Typografie und Front-End-Komponenten wie Schaltflächen, Karussells, QuickInfos und vieles mehr. Wenn Sie jedoch nicht alles möchten, können Sie nur die Elemente herunterladen, die Sie für Ihren Build benötigen. Bootstrap ist eine sehr beliebte Wahl für viele Webdesigner und Entwickler. Versuchen Sie daher, bei der Verwendung der Vorlagen ein wenig einfallsreicher zu sein. Sie möchten nicht wie jede andere Website aussehen. Beim Herunterladen bietet Ihnen dieses kostenlose Open-Source-Boilerplate die Grundlage für eine HTML-Seite (index.html), einige CSS-Stylesheets, wichtige JavaScript-Dateien, einen IMG-Ordner zum Platzieren von Bildern, eine 404-Seite, Konfigurationsdateien und relevante Informationen Dokumentation. Beim ersten Download empfiehlt es sich, eine Kopie zu erstellen, damit Sie eine saubere, unbearbeitete Version der Dateien als Referenz haben. Um loszulegen, ersetzen Sie zuerst die favicon.ico und icon.png Dateien mit Ihrem Logo - Diese werden als Favicon Ihrer Site und als Symbol angezeigt, wenn Ihre Site auf dem iOS-Homescreen einer anderen Person gespeichert wird. Ein Online-Generator kann Ihnen helfen, neue Bilder zu erstellen. Im HTML gibt es eine Sammlung von Tags, mit denen Sie vertraut sind, und einige Dinge, mit denen Sie nicht vertraut sind. Zum Beispiel, Modernizr kann etwas sein, mit dem Sie nicht vertraut sind. Dies ist 'JavaScript-Code, der automatisch die Verfügbarkeit von Webtechnologien der nächsten Generation erkennt'. Auf diese Weise wird sichergestellt, dass Ihre Website so gut wie möglich auf dem neuesten Stand bleibt. Das letzte Skriptelement für Google Analytics kann entfernt werden. Wenn Sie es jedoch verwenden, fügen Sie einfach Ihren eigenen Google Analytics-Code hinzu. Lassen Sie im Idealfall alles so, wie Sie es gefunden haben, und konzentrieren Sie sich auf das Tag, da hier der Inhalt hingeht. Fügen Sie nach dem Öffnen Inhalte hinzu Tag und idealerweise vor dem Tags, die unmittelbar nach dem Stichworte. Stellen Sie sicher, dass die Seite eine hat und füllen Sie die aus 'Inhalt' Wert in der 'Beschreibung' Meta-Tag. Dies gibt eine Einführung in das, worum es auf der Website geht, gut für SEO. Beachten Sie auch, dass alle Links in diesem Dokument relativ sind. Daher müssen Sie sie möglicherweise in root-relative oder absolute Links ändern, wenn Sie Webseiten in Ordnern verschachteln. Zum Beispiel, könnte werden müssen . Es ist auch eine gute Übung Fügen Sie Kommentare hinzu, wenn Sie größere Änderungen am HTML-Code vornehmen. Wenn Sie zurückkommen, können Sie sich daran erinnern, welche Änderungen vorgenommen wurden. Von den beiden in HTML5 Boilerplate enthaltenen CSS-Dokumenten muss nicht berührt werden normalize.css . Dies ist das Rücksetzdokument, das sicherstellt, dass alle Browser gleiche Wettbewerbsbedingungen für Ihre Website haben. Im Gegensatz, main.css Enthält die Begriffe des Dokuments 'Standardeinstellungen', einschließlich einiger grundlegender Stile für die Auswahl, horizontaler Regeln, Bilder und Formulare, Hilfsprogramme für die Sichtbarkeit von Elementen und @Hälfte Regeln für sich anpassendes Webdesign und drucken. Alles hier ist ein faires Spiel zum Aktualisieren, obwohl Sie sorgfältig überlegen, ob Sie dies tun sollten. Es gibt einen Bereich, der für die benutzerdefinierten Stile des Autors (dh für Ihre) reserviert ist, oder Sie können ein völlig separates CSS-Dokument erstellen und dieses auch an Ihren HTML-Code anhängen. Was auch immer Sie wählen, denken Sie daran, wie Sie mit nachfolgenden Aktualisierungen von HTML5 Boilerplate selbst umgehen. Wenn Sie einen der Standardstile von main.css bearbeiten, werden Änderungen, die in zukünftigen Versionen von HTML5 Boilerplate vorgenommen wurden (die entweder durch Ersetzen von Dateien oder durch Ersetzen von Teilen von Dateien hinzugefügt werden), nicht unbedingt auf Ihre Site übertragen oder überschreiben Ihre eigene Änderungen. Verwenden Sie daher erneut Kommentare für Änderungen, um spätere Vergleiche erheblich zu vereinfachen. Sobald Sie Erfahrung gesammelt haben, sollten Sie einen benutzerdefinierten Build in Betracht ziehen Initializr Behalten Sie die Komponenten bei, die Sie benötigen, und lassen Sie die Komponenten fallen, die Sie nicht benötigen. Wenn Sie eine WordPress-Site erstellen, sollten Sie auch ein WordPress-spezifisches leeres Thema untersuchen, z HTML5 leer . Diese Downloads und Dienste sind alle kostenlos, sodass Sie sie nach Belieben ausprobieren und ausprobieren können. Was auch immer Sie tun, ein wenig Arbeit und Nachforschungen sollten Ihnen später viel Zeit sparen, wenn Sie einfach Ihre Heizplatte herausziehen (sicher verstaut) Cloud-Speicher ) um auf einer neuen Website zu knacken. Dieser Inhalt erschien ursprünglich im Netzmagazin. Zum Thema passende Artikel:
Was ist ein HTML-Boilerplate?
Beliebte HTML-Boilerplates
Verwenden von HTML5 Boilerplate
CSS-Änderungen
Alternative Boilerplate-Optionen
