Formation des enseignants de Tataouine et de Médenine 2019-2020
Fiche de projet
« L’utilisation de la technologie par les élèves »
Texte :
Au lycée et pendant la récréation, vous avez remarqué que la majorité des élèves sont attachés
à des smartphones, des IPhones, des tablettes et des ordinateurs. Vous avez remarqué que ce
phénomène s’accentue de jour en jour et certains de vos camarades vous avouent qu’ils sont
incapables de se séparer de leurs appareils électronique le jour et la nuit. Ils les utilisent pour
consulter leurs comptes de réseaux sociaux, pour jouer leur jeu préféré, pour communiquer
avec les autres et pour faire des recherches. Ils déclarent aussi qu’ils dépensent la majorité de
leur argent de poche sur les frais de connexion, de communication téléphonique et l’achat des
accessoires et des nouveaux appareils.
Pendant la séance d’informatique, vous avez exposé ce phénomène à votre professeur, il vous
a demandé de créer un site Web qui permet de présenter :
• les tendances technologiques utilisées par les élèves,
• les résultats de l’analyse des données effectuée et les conclusions et les recommandations
nécessaires,
• les résultats de quelques études mondiales.
Le site web que vous allez rédiger devra contenir au minimum les informations suivantes :
1. plusieurs pages qui contiennent les différents types d’appareils électroniques possédés par les
élèves (Ordinateur, smartphone, Tablette, IPhone).
2. Dans la page « ordinateur », présenter 10 marques d’ordinateurs.
3. Dans la page « Smartphone », présenter 10 marques de smartphones.
4. Une page qui contient les différents systèmes d’exploitation utilisés par les appareils
électroniques.
5. Une ou plusieurs pages qui contiennent les résultats de l’analyse des données effectuée et les
conclusions et les recommandations nécessaires.
6. Une ou plusieurs pages qui contiennent les résultats de quelques études mondiales.
Travail à faire :
1. Créer une maquette de votre site Web.
2. En utilisant le langage HTML5 et CSS3, créer un site web afin d’obtenir les résultats attendus
précédemment.
Formation des enseignants de Tataouine et de Médenine 2019-2020
A/ Création des pages Web
Activité : Création des pages web
Sur le Web et en binôme, réaliser les taches suivantes :
• chercher une définition pour chaque type d’appareils électroniques utilisés par les jeunes,
• créer pour chaque type d’appareils une page web qui contient un nom du type et une
définition,
• dans la page « ordinateur », présenter 10 marques d’ordinateurs,
• dans la page « Smartphone », présenter 10 marques de smartphones,
• créer une page qui contient les systèmes d’exploitation utilisés par les appareils
électroniques. (pour chaque système d’exploitation on doit avoir un titre et une
définition),
• enregistrer les pages web crées dans votre dossier de travail,
• visualiser les pages crées et dégager les constatations.
Si l’élève ne possède pas de contenu pour ces pages web, il peut utiliser les définitions qui existent
dans le fichier « projet.docx » qui existe dans le dossier «création site web» du lecteur C.
N.B : Dans une page on doit avoir ou moins un titre et un paragraphe.
Activité : Création des paragraphes dans une page web
Dans les pages crées, en utilisant le mode création, séparer le titre de la définition (paragraphe)
puis dégager la balise correspondante.
Activité : Création des retours à la ligne dans une page web
En utilisant le mode création et dans la page « ordinateur » et la page « smartphone », mettre
chaque marque dans une ligne en insérant un retour à la ligne à la fin de chaque marque (pas de
paragraphe) puis dégager la balise correspondante.
Activité : Mise en forme des titres dans une page web
En utilisant le mode création, dans les pages des types d’appareils, mettre les titres de chaque
type d’appareils sous la forme de titre de niveau 1 puis dégager la balise correspondante.
Application : Mise en forme des titres dans une page web
En utilisant le mode création ou le mode code, dans la page des systèmes d’exploitation, mettre
le titre de la page sous la forme de titre de niveau 1 et les sous-titres (les systèmes d’exploitation)
sous la forme de titre de niveau 2.
Activité : Mise en importance d’un texte dans une page web
En utilisant le mode création, mettre en importance les titres et des sous-titres existant dans les
pages crées puis dégager la balise correspondante.
Activité : Mise en forme en gras d’un texte dans une page web
En utilisant le mode création, mettre en gras les marques des ordinateurs et des smartphones
puis dégager la balise correspondante.
HTML5 PAGE N° 2
Formation des enseignants de Tataouine et de Médenine 2019-2020
Activité : Mise en évidence d’un texte dans une page web
En utilisant le mode création, mettre en évidence les mots clés de chaque définition puis dégager
la balise correspondante.
Activité : Mise en forme en italique d’un texte dans une page web
En utilisant le mode création, mettre en italique les noms des systèmes d’exploitation utilisés par
les smartphones puis dégager la balise correspondante.
Activité : Soulignement d’un texte dans une page web
En utilisant le mode création, souligner les noms des systèmes d’exploitation puis dégager la
balise correspondante.
Activité : Mise en forme d’un texte en petite taille ou en remarque dans une page web
En utilisant le mode création, ajouter à la fin de chaque page les noms des auteurs du site web,
©, l’année de création et la date de modification puis mettre en forme le texte ajouté en en petite
taille puis dégager la balise correspondante.
Activité : Mise en forme en surbrillance d’un texte dans une page web
En utilisant le mode création, mettre en surbrillance les mots clés de chaque définition puis
dégager la balise correspondante.
Activité : insertion d’une liste à puces dans une page web
En utilisant le mode création, insérer une puces devant les marques des ordinateurs et des
smartphones puis dégager la balise correspondante.
Activité : insertion d’une liste numérotée dans une page web
En utilisant le mode création, numéroter les sous-titres qui existent dans la page des systèmes
d’exploitation puis dégager la balise correspondante.
Activité : insertion d’un tableau dans une page web
En utilisant le mode création, dans la page des systèmes d’exploitation créer un tableau où la
première ligne est une ligne d’entête qui est formée par plusieurs cellules dont chaque cellule
contient un type d’appareils électroniques et la première colonne est formée par plusieurs cellules
dont chaque cellule contient le nom d’un système d’exploitation puis dégager la balise
correspondante. (voir exemple tableau ci-dessous)
Ordinateur Smartphone Tablette Iphone
Windows Android Android IOS
Linux Windows Windows
Mobile Mobile
Activité : insertion d’image dans une page web
En utilisant le mode création, insérer devant chaque paragraphe d’un système d’exploitation une
image qui illustre le logo du système puis dégager la balise correspondante.
HTML5 PAGE N° 3
Formation des enseignants de Tataouine et de Médenine 2019-2020
Activité : Modification de la taille d’une image dans une page web
En utilisant le mode création, modifier la taille des images insérées puis dégager la balise
correspondante.
Activité : insertion de séquence vidéo dans une page web
Télécharger une séquence vidéo portant sur le thème de votre projet, en utilisant le mode
création, insérer cette séquence dans votre site web puis dégager la balise correspondante.
Activité : insertion d’une séquence sonore dans une page web
Télécharger une séquence sonore portant sur le thème de votre projet, en utilisant le mode
création, insérer cette séquence dans votre site web puis dégager la balise correspondante.
Activité : C’est quoi un lien hypertexte une page web
En utilisant le navigateur disponible ouvrir l’adresse URL suivante :
« https://fr.wikipedia.org/wiki/Ordinateur », cliquer sur les textes de couleurs, dégager leur rôle
et poser une définition du mot lien hypertexte.
Activité : création d’un lien hypertexte externe une page web
En utilisant le mode création, créer une nouvelle page qui représente un menu de votre site web.
Ce menu contient les noms des pages web « Ordinateur », « Smartphone », « Tablette »,
« Iphone » et « systèmes d’exploitation » et lorsqu’on dessus on ouvre la page concernée puis
dégager la balise correspondante.
Activité : création d’un lien hypertexte interne une page web
En utilisant le mode création, dans la page des systèmes d’exploitation réaliser les tâches
suivantes :
▪ créer un menu qui contient les noms des systèmes d’exploitation,
▪ créer une encoche (marque/ signet) pour chaque système d’exploitation,
▪ créer des liens hypertextes du menu vers les encoches créées,
▪ puis dégager la balise correspondante.
Activité : Alignement justifié des textes dans une page web
En utilisant le mode création, justifier les définitions des appareils électroniques existant dans les
pages web puis dégager la balise correspondante.
Activité : coloration des textes dans une page web
En utilisant le mode création, colorer les titres de votre site web avec des couleurs de votre choix
puis dégager la balise correspondante.
Activité : Modification des polices des textes dans une page web
En utilisant le mode création, mettre en Comic Sans MS les titres et en Arial les sous-titres de
votre site web puis dégager la balise correspondante.
HTML5 PAGE N° 4
Formation des enseignants de Tataouine et de Médenine 2019-2020
Activité : coloration des cellules d’un tableau dans une page web
En utilisant le mode création, colorer l’arrière-plan les cellules qui contiennent les libellés des
colonnes du tableau puis dégager la balise correspondante.
Activité : Les formulaires dans une page web
Dans votre projet d’analyse des données vous avez créé un formulaire en ligne et vous avez
identifié quelques objets qui peuvent constituer un formulaire. Relier chaque objet de la première
colonne avec son type existant dans la deuxième colonne.
Objet Type
Bouton de type submit
Cases d’options (Radio)
Cases à cocher
Zone de saisie sur plusieurs
lignes
Liste déroulante
Zone de saisie
Bouton de type Button
Bouton Reset
Activité : création d’un formulaire dans une page web
En utilisant le mode source, créer une nouvelle page web qui contiendra le formulaire de contact
ci-dessous la balise correspondante à chaque élément du formulaire.
HTML5 PAGE N° 5
Formation des enseignants de Tataouine et de Médenine 2019-2020
Activité : Les évènements dans une page web
Ouvrir la page « evenement.html » qui existe dans le dossier «création site web» du lecteur C,
remplir le formulaire, pointer la souris sur l’image et cliquer sur le bouton valider, dégager vos
constatations puis dégager les commandes responsables à ces modifications
Activité : Les évènements dans une page web
Remplir le tableau ci-dessous par les événements correspondants de la liste suivante :
/ onfocus / onmouseover / onclick / onblur /
Descriptions Balises
Le traitement ce déclenche lorsque l’utilisateur clique sur l’objet. ………………………….
Le traitement ce déclenche lorsque l’utilisateur prend le focus de
………………………….
l’objet.
Le traitement ce déclenche lorsque l’utilisateur passe la souris sur
………………………….
l’objet.
Le traitement ce déclenche lorsque l’utilisateur perd le focus de
………………………….
l’objet.
Activité : Les évènements dans une page web
Modifier votre page de formulaire en ajoutant les scripts suivants :
• Lorsqu’on clique sur le bouton « Valider » le message « Le bouton valider est actionné »
• Lorsqu’on on clique dans la zone « nom & prénom » le message «La zone Nom et prénom
est activée »
HTML5 PAGE N° 6
Formation des enseignants de Tataouine et de Médenine 2019-2020
Activité N° 1 : Découverte des styles
Ouvrir la page des systèmes d’exploitation puis taper la partie <head> </head> le code ci-
dessous puis dégager vos constatations :
Script :
<head>
<style type="text/css">
p
{
font-family: "Book Antiqua";
font-size: large;
font-style: italic;
text-align: justify;
direction: rtl;
background-color: #6bedff;
color: #000066;
font-weight: 100;
text-indent: 1.5em;
line-height: 2em;
}
</style>
</head>
Activité N° 2 : Changement d’un style
Modifier dans le style précédent la propriété « direction: rtl; » par la propriété « direction: ltr; »
puis dégager vos constatations :
Activité N° 3 : création d’un nouveau style
Dans la page des systèmes d’exploitation, créer un style sur les sous-titres en modifiant les
propriétés suivantes : Police , Style d’écriture , Couleur de l’arrière-plan , Couleur du texte et
Interligne, le soulignement et un ombre.
Les styles & css3
