IUT de Villetaneuse, Université Sorbonne Paris Nord 2022–2023
BUT R&T 1re année
R109 – Initiation aux technologies Web
TP 2 : Un mini-CV en HTML et CSS
Laure Petrucci
Version du sujet : 6 septembre 2022
Ce TP s’effectuera individuellement. Vous rédigerez des pages HTML et des feuilles de style
CSS qui seront déposées dans moodle avant la fin de la séance.
Le code HTML devra impérativement être conforme au standard HTML5, et les caractères
devront s’afficher correctement quelle que soit la configuration du navigateur. Les feuilles de
style CSS devront impérativement être conformes au standard CSS3. La conformité sera véri-
fiée avec les validateurs du W3C : http: // validator. w3. org/ (HTML) et https: // jigsaw. w3.
org/ css-validator/ (CSS).
Tout non-respect de ces consignes donnera lieu à une baisse significative de la note.
Exercice 1 : Un CV en HTML
Dans cet exercice, nous allons rédiger une page HTML nommée [Link], qui doit impé-
rativement avoir l’apparence de la page en annexe du sujet. Il n’est pas demandé d’utiliser une feuille de
style dans cet exercice.
Question 1 : Créer un fichier vierge [Link] puis ajouter le minimum d’instructions pour
que ce soit une page conforme au standard HTML5.
Question 2 : Faire en sorte que le titre s’affichant dans la barre du navigateur soit « Mon CV ».
Question 3 : Télécharger l’image depuis [Link] et la placer
dans le même répertoire que votre page. Puis insérer l’image dans la page Web à l’aide de la balise <img>.
Question 4 : Ajouter le nom dans une balise de titre de premier niveau, l’âge dans un paragraphe,
le métier dans un autre paragraphe, et l’adresse dans un unique environnement <div> (en utilisant
exceptionnellement des <br>). Le lien sur l’adresse électronique pointe vers elle-même, à l’aide d’un lien
de type mailto. Le lien sur la page Web pointe vers cette même URL (dans le code HTML, ajouter
http:// devant). Enfin, encadrer tous ces éléments dans un environnement <section>.
Question 5 : Encadrer tout l’entête du CV (photo et coordonnées) dans une balise <header>.
Question 6 : Ajouter la partie Formation en utilisant un environnement <article> contenant le titre
« Formation » comme titre de premier niveau. Chacune des formations sera insérée dans un environnement
<section> dédié.
Question 7 : Ajouter la partie Langues en utilisant un environnement <article> contenant le titre
« Langues » comme titre de premier niveau. La liste des langues sera une liste de descriptions <dl>.
Question 8 : Ajouter la phrase de pied de page, en utilisant une balise <footer>.
R109 1/3 2022–2023 — IUT de Villetaneuse
Exercice 2 : Une feuille de style CSS pour rendre le CV plus joli !
Question 1 : Effectuer une copie de la page réalisée à la question précédente, et la nommer
[Link]. Créer une feuille de style CSS vierge [Link].
Question 2 : Ajouter à [Link] 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="[Link]" />.
Dans le reste de cet exercice, nous allons remplir la feuille de style [Link] de façon à
obtenir l’apparence de la page en annexe.
Les seules modifications autorisées au fichier HTML [Link] seront l’ajout d’un nombre
minimal d’attributs de type class ou id dans le corps de la page.
Question 3 : Obtenir le centrage du CV sur la page, en ajoutant des propriétés au sélecteur body :
la largeur (width) sera de 70% (donc width:70%;), et la marge gauche de 15% (margin-left:15%;),
assurant de fait un centrage.
Question 4 : Centrer tout l’entête en ajoutant la propriété text-align: center; au sélecteur header.
Question 5 : Mettre le reste de l’entête en forme.
Les barres sont obtenues grâce aux propriétés border-top et border-bottom pour le sélecteur header,
auxquelles sera affectée la valeur 10px solid suivie de la couleur adéquate (ici #688CD8). Il faut tout
mettre à la suite (10px solid #688CD8).
Le fond de l’entête est obtenu avec une propriété background ayant pour valeur la couleur de fond
(ici #E8EFF7).
Question 6 : Aligner l’adresse à gauche en utilisant une propriété text-align:left ; il faudra ra-
jouter un identifiant dans le fichier HTML (par exemple id="adresse" au div encadrant l’adresse)
puis utiliser #addesse dans le CSS. Mettre une police à chasse fixe pour toute l’adresse (valeur
font-family:monospace).
Question 7 : L’image est alignée à droite (float:right) ; le float signifie « flottant » et permet au
texte de s’insérer autour. La largeur (width) de l’image est 15%. Comme il n’y a qu’une seule image, on
peut utiliser header img (sans avoir besoin d’utiliser d’identifiant ou de classe pour l’image).
Question 8 : Modifier la feuille de style pour afficher les barres de début et de fin de chaque partie
du CV (sélecteur article) à l’aide de border-top et border-bottom. Les bordures sont les mêmes que
pour l’entête général. Chaque article est séparé de ce qui précède par une marge de 30 points (donc
margin-top:30pt;).
Question 9 : Mettre en forme le titre de chaque partie du CV (sélecteur article h1). La couleur du
titre est #385CA8, et le titre est en petites capitales. En outre, la couleur de fond se poursuit de 10 pixels
au-delà du titre (propriété padding).
Question 10 : Mettre en forme la partie « Formation ». Les années seront intégrées dans des balises
<span> avec une classe annee, par exemple : <span class="annee">2021-2022</span>. Les années
seront affichées en gras (font-weight:bold;)
L’alignement sera obtenu en utilisant une largeur de 100 pixels pour la classe annee. Il conviendra
d’y ajouter une propriété display:block; et une propriété float:left;.
R109 2/3 2022–2023 — IUT de Villetaneuse
Question 11 : Les langues seront affichées en gras en utilisant le sélecteur (dt).
Question 12 : Mettre en forme le pied de page. La taille des caractères sera xx-small et ils seront
affichés en petites majuscules.
Le texte sera centré dans le pied de page. Il sera encadré par deux lignes fines de 1px de couleur bleue
#688CD8.
Enfin, le pied de page sera placé à 4em de la section précédente.
Exercice 3 : Portrait ou paysage ?
Question 1 : Effectuer une copie de la page réalisée à la question précédente, et la nommer
[Link].
Question 2 : Effectuer une copie de la feuille de style réalisée à la question précédente, et la nommer
[Link].
Question 3 : Modifier le code HTML dans [Link] pour qu’il fasse référence à la nouvelle
feuille de style [Link].
Question 4 : Modifier la feuille de style [Link] afin que les couleurs de fond et des barres
s’affichent en bleu (comme avant) lorsque la page est en mode paysage (landscape) ; en rouge (solid
#FF5733) et jaune (#E6D794) pour le mode portrait (portrait).
Exercice 4 : Utilisation avancée du navigateur
Vous rendrez la copie d’écran demandée dans la dernière question.
Question 1 : Utiliser les Outils de développement web accessibles dans le menu Outils/Outils du
navigateur de Firefox.
Question 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.
Question 3 : Désactiver la transformation du texte.
Question 4 : De manière similaire, changez la largeur (4px) et la couleur des lignes encadrant le pied
de page.
Question 5 : Prendre une copie d’écran montrant la page du navigateur avec le CV, les outils et les
changements effectués.
Informations de licence
Version originale du TP : module M1106 (Étienne André, CC by 3.0)
Source des images
— Source émoticône : [Link] (LadyofHats, domaine public)
R109 3/3 2022–2023 — IUT de Villetaneuse
