Dans ce premier TD nous allons mettre en place un site web statique de type blog. La structure de ce blog est la suivante.
Le blog possède un titre de blog et contient plusieurs catégories (exemple : perso, sport, …). Chaque catégorie possède un titre de catégorie et se compose de plusieurs posts. Un post à la structure suivante : un titre, un auteur, une date de publication et un contenu.
Vous devez donc créer un fichier qui contient du code HTML représentant un tel blog, avec trois catégories contenant deux posts chacune. Pour cela vous allez produire le fichier HTML à l’aide d’un éditeur de texte classique. Vous allez aussi ouvrir ce fichier à l’aide d’un navigateur ce qui vous permettra de visualiser votre document HTML. N’oubliez pas que pour l’instant l’aspect visuel du document n’est pas important.
Enfin vous utiliserez aussi le validateur du W3C pour vérifier que le code HTML que vous produisez est correct.
Pour debugger le code HTML/CSS au sein du navigateur: clic droit sur un élément de la page dans Firefox et menu Inspecter l’élément sous Firefox ou Inspecter sous Google Chrome par exemple. Si vous utilisez un autre navigateur, je vous laisse chercher.
Reprenez le code HTML précédent, et rajoutez une feuille de style CSS pour améliorer la présentation. Vous devez tester les choses suivantes:
Enfin vous utiliserez le validateur du W3C pour vérifier que le code CSS que vous produisez est correct.
Nous allons maintenant ajouter une page d’accueil qui recense les posts, et un menu qui permet de naviguer dans les différentes catégories. Utilisez la bibliothèque Bootstrap qui permet d’écrire du HTML et du CSS avancé de manière beaucoup plus simple. Bien entendu, il va falloir regarder la documentation et les exemples disponibles sur le site de cette bibliothèque pour comprendre son fonctionnement.
N’oubliez pas d’utiliser le validateur HTML et le validateur CSS pour vérifier la qualité de vos pages.
Vous pouvez consulter une version très simplifié de ce qui est attendu ici.