TP séance 3 : Page Web (HTML + CSS)
Objectifs
Construction d'une page web :
• comprendre et utiliser un fichier CSS ;
• définir la structure d'une page web ;
Consignes et Pré-requis
Lire attentivement cet énoncé de TP en suivant les instructions. En cas de question, faire
appel à l'enseignant qui est là pour vous répondre, et surtout ne pas rester bloqué sur une
des tâches à réaliser. Essayer dans tous les cas de chercher sur internet la réponse à vos
questions.
CSS
Pour commencer voici quelques exercices pour prendre (ou reprendre) la main avec le
fichier CSS et leur syntaxe.
Une feuille de style consiste en une suite de déclarations de la forme :
sélecteur_1, sélecteur_2, ..., sélecteur_m {
propriété_1: valeur_1;
propriété_2: valeur_2;
…
propriété_n: valeur_n;
}
où sélecteur est souvent un simple élément HTML comme body ou h1, où propriété
est une propriété CSS permise pour cet élément et où valeur est une valeur permise pour
la propriété concernée.
Ces déinitions vont expliciter l'affichage de(s) élément(s) sélectionné(s). Noter les deux
points après le nom de la propriété et le point virgule entre chaque déclaration.
Chaque élément possède ses propres propriétés (par exemple, la propriété list-style
pour l'affichage des listes) mais quelques propriétés peuvent être utilisées avec tous les
éléments. Voyons celles qui vont nous servir dans ce TP :
• background-color : permet de spécifier une couleur pour l'arrière plan. Les valeurs
peuvent être soit un nom de couleur (mais il n'en existe qu'une dizaine de
prédéfinies) soit une valeur hexadécimale de la forme #xxxxxx où x est un chiffre
hexadécimal (le raccourci #xyz désigne la couleur #xxyyzz). Plusieurs moyens
s'offrent à vous pour connaître la valeur hexadécimale d'une couleur. Vous pouvez
trouver une ressource sur le web (comme la page
www.w3schools.com/css/css_colornames.asp).
• background-image : Permet de choisir une image pour l'arrière plan. Les valeurs
permises sont url(x) ou url('y'), avec x une url, et y un chemin local.
• background-position : Permet de déinir la position de l'image dans l'arrière plan
1
de l'élément sélectionné. Les valeurs permises sont top, center, right, top center,
center center, etc.
• color : Permet de définir une couleur pour l'élément sélectionné. Les valeurs
permises sont les mêmes que pour la propriété background-color
• font-style : Pour spécifier le style de police. Les valeurs possibles sont normal,
italic ou oblique.
• text-align : Permet de déinir l'alignement horizontal d'un texte. Les valeurs
possibles sont left, right, center ou justify (pour que les marges gauches et droites
soient régulières).
• margin-left, margin-right, margin-top, margin-bottom : Permet de définir un
espace entre l'élément sélectionné et l'élément qui l'encadre. Les valeurs sont des
nombres suivis d'une unité (par exemple cm pour le centimètre, px pour le pixel,
em pour l'unité liée à la taille de la police de l'élément, . . . ).
• font-family : Permet de changer de famille de polices, par exemple times, arial,
courier
A titre d’exemple télécharger le fichier style.css du site web du cours
(http://www.lirmm.fr/~cherubini/GLSE301/style.css). Si vous avez des doutes sur les
propriétés, cherchez vous même plus d’informations sur internet.
Exercice
Récupérer (sauvegarder) le fichier tp.html (déja utilisé dans la première séance du TP)
à l'adresse http://www.lirmm.fr/~cherubini/GLSE301/TP/TP1/tp.html et le sauvegarder
dans le sous-répertoire public_html.
Nous allons ensuite créer le fichier CSS qui sera associé à cette page. Vous pouvez éditer
le fichier CSS avec n'importe quel éditeur texte (kate, kwrite, ….)
Exercice 1 (Couleur de fond)
Créer un fichier style.css et définir une nouvelle couleur de fond (par exemple la
couleur #C8C8C8) pour la page que vous avez récupérée (tp.html).
Exercice 2 (Intégration du fichier CSS dans une page HTML)
Rajouter la ligne suivante dans l'entête de la page : <link
href="style.css" rel="stylesheet" type="text/css" />.
Télécharger le fichier http://www.lirmm.fr/~cherubini/GLSE301/index.html et regarder
comment intégrer le fichier css dans la page html. Vérifier que la couleur de fond est bien
appliquée et ensuite essayer d'autres couleurs de fond.
Exercice 3 (Un peu d'air)
Pour aérer un peu la lecture d'un document HTML, on met en général un espace
entre les bords de la fenêtre et le corps du document. Définir une marge gauche, haute et
droite pour le document de façon à ce qu'elle soit appliquée à tout le contenu de la page.
2
Exercice 4 (Liste de sélecteurs)
À l'aide d'une seule définition, spécifier une même couleur pour les éléments h1
et h2. Le fait de définir des propriétés pour plusieurs éléments en même temps n'empêche
pas de rajouter plus loin dans la feuille de style des définitions pour un élément particulier
de la liste. C'est toujours la derniere définition qui compte. Rajouter après une définition
pour que l'élément h1 soit de plus centré sur la page et modifier sa couleur.
