Home-theater-designers
Când creați un nou site web, în aceste zile veți dori să fie compatibil cu HTML5. Dar nici nu doriți să petreceți timp inutil învățând complexitatea HTML5 de la zero, nu-i așa?
Din fericire, Șablon HTML5 Boilerplate poate ajuta. Este un șablon frontal simplu pe care îl puteți utiliza pentru a crea un site web HTML5 în doar câteva minute. Dar este, de asemenea, suficient de puternic încât să îl puteți folosi ca bază a unui site complex, complet dotat.
rotirea videoclipurilor pe Windows Media Player
Acest tutorial HTML5 Boilerplate va trece peste ceea ce vine în șablon, elementele de bază pe care trebuie să le cunoașteți cum să le utilizați și câteva 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 de HTML.
Șablonul HTML5 Boilerplate
Când descărcați șablonul de pe HTML5 Boilerplate, primiți un număr de foldere și fișiere. Iată conținutul fișierului 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.pngNu vom trece peste fiecare element din șablon aici, ci doar elementele de bază. Totuși, pentru a ne asigura că aveți resursele necesare pentru a utiliza toate fișierele, vom începe cu documentele de ajutor.
Documentație de ajutor HTML5 Boilerplate
Boilerplate are o colecție de documente de ajutor găzduite în GitHub . Acesta este un mare ajutor atunci când aveți întrebări tehnice sau vă întrebați de ce ceva a fost conceput așa cum a fost.
Aproape totul din documentație este, de asemenea, inclus în folderul doc al șablonului. Veți vedea o serie de fișiere Markdown (.md) care vă ajută 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 către alte fișiere Markdown. Dacă sunteți în căutarea ajutorului pentru o anumită problemă, găsiți fișierul care pare că ar putea fi legat; usage.md este un loc bun pentru a începe.
Începând cu CSS HTML5 Boilerplate
Șablonul HTML5 Boilerplate vine cu două fișiere CSS: main.css și normalize.css.
Al doilea fișier, normalize.css, ajută diferite browsere să redea elemente în moduri consecvente. Pentru a afla mai multe despre cum funcționează, consultați proiectul normalize.css la GitHub .
Între timp, main.css este locul în care veți introduce orice cod de care aveți nevoie formatați-vă site-ul cu CSS . CSS standard inclus în șablon este rezultatul cercetărilor efectuate de dezvoltatori și comunitatea HTML5 Boilerplate. Este lizibil și se afișează frumos în diferite browsere.
Dacă doriți să adăugați propriul CSS, îl puteți adăuga în secțiunea Stiluri personalizate a autorului. Voi adăuga un pic de stil de link pentru pagina noastră de exemplu:
Există, de asemenea, o serie de clase de ajutor utile incluse în CSS de bază. Unele dintre ele ascund elemente de browserele standard și de cititoarele de ecran (sau de o combinație).
De asemenea, în main.css veți găsi suport pentru design receptiv și setări utile de imprimare.
Toate aceste elemente sunt explicate clar de comentariile din CSS:
În general, puteți începe cu CSS de bază.
Adăugarea propriului cod HTML la șablon
Boilerplate include două fișiere HTML: 404.html și index.html.
Pagina index este locul în care vă veți crea pagina de pornire (sau singura dvs. pagină, dacă doriți un simplu pager).
Dacă deschideți pagina index într-un browser, veți vedea o singură linie de text. Dar examinarea codului HTML arată mult mai multe ascunderi în cod. Singurul lucru de care trebuie să vă faceți griji cu privire la schimbare este codul Google Analytics (găsiți textul „UA-XXXXX-Y” și înlocuiți-l cu propriul cod de urmărire).
Restul codului HTML din pagina index include informații pentru aplicații web, notificări pentru browsere vechi și JavaScript utile. Când începeți, nu ar trebui să aveți nevoie de nimic.
Cu toate acestea, a le avea deja pre-populate este o modalitate bună de a vă asigura că site-ul dvs. este pregătit pentru a profita la maximum de HTML5.
Pentru a vă crea pagina, introduceți codul HTML între etichetele din 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 redenumiți-le, astfel încât să nu trebuie să copiați și să lipiți tot HTML-ul. Apoi adăugați conținutul.
Dacă doriți să vă personalizați pagina 404, trebuie doar să modificați fișierul HTML. Nu sunteți sigur ce să puneți pe pagina dvs. 404? Consultați aceste exemple extraordinare de design de 404 de pagini.
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. Puteți utiliza un generator de favicon online sau vă puteți crea propriul. Asigurați-vă că are 16 x 16 pixeli și că are tipul de fișier .ico.
computerul se trezește aleatoriu din ferestrele de somn 10
Este o idee bună să puneți câteva gânduri în faviconul dvs. Folosiți aceste celebre favicoane pentru a vă 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ă creați o aplicație web, această pictogramă va fi utilizată atunci când un utilizator iPhone sau iPad adaugă aplicația pe ecranul de pornire.
- tile.png și tile-wide.png sunt pentru funcționalitatea „pin” a Windows și vor apărea în Windows 10.
Este o idee bună să oferiți pictograme pentru toate aceste cazuri --- dar dacă nu creați o aplicație web, aceasta poate fi o prioritate mai mică.
Adăugarea mai multor funcționalități
După ce ați adăugat codul HTML și un favicon (precum și orice CSS pe care doriți să îl includeți), site-ul dvs. este gata să fie publicat. Atât de ușor este să folosiți HTML5 Boilerplate. Î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 cam fad). Nu este mult, dar a durat doar câteva minute. Și este extrem de extensibil cu HTML5. Aceasta este puterea șablonului Boilerplate.
Dar puteți face mult mai multe cu șablonul Boilerplate, dacă doriți. Dacă căutați ceva anume, aveți ș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 web design pentru a vă ajuta.
Acțiune Acțiune Tweet E-mail Este bine să instalați Windows 11 pe un computer incompatibil?Acum puteți instala Windows 11 pe computere mai vechi cu fișierul ISO oficial ... dar este o idee bună să faceți acest lucru?
Citiți în continuare Subiecte asemănătoare- Programare
- HTML5
- Tutoriale de codare
Dann este un consultant în strategie de conținut și marketing care ajută companiile să genereze cerere și clienți potențiali. De asemenea, el blogează despre strategie și marketing de conținut la dannalbright.com.
Mai multe de la Dann AlbrightAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona