Université Mohamed Premier

Université Mohamed Premier
Faculté des Sciences
Année universitaire 2016/2017
Filière SMI S3
TP 1 Module « Technologies du Web »
Exercice 1 :
Objectif
Le but de ce TP c'est de comprendre la structure d'un document HTML et comment créer une page
HTML avec texte, titres et en-têtes et paragraphes. (HTML de base, le corps et l'en-tête, titre, texte,
attributs de texte, séparateurs, mise en forme, caractères admissibles)
Vous allez créer une page, appelée Premiere_HTML.html, qui fera apparaître plusieurs mises en forme de paragraphes
et de titres. La page comprendra 3 parties. Afficher et vérifier dans le navigateur votre travail entre chaque partie. Pour
cela, enregistrez votre fichier avec le bloc-notes et réactualisez la page dans le navigateur.
Description de la page à créer :
Exercise 2
Objectif
Le but de ce TP c'est de comprendre l'utilisation des tableaux ainsi que les listes et leurs usages pour
le contrôle du placement des éléments dans une page HTML
 étude des balises principales des tableaux (TABLE, TR, TD, TH, CAPTION) et leurs
paramètres;
 insertion d'un tableau simple;
 étude des balises principales des listes (OL, UL, LI) et de leurs paramètres;
Exercice 2-1
Donner le document html qui permet d'obtenir
Exercice 2-2:
Donner le document html qui permet d'obtenir
Exercice 2-3
Donner le document html qui permet d'obtenir
Exercice 2-4 :Donner le document html qui permet d'obtenir
Exercice 2-5
Donner le document html qui permet d'obtenir la page suivante.
Exercice n° 3
Objectif
Le but de ce TP c'est de comprendre l'adressage, être en mesure d'insérer des liens hypertextes et des
images dans une page et d'assimiler les paramètres obligatoires et optionnels pour la balise IMG.
Voir aussi comment changer l'aspect d'une page : couleurs, fond, couleur et taille des caractères ainsi
que la division de l'écran du navigateur en plusieurs zones.
 les liens hypertextes (A HREF)
 insertion de liens sur des éléments de texte
 formats d'images permis
 changer l'aspect d'une page : couleurs et fond, aspect des caractères
 Les cadres (FRAMESET et FRAME)
Sommaire.html
Travail à faire
Utiliser les images dans le dossier archivé : fichierTP1.zip
Programmer les liens coupe1, coupe2 et coupe3 respectivement vers les pages html coupe1.html,
coupe2.html et coupe3.html ;
Programmer les liens Lapin vers la page Lapin.html et Orque vers la page Orque.html ;
Les images seront sauvegardées dans le même répertoire que les pages HTML [orque.gif,
runrabit.gif, coupe.gif, phare.gif] ;
Programmer la page Left.html qui contienne tous les liens vers les autres pages ;
Subdiviser la page Sommaire.html en trois parties et programmer les différents liens.
NB : Lorsqu‘on clique sur les liens coupe 1, copue 2, coupe 3 et Lapin la page Lapin.htm sera
affiché dans le troisième cadre alors que le lien Orque permettra d‘afficher la page
Exercice n°4
Objectif
Ce TP est un premier pas vers l'interactivité par le biais des formulaires. L'étudiant verra en
détail les différents éléments constituant les formulaires



les éléments interactifs disponibles (boîtes de texte, listes de choix, boutons, région de
texte, etc).
la balise FORM et ses paramètres
comment bâtir un formulaire
Enoncé : Reproduire l‘apparence de la page (formulaire.htm) de la façon la plus fidèle possible.
Travail à faire
Programmer les boutons Soumettre formulaire pour envoyer le contenu du formulaire par email
en utilisant la méthode (METHOD="POST"), le bouton Effacer qui permet l‘initialisation du
formulaire (vider les champs de saisies). La liste déroulante contient les options suivantes :
Maroc, France, Italie, Tunisie.