Travail personnel
Exercice 1 — Reproduction d’une page simple avec des images #
On vous donne une image d'une page web, version très simplifiée d'une page du site du fabricant d'instruments de musique Fender.
On vous demande de créer le code HTML et CSS permettant de reproduire ce modèle, en portant une attention particulière à la catégorisation des images : quelles sont celles qui font partie du contenu (et vont donc dans le HTML) celles qui sont purement présentationnelles (et vont donc dans le CSS), et celles pour qui c'est ambigu (et vous avez donc le choix) ?
N.B. : les choix faits sur la page originale ne sont pas forcément les bons choix ! (En l'occurrence, le code n'étant à première vue pas de toute première qualité, il est particulièrement déconseillé de s'en inspirer…)
Les images nécessaires et les textes sont dans cette archive. Informations complémentaires :
- La colonne principale fait 970 pixels de largeur.
- La couleur du texte est
#333, sauf dans le pied de page où c'est#999. - Les bordures sont toutes de couleur
#e5e5e5. - La couleur de fond des colonnes de détails est
#f5f5f5, et elles font 180 pixels de largeur. - L'image de fond de la page est
GlobalBackground.gif.
Il est recommandé d'utiliser l'architecture de fichiers suivante, qui permet de bien séparer le contenu et la présentation tout en restant pratique d'utilisation :
--./
|--index.html
|--images/
| |-- …
| `-- …
`--skin/
|--screen.css
`--images/
|-- …
`-- …
Efforcez-vous d'écrire du code propre, c'est-à-dire bien structuré et sémantique. D'autre part, la priorité est d'obtenir un résultat fonctionnel minimal, c'est-à-dire d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place.