Universit Ibn Tofail Facult des Sciences Dpartement dInformatique Knitra

A.U. 2011/2012 Filire : SMI Semestre 5

Prog. Web Cot Client

(Dure : 1h30) Documents et tlphones portables non autoriss

Contrle de Rattrapage

Exercice : Dans cet exercice on vous demande de raliser la page daccueil du site web LinkedIn qui regroupe plus de 150 millions de professionnels dans le monde pour changer des ides et des informations et pour faire progresser leur carrire (Voir figure 1). Les codes HTML, CSS et JavaScript doivent tre dans des fichiers spars.

- Figure 1 1. Notes sur le code HTML :

La page daccueil du site comme le montre la figue 2 est compose essentiellement de trois divisions : La division dont lid est " main" contient le texte de la page daccueil ; La division dont lid est " inscription" contient le formulaire dinscription ; La division dont lid est " recherche" contient le formulaire de recherche dun adhrent ;

Ces trois divisions sont dans une division globale dont lid est "conteneur" ; Les trois images image1.gif, image2.gif et image3.gif sont dans le dossier image ; Le lien hypertexte du texte identifiez-vous dans la division "inscription" est le fichier login.html ;

1/2

2. Notes sur les styles CSS : La division "conteneur" a une largeur de 1200px ; La division "main" a une largeur de 700px et une longueur de 500px ; La division "recherche" a une largeur de 1190px et une longueur de 150px ; Le texte Plus de 150 millions leur carrire est de couleur #43A2D2 ; Le texte qui est dessous est de couleur : #999 ; Les images image1.gif, image2.gif et image3.gif doivent tre insrer dans une zone de largeur 120px et de longueur 100px ; Le fond du titre de la bote du formulaire dinscription est de couleur #43A2D2 ;

3. Validation du formulaire en JavaScript : Afin de faire des vrifications sur les formulaires de la page daccueil du site Web LinkedIn, on vous a demand de faire la validation du formulaire dinscription ct client (en JavaScript). Lorsquun formulaire est soumis , il doit tre valid avant dtre envoy. Les rgles de validation sont les suivantes: Pour les champs du formulaire dinscription : Pour les champs Nom et Prnom : o Chaque champ doit accepter seulement les caractres a-z, A-Z ainsi que les espaces ; o Ces champs sont obligatoires et doivent avoir entre 2 et 20 caractres maximum. Pour le champ E-mail : o Il est obligatoire et doit contenir le caractre @ ; o Il doit contenir au moins un . (point), mais celui-ci doit tre positionn au moins une lettre aprs le @ et doit contenir au moins 2 lettres aprs. o Il ne peut commencer avec le caractre @. Pour le Mot de passe : Il est obligatoire et doit contenir au moins 6 caractres. Pour les champs Nom/Prnom du formulaire de recherche : Chaque champ est optionnel, mais sil est rempli il doit rpondre aux mmes exigences que des champs Nom/Prnom du formulaire dinscription ; Lorsque le focus est plac sur le champ, alors le mot Nom ou Prnom est supprim. Lorsquun formulaire nest pas valide lors de la soumission, une bote dalerte (alert) avec les erreurs doit tre affiche lcran. Question 1 : Ecrire le code HTML de la page daccueil du site Web. Question 2 : Donner le fichier externe des feuilles de styles en cascades design.css en respectant les contraintes dcrites prcdemment. Question 3 : Ecrire le fichier externe JavaScript validation.js qui permet la validation des formulaires dinscription et de recherche en respectant les rgles dcrites prcdemment.

2/2