Comment créer un site Web en quelques minutes à l’aide de HTML5 Boilerplate

Added 2018-07-02

Lorsque vous créez un nouveau site Web, vous voudrez qu’il soit compatible avec HTML5

. Mais vous ne souhaitez pas non plus perdre de temps inutile à apprendre les complexités de HTML5, n'est-ce pas?

Fortement, le Modèle Boilerplate HTML5

 peut aider. C’est un modèle frontal simple que vous pouvez utiliser pour créer un site Web HTML5 en quelques minutes seulement. Mais il est également assez puissant pour pouvoir être utilisé comme base d’un site complexe et complet.

Ce didacticiel HTML5 Boilerplate aborde les éléments fournis dans le modèle, les notions de base sur l'utilisation de celui-ci, ainsi que des ressources pour un apprentissage ultérieur. Je vais également vous montrer comment j'ai utilisé le modèle pour créer un site très basique avec seulement quelques lignes de code HTML.

Le modèle HTML5 Boilerplate

Lorsque vous téléchargez le modèle à partir de Boilerplate HTML5, vous obtenez un certain nombre de dossiers et de fichiers. Voici le contenu du fichier ZIP:

css
--- main.css
--- normaliser.css
doc
img
js
--- main.js
--- plugins.js
---vendeur
   --- jquery.min.js
   --- modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
human.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

Nous ne reviendrons pas sur tous les éléments du modèle ici, mais uniquement sur les bases. Pour vous assurer que vous avez les ressources nécessaires pour utiliser tous les fichiers, nous allons commencer par les documents d’aide.

Documentation d'aide de Boilerplate HTML5

Boilerplate a une collection de documents d'aide hébergés dans GitHub

. C'est une aide précieuse lorsque vous avez des questions techniques ou que vous vous demandez pourquoi quelque chose a été conçu de la sorte.

Presque tout dans la documentation est également inclus dans le dossier doc du modèle. Vous verrez un certain nombre de fichiers Markdown (.md) qui vous aideront à comprendre comment créer votre site Boilerplate.

Si vous voulez tout lire, commencez par TOC.md et suivez les liens à partir de là vers d'autres fichiers Markdown. Si vous recherchez de l'aide sur un problème spécifique, recherchez le fichier qui semble pouvoir être associé. utilisation.md est un bon point de départ.

À partir de CSS Boilerplate HTML5

Le modèle Boilerplate HTML5 est fourni avec deux fichiers CSS: main.css et normalize.css.

Le deuxième fichier, normalize.css, aide différents navigateurs à rendre les éléments de manière cohérente. Pour en savoir plus sur son fonctionnement, consultez la Projet normalize.css sur GitHub

.

Si vous souhaitez ajouter votre propre CSS, vous pouvez l’ajouter à la section Styles personnalisés de l’auteur. Je vais ajouter un peu de style de lien pour notre page d'exemple:

Un certain nombre de classes d’aide utiles sont également incluses dans le CSS de base. Certains d'entre eux cachent des éléments des navigateurs standard et des lecteurs d'écran (ou une combinaison des deux).

Dans le fichier principal.css, vous trouverez également de l'aide pour une conception réactive et des paramètres d'impression utiles.

Tous ces éléments sont clairement expliqués par les commentaires dans le CSS:

En général, vous pouvez commencer avec le CSS de base.

Ajout de votre propre code HTML au modèle

Boilerplate comprend deux fichiers HTML: 404.html et index.html.

Le reste du code HTML de la page d'index contient des informations sur les applications Web, des notifications pour les anciens navigateurs et des scripts Java utiles. Lorsque vous commencez, vous ne devriez plus avoir à vous soucier de ça.

Le fait de les pré-renseigner est toutefois un bon moyen de s’assurer que votre site est prêt à tirer le meilleur parti de HTML5.

Pour créer votre page, insérez votre code HTML entre les  balises dans le fichier. Voici quelques informations de base que je vais ajouter à mon sujet:

Voulez-vous créer plus de pages? Créez des copies de ce fichier et renommez-les afin que vous n'ayez pas à copier et coller tout le code HTML. Ajoutez ensuite votre contenu.

Ajout d'un favicon (et d'autres icônes)

Voulez-vous remplacer votre favicon? Ensuite, favicon.ico est le fichier que vous devez remplacer.

Si vous n'en avez pas encore, vous devez en créer un. Vous pouvez utiliser un générateur de favicon en ligne ou concevoir le vôtre. Assurez-vous simplement qu’il s’agit de 16 x 16 pixels et du type de fichier .ico.

Vous remarquerez peut-être qu'il existe trois autres images dans le répertoire racine de votre site: icon.png, tile.png et tile-wide.png. A quoi servent-ils?

• icon.png est utilisé pour les icônes tactiles Apple. Si vous créez une application Web, cette icône sera utilisée lorsqu'un utilisateur d'iPhone ou d'iPad l'ajoute à son écran d'accueil.
• tile.png et tile-wide.png correspondent à la fonctionnalité «pin» de Windows et apparaîtront dans Windows 10.

C’est une bonne idée de fournir des icônes pour tous ces cas - mais si vous ne construisez pas d’application Web, la priorité peut être moindre.

Ajout de fonctionnalités supplémentaires

Une fois que vous avez ajouté votre code HTML et un favicon (ainsi que les CSS que vous souhaitez inclure), votre site est prêt à être publié. C’est à quel point il est facile d’utiliser HTML5 Boilerplate. Téléchargez-le sur votre serveur, et vous avez terminé!

Voici à quoi ressemble notre page:

Comme vous pouvez le constater, quelques lignes de texte ont créé un site Web entièrement fonctionnel (même s’il est un peu fade). C’est peu, mais cela n’a pris que quelques minutes. Et il est très extensible avec HTML5. C’est la puissance du modèle Boilerplate.

Mais vous pouvez faire beaucoup plus avec le modèle Boilerplate si vous le souhaitez. Si vous recherchez quelque chose de spécifique, vous avez de bonnes chances de le trouver dans la documentation d'aide.