You are on page 1of 2

Université Ibn Tofail Faculté des Sciences Département d’Informatique Kénitra

A.U. 2011/2012 Filière : SMI Semestre 5

Prog. Web Coté Client
(Durée : 1h30) Documents et téléphones portables non autorisés

Contrôle de Rattrapage

Exercice : Dans cet exercice on vous demande de réaliser la page d’accueil du site web LinkedIn qui regroupe plus de 150 millions de professionnels dans le monde pour échanger des idées et des informations et pour faire progresser leur carrière (Voir figure 1). Les codes HTML, CSS et JavaScript doivent être dans des fichiers séparés.

- Figure 1 1. Notes sur le code HTML :
La page d’accueil du site comme le montre la figue 2 est composée essentiellement de trois divisions : • La division dont l’id est " main" contient le texte de la page d’accueil ; • La division dont l’id est " inscription" contient le formulaire d’inscription ; • La division dont l’id est " recherche" contient le formulaire de recherche d’un adhérent ;

• Ces trois divisions sont dans une division globale dont l’id 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

o Il doit contenir au moins un . Les images image1. Les règles de validation sont les suivantes: Pour les champs du formulaire d’inscription : • Pour les champs Nom et Prénom : o Chaque champ doit accepter seulement les caractères a-z. on vous a demandé de faire la validation du formulaire d’inscription côté client (en JavaScript). • Lorsque le « focus » est placé sur le champ. Le fond du titre de la boîte du formulaire d’inscription est de couleur #43A2D2 . Question 2 : Donner le fichier externe des feuilles de styles en cascades design.2. 2/2 . Lorsqu’un formulaire n’est pas valide lors de la soumission. (point). Le texte qui est dessous est de couleur : #999 .gif doivent être insérer dans une zone de largeur 120px et de longueur 100px . alors le mot «Nom » ou « Prénom » est supprimé. image2. il doit être validé avant d’être envoyé.css en respectant les contraintes décrites précédemment. La division "main" a une largeur de 700px et une longueur de 500px . o Ces champs sont obligatoires et doivent avoir entre 2 et 20 caractères maximum.js qui permet la validation des formulaires d’inscription et de recherche en respectant les règles décrites précédemment. • Pour le champ E-mail : o Il est obligatoire et doit contenir le caractère @ . Notes sur les styles CSS : • • • • • • • La division "conteneur" a une largeur de 1200px . Pour les champs Nom/Prénom du formulaire de recherche : • Chaque champ est optionnel. mais s’il est rempli il doit répondre aux mêmes exigences que des champs Nom/Prénom du formulaire d’inscription . mais celui-ci doit être positionné au moins une lettre après le @ et doit contenir au moins 2 lettres après.gif. La division "recherche" a une largeur de 1190px et une longueur de 150px .gif et image3. 3. Lorsqu’un formulaire est « soumis ». une boîte d’alerte (alert) avec les erreurs doit être affichée à l’écran. Question 3 : Ecrire le fichier externe JavaScript validation. Validation du formulaire en JavaScript : Afin de faire des vérifications sur les formulaires de la page d’accueil du site Web LinkedIn. A-Z ainsi que les espaces . Le texte “Plus de 150 millions … leur carrière” est de couleur #43A2D2 . • Pour le Mot de passe : Il est obligatoire et doit contenir au moins 6 caractères. Question 1 : Ecrire le code HTML de la page d’accueil du site Web. o Il ne peut commencer avec le caractère @.