EFM Regional 2 Hypermédia HTML+CSS+JQuery
2014
Affichage des articles dont le libellé est tp_control. Afficher tous les articles
Affichage des articles dont le libellé est tp_control. Afficher tous les articles
mercredi 11 juin 2014
samedi 7 juin 2014
mercredi 4 juin 2014
mardi 25 mars 2014
EFM 2 Hypermédia HTML+CSS+Javascript
Exercice 1 :
Créer un menu horizontal en HTML et CSS.
Exercice 2 :
Créez un formulaire divisé en trois groupes.
Le premier groupe permet d’obtenir les coordonnées du visiteur. Il contient trois zones de texte pour la saisie du nom, du prénom et de l’e-mail et une zone de mot de passe.
Ces champs sont suivis d’un groupe de boutons radio pour indiquer le sexe de la personne.
Enfin, ce groupe se termine par une liste de sélection qui contient trois groupes d’options pour le choix du pays.
Le deuxième groupe permet de saisir des informations sur les goûts du visiteur. Il comprend trois cases à cocher et une zone de texte multilignes de 50 caractères de large et de 5 lignes de haut.
Le troisième groupe contient un composant d’envoi de fichier et un champ caché indiquant la taille maximale des fichiers fixée à 10 Ko. Le formulaire se termine bien évidemment par l’insertion des boutons d’envoi et de réinitialisation.
Exercice 3 :
Reprendre le formulaire réalisé dans le TP HTML (contact.html ) et assurer son contrôle
en javascript : on n’acceptera pas les champs non remplis ou les choix ou options non renseignés (cf.
exemples).
Créer un menu horizontal en HTML et CSS.
Exercice 2 :
Créez un formulaire divisé en trois groupes.
Le premier groupe permet d’obtenir les coordonnées du visiteur. Il contient trois zones de texte pour la saisie du nom, du prénom et de l’e-mail et une zone de mot de passe.
Ces champs sont suivis d’un groupe de boutons radio pour indiquer le sexe de la personne.
Enfin, ce groupe se termine par une liste de sélection qui contient trois groupes d’options pour le choix du pays.
Le deuxième groupe permet de saisir des informations sur les goûts du visiteur. Il comprend trois cases à cocher et une zone de texte multilignes de 50 caractères de large et de 5 lignes de haut.
Le troisième groupe contient un composant d’envoi de fichier et un champ caché indiquant la taille maximale des fichiers fixée à 10 Ko. Le formulaire se termine bien évidemment par l’insertion des boutons d’envoi et de réinitialisation.
Reprendre le formulaire réalisé dans le TP HTML (contact.html ) et assurer son contrôle
en javascript : on n’acceptera pas les champs non remplis ou les choix ou options non renseignés (cf.
exemples).
EFM 4 : Hypermédias HTM-----CSS-----JavaScript
EFM
Durée 2 heures
Remarques générales
1 même si
les questions semblent liées, elles peuvent toutefois être traitées indépendamment
l'une de l'autre
2 on
n'écrira que les lignes html sans entête (doctype, meta, …)
On se propose d'écrire une page HTML et des fonctions
Javascript permettant de jouer au Sudoku. (sans en expliquer les règles ici)
Pour cela :
Question 1 (4 points) Ecrire les lignes HTML
permettant d'obtenir le tableau suivant :
les cellules sont des zones de texte d'un formulaire. Bien sûr, les cellules
qui contiennent des chiffres au départ sont non modifiables par l'utilisateur. Aucun
style ne devra apparaître dans les balises mais dans une feuille de style.
Question 2 – (2 points) L'utilisateur doit entrer un chiffre dans chaque case
vide. Lorsqu'il a fini, il a deux possibilités offertes par deux boutons :
vérifier que la grille est correctement remplie ou charger la solution sur une
autre page html
Ecrire les lignes html permettant d'ajouter ces deux boutons
au formulaire précédent sans écrire les fonctions.
Remarque : le
texte des boutons est écrit en police Times new roman, de taille 10 points. La
couleur du texte est rouge pour le premier et bleue pour le second ; l'aspect des
boutons est en relief, l'épaisseur de leurs bordures est de 4 pixels et la
couleur de fond jaune. La largeur des boutons est de 200 pixels pour le premier
et 100 pixels pour le second Aucun style ne devra apparaître dans les
balises mais dans la feuille de style.
Question
3 – (6 points) Mise en place des fonctions liées aux trois boutons :
a- (2 points) le premier
bouton permet d'ouvrir une page HTML "grille2.htm" (qui contient la
solution) dans une nouvelle fenêtre. Ecrire les lignes HTML et javascript permettant
d'ouvrir la nouvelle fenêtre lors du clic sur le bouton "solution dans
nouvelle page" avec la page grille2.htm. La nouvelle fenêtre n'aura aucune
barre d'outils, menu, ascenseur… et aura comme dimensions 200 par 200. (Attention
on ne vous demande pas d'écrire la page grille2.htm !!).
b – (1 point) la page
grille2.htm contient un bouton permettant de fermer cette nouvelle fenêtre lors
d'un clic. Ecrire les lignes HTML permettant de décrire ce bouton ainsi
que la fonction Javascript permettant de fermer la fenêtre (attention
on ne vous demande pas la page grille2.htm complète mais seulement le bouton !!).
Exemple
c – (3 points) Le bouton
"vérifier ma grille" permet seulement de vérifier que la grille est
complètement remplie (plus aucune cellule vide). Si c'est le cas, la grille
sera envoyée par courrier électronique. Sinon, le "focus" est donné à
la première zone vide trouvée.
Modifier si nécessaire
votre formulaire de la question 1 et écrire
la fonction javascript permettant d'effectuer cette vérification et
d'envoyer éventuellement la grille.
Dans l'exemple ci-dessous, le clic sur le bouton
"vérifier ma grille" a permis de déceler qu'une cellule de la zone en
haut à gauche est vide. Le "focus" est alors donnée à cette case afin
de la compléter.
EFM 1 Hypermédia HTML+CSS+Javascript
Exercice I
1. Peut-on inclure directement un élément <a> dans les éléments <body>,
<address>, <pre> ou <form> ?
2. Créez un lien vers un document PDF (par exemple : vers le fichier du cours que
vous hébergez sur votre espace), puis vers un fichier MP3. Indiquez le type du
document cible en utilisant l’attribut correct.
3. Reprenez votre index en lui ajoutant des liens vers les TP et leurs différentes
questions, utilisez une liste non ordonnée de liens qui renverront à l'intérieur de
vos pages de réponses directement aux ancres des réponses.
4. Récupérez les logos des différents site de vente de livres, de radio, de tv ou ...
sur leur site respectif. Créez un tableau incluant ces logos, puis des liens vers le
site de chaque site à partir de ces logos.
5. À partir de l’exercice précédent, modifiez le code de façon à ce que chaque
cible d’un lien s’ouvre dans une nouvelle fenêtre sans que la page d’origine ne se
ferme.
6. Citez tous les éléments spécialisés utilisables pour la création des tableaux et leur
ordre d’apparition dans le code XHTML.
7. Créez un tableau de 600 pixels de large contenant cinq lignes et trois colonnes
avec des bordures de 4 pixels, un espacement entre cellules de 10 pixels. Seules
les bordures verticales doivent s’afficher.
8. Construisez un tableau statistique ayant un en-tête, un pied de page et deux
corps de données. N’affichez que les bordures horizontales des groupes de
données. Centrez le contenu des cellules de données et alignez à gauche les titres
de l’en-tête et du pied de page.
Exercice II
Nous allons réaliser un mini-site. Réalisez une page index.html sur le modèle donné ci-dessous:
Créez un tableau selon le modèle suivant :
Créez un tableau selon le modèle suivant :
Exercice III
1- Ecrire le code HTM de la page web du formulaire.
2- Ecrire le permettant de respecter les règles :
a- Tous les champs sont obligatoires.
b- La date de naissance doit être vaide : 1<= jour <=31, 1<= mois <=12, année>=1910,
c- Le champ (Mot de passe) et e champ (Confirmer le mot de passe) doivent être égaux.
3- Ajouter le code JavaScript qui permet de fermer automatiquement la fenêtre du navigateur au bout de 20 secondes.
fdfds
Exercice IV
On entre une expression arithmétique dans une ligne de texte nommée calcul. (On pourra par la suite en fournir au hasard)
• L'enfant doit proposer une réponse dans le champ nommé reponse
• Prévoir un 3ème champ, nommé message, pour accueillir un message.
• Si la saisie dans reponse est vide, alors afficher dans message "Propose une réponse", sinon comparer la réponse à la valeur (avec la fonction eval () qui évalue une chaîne de caractère).
• Le message sera suivant le cas "réponse fausse .. corrige" ou bien "bonne réponse" .
• Un bouton marqué résultat devrait permettre à tout moment d'obtenir la réponse exacte dans le champ message.
• La partie d'analyse de la réponse sera programmée dans une fonction verif() Voici l'interface souhaitée :
1. Peut-on inclure directement un élément <a> dans les éléments <body>,
<address>, <pre> ou <form> ?
2. Créez un lien vers un document PDF (par exemple : vers le fichier du cours que
vous hébergez sur votre espace), puis vers un fichier MP3. Indiquez le type du
document cible en utilisant l’attribut correct.
3. Reprenez votre index en lui ajoutant des liens vers les TP et leurs différentes
questions, utilisez une liste non ordonnée de liens qui renverront à l'intérieur de
vos pages de réponses directement aux ancres des réponses.
4. Récupérez les logos des différents site de vente de livres, de radio, de tv ou ...
sur leur site respectif. Créez un tableau incluant ces logos, puis des liens vers le
site de chaque site à partir de ces logos.
5. À partir de l’exercice précédent, modifiez le code de façon à ce que chaque
cible d’un lien s’ouvre dans une nouvelle fenêtre sans que la page d’origine ne se
ferme.
6. Citez tous les éléments spécialisés utilisables pour la création des tableaux et leur
ordre d’apparition dans le code XHTML.
7. Créez un tableau de 600 pixels de large contenant cinq lignes et trois colonnes
avec des bordures de 4 pixels, un espacement entre cellules de 10 pixels. Seules
les bordures verticales doivent s’afficher.
8. Construisez un tableau statistique ayant un en-tête, un pied de page et deux
corps de données. N’affichez que les bordures horizontales des groupes de
données. Centrez le contenu des cellules de données et alignez à gauche les titres
de l’en-tête et du pied de page.
Exercice II
Nous allons réaliser un mini-site. Réalisez une page index.html sur le modèle donné ci-dessous:
 |
| le modele |
Créez un tableau selon le modèle suivant :
Créez un tableau selon le modèle suivant :
Exercice III1- Ecrire le code HTM de la page web du formulaire.
2- Ecrire le permettant de respecter les règles :
a- Tous les champs sont obligatoires.
b- La date de naissance doit être vaide : 1<= jour <=31, 1<= mois <=12, année>=1910,
c- Le champ (Mot de passe) et e champ (Confirmer le mot de passe) doivent être égaux.
3- Ajouter le code JavaScript qui permet de fermer automatiquement la fenêtre du navigateur au bout de 20 secondes.
fdfdsExercice IV
On entre une expression arithmétique dans une ligne de texte nommée calcul. (On pourra par la suite en fournir au hasard)
• L'enfant doit proposer une réponse dans le champ nommé reponse
• Prévoir un 3ème champ, nommé message, pour accueillir un message.
• Si la saisie dans reponse est vide, alors afficher dans message "Propose une réponse", sinon comparer la réponse à la valeur (avec la fonction eval () qui évalue une chaîne de caractère).
• Le message sera suivant le cas "réponse fausse .. corrige" ou bien "bonne réponse" .
• Un bouton marqué résultat devrait permettre à tout moment d'obtenir la réponse exacte dans le champ message.
• La partie d'analyse de la réponse sera programmée dans une fonction verif() Voici l'interface souhaitée :