Home-theater-designers
Quando crei un nuovo sito web, in questi giorni vorrai che sia compatibile con HTML5 . Ma non vorrai nemmeno perdere tempo inutilmente imparando le complessità di HTML5 da zero, vero?
Fortunatamente, il Modello di piastra caldaia HTML5 può aiutare. È un semplice modello front-end che puoi utilizzare per creare un sito Web HTML5 in pochi minuti. Ma è anche abbastanza potente da poter essere utilizzato come base di un sito complesso e completo.
come recuperare la tua serie di scatti?
Questo tutorial HTML5 Boilerplate esaminerà ciò che viene fornito nel modello, le nozioni di base che devi sapere su come usarlo e alcune risorse per ulteriori approfondimenti. Ti mostrerò anche come ho utilizzato il modello per creare un sito molto semplice con solo poche righe di HTML.
Il modello di boilerplate HTML5
Quando scarichi il modello da HTML5 Boilerplate, ottieni un numero di cartelle e file. Ecco il contenuto del file 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.pngQui non esamineremo tutti gli elementi del modello, ma solo le basi. Per essere sicuri di avere le risorse per utilizzare tutti i file, tuttavia, inizieremo con i documenti di aiuto.
Documentazione di aiuto della piastra caldaia HTML5
Boilerplate ha una collezione di documenti di aiuto ospitati in GitHub . Questo è di grande aiuto quando hai domande tecniche o ti stai chiedendo perché qualcosa è stato progettato in quel modo.
Quasi tutto nella documentazione è incluso anche nella cartella doc del modello. Vedrai una serie di file Markdown (.md) che sono di grande aiuto per capire come costruire il tuo sito Boilerplate.
Se vuoi leggere tutto, inizia con TOC.md e segui i collegamenti da lì ad altri file Markdown. Se stai cercando aiuto su un problema specifico, trova il file che sembra correlato; use.md è un buon punto di partenza.
A partire dal CSS di HTML5 Boilerplate
Il template HTML5 Boilerplate viene fornito con due file CSS: main.css e normalize.css.
Il secondo file, normalize.css, aiuta i diversi browser a rendere gli elementi in modo coerente. Per saperne di più su come funziona, dai un'occhiata al progetto normalize.css su GitHub .
Nel frattempo, main.css è dove inserirai qualsiasi codice di cui hai bisogno formatta il tuo sito con CSS . Il CSS standard incluso con il template è il risultato di una ricerca condotta dagli sviluppatori e dalla comunità HTML5 Boilerplate. È leggibile e si visualizza bene in diversi browser.
Se vuoi aggiungere il tuo CSS, puoi aggiungerlo alla sezione Stili personalizzati dell'autore. Aggiungerò un po' di stile di collegamento per la nostra pagina di esempio:
Ci sono anche una serie di utili classi di supporto incluse nel CSS di base. Alcuni di essi nascondono elementi dai browser standard e dagli screen reader (o da alcune combinazioni).
Anche in main.css troverai supporto per il design reattivo e utili impostazioni di stampa.
Tutti questi elementi sono chiaramente spiegati dai commenti nel CSS:
In generale, puoi iniziare con il CSS di base.
Aggiunta del proprio codice HTML al modello
Boilerplate include due file HTML: 404.html e index.html.
La pagina dell'indice è dove creerai la tua home page (o la tua unica pagina, se stai cercando un semplice one-pager).
Se apri la pagina dell'indice in un browser, vedrai una singola riga di testo. Ma esaminare l'HTML rivela molto di più nascosto nel codice. L'unica cosa di cui devi veramente preoccuparti di cambiare è il codice di Google Analytics (trova il testo 'UA-XXXXX-Y' e sostituiscilo con il tuo codice di monitoraggio).
Il resto dell'HTML nella pagina dell'indice include informazioni per app Web, notifiche per vecchi browser e JavaScript utili. Quando inizi, non dovresti aver bisogno di scherzare con tutto questo.
Averli già precompilati, tuttavia, è un buon modo per assicurarti che il tuo sito sia pronto per ottenere il massimo da HTML5.
Per creare la tua pagina, inserisci il tuo codice HTML tra i tag nel file. Ecco alcune informazioni di base che aggiungerò su di me:
Vuoi creare più pagine? Crea copie di questo file e rinominale in modo da non dover copiare e incollare tutto l'HTML. Quindi aggiungi i tuoi contenuti.
Se desideri personalizzare la tua pagina 404, modifica semplicemente il file HTML. Non sei sicuro di cosa inserire nella tua pagina 404? Dai un'occhiata a questi fantastici esempi di progettazione di pagine 404.
Aggiunta di una favicon (e altre icone)
Vuoi sostituire la tua favicon? Quindi favicon.ico è il file che dovrai sostituire.
Se non ne hai ancora uno, dovrai crearne uno. Puoi utilizzare un generatore di favicon online o progettarne uno tuo. Assicurati solo che sia 16 x 16 pixel e abbia il tipo di file .ico.
avviso devi solo installare un'ottima app
È una buona idea riflettere sulla tua favicon. Usa queste famose favicon per guidare il tuo brainstorming. Assicurati che quando aggiungi la nuova favicon si chiami favicon.ico.
Potresti notare che ci sono altre tre immagini nella directory principale del tuo sito: icon.png, tile.png e tile-wide.png. A cosa servono?
- icon.png viene utilizzato per le icone touch di Apple. Se crei un'app Web, questa icona verrà utilizzata quando un utente iPhone o iPad aggiunge l'app alla schermata iniziale.
- tile.png e tile-wide.png sono per la funzionalità 'pin' di Windows e verranno visualizzati in Windows 10.
È una buona idea fornire icone per tutti questi casi, ma se non stai creando un'app Web, può essere una priorità inferiore.
Aggiunta di più funzionalità
Dopo aver aggiunto il tuo codice HTML e una favicon (oltre a qualsiasi CSS che potresti voler includere), il tuo sito è pronto per essere pubblicato. È così facile usare HTML5 Boilerplate. Caricalo sul tuo server e il gioco è fatto!
Ecco come appare la nostra pagina:
Come puoi vedere, solo poche righe di testo hanno creato un sito web completamente funzionale (anche se un po' insipido). Non è molto, ma ci sono voluti solo pochi minuti. Ed è altamente estensibile con HTML5. Questo è il potere del modello Boilerplate.
Ma c'è molto di più che puoi fare con il modello Boilerplate, se lo desideri. Se c'è qualcosa di specifico che stai cercando, ci sono buone probabilità che tu lo trovi nella documentazione di aiuto.
Se non sei sicuro di cosa puoi fare con HTML5, ma ti piacerebbe scoprirlo, ci sono molti tutorial di web design là fuori per aiutarti.
Condividere Condividere Tweet E-mail Va bene installare Windows 11 su un PC incompatibile?Ora puoi installare Windows 11 sui vecchi PC con il file ISO ufficiale... ma è una buona idea farlo?
Leggi Avanti Argomenti correlati- Programmazione
- HTML5
- Tutorial sulla programmazione
Dann è un consulente di marketing e strategia dei contenuti che aiuta le aziende a generare domanda e lead. Scrive anche su strategia e content marketing su dannalbright.com.
Altro da Dann AlbrightIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti