TP3 HTML : FEUILLES DE STYLE ET LANGAGE CSS

Lycée&Gustave&Eiffel&TS&–&ISN&
TP3&HTML&:&Feuilles&de&style&et&langage&CSS&Page&n°1/1&
!
ISN&–&Informatique&et&Sciences&du&Numérique&
TP3&HTML&:&FEUILLES&DE&STYLE&ET&LANGAGE&
CSS&
!
!
!
!
En#HTML5,#une#page#WEB#est#générée#à#l'aide#de#deux#fichiers.#Le#fichier#HTML#permet#de#spécifier#la#
structure# du# texte# (titres,# paragraphes,# etc.)# et# le# fichier# CSS# (feuille# de# style)# # spécifie( de( manière(
séparée(l'aspect(visuel((et#sonore)#d'une(page.##
!
1.&Ouvrir&les!pages!WEB!«!accueil_sans_css.html!»!et!«!Page2_sans_css.html!»!qui!se!trouvent!dans!le!
dossier!«!Fichiers!sans!CSS!».!!
!
!
Ces# pages# WEB# ne# respectent# pas# la# norme# HTML5# car# l'aspect# est# spécifié# dans# le# fichier# HTML# au#
moyen# d'attributs# placés# dans# les# balises.# Pour# remédier# à# ce# problème,# il# a# été# décidé# d'utiliser# une#
feuille#de#style#pour#gérer#l'aspect#des#pages#WEB.#
!
2.&Ouvrir& les! pages! WEB! «!Acceuil.html!»! et! «!Page2.html!»! qui! se! trouvent! dans! le! dossier! "Fichiers!
avec!CSS".!Noter!les!principales!différences!par!rapport!aux!pages!précédemment!ouvertes.!
3.& Créer,!sous!"Geany",!un!fichier!nommé!«!style.css!».!
4.& Lier,!cette!feuille!de!style!aux!fichiers!nommé!«!Acceuil.html!»!et!«!Page2.html!».!
5.& Etablir,! dans! le! fichier! CSS,! les! attributs! permettant! la! mise! en! forme! du! texte! (couleurs,! taille,!
police...)! afin! de! respecter! la! mise! en! forme! des! pages! «!accueil_sans_css.html!»! et!
«!Page2_sans_css.html!».!
6.& Etablir,!dans!le!fichier!CSS,!les!attributs!permettant!la!mise!en!forme!des!paragraphes!(couleur!de!
fond!d’écran,!alignement...)!afin!de!respecter!la!mise!en!forme!des!pages!«!accueil_sans_css.html!»!
et!«!Page2_sans_css.html!».!
7.& Placer,!à!l’aide!du!fichier!CSS,!une!image!en!fond!d’écran.!
8.& Créer,!dans!le!fichier!CSS,!une!classe!nommée!ISN!qui!permet!d’afficher!du!texte!en!italique!et!en!
rouge.!Appliquer!dans!les!fichiers!HTML,!cette!classe!à!chaque!acronyme!ISN.!
!
!
&
ISN(
!