Examen programmation web TEST 1

ÉVALUATION EN programmation web TEST 1

EXAMEN HTML, EXAMEN CSS, EXAMEN JAVASCRIPT,

Exercice 1: HTML, CSS, JavaScript (9.5 pts)

1. Définir les termes suivants: HTML, CSS (0.5pt)

2. C'est quoi le DOM ? donne le DOM du code suivant : (0.5pt)

<!DOCTYPE html>
<html>
<head>
    <title>Mon Site Genius</title>
</head>
<body>
    <h1>Groupe Genius</h1>
    <p>Bienvenue chez le Groupe Genius ! En 2024 . </p>
    <a href="#">Lien vers le Site Genius ! </a>
</body>
</html>

2. Quelle est la différence entre une page Web statique et une page Web dynamique ? (1pt)

3. Écrire le Sélecteur CSS ciblant les elements suivants : << Les liens de classe menulink, enfants de li, eux-mêmes enfants de listes a puces dont l'attribut id est défini >> (1pt)

3. Présenter à l'aide d'un exemple les deux manières d'inclure du code JavaScript dans une page web. (1.5pt)

4. Donner le code HTML qui permet d'obtenir ce formulaire. (3pts)

a) Écrivez le code Css qui permet de sélectionner le champ input du nom (NB : dans ce cas présent le champ est dans une div ).

b) Css : Selectionner et Donnez une couleur rouge a tous les Label (Nom, description, téléphone, filière ).

c) A quoi sert L'attribut action et method dans la balise `form`.

d) Quel est le role de l'attribut `placeholder` et l'attribut `required`.

5. Dans une page HTML, l'élément `<html>` contient généralement deux éléments fils, quels sont-ils et à quoi servent-ils ? (1pt)

6. 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 : henzo237@pandacodeur.com. Écrivez le code HTML correspondant. (1pt)

Exercice 2: CSS (3 pts)

1. Proposer les règles de style CSS pour les mises en forme suivantes:
- Lorsque le site est affiché dans une fenêtre dont la largeur est d'au moins 500px, les textes des paragraphes sont alignés à droite; ceux des paragraphes qui suivent des titres de niveau 3 sont centrés, en gras et de taille 1.1em. (1.5pts)
- Les `<div>` flottent à gauche et occupent toute la largeur de leurs parents sur des écrans de largeur minimale 200px et sont invisibles sur des écrans de largeur inférieure à 700px. (1.5pts)

2. Soit le bout de Code suivant :

<section>
   <h1>Mon titre 1</h1>
   <article>
       <h2>Mon Titre 2</h2>
       <p>Premier paragraphe</p>
       <p class="maclasse">Deuxième paragraphe</p>
       <p>Troisième paragraphe</p>
       <p id="monid">Quatrième paragraphe</p>
   </article>
   <article>
       <h2 class="maclasse">Mon Titre 3</h2>
       <p id="superid" class="maclasse">Cinquième paragraphe</p>
       <p>Sixième paragraphe</p>
   </article>
</section>

a) Quel est le rôle de la balise `section` ?

b) Changer la couleur du texte de tous les paragraphes.

c) Changer la couleur de fond et ajouter une marges intérieure aux éléments de classe maclasse.

d) Ajouter une bordure en trait continu, une marge intérieure et une marge extérieure à l'élément d'identifiant monid.

Exercice 3: (6pts)

1. Quelle est la différence entre un élément `<span>` et un élément `<div>` ? (0.5pt)

2. Écrivez du code CSS qui permet de faire en sorte que tous les titres de second niveau (éléments `<h2>`) soient écrits en vert et en gras. (0.5pt)

3. Écrivez du code CSS qui permet de faire en sorte que le premier élément de toute liste `<ul>` ou `<ol>` soit toujours souligné. Quels sont les rôles des balises `<ul>` et `<ol>` ? (1pt)

4. Comment faire pour sélectionner les éléments HTML dans un code JavaScript en utilisant les attributs `name`, `id`, `class` ? Donnez des exemples pour chaque cas. (2pts)

5. Soit le tableau HTML suivant: