Kako izraditi web stranicu u nekoliko minuta pomoću HTML5 bojlera

Kako izraditi web stranicu u nekoliko minuta pomoću HTML5 bojlera

Kada izrađujete novu web stranicu, ovih dana poželjet ćete da bude kompatibilna s HTML5. No, isto tako ne želite trošiti nepotrebno vrijeme učeći zamršenosti HTML5 ispočetka, zar ne?





Srećom, HTML5 predložak kotlovske ploče mogu pomoći. To je jednostavan prednji predložak koji možete upotrijebiti za izradu HTML5 web stranice u samo nekoliko minuta. Ali također je dovoljno snažan da ga možete koristiti kao temelj složene, potpuno opremljene web stranice.



najbolja aplikacija za fotografije za Windows 10

Ovaj vodič za HTML5 Boilerplate će proći kroz ono što dolazi u predlošku, osnove koje trebate znati o tome kako ga koristiti i neke izvore za daljnje učenje. Također ću vam pokazati kako sam koristio predložak za stvaranje vrlo osnovne web stranice sa samo nekoliko redaka HTML -a.





Predložak bojler ploče HTML5

Kada preuzmete predložak s HTML5 Boilerplatea, dobit ćete brojne mape i datoteke. Evo sadržaja ZIP datoteke:

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

Ovdje nećemo pregledavati svaki element predloška, ​​samo osnove. Kako bismo bili sigurni da imate resurse za korištenje svih datoteka, počet ćemo s dokumentima pomoći.



Dokumentacija za pomoć HTML5 bojlera

Boilerplate ima zbirku dokumenti pomoći smješteni na GitHubu . Ovo je od velike pomoći ako imate tehničkih pitanja ili se pitate zašto je nešto osmišljeno onako kako je bilo.

Gotovo sve u dokumentaciji također je uključeno u mapu doc ​​predloška. Vidjet ćete brojne Markdown (.md) datoteke koje su vam od velike pomoći u shvaćanju načina izgradnje vaše stranice Boilerplate.



Ako želite pročitati sve, počnite s TOC.md i slijedite veze do drugih Markdown datoteka. Ako tražite pomoć po određenom pitanju, pronađite datoteku koja zvuči kao da je povezana; use.md je dobro mjesto za početak.

Počevši s HTML5 kotlovskim CSS -om

Predložak HTML5 Boilerplate dolazi s dvije CSS datoteke: main.css i normalize.css.



Druga datoteka, normalize.css, pomaže različitim preglednicima u iscrtavanju elemenata na dosljedan način. Da biste saznali više o tome kako to funkcionira, pogledajte normalize.css projekt na GitHubu .

U međuvremenu, main.css je mjesto gdje ćete unijeti bilo koji kôd koji trebate formatirajte svoju web lokaciju pomoću CSS -a . Standardni CSS uključen u predložak rezultat je istraživanja provedenih od strane programera i zajednice HTML5 Boilerplate. Čitljivo je i lijepo se prikazuje u različitim preglednicima.

Ako želite dodati vlastiti CSS, možete ga dodati u odjeljak Autorski prilagođeni stilovi. Dodati ću malo stila veze za našu stranicu s primjerom:

U osnovni CSS uključen je i niz korisnih pomoćnih klasa. Neki od njih skrivaju stavke iz standardnih preglednika i čitača zaslona (ili neke kombinacije).

Također u main.css ćete pronaći podršku za responzivni dizajn i korisne postavke ispisa.

Sve ove stavke jasno su objašnjene komentarima u CSS -u:

Općenito, možete započeti s osnovnim CSS -om.

Dodavanje vlastitog HTML -a u predložak

Ploča kotla uključuje dvije HTML datoteke: 404.html i index.html.

Indeksna stranica je mjesto na kojem ćete stvoriti svoju početnu stranicu (ili svoju jedinu stranicu, ako se odlučujete za jednostavnu stranicu s jednim pager-om).

Ako otvorite indeksnu stranicu u pregledniku, vidjet ćete jedan redak teksta. No, gledanje u HTML otkriva mnogo više skrivanja u kodu. Jedino o čemu se zaista morate brinuti oko promjene je Google Analytics kôd (pronađite tekst 'UA-XXXXX-Y' i zamijenite ga vlastitim kodom za praćenje).

Ostatak HTML -a na indeksnoj stranici uključuje informacije za web aplikacije, obavijesti za stare preglednike i korisne JavaScripte. Kad počinjete, ne biste se trebali petljati u sve ovo.

Međutim, ako su već unaprijed popunjeni, dobar je način da se uvjerite da je vaša web stranica spremna izvući maksimum iz HTML5.

Da biste stvorili svoju stranicu, umetnite HTML između oznaka u datoteci. Evo nekoliko osnovnih podataka koje ću dodati o sebi:

Želite stvoriti više stranica? Napravite kopije ove datoteke i preimenujte ih kako ne biste morali kopirati i zalijepiti sav HTML. Zatim dodajte svoj sadržaj.

Ako želite prilagoditi svoju stranicu 404, samo izmijenite HTML datoteku. Niste sigurni što staviti na svoju 404 stranicu? Pogledajte ove sjajne primjere dizajna 404 stranice.

Dodavanje Favicona (i drugih ikona)

Želite li zamijeniti svoj favicon? Tada je favicon.ico datoteka koju ćete morati zamijeniti.

Ako ga još nemate, morat ćete ga izraditi. Možete koristiti mrežni generator favicona ili sami dizajnirati. Samo provjerite ima li dimenzije 16 x 16 piksela i ima li vrstu datoteke .ico.

kako duplicirati spotify popis pjesama

Bilo bi dobro razmisliti o svom faviconu. Upotrijebite ove poznate ikone za usmjeravanje svog brainstorminga. Kad dodate novi favicon, pobrinite se da se zove favicon.ico.

Možda ćete primijetiti da u korijenskom direktoriju vaše web stranice postoje još tri slike: icon.png, tile.png i tile-wide.png. Čemu ovo služi?

  • icon.png koristi se za Appleove dodirne ikone. Ako izradite web aplikaciju, ova će se ikona koristiti kada korisnik iPhonea ili iPada doda aplikaciju na početni zaslon.
  • tile.png i tile-wide.png su za 'pin' funkcionalnost sustava Windows i prikazat će se u sustavu Windows 10.

Bilo bi dobro dati ikone za sve ove slučajeve --- ali ako ne izrađujete web aplikaciju, to može biti niži prioritet.

Dodavanje više funkcionalnosti

Nakon što dodate svoj HTML i favicon (kao i bilo koji CSS koji biste htjeli uključiti), vaša je stranica spremna za objavljivanje. Tako je jednostavno koristiti HTML5 bojler ploču. Prenesite ga na svoj poslužitelj i gotovi ste!

Evo kako izgleda naša stranica:

Kao što vidite, samo nekoliko redaka teksta stvorilo je potpuno funkcionalnu (iako pomalo bljutavu) web stranicu. Nije puno, ali trajalo je samo nekoliko minuta. I vrlo je proširiv s HTML5. To je snaga predloška Boilerplate.

No, ako želite, možete učiniti još mnogo toga s predloškom Boilerplate. Ako tražite nešto posebno, velika je vjerojatnost da ćete to pronaći u dokumentaciji za pomoć.

Ako niste sigurni što možete učiniti s HTML5, ali želite saznati, postoji mnogo tutoriala za web dizajn koji će vam pomoći u tome.

Udio Udio Cvrkut E -pošta Je li u redu instalirati Windows 11 na nekompatibilno računalo?

Sada možete instalirati Windows 11 na starija računala sa službenom ISO datotekom ... ali je li to dobro učiniti?

Pročitajte Dalje Povezane teme
  • Programiranje
  • HTML5
  • Vodiči za kodiranje
O autoru Zatim Albright(Objavljeno 506 članaka)

Dann je konzultant za strategiju sadržaja i marketing koji pomaže tvrtkama u stvaranju potražnje i potencijalnih klijenata. Također piše o strategiji i sadržajnom marketingu na dannalbright.com.

Više od Dann Albright

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu