Kuidas luua veebisaiti minutitega HTML5 katlaplaadi abil

Kuidas luua veebisaiti minutitega HTML5 katlaplaadi abil

Uue veebisaidi ehitamisel soovite tänapäeval, et see ühilduks HTML5-ga. Kuid te ei taha ka tarbetult aega nullist HTML5 nõtkuste õppimisele kulutada?





Õnneks, HTML5 katlamaja mall saab aidata. See on lihtne kasutajaliidese mall, mille abil saate HTML5-veebisaidi luua vaid mõne minutiga. Kuid see on ka piisavalt võimas, et saaksite seda kasutada keeruka, täisfunktsionaalse saidi alusena.



parim 3 ühes õuna laadimisjaam

See HTML5 Boilerplate'i õpetus käsitleb malli sisu, põhitõdesid, mida peate selle kasutamise kohta teadma, ja mõningaid ressursse edasiseks õppimiseks. Näitan teile ka seda, kuidas ma kasutasin malli, et luua väga lihtne sait, millel on vaid paar rida HTML -i.





HTML5 katlamaja mall

Kui laadite malli alla HTML5 Boilerplate'ilt, saate hulga kaustu ja faile. Siin on ZIP -faili sisu:

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

Me ei hakka siin üle vaatama malli kõiki elemente, vaid ainult põhitõdesid. Et veenduda, et teil on ressursse kõigi failide kasutamiseks, alustame siiski abidokumentidest.



HTML5 katlaplaadi abidokumentatsioon

Boilerplate'il on kogu abidokumendid, mida hostitakse GitHubis . See on suureks abiks, kui teil on tehnilisi küsimusi või mõtlete, miks midagi kujundati nii, nagu see oli.

Peaaegu kõik dokumentatsioonis sisalduv on ka malli doc -kaustas. Näete mitmeid Markdown (.md) faile, mis on suureks abiks Boilerplate'i saidi ülesehitamisel.



Kui soovite kõik läbi lugeda, alustage TOC.md -ga ja järgige sealt linke teistele Markdown -failidele. Kui otsite konkreetses küsimuses abi, leidke fail, mis tundub olevat seotud; use.md on hea koht alustamiseks.

Alustades HTML5 Boilerplate'i CSS -iga

HTML5 Boilerplate'i mallil on kaks CSS -faili: main.css ja normalize.css.



Teine fail normalize.css aitab erinevatel brauseritel elemente järjepidevalt renderdada. Selle toimimise kohta lisateabe saamiseks vaadake normalize.css projekt GitHubis .

Vahepeal peate main.css sisestama vajaliku koodi vormindage oma sait CSS -iga . Malliga kaasnev standardne CSS on arendajate ja HTML5 Boilerplate kogukonna tehtud uuringute tulemus. See on loetav ja kuvatakse kenasti erinevates brauserites.

Kui soovite lisada oma CSS -i, saate selle lisada jaotisse Autori kohandatud stiilid. Lisan meie näidislehele natuke lingi stiili:

Baas -CSS -is on ka mitmeid kasulikke abitunde. Mõned neist peidavad üksusi tavaliste brauserite ja ekraanilugejate (või mõne kombinatsiooni) eest.

Ka saidist main.css leiate toe reageeriva kujunduse ja kasulike prindiseadete jaoks.

Kõiki neid punkte selgitavad selgelt CSS -i kommentaarid:

Üldiselt saate alustada CSS -i baasrakendusega.

Oma HTML -i lisamine mallile

Boilerplate sisaldab kahte HTML -faili: 404.html ja index.html.

Indeksileht on koht, kus loote oma avalehe (või teie ainsa lehe, kui otsite lihtsat ühelehekülge).

Kui avate indekslehe brauseris, näete ühte tekstirida. Kuid HTML -i uurides ilmneb koodis palju enamat. Ainuke asi, mille muutmise pärast peaksite tõesti muretsema, on Google Analyticsi kood (leidke tekst „UA-XXXXX-Y” ja asendage see oma jälgimiskoodiga).

Indeksilehe ülejäänud HTML sisaldab teavet veebirakenduste kohta, märguandeid vanade brauserite kohta ja kasulikke JavaScripte. Kui alustate, ei peaks te selle kõigega jama.

Kui aga need on juba eelasustatud, on see hea viis veendumaks, et teie sait on valmis HTML5-st maksimaalselt kasu saama.

Lehe loomiseks sisestage HTML -fail failis olevate siltide vahele. Siin on mõned põhilised andmed, mida ma enda kohta lisan:

Kas soovite rohkem lehti luua? Looge sellest failist koopiad ja nimetage need ümber, et te ei peaks kogu HTML -i kopeerima ja kleepima. Seejärel lisage oma sisu.

Kui soovite oma 404 lehte kohandada, muutke lihtsalt HTML -faili. Kas pole kindel, mida oma 404 lehele panna? Vaadake neid suurepäraseid 404 -leheküljelisi disaininäiteid.

Faviconi (ja muude ikoonide) lisamine

Kas soovite oma faviconi asendada? Seejärel on favicon.ico fail, mille peate asendama.

Kui teil seda veel pole, peate selle looma. Võite kasutada veebipõhist favicon -generaatorit või kujundada oma. Lihtsalt veenduge, et selle suurus on 16 x 16 pikslit ja failitüüp .ico.

kuidas pääseda Internetti sisse roku kaudu

Hea mõte on oma lemmikute hulka mõelda. Kasutage neid kuulsaid faviconeid oma ajurünnaku juhtimiseks. Veenduge, et uue faviconi lisamisel nimetatakse seda favicon.ico.

Võite märgata, et teie saidi juurkataloogis on veel kolm pilti: icon.png, tile.png ja tile-wide.png. Milleks need on?

  • icon.png kasutatakse Apple'i puutetundlike ikoonide jaoks. Kui loote veebirakenduse, kasutatakse seda ikooni, kui iPhone'i või iPadi kasutaja lisab rakenduse oma avakuvale.
  • tile.png ja tile-wide.png on mõeldud Windowsi pin-funktsioonide jaoks ja kuvatakse Windows 10-s.

Kõigi nende juhtumite jaoks on hea ikoonid pakkuda-aga kui te ei loo veebirakendust, võib see olla madalam prioriteet.

Funktsionaalsuse lisamine

Kui olete lisanud oma HTML -i ja faviconi (samuti kõik CSS -id, mille soovite lisada), on teie sait avaldamiseks valmis. Nii lihtne on kasutada HTML5 Boilerplate'i. Laadige see oma serverisse üles ja oletegi valmis!

Meie leht näeb välja selline:

Nagu näete, on vaid paar rida teksti loonud täielikult funktsionaalse (kui natuke mage) veebisaidi. Seda pole palju, kuid selleks kulus vaid mõni minut. Ja seda saab HTML5 abil väga laiendada. See on Boilerplate'i malli jõud.

Kuid soovi korral saate Boilerplate'i malliga teha palju muud. Kui otsite midagi konkreetset, leiate selle suure tõenäosusega abidokumentatsioonist.

Kui te pole kindel, mida HTML5 -ga teha saate, kuid soovite seda teada saada, leiate veebiarenduse õpetusi, mis aitavad teid palju.

Jaga Jaga Piiksuma E -post Kas Windows 11 installimine ühildumatusse arvutisse sobib?

Nüüd saate installida Windows 11 vanematele arvutitele ametliku ISO -failiga ... kuid kas see on hea mõte?

Loe edasi Seotud teemad
  • Programmeerimine
  • HTML5
  • Kodeerimise õpetused
Autori kohta Siis Albright(Avaldatud 506 artiklit)

Dann on sisustrateegia ja turunduskonsultant, kes aitab ettevõtetel nõudlust ja müügivihjeid luua. Samuti peab ta blogi strateegiast ja sisuturundusest saidil dannalbright.com.

Veel Dann Albrightilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin