Programmering

Så här skapar du en webbplats i minuter med HTML5 Boilerplate

Så här skapar du en webbplats i minuter med HTML5 Boilerplate / Programmering

När du bygger en ny webbplats, vill du i dag att den är HTML5-kompatibel. Men du vill inte spendera onödig tid på att lära sig invecklad HTML5 från början, gör du?

Lyckligtvis kan HTML5 Boilerplate-mallen hjälpa till. Det är en enkel front-end-mall som du kan använda för att skapa en HTML5-webbplats på bara några minuter. Men det är också tillräckligt kraftfullt att du kan använda det som grunden för en komplex och fullt utrustad webbplats.

Denna HTML5 Boilerplate handledning kommer att gå över vad som kommer i mallen, det grundläggande du behöver veta om hur du använder det och några resurser för vidare inlärning. Jag ska också visa hur jag använde mallen för att skapa en mycket grundläggande webbplats med bara några rader av HTML.

HTML5 Boilerplate Mall

När du hämtar mallen från HTML5 Boilerplate får du ett antal mappar och filer. Här är innehållet i ZIP-filen:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- leverantör --- 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

Vi kommer inte att gå över varje element i mallen här, bara grunderna. För att se till att du har resurserna att använda alla filerna börjar vi dock med hjälpdokumenten.

HTML5 Boilerplate Hjälp Dokumentation

Boilerplate har en samling hjälpdokument som finns i GitHub. Det här är en stor hjälp när du har tekniska frågor eller undrar varför något utformades som det var.

Nästan allt i dokumentationen ingår också i dokumentmappen i mallen. Du ser ett antal Markdown (.md) -filer som är en stor hjälp för att räkna ut hur du bygger din Boilerplate-webbplats.

Om du vill läsa igenom allt börjar du med TOC.md och följer länkarna därifrån till andra Markdown-filer. Om du letar efter hjälp om en viss fråga, hitta filen som låter som den kan vara relaterad; usage.md är ett bra ställe att börja.

Börjar med HTML5 Boilerplate CSS

HTML5 Boilerplate-mallen levereras med två CSS-filer: main.css och normalize.css.

Den andra filen, normalize.css, hjälper olika webbläsare att göra element på konsekvent sätt. För att lära dig mer om hur det fungerar, kolla in normalize.css-projektet på GitHub.

Under tiden är main.css där du lägger in någon kod som du behöver för att formatera din webbplats med CSS 10 enkla CSS-kodsexempel som du kan lära dig om 10 minuter 10 enkla CSS-kodsexempel som du kan lära dig om 10 minuter Vi går över hur man skapar ett inline stylesheet så att du kan öva dina CSS-färdigheter. Sedan flyttar vi till 10 grundläggande CSS-exempel. Därifrån är din fantasi gränsen! Läs mer . Standard CSS som ingår i mallen är resultatet av forskning som utförs av utvecklare och HTML5 Boilerplate community. Den är läsbar och visar snyggt i olika webbläsare.

Om du vill lägga till din egen CSS kan du lägga till den i avsnittet Författarens anpassade format. Jag lägger till lite länk styling för vår exempelsida:

Det finns också ett antal användbara hjälperklasser som ingår i basen CSS. Några av dem gömmer objekt från vanliga webbläsare och skärmsläsare (eller någon kombination).

Också i main.css hittar du stöd för responsiv design och användbara utskriftsinställningar.

Alla dessa saker är tydligt förklarade av kommentarer i CSS:

I allmänhet kan du komma igång med basen CSS.

Lägger till din egen HTML i mallen

Boilerplate innehåller två HTML-filer: 404.html och index.html.

Index-sidan är där du ska skapa din hemsida (eller din enda sida, om du går till en enkel en personsökare. Bara en sida för en sida: 3 anledningar till att det kan fungera för din idé Bara en enda webbsida: 3 Anledningar till att det kan fungera för din idé Läs mer).

Om du öppnar indexsidan i en webbläsare ser du en enda textrad. Men att titta på HTML avslöjar mycket mer gömmer sig i koden. Det enda du verkligen behöver oroa dig för att ändra är Google Analytics-koden Din guide till Google Analytics Din guide till Google Analytics Har du någon aning om var dina besökare kommer från, vilka webbläsare de flesta använder, vilka sökmotorer de använder , eller vilken av dina sidor är mest populära? Läs mer (hitta texten “UA-XXXXX-Y” och ersätt det med din egen spårningskod).

Resten av HTML-filen på indexsidan innehåller information för webbapps, meddelanden för gamla webbläsare och användbara JavaScripts. När du börjar, borde du inte behöva röra med något av detta.

Att ha dem redan förfyllda är dock ett bra sätt att se till att din webbplats är beredd att få ut det mesta av HTML5.

För att skapa din sida, sätt in din HTML mellan taggar i filen. Här är några grundläggande uppgifter som jag lägger till om mig själv:

Vill du skapa fler sidor? Skapa kopior av den här filen och byt namn på dem så att du inte behöver kopiera och klistra in hela HTML-filen. Lägg sedan till ditt innehåll.

Om du vill anpassa din 404-sida, ändrar du bara HTML-filen. Är du osäker på vad du ska sätta på din 404-sida? Kolla in dessa fantastiska 404-sidodesignsexempel Så här gör du en bra 404-sida och 10 exempel Så här gör du en bra 404-sida och 10 exempel En smart utformad 404-fel sida kan vara skillnaden mellan en tråkig webbplats och en minnesvärd webbplats. Läs mer .

Lägga till en Favicon (och andra ikoner)

Vill du byta ut ditt favicon? Då är favicon.ico den fil du behöver byta ut.

Om du inte har en ännu behöver du skapa en. Du kan använda en online favicon generator eller skapa din egen. Se bara till att det är 16 x 16 pixlar och har .ico-filtypen.

Det är en bra idé att tänka på ditt favicon. Använd dessa kända favörer. Favoritikoner: 14 Favicons som kommer ut ur folkmassan. Favoritikoner: 14 Favicons som kommer ut ur folkmassan När du börjar märka favicons, inser du hur mycket de skiljer sig. De flesta är tråkiga, förutsägbara och omedelbart förgettabla. Men några är tillräckligt bra för att sticka ut från mängden. Läs mer för att styra din brainstorming. Se till att när du lägger till det nya favicon kallas favicon.ico.

Du kanske märker att det finns tre andra bilder i rotkatalogen på din webbplats: icon.png, tile.png och tile-wide.png. Vad är dessa för?

  • icon.png används för Apple touch-ikoner. Om du bygger en webbapp, kommer den här ikonen att användas när en iPhone eller iPad-användare lägger till appen till deras startsida.
  • tile.png och tile-wide.png är för Windows ' “stift” funktionalitet, och kommer att dyka upp i Windows 10.

Det är en bra idé att tillhandahålla ikoner för alla dessa fall, men om du inte bygger en webapp kan det vara en lägre prioritet.

Lägger till mer funktionalitet

När du har lagt till din HTML och ett favicon (liksom alla CSS du kanske vill inkludera), är din webbplats redo att publiceras. Så enkelt är det att använda HTML5 Boilerplate. Ladda upp den till din server, och du är klar!

Så här ser vår sida ut:

Som du kan se har bara några rader av text skapat en helt funktionell (om lite bland) hemsida. Det är inte så mycket, men det tog bara några minuter. Och det är mycket utökat med HTML5. Det är kraften i Boilerplate-mallen.

Men det finns mycket mer du kan göra med Boilerplate-mallen om du vill. Om det finns något specifikt du letar efter finns det en bra chans att du hittar den i hjälpdokumentationen.

Om du inte är säker på vad du kan göra med HTML5, men du vill ta reda på det, finns det massor av webbdesigntutorials där ute. Behöver du en webbdesigntutorial? Använd dessa 10 fantastiska resurser Behöver du en webbdesigntutorial? Använd dessa 10 fantastiska resurser Webbdesign är en stor färdighet att ha - det låter dig skapa din egen webbplats och kan vara en bra väg till en ny karriär. Så här lär du dig grunderna. Läs mer för att hjälpa dig.

Utforska mer om: Kodningstutorials, HTML5.