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

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

Når du bygger et nyt websted, vil du i disse dage gerne have, at det er HTML5-kompatibelt. Men du vil heller ikke bruge unødvendig tid på at lære HTML5's forviklinger fra bunden, vel?





Heldigvis er HTML5 Skabelon til kedel kan hjælpe. Det er en simpel frontend-skabelon, som du kan bruge til at oprette et HTML5-websted på få minutter. Men det er også stærkt nok til, at du kan bruge det som grundlaget for et komplekst, fuldt udstyret websted.



hvordan man opretter en genvej på iphone

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





HTML5 -kedelskabelonskabelonen

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
---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 vil ikke gå over hvert element i skabelonen her, kun det grundlæggende. For at sikre, at du har ressourcer til at bruge alle filerne, starter vi dog med hjælpedokumenterne.



Hjælpedokumentation til HTML5 -kedelplade

Boilerplate har en samling af hjælpedokumenter hostet 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 skabelonens dokumentmappe. Du får vist et antal Markdown -filer (.md), der er en stor hjælp til at finde ud af, hvordan du bygger dit Boilerplate -websted.



Hvis du vil læse alt igennem, 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 kan være relateret; use.md er et godt sted at starte.

Starter med HTML5 Boilerplates CSS

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



Den anden fil, normalize.css, hjælper forskellige browsere med at gengive elementer på ensartede måder. Hvis du vil vide mere om, hvordan det fungerer, kan du tjekke det normalize.css -projekt på GitHub .

I mellemtiden er main.css, hvor du vil indsætte enhver kode, du har brug for formater dit websted med CSS . Den standard CSS, der følger med skabelonen, er et resultat af forskning foretaget af udviklere og HTML5 Boilerplate -fællesskabet. Det er læseligt 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å en række nyttige hjælperklasser inkluderet i basis -CSS. Nogle af dem skjuler elementer fra standardbrowsere og skærmlæsere (eller en kombination).

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

Alle disse punkter forklares tydeligt med kommentarer i CSS:

Generelt kan du komme i gang med basis -CSS.

Tilføjelse af din egen HTML til skabelonen

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

Indekssiden er, hvor du opretter din startside (eller din eneste side, hvis du går efter en simpel one-pager).

Hvis du åbner indekssiden i en browser, ser du en enkelt tekstlinje. Men at kigge nærmere på HTML afslører meget mere, der gemmer sig i koden. Det eneste, du virkelig skal bekymre dig om at ændre, er Google Analytics-koden (find teksten 'UA-XXXXX-Y', og erstat den med din egen sporingskode).

Resten af ​​HTML -koden på indekssiden indeholder oplysninger om webapps, meddelelser til gamle browsere og nyttige JavaScripts. Når du kommer i gang, burde du ikke skulle rode med noget af dette.

At have dem allerede forhåndsbefolket er imidlertid 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 tilføjer 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 -filen. Tilføj derefter dit indhold.

Hvis du vil tilpasse din 404 -side, skal du bare ændre HTML -filen. Ved du ikke, hvad du skal lægge på din 404 -side? Se disse flotte 404 sidedesigneksempler.

Tilføjelse af et Favicon (og andre ikoner)

Vil du udskifte dit favicon? 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 den er 16 x 16 pixels og har .ico -filtypen.

hvordan man ser placering på snapchat

Det er en god idé at tænke lidt over dit favikon. Brug disse berømte favicons til at guide din brainstorming. Sørg for, at når du tilføjer det nye favicon, kaldes det favicon.ico.

Du vil muligvis bemærke, at der er tre andre billeder i rodmappen 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 startskærm.
  • tile.png og tile-wide.png er til Windows '' pin ''-funktionalitet og vises i Windows 10.

Det er en god idé at angive ikoner for alle disse tilfælde --- men hvis du ikke bygger en webapp, kan det have en lavere prioritet.

Tilføjelse af mere funktionalitet

Når du har tilføjet din HTML og et favikon (samt enhver CSS, du måtte have med), er dit websted klar til at blive offentliggjort. Så nemt er det at bruge HTML5 Boilerplate. Upload det til din server, og du er færdig!

Sådan ser vores side ud:

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

Men der er meget mere, du kan gøre med Boilerplate -skabelonen, 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 det, er der masser af webdesign -selvstudier derude for at hjælpe dig.

Del Del Tweet E -mail Er det okay at installere Windows 11 på en inkompatibel pc?

Du kan nu installere Windows 11 på ældre pc'er med den officielle ISO -fil ... men er det en god idé at gøre det?

Læs Næste Relaterede emner
  • Programmering
  • HTML5
  • Kodning Tutorials
Om forfatteren Derefter Albright(506 artikler udgivet)

Dann er en indholdsstrategi og marketingkonsulent, der hjælper virksomheder med at skabe efterspørgsel og kundeemner. Han blogger også om strategi og content marketing på dannalbright.com.

Mere fra Dann Albright

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere