Vous êtes sur la page 1sur 2

Enseignant : Karim BAATI Matière : POO et DW

Travaux Pratiques
Développement Web
Objectif du TP
L’objectif de ce TP est de maîtriser les notions de base du développement web avec
HTML et CSS.

Enoncé
On vous demande de créer un site web avec HTML et CSS qui va présenter votre CV
en ligne.
1. Avec Notepad ++, créer un fichier HTML « CV.html » et un autre fichier
« Style.css »
2. Dans le fichier « CV.html », créer le squelette du document HTML composé des
balises <html>, <head> et <body>.
3. Ecrire le contenu de la balise <head> en affectant au document le titre « Mon CV »
et en établissant le lien avec le fichier « Style.css ».
4. Dans le fichier « Style.css », choisir une couleur « bleue claire » pour l’arrière-plan
du document HTML
5. Dans le fichier « CV.html », écrire un titre « Curriculum Vitae » dans la balise
<body>. Choisi, par la suite, dans le fichier « Style.css », un alignement centré et
un font de 70 pixels pour ce titre.
6. Dans le fichier « CV.html », écrire une balise de navigation <nav> qui contient un
titre « Renseignements personnels » ainsi que votre photo et les données relatives à
votre nom et prénom, votre âge, votre adresse de domicile, votre adresse
électronique et votre téléphone. Choisi, par la suite, dans le fichier « Style.css », les
dimensions nécessaires pour la balise de navigation et pour la photo.
7. Dans le fichier « CV.html », écrire une balise <section> qui contient trois balises
<article> qui sont composées chacune d’une balise <fieldset> relative à chacune
des parties « Education », « Expérience professionnelle » et « Compétences
informatiques » de votre CV.

Page 2/2
Enseignant : Karim BAATI Matière : POO et DW

8. Pour chaque balise <article>, appeler une classe field dont les caractéristiques sont
à définir dans le fichier « Style.css ». Ecrire ensuite une balise <table> qui contient
les données relatives à la partie de votre CV.
9. Dans le fichier « CV.html », écrire une nouvelle balise <section> relative à la partie
« Contactez-moi » de votre CV. Pour celle balise, appeler un ID contact dont les
caractéristiques sont à définir dans le fichier « Style.css ». Ecrire ensuite une balise
<table> qui contient les données relatives à la personne qui veut vous contacter, à
savoir, le nom, le prénom, l’adresse mail, le numéro de téléphone et le message à
envoyer.
10. Ajouter un pied de page pour votre document contenant le message « Mon CV –
Tous droits réservés »

Page 2/2