Hoe maak je een website in minuten met behulp van HTML5 Boilerplate

Wanneer u een nieuwe website aan het bouwen bent, wilt u tegenwoordig dat deze HTML5-compatibel is. Maar u wilt ook geen onnodige tijd spenderen aan het leren van de fijne kneepjes van HTML5, of wel?

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

Deze HTML5 Boilerplate-zelfstudie gaat over wat er in de sjabloon staat, de basisprincipes die u moet weten over hoe u het kunt gebruiken en sommige bronnen voor verder leren. Ik zal 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 u de sjabloon downloadt van HTML5 Boilerplate, krijgt u een aantal mappen en bestanden. Hier zijn de inhoud van het ZIP-bestand:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- leverancier --- 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 hulpdocumenten.

HTML5 Boilerplate Help-documentatie

Boilerplate heeft een verzameling hulpdocumenten gehost in GitHub. Dit is een grote hulp als je technische vragen hebt of je je afvraagt ​​waarom iets is ontworpen zoals het was.

Bijna alles in de documentatie is ook opgenomen in de map Doc van de sjabloon. Je zult een aantal Markdown (.md) bestanden zien die een grote hulp zijn bij het uitzoeken hoe je je Boilerplate-site moet bouwen.

Als je alles wilt lezen, begin dan met TOC.md en volg de links van daar naar andere Markdown-bestanden. Als u hulp bij een specifiek probleem zoekt, zoekt u naar het bestand dat lijkt op het verband; usage.md is een goede plaats om te beginnen.

Beginnend met de CSS van HTML5 Boilerplate

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

Het tweede bestand, normalize.css, helpt verschillende browsers elementen op consistente manieren renderen. Voor meer informatie over hoe het werkt, bekijk het normalize.css project op GitHub.

Ondertussen, main.css is waar je elke code die je nodig hebt om je website te formatteren met CSS 10 Simple CSS Code Voorbeelden die je kunt leren in 10 minuten 10 Simpele CSS-codevoorbeelden Je kunt leren in 10 minuten We gaan over hoe je een inline stylesheet kunt maken, zodat je je CSS-vaardigheden kunt oefenen. Daarna gaan we verder met 10 eenvoudige CSS-voorbeelden. Van daaruit is je verbeelding de limiet! Lees verder . De standaard CSS die bij de sjabloon wordt geleverd, is het resultaat van onderzoek dat is uitgevoerd door ontwikkelaars en de HTML5 Boilerplate-community. Het is leesbaar en wordt mooi weergegeven in verschillende browsers.

Als u uw eigen CSS wilt toevoegen, kunt u deze toevoegen aan het gedeelte Aangepaste stijlen van de auteur. Ik voeg een beetje linkstyling toe voor onze voorbeeldpagina:

Er zijn ook een aantal nuttige helperklassen opgenomen in de basis-CSS. Sommigen verbergen items uit standaardbrowsers en schermlezers (of een combinatie daarvan).

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

Al deze items worden duidelijk uitgelegd aan de hand van opmerkingen in de CSS:

Over het algemeen kunt u 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 op zoek bent naar een eenvoudige website met slechts één pagina): 3 redenen waarom het voor uw idee kan werken Een enkele pagina Website: 3 Redenen waarom het voor uw idee kan werken Lees meer).

Als u de indexpagina in een browser opent, ziet u een enkele regel tekst. Maar als je in de HTML kijkt, zie je veel meer verborgen in de code. Het enige waar u zich echt zorgen over hoeft te maken, is de Google Analytics-code Uw gids voor Google Analytics Uw gids voor Google Analytics Hebt u enig idee waar uw bezoekers vandaan komen, welke browsers de meesten gebruiken, welke zoekmachines zij gebruiken , of welke van uw pagina's is het populairst? Lees meer (vind de tekst “UA-XXXXX-Y” en vervang het door uw eigen trackingcode).

De rest van de HTML op de indexpagina bevat informatie voor webapps, meldingen voor oude browsers en handige JavaScripts. Als u aan de slag gaat, hoeft u hier niets mee te doen.

Als ze al vooraf zijn ingevuld, is dit echter een goede manier om ervoor te zorgen dat uw site klaar is om het maximale 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 zelf wil 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, wijzigt u gewoon het HTML-bestand. Weet u niet zeker wat u op uw 404-pagina moet plaatsen? Bekijk deze geweldige 404-pagina-ontwerpvoorbeelden How To Make a Great 404 Error Page & 10 Examples How to Make a Great 404 Error Page & 10 Examples Een slim ontworpen 404-foutpagina kan het verschil zijn tussen een saaie website en een gedenkwaardige website. Lees verder .

Een Favicon (en andere pictogrammen toevoegen)

Wilt u uw favicon vervangen? Dan is favicon.ico het bestand dat je moet vervangen.

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

Het is een goed idee om even stil te staan ​​bij je favicon. Gebruik deze beroemde favicons Je favoriete iconen: 14 gunsten die opvallen in de menigte Jouw favoriete iconen: 14 gunsten die opvallen in de menigte Als je eenmaal favicons opmerkt, besef je hoeveel ze verschillen. De meeste zijn saai, voorspelbaar en onmiddellijk forgettable. Maar sommige zijn goed genoeg om zich van de massa te onderscheiden. Lees meer om uw brainstorming te begeleiden. Zorg ervoor dat wanneer u het nieuwe favicon toevoegt, dit favicon.ico heet.

Mogelijk merkt u dat er drie andere afbeeldingen in de hoofdmap van uw site staan: icon.png, tile.png en tile-wide.png. Waar zijn deze voor?

• icon.png wordt gebruikt voor Apple touch-pictogrammen. Als u een web-app maakt, wordt dit pictogram gebruikt wanneer een iPhone- of iPad-gebruiker de app aan het startscherm toevoegt.
• tile.png en tile-wide.png zijn voor Windows ' “pin” functionaliteit en wordt weergegeven in Windows 10.

Het is een goed idee om in al deze gevallen pictogrammen te bieden, maar als u geen webapp bouwt, kan dit een lagere prioriteit hebben.

Meer functionaliteit toevoegen

Zodra u uw HTML en een favicon (en eventueel CSS die u mogelijk wilt toevoegen) hebt toegevoegd, is uw site gereed om te worden gepubliceerd. Zo eenvoudig is het om HTML5 Boilerplate te gebruiken. Upload het naar uw server en u bent klaar!

Dit is hoe onze pagina eruit ziet:

Zoals u kunt zien, heeft slechts een paar regels tekst een volledig functionele (als een beetje flauwe) 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 de 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 vindt in de helpdocumentatie.

Als u niet zeker weet wat u met HTML5 kunt doen, maar u wilt erachter komen, zijn er genoeg webontwerp-tutorials die u nodig heeft? Gebruik deze 10 geweldige bronnen Hebt u een zelfstudie over het ontwerpen van websites nodig? Gebruik deze 10 Awesome Resources Web-ontwerp is een geweldige vaardigheid om te hebben - het laat je je eigen website maken en kan een geweldige weg zijn naar een nieuwe carrière. Hier leest u hoe u de basisbeginselen leert. Lees meer om u te helpen.

Meer informatie over: codeerlessen, HTML5.