Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Université Sidi Mohamed ben Abdellah Faculté des Sciences et Techniques Fès Dép

Université Sidi Mohamed ben Abdellah Faculté des Sciences et Techniques Fès Département de Génie Industriel Bases de données et Internet Travaux pratiques Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat 1 T.P. n° 1 : HTML – XHTML Exercice 1 : Paragraphes Ecrire un code XHTML qui permet de créer la page web de la structure suivante : Exercice 2 : Lien sur une image Soit le logo suivant : Insérez ce logo dans votre page Web (n'omettez pas l'attribut alt). Puis associez-y un lien vers le serveur de msn (l'image devient alors un "bouton"). Utilisez comme valeur pour l'attribut border la valeur 0. Exercice 3 : Imbrication des listes (Listes ordonnées et non-ordonnées) Ecrire un code XHTML qui permet de créer la page web de la structure suivante : Exercice 4 : Imbrication des listes (Listes ordonnées et non-ordonnées) Réalisez les différentes listes suivantes : msn.gif 2 Liste à puce :  Adresse : Faculté des Sciences et Techniques de Fès, Maroc.  Tél : (212) 12 34 56 78 90  Fax : (212) 12 34 56 78 91  E-mail : html@gmail.com Combinaison de listes numérotée et à puce : 1. Premier cycle universitaire :  Module 1 : Physique  Module 2 : Mathématiques 2. Dexième cycle universitaire : o Module 1 : Systèmes d‘information o Module 2 : Bases de données 3. Stage :  FST, Fès Exercice 5 : liens hypertextes Créer une page Web appelée exerxice5.html qui permet d’accéder aux sites Web de quelques ministères du Maroc (via des liens hypertextes) : Ministère des finances Ministère des travaux publics Ministère de l’éducation nationale Les liens insérés sont sur les adresses suivantes : Ministère des finances : http://www.mfi.gov.ma Ministère des travaux publics : http://www.tp.gov.ma Ministère de l’éducation nationale : http://www.men.gov.ma Exercice 6 : Listes et liens hypertextes Rédiger un code XHTML reproduisant aussi fidèlement que possible le document ci-dessous comprenant deux différents types de liste avec des liens. 3 Exercice 7 : Le but de cet exercice est de créer un curriculum vitae en langage HTML. Nous serons amené à utiliser la balise <table> pour la création des tableaux, <tr> pour l'ajout des lignes et <td> pour l'insertion des cellules. Créer une nouvelle page appelée cv.html. Saisir le texte suivant comme titre h2, couleur "bleu foncé" : CURRICULUM VITAE A la ligne suivante, taper le texte "Informations personnelles" en gras couleur darkred et puis passer à la ligne suivante. Insérer le tableau suivant (sans bordure) : Nom et prénom Soufiane Alami Téléphone 061-10-10-10 Adresse 111 Bd Bir Anzarane Email alami@yahoo.fr Ajouter une barre séparatrice de taille 50% couleur grise. A la ligne suivante, taper le texte "Formations initiales" en gras couleur darkred et puis on saute la ligne. Créer la liste suivante qui énumère les diplômes obtenus :  2007 : Master en Génie Industriel - FST de Fès  2005 : Licence Sciences et Techniques - FST de Fès  2002 : Bac science Math. Marquer le texte FST de Fès comme lien hypertexte sur le site de la FST : http://www.fst- usmba.ac.ma/. Insérer une barre séparatrice de taille 50% couleur grise. Mettre une couleur d'arrière plan beige pour la page. Changer les couleurs des liens hypertextes en vert foncé. Ajouter un paragraphe contenant le texte écrivez-moi aligné à droite comme lien hypertexte sur l’email : alami@yahoo.fr Exercice 8 Faire correspondre à chaque morceau de code à droite sa définition à gauche : L'image de fond pour la page entière <img width="314" height="293"> Rend le tableau invisible <table border="0"> Le texte est rouge <table width="60%"> Les dimensions de l'image <font color="#cc0000"></font> Un tableau de 60% de la largeur <td bgcolor="#cc0000"> La source d'une image <table align="center"> Le tableau est centré <img src="fruits.jpg" /> Un lien relatif <a href="exercice8.htm">Exercice 8</a> La couleur de fond de cette cellule est rouge <body background="bati.jpg"> 4 T.P. n° 2 : HTML - XHTML : Les tableaux Exercice 1 : Tableaux Ecrire une page XHTML qui contient le tableau suivant : Valeur (million d’euros) Pays Import Export France 2.5 10.3 Espagne 12.4 1.3 Pays Bas 3.6 5.1 Total 18.5 16.7 Différence (I-E) +1.8 Exercice 2 : Tableaux et liens hypertextes Ecrire une page XHTML qui contient le tableau suivant : Les moteurs de recherche les plus utilisés Utilisateurs uniques (en millions) Taux d'utilisation Google 59,327 39,37% Yahoo! Search 45,774 30,38% Msn Search 44,651 29,63% Exercice 3 : Tableaux : Mise en forme Ecrire un code XHTML qui permet de créer la page web de la structure suivante : 5 Exercice 4 Le recrutement via Internet est un moyen virtuel pour mettre en place une solution d'intermédiation entre l'offreur et le demandeur d'emploi. Le but de cet exercice est de réaliser un composant d'un site du recrutement Electronique ou ce qu'on appelle EJOB. Créer une page Web appelée rubriques.html dans laquelle on regroupe toutes les rubriques du site selon la présentation suivante : Les rubriques doivent être marquées comme des liens hypertexte sur le vide pour le moment. La mise en forme doit être respectée et l'arrière plan des titres de ce sommaire doit être en bleu foncé et la couleur du texte blanche. Exercice 5 : Créer une page appelée formations.html contenant le tableau suivant : Nos Formations Intitulé de la formation Perspectives Système d'information, Audit et Contrôle de gestion  Contrôleur de gestion  Responsable administratif  Auditeur interne  Responsable d'études  Ingénieur conseil en système d'information Génie Financier - Banque et Finance  Conseiller en gestion de patrimoine  Responsable du marketing de produits financie  Ingénieur financier  Responsable d'études financières Marketing et Commerce o Chef de produit o Conseiller en marchandising o Directeur commercial Vers la fin du tableau ajouter le texte retour comme lien hypertexte qui permettra de revenir à la page index.htm. Exercice 6 : Tableaux à cellules recouvrantes Soient les tableaux suivants: Espace Entreprise » Déposer une offre » Consulter les CV » Forum entreprises Espace Étudiant » Déposer votre CV » Consulter les offres » Forum étudiants 6 En utilisant les balises XHTML et les attributs adaptés écrire le code XHTML permettant de définir ces tableaux: Note: On s’intéressera dans cet exercice uniquement à la structure des tableaux. Exercice 7 : Tableaux à cellules recouvrantes Ecrire un code XHTML qui permet de créer la page web de la structure suivante : Tableau 2 Tableau 1 Tableau 3 7 Exercice 8 : Créer une page web qui regroupe une liste des liens hypertextes pour des moteurs de recherche et serveurs de messagerie gratuits sous forme du tableau suivant : LISTE DES MOTEURS DE RECHERCHE image Le moteur google image Aller sur altavista image Rechercher avec carrefour LES SERVEURS DE MESSAGERIE image Envoyer un message via yahoo image Le serveur de messagerie caramail image Aller sur hotmail Les phrases soulignées doivent être mises sous la forme indiquée ci-dessus et qui représentent les adresses des serveurs web selon la correspondance suivante Le moteur google http://www.google.fr Aller sur altavista http://www.altavista.com Rechercher par carrefour http://www.carrefour.fr 8 Le serveur yahoo http://www.yahoo.fr Le serveur caramail http://www.caramail.com Le serveur hotmail http://www.hotmail.com A côté de chaque ligne du tableau on affiche une petite image de dimension 30X30 pixels cliquable supposée enregistrée dans le même dossier que la page et s'appelle puce.gif. Exercice 9 : Créer une page nommée cours.html qui permet à l'internaute de télécharger des supports de cours gratuitement. La page possède le canevas suivant : Supports gratuits Dépannage du premier degré d'un réseau word télécharger Le SGBD ACCESS pdf télécharger Programmation Web en PHP word télécharger Création des sites Web word télécharger Langage C++ pdf télécharger Les couleurs et du texte doivent être alternés d'une ligne à une autre. Si la couleur de l'arrière plan est claire, la couleur du premier plan est foncée. Appliquer les couleurs selon votre goût. Marquer le texte Télécharger comme lien hypertexte, dans l'ordre, sur les documents suivants : Resaux.doc, access.pdf, php.doc, web.doc, cpp.pdf. 9 T.P. n° 3 : HTML - XHTML : Les formulaires Exercice 1 : Créer le code XHTML qui permet de concevoir le formulaire suivant : Exercice 2 : Créez une petite calculatrice permettant d’effectuer des opérations arithmétiques élémentaires (addition, soustraction, multiplication et division) sur deux opérandes. 1. Affichez un formulaire permettant, dans l’ordre, de saisir la première opérande, puis de sélectionner l’opération parmi une liste (champ SELECT), enfin de saisir la seconde opérande. 2. Remplacez le champ SELECT par des champs RADIO. 10 Exercice 3 : 1) Dans la page web exerxice.html, créez un formulaire pays composé au moins des éléments suivants : • un champ select pour sélectionner le nom d’un pays parmi Allemagne, Espagne, France et Italie (respectez la casse en saisissant l’attribut value des champs option du select), • un champ input de type text pour saisir sa superficie, • un champ input de type text pour saisir le nombre d’habitants de ce pays, • un champ textarea pour décrire ce pays, • un champ input de type submit et de value Envoyer pour envoyer les informations au script exercice.php, • uploads/s3/ polycopie-des-travaux-pratiques-tic-bases-de-donnees-et-internet.pdf