Université Mohamed Premier
Transcription
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.