Home-theater-designers
Quan creeu un lloc web nou, actualment voldreu que sigui compatible amb HTML5. Però tampoc no voleu passar temps innecessari aprenent les complexitats d’HTML5 des de zero, oi?
Afortunadament, el Plantilla HTML5 Boilerplate Puc ajudar. És una senzilla plantilla frontal que podeu utilitzar per crear un lloc web HTML5 en pocs minuts. Però també és prou potent perquè pugueu utilitzar-lo com a base d’un lloc complex i amb totes les funcions.
com crear una drecera a l'iPhone
Aquest tutorial HTML5 Boilerplate repassarà el que ve a la plantilla, els conceptes bàsics que heu de saber sobre com utilitzar-la i alguns recursos per a un major aprenentatge. També us mostraré com he utilitzat la plantilla per crear un lloc molt bàsic amb només unes poques línies d’HTML.
La plantilla HTML5 Boilerplate
Quan descarregueu la plantilla des de HTML5 Boilerplate, obtindreu diversos fitxers i carpetes. Aquí teniu el contingut del fitxer 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.pngAquí no revisarem tots els elements de la plantilla, només els conceptes bàsics. Tot i així, per assegurar-vos que teniu els recursos necessaris per utilitzar tots els fitxers, començarem amb els documents d’ajuda.
Documentació d'ajuda HTML5 Boilerplate
Boilerplate té una col·lecció de documents d’ajuda allotjats a GitHub . Això és de gran ajuda quan teniu preguntes tècniques o us pregunteu per què s’ha dissenyat alguna cosa tal com era.
Gairebé tot el que hi ha a la documentació també s’inclou a la carpeta doc de la plantilla. Veureu diversos fitxers Markdown (.md) que són de gran ajuda per esbrinar com construir el lloc Boilerplate.
Si voleu llegir-ho tot, comenceu amb TOC.md i seguiu els enllaços des d’aquí a altres fitxers Markdown. Si busqueu ajuda sobre un problema concret, cerqueu el fitxer que sembla que estigui relacionat; usage.md és un bon lloc per començar.
Començant amb CSS de HTML5 Boilerplate
La plantilla HTML5 Boilerplate inclou dos fitxers CSS: main.css i normalize.css.
El segon fitxer, normalize.css, ajuda els diferents navegadors a renderitzar elements de manera coherent. Per obtenir més informació sobre com funciona, consulteu el projecte normalize.css a GitHub .
Mentrestant, main.css és on introduïu qualsevol codi que necessiteu formateu el vostre lloc amb CSS . El CSS estàndard inclòs amb la plantilla és el resultat de la investigació realitzada pels desenvolupadors i la comunitat HTML5 Boilerplate. Es pot llegir i es mostra molt bé en diferents navegadors.
Si voleu afegir el vostre propi CSS, podeu afegir-lo a la secció Estils personalitzats de l'autor. Afegiré una mica d’estil d’enllaç per a la nostra pàgina d’exemple:
També hi ha una sèrie de classes d’ajuda útils incloses al CSS base. Alguns d'ells amaguen elements dels navegadors i lectors de pantalla estàndard (o alguna combinació).
També a main.css trobareu suport per al disseny sensible i la configuració d’impressió útil.
Tots aquests ítems s’expliquen clarament mitjançant comentaris al CSS:
En general, podeu començar amb el CSS base.
Afegir el vostre propi HTML a la plantilla
Boilerplate inclou dos fitxers HTML: 404.html i index.html.
La pàgina d'índex és on crearà la vostra pàgina d'inici (o la vostra única pàgina, si voleu un simple paginador).
Si obriu la pàgina d'índex en un navegador, veureu una sola línia de text. Però mirar el codi HTML revela molt més amagat al codi. L'únic que us ha de preocupar de canviar és el codi de Google Analytics (cerqueu el text 'UA-XXXXX-Y' i substituïu-lo pel vostre propi codi de seguiment).
La resta d'HTML de la pàgina d'índex inclou informació per a aplicacions web, notificacions per a navegadors antics i JavaScript útils. Quan comenceu, no hauríeu de fer-ho amb res.
No obstant això, tenir-los ja poblats és una bona manera d'assegurar-vos que el vostre lloc estigui preparat per treure el màxim profit d'HTML5.
Per crear la vostra pàgina, inseriu el vostre HTML entre les etiquetes del fitxer. Aquí teniu informació bàsica que afegiré sobre mi:
Voleu crear més pàgines? Creeu còpies d'aquest fitxer i canvieu-ne el nom perquè no hàgiu de copiar i enganxar tot l'HTML. A continuació, afegiu el vostre contingut.
Si voleu personalitzar la vostra pàgina 404, només cal que modifiqueu el fitxer HTML. No esteu segur de què posar a la vostra pàgina 404? Consulteu aquests fantàstics exemples de disseny de 404 pàgines.
Afegir un Favicon (i altres icones)
Voleu substituir el vostre favicon? A continuació, favicon.ico és el fitxer que haureu de substituir.
Si encara no en teniu, n'haureu de crear un. Podeu utilitzar un generador de favicons en línia o dissenyar el vostre propi. Assegureu-vos que tingui 16 x 16 píxels i que tingui el tipus de fitxer .ico.
l'iphone 7 plus càmera posterior no funciona
És una bona idea reflexionar al vostre favicon. Utilitzeu aquests famosos favicons per guiar la vostra pluja d’idees. Assegureu-vos que quan afegiu el nou favicon es digui favicon.ico.
És possible que observeu que hi ha altres tres imatges al directori arrel del vostre lloc: icon.png, tile.png i tile-wide.png. Per a què serveixen?
- icon.png s'utilitza per a les icones tàctils d'Apple. Si creeu una aplicació web, aquesta icona s'utilitzarà quan un usuari d'iPhone o iPad afegeixi l'aplicació a la pantalla d'inici.
- tile.png i tile-wide.png són per a la funcionalitat de 'pin' de Windows i es mostraran a Windows 10.
És una bona idea proporcionar icones per a tots aquests casos, però si no esteu creant una aplicació web, pot ser una prioritat inferior.
Afegint més funcionalitat
Un cop hàgiu afegit el vostre HTML i un favicon (així com qualsevol CSS que vulgueu incloure), el vostre lloc ja es podrà publicar. Així de fàcil és utilitzar HTML5 Boilerplate. Pengeu-lo al vostre servidor i heu acabat.
A continuació s’explica la nostra pàgina:
Com podeu veure, només unes poques línies de text han creat un lloc web completament funcional (encara que una mica anodí). No és molt, però només va trigar uns minuts. I és molt extensible amb HTML5. Aquesta és la potència de la plantilla Boilerplate.
Però hi ha molt més que podeu fer amb la plantilla Boilerplate si ho desitgeu. Si busqueu alguna cosa específica, és probable que la trobeu a la documentació d’ajuda.
Si no esteu segur de què podeu fer amb HTML5, però voldríeu saber-ho, hi ha molts tutorials de disseny web que us ajudaran.
Compartir Compartir Tweet Correu electrònic Està bé instal·lar Windows 11 en un PC incompatible?Ara podeu instal·lar Windows 11 en equips antics amb el fitxer ISO oficial ... però és una bona idea fer-ho?
Llegiu a continuació Temes relacionats- Programació
- HTML5
- Tutorials de codificació
Dann és un assessor d’estratègia i màrqueting de contingut que ajuda les empreses a generar demanda i clients potencials. També fa blogs sobre màrqueting d’estratègia i contingut a dannalbright.com.
Més de Dann AlbrightSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us