programmering

Slik lager du et nettsted i minutter ved hjelp av HTML5 Boilerplate

Slik lager du et nettsted i minutter ved hjelp av HTML5 Boilerplate / programmering

Når du bygger et nytt nettsted, vil du i dag ha det til å være HTML5-kompatibelt. Men du ønsker heller ikke å bruke unødvendig tid på å lære de vanskeligheter HTML5 har fra grunnen, gjør du?

Heldigvis kan HTML5 Boilerplate-malen hjelpe. Det er en enkel frontend-mal som du kan bruke til å lage et HTML5-nettsted på bare noen få minutter. Men det er også kraftig nok til at du kan bruke det som grunnlag for et komplekst, fullt utstyrt nettsted.

Denne opplæringen for HTML5 Boilerplate vil gå over det som kommer i malen, det grunnleggende du trenger å vite om hvordan du bruker det, og noen ressurser for videre læring. Jeg vil også vise deg hvordan jeg brukte malen for å lage et veldig grunnleggende nettsted med bare noen få linjer med HTML.

HTML5 Boilerplate Mal

Når du laster ned malen fra HTML5 Boilerplate, får du en rekke mapper og filer. Her er innholdet i 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 humans.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

Vi vil ikke gå over hvert element i malen her, bare det grunnleggende. For å sikre at du har ressurser til å bruke alle filene, skjønner vi imidlertid med hjelpedokumenter.

HTML5 Boilerplate Hjelp Dokumentasjon

Boilerplate har en samling hjelpedokumenter som er vert i GitHub. Dette er en stor hjelp når du har tekniske spørsmål eller lurer på hvorfor noe ble utformet slik det var.

Nesten alt i dokumentasjonen er også inkludert i doc-mappen til malen. Du ser en rekke Markdown-filer (.md) som er en stor hjelp for å finne ut hvordan du bygger din Boilerplate-side.

Hvis du vil lese gjennom alt, starter du med TOC.md og følger linkene derfra til andre Markdown-filer. Hvis du leter etter hjelp på et bestemt problem, kan du finne filen som høres ut som det kan være relatert. use.md er et bra sted å starte.

Starter med HTML5 Boilerplate CSS

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

Den andre filen, normalize.css, hjelper forskjellige nettlesere til å gjengi elementer på konsistente måter. For å lære mer om hvordan det fungerer, sjekk ut normalize.css-prosjektet på GitHub.

I mellomtiden er main.css der du skal sette inn hvilken kode du trenger for å formatere nettstedet ditt med CSS 10 enkle CSS-kodeeksempler du kan lære om 10 minutter 10 enkle CSS-kodeeksempler du kan lære om 10 minutter Vi går over hvordan lage et inline stylesheet slik at du kan øve dine CSS ferdigheter. Da flytter vi på 10 grunnleggende CSS eksempler. Derfra er fantasien din grense! Les mer . Standard CSS inkludert i malen er resultatet av forskning utført av utviklere og HTML5 Boilerplate-fellesskapet. Det er lesbart og viser pent i forskjellige nettlesere.

Hvis du vil legge til ditt eget CSS, kan du legge det til forfatterens tilpassede stiler-seksjon. Jeg legger til litt koblings styling for vår eksempelside:

Det finnes også en rekke nyttige hjelperklasser som er inkludert i basen CSS. Noen av dem gjemmer gjenstander fra vanlige nettlesere og skjermlesere (eller en kombinasjon).

Også i main.css finner du støtte for responsiv design og nyttige utskriftsinnstillinger.

Alle disse elementene er tydeligere forklart av kommentarer i CSS:

Generelt kan du komme i gang med basen CSS.

Legge til din egen HTML i malen

Boilerplate inneholder to HTML-filer: 404.html og index.html.

Indekssiden er hvor du skal lage din hjemmeside (eller din eneste side hvis du skal til en enkel en personsøker. Bare en enkeltside nettsted: 3 grunner til at det kan fungere for din ide Bare en enkeltside: 3 Grunner til at det kan fungere for din ide Les mer).

Hvis du åpner indekssiden i en nettleser, ser du en enkelt linje med tekst. Men å se på HTML viser mye mer gjemmer seg i koden. Det eneste du virkelig trenger å bekymre deg for, er å endre Google Analytics-koden Din guide til Google Analytics Din guide til Google Analytics Har du noen ide om hvor de besøkende kommer fra, hvilke nettlesere de fleste bruker, hvilke søkemotorer de bruker , eller hvilke av sidene dine er mest populære? Les mer (finn teksten “UA-XXXXX-Y” og erstatt den med din egen sporingskode).

Resten av HTML-en på indekssiden inneholder informasjon for webapps, varsler for gamle nettlesere og nyttige JavaScripts. Når du kommer i gang, trenger du ikke å rote med noe av dette.

Å ha dem allerede forhåndsbefolket, er imidlertid en god måte å sikre at nettstedet ditt er forberedt på å få mest mulig ut av HTML5.

For å lage din side, sett inn HTML-koden mellom koder i filen. Her er noen grunnleggende opplysninger som jeg legger til om meg selv:

Vil du opprette flere sider? Opprett kopier av denne filen og endre navn på dem, slik at du ikke trenger å kopiere og lime inn alle HTML-overføringene. Legg deretter til innholdet ditt.

Hvis du vil tilpasse 404-siden, endrer du bare HTML-filen. Ikke sikker på hva du skal sette på 404-siden din? Sjekk ut disse gode 404-sidedesigneksemplene Hvordan lage en flott 404-feilside og 10 eksempler Hvordan lage en flott 404-feilside og 10 eksempler En smart designet 404-feilside kan være forskjellen mellom et kjedelig nettsted og et minneverdig nettsted. Les mer .

Legge til en favicon (og andre ikoner)

Vil du bytte ut favicon? Da er favicon.ico filen du må erstatte.

Hvis du ikke har en enda, må du opprette en. Du kan bruke en online favicon generator eller designe ditt eget. Bare vær sikker på at den er 16 x 16 piksler og har .ico filtype.

Det er en god ide å legge inn litt tanke i faviconet ditt. Bruk disse kjente favicons Din favorittikoner: 14 Favicons som kommer ut fra mengden Dine favorittikoner: 14 Favicons som kommer ut av mengden Når du begynner å merke favikoner, innser du hvor mye de er forskjellige. De fleste er kjedelige, forutsigbare og umiddelbart forgettable. Men noen er gode nok til å skille seg ut fra mengden. Les mer for å veilede brainstorming. Pass på at når du legger til det nye faviconet kalles det favicon.ico.

Du kan merke at det er tre andre bilder i rotkatalogen på nettstedet ditt: icon.png, tile.png og tile-wide.png. Hva er disse for?

  • icon.png brukes til Apple touch-ikoner. Hvis du bygger en webapp, vil dette ikonet bli brukt når en iPhone eller iPad bruker legger appen til startskjermen.
  • tile.png og tile-wide.png er for Windows ' “tapp” funksjonalitet, og vil dukke opp i Windows 10.

Det er en god ide å gi ikoner for alle disse tilfellene, men hvis du ikke bygger en web-app, kan det være en lavere prioritet.

Legger til mer funksjonalitet

Når du har lagt til HTML og et favicon (samt alle CSS du kanskje vil inkludere), er nettstedet ditt klar til å bli publisert. Det er så enkelt det er å bruke HTML5 Boilerplate. Last opp den til serveren din, og du er ferdig!

Slik ser vår side ut:

Som du kan se, har bare noen få linjer med tekst opprettet en fullt funksjonell (hvis litt blid) nettside. Det er ikke mye, men det tok bare noen minutter. Og det er svært utvidbart med HTML5. Det er kraften til Boilerplate-malen.

Men det er mye mer du kan gjøre med Boilerplate-mal hvis du vil. Hvis det er noe spesifikt du leter etter, er det en god sjanse for at du finner den i hjelpedokumentasjonen.

Hvis du ikke er sikker på hva du kan gjøre med HTML5, men du vil gjerne finne ut det, er det nok av webdesign opplæringsprogrammer der ute. Trenger du en webdesigntutorial? Bruk disse 10 fantastiske ressursene Trenger du en webdesigntutorial? Bruk disse 10 fantastiske ressursene Webdesign er en flott ferdighet å ha - det lar deg lage ditt eget nettsted og kan være en fin måte å en ny karriere på. Slik lærer du det grunnleggende. Les mer for å hjelpe deg.

Utforsk mer om: Kodingstutorials, HTML5.