TD 5 – Application du CSS
Exercice n°1 – Réalisation de votre emploi du temps en utilisant le CSS
En utilisant l’outil de développement Netbeans, vous devez créer une page web pour afficher votre
emploi du temps (EDT). Pour cela, vous devez compléter le contenu de la page edtCiel1.html, ainsi que
le fichier edtCiel1Css.css afin d’obtenir le même rendu que le modèle page suivante. Il est interdit
d’utiliser des tableaux pour réaliser l’emploi du temps.
À partir du logiciel Netbeans, créez un nouveau projet HTML5Application nommé td5_Edt_2023.
Téléchargez les ressources pour le TD et réalisez l’extraction des fichiers dans votre dossier personnel.
Copiez les fichiers edtCiel1.html et edtCiel1Css.css dans le dossier public_html de votre projet et
supprimez le fichier index.html.
Chaque balise div doit contenir un argument de type id ou plusieurs arguments de type class déclarés
dans le fichier de style edtCiel1Css.css.
Les matières de l’EDT sont positionnées dans l’emploi du temps à l’aide des arguments de type class
dans l’ordre suivant : placement horizontal des cours selon le jour, durée du cours, matière enseignée,
effectif de la matière et placement vertical selon l’horaire de la matière.
Le titre du document doit avoir les caractéristiques suivantes:
• Le titre est en gras, de couleur bleu et centré par rapport à la page,
• Police de caractères : Arial
• Taille de la police : 30 pixels
TD5 – Applications du CSS Page 1 / 6
Module 1 – Introduction Web HTML – CSS – Formulaires
TD5 – Applications du CSS Page 2 / 6
Module 1 – Introduction Web HTML – CSS – Formulaires
Exercice n°2 – Réalisation d’un CV
Vous allez créer votre propre CV sous la forme d’une page web.
1 En utilisant l’outil de développement Netbeans, créez un nouveau projet HTML5Application
nommé td5_Cv dans le dossier TD5.
À partir des ressources pour le TD déjà téléchargées précédemment dans votre dossier
personnel, copiez les fichiers du dossier cvEtudiant2023 dans le dossier public_html de votre
projet et supprimez le fichier index.html.
Créez le fichier style cvExempleCss.css permettant d'avoir le même rendu que le modèle ci-
dessous (il est interdit de changer le contenu de la page HTML qui est fournie en
ressource).
2 Changez le contenu des balises (dans le fichier HTML) pour mettre les informations vous
concernant afin de créer votre propre CV.
TD5 – Applications du CSS Page 3 / 6
Module 1 – Introduction Web HTML – CSS – Formulaires
3 Créez une nouvelle feuille de style cvPersoCss.css permettant d'avoir le rendu ci-dessous
(ne changer dans le fichier HTML que la valeur href permettant de charger la nouvelle
feuille de style).
TD5 – Applications du CSS Page 4 / 6
Module 1 – Introduction Web HTML – CSS – Formulaires
4 Testez le fichier cvExemple.html avec les fichiers css "cvColonnes.css" et "cvMatrix.css" et
vérifiez que vous obtenez bien le visuel ci-dessous pour le premier fichier style, puis le rendu page
suivante pour le second fichier.
TD5 – Applications du CSS Page 5 / 6
Module 1 – Introduction Web HTML – CSS – Formulaires
5 Proposez votre propre feuille de style pour élaborer votre CV.
TD5 – Applications du CSS Page 6 / 6
