Examen 5 Initiation au développement Web (HTML, CSS et JS)
Examen 5 Initiation au développement Web (HTML, CSS et JS)
-
Consignes
- Durée : 3h00
- Tous documents sont autorisés
- 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
- Cet examen s’effectuera individuellement. Vous rédigerez des pages HTML ,des feuilles de style CSS et des Script Javascript, qui seront envoyées au formateur à la fin de la séance, par courrier électronique exclusivement. Notant que votre mail devra mentionner vos nom et prénom.
- Tous les fichiers créés devront contenir en haut du fichier, en commentaires, vos nom , prénom , groupe et type de fichier.
- Le code HTML devra impérativement être conforme au standard HTML5, et les caractères devront s’afficher correctement quelle que soit la configuration du navigateur. Les feuilles de style CSS devront impérativement être conformes au standard CSS3.
- Tout non-respect de ces consignes donnera lieu à une baisse significative de la note.
-
Questions de cours
- HTML5, CSS3 et JS ont trois rôles différents. Lesquels ?
- Que signifie CSS et qu’elle est sa définition ?
- Écrivez un élément td ayant comme attribut colspan la valeur 2, et comme contenu le texte « Ma colonne ».
- 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 !). - Quelle est la différence entre un élément span et un élément div ?
- 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.
- 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 ?
- É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.
- É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é.
-
Création d’un formulaire
- Le but de ce premier exercice est de rédiger le code d’une page nommée VotreNom-formulaire.html, et qui doit avoir l’apparence de la page correspondante.
- Il est rappelé que l’affichage de certains champs du formulaire peut légèrement différer selon le navigateur utilisé (il est souhaitable d’utiliser Chrome).
- Dans cet exercice et à cette étape, il n’est demandé ni d’utiliser CSS (ou bootstrap), ni d’utiliser JavaScript.
- Question 1 : Créer l’en-tête HTML, le titre (avec une balise h1) et la phrase de bas de page.
- Question 2 : Créer le formulaire. La cible (action) du formulaire sera destination.html. Mettre en place le pourtour du formulaire à l’aide de la balise <fieldset> ; le texte en haut à gauche du cadre s’obtient grâce à la balise <legend>.
- Question 3 : Ajouter les champs noms et prénoms (type text).
- Question 4 : Ajouter le champ date de naissance (type date).
- Question 5 : Ajouter un groupe de boutons radio pour indiquer le sexe de la personne./li>
- Question 6 : Ajouter 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.
- Question 7 : Ajouter le champ adresse postale (balise textarea). La zone de texte fait 2 lignes et 30 colonnes.
- Question 8 : Ajouter le champ code postal (type number).
- Question 9 : Ajouter les champs adresse électronique et page personnelle (types email et url).
- Question 10 : Ajouter le champ téléphone portable (type number).
- Question 11 : Ajouter le champ semestre (balises select). La liste déroulante devra contenir les valeurs S1, S2, S3 et S4. Pour chacune des valeurs, il faut mettre un champ value (qui peut être identique à la
valeur affichée). - Question 12 : Ajouter le champ « niveau en HTML » (type range). La barre devra aller de 0 (min= »0″) à 10 (max= »10″) avec des pas d’incrément de taille 1 (step= »1″).
- Question 13 : Ajouter le champ connaissances (type checkbox) ; les balises nécessaires seront entourées de balises fieldset afin d’obtenir l’aspect visuel du cadre. Il faut que les différentes cases aient le même name (mais pas le même name que les deux boutons plus haut !).
- Question 14 : Ajouter le bouton « Envoyer » (balise button avec type submit).
- Question 15 : Ajouter le bouton « Effacer », lorsque l’on clique dessus, réinitialise tous les champs du formulaire
à leur valeur par défaut.. -
Mise en forme du Formulaire
- Question 1 : Créer une feuille de style CSS vierge VotreNom-formulaire.css.
- Question 2 : Ajouter à VotreNom-formulaire2.html un lien vers la feuille de style, en ajoutant dans l’en-tête HTML ( <head>) une balise < rel= »stylesheet » … />.
- Dans la suite de l’exercice, il conviendra de remplir la feuille de style VotreNom-formulaire.css de façon à obtenir l’apparence de la page correspondante, en annexe du sujet (p.N 6).
- Les seules modifications autorisées au fichier HTML VotreNom-formulaire.html seront l’ajout d’un nombre minimal d’attributs de type
classouiddans le corps de la page. Toutes les autres modifications se feront dans le fichier CSS. - Question 3 : Modifier la feuille de style afin que toute la page (sélecteur body) soit par défaut en police de caractères à chasse fixe (font-family: monospace;).
- Question 4 : Mettre en forme le titre (sélecteur h1) comme suit : la marge supérieure (margin-top) est de 2em, son alignement est centré (text-align:center;), et la barre inférieure est noire de largeur 10 pixels (border-bottom: solid black 10px;).
- Question 5 : Ajouter dans le code HTML un id= »main » au cadre (fieldset) principal. Modifier la feuille de style afin que l’espace (padding) entre le contenu du formulaire et ce cadre principal soit de 50 pixels. Ceci ne doit pas s’appliquer aux deux sous-cadres « Lieu de naissance » et « Connaissances ».
- Question 6 : Modifier la feuille de style afin que les légendes de cadres (sélecteur legend) s’affichent en majuscules (text-transform: uppercase;).
- Question 7 : Modifier la feuille de style afin que les étiquettes (sélecteur label) concernées s’affichent en gras.
- Question 8 : Modifier la feuille de style afin que les étiquettes soient toutes alignées à gauche, et que les champs s’affichent tous alignés à une distance de 250 pixels de la partie gauche de l’étiquette. On utilisera une solution qui ajoutera à un sélecteur d’étiquette (label) une largeur de 250 pixels ainsi que les propriétés display: block; et float: left;.
- Question 9 : Mettre en forme le cadre connaissances : la couleur du texte est rouge, celle du fond est #C0C0FF.
- Question 10 : Mettre en forme la phrase en bas de page, comme suit : cette phrase est séparée de ce qui précède d’un espace de 2em, les barres supérieures et inférieures sont bleues et d’une largeur de 5 pixels, le texte est centré, et sa taille est x-small.
-
Validation du Formulaire
- A l’aide d’un script javascript écrit dans une page nommée VotreNom-formulaire.js., réaliser les évènements suivants :
- Le clic sur le bouton Envoyer 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
- Les champs noms et prénom ne contiennent que des lettres (accentuées ou pas), des tirets et des espaces (pour gérer les prénoms ou noms composés) ;
- Le choix d’un genre est obligatoire
- La sélection d’un pays est obligatoire
