Comment créer un site Web en quelques minutes à l’aide de HTML5 Boilerplates
Désormais, lorsque vous créez un nouveau site Web, vous souhaitez 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. Mais il est également suffisamment puissant pour que vous puissiez l’utiliser comme base d’un site Web complexe et entièrement fonctionnel.
Ce didacticiel HTML5 Boilerplate couvrira ce qui est inclus dans le 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é ce modèle pour créer un site très basique avec seulement quelques lignes de HTML.
Modèle standard HTML5
Lorsque vous téléchargez un modèle à partir de HTML5 Boilerplate, vous obtenez de nombreux dossiers et fichiers. Voici le contenu du fichier ZIP :
CSS
—main.css
— Normaliser.css
Documentation
image
js
—main.js
—plugins.js
– – Colporteur
—jquery.min.js
—modernizr.min.js
.editorconfig
.htaccess
404.html
configuration du navigateur.xml
favicon.ico
humain.txt
icône.png
index.html
robot.txt
website.webmanifest
tuiles.png
tile-wide.png
Nous ne couvrirons pas tous les éléments du modèle ici, juste les bases. Cependant, pour vous assurer que vous disposez des ressources nécessaires pour travailler avec tous les fichiers, nous commencerons par la documentation d’aide.
Documentation d’aide standard HTML5
Boilerplate dispose d’un ensemble de documentation d’aide hébergée sur GitHub. C’est une aide précieuse lorsque vous avez des questions techniques ou que vous vous demandez pourquoi quelque chose est conçu comme il est.
Faire une vidéo du jour
Presque tout dans la documentation est également contenu dans le dossier doc du modèle. Vous verrez un certain nombre de fichiers Markdown (.md) qui sont d’une grande aide pour comprendre comment structurer votre site passe-partout.
Si vous voulez tout lire, commencez par TOC.md et suivez les liens pour accéder aux autres fichiers Markdown. Si vous cherchez de l’aide pour un problème spécifique, recherchez des fichiers qui peuvent sembler pertinents ; use.md est un bon point de départ.
Commencez avec HTML5 passe-partout CSS
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 à restituer les éléments de manière cohérente. Pour en savoir plus sur son fonctionnement, consultez le projet normalize.css sur GitHub.
En même temps, vous pouvez entrer n’importe quel code dont vous avez besoin pour formater votre site Web avec CSS dans main.css. Le CSS standard inclus dans les modèles est le résultat de recherches menées par les 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 des styles personnalisés de l’auteur. Je vais ajouter quelques styles de liens à notre page d’exemple :
Il existe également de nombreuses 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).
Dans main.css, vous trouverez également un support pour la conception réactive et des paramètres d’impression utiles.
Les commentaires en CSS expliquent clairement tous ces éléments :
De manière générale, vous pouvez commencer avec le CSS de base.
Ajoutez votre propre code HTML au modèle
Boilerplate contient deux fichiers HTML : 404.html et index.html.
La page d’index est l’endroit où vous créez votre page d’accueil (ou votre seule page si vous voulez un simple pager).
Si vous ouvrez la page d’index dans votre navigateur, vous verrez une ligne de texte. Mais regarder le HTML révèle plus caché dans le code. Le seul changement 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 du JavaScript utile. Vous ne devriez pas jouer avec ceux-ci lorsque vous débutez.
Cependant, les pré-remplir est un excellent moyen de s’assurer que votre site est prêt à tirer pleinement parti de HTML5.
Pour créer votre page, dans le fichier
Insérez votre code HTML entre les balises. Voici quelques informations de base sur moi-même que je vais ajouter :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 la page 404, modifiez simplement le fichier HTML. Vous ne savez pas quoi mettre sur une page 404 ? Découvrez ces excellents exemples de conception de 404 pages.
Ajouter favicon (et autres icônes)
Vous voulez remplacer votre favicon ? Ensuite, favicon.ico est le fichier que vous devez remplacer.
Si vous n’en avez pas déjà un, 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 fait 16 x 16 pixels et qu’il a le type de fichier .ico.
C’est une bonne idée de mettre quelques idées dans votre favicon. Utilisez ces fameuses favicons pour guider votre brainstorming. Assurez-vous que lorsque vous ajoutez un nouveau favicon, il s’appelle favicon.ico.
Vous remarquerez peut-être qu’il y a trois autres images à la racine du site : icon.png, tile.png et tile-wide.png. A quoi servent-ils ?
- icon.png pour les icônes tactiles Apple. Si vous créez une application Web, cette icône sera utilisée par les utilisateurs d’iPhone ou d’iPad lorsqu’ils ajouteront l’application à leur écran d’accueil.
- tile.png et tile-wide.png sont utilisés pour la fonctionnalité « pin » de Windows et seront affichés dans Windows 10.
C’est une bonne idée de fournir une icône pour tous ces cas – mais si vous ne construisez pas une application Web, c’est probablement une priorité inférieure.
ajouter plus de fonctionnalités
Une fois que vous avez ajouté le code HTML et le favicon (et tout CSS que vous souhaitez inclure), votre site est prêt à être publié. L’utilisation de HTML5 Boilerplate est aussi simple que cela. 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 fastidieux). Pas beaucoup de temps, mais seulement quelques minutes. Et il est hautement évolutif avec HTML5. C’est la puissance des modèles passe-partout.
Cependant, vous pouvez également faire plus avec le modèle Boilerplate si vous le souhaitez. Si vous cherchez 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 voulez le savoir, il existe de nombreux didacticiels de conception Web pour vous aider.
A propos de l’auteur
