Come creare un sito web in pochi minuti utilizzando HTML5 Boilerplate

Quando crei un nuovo sito web, in questi giorni vorrai che sia compatibile con HTML5. Ma anche tu non vuoi perdere tempo inutilmente imparando le complessità di HTML5 da zero, vero??

Fortunatamente, il modello HTML5 Boilerplate può essere d'aiuto. È 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 per un sito complesso e completo.

Questo tutorial HTML5 Boilerplate ripercorrerà ciò che viene fornito nel modello, le nozioni di base che devi sapere su come utilizzarlo e alcune risorse per l'ulteriore apprendimento. Ti mostrerò anche come ho usato il modello per creare un sito di base con solo poche righe di HTML.

Il modello HTML5 Boilerplate

Quando si scarica il modello da HTML5 Boilerplate, si ottiene un numero di cartelle e file. Ecco i contenuti 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.png

Non esamineremo tutti gli elementi del modello qui, solo le basi. Per essere sicuro di avere le risorse per utilizzare tutti i file, inizieremo con i documenti della guida.

HTML5 Boilerplate Help Documentation

Boilerplate ha una raccolta di documenti di aiuto ospitati su GitHub. Questo è di grande aiuto quando hai domande tecniche o ti stai chiedendo perché qualcosa è stato progettato così com'era.

Quasi tutto nella documentazione è anche incluso nella cartella doc del modello. Vedrai un certo numero di file Markdown (.md) che sono di grande aiuto nel capire come costruire il tuo sito Boilerplate.

Se vuoi leggere tutto, inizia con TOC.md e segui i link da lì ad altri file Markdown. Se stai cercando aiuto su un problema specifico, trova il file che potrebbe essere correlato; usage.md è un buon punto di partenza.

A partire dal CSS di HTML5 Boilerplate

Il modello 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, controlla il progetto normalize.css su GitHub.

Nel frattempo, main.css è dove inserirai tutto il codice che ti serve per formattare il tuo sito con CSS 10 Esempi di codici CSS semplici che puoi imparare in 10 minuti 10 Esempi di codici CSS semplici che puoi imparare in 10 minuti come creare un foglio di stile in linea in modo da poter praticare le tue abilità CSS. Quindi passeremo a 10 esempi CSS di base. Da lì, la tua immaginazione è il limite! Leggi di più . Il CSS standard incluso nel modello è il risultato di una ricerca condotta dagli sviluppatori e dalla comunità HTML5 Boilerplate. È leggibile e visualizza bene nei diversi browser.

Se si desidera aggiungere il proprio CSS, è possibile aggiungerlo alla sezione Stili personalizzati dell'autore. Aggiungerò un po 'di stile dei collegamenti per la nostra pagina di esempio:

Ci sono anche una serie di classi helper utili incluse nel CSS di base. Alcuni di essi nascondono oggetti da browser standard e screen reader (o qualche combinazione).

Anche in main.css troverai supporto per la progettazione reattiva e le utili impostazioni di stampa.

Tutti questi elementi sono chiaramente spiegati dai commenti nel CSS:

In generale, puoi iniziare con il CSS di base.

Aggiungere il proprio codice HTML al modello

Boilerplate include due file HTML: 404.html e index.html.

La pagina indice è dove creerai la tua homepage (o la tua unica pagina, se stai andando per un semplice cercapersone Solo un sito web di una pagina: 3 motivi per cui può funzionare per la tua idea Solo una pagina Sito web: 3 Motivi per cui può funzionare per la tua idea Leggi di più).

Se apri la pagina indice in un browser, vedrai una singola riga di testo. Ma esaminare l'HTML rivela molto più nascondimento nel codice. L'unica cosa che devi davvero preoccuparti di cambiare è il codice di Google Analytics La tua guida a Google Analytics La tua guida a Google Analytics Hai idea di dove arrivano i tuoi visitatori, di quali browser utilizzano la maggior parte, quali motori di ricerca usano o quale delle tue pagine è la più popolare? Leggi di più (trova il testo “UA-XXXXX-Y” e sostituirlo con il proprio codice di tracciamento).

Il resto dell'HTML nella pagina dell'indice include informazioni per app Web, notifiche per vecchi browser e utili JavaScript. Quando inizierai, non dovresti avere problemi con questo.

Averli già pre-compilati, tuttavia, è un buon modo per assicurarti che il tuo sito sia preparato per sfruttare al meglio HTML5.

Per creare la tua pagina, inserisci il tuo HTML tra tag nel file. Ecco alcune informazioni di base che aggiungerò su me stesso:

Vuoi creare più pagine? Crea copie di questo file e rinominale in modo da non dover copiare e incollare tutto il codice HTML. Quindi aggiungi il tuo contenuto.

Se desideri personalizzare la tua pagina 404, modifica semplicemente il file HTML. Non sei sicuro di cosa mettere sulla tua pagina 404? Dai un'occhiata a questi fantastici esempi di progettazione di 404 pagine Come fare una pagina di errore 404 e 10 esempi eccezionali Come creare una pagina di errore 404 e 10 esempi Una pagina di errore 404 progettata in modo intelligente può fare la differenza tra un sito web noioso e un sito web memorabile. Leggi di più .

Aggiunta di un 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. È possibile utilizzare un generatore di favicon online o progettare il proprio. Assicurati che sia 16 x 16 pixel e abbia il tipo di file .ico.

È una buona idea mettere un po 'di pensiero nella tua favicon. Usa queste famose icone preferite Le tue icone preferite: 14 favicon che si distinguono dalla massa Le tue icone preferite: 14 favicon che si distinguono dalla folla Una volta che inizi a notare le favicon, ti rendi conto di quanto differiscano. La maggior parte sono noiosi, prevedibili e immediatamente dimenticabili. Ma alcuni sono abbastanza buoni da distinguersi dalla massa. Leggi di più 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. Per cosa sono questi?

• icon.png è utilizzato per icone Apple touch. Se si crea un'app Web, questa icona verrà utilizzata quando un utente iPhone o iPad aggiunge l'app alla propria schermata iniziale.
• tile.png e tile-wide.png sono per Windows ' “perno” funzionalità, e apparirà 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.

Aggiungere più funzionalità

Una volta che hai aggiunto il tuo HTML e una favicon (così come qualsiasi CSS che potresti voler includere), il tuo sito è pronto per essere pubblicato. Ecco come è 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. Questa è la potenza del modello Boilerplate.

Ma se vuoi, puoi fare molto altro con il modello Boilerplate. Se c'è qualcosa di specifico che stai cercando, c'è una buona possibilità che lo trovi nella documentazione della guida.

Se non sei sicuro di cosa puoi fare con HTML5, ma ti piacerebbe scoprirlo, ci sono un sacco di tutorial di web design là fuori Hai bisogno di un tutorial di progettazione di siti web? Usa queste 10 fantastiche risorse Hai bisogno di un tutorial sul design del sito? Usa queste 10 fantastiche risorse Il web design è una grande abilità da avere: ti consente di creare il tuo sito web e può essere un ottimo percorso per una nuova carriera. Ecco come imparare le basi. Leggi di più per aiutarti.

Scopri di più su: Esercitazioni di codifica, HTML5.