2re année RT 2021–2022
Technologies du Web
TD2
Exercice 1 : Curriculum Vitae 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. N’utiliser pas du CSS dans cet
exercice.
1 : Créer un fichier vierge [Link] puis ajouter le minimum d’instructions pour que ce
soit une page HTML.
2 : Faire en sorte que le titre s’affichant dans la barre du navigateur soit « CV de Prénom Nom ».
3 : utiliser votre photo ou télécharger une image 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>.
4 : Ajouter le prénom et 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. Enfin, encadrer tous
ces éléments dans un environnement <section>.
5 : Encadrer tout l’entête du CV (photo et coordonnées) dans une balise <header>.
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é.
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>.
1
Exercice 2 : Amélioration de la présentation en utilisant le CSS
1 : Effectuer une copie de la page réalisée à la question précédente, et la nommer PrenomNom-
[Link]. Créer une feuille de style CSS vierge [Link].
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" 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.
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.
4 : Centrer tout l’entête en ajoutant la propriété text-align: center; au sélecteur header.
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 #618BD1).
Il faut tout mettre à la suite (10px solid #618BD1). Le fond de l’entête est obtenu avec une
propriété background ayant pour valeur la couleur de fond (ici #E1EFF1).
6 : Aligner l’adresse à gauche en utilisant une propriété text-align:left ; il faudra rajouter un
identifiant dans le fichier HTML (par exemple id="adresse" au div encadrant l’adresse) puis utiliser
#adesse dans le CSS. Mettre une police à chasse fixe pour toute l’adresse (valeur font-family:serif).
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).
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;).
9 : Mettre en forme le titre de chaque partie du CV (sélecteur article h1). La couleur du titre est
#315CA1.
2
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">2020-2021</span>. Les années seront
affichées en gras (font-weight:bold;)
L’alignement sera obtenu en utilisant une largeur de 150 pixels pour la classe annee. Il conviendra
d’y ajouter une propriété display:block; et une propriété float:left;.
11 : Les langues seront affichées en gras en utilisant le sélecteur (dt).
3
Sans le CSSsssssssssssssssssssssssssssssssssss
Prenom Nom
Age
Master RT
Votre adresse
Code postal
Tél:
Email : [Link]@[Link]
Page perso : [Link]
Formation
2018-2019 MCSA
2019-2020 CCNA
2020-2021 Certification Huawei HCIA
Langues
Arabe
5/5
Français
4.5/5
Anglais
4/5
4
Avec le CSSsssssssssssssssssssssssssssssssssss