Table des matières

Site Web statique

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.

Un peu de style

Avant de commencer, il est nécessaire d’installer le module Firebug dans le navigateur Firefox. Ce module vous permettra de debugger le code HTML/CSS au sein du navigateur Firefox. Une fois installé, Firebug se lance de la manière suivante: clic droit sur un élément de la page dans Firefox et menu Inspecter l’élément avec Firebug. Un debugger est aussi installé par défaut sur Google Chrome. 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.

Quelque chose de pro

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.