Classe de 2nde ICN

Apprendre à coder en HTML - CSS

Table des matières

1. Introduction......................................................................................................................................4
2. Les bases en HTML et CSS..............................................................................................................4
2.1. Les bases du HTML..................................................................................................................4
2.1.1. Éléments, balises et attributs.............................................................................................4
2.1.2. Structure de base d’une page en HTML5.........................................................................6
2.1.3. Afficher un document en HTML5 dans le navigateur......................................................7
2.1.4. Bonnes pratiques, règles et commentaires........................................................................7
2.1.5. Les éléments Heading, Paragraph et Break.....................................................................10
2.1.6. Les éléments Strong, Emphasis et Mark.........................................................................11
2.1.7. Listes ordonnées et non-ordonnées.................................................................................12
2.1.8. Listes de définitions........................................................................................................14
2.1.9. Listes imbriquées............................................................................................................14
2.1.10. Liens internes et liens externes.....................................................................................15
2.1.11. Les autres types courants de liens.................................................................................18
2.1.12. Validation et compatibilité entre navigateurs................................................................20
2.2. Les bases du CSS....................................................................................................................20
2.2.1. Sélecteurs, propriétés et valeurs......................................................................................20
2.2.2. Où écrire le CSS ?...........................................................................................................21
2.2.3. Les commentaires en CSS...............................................................................................23
2.2.4. Sélecteurs simples et limitations.....................................................................................23
2.2.5. Les éléments div et span.................................................................................................25
2.2.6. Les éléments de type block et inline...............................................................................26
2.2.7. Les sélecteurs avancés.....................................................................................................27
2.2.8. La notion d’héritage........................................................................................................27
3. Formater du Texte & Positionner des Éléments.............................................................................28
3.1. Les Propriétés de Type « Font- »............................................................................................28
3.1.1. La propriété font-size......................................................................................................28
3.1.2. La propriété font-style.....................................................................................................29
3.1.3. La propriété font-weight.................................................................................................30
3.1.4. La propriété line-height...................................................................................................31
3.1.5. La propriété font-family..................................................................................................31
3.1.6. Les « web safe fonts ».....................................................................................................32
3.1.7. La propriété color............................................................................................................32
3.1.8. L’opacité d’un texte.........................................................................................................34
3.2. Les Propriétés de Type « Text- »............................................................................................35
3.2.1. L’alignement d’un texte..................................................................................................35
3.2.2. La propriété text-decoration............................................................................................36
3.2.3. La propriété text-indent...................................................................................................36
3.2.4. La propriété text-transform.............................................................................................37
3.2.5. Les propriétés letter-spacing et word-spacing.................................................................37

1-html_css.odt 1
 Classe de 2nde ICN

3.2.6. Les ombres des textes.....................................................................................................38

3.3. Le Modèle des Boîtes.............................................................................................................38
3.3.1. Hauteur et largeur d’un élément......................................................................................39
3.3.2. Les bordures et les bordures arrondies............................................................................40
3.3.3. Les marges intérieures.....................................................................................................41
3.3.4. Les marges extérieures....................................................................................................42
3.3.5. Les ombres des boîtes.....................................................................................................43
3.3.6. Faire flotter un élément...................................................................................................44
3.3.7. La propriété display........................................................................................................46
3.3.8. La propriété position.......................................................................................................47
3.3.9. Le z-index.......................................................................................................................48
3.3.10. Notations long-hand et short-hand................................................................................49
4. Fonctionnalités Avancées...............................................................................................................50
4.1. Gestion du Background..........................................................................................................50
4.1.1. Ajouter de la couleur ou une image pour le fond............................................................50
4.1.2. Position et répétition du fond..........................................................................................53
4.1.3. Fixer le fond ou le faire défiler avec la page...................................................................55
4.1.4. Insérer plusieurs images de fond.....................................................................................56
4.1.5. Créer un fond en dégradé................................................................................................57
4.1.6. Les dégradés de type linéaire..........................................................................................58
4.1.7. Les dégradés de type radial.............................................................................................59
4.2. Intégrer des Images, de l’Audio et de la Vidéo.......................................................................61
4.2.1. Insérer une image............................................................................................................61
4.2.2. Ajuster et positionner une image.....................................................................................62
4.2.3. Insérer de l’Audio...........................................................................................................64
4.2.4. Insérer de la Vidéo..........................................................................................................66
4.2.5. Les Éléments Figure et Figcaption..................................................................................68
4.3. Les Tableaux...........................................................................................................................68
4.3.1. Création d’un tableau simple..........................................................................................68
4.3.2. Mise en forme d’un tableau.............................................................................................69
4.3.3. Construire un tableau structuré.......................................................................................71
4.3.4. Combiner des cellules.....................................................................................................72
4.4. Les Formulaires......................................................................................................................73
4.4.1. Introduction aux formulaires...........................................................................................73
4.4.2. Créer le squelette d'un formulaire...................................................................................73
4.4.3. Créer un formulaire simple.............................................................................................74
4.4.4. Saisie d'un champ email ou url.......................................................................................76
4.4.5. Créer une zone de saisie multi-lignes..............................................................................76
4.4.6. Cases à cocher, zones d’options et listes.........................................................................77
4.4.7. Finaliser et envoyer un formulaire..................................................................................79
5. Aller plus loin.................................................................................................................................82
5.1. Le responsive design...............................................................................................................82
5.2. Les pseudo-classes en css.......................................................................................................84
5.3. Les pesudo-elements en css....................................................................................................86
5.4. Les éléments structurants du HTML5....................................................................................87

1-html_css.odt 2
 Classe de 2nde ICN

Les langages HTML et CSS sont véritablement le socle de tout projet de développement web. Que
vous vouliez créer un site e-commerce, un blog, une application mobile ou quoique ce soit d’autre,
vous serez obligé de passer par les langages HTML et CSS.
Apprendre le HTML et le CSS signifie entrer dans le monde des programmeurs et c’est donc
commencer à les comprendre et à parler comme eux.

1-html_css.odt 3
 Classe de 2nde ICN

1. Introduction
! " #$$# " " %
"
!&& ! " & & " " ' " #$$(
) * * " + " +
' ,- -'& !&& .
• " " % "
" % + + /
" " ** + / " " ** +
" *
• !&& + % " " 0%0 % * *
- " !&& " "
" % 1 2 *
"
" !&& 3 !&&4 ' + " *
" " ! + "
2 * + 2 2 %" * %
3 " ** 4 !&& *
" * " **
5 * " 0" * "
* * + 6 + 78 * "
" " !&&
5 " !&& + .
• 9 5 :: ; 1 <
• = * " <
• ;

2. Les bases en HTML et CSS

2.1. Les bases du HTML
2.1.1. Éléments, balises et attributs
' * > * " * ! *
*
* % 2 ? @"
* 6 * 8 * "
6 * # A 4 B 3 (8 6 * 8
* " C * 2 " * "
. *

1-html_css.odt 4
 Classe de 2nde ICN

* * " *
D + "D * *
! " * " + +
! * " * + %" %
9 >+ " D * * 9 >
* + " + " *
*
, " " " " *
* * *
" * * "
" *
5 * " + " "
% + *
9 >+ " 2 % * 6
" " 8

C * "0 " * " * .

• 0*/* " * <
• " <
• *
6 E " 8 % + "
"" " ;
" " ! +
" + ; * +
F " " + .

1-html_css.odt 5
 Classe de 2nde ICN

& > * * + > " 0%0 * 7

! > " > . " + " D "
> " * */* " * 7

2.1.2. Structure de base d’une page en HTML5

G ** " ** " " >" *
D
- " 3 " * " " + +
2 */* ! + ** " *
3 " ** " " " +
" " " ** * + % + " * C
" " * H " ".

9 > " * " * "

G + 3 + *
. * 6 0/ 8 6 " 8
* * "
* " " * 0 6
* I 8
* " " 6 * "8
F % J ** * * .

" 75 + * */* "

* + " * " + " **
" "

1-html_css.odt 6
 Classe de 2nde ICN

5 " * 0K
F " %+ > + .

G % > " * " *D

37E > " " * 2 */* + + 3+
" >

2.1.3. Afficher un document en HTML5 dans le navigateur

*D " % "
" * " * * 5 " .
> J > " * >0
" * * . " * * ! "
" * " *
G " >% " &
D 0 " *
" 6" " = * 8 > " *
6 * 8 " + * * +

5 > % " * %" + + >

% L" " *
2% 6" : "* : 8 + > " " *
! * * > * +
" " + " " M- + * *
" * " L" " * 7

2.1.4. Bonnes pratiques, règles et commentaires

* * + * % ! */*
+ "
C * " * * % *
*/* " * *

1-html_css.odt 7
 Classe de 2nde ICN

* * + * >
2 * . *
2 * *
- + . ' " " * * 2
" " " **

' D " " " "" *

5 * 2 6 " % " 8%" +
+ 2 % * ! * "
" ** * + * * + +
D* D + . " ** "
! ** " " * * 2 " ** ! " **
" . 6% * + " 0" " " "
8
F " " ** " " ** .

1-html_css.odt 8
 Classe de 2nde ICN

5 + " ** " .
# G + " ** " >% * "
" * ! **
1 + >
"
A G %+ > " E > +
* D " + * + + "
" " +
" * * " *
G . " ** * " + *
* *
- % 2 * * * " ** " ** *
* G > + * ""D " "
"% "
5 " " > % * + 6; * 8
% " " " " * " "
"

1-html_css.odt 9
 Classe de 2nde ICN

F > ""D " + +

2.1.5. Les éléments Heading, Paragraph et Break

% " * + 2 +
" 6 " * "8
5 " * G * * %
" % %
5 " * H "
+ 5 " +
N O -" + % * + * "
& * >" % % */*
* 6 * 8
! * " + "N PO
5 " * # A 4 B 3 ( "
* " - # " " ** D * +
( " " ** D *
F %" + * .

1-html_css.odt 10
 Classe de 2nde ICN

* " G "
" * % J2 %* * . > ,- -'&
* * "
! + > + * * * + L
" + > % ! >
2 * # *
+ * * * + !&& *
* " + ." " **
* +

2.1.6. Les éléments Strong, Emphasis et Mark

* + * " " + "
" D * * + " 0" " * "
* * * + " *
* 7
* * * 6 * 8 " * '
% + " * * * * */* + "

/ " * * " * G
* * > " * " / " " *
% * % "
G * * " ! " " *
" " ** * * " " "
% " " *

1-html_css.odt 11
 Classe de 2nde ICN

2.1.7. Listes ordonnées et non-ordonnées

% " % "
F * " %" + " > + >
" " * H " .
• Q * * #
• Q * * A
• Q * * 4
G / . "
* * * " *
' . 0
" . 9 " ** " "
0
" 0 + D
" + " * + " "
0
5 " 0 * . *
6 8 + " * 6 *8 +
" " + *

1-html_css.odt 12
 Classe de 2nde ICN

C * " * " "

" " 6 " * 8 ! +
0
5 " * * * * " *
* 6 8

1-html_css.odt 13
 Classe de 2nde ICN

! ** > * D * % %
* , D + " * >* * * "
" 7

2.1.10. Liens internes et liens externes

+ 5
" " " + .
R " " ST "
*/* 1 + * 1
1
C " " * "" *
6 E " 8+ % + " 6" % 8

R + " " + " / " + +

! ** " " 9 " % .

1-html_css.odt 15
 Classe de 2nde ICN

# % + " +
*/* C " * " " *

A + 0 C "
" " * " * 0

4 + C "
" 2 P
F % " * " ** " " .

H " + 6 " " * * " "

8 H " # * A * */*
4 * 0 * %* # * B *
%* # *
H "* " * # * * A *
4 * B * @" % * % .

1-html_css.odt 16
 Classe de 2nde ICN

& > # * " 0" * * %" .

+ " + > A 4 B >

+
5 " * > + " " * .
+ TE " * D +
G + "" ; * " .

- + " + *
" * * " ! * " .
* " >+ "
/ P
5 + " /
U % T * ** * * .

1-html_css.odt 17
 Classe de 2nde ICN

- % " " " 0" D * " 6 +

> + + * 8 9 > " +
> " /

2.1.11. Les autres types courants de liens

D " * " *
" / 7G "
! ** " " " * %
*/* 1 ' / " 1 D
% ""D % " " *
F " * >+ " 2 + +
" 6 8
5 " " " ** " 2 % %
J H * + %"
* " +
G " " + + * % 5 " 2
* " 6 %" + 8 * " "
" D "
" / " * */* + " %

1-html_css.odt 18
 Classe de 2nde ICN

V % " " +
J * 7
5 > * * * * * . %
" ** " " .

G * % " " 5 "

* " 6 * > 8+ "
*/* + 1 % + "
G + %" " ** " *
! ** " 1 */* "+ *
" %
5 * * " + " .

1-html_css.odt 19
 Classe de 2nde ICN

2.1.12. Validation et compatibilité entre navigateurs

T */* " - *
+ " " **

! * * 2 " D
+ C " ** " " D*
" !&&
C D* * ) + 2 " "
+ " . > * + * %
5 " ;4! 6; ; ; ! *I * D " "
* + 8* % **
!&&
5 > " " .
• 5 . .PP 14
• 5 !&& . .PP2 1 14 P" 0

2.2. Les bases du CSS

2.2.1. Sélecteurs, propriétés et valeurs
5 !&& %* " 1 +
"
T " % * %+ 6 8 * 6 8 %+
* + " & + "
% * "
T %* * " " D "
" ** " " *
T " * * " * * 5
%" " * / "
% +
F " "0 " "D " + .

1-html_css.odt 20
 Classe de 2nde ICN

C " * " * " + +

+ " %
9 " 6+ %* " 8 0 >
6 " 8 ! "+ "

G + + + " @" %
+ #( " #(
9 > 0 0 2% *D " !&& H
" "" " D "
" " ! + 0

2.2.2. Où écrire le CSS ?

9 " !&&
** * +
9 " !&& .
• - * " * <
• C * " <
• C " "
5 * " " " " * * 2
" ** * D * D + "
F * " ** " + " " " *
! ** " *D . " " !&& *
5 " * * "
" !&& % " * " ** " " .

1-html_css.odt 21
 Classe de 2nde ICN

C D* * * . " !&& * 5
" " !&& .

F * + >+ " !&& %

0
- " . * " * + "

D* D * 6 * " ** 8. " " !&&

" 5 " 2% "
* " F > ** "
5 > % " " */* + "
>* + > D*
T + > " > 9 *
" !&& H " % * +
" * " * D .

1-html_css.odt 22
 Classe de 2nde ICN

* * / "" *

% " " 6 " " "

8 + " > 2% %
& " " 0 %
" "
V * + % " " !&& " " .

2.2.3. Les commentaires en CSS

H 2% + " ** ! * !&&
" !&& * D 6 " + "
* 8 " " ** > " " * + > / D
C > " 2 + " + +
" ** % " + " " * AWWW " 7
G !&& " " ** " * D .

2.2.4. Sélecteurs simples et limitations

, + % * + " + * "
" % * 6 * " 8
! " / + *
* " "
G + D * " "* * +
" " * F * * * %"
D* + + */* D * " " * . " **
+ % * */* * S

1-html_css.odt 23
 Classe de 2nde ICN

5 " + " "

! ' + " + %
* */* ! * * + */*
% * "
5 *D * " * " *
6" 8 "
! " " "D " 6 "" 8 " 5
* .

G " !&& H " ** " " %

J " D
- D D " + * "
G " " !&& F %" + + .

9 * + %" + * @"
"
5 + " */* " SG "
" . " " / +
" "
' " * + 1 " **
*
G " " + 6" % */* 8
! * + + */* %

1-html_css.odt 24
 Classe de 2nde ICN

9 >+ * " " *

9 % 2% * * ! * * +
+ % " G " * + "
* * "
5 * %" *

2.2.5. Les éléments div et span

* D " * + " + % " */*
) - > + + > "
* " 9
" " " %" "
* D * . " " "
* " ** " .

? * " % "
- * + " %
* + "

1-html_css.odt 25
 Classe de 2nde ICN

" ** " " . *

" + *

2.2.6. Les éléments de type block et inline

G * " 5 * *
" + *
* " * * *
" * " " >
2 " ' 0" + *

- + " * > " * *

+ + * * " + >
" * *

' " + * D " * *

* *.

1-html_css.odt 26
 Classe de 2nde ICN

H * "0 " " " *

" H * + >
" " + * " "" 2

2.2.7. Les sélecteurs avancés

" " " !&& G @" %
" " D " * > * *
' + D * " " !&& +
.

2.2.8. La notion d’héritage

" * !&& + *
6" * " " 8
G * - " * X< * -
* X * - - + % * X * -
* + *

1-html_css.odt 27
 Classe de 2nde ICN

'" * * # + * #
" * - + + % * 6" *
8 * # * + * "
R 00 + " " % * %
!&& 6 * " % 8S
!&& D " + + " " *
+ ! + + % * " " +
+

3. Formater du Texte & Positionner des Éléments

3.1. Les Propriétés de Type « Font- »
3.1.1. La propriété font-size
Nous utiliserons la propriété font-size lorsque nous voudrons modifier la taille d’un texte.
Cette propriété accepte deux types de valeurs : des valeurs de type absolu (en pixel ou en point), ou
relatif (en em, ex ou en pourcentage).
Les valeurs de type « relatives » sont appelées de la sorte car elles permettent au texte de s’adapter
relativement aux préférences de vos visiteurs. En clair, si vous fixez la taille d’un texte à 100%, ce
texte pourra avoir des tailles différentes selon les réglages faits par vos visiteurs sur leurs
navigateurs.
Ce type de valeur présente des avantages indéniables, et notamment le fait que tous vos visiteurs

1-html_css.odt 28
 Classe de 2nde ICN

devraient être capables de lire vos écrits sans difficulté. De plus, le texte peut également s’adapter
relativement aux autres éléments de votre page web.
Une valeur de type absolu, en revanche, va fixer la taille d’un texte définitivement. Le grand
avantage de ce type de valeur est que vous pouvez contrôler précisément donc le rendu de votre
texte et de votre page web.
Voici un exemple d’utilisation de la propriété font-size, avec des valeurs relative et absolue. Notez
qu’on utilisera les notations px pour pixel, pt pour point et % pour pourcentage.

3.1.2. La propriété font-style

La propriété font-style permet de fixer l’inclinaison d’un texte.
La propriété font-style accepte 4 valeurs différentes :
• Normal (valeur par défaut) ;
• Italic (change le texte en italique) ;
• Oblique (penche le texte) ;
• Inherit (hérite des propriétés de l’élément parent).
Nous avons dit plus haut que tout élément enfant héritait par défaut des styles de ses parents. A quoi
sert donc la valeur inherit ? En fait, cette dernière sert à annuler un style dans un cas bien
particulier.
Imaginez par exemple que nous ayons défini un font-style : italic pour tous les paragraphes de notre
page et un font-style : normal à un div en particulier.
Par définition, les paragraphes à l’intérieur de ce div seront en italique puisque la notion d’héritage
nous dit d’appliquer la règle la plus proche de l’élément en question (et pour un élément de type p,
on applique donc les règles portant sur p en premier).
Si l’on souhaite que les paragraphes héritent du même style que notre div, l’utilisation de la valeur
inherit est alors une excellente solution.

1-html_css.odt 29
 Classe de 2nde ICN

Certains d’entre vous vont certainement dire « très bien, mais il était aussi rapide dans ce cas
d’indiquer un font-style = normal à notre attribut class normal ». C’est tout à fait vrai.
Cependant, imaginez maintenant que vous connaissiez le PHP ou le JavaScript et que vous laissiez
la possibilité à vos visiteurs de choisir le font-style du div, mais que vous voulez absolument que les
paragraphes à l’intérieur de ce div aient le même font-style que leur parent.
Pour faire cela, le plus simple est d’utiliser inherit.
Concernant les valeurs italic et oblique, vous pourrez constater par vous mêmes qu’elles rendent un
résultat visuellement quasi-identique. Cependant, l’italique est un état spécial d’une police, et qui
n’est pas supporté par toutes les polices tandis que l’oblique correspond à une inclinaison forcée de
la version normale d’une police, et peut donc être appliqué à toutes les polices.

3.1.3. La propriété font-weight

La propriété font-weight permet de fixer le poids d’un texte. Cette propriété accepte 6 valeurs
différentes :
• Normal (la valeur par défaut) ;
• Lighter (version allégée de la police) ;
• Bold (la police est en gras) ;
• Bolder (la police est encore plus en gras) ;
• Une centaine compris entre 100 et 900 (du plus léger au plus gras) ;
• Inherit (hérite des styles de ses parents).

1-html_css.odt 30
 Classe de 2nde ICN

A noter que certaines polices et certains navigateurs ne supportent pas les valeurs inférieures à «
normal » et supérieures à « bold ». Si votre valeur n’est pas supportée, la police s’affichera dans la
valeur la plus proche supportée (pour bolder, votre police s’affichera en bold par exemple).

3.1.4. La propriété line-height

Cette propriété n’est pas une propriété de type « font- » à proprement parler mais concerne
également la mise en forme du texte, donc elle a tout à fait sa place dans cette partie.
La propriété line-height sert à fixer l’écartement, c’est-à-dire la distance entre deux lignes de texte.
Une pratique communément admise est d’indiquer une valeur pour notre line-height équivalent à
1,5 fois la taille en pixel de notre texte.

3.1.5. La propriété font-family

La propriété font-family permet de choisir la police du texte.
Dans tous les cas, nous déclarerons plusieurs polices (on parle de « famille » de polices, d’où le
nom de cette propriété) afin de s’assurer qu’au moins une des polices mentionnées soit supportée
par vos visiteurs.
En effet, il existe toujours des versions de navigateurs et des ordinateurs ne supportant pas certaines
polices, d’où tout l’intérêt d’en déclarer plusieurs.
La première police déclarée sera le choix par défaut. Si elle n’est pas lue par votre visiteur, alors on
utilisera la seconde et etc.

1-html_css.odt 31
 Classe de 2nde ICN

3.1.6. Les « web safe fonts »

Les Web Safe Fonts correspondent à un ensemble de polices, un « pack » qui est préinstallé sur
toutes les machines permettant d’aller sur Internet. Ce sont donc des polices lues par tout le monde,
d’où le mot « safe » qui veut dire en français « sûr », « hors de danger ».
En général, on mentionnera au moins une police Web Safe comme dernière valeur de la propriété
font-family.
Parmi les Web Safe Fonts, nous avons les polices Arial, Times New Roman, Courier New, Verdana,
Georgia, Lucida, Tahoma, Trebuchet et Garamond entre autres.

3.1.7. La propriété color

Il existe plusieurs façons de gérer la couleur d’un texte.
Première façon de changer la couleur d’un texte : en attribuant un nom de couleur (en anglais) en
valeur de la propriété color.

Cette méthode reste très limitée car nous ne pouvons choisir que parmi seize noms de couleurs qui
sont les suivants :

1-html_css.odt 32
 Classe de 2nde ICN

Les valeurs que vous voyez sous le nom des couleurs sont des valeurs qu’on appelle hexadécimales.
Ce type de valeur va correspondre à notre deuxième méthode pour fixer la couleur d’un texte.
« Hexadécimal » signifie « qui fonctionne en base 16 ». Pour le dire simplement, un système
hexadécimal est un système qui utilise 16 symboles pour compter, à savoir dans notre cas les
nombres de 0 à 9 et les lettres de A à F. La lettre A correspondra ainsi à 10, B à 11, C à 12, D à 13, E
à 14 et F à 15. Cela nous fait donc bien 16 symboles en comptant le zéro.
Ce système de comptage peut paraître complexe et assez étrange pour ceux qui n’ont pas fait
d’études de mathématiques, je veux bien le comprendre. Cependant, je vous demande de ne pas en
avoir peur et de le voir tel qu’il est : un système pour compter de 0 à 15 en soi très simple.
Mais quel rapport avec nos couleurs ? En fait, on va pouvoir donner une valeur hexadécimale en
valeur de la propriété color, afin de choisir très précisément la couleur voulue. Cette valeur devra
commencer par un dièse, suivie de 6 symboles choisis entre 0 et F.
Les deux premiers symboles vont définir l’intensité de rouge de notre couleur, les deux suivants
l’intensité de vert et les deux derniers l’intensité de bleu. Vous pouvez imaginer que cela se passe
comme lorsque vous mélangez de la peinture afin d’obtenir une couleur précise.
L’intérêt de ce type de valeur est de pouvoir choisir parmi plus de 16 millions de nuances
différentes. Si vous avez bien suivi, l’échelle d’intensité va de 0 à 255 pour chaque binôme de
valeurs, 00 étant l’intensité la plus faible et FF l’intensité la plus forte.
Pourquoi de 0 à 255 ? Considérez que 00 correspond à 0 sur notre échelle d’intensité. 01 correspond
à 1, 02 à 2, 0A à 10 et 0F à 15. Après 0F, on a 10 (lisez « un, zéro » pour comprendre plus
clairement) qui correspond à 16 ; 11 qui correspond à 17 ; 1A qui correspond à 26 et etc. jusqu’à FF
qui correspond à 255. Cela fonctionne finalement comme pour nos dizaines, à part qu’ici on compte
en seizaines.

1-html_css.odt 33
 Classe de 2nde ICN

Le plus important est encore une fois de retenir que les deux premiers symboles correspondent à
l’intensité de rouge, les deux suivants à l’intensité de vert et les deux derniers à l’intensité de bleu.
Enfin, le dernier type de valeurs que l’on peut utiliser est le type RGB (pour Red Green Blue). Nous
allons voir que ce type de valeurs et les valeurs hexadécimales reposent sur la même base.
Cette fois-ci, nous allons devoir indiquer trois nombres compris entre 0 t 255 en valeur. Le premier
nombre correspond une nouvelle fois à l’intensité de rouge, le second à l’intensité de vert et le
troisième à l’intensité de bleu que l’on veut utiliser pour former notre couleur finale.

Il existe de nombreuses similitudes entre les notations en hexadécimal et en RGB. On peut

d’ailleurs tout à fait convertir l’hexadécimal en RGB, en partant du principe que 00 en hexa
correspond à 000 en RGB et que FF en hexa correspond à 255 en RGB.

3.1.8. L’opacité d’un texte

Le CSS nous offre deux méthodes pour fixer le niveau d’opacité des textes.
Si on utilise une valeur de type nom de couleur ou hexadécimale avec la propriété color, on doit
utiliser la propriété opacity pour fixer l’opacité des textes.

1-html_css.odt 34
 Classe de 2nde ICN

Cette propriété prend une valeur entre 0 (totalement transparent) et 1 (totalement opaque).
Attention : n’oubliez pas qu’on utilise des points et non pas des virgules pour les nombres à virgule
étant donné qu’on utilise le système d’écriture anglo-saxon lorsque l’on code.
Si nous avons utilisé une valeur de type RGB avec la propriété color, nous pouvons également
maîtriser l’opacité de notre texte d’une façon plus simple, en utilisant une valeur de type RGBa.
Dans ce cas, il suffit de rajouter une valeur pour l’opacité de notre texte après les trois valeurs de
notre propriété RGB.

3.2. Les Propriétés de Type « Text- »

3.2.1. L’alignement d’un texte
Pour modifier l’alignement d’un texte, nous allons utiliser la propriété text-align.
Cette propriété peut prendre cinq valeurs différentes :
• Left : le texte sera aligné sur la gauche ; valeur par défaut ;
• Center : le texte sera centré ;
• Right : le texte sera aligné sur la droite ;
• Justify : le texte sera justifié ;
• Inherit : hérite des propriétés de l’élément parent.
Le centrage ou l’alignement se fait toujours par rapport à l’élément parent le plus proche du texte.
Dans l’exemple suivant, on voit bien que mon paragraphe « pdiv » est aligné à droite de son
élément parent (c’est-à-dire le div qui fait lui-même 100px de large) et non pas de la page. Le
second paragraphe, n’ayant pour parent que l’élément body, est donc bien lui centré sur la page.

1-html_css.odt 35
 Classe de 2nde ICN

3.2.2. La propriété text-decoration

On peut modifier la décoration d’un texte grâce à la propriété text-decoration parmi six valeurs pour
cette propriété :
• Underline : le texte sera souligné ;
• Overline : une ligne apparaîtra au dessus du texte ;
• Line-through : le texte sera barré ;
• Blink : le texte clignotera (attention, ne fonctionne pas sur tous les navigateurs) ;
• Inherit ;
• None : pas de décoration, comportement par défaut.

3.2.3. La propriété text-indent

La propriété text-indent sert à gérer l’indentation d’un texte. L’indentation, pour ceux qui l’auraient
oublié, est le décalage d’un texte sur la droite généralement.
Cette propriété accepte des valeurs de type absolu (px, pt) et relatif (em, ex, %). Vous pouvez
également lui attribuer des valeurs négatives afin de décaler votre texte sur la gauche.

1-html_css.odt 36
 Classe de 2nde ICN

3.2.4. La propriété text-transform

On utilise la propriété text-transform pour modifier l’aspect des caractères d’un texte (majuscules
ou minuscules).
Nous pouvons choisir parmi cinq valeurs :
• Uppercase : transforme tout le texte en majuscules ;
• Lowercase : met tout le texte en minuscules ;
• Capitalize : met uniquement la première lettre de chaque mot en majuscule ;
• None : pas de transformation ;
• Inherit : hérite des styles de l’élément parent.

3.2.5. Les propriétés letter-spacing et word-spacing

Les propriétés letter-spacing et word-spacing permettent respectivement d’ajuster l’espace entre les
lettres et entre les mots.
Ces propriétés se comportent de manière similaire et acceptent des valeurs absolues (px, pt) et
relatives (ex, em, %).

1-html_css.odt 37
 Classe de 2nde ICN

3.2.6. Les ombres des textes

On peut ajouter des effets d’ombre à un texte en utilisant la propriété text-shadow.
Cette propriété nécessite au minimum deux valeurs pour fonctionner. Cependant, dans la grande
majorité des cas, nous en utiliserons quatre, dans l’ordre vu ci-dessous.
Les trois premières valeurs correspondent à des longueurs et la dernière est la couleur de l’ombre :
• 1ère valeur : déplacement horizontal de l’ombre ;
• 2ème valeur : déplacement vertical de l’ombre ;
• 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
• 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété « color »).

3.3. Le Modèle des Boîtes

Le modèle des boîtes est un concept essentiel : « tout élément d’une page est une boîte rectangulaire
et peut avoir un padding, une marge et des bordures ».
Cela mérite d’être répété : tout élément, qu’il soit un élément de type block ou de type inline, est
une boîte rectangulaire.
Les propriétés permettant d’indiquer la longueur, la largeur, la marge, le padding et les bordures

1-html_css.odt 38
 Classe de 2nde ICN

d’un élément forment ce qu’on appelle le modèle des boîtes.

La première boîte est définie par la longueur et la largeur d’un élément. La padding, ou marge
intérieure, forme ensuite la seconde boîte. Puis viennent les bordures qui constituent la troisième
boîte. Enfin, la marge extérieure vient former la quatrième et dernière boîte.

3.3.1. Hauteur et largeur d’un élément

Tout élément possède une hauteur et une largeur par défaut.
La hauteur d’un élément est déterminée par son contenu. Par exemple, des paragraphes d’une ligne
ou de deux lignes n’occuperont pas la même hauteur.
La largeur par défaut d’un élément est avant tout déterminée par son type (block ou inline) puis par
son contenu si l’élément est de type inline. En effet, rappelez vous que les éléments de type block
occupent automatiquement toute la largeur disponible.
Pour modifier la hauteur d’un élément, on utilise la propriété height à laquelle on attribue une
valeur en px, % ou égale à auto dans la grande majorité des cas.
En utilisant la valeur auto, on laisse le navigateur de nos visiteurs décider de la hauteur que doit
prendre l’élément visé. Cela est très utile dans le cas où l’on veut conserver les proportions d’une
image tout en l’adaptant à la taille de l’écran de nos visiteurs.
Pour modifier la largeur d’un élément, on utilise cette fois la propriété width. Cette propriété prend
les mêmes types de valeurs que height.

1-html_css.odt 39
 Classe de 2nde ICN

3.3.2. Les bordures et les bordures arrondies

Il existe de nombreuses sortes de bordures dont certaines sont plus ou moins bien supportées par
certains navigateurs.
Pour créer des bordures et les personnaliser, nous allons avoir besoin de trois propriétés :
• Border-width, qui va définir l’épaisseur de la bordure (valeur en px) ;
• Border-style, qui va définir le style de la bordure ;
• Border-color, qui va définir la couleur de la bordure (accepte les mêmes valeurs que la
propriété « color »).
La propriété border-style peut prendre de nombreuses valeurs différentes. Les valeurs les plus
utilisées sont solid, dotted (pointillé) et dashed (tiret). Vous pouvez voir ci-dessous le résultat pour
chaque style de bordure :

Et voici un exemple d’utilisation des propriétés de type border :

1-html_css.odt 40
 Classe de 2nde ICN

Une fonctionnalité longtemps attendue par les webmasters et les développeurs et qui a vu le jour
avec le CSS3 est la possibilité de créer des bordures arrondies.
Pour faire cela, nous allons utiliser la propriété border-radius. Cette propriété va prendre une
valeur : la taille de l’angle, en px.
Notez que l’on peut définir des angles différents pour chaque côté de nos bordures en utilisant les
mots clefs top-left, top-right, bottom-left et bottom-right.

Notez également que ces mots clefs sont souvent employés en CSS, ensemble ou séparément (que
top, ou que left par exemple). N’hésitez donc pas à les tester avec certaines propriétés déjà vues ou
que l’on va voir !

3.3.3. Les marges intérieures

Pour définir les marges intérieures d’un élément, nous utiliserons la propriété padding.
On peut considérer qu’un élément HTML possède toujours une bordure. Celle-ci peut être explicite,
c’est-à-dire matérialisée à l’aide des propriétés CSS vues précédemment ou implicite (invisible).
La propriété padding va définir l’espace entre l’élément en soi et sa bordure. Cette propriété doit
être utilisée uniquement dans ce but, et jamais pour positionner des éléments dans une page ou les
uns par rapport aux autres.
On donnera généralement une valeur en px à padding. Notez que l’on peut définir des espacements

1-html_css.odt 41
 Classe de 2nde ICN

différents pour chaque marge intérieure de nos éléments en utilisant les propriétés padding-right,
padding-bottom, padding-left et padding-top.

3.3.4. Les marges extérieures

Pour définir la taille des marges extérieures, c’est-à-dire de l’espace à l’extérieur des bordures d’un
élément, nous allons utiliser la propriété margin.
Contrairement à la propriété padding, la propriété margin peut tout-à-fait être utilisée pour
positionner des éléments dans une page ou les uns par rapport aux autres.
Nous attribuerons généralement des valeurs en px ou en % à cette propriété. Tout comme la
propriété padding, nous allons pouvoir des marges différentes de chaque côté de nos éléments avec
les propriétés margin-right, margin-bottom, margin-left et margin-top.
Notez que les valeurs par défaut des marges intérieures et extérieures peuvent légèrement différer
d’un navigateur à un autre. Cela peut impacter le design général de votre site pour certains de vos
visiteurs.
Afin de s’assurer que chaque visiteur verra un résultat conforme à nos attentes, nous pouvons
utiliser un « reset CSS » pour notre padding et notre margin.
Dans ce cas là, c’est très simple, il suffit par exemple d’appliquer un padding et une margin avec
des valeurs égales à zéro à notre élément body. Ensuite, on précisera les différentes marges
souhaitées à nos éléments enfants.

1-html_css.odt 42
 Classe de 2nde ICN

3.3.5. Les ombres des boîtes

On peut créer des ombres autour des boîtes, tout comme on l’avait fait pour nos textes
précédemment.
Nous allons cette fois-ci utiliser la propriété box-shadow. Cette dernière fonctionne exactement
comme text-shadow, avec deux valeurs obligatoires et quatre recommandées pour marcher :
• 1ère valeur : déplacement horizontal de l’ombre ;
• 2ème valeur : déplacement vertical de l’ombre ;
• 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
• 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété « color »).
Notez que dans le cas des ombres des boîtes, il peut être intéressant de rajouter à la fin une dernière
valeur, l’inset, si l’on souhaite créer une ombre intérieure.

1-html_css.odt 43
 Classe de 2nde ICN

3.3.6. Faire flotter un élément

Pour aligner des éléments les uns par rapport aux autres, on peut les faire « flotter ». Pour faire
flotter un élément, nous utiliserons la propriété float avec les valeurs suivantes : left, right, none ou
inherit.
Un élément flottant va sortir du schéma naturel (du « flow ») d’une page web pour venir se placer
contre le bord gauche ou droit de l’élément qui le contient ou contre le bord de la page.
Lorsque l’on fait flotter un élément, les éléments après l’élément flottant vont venir se positionner à
côté de celui-ci.

1-html_css.odt 44
 Classe de 2nde ICN

Dans l’exemple ci-dessus, on remarque que l’élément strong, contenu dans l’élément p2, va venir se
placer dans le coin à droite de son élément parent (l’élément p2 donc).
L’élément p1 va lui se placer à gauche dans la page tandis que l’élément p2 va se placer à droite ; à
côté de l’élément p1.
Généralement, on utilisera plutôt la propriété float sur des éléments de type inline comme des
images par exemple. En effet, cette propriété peut être la cause de problème d’affichages lorsqu’elle
est mal utilisée sur des éléments de type block.
Si l’on veut qu’un élément suivant un élément flottant vienne se placer sous cet élément flottant, il
faudra utiliser la propriété clear. Celle-ci accepte trois valeurs : left, right ou both :
• left : un élément va se placer en dessous après un float left ;
• right : un élément va se placer en dessous après un float right ;
• both : un élément va se placer en dessous après un float left ou un float right.

1-html_css.odt 45
 Classe de 2nde ICN

3.3.7. La propriété display

La propriété display est une propriété extrêmement puissante : elle permet de changer le type d’un
élément de block à inline ou d’inline à block.
Cette propriété supporte quatre valeurs différentes qui correspondent aux différents types
d’éléments possibles : inline, block, inline-block et none.
La nouveauté ici est le type inline-block. Ce nouveau type ne peut être donné à un élément que
grâce à la propriété display. Il va être un mix des types inline et block.
Un élément de type inline-block se comporte de cette façon : l’élément en soi (contenu et boîtes) se
comporte comme un type block tandis que le contenu seulement se comporte comme un type inline.
Pour le dire plus simplement, un élément de type inline-block se comportera comme un élément de
type inline excepté que l’on va pouvoir contrôler précisément sa hauteur et sa largeur.

1-html_css.odt 46
 Classe de 2nde ICN

3.3.8. La propriété position

La propriété position est une autre propriété très puissante nous permettant de définir
l’emplacement d’éléments HTML dans une page. Cette propriété peut prendre cinq valeurs :
• Static : valeur par défaut, ne change pas la position de base d’un élément ;
• Absolute : permet de positionner un élément n’importe où dans la page, par rapport à son
élément parent direct ;
• Fixed : permet de positionner un élément n’importe où dans la page. De plus, l’élément reste
visible si vous descendez ou remontez le long d’une page ;
• Relative : permet de replacer un élément relativement par rapport à son positionnement par
défaut ;
• Inherit : l’élément hérite des propriétés de son parent.
Pour ensuite jouer sur la position des éléments, on utilise les mots clefs right, bottom, left et top.

1-html_css.odt 47
 Classe de 2nde ICN

Dans cet exemple, notre paragraphe p1 a un positionnement fixed et a été décalé de 80px sur la
gauche par rapport au bord de la page.
Le paragraphe p2 possède lui une position relative. Il a été décalé de 50px par rapport à son
positionnement de base (par défaut, il aurait été placé au dessus de notre p1 à cause de son
positionnement fixed).
L’élément strong possède un positionnement absolute. Sans notre left :150px, il aurait été collé sur
le bord gauche de son élément parent, l’élément p2.
Notez qu’un positionnement absolute sur un élément annule la propriété float si on lui en a appliqué
une.

3.3.9. Le z-index
Parfois, lorsque l’on crée le design de pages web, il arrive que deux éléments se chevauchent selon
certaines circonstances.
Il peut alors être utile de savoir comment indiquer quel élément doit apparaître au dessus de quel
autre en cas de chevauchement.
Pour cela, nous utiliserons la propriété z-index. Celle-ci fonctionne avec tous les éléments
positionnés et permet d’indiquer quel élément doit être au dessus de quel autre en cas de conflit.
Un élément positionné est un élément auquel on a appliqué la propriété position avec une valeur soit
absolute, soit relative, soit fixed.
Le z-index ne fonctionnera donc pas sur des éléments positionnés en static (qui est la valeur par
défaut).

1-html_css.odt 48
 Classe de 2nde ICN

Un élément avec un z-index possédant une valeur plus élevée qu’un autre sera au dessus de cet
autre élément. Cette propriété va donc s’utiliser de cette manière :

Dans l’exemple précédent, par défaut, l’élément p2 devrait être par dessus l’élément p1.
Or, en appliquant un z-index avec une valeur plus élevée à p1, on arrive à refaire passer p1 par
dessus p2 (on peut le voir au niveau des bordures).

3.3.10. Notations long-hand et short-hand

On peut écrire les trois propriétés relatives aux bordures sous la forme condensée d’une seule
propriété border.
La première écriture, avec les trois propriétés de type border, est ce que l’on appelle une notation
long-hand, tandis que la forme condensée est une notation short-hand.
Jusqu’à présent, on a fait écrire que des propriétés sous leur forme long-hand afin que vous
compreniez bien les bases et la logique du CSS et afin de ne pas compliquer inutilement les choses.
Dorénavant, vous avez tout à fait le niveau pour utiliser des notations short-hand et je vous
encourage à les utiliser dès que possible (celles-ci sont plus rapides à écrire et donc moins
gourmandes en code et en temps d’exécution).
Voici ci-dessous une liste de quelques propriétés acceptant une écriture short-hand. Encore une fois,
écrire une propriété sous sa forme long-hand ou short-hand produira exactement le même résultat.

1-html_css.odt 49
 Classe de 2nde ICN

4. Fonctionnalités Avancées
4.1. Gestion du Background
4.1.1. Ajouter de la couleur ou une image pour le fond
Pour ajouter une couleur de fond, nous allons utiliser la propriété background-color.
Cette propriété accepte les mêmes valeurs que la propriété color que nous avons vu précédemment,
à savoir des valeurs de type nom de couleur, hexadécimale ou RGB.

1-html_css.odt 50
 Classe de 2nde ICN

On peut également ajouter une image de fond. Pour ce faire, on va cette fois utiliser la propriété
background-image.
On lui donne en valeur l’url de l’image qui, en l’occurrence, prend la forme d’un chemin relatif
comme nous avions vu pour les liens.
Tout d’abord, il va nous falloir une page HTML et une page CSS que nous allons lier entre elles et
enregistrer dans le même dossier pour plus de simplicité.

Ensuite, il va nous falloir une image. On l’enregistre également dans le même dossier.

1-html_css.odt 51
 Classe de 2nde ICN

Retour finalement sur notre page CSS et utilisons maintenant la propriété background-image sur
notre élément body (on peut utiliser cette propriété sur n’importe quel élément mais en général ce
sera sur l’élément body).

Comme vous pouvez le constater, par défaut, l’image est répétée horizontalement et verticalement
pour occuper tout l’espace de notre page web puisque nous l’avons insérée dans notre élément body.
Si votre image occupe d’origine plus de place que l’élément dans laquelle vous l’insérez, elle ne
sera donc pas répétée mais au contraire rognée.
C’est ce qu’il se passe dans l’exemple suivant où nous avons insérée notre image en fond de notre
élément p auquel nous avons donné des dimensions de 200px * 100px :

1-html_css.odt 52
 Classe de 2nde ICN

Notez que pour insérer une image de fond nous pouvons également utiliser la propriété short-hand
«background » plutôt que la propriété background-image.
Cette propriété gère également d’autres aspects de la mise en forme du fond que nous allons voir
ensuite.

4.1.2. Position et répétition du fond

La propriété background-repeat nous permet de gérer la répétition de notre fond. Cette propriété
accepte quatre valeurs :
• Repeat : le fond se répète horizontalement et verticalement, c’est le comportement par
défaut ;
• Repeat-x : le fond ne se répète qu’horizontalement ;
• Repeat-y : le fond ne se répète que verticalement ;
• No-repeat : le fond ne se répète pas.

1-html_css.odt 53
 Classe de 2nde ICN

Pour contrôler la position de notre image de fond, nous allons utiliser la propriété background-
position.
Cette propriété a besoin de deux valeurs pour fonctionner : une coordonnée horizontale et une
coordonnée verticale. Le fond sera décalé par rapport au bord en haut à gauche de son élément
parent.

1-html_css.odt 54
 Classe de 2nde ICN

Dans cet exemple, on a décalé l'image de 100px vers la droite et de 10px vers le bas par rapport au
coin en haut à gauche de l’élément body, son parent. Rappelez vous que l’élément body occupe
toute la page.

4.1.3. Fixer le fond ou le faire défiler avec la page

Pour fixer le fond et ainsi donner un effet intéressant, on utilise la propriété background-attachment
à laquelle on donne une valeur égale à fixed.
Cette propriété accepte deux valeurs : fixed donc ou scroll, qui est la valeur par défaut et qui va
faire défiler le fond en même temps que la page.

1-html_css.odt 55
 Classe de 2nde ICN

4.1.4. Insérer plusieurs images de fond

Il est possible, grâce au CSS3, d’insérer plusieurs images de fond. Pour ce faire, on va devoir
utiliser la notation short-hand de nos propriétés relatives au fond et donc la propriété background.
On va ensuite tout simplement séparer les déclarations par une virgule.
Pour cela, on va prendre deux nouvelles images qu’on va placer dans un sous-dossier et dans un
dossier parent pour changer un peu et voir tous les cas de figure.
En pratique, si votre site est bien construit et pas trop compliqué, vous devriez avoir toutes vos
images dans un dossier nommé « images » ou « img ».

On a trois images dans trois dossiers différents :

• Mon image de colibri qui est dans le même dossier que mes fichiers HTML et CSS ;
• Mon image de pingouin qui est dans un dossier parent ;
• Mon image de panda qui est dans un sous-dossier.
Il ne nous reste donc plus qu’à utiliser notre propriété background de la façon suivante :

1-html_css.odt 56
 Classe de 2nde ICN

Ici, on a inséré les trois images dans l’élément body, en leur demandant d’être fixe et de ne pas se
répéter. J’ai décalé mon image colibri de 300px sur la droite tandis que j’ai collé mon image
pingouin en haut à gauche grâce à top left et mon image panda en haut à droite grâce à top right.
Notez que deux images peuvent tout à fait se chevaucher. Par défaut, la première image déclarée
sera au dessus. Attention donc à l’ordre de déclaration !

4.1.5. Créer un fond en dégradé

Nous avons deux types de dégradé à notre disposition : des dégradés linéaire ou radial.
Les fonds en dégradé sont considérés comme des images et donc, à ce titre, nous allons à nouveau
utiliser la propriété background-image pour les créer.
Il y a quelques années de cela, tous les navigateurs ne reconnaissaient pas les mêmes propriétés et
ne les implémentaient pas de la même manière. En l’occurrence, chaque navigateur avait une
méthode bien à lui d’implémenter un fond en dégradé.
Les préfixes vendeurs ont alors été créés afin que chaque navigateur affiche une propriété de la
même manière que les autres. Ce sont des petits mots clefs qui vont être placés avant la déclaration
du type de dégradé souhaité.
Même si aujourd’hui la majorité des navigateurs suivent des standards qui ont été établis et
implémentent les propriétés de la même façon, cela peut toujours être utile (et ça ne coûte rien) de
mentionner des préfixes vendeurs dans le cas où certains de vos visiteurs utiliseraient des vieilles
versions de navigateurs.
Les préfixes vendeurs sont les suivants :
• Pour Chrome et Safari : -webkit-
• Pour Mozilla : -moz-
• Pour Internet Explorer : -ms-

1-html_css.odt 57
 Classe de 2nde ICN

• Pour Opera : -o-

4.1.6. Les dégradés de type linéaire

Pour créer un dégradé linéaire, on utilise les mots clefs linear-gradient. On peut ensuite spécifier
autant de valeurs que souhaitées, chaque valeur correspondant à une couleur de notre dégradé.
Afin que le tout fonctionne correctement, vous devez mentionner chaque préfixe vendeur et il est
recommandé de finir avec le linear-gradient sans aucun préfixe (ce sera la valeur par défaut) comme
ceci :

Les dégradés linéaires peuvent aller du haut vers le bas, de bas en haut, de gauche à droite, de droite
à gauche en encore en diagonale.
Par défaut, cependant, les dégradés linéaires partent du haut vers le bas d’un élément. On peut
choisir l’inclinaison de nos dégradés en utilisant des mots clefs ou en spécifiant la valeur en degré
de l’angle voulu avant d’indiquer les couleurs du dégradé.
Pour que notre dégradé aille vers la droite, on utilisera la valeur to right, pour qu’il aille à gauche to
left et pour qu’il aille de bas en haut to top :

1-html_css.odt 58
 Classe de 2nde ICN

4.1.7. Les dégradés de type radial

Un dégradé de type radial est un dégradé créé à partir d’un point central.
Les dégradés de type radial fonctionnent sur le même schéma que ceux de type linéaire. Cette fois-
ci, nous allons utiliser les mots clefs radial-gradient comme ceci :

1-html_css.odt 59
 Classe de 2nde ICN

Évidemment, il n’est plus question ici d’indiquer une quelconque direction (cela n’aurait pas de
sens puisque le dégradé part du centre dans toutes les directions.
Cependant, on peut choisir si l’on souhaite que notre dégradé ait la forme d’un cercle ou d’une
ellipse en précisant les mots clefs circle et ellipse juste avant nos couleurs.

On peut également choisir avec précision les dimensions et la forme de notre dégradé en précisant
deux chiffres (généralement en px) correspondant respectivement à la largeur et à la hauteur de
notre dégradé.

1-html_css.odt 60
 Classe de 2nde ICN

différents formats avec entre autre le png, le jpg ou jpeg, bitmap ou gif pour ne citer que les plus
connus.
Comme vous vous en doutez, ces formats ne sont pas strictement équivalents et chaque format à été
crée pour un type précis d’images.
Si votre image est une photographie, je vous recommande d’utiliser le format jpg. Si, en revanche,
votre image est un dessin ou tout autre type d’image statique, préférez le png qui est un type qui
gère également la transparence. Enfin, si votre image est animée, vous devrez choisir le format gif.
Oubliez le bitmap qui est un format lourd et sans réel avantage.
Pensez à choisir avec attention le nom de vos images et évitez les caractères spéciaux et les espaces
(préférez les underscores ou les tirets).
Pour insérer une image, nous allons utiliser l’élément HTML img. L’élément img doit être placé au
sein d’un élément de type block, comme l’élément p ou un div par exemple.
Pour que votre code soit valide, vous devez ajouter deux attributs à l’élément img : l’attribut source,
abrégé src et l’attribut alternative, qu’on note alt.
L’attribut src indique le chemin de l’image. Vous pouvez lui donner un chemin relatif ou absolu.
L’attribut alt sert à donner un texte descriptif à a photo. Ce texte est utile notamment dans les cas où
votre image ne s’affiche pas ou pour les robots (de Google, entre autres).
Enfin, vous pouvez également ajouter l’attribut facultatif title, ce qui aura pour effet d’afficher un
texte lorsque vos visiteurs passeront la souris sur votre image.

Comme vous pouvez le voir, on a indiqué une adresse absolue en source de l'image (sur Google
Image). Notez que l’élément img est représenté par une balise orpheline.

4.2.2. Ajuster et positionner une image

Pour ajuster la taille d’une image en CSS, on utilise les propriétés height (hauteur) et width

1-html_css.odt 62
 Classe de 2nde ICN

(largeur) que l’on connaît déjà sur notre élément img.

Si l’on ne spécifie qu’une hauteur ou qu’une largeur, la deuxième dimension va s’ajuster
automatiquement. Attention, lorsque l’on spécifie une hauteur et une largeur, à ne pas trop casser les
proportions initiales de l’image pour un meilleur rendu !
Une astuce performance et référencement : essayez tant que possible d’ajuster la taille de vos
images avant de les mettre sur votre serveur (avec Paint ou PhotoShop par exemple).
En effet, si vous envoyez une image de 2000px de large sur votre serveur et que vous la
redimensionnez à 400px par exemple par la suite avec le CSS, l’affichage peut être ralenti pour vos
visiteurs.
A chaque fois, notre serveur va envoyer l’image au format original et l’image devra être
redimensionnée au format souhaité par le navigateur des visiteurs. Or, cela use évidemment
beaucoup plus de mémoire et va donc influer sur le temps d’affichage de notre page web.
L’élément img est un élément de type inline par défaut. Cela sous-entend qu’une image va se
positionner sur la même ligne qu’un autre contenu de type inline.

Souvent, lors de la création d’un site web, nous voudrons qu’une image occupe sa propre ligne.
Dans ce cas là, il nous faudra utiliser la propriété display en changer le type de l’élément img.

1-html_css.odt 63
 Classe de 2nde ICN

On peut également utiliser la propriété float pour positionner une image, en utilisant les valeurs
right ou left. Pour ajuster l’espace entre une image et le contenu qui l’entoure, on va utiliser la
propriété margin. On peut même créer un cadre en utilisant également les propriétés padding et
border.

4.2.3. Insérer de l’Audio

Tout comme pour les images, il existe différents formats audio. Cependant, ça se complique avec
l’audio car il n’existe pas de format supporté par tous les navigateurs. Cela signifie qu’il va falloir
indiquer plusieurs formats lorsque l’on va insérer de l’audio en HTML.

1-html_css.odt 64
 Classe de 2nde ICN

Les formats mp3 et ogg qui sont les deux formats les mieux supportés.
Pour ajouter de l’audio sur une page web, on va utiliser l’élément audio. Tout comme pour
l’élément img, l’élément audio va demander un attribut src pour fonctionner. Cet attribut prendre en
valeur l’URL du fichier audio.
Toutefois, si vous n’écrivez que cela, vous ne verrez rien à l’écran. En effet, par défaut, l’élément
audio n’est pas affiché sur les pages web. Il va donc nous falloir utiliser d’autres attributs.
L’attribut controls, tout d’abord, va servir à afficher les boutons de contrôle tels que les boutons
lecture, pause et volume entre autres. Cet attribut est donc bien évidemment obligatoire.
L’attribut autoplay va nous permettre de lancer automatiquement le fichier audio lors du chargement
de la page. L’attribut loop nous permet de faire répéter la musique en boucle.
L’attribut width est utile pour modifier la largeur par défaut de la barre de l’élément audio.
Enfin, l’attribut preload nous permet de sauvegarder de la bande passante et d’accroître les
performances de notre site. Cet attribut peut prendre trois valeurs différentes : metadata, auto et
none. En pratique, on utilisera généralement la valeur auto qui va préloader toutes les informations
et les données.
Entre les deux balises de l’élément audio, on peut ajouter un texte qui sera affiché dans le cas où le
navigateur ne supporterait pas le format audio choisi comme par exemple : « Mettez à jour votre
navigateur, on vit au 21è siècle ! ».
En théorie, il faudrait donc écrire ceci pour insérer de l’audio dans une page web :

1-html_css.odt 65
 Classe de 2nde ICN

Cependant, en écrivant notre élément audio comme cela, on ne peut pas insérer différents formats
audio pour les différents navigateurs, ce qui est très gênant.
En pratique, nous utiliserons donc un deuxième élément source et écrirons cela pour insérer de
l’audio qui sera lu par tous les navigateurs :

Ainsi, le navigateur des visiteurs lira la version qu’il reconnaît et ignorera les autres.
Notez que l'on a donné des valeurs égales aux noms des attributs pour controls et autoplay. En
théorie, il n’est pas obligatoire de préciser de valeur pour ces attributs.

4.2.4. Insérer de la Vidéo

Pour créer et afficher une vidéo, il nous faut obligatoirement trois choses : un codec audio (format
mp3, ogg, etc.), un codec video (h.264, ogg thoera, webM) et un format contener dans lequel on va
stocker ces deux éléments (généralement avi, mp4 ou mkv).
Là encore, il n’existe pas de format supporté par tous les navigateurs et il est donc recommandé
d’en utiliser plusieurs pour être certain que la vidéo soit correctement affichée.

1-html_css.odt 66
 Classe de 2nde ICN

Pour ajouter une vidéo, on utilise l’élément video. Les attributs pris par cet élément sont exactement
les mêmes que ceux pris par l’élément audio, à savoir : src, autoplay, controls, loop, preload et
width.
Contrairement aux éléments audio, une vidéo sera par défaut affichée sur une page web.
Il est également possible d’ajouter un attribut poster à votre vidéo. L’attribut poster permet de
télécharger et d’afficher une image qui sera affichée avant le lancement de la vidéo.

Une autre alternative, beaucoup plus simple, pour ajouter de la vidéo ou de l’audio sur son site est
de stocker ces contenus sur des sites comme YouTube, Dailymotion ou Vimeo puis de les intégrer à

1-html_css.odt 67
 Classe de 2nde ICN

votre site grâce au code d’intégration fourni.

De cette manière, vous n’aurez plus aucun problème d’affichage quelque soit le navigateur de vos
visiteurs puisque la transcription dans différents formats est effectuée par les sites hébergeurs.

4.2.5. Les Éléments Figure et Figcaption

 Classe de 2nde ICN

Nous venons de créer notre premier tableau. Cependant, celui-ci ne ressemble pas vraiment à
l’image d’un tableau car nous ne l’avons pas encore mis en forme.

4.3.2. Mise en forme d’un tableau

Nous allons commencer par ajouter des bordures à notre tableau. Pour cela, nous allons utiliser les
propriété CSS border, et border-collapse.
On connaît déjà la propriété border qui va nous permettre de créer des bordures autour de chaque
cellule de notre tableau. Ensuite, pour « coller » ces différentes bordures entre elles, nous allons
utiliser la propriété border-collapse.
Cette propriété accepte trois valeurs : collapse (les bordures des cellules se collent), separate (valeur
par défaut) et inherit.

1-html_css.odt 69
 Classe de 2nde ICN

Faites bien attention à appliquer la propriété border-collape à l’élément table et la propriété border à
vos éléments td, sinon ça ne marchera pas !
Généralement, les tableaux possèdent une ligne d’en-tête. Pour créer cette ligne, on va cette fois-ci
utiliser l’élément th (table head) à la place du ou des éléments td de notre première ligne. D’un
point de vue sémantique, l’élément th est à td ce que l’élément h1 est à p.
Si l’on veut créer une ligne d’en-tête en colonne, il suffit de remplacer le premier élément td de
chaque élément tr par des éléments th.

1-html_css.odt 70
 Classe de 2nde ICN

Évidemment, on n’oubliera pas d’appliquer notre propriété border à nos éléments th également.

4.3.3. Construire un tableau structuré

Si vous créez un tableau long, il sera certainement préférable de commencer à l’organiser en le
divisant en plusieurs sous-parties.
On peut diviser un tableau en trois sous-parties : une partie d’en-tête (header), un corps de tableau
(body) et un pied (footer). Ces trois parties sont matérialisées en HTML par les éléments thead,
tbody et tfoot.
L’élément thead va entourer la ou les lignes d’en-tête. L’élément tfoot va comporter des données
récapitulatives de notre tableau, comme des totaux par exemple. Enfin, l’élément tbody va contenir
notre tableau à proprement parler.

1-html_css.odt 71
 Classe de 2nde ICN

Ici, nous avons fusionné les cellules des deux colonnes « Nom » et « Prénom » en une pour «
Dupont Martin » et les cellules de deux lignes pour « 24 ans ».

4.4. Les Formulaires

4.4.1. Introduction aux formulaires
Les formulaires sont certainement le moyen le plus simple et le plus utilisé pour recueillir des
données à propos de vos utilisateurs. En cela, ils sont essentiels et incontournables.
Cependant, nous touchons là aux limites du HTLM. En effet, si l’on peut créer des formulaires en
HTML, en ne peut pas en revanche stocker ni utiliser les données du formulaire avec ce langage.
Pour cela, nous devrons utiliser d’autres langages comme le PHP et le MySQL par exemple.

4.4.2. Créer le squelette d'un formulaire

Pour créer notre formulaire, nous allons devoir tout d’abord utiliser l’élément form avec deux
attributs : method et action.
L’attribut action, tout d’abord, va servir à indiquer où les informations recueillies dans le formulaire
doivent être envoyées pour être traitées. Ce sera généralement vers une page PHP. Comme nous ne
savons pas encore coder en PHP, il faudra l’imaginer pour le moment.
L’attribut method va lui spécifier de quelle manière on va envoyer ces données. On peut choisir

1-html_css.odt 73
 Classe de 2nde ICN

Il va maintenant falloir indiquer à votre visiteur ce qu’il doit renseigner comme information dans
chaque champ. C’est le rôle du label, qu’on va donc ajouter juste avant l’input.
A noter que pour afficher du texte dans un formulaire, il faut entourer ce texte avec un élément de
type block. Généralement, on utilisera donc un élément p.
Ensuite, toujours pour des raisons de sémantique, il est bon et conseillé de lier le label à l’input qui
lui correspond. Pour cela, on va ajouter un attribut for au label et un attribut id à l’input, et leur
attribuer exactement la même valeur. Notez que cette valeur peut être la même que celle donnée à
l’attribut name de l’élément input.
Voilà donc pour notre champ « pseudo ». Maintenant, on va faire exactement la même opération
pour notre champ mot de passe, à la différence que cette fois on va utiliser un input de type «
password ». Cela aura pour effet que les caractères inscrits ne s’affichent pas à l’écran.

1-html_css.odt 75
 Classe de 2nde ICN

4.4.4. Saisie d'un champ email ou url

Pour demander à l’utilisateur de saisir son adresse mail, il vous faudra utiliser un input de type «
email ». Cela permet à votre navigateur de savoir qu’il doit normalement recevoir une s =•er à l’u€‘ Mrn‚€=rsSg. sS
 Classe de 2nde ICN

4.4.6. Cases à cocher, zones d’options et listes

On peut encore agrémenter notre formulaire en proposant à nos visiteurs de choisir une réponse
parmi différentes possibilités.
Nous allons voir trois façons de faire cela avec les types checkbox (cases à cocher), radio (zones
d’options) et l’élément select (listes déroulantes).
Pour créer une zone de formulaire avec des cases à cocher, il suffit d’utiliser l’élément input avec
cette fois-ci un attribut de type checkbox.

Cette fois-ci, on écrira le label après l’input afin de bien avoir la case à cocher avant le texte.
Pensez bien également à mettre une valeur différente au name de chaque input afin de pouvoir par
la suite identifier quelle case a été cochée.

1-html_css.odt 77
 Classe de 2nde ICN

Si vous le désirez, vous pouvez pré-cocher une case par défaut en ajoutant l’attribut checked à un
input.

Pour les zones d’options, on va cette fois-ci utiliser un élément input de type radio.
Notez que cette fois-ci, et dans ce cas uniquement, vous devez donner la même valeur à l’attribut
name pour toutes les options à l’intérieur d’une même question.
On utilisera donc en plus un attribut value afin de bien savoir quelle case a été cochée par le
visiteur.

On peut encore une fois utiliser l’attribut checked afin de pré-cocher une case.

1-html_css.odt 78
 Classe de 2nde ICN

La différence entre les cases à cocher et les zones d’options est que le visiteur ne peut choisir
qu’une réponse dans le cas des zones d’options, au contraire des cases à cocher où il peut cocher
autant de cases qu’il souhaite.
Les listes déroulantes, enfin, s’utilisent généralement lorsqu’il faut faire un choix parmi une longue
liste. On ne va cette fois-ci pas utiliser l’élément input mais l’élément select à la place avec ses
attributs name et id.
A l’intérieur de cet élément select, nous allons utiliser un élément option pour chaque option de la
liste accompagné d’un attribut value.
Enfin, sachez également que l’on peut grouper les options des listes déroulantes sous un
dénominateur commun grâce à l’élément optgroup et son attribut label.

4.4.7. Finaliser et envoyer un formulaire

L’attribut placeholder sert à donner davantage d’indications sur vos champs à vos visiteurs. Il vous
sert à donner un exemple de remplissage de champ.

1-html_css.odt 79
 Classe de 2nde ICN

Pour rendre une question de votre formulaire obligatoire, vous devrez utiliser l’attribut required.

Enfin, l’élément fieldset sert à organiser votre formulaire en différentes rubriques. Cela peut être
utile si celui-ci devient long. Vous pouvez ensuite donner une légende à chaque rubrique grâce à
l’élément legend.

1-html_css.odt 80
 Classe de 2nde ICN

Pour créer le bouton d’envoi, on va tout simplement utiliser un input de type submit avec un attribut
value.

Il ne reste « plus » qu’à apprendre à traiter les données grâce au langage PHP...

1-html_css.odt 81
 Classe de 2nde ICN

5. Aller plus loin

5.1. Le responsive design
Lorsque l’on parle de responsive design, on parle généralement de l’ensemble des techniques nous
permettant de créer un site qui pourra s’adapter en fonction de la taille de l’écran de vos visiteurs.
Aujourd’hui, nous disposons de trois moyens pour créer un site pouvant s’adapter à différents
terminaux :
1. Créer un site dédié pour chaque terminal différent (un site pour mobile, un site pour
tablettes, un pour ordinateur, etc.)
2. Créer des applications mobiles natives (pour Android, iPhone, etc.)
3. Créer une version responsive de votre site.
Chaque méthode possède des avantages et des inconvénients, ainsi que des prix divers. Dans notre
cas, nous allons nous intéresser à la dernière : la création d’une version responsive.
Pour créer la version responsive de notre site, nous allons utiliser ce qu’on appelle des media
queries, qui ne sont in plus ni moins que des règles qui seront appliquées selon certaines conditions
(par exemple, lorsque la taille d’un écran est comprise entre X et Y pixels).
On va ainsi, grâce au media queries, pouvoir modifier le style de chaque élément de notre site web
afin de l’adapter à l’écran de vos visiteurs. La détection de la taille de l’écran se fait évidemment
automatiquement.
Deux solutions s’offrent à nous pour appliquer des media queries : soit on crée un nouveau fichier
CSS (généralement, son nom sera responsive.css), soit on rajoute ces règles dans notre fichier CSS
principal.
Si l’on utilise la première solution, il nous faudra charger une feuille de style différente selon la
taille de l’écran de vos visiteurs. Pour cela, nous devrons modifier l’élément link contenu dans
l’élément head de notre page HTML.
 Classe de 2nde ICN

Notre media query ici correspond à la ligne avec le arobase. Comme vous le voyez, nous allons
réécrire des propriétés CSS à l’intérieur de nos media queries.
Dans cet exemple, nous affichons par défaut tous les paragraphes de notre page HTML en rouge.
Cependant, notre media query vient changer cela. Pour faire court, les paragraphes s’afficheront en
bleu pour tous les écrans dont la taille sera inférieure à 1280px.
Lorsque l’on veut créer une version responsive d’un site, on utilisera très souvent la media query
@media. Cependant, vous devez savoir qu’il en existe bien d’autres, comme par exemple @width,
@height, @color, @orientation, etc.
De même, nous utiliserons majoritairement @media all (la règle s’appliquera à tous les types
d’écrans), mais nous pouvons également utiliser @media screen (la règle ne s’applique qu’aux
écrans classiques, @media handheld (mobile) ou encore @media tv (télévision).

1-html_css.odt 83
 Classe de 2nde ICN

Ici donc on demande aux paragraphes de s’afficher en bleu avec une bordure d’1px solide et bleue
pas défaut.
Cependant, on pose une règle supplémentaire : si la taille de l’écran (ici, la taille de notre fenêtre «
output ») est inférieure à 300px pour un écran classique, alors les paragraphes s’affichent désormais
en orange, ont une bordure verte en tirets de 3px d’épaisseur et on applique un type inline-block à
nos paragraphes.
Cet exemple devrait vous faire comprendre tout ce qu’il est possible de faire grâce aux media
queries : vous pouvez changer le type d’un élément, adapter la taille d’une boîte, ajouter des
propriétés clear pour un meilleur rendu selon la taille de l’écran ou encore changer le
positionnement de vos éléments.

5.2. Les pseudo-classes en css

Le CSS permet de changer le style de nos éléments selon l’état de ceux-ci, c’est-à-dire de façon
dynamique. Pour faire cela, nous allons utiliser ce qu’on appelle les pseudo-classes (ou pseudo-
formats).
Les pseudo-classes peuvent par exemple être utilisées pour modifier l’apparence d’un élément
lorsque la souris de vos visiteurs est dessus, ou lorsque l’élément a déjà été cliqué.
Pour modifier l’apparence d’un élément au survol de la souris, nous allons utiliser la pseudo
classe :hover de cette façon :

1-html_css.odt 84
 Classe de 2nde ICN

Dans le premier état, ma souris n’est pas sur l’élément p, donc rien ne se passe. Dans le second cas,
en revanche, j’ai passé ma souris sur l’élément p. Celui-ci se color donc en rouge.
On peut également appliquer différents styles à des éléments selon qu’ils aient été cliqués ou non
grâce au pseudo-classes :active (lors de la sélection) et :visited (une fois cliqué).
On appliquera souvent ces pseudo-classes à des éléments de type lien.
Ci-dessous, on applique une couleur rouge ainsi qu’une mise en gras au lien lors du clic, puis
ensuite une couleur verte après qu’on l’ait cliqué.
Voici le résultat au moment du clic :

1-html_css.odt 85
 Classe de 2nde ICN

Et une fois que le lien a déjà été cliqué :

Les pseudo-classes peuvent nous mener beaucoup plus loin et nous permettre d’appliquer des styles
à des éléments très précis ou selon un état précis des éléments.
Voici ci-dessous une liste de toutes les pseudo-classes utilisables :

5.3. Les pesudo-elements en css

Les pseudo-éléments sont utilisés en CSS pour modifier l’apparence de certaines parties spécifiques
d’un élément.
Les pseudo-éléments peuvent être utilisés, entre autres, pour modifier l’apparence de la première
lettre d’un élément ou pour insérer du contenu avant ou après un élément.

1-html_css.odt 86
 Classe de 2nde ICN

L’utilisation des pseudo-éléments est très proche de celle des pseudo-classes, je ne m’étendrais donc
pas autant dessus. Attention cependant : on va utiliser cette fois « :: » et non pas « : ».
Voici la liste des pseudo-éléments disponibles en CSS :

Voyons un exemple avec le pseudo-élément ::before par exemple.

5.4. Les éléments structurants du HTML5

Un des grandes nouveautés du HTML5 a été d’introduire des éléments structurants.
L’idée était une nouvelle fois d’améliorer la sémantique et de nous permettre également de faciliter
nos mises en page.
Ces éléments vont nous permettre de dire aux moteurs de recherche « ceci est l’en-tête de mon site
», « ceci est un article », « ceci est une section » ou encore « ceci est mon pied de page ».
Les éléments structurants introduits sont les suivants :
• Header (l’en-tête de votre site) ;
• Nav (votre menu principal de navigation) ;
• Section (pour grouper des éléments en fonction d’une thématique commune) ;
• Article (un article indépendant) ;
• Aside (informations complémentaires) ;

1-html_css.odt 87
 Classe de 2nde ICN

• Footer (le pied de page).

En pratique, voilà à quoi correspondent les différents éléments :

Ainsi, idéalement, tout le contenu du header devrait être placé entre les balises <header>, tout le
contenu du footer entre les balises <footer>, etc.
Il y a fort à parier que ces éléments vont être de plus en plus pris en compte par les moteurs de
recherche et vont compter de plus en plus pour le référencement des sites, ne les négligez donc pas !

1-html_css.odt 88