Kako v nekaj minutah ustvariti spletno mesto z uporabo kotla HTML5

Kako v nekaj minutah ustvariti spletno mesto z uporabo kotla HTML5

Ko gradite novo spletno mesto, boste te dni želeli, da bo združljivo s HTML5. Prav tako pa ne želite porabiti nepotrebnega časa za učenje zapletenosti HTML5 od začetka, kajne?





Na srečo je Predloga kotlovnice HTML5 lahko pomagam. To je preprosta vmesna predloga, ki jo lahko uporabite za ustvarjanje spletnega mesta HTML5 v samo nekaj minutah. Je pa tudi dovolj močan, da ga lahko uporabite kot temelj kompleksnega, polno predstavljenega spletnega mesta.



brezplačne igre bingo za telefon android

Ta vadnica Boilerplate HTML5 bo obravnavala vse, kar je v predlogi, osnove, ki jih morate vedeti, kako jo uporabljati, in nekaj virov za nadaljnje učenje. Pokazal vam bom tudi, kako sem s predlogo ustvaril zelo preprosto spletno mesto z le nekaj vrsticami HTML.





Predloga kotlovnice HTML5

Ko prenesete predlogo s kotla HTML5, dobite številne mape in datoteke. Tukaj je vsebina datoteke ZIP:

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

Tu ne bomo obravnavali vseh elementov v predlogi, le osnove. Če želite zagotoviti, da imate vire za uporabo vseh datotek, bomo začeli z dokumenti za pomoč.



Dokumentacija za pomoč pri kotlu HTML5

Kotlovnica ima zbirko dokumenti pomoči, ki gostujejo v GitHubu . To je v veliko pomoč, če imate tehnična vprašanja ali se sprašujete, zakaj je bilo nekaj oblikovano tako, kot je bilo.

Skoraj vse v dokumentaciji je vključeno tudi v mapo doc predloge. Videli boste številne datoteke Markdown (.md), ki so v veliko pomoč pri ugotavljanju, kako zgraditi spletno mesto Boilerplate.



Če želite vse prebrati, začnite s TOC.md in sledite povezavam do drugih datotek Markdown. Če iščete pomoč pri določenem vprašanju, poiščite datoteko, za katero se sliši, da je morda povezana; use.md je dober začetek.

Začenši s CSS HTML5 Boilerplate

Predloga Boilerplate HTML5 ima dve datoteki CSS: main.css in normalize.css.



Druga datoteka normalize.css različnim brskalnikom pomaga pri upodabljanju elementov na dosleden način. Če želite izvedeti več o tem, kako deluje, si oglejte normalize.css projekt na GitHubu .

Medtem pa main.css vnese poljubno kodo formatirajte svoje spletno mesto s CSS . Standardni CSS, vključen v predlogo, je rezultat raziskav razvijalcev in skupnosti HTML5 Boilerplate. Je berljiv in lepo prikazan v različnih brskalnikih.

Če želite dodati svoj CSS, ga lahko dodate v razdelek Slogi po meri avtorja. Za našo primerno stran bom dodal nekaj stilov povezav:

V osnovni CSS je tudi nekaj uporabnih pomožnih razredov. Nekateri od njih skrijejo predmete iz standardnih brskalnikov in bralnikov zaslona (ali nekatere kombinacije).

Tudi v main.css boste našli podporo za odzivno oblikovanje in uporabne nastavitve tiskanja.

Vse te postavke so jasno razložene s komentarji v CSS:

Na splošno lahko začnete z osnovnim CSS -jem.

Dodajanje lastnega HTML -ja predlogi

Ogrevalna plošča vsebuje dve datoteki HTML: 404.html in index.html.

Indeksna stran je tista, kjer boste ustvarili svojo domačo stran (ali svojo edino stran, če nameravate uporabiti enostranski strani).

Če stran brskalnika odprete v brskalniku, boste videli eno vrstico besedila. Toda pogled v HTML odkrije veliko več skrivanja v kodi. Edino, kar vas mora skrbeti pri spreminjanju, je koda Google Analytics (poiščite besedilo 'UA-XXXXX-Y' in ga nadomestite s svojo kodo za sledenje).

Preostali HTML na strani indeksa vsebuje informacije za spletne aplikacije, obvestila za stare brskalnike in uporabne skripte JavaScripts. Ko začenjate, se vam s tem ne bi bilo treba zapletati.

Če so že vnaprej napolnjeni, je dober način, da zagotovite, da je vaše spletno mesto pripravljeno, da kar najbolje izkoristite HTML5.

Če želite ustvariti svojo stran, vstavite HTML med oznake v datoteki. Tu je nekaj osnovnih podatkov, ki jih bom dodal o sebi:

Želite ustvariti več strani? Ustvarite kopije te datoteke in jih preimenujte, da vam ne bo treba kopirati in prilepiti celotne kode HTML. Nato dodajte svojo vsebino.

Če želite stran 404 prilagoditi, spremenite datoteko HTML. Ne veste, kaj vstaviti na svojo stran 404? Oglejte si te odlične primere oblikovanja 404 strani.

Dodajanje ikone Favicon (in drugih ikon)

Želite zamenjati svoj favicon? Potem je favicon.ico datoteka, ki jo boste morali zamenjati.

Če ga še nimate, ga morate ustvariti. Uporabite lahko spletni generator priljubljenih ali ustvarite svojega. Prepričajte se, da je velikosti 16 x 16 slikovnih pik in da ima vrsto datoteke .ico.

kako shraniti adobe illustrator kot png

Dobro je, da v svoj favicon razmislite. Uporabite te znane ikone za vodenje svojega brainstorminga. Ko dodate nov favicon, se imenuje favicon.ico.

Morda boste opazili, da so v korenskem imeniku vašega spletnega mesta še tri slike: icon.png, tile.png in tile-wide.png. Za kaj so ti?

  • icon.png se uporablja za ikone Apple touch. Če ustvarite spletno aplikacijo, bo ta ikona uporabljena, ko uporabnik iPhone ali iPad doda aplikacijo na začetni zaslon.
  • tile.png in tile-wide.png sta za funkcijo 'pin' sistema Windows in se bosta prikazala v sistemu Windows 10.

Za vse te primere je dobro zagotoviti ikone-če pa ne gradite spletne aplikacije, je to lahko nižja prioriteta.

Dodajanje več funkcionalnosti

Ko dodate svoj HTML in favicon (pa tudi kateri koli CSS, ki ga želite vključiti), je vaše spletno mesto pripravljeno za objavo. Tako enostavno je uporabljati kotlovnico HTML5. Naložite ga na strežnik in končali ste!

Tako izgleda naša stran:

Kot lahko vidite, je le nekaj vrstic besedila ustvarilo popolnoma funkcionalno (četudi malce blažje) spletno mesto. Ni veliko, vendar je trajalo le nekaj minut. In je zelo razširljiv s HTML5. To je moč predloge Boilerplate.

S predlogo Boilerplate pa lahko storite še veliko več, če želite. Če iščete kaj posebnega, obstaja velika verjetnost, da ga najdete v dokumentaciji za pomoč.

Če niste prepričani, kaj lahko storite s HTML5, vendar bi radi izvedeli, obstaja veliko vadnic za spletno oblikovanje, ki vam bodo v pomoč.

Deliti Deliti Cvrkutati E-naslov Ali je v redu namestiti Windows 11 na nezdružljiv računalnik?

Zdaj lahko namestite Windows 11 na starejše računalnike z uradno datoteko ISO ... vendar je to dobro?

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML5
  • Kodiranje vadnic
O avtorju Potem Albright(Objavljenih 506 člankov)

Dann je svetovalec za vsebinsko strategijo in trženje, ki podjetjem pomaga ustvarjati povpraševanje in potencialne stranke. Na spletnem mestu dannalbright.com piše tudi o strategiji in vsebinskem trženju.

Več od Dann Albright

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite