Département Technologies de l’Informatique (TI)

Examen
Matière : Programmation Web 1 Classe (s) : TI1
Enseignant (s) : Durée : 01h30

Date : Janvier 2021 Documents : non autorisés

Nbre pages : 6 pages Calculatrice : non autorisée

Exercice 1 (5 points):
Reprendre sur la feuille de réponse le numéro de la question avec la (les) bonne(s) réponse(s)
qui lui correspond(ent).
1. Que veut dire le mot HTML?
a. Home Tool Markup Language
b. Hyperlinks and Text Markup Language
c. Hyper Text Markup Language
d. Hyper Text machine Language

2. La majorité des informations d'une page Web se trouve dans :

a. La balise HEAD
b. La balise TITLE
c. La balise BODY
d. La balise des commentaires

3. Dans l’exemple de balisage suivant, que désigne href ?

<a href="http://www.example.com">Ceci est un lien.</a>
a. balise
b. attribut
c. élément
d. valeur

4. Dans le balisage suivant, comment s’appelle la construction #slogan ?

p {color: brown;}
#slogan {
font-size:20px;
color: green;
font-style: italic;
}

a. déclaration
1|Page
 Département Technologies de l’Informatique (TI)

b. valeur
c. propriété
d. sélectur d’ID

5. Vous souhaitez utiliser un fichier image appelé green.png dans votre page Web. Le fichier réside sur
un serveur distant à l’adresse exemple.com dans un dossier d’images. Quelle est la syntaxe correcte ?

a. <img src="http://www.exemple.com/images/green.png" alt="Ballon vert" />

b. <img src="http://www.exemple.com/green.png" alt="Ballon vert" />
c. <img src="http://www.exemple.com/images/blue.png" alt="Ballon bleu" />
d. <img src="/images/green.png" alt="Ballon vert" />

6. Quel est le code HTML permettant de créer un lien ?

a. <a>https://iset.uvt.tn/</a>
b. <a href="https://iset.uvt.tn/">Site du UVT</a>
c. <a name="https://iset.uvt.tn/>Site du UVT</a>
d. <a url="https://iset.uvt.tn/">Site du UVT</a>

7. Quelle balise utiliser pour regrouper les champs d'un formulaire en les entourant d'une bordure ?
a. <fieldset>
b. <border>
c. <groupby>
d. <form>

8. Quelle est la syntaxe pour déclarer l'encodage des caractères du document en UTF-8 ?
a. <meta encoding="text/html; charset=utf-8">
b. <meta charset="text/html; UTF-8">
c. <meta charset="utf-8">
d. <link href= ="utf-8">

9. Parmi les éléments suivants, lequel n’est pas considéré comme un balisage sémantique ?
a. section
b. aside
c. header
d. body

10. Vous ajoutez une liste à puces dans un document HTML. Vous souhaitez utiliser le carré comme
symbole de marquage pour toutes les entrées de la liste. Quel est le code de balisage le plus efficace
et le mieux approprié ?
a. <ul type="square">
b. <li type="square">item</i>
c. <lu type="square">
d. <ul marker="square">

2|Page
 Département Technologies de l’Informatique (TI)

Exercice 2 (15 points) :

On souhaite créer la page d’accueil d’un site web représentée comme suit :

Travail demandé :
1. Commencer par créer le code HTML « index.html », permettant de créer le contenu de cette page
en utilisant les balises sémantiques HTML5, sachant que cette page est organisée comme suit :

3|Page
 Département Technologies de l’Informatique (TI)

Indice HTML class id

 Un premier titre de niveau 1

1  Un deuxième titre de niveau 3
Un élément
<header> qui
contiendra :
 Un élément liste contenant 4 liens comme
2 Un élément
indiqué dans la figure ci-dessus.
<nav> qui contiendra :

Le conteneur est formé par : conteneur

3  Un titre de niveau 2
Un conteneur
 Un élément <section> formé par 3 éléments
<div>
<article>
 Le premier article contient une image
« info.jpg » se trouvant dans le même dossier
que la page index.html
 Le second article contient :
para
o 4 paragraphes
recherche
o Un champ de recherche
o Un bouton
 Le troisième article est formé par :
titre
- Un titre de niveau 3
- 2 images monimage

2. Afin d’améliorer la présentation de cette page, on vous demande de créer une page de style
CSS « index.css » formée par les règles et les propriétés suivantes :

Sélecteurs Propriétés
Body  Largeur : 80%;
 Une couleur pour l’arrière-plan: grey
header  Une couleur pour l’arrière-plan : #A9A9A9.
 Une marge externe en haut de 15px.
 Une marge externe en bas de 15 px.
 Une marge interne de 10px.
 La couleur du premier titre de l’élément header est #811453
 La couleur du deuxième titre de l’élément header est white
 Les deux titres de l’élément header sont alignés à gauche
 Le style de la bordure est outset et sa couleur est grey.

4|Page
 Département Technologies de l’Informatique (TI)

nav  Affichage en grille

 Division des colonnes : 2 fractions, 6 fractions et 2 fractions
 Espace entre les éléments de la grille 10px.
 Occupe verticalement 120px de la page

nav  Alignement à gauche droite

Les li de ul de nav
 Couleur d’arrière-plan : #778899
 Marge interne de 15px
 Marge extérieure en bas de 5px
 Le style de style de bordure outset et de couleur #778899
 Le style du texte est cursive.
 Affichage en ligne
 Une bordure en haut et en bas de taille 1px, style solid et
couleur black.
 Marge interne de 4px
 Couleur d’arrière-plan #bbb;

Les éléments a  Les liens ne sont pas soulignés

Quand la souris passe par-
dessus un élément a
(active)hover
#rconteneur
 Couleur noir
 La couleur de l’arrière-plan devient #778899.
 La bordure en bas devient 0
 Couleur d’arrire-plan #A9A9A9;
 Le style de la bordure est outset et sa couleur est
#A9A9A9;

section  Couleur d’arrière-plan en blanc

Le titre h2 du conteneur
et
.titre
L’élément section
L’image de l’élément section
 Marge supérieure de 10px
 Couleur #811453;
 Alignement au centre
 Affichage en grille
 Division des colonnes : 2 fractions 6 fractions et 2 fractions
 Espace entre les éléments de la grille de 10px
 Marge int ou ext à gauche de 10px
 Marge int ou ext à droite de 5px
 Taille verticale de la zone de 300px
 Sa hauteur est de 300px;

L’élément article  background-color: #eee;

5|Page
 Département Technologies de l’Informatique (TI)

 margin: 10px;
 padding: 15px 10px;
Le champ input du second  Une bordure de style solid, de taille 1px et de couleur
article #ACACAC;
 Une bordure inclinée de 10px ;
Les 2 images du troisième  Une largeur de 60px ;
article

3. Comment faire pour appliquer le style « index.css » à la page html « index.html » ?

6|Page