Hur man skapar en webbplats på några minuter med hjälp av HTML5 -kokplatta

Hur man skapar en webbplats på några minuter med hjälp av HTML5 -kokplatta

När du bygger en ny webbplats vill du i dag att den ska vara HTML5-kompatibel. Men du vill inte heller spendera onödig tid på att lära dig HTML5 -krångligheterna från början, eller hur?





Lyckligtvis är HTML5 pannplatta mall kan hjälpa. 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 för att du ska kunna använda det som grunden för en komplex, fullt utrustad webbplats.





hur varmt är för varmt cpu

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





HTML5 -pannplattemallen

När du laddar ner 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
---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

Vi kommer inte att gå igenom alla element i mallen här, bara grunderna. För att se till att du har resurser för att använda alla filer börjar vi med hjälpdokumenten.



Hjälpdokumentation för HTML5 -panna

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

Nästan allt i dokumentationen ingår också i mallens mapp. Du kommer att se ett antal Markdown -filer (.md) som är till stor hjälp för att ta reda på hur du bygger din Boilerplate -webbplats.





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

Börjar med HTML5 Boilerplates CSS

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





Den andra filen, normalize.css, hjälper olika webbläsare att återge element på konsekventa 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 vilken kod du behöver formatera din webbplats med CSS . Standard CSS som ingår i mallen är resultatet av forskning som utförts av utvecklare och HTML5 Boilerplate -gemenskapen. Den är läsbar och visas fint i olika webbläsare.

Om du vill lägga till din egen CSS kan du lägga till den i författarens anpassade stilar. Jag lägger till lite länkstyling för vår exempelsida:

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

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

Alla dessa artiklar förklaras tydligt av kommentarer i CSS:

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

Lägga till din egen HTML i mallen

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

Indekssidan är där du skapar din hemsida (eller din enda sida, om du går för en enkel personsökare).

Om du öppnar indexsidan i en webbläsare ser du en enda textrad. Men att titta på HTML avslöjar mycket mer som gömmer sig i koden. Det enda du verkligen behöver oroa dig för att ändra är Google Analytics-koden (hitta texten 'UA-XXXXX-Y' och ersätt den med din egen spårningskod).

Resten av HTML -koden på indexsidan innehåller information för webbappar, aviseringar för gamla webbläsare och användbara JavaScript. När du börjar ska du inte behöva krångla till något av detta.

Att ha dem redan förbefolkade ä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, infoga din HTML mellan taggarna i filen. Här är lite grundläggande information 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. Vet du inte vad du ska lägga till på din 404 -sida? Kolla in dessa fantastiska exempel på 404 sidor.

Lägga till ett Favicon (och andra ikoner)

Vill du byta ut ditt favicon? Då är favicon.ico filen du måste byta ut.

Om du inte har en än måste du skapa en. Du kan använda en online favicon generator eller designa din egen. Se bara till att den är 16 x 16 pixlar och har .ico -filtypen.

bästa sättet att spela musik i bilen

Det är en bra idé att fundera lite på ditt favoritikon. Använd dessa berömda favoriter för att vägleda din brainstorming. Se till att när du lägger till det nya favicon heter det 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 används den här ikonen när en iPhone- eller iPad -användare lägger till appen på sin startskärm.
  • tile.png och tile-wide.png är avsedda för Windows '' pin ''-funktion och visas i Windows 10.

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

Lägger till mer funktionalitet

När du har lagt till din HTML och ett favikon (liksom all 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 text skapat en fullt fungerande (om det är lite intetsägande) webbplats. Det är inte mycket, men det tog bara några minuter. Och det är mycket utbyggbart 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 är något specifikt du letar efter finns det en god chans att du hittar det 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 gott om webbdesignstudier där ute för att hjälpa dig.

Dela med sig Dela med sig Tweet E-post Är det okej att installera Windows 11 på en inkompatibel dator?

Du kan nu installera Windows 11 på äldre datorer med den officiella ISO -filen ... men är det en bra idé att göra det?

Läs Nästa
Relaterade ämnen
  • Programmering
  • HTML5
  • Handledning för kodning
Om författaren Sedan Albright(506 artiklar publicerade)

Dann är en innehållsstrategi och marknadskonsult som hjälper företag att skapa efterfrågan och leads. Han bloggar också om strategi och innehållsmarknadsföring på dannalbright.com.

Mer från Dann Albright

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera