Examen 3 en HTML , CSS et JS

Examen en HTML, CSS et JS

  1. Consignes

    • Durée : 2h00
    • Tous documents sont autorisés
    • Téléphones portables (et autres périphériques connectés) interdits
    • Le sujet comporte quatre parties, tous les fichiers doivent appartenir au même dossier de travail ExamenDI se trouvant sous le bureau.
    • La réponse aux questions de cours doive être réalisée sur une page HTML avec un titre Réponse Q;01
  2. Questions de cours

    1. HTML5, CSS3 et JS ont trois rôles différents. Lesquels ?
    2. Que signifie CSS et qu’elle est sa définition ?
    3. Écrivez un élément td ayant comme attribut colspan la valeur 2, et comme contenu le texte “Ma colonne”.
    4. On veut afficher le texte “M’écrire“, en faisant en sorte que lorsque l’utilisateur clique sur ce texte, son client e-mail s’ouvre, et propose d’écrire à l’adresse e-mail hajjriadh@apcpedagogie.com. Écrivez le code HTML correspondant. Vous vous assurerez que
      celui-ci fonctionne quel que soit l’encodage de la page (attention à l’accent !).
    5. Quelle est la différence entre un élément span et un élément div ?
    6. Quelle est la différence entre l’attribut class et l’attribut id ? Donnez un exemple d’utilisation de l’un et de l’autre.
    7. On considère les couleurs RGB suivantes : (a) #00AC00 (b) #FFFF00 (c) #C0C0C0 (d) #FFFFFF (e) #08088A. Laquelle de ces couleurs correspond à :
      • (1) une nuance de bleu,
      • (2) une nuance de gris,
      • (3) une nuance de jaune,
      • (4) une nuance de vert,
      • (5) la couleur blanche ?
    8. Écrivez du code CSS qui permet de faire en sorte tous les titres de second niveau (éléments h2) soient écrits en bleu et en gras.
    9. Écrivez du code CSS qui permet de faire en sorte que le premier élément li de toute liste ul ou ol soit toujours souligné.
     




  3. Création d’un formulaire

    • Le centre de formation apcpedagogie offre à sa clientèle un site Web permettant l’abonnement aux différents modules de formation en ligne.
    • Écrire le code html5 qui permet de reproduire le formulaire inscription.html, représenté par le schéma suivant :
    • Examen 3 en HTML , CSS et JS

    • Le formulaire est divisé en trois groupes.
      • Le premier groupe permet d’obtenir les coordonnées du client. Il contient cinq zones de texte pour la saisie du nom, du prénom, de l’e-mail, l’adresse du site web du client et une zone de mot de passe.
      • Une zone calendrier pour sélectionner la date de naissance du client
      • 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 groupé par continent comme le montre le schéma ci-dessus.
      • Le deuxième groupe permet de sélectionner les formations du client. 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.
    • NB:
      • N’utilisez pas des tableaux
      • Aucun style ne devra apparaître dans les balises mais dans une feuille de style.
  4. Mise en forme du Formulaire

    • Remplissez le fichier style.css relié à la page inscription.html pour avoir le style suivant :
    • Examen 3 en HTML , CSS et JS

  5. Validation du Formulaire

    • A l’aide d’un script javascript écrit dans une page nommée inscription.js, réaliser les évènements suivants :
    • Le clic sur le bouton Valider fait appel à une fonction “verif()” écrite en JavaScript qui vérifie le remplissage du formulaire en respectant les règles suivantes :
      • Tous les champs doivent être remplis
      • Le mot de passe doit être formé exactement de 8 caractères.
      • Le choix d’un genre est obligatoire
      • La sélection d’un pays est obligatoire
      • Au moins une formation est choisi
      • L’envoie d’un image est obligatoire
    • Lorsque une zone de texte ou textarea perd le focus la bordure prenne une couleur verte.



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement