GraphAndWeb - Partageons nos compétences GraphAndWeb

Un site gratuit sur le web en 5 leçons – 4.Les templates

Publié le 28 août 2020

Catégories: Code Web

Si vous êtes arrivé à cette leçon-ci et que vous avez compris les 3 premières, je vous garantis, vous avez déjà fait le plus compliqué. Cette étape-ci n’est qu’une application des connaissances apprises dans les leçons précédentes.

Comme vous l’entendrez de la plupart des personnes qui travaillent dans l’informatique, il y a un dicton qui dit, il ne faut pas réinventer la roue. Et bien dans ce cas-ci, c’est exactement ce que l’on va faire. Avec les connaissances acquises jusqu’ici, il est encore difficile de construire un site de A à Z et que celui-ci soit plaisant graphiquement. Il faudrait pour cela commencer par créer des maquettes et ensuite les coder, ce qui est un niveau encore un peu trop élevé pour le moment. On va donc se rabattre sur des templates déjà tout fait. Et on a de la chance, il en existe un paquet. Ces templates sont réalisés en HTML et CSS, c’est à dire des langages que l’on commence à décripter sans trop de soucis.

On va donc pouvoir télécharger ces templates et les modifier à notre guise, que ce soit au niveau du contenu ou au niveau de la mise en page. Il sera par exemple assez facile de changer une police, une couleur ou une graisse ou le placement d’un bloc dans la page. Il sera tout aussi facile de changer une image ou un contenu texte pour l’adapter à vos besoins. Et en quelques heures, vous pouvez obtenir un site statique qui a du style et qui correspond à votre contenu initial.

Pour trouver ces templates, c’est assez simple, une recherche google du genre “templates html5” et vous verrez il y a un choix assez important. Voici deux liens où il y a déjà toute une série de templates:

Attention, vérifiez bien ce qui est chargé dans les templates. Il vaut mieux éviter que les templates chargent des librairies javascripts inconnues. Normalement la plupart des templates n’utilisent que le HTML et le CSS. Je vous conseille d’opter pour ces templates-là dans un premier temps et si un jour vous étudiez le javascript alors vous pourrez prendre en compte les templates qui se servent de javascript. Je vous rassure, il y a moyen de faire des sites extrêmement beau et agréable sans javascript.

N’oubliez pas ce que vous avez appris précédemment. Vous pouvez télécharger le template qui vous convient. Comme le template ne comprend que du HTML et du CSS, vous pouvez faire les changements de style et de contenu en local sur votre machine et voir le résultat directment dans votre navigateur. Quand vous êtes satisfait, vous pouvez sauvegarder votre travail en utilisant votre système git.

Et voilà, vous êtes désormais en possession de votre premier site internet fonctionnel. Il ne reste plus qu’à le rendre public pour pouvoir le partager avec tous et ça ce sera l’objet de notre dernière leçon.

Table des matières:

  1. Git: les bases
  2. HTML & CSS
  3. Les grilles
  4. Les templates
  5. La publication et l’hébergement