Sådan oprettes et websted på få minutter ved hjælp af HTML5-kedelplade

Når du bygger et nyt websted, ønsker du i dag, at det skal være HTML5-kompatibelt. Men du ønsker heller ikke at bruge unødvendig tid på at lære HTML5-vanskelighederne fra bunden af, gør du?

Heldigvis kan HTML5 Boilerplate-skabelonen hjælpe. Det er en simpel front-end skabelon, som du kan bruge til at oprette et HTML5-websted på bare få minutter. Men det er også kraftfuldt nok til at du kan bruge det som grundlaget for et komplekst, fuldt udstyret websted.

Denne HTML5-kedelpladsvejledning vil gennemgå, hvad der kommer i skabelonen, det grundlæggende, du har brug for at vide om, hvordan du bruger det, og nogle ressourcer til videre læring. Jeg vil også vise dig, hvordan jeg brugte skabelonen til at oprette et meget grundlæggende websted med kun et par HTML-linjer.

HTML5-kedelskabelonen

Når du downloader skabelonen fra HTML5 Boilerplate, får du et antal mapper og filer. Her er indholdet af ZIP-filen:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- leverandør --- jquery.min.js --- modernizr.min.js .editorconfig .htaccess 404.html browserconfig.xml favicon.ico human.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

Vi vil ikke gå over hvert element i skabelonen her, kun det grundlæggende. For at sikre, at du har ressourcerne til at bruge alle filerne, starter vi dog med hjælpedokumenterne.

HTML5 Boilerplate Hjælp Dokumentation

Kedelplade har en samling hjælpedokumenter, der er vært i GitHub. Dette er en stor hjælp, når du har tekniske spørgsmål eller undrer dig over, hvorfor noget blev designet som det var.

Næsten alt i dokumentationen er også inkluderet i doc-mappen til skabelonen. Du vil se et antal Markdown-filer (.md), der er en stor hjælp til at finde ud af, hvordan du bygger dit Boilerplate-sted.

Hvis du vil læse igennem alt, skal du starte med TOC.md og følge linkene derfra til andre Markdown-filer. Hvis du leder efter hjælp til et specifikt problem, skal du finde den fil, der lyder som om den muligvis er relateret; use.md er et godt sted at starte.

Start med HTML5 Boilerplate's CSS

HTML5 Boilerplate-skabelonen leveres med to CSS-filer: main.css og normalize.css.

Den anden fil, normalisere.css, hjælper forskellige browsere med at gengive elementer på ensartede måder. Hvis du vil lære mere om, hvordan det fungerer, skal du tjekke projektet normalize.css på GitHub.

I mellemtiden er main.css det sted, hvor du lægger en hvilken som helst kode, du har brug for for at formatere dit websted med CSS 10 enkle CSS-kodeeksempler, du kan lære på 10 minutter 10 enkle CSS-kodeeksempler, du kan lære på 10 minutter, vi går over hvordan man opretter et inline stilark, så du kan øve dine CSS-færdigheder. Derefter går vi over på 10 grundlæggende CSS-eksempler. Derfra er din fantasi grænsen! . Den standard CSS, der er inkluderet i skabelonen, er resultatet af forskning udført af udviklere og HTML5 Boilerplate-samfundet. Det er læsbart og vises pænt i forskellige browsere.

Hvis du vil tilføje din egen CSS, kan du tilføje den til afsnittet Forfatterens tilpassede stilarter. Jeg tilføjer lidt linkstyling til vores eksempelside:

Der er også et antal nyttige hjælperklasser inkluderet i CSS-basen. Nogle af dem skjuler elementer fra standardbrowsere og skærmlæsere (eller en eller anden kombination).

Også i main.css finder du support til responsivt design og nyttige udskriftsindstillinger.

Alle disse poster er tydeligt forklaret af kommentarer i CSS:

Generelt kan du komme i gang med basen CSS.

Føj din egen HTML til skabelonen

Kedelplade indeholder to HTML-filer: 404.html og index.html.

Indekssiden er det sted, hvor du opretter din startside (eller din eneste side, hvis du er på udkig efter en simpelsideside. Bare en webside med en enkelt side: 3 grunde til, at det kan fungere til din idé, blot et websted med en enkelt side: 3 Årsager til, at det kan fungere for din idé).

Hvis du åbner indekssiden i en browser, ser du en enkelt tekstlinie. Men at undersøge HTML-koden afslører meget mere gemmer sig i koden. Det eneste, du virkelig skal bekymre dig om at ændre, er Google Analytics-koden Din guide til Google Analytics Din guide til Google Analytics Har du nogen idé om, hvor dine besøgende kommer fra, hvilke browsere de fleste af dem bruger, hvilke søgemaskiner de bruger , eller hvilken af ​​dine sider er den mest populære? (find teksten “UA-XXXXX-Y” og udskift den med din egen sporingskode).

Resten af ​​HTML på indekssiden inkluderer information til webapps, underretninger til gamle browsere og nyttige JavaScripts. Når du kommer i gang, skal du ikke have noget at rod med.

At have dem allerede forudfyldt er en god måde at sikre, at dit websted er parat til at få mest muligt ud af HTML5.

For at oprette din side skal du indsætte din HTML mellem tags i filen. Her er nogle grundlæggende oplysninger, som jeg vil tilføje om mig selv:

Vil du oprette flere sider? Opret kopier af denne fil og omdøb dem, så du ikke behøver at kopiere og indsætte hele HTML'en over. Tilføj derefter dit indhold.

Hvis du gerne vil tilpasse din 404-side, skal du bare ændre HTML-filen. Ikke sikker på, hvad du skal lægge på din 404 side? Se de fantastiske eksempler på 404-sidedesign Hvordan man laver en stor 404-fejlside & 10-eksempler Sådan gør du en fantastisk 404-fejlside & 10-eksempler En smart designet 404-fejlside kan være forskellen mellem et kedeligt websted og et mindeværdigt websted. .

Tilføjelse af et Favicon (og andre ikoner)

Vil du udskifte dit favorit? Så er favicon.ico den fil, du skal udskifte.

Hvis du ikke har en endnu, skal du oprette en. Du kan bruge en online favicon-generator eller designe din egen. Bare sørg for, at det er 16 x 16 pixels og har .ico-filtypen.

Det er en god ide at tænke i dit favorit. Brug disse berømte favoritter til dine yndlingsikoner: 14 favorikoner, der skiller sig ud fra folkemængden. Din favoritikoner: 14 favoritter, der skiller sig ud fra folkemængden. Når du begynder at bemærke favicons, er du klar over, hvor meget de adskiller sig. De fleste er kedelige, forudsigelige og øjeblikkeligt glemmelige. Men nogle er gode nok til at skille sig ud fra mængden. for at guide din brainstorming. Sørg for, at når du tilføjer det nye favicon det kaldes favicon.ico.

Du kan bemærke, at der er tre andre billeder i rodkataloget på dit websted: icon.png, tile.png og tile-wide.png. Hvad er disse til?

• icon.png bruges til Apple touch-ikoner. Hvis du bygger en webapp, bruges dette ikon, når en iPhone- eller iPad-bruger tilføjer appen til deres hjemmeskærm.
• tile.png og tile-wide.png er til Windows ' “pin” funktionalitet og vises i Windows 10.

Det er en god ide at give ikoner til alle disse tilfælde - men hvis du ikke bygger en webapp, kan det være en lavere prioritet.

Tilføjelse af mere funktionalitet

Når du har tilføjet din HTML og et favicon (såvel som enhver CSS, du måske vil inkludere), er dit websted klar til at blive offentliggjort. Sådan er det nemt at bruge HTML5-kedelplade. Upload den til din server, så er du færdig!

Sådan ser vores side ud:

Som du kan se, har bare et par tekstlinjer oprettet et fuldt funktionelt websted (hvis det er lidt intetsigende). Det er ikke meget, men det tog kun et par minutter. Og det er meget udvides med HTML5. Det er kraften i skabelonen til kedel.

Men der er meget mere, du kan gøre med kedelpladeskabelonen, hvis du vil. Hvis der er noget specifikt, du leder efter, er der en god chance for at du finder det i hjælpedokumentationen.

Hvis du ikke er sikker på, hvad du kan gøre med HTML5, men du gerne vil finde ud af, er der masser af webdesign-tutorials derude Har du brug for en webside-design-tutorial? Brug disse 10 fantastiske ressourcer Har du brug for en tutorial til webstedsdesign? Brug disse 10 Awesome Resources Web-design er en stor færdighed at have - det giver dig mulighed for at oprette din egen hjemmeside og kan være en god sti til en ny karriere. Sådan lærer du det grundlæggende. for at hjælpe dig.