TP 2 – HTML/CSS

Exercice 1
On se propose de reprendre le fichier syllabus.html et de lui appliquer un format à l'aide d'une
feuille de style.
1. Reprendre le fichier syllabus.html, supprimer tous les attributs style dans les balises d'ouverture et
insérer une feuille de style dans l'entête du document HTML.
2. Supprimer les balises <div> ou <p> autour de l'élément img, ajouter dans l'élément img l'attribut
id=”logo”, puis modifier dans le CSS à l'aide du sélecteur d'id l'image en type “block” puis centrer
l'image.
3. Redéfinir les formats h1, h2 et h3 par la couleur, taille, police de caractère et couleur de fond.
4. Proposez d'autres styles de puces.
Indication : prendre par exemple le modèle de page proposé. Cf fichier pdf joint.

Exercice 2
1. Reproduire le tableau suivant (sans les bordures). Les textes en gras désignent des cellules
entête.

Diplôme Filière
Télé Informatique
Technico-Commercial
DTS
Réseaux Télécom
Réseaux et Données
Technico-Commercial
IGTT
Réseaux Télécom

2. Dans le fichier CSS attribuez une bordure (border) noire à chaque cellule (td et th).
3. Centrez le tableau sur la page.
4. Dans l'affichage précédent, on remarque que la bordure se dessine autour de chaque case,
mais que chaque case est séparée par un petit espace. Comment supprimer l'espace ?
(Indication : utilisez la propriété border-collapse)
5. On veut afficher des lignes de couleur alternées. Ajoutez les classes nécessaires et les
propriétés nécessaires pour obtenir l'affichage ci-dessous le choix des couleurs est libre).

Diplôme Filière
Télé Informatique
Technico-Commercial
DTS
Réseaux Télécom
Réseaux et Données
Technico-Commercial
IGTT
Réseaux Télécom