Institut Supérieur d’Informatique et de Multimédia de Sfax
Matière : Web Statique 1
Auditoire : P-PIIM A-U : 2021-2022
TP n° 2 : Listes, image et liens
Enseignantes responsables : Baccar Rim & Chamkha Nadia
Remarque : Dans la partition D : ou bien E : de votre ordinateur, créer un nouveau dossier (bouton
droit de la souris / Nouveau / Dossier), nommé Web1.
Dans ce répertoire, créer un sous-répertoire nommé TP2. Vous travaillerez dans ce répertoire tout au
long du TP2.
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 :
• Listes (ordonnées, non ordonnées, imbriquées et de définitions)
• Insertion d’image
• Ajout de liens internes et de liens externes
Structuration de texte
Pour se familiariser avec toutes les balises HTML vues en cours on demande de faire un site
web statique pour présenter L’institut supérieur et de multimédia de sfax. Pour cela, des
fichiers purement textuels seront proposés. A vous de les structurer, de les mettre en forme
et de concevoir une navigation entre eux.
1. Pour commencer, créer un nouveau fichier Ex1.html. Avec Notepad++ ajouter les balises
du squelette du document :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>L’institut Supérieur et de multimédia</title>
<meta name="author" content="isims-prep"/>
</head>
<body>
</body>
</html>
2. Insérer le titre « Institut supérieur d'informatique et de multimédia de Sfax » en utilisant
une balise de titre de premier niveau <h1>. Mettre le titre au centre <h1 style="text-
align:center">
3. Modifier la couleur du titre en bleu en utilisant la balise <span> en suivant cet exemple :
<span style="color:blue "> texte en bleu </span>.
4. Utiliser la balise <hr> pour entourer le titre de niveau 1 par deux lignes horizontales
centrées en utilisant. La longueur de chaque ligne est égale à 50% de la largeur de la page.
1
Insertion d’image et mise en forme
5. Faire un retour à la ligne et insérer une image de l’ISIMS. Télécharger l’image de l’internet.
(balise <img src= "nom_img.extension").
6. Dans la balise <img>, ajoutez les deux attributs width et height et testez quelques valeurs
possibles.
7. Ajouter avec balise <p> le paragraphe suivant :
L'Institut supérieur d'informatique et de multimédia de Sfax (arabe : المعهد العالي لإلعالمية والملتيميديا
)بصفاقسou ISIMS est un établissement de l'enseignement supérieur tunisien basé au sein du pôle
technologie de Sakiet Ezzit près de Sfax. Créé à la suite du décret présidentiel du 14 août 2001, il est
spécialisé dans les domaines de l'informatique et du multimédia.
L'ISIMS dispose de la personnalité civile et d'une autonomie financière et dépend de l'Université de
Sfax.
Il compte 1 595 étudiants durant l'année 2008-2009 dont 742 inscrits en première année ; la maîtrise en
informatique, systèmes et multimédia regroupe le plus d'étudiants avec 331 inscrits, toutes années
confondues. Le taux de réussite aux examens de l'année 2007-2008 a été de 85,96 %.
8. Mettre le mot ISIMS en gras, italique
9. Rajoutez « Sommaire » en utilisant une balise de titre de troisième niveau. Ajouter une
ligne <hr/>
Ajout de listes
10. Sous sommaire ajouter les quatre titres suivant comme suit :
Sommaire
1. Formation
2. Personnel
3. Références
4. Lien externe
11. Ajouter le texte ci-dessous puis utiliser les listes de définition (dl, dt , dd) afin de mieux
structurer la description de ces termes (Formation, Personnel, Références, Lien externe)
Formation
L'ISMIS met à la disposition de ses étudiants une formation de base pour aboutir aux spécialités
suivantes :
Cycle préparatoire intégré
Licences
Licence Big Data et analyse de données
Licence Informatique & Multimédia
Mastères de recherche
Sciences de l’informatique (SI)
Entreprise system engineering
Data science
Science on cyber physical systems
Science in digital technologies for health care
Mastères professionnels
Innovation et gestion de projets
Design d’expérience et design d’interface (DEDI)
2
Personnel
Faiez Gargouri est directeur de l'ISIMS depuis l'année universitaire 2007-2008, en remplacement
d'Abdelmajid Ben Hamadou, en poste à partir de 2001, sous les ordres duquel il a servi en tant que
directeur du département d'ingénierie informatique. En septembre 2011, Ben Hamadou reprend ses
fonctions de directeur, devenant alors le premier directeur élu de l'institut.
Le secrétariat général est occupé depuis 2011 par Tarek Kammoun. Ce poste a auparavant été occupé
par Hamda Kamoun (2001-2006), Jamel Kolsi (2006-2008) et Hichem Elloumi (2008-2011).
Références
Principales statistiques de l'établissement (Institut supérieur d'informatique et de multimédia de Sfax)
Filières et programmes (Institut supérieur d'informatique et de multimédia de Sfax)
Lien externe
Site officiel
12. Utiliser les listes ordonnées et les listes non ordonnées pour modifier Formation dans
définition comme suit :
Formation
L'ISMIS met à la disposition de ses étudiants une formation de base pour
aboutir aux spécialités suivantes :
1. Cycle préparatoire intégré
2. Licences
▪ Licence Big Data et analyse de données
▪ Licence Informatique & Multimédia
3. Mastères de recherche
• Sciences de l’informatique (SI)
• Entreprise system engineering
• Data science
• Science on cyber physical systems
• Science in digital technologies for health care
4. Mastères professionnels
o Innovation et gestion de projets
o Design d’expérience et design d’interface(DEDI)
Ajout de liens
13. Insérer dans votre document les liens hypertextes internes suivants :
- Formation
- Personnel
- Références
- Lien externe
14. Insérer les liens externes suivants :
-Principales statistiques de l'établissement : http://www.isimsf.rnu.tn//index.php
-Filières et programmes : http://www.isimsf.rnu.tn//index.php
- Site officiel : http://www.isimsf.rnu.tn/
