Projet : CSS

Projet : CSS

pdf : pour impression

Mini projet CSS #

Margaret Hamilton

Objectif #

L’objectif de ce mini projet est de réaliser le style d’une page web.

Vous disposez de trois fichiers :

  • margaret_hamilton.html est la page web qu’il faut mettre en forme.

    Il n’y a rien à faire dans ce document, examinez en détail les balises et classes.

  • style.css est le style de la page web en question. Ce fichier contient des selecteurs vides.

    Votre travail est de les remplir avec les propriétés et attributs qui conviennent.

  • Margaret_Hamilton.pdf est l’objectif final, converti en pdf.

    Vous devez vous approcher le plus possible de ce résultat.

Liens vers ces fichiers : #

  1. margaret_hamilton.html
  2. style.css
  3. Margaret_Hamilton.pdf

Restitution du projet #

  • Vous rendrez un travail individuel
  • Seul le fichier style.css est à rendre, les autres ne devant pas changer.
  • Les autres modalités sont détaillées dans le travail donné.

Quelques précisions #

Démarche :

  1. Enregistrer les trois fichiers dans un dossier ihm_web/margaret_hamilton/ sur votre drive et localement.

  2. Ouvrir les trois fichiers dans atom, sublime text ou vs code. Vous pouvez utiliser autre chose mais je vous recommande un de ceux là.

    • atom connait bien le css et propose une auto complétion assez pertinente.
    • sublime texte est moins efficace, il connaît les propriétés et complète les attributs mais ne les propose pas.
    • vs code fait le café.
  3. Modifier le fichier style.css pour cela :

    • Ouvrir le fichier HTML dans google chrome,
    • ouvrir les outils de développeur (F12) de chrome,
    • tester des modifications de style dans chrome,
    • copier ces modifications dans le fichier style.css une fois satisfait,
    • enregistrer le fichier et rafraîchir la page web (Maj + F5 pour forcer le rafraîchissement du style),
    • recommencer

Sauvegarder régulièrement, créez des versions, testez…

Essayez dans devTools avant d’enregistrer, cela vous évitera des surprises.

Etant donné que j’ai d’abord crée le style et ensuite converti, c’est parfaitement faisable.

Mon fichier source fait 61 lignes. Pas 23456…

Attention, les attributs html sont loin d’être parfaits et manquent parfois de cohérence mais… lire le paragraphe suivant.

Soin du détail #

Vous êtes dans la peau d’un intégrateur :

“il met en page le document en accord avec la charte graphique et les règles typographiques”

  • L’objectif est de refaire, pas d’apporter votre touche personnelle.
  • Chaque détail compte : alignement, type de police, gras, souligné, italique, centrage, taille etc.

Tout n’est pas simple, certaines modifications demandent de l’astuce, n’y passez pas la journée.

Liste des propriétés CSS employées #

Afin de vous éviter une galère trop conséquente, vous trouverez ici la liste de toutes les propriétés CSS utilisées dans la correction, par ordre alphabétique :

border-bottom-color
border-bottom-style
color
display
font-family
font-size
font-style
line-height
margin-left
margin-right
padding-bottom
padding-top
text-align
text-decoration
width

Certaines sont employées plusieurs fois, selon l’élément ou la classe, avec des attributs différents.

Sources #

Quelques mots sur le texte #

Tiré d’un magasine publié en juillet 2019, il décrit le parcours surprenant de Margaret Hamilton, une informaticienne de la NASA. Cela devrait vous intéresser.