DEPARTEMENT TECHNOLOGIE
ISET SFAX
DE L’INFORMATIQUE
Atelier 1
Matière : DEVELOPPEMENT WEB I Niveau : L1 TI
Enseignant : Equipe pédagogique A.U. 2022-2023
2023
Monsieur Ahmed Tounsi est un enseignant universitaire souhaite développer un site web pour regrouper son
cv, ses cours, ses TDs et ses TPs. Le site est structuré de la façon suivante :
La page index du site perso présentée en annexe est formée de 6 blocs :
Numéro Signification
1 C’est un bloc <nav> qui contient une image « menu.jpg » formé de trois zones de type
rectangle :
Mon Cv vers la page : CV.html (déjà crée dans le TP1-voir
voir Annexe)
Annexe
Mon Blog vers la page : ahmed.over-blog.com
Contacts : vers la page : Contact.html (voir annexe)
C’est l’entête <header> de la page qui contient une image comme arrière plan :
2
« bannière.jpg ».
C’est un bloc de type <section> qui contient deux blocs :
3 Le bloc numéro 4 (élément <article>)
<
Le boc numéro 5 (élément <aside>)
C’est un bloc qui est formé par :
Le titre de l’article (titre niveau 1) : Bienvenue sur ahmedtounsi.com !
Quatre paragraphes
paragraphe : qui donnent une brève description du site.
4
Une vidéo « ahmed.mp4 » qui présente Ahmed TOUNSI. Cette vidéo commence un
poster « poster.jpg » et contient les boutons de contrôle nécessaires.
C’est un bloc qui est formé par :
Un titre niveau 1 : À propos de Ahmed
5 Une image d’Ahmed Tounsi : ahmed.jpg
Un paragraphe : qui donne une brève description d’Ahmed Tounsi.
6 C’est le pied de la page web <footer>
< qui contient le texte Ahmed Tunisi © 2022
Travail à faire :
1- Donner le code HTML de la page "index.html". (Utiliser les balises : <article>, <header>,
<header <section>,
<footer>, <aside>, etc.).
2- Valider la page web crée en utilisant le site : https://validator.w3.org/#validate_by_upload
Page 1 sur 3
Page : index.html
Bienvenue sur mon site perso :
C'est un site personnel qui contient mon CV, un résumé de mes
projets déjà traités durant mes études universitaires et ma vie
professionnelle.
Ce site contient aussi des cours d'informatique et des exercices
portant sur des modules divers:
• Le système d'exploitation,
4 A propos de Ahmed
3 • Les réseaux informatiques,
• Fondement multimédia (image, son et vidéo),
• Algorithme et programmation, 5
• Etc...
Ce site contient aussi un lien vers mon blog de communication qui
contient divers articles qui peuvent offrir le plus pour les internautes
dans plusieurs domaines (informatique, cultures, etc...)
Je m'appelle Ahmed
Enfin, je vous souhaite une bonne navigation.
Tounsi, Je suis Ingénieur
et docteur en
informatique
Ligne séparatrice
Ahmed tounsi © 2022
6
Notez bien :
Le mot mon blog de communication est un lien hypertexte vers la page web : ahmed.over-
blog.com.
Page 2 sur 3
Page : Contact.html
Notez bien :
L’option monsieur est sélectionnée par défaut
Les champs sont obligatoires
Le champ téléphone doit contenir 8 chiffres et il s’agit d’un numéro Tunisie Télécom (commence
par 9)
Page : CV.html
Pour la page CV.html déjà crée en TP1, utiliser autant que possible les nouvelles balises HTML5 (<article>,
<header>, <section>, etc.). Ainsi, il est conseillé d’encadrer tout l’entête du CV (nom, prénom, coordonnées)
dans des balises <header>, et chaque partie du CV (formation, expérience, etc.) dans des balises <article>.
Page 3 sur 3
