Université d’Orléans BD & Internet
Feuille N° 1 – HTML
L'objectif de cette première série d'exercices est de reproduire à l'identique les pages html ci-
dessous. Vous trouverez sur Celene toutes les ressources nécessaires à la réalisation de chaque
exercice (images, fichier html5 vide, etc).
Attention : une fois le fichier réalisé il faudra le valider W3C via [Link]
Exercice 1 : éléments de base (image, listes, paragraphes, etc)
Exercice 2 : Modifier votre code pour que :
Si l'on clique sur la zone « centre » de la carte (la où il y a marqué 18°) on se retrouve sur les
prévisions de la région centre.
Si l'on clique sur la zone « ile de france » de la carte (la où il y a marqué 19°) on se retrouve
sur les prévisions de la région ile de france
Si l'on clique sur la partie supérieure de l'image (la ou il y a marqué METEO FRANCE ) on
se retrouve sur le site de météo france.
Tout clic en dehors de ces trois zones n'a aucun effet. Pour information l'image à une taille de
318x459 px. La partie inférieure de note page web sera alors de la forme suivante :
Exercice 3
Exercice 4 :
Exercice 5
Reproduire à l'identique le tableau disponible le fichier [Link] du répertoire ex5. Notez
la présence des symboles < et > ainsi que de l'apparence grasse de certaines phrases.
Exercice 6
Créer le formulaire disponible dans le fichier [Link] du répertoire ex6. Le bouton
« Envoyer » envoie les données à la page [Link] qui devra afficher le message
« Traitement des données ». Le bouton « Tester » envoie les données à la page [Link] qui
affiche le message « Tester les données ». Le bouton « Effacer » efface le contenu du
formulaire.
Les champs login et mot de passe sont obligatoires et contiennent pas défaut un message
interne gris clair informant de ce qu'il faut saisir et qui s'efface dès qu'on clique dessus. Les
boutons Homme et Femme s'excluent mutuellement. La zone code postale est un numérique
qui augmente de 10 à chaque pression et qui est par défaut à 45100. Le champ profession est
une liste déroulante avec auto-completion sur les possibilités suivantes : cadre, manuel, sans
profession, retraité, étudiant. Le champ comment avez vous connu le site est une liste
déroulante simple avec trois possibilités : par le net, par un amis, par publicité courrier. La
valeur par défaut sera « par le net ». Le champ informations complémentaires contient 30
colonnes et 3 lignes.
Utilisez GET puis POST en méthode d'envoi et faites des commentaires sur le contenu de la
barre d'adresse de votre navigateur après avoir envoyé le formulaire ? Comment apparaît le
champ « mot de passe » dans le formulaire puis dans la barre d'adresse une fois envoyé ? Que
peut-on déduire ?