Lorsque vous créez un nouveau site Web, vous souhaitez de nos jours qu'il soit compatible HTML5. Mais vous ne voulez pas non plus passer un temps inutile à apprendre les subtilités de HTML5 à partir de zéro, n'est-ce pas ?
Heureusement, le modèle HTML5 Boilerplate peut vous aider. Il s'agit d'un modèle frontal simple que vous pouvez utiliser pour créer un site Web HTML5 en quelques minutes seulement. Mais il est également suffisamment puissant pour que vous puissiez l'utiliser comme base d'un site complexe et complet.
Ce didacticiel HTML5 Boilerplate passera en revue le contenu du modèle, les bases que vous devez savoir sur son utilisation et certaines ressources pour un apprentissage plus approfondi. 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 HTML.
Lorsque vous téléchargez le modèle à partir de HTML5 Boilerplate, vous obtenez un certain nombre de dossiers et de fichiers. Voici le contenu du fichier ZIP :
css
---main.css
---normaliser.css
doc
image
js
---main.js
---plugins.js
---vendeur
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humains.txt
icône.png
index.html
robots.txt
site.webmanifest
tuile.png
tile-wide.png Nous n'allons pas passer en revue tous les éléments du modèle ici, seulement les bases. Cependant, pour vous assurer que vous disposez des ressources nécessaires pour utiliser tous les fichiers, nous allons commencer par les documents d'aide.
Boilerplate a une collection de documents d'aide hébergés dans GitHub. C'est d'une grande aide lorsque vous avez des questions techniques ou que vous vous demandez pourquoi quelque chose a été conçu comme il l'était.
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 grandement à déterminer 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 cherchez de l'aide sur un problème spécifique, recherchez le fichier qui semble être lié; usage.md est un bon point de départ.
Le modèle HTML5 Boilerplate 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 le projet normalize.css sur GitHub.
Pendant ce temps, main.css est l'endroit où vous insérerez le code dont vous avez besoin pour formater votre site avec CSS. Le CSS standard inclus avec le modèle est le résultat de recherches menées par des développeurs et la communauté HTML5 Boilerplate. Il est lisible et s'affiche bien dans différents navigateurs.
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 exemple de page :
Il existe également un certain nombre de classes d'assistance utiles incluses dans le CSS de base. Certains d'entre eux masquent des éléments des navigateurs et des lecteurs d'écran standard (ou une combinaison).
Également dans main.css, vous trouverez un support pour une conception réactive et des paramètres d'impression utiles.
Tous ces éléments sont clairement expliqués par des commentaires dans le CSS :
En général, vous pouvez commencer avec le CSS de base.
Boilerplate comprend deux fichiers HTML :404.html et index.html.
La page d'index est l'endroit où vous allez créer votre page d'accueil (ou votre seule page, si vous optez pour une simple page).
Si vous ouvrez la page d'index dans un navigateur, vous verrez une seule ligne de texte. Mais regarder dans le HTML révèle beaucoup plus de cachettes dans le code. La seule chose dont vous devez vraiment vous préoccuper est le code Google Analytics (recherchez le texte "UA-XXXXX-Y" et remplacez-le par votre propre code de suivi).
Le reste du code HTML de la page d'index comprend des informations pour les applications Web, des notifications pour les anciens navigateurs et des JavaScripts utiles. Lorsque vous démarrez, vous ne devriez pas avoir à vous soucier de tout cela.
Cependant, les avoir déjà pré-remplis est 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 HTML entre les balises
dans le fichier. Voici quelques informations de base que je vais ajouter sur moi :
Vous voulez créer plus de pages ? Créez des copies de ce fichier et renommez-les pour ne pas avoir à copier et coller tout le code HTML. Ajoutez ensuite votre contenu.
Si vous souhaitez personnaliser votre page 404, modifiez simplement le fichier HTML. Vous ne savez pas quoi mettre sur votre page 404 ? Découvrez ces excellents exemples de conception de 404 pages.
Vous voulez remplacer votre favicon ? Alors favicon.ico est le fichier que vous devrez remplacer.
Si vous n'en avez pas encore, vous devrez 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 fait 16 x 16 pixels et qu'il a le type de fichier .ico.
C'est une bonne idée de réfléchir à votre favicon. Utilisez ces fameuses favicons pour guider votre brainstorming. Assurez-vous que lorsque vous ajoutez le nouveau favicon, il s'appelle favicon.ico.
Vous remarquerez peut-être qu'il y a trois autres images dans le répertoire racine de votre site :icon.png, tile.png et tile-wide.png. A quoi servent-ils ?
C'est une bonne idée de fournir des icônes pour tous ces cas, mais si vous ne créez pas d'application Web, cela peut être une priorité inférieure.
Une fois que vous avez ajouté votre code HTML et un favicon (ainsi que tout CSS que vous souhaitez inclure), votre site est prêt à être publié. C'est aussi simple que cela 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 suffisent pour créer un site Web entièrement fonctionnel (bien qu'un peu fade). Ce n'est pas grand-chose, mais cela n'a pris que quelques minutes. Et il est hautement 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, il y a de fortes chances que vous le trouviez dans la documentation d'aide.
Si vous n'êtes pas sûr de ce que vous pouvez faire avec HTML5, mais que vous aimeriez le savoir, il existe de nombreux didacticiels de conception Web pour vous aider.