Décrire et manipuler un document numérique

Exercice Réaliser un CV en HTML+CSS

Auteur·rice

L. Grobol

Exercice Réaliser un CV en HTML+CSS

Consignes

  • Exercices individuels.
  • Vous devrez rendre un fichier zip contenant deux fichiers HTML, un fichier CSS, une image et une capture d’écran au format PNG.
  • Le nom de fichier doit être de la forme <Prénom>_<Nom>-cv-4L4SC02P.zip, par exemple pour William Labov, le nom du fichier sera William_Labov-cv-4L4SC02P.zip.
  • Dépôt sur Cours en Ligne.

Vos fichiers HTML et CSS doivent être conformes. Vérifiez avec les validateurs du W3C : http://validator.w3.org/ (HTML) et https://jigsaw.w3.org/css-validator/ (CSS). Les messages de type « Info » ne sont pas des erreurs et n’affectent pas la conformité.

Attention :

  • N’hésitez pas à vous servir des exercices des séances précédentes.
  • Vous devez aller chercher sur MDN la documentation et les exemples pour les notions qui vous posent problème.

Partie 1 : HTML seul

Dans cet exercice, nous allons rédiger une page HTML nommée cv.html. Sans CSS pour changer son apparence, elle aura l’allure de la page donnée en annexe (ou quelque chose d’approchant suivant le style par défaut de votre navigateur)

  1. Créer un fichier vierge cv.html puis ajouter le minimum d’instructions pour que ce soit une page conforme au standard HTML.
  2. Faire en sorte que le titre s’affichant dans la barre du navigateur soit votre nom suivi de « CV » (par exemple pour Wiliam Labov, ce serait « William Labov : CV »).
  3. En-tête :
    1. Ajouter votre nom comme un titre de niveau 1
    2. Télécharger le fichier du portrait et le placer dans le même répertoire que votre page. Puis insérer l’image dans la page Web avec un élément <img>. N’oubliez pas de lui donner une description en utilisant l’attribut alt. Par exemple alt="Un portrait de l'autrice de ce CV". (Vous pouvez mettre une autre image, mais assurez-vous qu’elle fait une taille raisonnable. Celle par défaut fait 200×250 pixels)
    3. Placer tout l’entête du CV (nom et portrait) dans un élément <header>.
  4. Identité :
    1. Ajouter « Identité » comme un titre de niveau deux, puis votre âge et votre profession comme des éléments de liste non-ordonnée.
    2. Ajouter sous forme de liste de description <dl> votre adresse, votre email et un lien vers https://example.com. Le lien sur l’adresse électronique pointe vers elle-même, à l’aide d’un lien de type mailto:.
    3. Enfin, encadrer les éléments que vous venez de créer dans un élément <section>.
  5. Formation
    1. Ajouter la partie « Formation » en utilisant un élément <article> 
    2. Utilisez un titre de niveau deux pour son en-tête.
    3. Chacune des formations sera contenue dans un élément <p> dédié et les années seront mises dans des éléments <span> (sans plus d’attributs pour l’instant, ils nous serviront dans la partie suivante).
  6. Ajouter la partie « Langues » comme un <article> avec un titre de niveau deux. La liste des langues sera une liste de descriptions <dl>.
  7. Ajouter la partie « Motivation » comme un <article> avec un titre de niveau deux comprenant un paragraphe. Vous pouvez garder la phrase d’exemple ou la changer pour ce qui vous plaît.
  8. Ajouter la phrase de pied de page, en utilisant une balise <footer>.

Partie 2 : du CSS pour avoir du style

  1. Faites une copie de votre fichier de la partie précédente et nommez-la cv2.html. Créez un fichier vide cv.css.

  2. Ajouter à cv2.html un lien vers la feuille de style, en ajoutant dans l’entête HTML (<head>) la balise <link rel="stylesheet" type="text/css" media="screen" href="cv.css" />.

    Dans le reste de cet exercice, nous allons remplir la feuille de style cv.css pour obtenir l’apparence de la page en annexe. Pour cette partie, les seules modifications que vous devez faire dans cv2.html sont l’ajout d’attributs id et class sur certains éléments.

  3. Centrez le contenu de la page en ajoutant des propriétés au sélecteur body: la largeur maximale (max-width) doit être de 50em (donc max-width: 50em;), et la propriété margin doit valoir auto (margin: auto;).

  4. Mettre en forme l’en-tête (sélecteur header) :

    1. Centrer le texte en ajoutant la propriété text-align: center; au sélecteur
    2. Les barres sont obtenues grâce aux propriétés border-top et border-bottom pour le sélecteur header, qui doivent avoir la valeur auxquelles sera affectée la valeur 10px solid rgb(111, 0, 255). Remplacez rgb(111, 0, 255) par votre couleur préférée.
    3. La couleur de fond est déterminée par la propriété background (ici, on a choisi #E8EFF7, mais vous devriez probablement en choisir une plus agréable).
    4. La largeur (width) de l’image est 15% (de l’élément parent, donc ici le <header>). Pour appliquer cette propriété à cette image et uniquement cette image, ajoutez un attribut id="portrait à l’élément <img> et utilisez le sélecteur CSS #portrait

  5. Modifier le fichier CSS pour afficher les barres de début et de fin de chaque partie du CV (sélecteur article, section) à l’aide des propriétés border-top et border-bottom. Les bordures sont les mêmes que celles l’en-tête général. Chaque article est séparé de ce qui précède par une marge de 2em (donc margin-top: 2em;).

  6. Mettre en forme le titre de chaque partie du CV (sélecteur article h2) :

    1. La couleur du titre est #385CA8
    2. Le texte du titre est en gras.
    3. La couleur de fond se poursuit de 10px au-delà du titre (propriété padding).
    4. Les titres n’ont pas de marge supérieure margin-top: 0px;.

  7. Mettre en forme la partie « Formation » :

    1. Ajoutez la classe annee aux <span>s qui marquent les années : <span class="annee">2021-2022</span> par exemple.
    2. Mettez les années en gras (font-weight: bold;) en utilisant le sélecteur de classe .annee.
    3. Donnez aux <span> des années une largeur de 100 pixels, et ajoutez-leur les propriétés display: block; et float: left;.

Partie 3 : utiliser les outils de développement

  1. Utiliser les Outils de développement web de votre navigateur.
  2. Sélectionner le pied de page dans le code HTML. Modifier, dans le navigateur, la taille des caractères pour qu’elle soit x-small.
  3. Changez la largeur (4px) et la couleur des lignes encadrant le pied de page.
  4. Prendre une copie d’écran montrant la page du navigateur avec le CV, les outils et les changements effectués.

La suite

  1. Changer le style de la liste des langues.
  2. Changer le style du pied de page (<footer>).
  3. Si vous en avez envie, ajoutez ce qui vous plaît dans ce CV pour le rendre plus joli. Attention à ne rien en retirer pour que je puisse vérifier que vous avez bien suivi les instructions

Annexe : exemples

HTML seul

Capture d’écran de la page web de la partie 1

Avec CSS

Capture d’écran de la page web de la partie 2