Home-theater-designers
Når du bygger et nytt nettsted, vil du i disse dager at det skal være HTML5-kompatibelt. Men du vil heller ikke bruke unødvendig tid på å lære HTML5's forviklinger fra bunnen av, gjør du?
Heldigvis er HTML5 kjeleplate -mal kan hjelpe. Det er en enkel front-end-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 grunnlaget for et komplekst, fullt utstyrt nettsted.
hvordan koble ps2 -kontrolleren til pc
Denne HTML5 Boilerplate -opplæringen 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 skal også vise deg hvordan jeg brukte malen til å lage et helt grunnleggende nettsted med bare noen få HTML -linjer.
HTML5 Boilerplate -malen
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
---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.pngVi skal ikke gå over hvert element i malen her, bare det grunnleggende. For å sikre at du har ressurser til å bruke alle filene, starter vi med hjelpedokumentene.
Hjelpedokumentasjon for HTML5 Boilerplate
Boilerplate har en samling av hjelpedokumenter i GitHub . Dette er en stor hjelp når du har tekniske spørsmål eller lurer på hvorfor noe ble designet slik det var.
Nesten alt i dokumentasjonen er også inkludert i doc -mappen i malen. Du vil se en rekke Markdown -filer (.md) som er til stor hjelp for å finne ut hvordan du bygger ditt Boilerplate -nettsted.
Hvis du vil lese gjennom alt, starter du med TOC.md og følger koblingene derfra til andre Markdown -filer. Hvis du leter etter hjelp om et bestemt problem, kan du finne filen som høres ut som om den kan være relatert. usage.md er et godt sted å starte.
Starter med HTML5 Boilerplates CSS
HTML5 Boilerplate -malen kommer med to CSS -filer: main.css og normalize.css.
Den andre filen, normalize.css, hjelper forskjellige nettlesere med å gjengi elementer på konsekvente måter. For å lære mer om hvordan det fungerer, sjekk ut normalize.css -prosjektet på GitHub .
I mellomtiden er main.css der du legger inn hvilken som helst kode du trenger formater nettstedet ditt med CSS . Standard CSS som følger med malen er et resultat av forskning utført av utviklere og HTML5 Boilerplate -fellesskapet. Den er lesbar og vises pent i forskjellige nettlesere.
Hvis du vil legge til din egen CSS, kan du legge den til i Forfatterens tilpassede stiler -seksjon. Jeg vil legge til litt lenke styling for vår eksempelside:
Det er også en rekke nyttige hjelperklasser inkludert i grunn -CSS. Noen av dem skjuler elementer fra standard nettlesere og skjermlesere (eller en kombinasjon).
Også i main.css finner du støtte for responsiv design og nyttige utskriftsinnstillinger.
Alle disse elementene forklares tydelig med kommentarer i CSS:
Generelt kan du komme i gang med basis -CSS.
Legge til din egen HTML i malen
Boilerplate inneholder to HTML -filer: 404.html og index.html.
Indekssiden er der du vil opprette hjemmesiden din (eller din eneste side, hvis du går for en enkel én personsøker).
Hvis du åpner indekssiden i en nettleser, ser du en enkelt tekstlinje. Men å se på HTML -koden avslører mye mer som skjuler seg i koden. Det eneste du virkelig trenger å bekymre deg for å endre er Google Analytics-koden (finn teksten 'UA-XXXXX-Y' og erstatt den med din egen sporingskode).
Resten av HTML -koden på indekssiden inneholder informasjon om nettapper, varsler for gamle nettlesere og nyttige JavaScript -koder. Når du begynner, bør du ikke trenge å 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 å opprette siden din, sett inn HTML -koden mellom kodene i filen. Her er noen grunnleggende informasjon som jeg vil legge til om meg selv:
Vil du opprette flere sider? Lag kopier av denne filen og gi dem nytt navn, slik at du ikke trenger å kopiere og lime inn hele HTML -koden. Legg deretter til innholdet ditt.
Hvis du vil tilpasse 404 -siden din, må du bare endre HTML -filen. Usikker på hva du skal sette på 404 -siden din? Sjekk ut disse flotte 404 sidedesigneksemplene.
Legge til et Favicon (og andre ikoner)
Vil du bytte ut favorittikonet ditt? 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 din egen. Bare pass på at den er 16 x 16 piksler og har .ico -filtypen.
hvordan du kjører Windows -programmer på Android
Det er en god idé å tenke litt på favorittikonet ditt. Bruk disse berømte favorittikonene for å veilede tankene dine. Sørg for at når du legger til det nye favikonet, kalles det favicon.ico.
Du vil kanskje legge merke til at det er tre andre bilder i rotkatalogen på nettstedet ditt: icon.png, tile.png og tile-wide.png. Hva er disse til?
- icon.png brukes for Apple touch -ikoner. Hvis du bygger en webapp, vil dette ikonet bli brukt når en iPhone eller iPad -bruker legger til appen på startskjermen.
- tile.png og tile-wide.png er for Windows 'pin-funksjonalitet, og vil vises i Windows 10.
Det er en god idé å gi ikoner for alle disse tilfellene --- men hvis du ikke bygger en webapp, kan det ha en lavere prioritet.
Legger til mer funksjonalitet
Når du har lagt til HTML -koden din og et favikon (i tillegg til hvilken som helst CSS du vil inkludere), er nettstedet ditt klart til å bli publisert. Så enkelt er det å bruke HTML5 Boilerplate. Last den opp til serveren din, og du er ferdig!
Slik ser siden vår ut:
Som du kan se, har bare noen få tekstlinjer skapt et fullt funksjonelt (om litt kjedelig) nettsted. Det er ikke mye, men det tok bare noen minutter. Og det er svært utvidbart med HTML5. Det er kraften i Boilerplate -malen.
Men det er mye mer du kan gjøre med Boilerplate -malen hvis du vil. Hvis det er noe spesifikt du leter etter, er det en god sjanse for at du finner det i hjelpedokumentasjonen.
Hvis du ikke er sikker på hva du kan gjøre med HTML5, men du vil finne ut av det, er det mange opplæringsprogrammer for webdesign som kan hjelpe deg.
Dele Dele kvitring E -post Er det greit å installere Windows 11 på en inkompatibel PC?Du kan nå installere Windows 11 på eldre PCer med den offisielle ISO -filen ... men er det en god idé å gjøre det?
Les neste Relaterte temaer- Programmering
- HTML5
- Opplæringsprogrammer for koding
Dann er en innholdsstrategi og markedsføringskonsulent som hjelper bedrifter med å generere etterspørsel og kundeemner. Han blogger også om strategi og innholdsmarkedsføring på dannalbright.com.
Mer fra Dann AlbrightAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere