HEM TANGER A. U.

2021 – 2022

Examen Final
Informatique de Gestion Approfondie 1
Durée : 1H30mn

Notes et consignes : Dans tous les exercices qui suivent, vous avez à créer des fichiers html
ou Css.
Tous ses fichiers doivent être mis dans le dossier nommé VotreNumeroExamen.
Ce dossier sera remis à la fin de l’examen. N’oubliez pas d’enregistrer votre travail très
fréquemment.

Exercice 1 : 9 Pts
1. Créer le fichier Tableau.html contenant le tableau suivant avec une largeur de
80% de l’écran et une bordure de 2px de couleur rouge.

2. Les instructions CSS suivantes sont à définir dans la feuille de style

Tableau.css:
A. TABLEAU DES CHIFFRES est un titre de niveau 2 souligné de couleur
vert,
B. Les cellules du tableau sont par défaut centrées, écrites en Arial, taille 20 px
avec une couleur #5882FA et la bordure est de couleur rouge.
C. La cellule contenant "6" est écrite sur une taille 24 en rouge, le fond est de
couleur jaune et la bordure est de couleur verte ;
D. La cellule contenant "4" est écrite sur une taille 24 en vert, le fond est de
couleur (#44BEFA) et la bordure est de couleur jaune ;
E. La première ligne du tableau contenant "7" est écrite en 32 px avec une
couleur "#0B3B0B" et a pour fond la couleur "#F967C0".
3. Appliquer la feuille de style Tableau.css à la page Tableau.html pour visualiser
le résultat.

1/4
Exercice 2 : 6 Pts

1) Créer la page Liste.html pour afficher le menu horizontal suivant :

▪ Le lien My School renvoi vers le site de l’école HEM
▪ Le lien Result renvoi vers Tableau.html
▪ Le lien Design charge le fichier Tableau.css

Les instructions CSS suivantes doit être interne au fichier Liste.html.

▪ L’arrière-plan des liens doit être de couleur jaune
▪ La liste est sans puces
▪ La liste doit être affiché en horizontale
▪ Lors du survol d’un lien le texte devient rouge, de taille 24.

Exercice 3 : 5 Pts
Créer le fichier Divs.html contenant deux blocs(DIV ) côte-à-côte avec un espace
de séparation de 10 px.
Le bloc de gauche est couleur jaune et contenant le texte PARTIE GAUCHE
Le bloc de droite est de couleur purple et contenant le texte PARTIE DROITE
Le résultat final devra être comme suit.

2/4
 ANNEXE
L es principalespr opriétésdu CSS
Pour le texte
Propriétés Valeurs
color Nom de couleur(mots clefs prédéfinis). Exemple: color:white;
Code couleur en héxadécimal. Exemple :color:#FFD700;
font-size Taille de la police:
Notation absolue (en pixels). Exemple: font- size: 12px;
Notation relative (en pourcentage). Exemple : font-size: 120%;
font-family Nom de la police.
Exemple: font-family: times new roman, arial, sans-serif;
font-style Définit le style du texte.
Exemple 1:font-style: italic;
Exemple 2:font-style: oblique;
font-weight Texte en gras. Exemple : font-weight: bold;
text-align Aligne le texte.
Valeurs :left pour aligner à gauche, center pour centrer, justify pour justifier, right pour
aligner à droite.
Les marges
Propriétés Valeurs
margin-top Permet de spécifier en pixels la marge extérieure haute d’un bloc.
margin-right Permet de spécifier en pixels la marge extérieure droite d’un bloc.
margin-bottom Spécifie en pixels la marge extérieure basse d’un bloc.
margin-left Spécifie en pixels la marge extérieure gauche d’un bloc.
margin Spécifie les 4 marges extérieures d’un bloc dans l’ordre suivant: haute, droite, bas et
gauche. Exemple: p{ margin: 20px 12px 20px 12px; }
padding-top Définit, en pixels, la marge intérieure haute d’un bloc.
padding-right Définit, en pixels, la marge intérieure droite d’un bloc.
padding-bottom Définit, en pixels, la marge intérieure basse d’un bloc.
padding-left Définit, en pixels, la marge intérieure gauche d’un bloc.
Définit les 4 marges intérieures d’un bloc dans l’ordre suivant: haut, droit, bas et
padding gauche. Exemple: padding: 15px 10px 15px 10px;
Les fonds d'écran
Propriétés Valeurs
Nom de couleur(mots clefs prédéfinis). Exemple: color:red;
background-color Code couleur en héxadécimal. Exemple :color:#FFD700;
Affiche une image en arrière-plan d’un objet.
background- La syntaxe:background-image: url("AdresseDeL'image")
image Exemple: table { background-image: url(Images/Aubergemin.jpg); }
Définit le mode de répétition de l'image affichée en arrière plan. Valeurs:
no-repeat : l'image n'est pas répétée.
background- repeat-x : l'image est répétée uniquement sur la première ligne, horizontalement. repeat-
repeat y : l'image est répétée uniquement sur la première colonne, verticalement.
repeat : l'image est répétée en mosaïque (par défaut).

Permet de « fixer » l’image affichée en arrière plan. Valeurs disponibles :

background- fixed : l'image reste fixe ;
attachment scroll : l'image défile avec le texte (par défaut).

3/4
 Définit la position de l'affichage de l'image de l'arrière-plan. Valeurs :
• numériques : 1px 1px. La première valeur définit la position sur l'axe X et la
seconde définit la position sur l'axe Y.
background- • pourcentage : %,%. La première valeur définit la position sur l'axe X et la
position seconde définit laa position sur l'axe Y.
• valeurs prédéfinies: top, left, center, right, bottom. Dans ce cas on ne peut
affecter qu'une ou deux, à la fois, de ces valeurs.
Positionnement
Propriétés Valeurs
Définit le mode de positionnement d’un élément dans la page.Valeurs :
• Relative, la position de l’élément sera calculée depuis le bloc précédent
position
• Absolute, la position sera calculée depuis les bordures de la fenêtre.
top Définit la position d’un élément en pixels depuis le haut.
Right Définit la position d’un élément en pixels depuis la droite.
bottom Définit la position d’un élément en pixels depuis le bas.
left Définit la position d’un élément en pixels depuis la gauche.
Affiche une barre de défilement. Valeurs:
auto - barre de défilement affichée si nécessaire
overflow
scroll - barre de défilement affichée, grisée si le contenu ne dépasse pas le bloc
visible - le contenu est entièrement affiché, le bloc quant à lui est étiré.
Flottants
Propriétés Valeurs
La propriété css float permet de spécifier si l'affichage des éléments suivant sont
adjacents. On utilise généralement cette propriété pour faire des colonnes ou pour faire
flotter un élément autour du texte. On dit, dans ce dernier cas, qu'on fait un
« habillage ». Valeurs:
• none, l'élément ne flotte pas, remet le type à sa valeur initiale.
float • left, affichage de l'élément à droite, transforme l'élément en type block
(display:block).
• right, affichage de l'élément à gauche, transforme l'élément en type block
(display:block).
Stoppe l'effet d'un float. Valeurs :
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
clear
• both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après
un float: right.
Autres propriétés CSS
Propriétés Valeurs
Modifie le type naturel de la balise. Valeurs:
display • Block, pour convertir une balise de type « inline » en balise de type « block »
• Inline, pour convertir une balise de type « block » en balise de type « inline ».
hover Elément survolé
Définit l’aspect de la puce sous forme graphique (glyphes) ou numérique pour les
listes numérotées. Quelques valeurs :
list-style-type • none : les puces ne sont pas affichées ;
• disc, square, circle : pour les formats graphiques (glyphes)
• decimal, lower-roman, upper-roman, etc. pour les systèmes de numérotation.

4/4