UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
TP02 : HTML-CSS
EXERCICE 1 : MISE EN FORME DE TEXTE
Nous souhaitons créer une page de présentation de Bootstrap. A terme, celle-ci doit
ressembler à l’image en annexe 1. Le contenu est donné dans les tableaux qui suivent.
1. Créer un fichier HTML nommé presentation-bootstrap.html destiné à accueillir le
contenu. Elle doit contenir un sommaire, un texte introductif et trois sections.
Appliquer au document HTML les règles suivantes :
Le titre de la page « Bootstrap (framework) » Titre 1
Le titre du sommaire et des sections Titre 2
Le titre des sous-sections de la section « Fonctionnalités » Titre 3
Le sommaire Liste ordonnée pour les sections et
liste non ordonnée pour la sous-
section « Fonctionnalités »
Encadré par une ligne au-dessus et
une ligne en dessous.
Le sommaire et les sections (titre et texte) Les placer dans un élément div
Les sections Insérer des paragraphes
2. Créer un fichier CSS nommé presentation-bootstrap.css destiné à accueillir les styles.
a. Insérer dans le fichier HTML la référence vers le fichier CSS en utilisant la balise
link.
b. Appliquer les styles indiqués dans le tableau ci-dessous.
Pour toutes les occurrences du mot Texte en gras et italique
« Bootstrap » Texte de couleur verte (#20B2AA)
Pour les cadres div qui encadrent le Largeur du cadre : 75% de la largeur de la page
sommaire et les sections Texte justifié
Cadre centré avec une marge extérieure de 10px de
chaque coté
Marge intérieure de 10px
Bordure de 3px et de couleur grise (#AAA)
Pour le titre de la page « Bootstrap Texte aligné au centre
(framework) »
Pour tous les titres (h1, h2 et h3) Bordure de 2px et de couleur grise (#AAA)
Fond de couleur verte (#008888)
Texte de couleur blanche (#FFFFFF)
Pour la liste ordonnée du sommaire Numérotation romaine (I, II, III …)
Pour la liste non ordonnée du sommaire Puces en carré rempli
1
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
EXERCICE 2 : LES LIENS HYPERTEXTES
Reprenez le fichier HTML créé dans l’exercice précédent. Nous allons maintenant créer des
liens hypertextes externes et internes. Les liens externes permettront d’accéder à des
ressources externes à la page. Les liens internes permettront de naviguer dans la même page
entre le sommaire et les sections.
1. A la fin de la page(body), tracer une ligne horizontale.
2. Créer une nouvelle section, avec l’élément aside, destinée à contenir les liens externes.
Celle-ci n’a pas de titre mais doit être mise en forme comme les sections précédentes.
3. Insérer dans la section des liens pour les URL suivantes et tester le résultat :
a. https://www.pierre-giraud.com/
b. ftp://ftp.foo.com/home/foo
c. mailto:andiaye@zig.univ.sn
4. Créer des liens internes (ancre) des éléments du sommaire vers les différentes
sections. Pour cela, suivez les étapes suivantes :
a. Insérer un attribut id avec une valeur de votre choix dans chaque titre de
section et de sous-section pour celles qui en ont et dans l’élément div qui
entoure la section pour celles qui n’en ont pas.
Exemple : <h1 id="histo">
b. Revenir à sommaire. Transformer chaque élément du sommaire en un lien
conduisant à la section ou sous-section correspondante.
Exemple : <a href="#histo">Histoire</a>
EXERCICE 3 : TABLEAUX
1. Réaliser le tableau ci-dessous :
Celui-ci doit être centré dans la page et occuper 80% de la largeur de la fenêtre du
navigateur.
2
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
Largeur des bordures : 10 pixels ;
Détachement du texte par rapport aux bords : 5 pixels.
La première colonne doit faire 20% de la largeur du tableau, les 2 autres se partageant
le reste de la largeur.
Dans les 2 premières lignes d'en-tête et dans la première colonne, le texte doit être en
gras et souligné ; dans les autres cellules, il doit être en style normal et justifié à gauche.
Réaliser l'alignement du texte "xxxxx" au haut de la cellule, et l'alignement du texte
"yyyyy" au bas de la cellule.
Définir les couleurs de fond.
Placer une légende en haut du tableau.
2. Réaliser le tableau ci-dessous :
Vous utiliserez les éléments thead, tbody et tfoot pour
définir la tête, le corps et le pied du tableau.
Définir les styles CSS qui permettent d’obtenir
l’affichage des couleurs des lignes tel que vous le voyez
sur le schéma.
o Les lignes situées dans la tête et le pied du
tableau ont un fond de couleur verte.
o Les lignes paires du corps du tableau ont un
fond de couleur grise claire et les lignes impaires
du corps ont un fond de couleur grise foncée.
EXERCICE 4 : MEDIAS (IMAGES, AUDIOS, VIDEOS)
Créer un tableau HTML de deux lignes et deux colonnes ayant les contenus suivants :
Une image (dans la cellule de la première ligne et la première colonne) : lorsqu’on
clique sur l’image, le navigateur affiche une nouvelle page dans laquelle la même
image est affichée en plus grand ;
Un son (dans la cellule de la deuxième ligne et la première colonne) ;
Une vidéo (dans la cellule occupant la première et la deuxième ligne de la deuxième
colonne.
EXERCICE 5 : FORMULAIRE D’INSCRIPTION
3
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
L'objectif de cet exercice est de créer un formulaire d'inscription qui comporte les champs :
nom, prénom, sexe, langues, email, login, mot de passe (à deux reprises), université, photo et
un bouton d'envoi. Le formulaire doit ressembler à l’image en annexe 3.
Etape 1 : Code HTML
Proposer un code HTML qui permet d'afficher le formulaire. Vous ne vous occuperez
pas de la mise en forme à cette étape.
Etape 2 : Divisions
Entourer chaque élément label et input du formulaire avec un élément div.
Affecter la classe div-label aux div entourant les labels et div-input aux div entourant
les champs de saisie.
Etape 3 : Mise en forme des divisions
Les div entourant les labels doivent avoir les propriétés suivantes :
Mode d'affichage (propriété display) inline-block ;
Largeur de 230 pixels ;
Marge intérieure de 10 pixels.
Les div entourant les champs de saisie doivent avoir les propriétés suivantes :
Mode d'affichage (propriété display) inline-block ;
Largeur de 200 pixels ;
Marge intérieure de 6 pixels.
La div entourant le bouton d'envoi doit avoir les propriétés suivantes :
Mode d'affichage (propriété display) inline-block ;
Marge extérieure à gauche de 260 pixels ;
Marge extérieure en haut de 20 pixels.
Etape 4 : Mise en forme des labels et des champs de saisie et du bouton d'envoi
Les labels doivent respecter les propriétés suivantes :
Largeur de 200 pixels ;
Police : verdana, arial, sans-serif ;
Taille des caractères : 10 pixels ;
Marge intérieur : 10 pixels ;
Couleur de la police : orange (#EE6600).
Les champs de saisie doivent respecter les propriétés suivantes :
Aucun encadrement (propriété ouline) ;
Bordure d'épaisseur de 1 pixel et de couleur grise (#AAAAAA) ;
Marge intérieure de 10 pixels ;
Coins arrondis de 4 pixels (propriété border-radius) ;
Police : verdana, arial, sans-serif;
Fond gris lorsque le curseur est placé dessus (pseudo-classe :focus).
4
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
Le bouton d'envoi doit respecter les propriétés suivantes :
Couleur de fond : #EE6600 ;
Couleur du texte : #FFFFFF ;
Marge intérieure de 6 pixels en haut et en bas et 20 pixels à gauche et à droite ;
Pas de bordure ;
Marge extérieure de 10 pixels ;
Largeur de 160 pixels.
Etape 6 : Cadre extérieur
Ajouter un cadre div qui entoure le formulaire. Il doit avoir les propriétés suivantes :
Pas de marge extérieure ;
Marge intérieure de 10 pixels ;
Fond dégradé du gris (#DDDDDD) au blanc (#FFFFFF) en allant du haut vers le bas
(propriété lineargradient(to bottom,couleur-1,couleur-2) ).
Etape 7 : Liste déroulante
Ajouter un label (« UFR ») et une liste déroulante (éléments select et option)
permettant de choisir une UFR (« Sciences et Technologies », « Sciences
Economiques et Sociales », « Lettres Arts et Sciences Humaines », « Sciences de la
Santé »).
Appliquer les mêmes styles que celles qui ont été ajoutés au label et aux inputs
précédents.
Etape 7 : Fichier
Ajouter un label (« Photo d’identité ») et un champ de saisie de fichier (éléments
input avec la valeur file pour l’attribut type) permettant de sélectionner un fichier
sans l’ordinateur de l’utilisateur.
Appliquer les mêmes styles que celles qui ont été ajoutés au label et aux inputs
précédents.
5
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
ANNEXES
ANNEXE 1 -EXERCICE 1 : CONTENUS DE LA PAGE
Sommaire (élément nav)
I. Historique
II. Généralités
III. Fonctionnalités
Fonctionnement
Standardisation
Javascript
Introduction (élément header)
Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation
et interactions avec la page dans le navigateur, etc.) de sites et d'applications web. C'est
un ensemble qui contient des codes HTML et CSS , des formulaires, boutons, outils de
navigation et autres éléments interactifs, ainsi que des extensions JavaScripten option.
C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement
GitHub.
Historique (élément section)
Avant l'arrivée de Bootstrap, plusieurs bibliothèques existaient, ce qui menait à des
incohérences et à un coût de maintenance élevé.
Cette plate-forme a été conçue par deux développeurs faisant partie de la mouvance de
développeurs qui gravitent autour de Twitter, Mark Otto et Jacob Thornton, et avait le
nom de Twitter Blueprint en 20102.
Le premier déploiement à échelle réelle eut lieu lors de la première hackweek organisée
par Twitter.
En août 2011, Twitter place Bootstrap sous licence open source. En février 2012,
Bootstrap est le projet le plus populaire sur GitHub
Généralités (élément section)
Bootstrap est compatible avec les dernières versions des navigateurs majeurs, mais peut
fonctionner de manière dégradée sur des navigateurs plus anciens.
6
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
Depuis la version 2, le framework adopte la conception de sites web adaptatifs,
permettant aux projets utilisant Bootstrap de s'adapter dynamiquement au format des
supports depuis lesquels ils sont accédés (PC, tablette, smartphone).
Fonctionnalités (élément section)
Fonctionnement
La modularité de Bootstrap consiste en une série de feuilles de styles LESS (à partir de
la version 4 SASS) qui implémentent différents composants du toolkit6. Une feuille de
style principale ( Bootstrap.less) englobe les feuilles de style des composants. Les
développeurs peuvent alors sélectionner les composants dont ils ont besoin en modifiant
cette feuille principale. L'utilisation de LESS permet la manipulation de variables, de
fonctions, d'opérateurs, sélecteurs6…
Depuis la version 2, Bootstrap dispose d'une option supplémentaire de « personnalisation
».
Le système de grille et le style adaptatif sont standardisés sur une grille de 940 pixels de
large, que les développeurs peuvent adapter. Ces définitions sont déclinées en quatre
variations qui peuvent être utilisées dans différents formats et supports : téléphones
(portrait et paysage), tablette et PC (haute et basse résolution). Ces déclinaisons adaptent
automatiquement l'affichage de la page3.
Standardisation
Bootstrap fournit une feuille de style CSS qui contient des définitions de base pour tous
les composants HTML, ce qui permet de disposer d'une apparence uniforme pour les
textes, tableaux et les éléments de formulaires.
Le framework fournit également nombre d'éléments graphiques au format standardisé :
boutons, libellés, icônes, miniatures, barres de progression…
Javascript
Bootstrap fournit plusieurs composants sous forme de plugins utilisant la bibliothèque
jQuery. Ces composants permettent l'addition de nouvelles fonctionnalités au niveau de
l'interface (tooltip, carrousels…) mais aussi d'améliorer le fonctionnement de composants
existants (auto-complétion…).
D'autres plugins permettent à Bootstrap de s'intégrer à des frameworks tiers comme Dojo
Toolkit (Dojo Bootstrap) et AngularJS (UI Bootstrap) ou AngularStrap.
7
UFR Sciences et Technologies
Département Informatique Programmation Web
Licence 3 Informatique 2022 - 2023
ANNEXE 2 - EXERCICE 1 : APERÇU DE LA PAGE
ANNEXE 3 - EXERCICE 5 : APERÇU DU FORMULAIRE
