Home-theater-designers
Lorsque vous créez un nouveau site Web, de nos jours, vous souhaiterez qu'il soit compatible avec HTML5 . Mais vous ne voulez pas non plus passer du temps inutile à apprendre les subtilités de HTML5 à partir de zéro, n'est-ce pas ?
Heureusement, le Modèle de passe-partout HTML5 peut 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.
applications musicales hors ligne gratuites pour Android
Ce didacticiel HTML5 Boilerplate passera en revue ce qui se trouve dans le modèle, les bases que vous devez savoir sur son utilisation et quelques 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.
Le modèle de passe-partout HTML5
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
---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.pngNous n'allons pas passer en revue tous les éléments du modèle ici, seulement les bases. Pour vous assurer que vous disposez des ressources nécessaires pour utiliser tous les fichiers, nous allons commencer par les documents d'aide.
Documentation d'aide HTML5 Boilerplate
Boilerplate a une collection de documents d'aide hébergés dans GitHub . Ceci est d'une grande aide lorsque vous avez des questions techniques ou que vous vous demandez pourquoi quelque chose a été conçu ainsi.
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 à comprendre comment créer votre site Boilerplate.
Si vous voulez tout lire, commencez par TOC.md et suivez les liens vers d'autres fichiers Markdown. Si vous cherchez de l'aide sur un problème spécifique, trouvez le fichier qui semble être lié ; usage.md est un bon point de départ.
À partir du CSS de HTML5 Boilerplate
Le modèle HTML5 Boilerplate est fourni avec deux fichiers CSS : main.css et normalize.css.
Le deuxième fichier, normalize.css, aide les 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 .
Pendant ce temps, main.css est l'endroit où vous mettrez tout 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 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 Styles personnalisés de l'auteur. Je vais ajouter un peu de style de lien pour notre page d'exemple :
Il existe également un certain nombre de classes d'aide utiles incluses dans le CSS de base. Certains d'entre eux cachent des éléments des navigateurs et des lecteurs d'écran standard (ou une combinaison).
Vous trouverez également dans main.css une assistance 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.
Ajout de votre propre code HTML au modèle
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 un simple one-pager).
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 soucier de changer 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 sur les applications Web, des notifications pour les anciens navigateurs et des scripts JavaScript utiles. Lorsque vous commencez, vous ne devriez pas avoir à vous soucier de tout cela.
Les avoir déjà pré-remplis, cependant, est un bon moyen de vous 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 du fichier. Voici quelques informations de base que je vais ajouter sur moi-même :
Vous voulez créer plus de pages ? Créez des copies de ce fichier et renommez-les afin de 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 pages 404.
Ajout d'un favicon (et d'autres icônes)
Vous voulez remplacer votre favicon ? Ensuite, 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 est de 16 x 16 pixels et qu'il a le type de fichier .ico.
comment vérifier la santé de la batterie de l'iphone
C'est une bonne idée de réfléchir à votre favicon. Utilisez ces célèbres 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 ça sert ?
- 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 ajoutera l'application à son écran d'accueil.
- tile.png et tile-wide.png sont destinés à 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 créez pas d'application Web, cela peut être une priorité inférieure.
Ajout de fonctionnalités supplémentaires
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é. Voilà à 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 voir, quelques lignes de texte ont créé un site Web entièrement fonctionnel (bien qu'un peu fade). Ce n'est pas beaucoup, 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. S'il y a quelque chose de spécifique que vous recherchez, 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 souhaitez le savoir, il existe de nombreux didacticiels de conception Web pour vous aider.
Partager Partager Tweeter E-mail Est-il correct d'installer Windows 11 sur un PC incompatible ?Vous pouvez désormais installer Windows 11 sur des PC plus anciens avec le fichier ISO officiel... mais est-ce une bonne idée de le faire ?
Lire la suite Rubriques connexes- La programmation
- HTML5
- Tutoriels de codage
Dann est un consultant en stratégie de contenu et marketing qui aide les entreprises à générer de la demande et des prospects. Il blogue également sur la stratégie et le marketing de contenu sur dannalbright.com.
Plus de Dann AlbrightAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner