Hoe u in enkele minuten een website kunt maken met HTML5 Boilerplate

Hoe u in enkele minuten een website kunt maken met HTML5 Boilerplate

Wanneer u een nieuwe website bouwt, wilt u tegenwoordig dat deze HTML5-compatibel is. Maar u wilt toch ook geen onnodige tijd besteden aan het leren van de fijne kneepjes van HTML5?





Gelukkig is de HTML5 Boilerplate-sjabloon kan helpen. Het is een eenvoudige front-endsjabloon waarmee u in slechts enkele minuten een HTML5-website kunt maken. Maar het is ook krachtig genoeg om het te gebruiken als de basis van een complexe, volledig uitgeruste site.



kritieke proces windows.com/stopcode is overleden

Deze HTML5 Boilerplate-tutorial gaat over wat er in de sjabloon staat, de basisprincipes die u moet weten over het gebruik ervan en enkele bronnen voor verder leren. Ik zal je ook laten zien hoe ik de sjabloon heb gebruikt om een ​​zeer eenvoudige site te maken met slechts een paar regels HTML.





De HTML5 Boilerplate-sjabloon

Wanneer je het sjabloon downloadt van HTML5 Boilerplate, krijg je een aantal mappen en bestanden. Hier is de inhoud van het ZIP-bestand:

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

We zullen hier niet elk element in de sjabloon bespreken, alleen de basis. Om er zeker van te zijn dat u over de middelen beschikt om alle bestanden te gebruiken, beginnen we met de helpdocumenten.



HTML5 Boilerplate Help-documentatie

Boilerplate heeft een collectie van: help documenten gehost in GitHub . Dit is een grote hulp als je technische vragen hebt of je afvraagt ​​waarom iets is ontworpen zoals het is ontworpen.

Bijna alles in de documentatie is ook opgenomen in de doc-map van de sjabloon. U zult een aantal Markdown-bestanden (.md) zien die een grote hulp zijn bij het uitzoeken hoe u uw Boilerplate-site kunt bouwen.



Als je alles wilt doorlezen, begin dan met TOC.md en volg de links vanaf daar naar andere Markdown-bestanden. Als je hulp zoekt bij een specifiek probleem, zoek dan het bestand dat er mogelijk verband mee lijkt te hebben; use.md is een goede plek om te beginnen.

Beginnend met HTML5 Boilerplate's CSS

De HTML5 Boilerplate-sjabloon wordt geleverd met twee CSS-bestanden: main.css en normalize.css.



Het tweede bestand, normalize.css, helpt verschillende browsers om elementen op een consistente manier weer te geven. Voor meer informatie over hoe het werkt, bekijk de normalize.css-project op GitHub .

Ondertussen is main.css de plaats waar je elke code kunt invoeren die je nodig hebt formatteer uw site met CSS . De standaard CSS die bij de sjabloon wordt geleverd, is het resultaat van onderzoek uitgevoerd door ontwikkelaars en de HTML5 Boilerplate-gemeenschap. Het is leesbaar en wordt mooi weergegeven in verschillende browsers.

Als u uw eigen CSS wilt toevoegen, kunt u deze toevoegen aan de sectie Aangepaste stijlen van de auteur. Ik zal een beetje linkstijl toevoegen voor onze voorbeeldpagina:

Er zijn ook een aantal nuttige hulpklassen opgenomen in de basis-CSS. Sommige verbergen items voor standaardbrowsers en schermlezers (of een combinatie ervan).

Ook in main.css vindt u ondersteuning voor responsief ontwerp en handige afdrukinstellingen.

Al deze items worden duidelijk uitgelegd door opmerkingen in de CSS:

Over het algemeen kun je aan de slag met de basis-CSS.

Uw eigen HTML toevoegen aan de sjabloon

Boilerplate bevat twee HTML-bestanden: 404.html en index.html.

Op de indexpagina maakt u uw startpagina (of uw enige pagina, als u voor een eenvoudige one-pager gaat).

Als u de indexpagina in een browser opent, ziet u één regel tekst. Maar als we naar de HTML kijken, wordt er veel meer verborgen in de code. Het enige waar u zich echt zorgen over hoeft te maken, is de Google Analytics-code (zoek de tekst 'UA-XXXXX-Y' op en vervang deze door uw eigen trackingcode).

De rest van de HTML op de indexpagina bevat informatie voor web-apps, meldingen voor oude browsers en handige JavaScripts. Als je begint, hoef je hier niet mee te rommelen.

Als ze echter al vooraf zijn ingevuld, is dit een goede manier om ervoor te zorgen dat uw site klaar is om het meeste uit HTML5 te halen.

Om uw pagina te maken, plaatst u uw HTML tussen de tags in het bestand. Hier is wat basisinformatie die ik over mezelf zal toevoegen:

Wilt u meer pagina's maken? Maak kopieën van dit bestand en hernoem ze, zodat u niet alle HTML hoeft te kopiëren en plakken. Voeg vervolgens uw inhoud toe.

Als u uw 404-pagina wilt aanpassen, hoeft u alleen het HTML-bestand aan te passen. Weet u niet wat u op uw 404-pagina moet plaatsen? Bekijk deze geweldige voorbeelden van 404-paginaontwerpen.

Een favicon (en andere pictogrammen) toevoegen

Wil je je favicon vervangen? Dan is favicon.ico het bestand dat je moet vervangen.

Als je er nog geen hebt, moet je er een maken. U kunt een online favicon-generator gebruiken of uw eigen favicon-generator ontwerpen. Zorg ervoor dat het 16 x 16 pixels is en het .ico-bestandstype heeft.

hoe omzeil ik google-verificatie na fabrieksreset?

Het is een goed idee om na te denken over uw favicon. Gebruik deze beroemde favicons om je brainstorming te begeleiden. Zorg ervoor dat wanneer u het nieuwe favicon toevoegt, het favicon.ico wordt genoemd.

Het is je misschien opgevallen dat er drie andere afbeeldingen in de hoofdmap van je site staan: icon.png, tile.png en tile-wide.png. Waar zijn deze voor?

  • icon.png wordt gebruikt voor aanraakpictogrammen van Apple. Als u een web-app bouwt, wordt dit pictogram gebruikt wanneer een iPhone- of iPad-gebruiker de app aan zijn startscherm toevoegt.
  • tile.png en tile-wide.png zijn voor de 'pin'-functionaliteit van Windows en worden weergegeven in Windows 10.

Het is een goed idee om voor al deze gevallen pictogrammen te voorzien, maar als u geen web-app bouwt, kan dit een lagere prioriteit hebben.

Meer functionaliteit toevoegen

Zodra u uw HTML en een favicon (evenals eventuele CSS die u wilt opnemen) heeft toegevoegd, is uw site klaar om te worden gepubliceerd. Zo eenvoudig is het om HTML5 Boilerplate te gebruiken. Upload het naar uw server en u bent klaar!

Zo ziet onze pagina eruit:

Zoals u kunt zien, hebben slechts een paar regels tekst een volledig functionele (zij het een beetje saaie) website gecreëerd. Het is niet veel, maar het duurde maar een paar minuten. En het is zeer uitbreidbaar met HTML5. Dat is de kracht van het Boilerplate-sjabloon.

Maar er is nog veel meer dat u kunt doen met de Boilerplate-sjabloon als u dat wilt. Als u iets specifieks zoekt, is de kans groot dat u het in de helpdocumentatie kunt vinden.

Als u niet zeker weet wat u met HTML5 kunt doen, maar u wilt dit toch graag weten, dan zijn er tal van webdesign-tutorials om u te helpen.

Deel Deel Tweeten E-mail Is het oké om Windows 11 op een incompatibele pc te installeren?

Je kunt nu Windows 11 op oudere pc's installeren met het officiële ISO-bestand... maar is het een goed idee om dat te doen?

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • HTML5
  • Codeerhandleidingen
Over de auteur Dan Albright(506 artikelen gepubliceerd)

Dann is een contentstrategie- en marketingconsultant die bedrijven helpt bij het genereren van vraag en leads. Hij blogt ook over strategie en contentmarketing op dannalbright.com.

Meer van Dann Albright

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren