TP
HTML-CSS
Master Bioinformatique TP
Programmation événementielle 2017/2018
HTML-
Travaux Pratiques
CSS
NB : Commencez par récupérer l’archive du TP1. Cette archive contient deux images
utilisées dans la suite du TP.
Exercice 1 : Page de présentation du Master bio-informatique
Le but de cet exercice est de créer une page simple de présentation du Master bio-informatique de Bordeaux.
Cette page doit résumer les compétences acquises, ainsi que les différents parcours au sein du Master. Le
texte peut être récupéré à l’adresse suivante : [Link]
bio-informatique.
Pour cet exerice, nous allons uniquement nous intéresser au contenu de la page (HTML) et non à sa forme
(CSS).
Figure 1
Question 1 : Créer une page Web minimale, c’est-à-dire qui contient les balises <html>, <head> et <body>.
Assurez-vous que votre page soit valide en utilisant le validateur de la W3C.
Question 2 : Faire en sorte que le titre s’affichant dans la barre du navigateur soit “Master bio-informatique”.
Question 3 : Dans une balise de premier niveau, donner le titre en haut de page “Master bio-informatique de
Bordeaux”. Ce titre doit être un lien cliquable qui permet de renvoyer vers le site de l’Université de Bordeaux.
Question 4 : Dans un nouveau paragraphe, décrire la liste des compétences acquises en utilisant les listes à
puces.
1 Florent Grélard
TP
HTML-CSS
Question 5 : Insérer l’image [Link] en bas de page.
Exercice 2 : un CV en HTML/CSS
Nous allons désormais créer un Curriculum Vitae en HTML et le mettre en forme avec un fichier de style
(CSS). Vous pouvez comparer le résultat obtenu avec du HTML pur ou avec du CSS dans les Figures 2 et 3).
Figure 2 – Sans CSS
Première étape : création du fichier .html
Question 1 : Créer une page Web minimale, qui soit valide selon les standards de la W3C.
Question 2 : Faire en sorte que le titre qui s’affiche dans la barre du navigateur soit “Curriculum Vitae”
Question 3 : Insérer l’image [Link] en haut de page.
Question 4 : Dans une balise de premier niveau, renseignez votre nom ; dans un div, votre activité (Étudiant
à Bordeaux) ; dans un paragraphe <p>, quelques lignes récapitulatives vous décrivant ; ainsi qu’un bouton qui
permette de vous contacter.
Question 5 : Décrire ensuite votre parcours professionnel : le titre “Parcours” peut être ajouté dans une balise
de second niveau, et les expériences dans des paragraphes. dans un paragraphe <p>
Question 6 : Décrire votre formation sur le même principe que pour la description du parcours.
2 Florent Grélard
TP
HTML-CSS
Figure 3 – Avec CSS
Deuxième étape : création du fichier .css
Nous allons désormais mettre en forme notre CV à l’aide d’un fichier .css. L’objectif est d’obtenir un
résultat similaire à celui obtenu sur la Figure 3. Ayez recours à la documentation en ligne pour l’utilisation et
la définition des différentes propriétés.
Question 1 : Créer un fichier [Link] et y faire référence dans votre fichier html.
Question 2 : Faire apparaı̂tre le texte au centre de la page en modifiant les valeurs des marges pour le sélecteur
body.
Question 3 : Utiliser la famille sans-serif pour la police de caractères, sur l’ensemble de la page, en
modifiant le sélecteur body.
Question 4 : Définir une classe .img-circle afin de modifier l’affichage de l’image :
1. centrer par rapport au texte
2. diminuer sa taille
3. créer un ovale qui délimite le contour de l’image (la propriété à modifier est border-radius).
Assigner cette classe à l’image dans le fichier html.
Question 5 : Définir une classe pour modifier vos noms et prénoms de façon à ce que :
1. la taille de police soit importante
2. les lettres soient rapprochées : propriété letter-spacing
3. les lettres soient en gras : propriété font-weight
Question 6 : Définir une classe .section qui permettre d’obtenir un cadre autour des différentes sections
du CV, en modifiant les propriétés border.
3 Florent Grélard
TP
HTML-CSS
Question 7 : Définir une classe .emph qui permettre de mettre en orange et en italique les informations
importantes.
Question 8 : Diviser les informations vous concernant en deux colonnes : séparer le texte récapitulatif de vos
informations personnelles (âge, date de naissance, adresse). Vous pouvez utiliser la propriété column-count.
Question 9 : Définir une classe dans le fichier .css qui mette en gras les dates pour le parcours et la formation.
4 Florent Grélard
