Ecole Superieur de Technologie Essaouira
Université Cadi Ayyad – Les systèmes de
gestion de contenu
Licence Management Finance & Management
Tourisme
HTML Cascading Style Sheets
Author:
Pr. GRISSETTE HANANE
December 3, 2024
1 TP2: HTML & Cascading Style Sheets
Les Cascading Style Sheets (CSS), ou feuilles de style en cascade, sont
utilisées pour définir la mise en page d’une page web.
Avec CSS, vous pouvez contrôler : la couleur, la police et la taille du texte,
l’espacement entre les éléments, la position et la disposition des éléments, les
images de fond ou les couleurs d’arrière-plan à utiliser,
2 HTML & CSS: Part 1
Instructions aux étudiants pour insérer du code
HTML
Dans votre projet, suivez l’exemple ci-dessous pour structurer et insérer votre
code HTML. Voici un extrait de code à étudier et à reproduire avec vos
propres ajustements:
1 <!DOCTYPE html >
2 <html >
3 <head >
4 <title > Listings Style Test </title >
5 <meta charset= " UTF-8 " >
6 <style >
7 /* CSS Test */
8 * {
9 padding: 0;
10 border: 0;
11 margin: 0;
12 }
13 </style >
14 <link rel= " stylesheet " href= " css / style.css " / >
15 </head >
16 <head er > hey </head er >
17 <article > this is a article </article >
18 <body >
19 < ! - - Paragraphs are fine -- >
20 <div id= " box " >
21 <p > Hello World </p >
1
22 <p > Hello World </p >
23 <p id= " test " > Hello World </p >
24 <p > </p >
25 </div >
26 <div > Test </div >
27 < ! - - HTML script is not consistent -- >
28
29 </body >
30 </html >
1. Analysez la structure de ce code. Identifiez les balises principales
utilisées, telles que <html>, <head>, <body>, <header>, et <article>.
2. Créez une page web personnelle simple, intitulée personal.html, con-
tenant au moins les éléments suivants:
(a) Votre nom en haut de la page, présenté sous forme d’en-tête
(h1).
(b) Quelques paragraphes sur vous-même. Assurez-vous d’inclure
le mot ”Eastern” au moins deux fois dans vos paragraphes (cela
sera nécessaire pour le prochain exercice de cette mission).
(c) Une liste de loisirs ou centres d’intérêt, affichée sous forme
de liste non ordonnée HTML (ul).
(d) Ajoutez des **liens hypertextes** vers des sites web pertinents
pour au moins deux de vos loisirs ou centres d’intérêt.
3. Ajoutez des styles CSS basiques à l’intérieur de la balise <style> ou
dans un fichier externe lié via <link>.
4. Utilisez la balise <div> pour créer des conteneurs et organisez vos para-
graphes à l’intérieur.
Le HTML sémantique correspond aux balises qui ne spécifient pas di-
rectement l’apparence, comme les balises <i> et <b>. Nous ajouterons des
styles avec du CSS dans la prochaine étape.
2
Figure 1: Exemple de cration de page personnel.html
3 Exercice 2: Ajout de CSS
- Ajoutez un fichier CSS:
Créez un fichier CSS nommé personal.css et référencez-le dans votre fichier
HTML. Voici les Modifications et ajouts à réaliser :
1. Ajoutez une photo : Ajoutez une photo de vous-même et positionnez-
la sur le côté gauche de la page avec CSS. Ajoutez une marge, un espace-
ment interne (padding) et/ou une bordure pour un rendu esthétique.
2. Changez la police en sans-serif : Définissez la police globale en
sans-serif via l’élément <body>, ce qui affectera tous les éléments con-
tenus. Alternativement, utilisez le sélecteur universel (*), mais notez
qu’il peut ralentir le rendu. Exemple :
* {
color: red;
}
3. Centre le titre avec votre nom : Appliquez une règle CSS pour
centrer le titre contenant votre nom.
3
4. Ajoutez des styles :hover aux liens : Configurez vos liens avec la
pseudo-classe :hover (a:hover) pour que seuls les liens soient affectés.
Vous pouvez, par exemple, changer la couleur au survol.
5. Ajoutez des balises <span> : Utilisez les balises <span> et configurez
votre CSS pour que chaque occurrence du mot "Eastern" soit affichée
en vert et en gras.
Figure 2: Exemple de cration de page personnel.html
4 Exercice 3: Ajout de Schedule
Ajoutez cette section à votre page HTML sous la forme “Mon emploi du
temps pour ma formation en Management Finance”. Dans un tableau à
rayures alternées (zébré), chaque ligne impaire a une couleur différente. Dans
cet exercice, vous allez créer un tableau zébré simple avec des données con-
cernant ma Licence.
• Le tableau “Mon emploi du temps” correspond aux jours du se-
maine avec une citation des cours et des salles en bas du tableau, affiché
dans la police par défaut serif, tandis que le tableau lui-même doit être
4
en sans-serif. Vous devrez utiliser la propriété border-collapse sur
le tableau, sinon toutes vos cellules auront des bordures doubles.
• La rangée d’en-tête du tableau doit avoir un texte blanc sur un fond
noir. Pour le fond gris clair, utilisez la couleur #EEE.
• Une fine bordure blanche doit séparer la cellule contenant les “jours”
de celle contenant les “cours” dans la rangée d’en-tête.
• Les rangées impaires (autres que l’en-tête noire) doivent avoir un fond
gris clair, tandis que les rangées paires doivent avoir un fond blanc.
• Toutes les cellules du tableau (sauf celles de l’en-tête) doivent avoir une
bordure noire solide d’une largeur de 1 pixel.
• La citation des cours au bas du tableau doit être affichée en italique
(mais sans utiliser la balise <i>, car cela ne respecte pas les principes
du HTML sémantique). Dans un contexte réel, si vous avez besoin
de créer un tableau zébré, le sélecteur :nth-child() serait un choix
pertinent.
Figure 3: Exemple de Table Mon Emploi de Temps
1 . odd-row {
2 back ground -color : # EEE; /* Light gray */
3 }
4
5 . even-row {
6 back ground -color : white;
7 }
5
8
9 . citation {
10 font-style: italic; /* Semantic italics
*/
11 text-align: center;
12 margin-top: 20 px;
13 font-family: serif; /* Default serif font
*/
14 }
5 ESTE Connection
Cet exercice consiste à créer une page de connexion pour notre école, l’ESTE.
La page web a pour but de connecter les membres de l’ESTE entre eux via
des profils personnalisés. La page doit comporter une photo, des informations
sur la personne, ainsi qu’un ensemble de mises à jour de statut. À droite,
à l’aide des éléments de formulaire, l’utilisateur pourra entrer de nouvelles
mises à jour qui seront ajoutées aux mises à jour de statut affichées au centre
de la page.
Vous pouvez utiliser vos propres informations, mais ne passez pas trop
de temps à y réfléchir. L’objectif est de travailler sur la mise en page de la
page web, et non sur son contenu. Bien que vous ne soyez pas tenu à une
implémentation parfaite en termes de pixels, vous devez inclure les éléments
suivants :
1. La bannière ”Stanford Connection” qui s’étend sur le haut des
deux premières colonnes (mais pas sur la colonne ”Publier des mises à
jour”).
• Comme montré dans la capture d’écran, la bannière doit contenir
le logo de Stanford, qui est fourni avec les fichiers de l’exercice.
• Notez que le texte ”Stanford Connection” dans l’en-tête doit rester
en texte, et non sous forme d’image graphique. Vous ne devez pas
créer de nouveaux fichiers graphiques. La couleur du logo est
#9A0000.
2. Colonne de gauche : Cette colonne doit inclure une photo suivie des
informations sur l’utilisateur.
6
Figure 4: ESTE COnnection
• En dessous de la photo, il y a deux sections : une pour À propos
de moi et une pour Amis.
• Les titres de la section À propos de moi, tels que Anniversaire,
doivent être en gras, tandis que les valeurs réelles comme ”8 décembre
2001” ne doivent pas l’être. Les noms des amis doivent être en
gras.
3. Sections ”À propos de moi”, ”Amis”, ”Mises à jour de statut”,
et ”Publier des mises à jour” : Chaque section doit avoir un fond
coloré – la couleur de fond dans l’exemple est #CC9191. Elles doivent
également avoir une bordure noire de 2 pixels en haut et en bas, mais
pas sur les côtés.
• Les mises à jour de statut doivent être séparées par de fines lignes,
comme montré dans l’exemple.
4. Colonne de droite : Cette colonne doit inclure un titre Publier des
mises à jour, une zone de texte pour entrer une mise à jour, ainsi qu’un
bouton de soumission.
• Laissez un espace raisonnable entre les colonnes.
5. Comme nous n’avons pas encore abordé l’exécution de programmes
avec les pages web, le bouton Soumettre une nouvelle mise à jour ne
fera en réalité rien pour le moment.
