Cum se creează un site web în procese verbale utilizând fișierul HTML5 Boilerplate

Când construiți un nou site web, în ​​aceste zile veți dori ca acesta să fie compatibil cu HTML5. Dar, de asemenea, nu doriți să petreceți timp inutil de învățare a complexității HTML5 de la zero, nu?

Din fericire, șablonul HTML5 Boilerplate vă poate ajuta. Este un simplu șablon de front-end pe care îl puteți utiliza pentru a crea un site web HTML5 în doar câteva minute. Dar este suficient de puternic încât să-l poți folosi ca fundație a unui site complex, pe deplin prezentat.

Acest tutorial HTML5 Boilerplate va trece peste ceea ce vine în șablon, elementele de bază pe care trebuie să le cunoașteți despre cum să le utilizați și unele resurse pentru învățarea ulterioară. De asemenea, vă voi arăta cum am folosit șablonul pentru a crea un site foarte simplu, cu doar câteva linii HTML.

Șablonul Bootplate HTML5

Când descărcați șablonul din Boilerplate HTML5, obțineți un număr de directoare și fișiere. Iată conținutul fișierului ZIP:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- furnizor --- 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

Nu vom trece peste fiecare element din șablon aici, doar elementele de bază. Pentru a vă asigura că aveți resursele necesare pentru a utiliza toate fișierele, totuși, vom începe cu ajutorul documentelor de ajutor.

Documentația Ajutor pentru Ajutorul HTML5

Boilerplate are o colecție de documente de ajutor găzduite în GitHub. Acesta este un ajutor mare atunci când aveți întrebări tehnice sau vă întrebați de ce a fost proiectat așa cum a fost.

Aproape totul din documentație este de asemenea inclus în dosarul doc al șablonului. Veți vedea un număr de fișiere Markdown (.md) care vă vor ajuta să aflați cum să vă construiți site-ul Boilerplate.

Dacă doriți să citiți totul, începeți cu TOC.md și urmați linkurile de acolo în alte fișiere Markdown. Dacă căutați ajutor pentru o anumită problemă, găsiți fișierul care pare a fi asociat; use.md este un loc bun pentru a începe.

Începând cu CSS-ul HTML5 al Boilerplate

Șablonul Boogleplate HTML5 vine cu două fișiere CSS: main.css și normalize.css.

Al doilea fișier, normalize.css, ajută diferite browsere să facă elemente în mod consecvent. Pentru a afla mai multe despre modul în care funcționează, verificați proiectul normalize.css de la GitHub.

Între timp, main.css este locul în care veți introduce orice cod de care aveți nevoie pentru a formata site-ul dvs. cu CSS 10 Exemple simple de cod CSS puteți învăța în 10 minute 10 Exemple simple de cod CSS puteți învăța în 10 minute Vom merge peste cum să creați o foaie de stil inline pentru a vă putea practica abilitățile CSS. Apoi vom trece la 10 exemple CSS de bază. De acolo, imaginația ta este limita! Citeste mai mult . CSS standard inclus în șablon este rezultatul cercetărilor realizate de dezvoltatori și de comunitatea HTML5 Boilerplate. Este ușor de citit și se afișează frumos în diferite browsere.

Dacă doriți să adăugați propriul dvs. CSS, îl puteți adăuga în secțiunea Stiluri personalizate a autorului. Voi adăuga un pic de stil de legătură pentru pagina noastră de exemplu:

Există, de asemenea, un număr de clase ajutoare utile incluse în baza CSS. Unele dintre ele ascund elementele de la browserele standard și cititoarele de ecran (sau o combinație).

Tot în main.css veți găsi suport pentru design receptiv și setări de imprimare utile.

Toate aceste elemente sunt clar explicate prin comentarii în CSS:

În general, puteți începe cu CSS de bază.

Adăugarea propriului cod HTML în șablon

Boilerplate include două fișiere HTML: 404.html și index.html.

Pagina de index este locul în care veți crea pagina dvs. de pornire (sau singura dvs. pagină, dacă aveți de gând să faceți un simplu pager). Site-ul web doar o singură pagină: 3 motive pentru care poate funcționa pentru ideea dvs. Motivele pentru care poate funcționa pentru ideea dvs. Citește mai mult).

Dacă deschideți pagina de index într-un browser, veți vedea o singură linie de text. Dar căutarea în HTML dezvăluie o ascundere mult mai mult în cod. Singurul lucru de care trebuie să vă faceți griji în legătură cu modificarea este codul Google Analytics Ghidul dvs. pentru Google Analytics Ghidul dvs. pentru Google Analytics Aveți vreo idee de unde provin vizitatorii dvs., ce browsere folosesc majoritatea acestora, ce motoare de căutare folosesc , sau care dintre paginile dvs. este cea mai populară? Citește mai mult (găsiți textul “UA-XXXXX-Y” și înlocuiți-o cu propriul cod de urmărire).

Restul codului HTML din pagina index include informații pentru aplicațiile web, notificări pentru browsere vechi și coduri JavaScript utile. Când începeți, nu trebuie să vă deranjez niciunul din aceste lucruri.

Având deja pre-populate, este o modalitate bună de a vă asigura că site-ul dvs. este pregătit să profite la maxim de HTML5.

Pentru a crea pagina dvs., introduceți codul HTML între tag-uri în fișier. Iată câteva informații de bază pe care le voi adăuga despre mine:

Doriți să creați mai multe pagini? Creați copii ale acestui fișier și le redenumiți, astfel încât să nu trebuiască să copiați și să lipiți tot HTML-ul. Apoi adăugați conținutul.

Dacă doriți să personalizați pagina dvs. 404, modificați doar fișierul HTML. Nu sunteți sigur ce să vă puneți pe pagina dvs. 404? Check out aceste exemple minunate de proiectare a paginilor 404 Cum să faci o pagină de eroare de 404 minus și 10 exemple Cum să faci o pagină de eroare de 404 și exemple 10 O pagină de eroare 404 proiectată inteligent poate fi diferența dintre un site plictisitor și un site web memorabil. Citeste mai mult .

Adăugarea unui Favicon (și a altor pictograme)

Doriți să înlocuiți faviconul? Apoi favicon.ico este fișierul pe care va trebui să îl înlocuiți.

Dacă nu aveți încă unul, va trebui să creați unul. Aveți posibilitatea să utilizați un generator de favicon online sau să creați propriul dvs.. Asigurați-vă că este vorba de 16 x 16 pixeli și are tipul de fișier .ico.

Este o idee bună să vă gândiți la favicon. Utilizați aceste favicoane faimoase Icoanele dvs. preferate: 14 Favicoane care ies din mulțime Icoanele dvs. preferate: 14 Favicoane care ies din mulțime După ce începeți să observați favicoane, vă dați seama cât de mult diferă acestea. Cele mai multe sunt plictisitoare, previzibile și instantaneu uitate. Dar unii sunt destul de buni ca să iasă din mulțime. Citiți mai multe pentru a ghida brainstorming-ul. Asigurați-vă că atunci când adăugați noul favicon se numește favicon.ico.

Este posibil să observați că există alte trei imagini în directorul rădăcină al site-ului dvs.: icon.png, tile.png și tile-wide.png. Pentru ce sunt acestea??

• icon.png este utilizat pentru pictogramele Apple touch. Dacă construiți o aplicație web, această pictogramă va fi utilizată atunci când un utilizator iPhone sau iPad adaugă aplicația pe ecranul inițial.
• tile.png și tile-wide.png sunt pentru Windows ' “bolț” și va apărea în Windows 10.

Este o idee bună să furnizați pictograme pentru toate aceste cazuri - dar dacă nu construiți o aplicație web, aceasta poate fi o prioritate mai mică.

Adăugarea de funcționalități suplimentare

Odată ce ați adăugat codul dvs. HTML și un favicon (precum și orice CSS pe care doriți să îl includeți), site-ul dvs. este gata să fie publicat. Asta este cât de ușor este să utilizați Bootplate HTML5. Încărcați-l pe serverul dvs. și ați terminat!

Iată cum arată pagina noastră:

După cum puteți vedea, doar câteva rânduri de text au creat un site web complet funcțional (dacă este puțin bland). Nu e prea mult, dar a durat doar câteva minute. Și este foarte extensibil cu HTML5. Aceasta este puterea șablonului Boilerplate.

Dar, dacă doriți, aveți multe de făcut cu șablonul Boilerplate. Dacă există ceva specific pe care îl căutați, există șanse mari să îl găsiți în documentația de ajutor.

Dacă nu sunteți sigur ce puteți face cu HTML5, dar doriți să aflați, există o mulțime de tutoriale de design web acolo Aveți nevoie de un tutorial de design de site? Utilizați aceste 10 resurse minunate Aveți nevoie de un tutorial de design de site? Utilizați aceste 10 resurse minunate Web design-ul este o mare abilitate de a avea - vă permite să vă creați propriul site web și poate fi o cale grozavă pentru o nouă carieră. Iată cum puteți afla elementele de bază. Citiți mai multe pentru a vă ajuta.

Explorați mai multe despre: Tutoriale de codificare, HTML5.