Institut Supérieur d’Informatique et de Multimédia de Sfax

Matière : Web Statique 1

Auditoire : P-PIIM A-U : 2023-2024
TP n° 3 : Tableaux et liens
Enseignantes responsables : Chamkha Nadia

Remarque : Dans la partition D : ou bien E : de votre ordinateur, vous avez déjà créé un nouveau
dossier (bouton droit de la souris / Nouveau / Dossier), nommé Web1.
Dans ce répertoire, créer un sous-répertoire nommé TP3. Vous travaillerez dans ce répertoire tout au
long du TP3.
Au cours du semestre, ne pas hésiter à faire des sauvegardes de son contenu sur une clé USB ou
l’envoyer par mail.

Le but de ce TP est :
 Utilisation des éléments génériques span et div
 Ajout de tableau simple
 Utilisation de lien hypertexte

Exercice 1 : Utilisation des éléments génériques

1. Ouvrir le document TP2.html et l’enregistrer dans le dossier TP3 sous le nom TP3_Ex1.html
2. Les éléments HTML div et span sont des éléments génériques (sans aucun sens
sémantique) qui sont utilisés pour grouper et mettre en forme le contenu en CSS.
Dans ce cadre on va modifier le fond et la couleur du mot ISIMS du premier paragraphe
comme suit : font-size:20px;color:blue  on va utiliser donc la balise <span>

3. On demande de faire encadré le reste du texte (après sommaire) avec un fond gris. On va
utiliser la balise DIV Avec le code CSS (style="background-color:grey;
width:70%; border: 1px solid black;") pour obtenir le résultat suivant :

4. Valider votre code HTML à l’aide du site http://validator.w3.org

1
Exercice 2 : Tableaux et liens hypertexte
1. Créer le fichier TP3_Ex2.html dans le dossier TP3.
2. Ajouter la balise style suivante :
<style>
Table,th,td{
border: 3px outset grey;
}
</style>

3. Appliquer une couleur de code #A8A8AF pour votre page web

4. Ajouter un titre de niveau 2 intitulé : « Départements » et lui appliquer un style de votre choix
5. Insérer le tableau ci-dessous, en utilisant les balises et les attributs nécessaire sur les tableaux
(<table>, <tr>, <td>,colspan, rowspan…)
DEPARTEMENTS
Techniques informatiques et Sciences Ingénierie informatique
multimédia Informatiques et
multimédia
Technologie Technologie Licence Fondamental Ingénieurs en informatique
Informatique Multimédia informatique et de &
Multimédia et Web multimédia Technologies web et
Multimédia

Design et Design et L’esprit de création, Chef de projet

développement de développem d’initiative et le
sites Web ent des sites contrôle des
dynamique Web nouvelles
Conception et Réalisation et technologies de Ingénieur de recherche en
développement Montage l’information ITMW
d'applications vidéo
orientées gestion
Création et Réalisation Mastère de Développeur nouvelles
développement CD de CD recherche technologies (Réalité virtuelle,
interactif interactifs animation 3D, ...)

Développement Animation Doctorat

d'application 2D et 3D
multimédia

CONTACTS : CONTACTS : CONTACTS :

tarek.zlitni@isims.usf.tn faiza.ghozzi@isims.us mohamed.hadjkacem@isims.
f.tn usf.tn

6. Attribuer un titre au tableau « Les départements de l’ISIMS »

7. Insérer les logos DEPARTEMENTS et PERSPECTIVES dans les cellules correspondantes du tableau

2
8. Valider votre code HTML à l’aide du site http://validator.w3.org
9. Ajouter les liens hypertextes suivants : (voir cours p98)
- Ingénierie informatique : Faire un lien vers le tp1.html dans votre dossier de travail ;
 Par adressage absolu (file:///lecteur:/répertoire/fichier.htm)
 Par adressage relatif (../TP1/fichier.html)
- Sciences Informatiques et multimédia :
http://www.isimsf.rnu.tn/fra/s175/departements/SI/83/
- Techniques informatiques et multimédia :
http://www.isimsf.rnu.tn/fra/s175/departements/ISIMS/82/
10. Insérer le logos de l’ISIMS dans la cellule correspondante du tableau. Ce logos est un lien vers la
page principale du site : http://www.isimsf.rnu.tn/
11. Ajouter les trois contacts à la fin du tableau avec titre de niveau 3.
Utiliser mailto pour générer un nouveau mail aux destinataires correspondants
<a href="mailto:monmail@gmail.com">

Question Bonus
On remarque que les tps 1, 2 et 3 s’articulent autour du même sujet. On peut trouver un
système de navigation entre les pages où les internautes peuvent y accéder et se déplacer
aisément.
Modifier les pages web créées a fin d’implémenter ce système de navigation.