F O R M AT I O N

HTML CSS
J AVA S C R I P T
 À la fin de la formation, vous serez capable de :

OBJECTIF
• Utiliser du code HTML ;

• Structurer une page web en HTML ;

• Utiliser du code CSS ;

• Mettre en forme une page web en CSS ;

• Organiser les éléments d’une page web grâce au CSS ;

• Modifier l'agencement d'une page HTML avec CSS ;

• Adapter une page pour les petites résolutions en CSS.

• Mémoriser les bases de JavaScript et de son utilisation pour

le DOM

• Gérer les évènements et les manipulations dynamiques

PROGRAMME
INTRODUCTION

PARTIE 1 - LES BASES DE HTML5

PARTIE 2 - METTEZ EN FORME VOS

PAGES AVEC CSS

PARTIE 3 – MISE EN PAGE AVEC HTML

ET CSS

PARTIE 4 - DÉCOUVREZ DES

FONCTIONNALITÉS ÉVOLUÉES

PARTIE 5 – JAVASCRIPT ET
MANIPULATION DU DOM
LE FONCTIONNEMENT DES SITES WEB
Avec le navigateur, vous pouvez consulter n'importe quel site web.
Voici par exemple un navigateur affichant le célèbre site web
Wikipédia :

Les langages HTML et CSS sont à la base du

fonctionnement de tous les sites web. Quand vous
consultez un site avec votre navigateur, il faut savoir

INTRODUCTION
que, en coulisses, des rouages s'activent pour
permettre au site web de s'afficher. L'ordinateur se
base sur ce qu'on lui a expliqué en HTML et CSS
pour savoir ce qu'il doit afficher, comme le montre la
figure suivante.

4
5 INTRODUCTION
 LES RÔLES DE HTML ET CSS
• HTML (HyperText Markup Language) : il a fait son apparition dès 1991
lors du lancement du Web. Son rôle est de gérer et organiser le
contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché
sur la page : du texte, des liens, des images… Vous direz par exemple : «
Ceci est mon titre, ceci est mon menu, voici le texte principal de la
page, voici une image à afficher, etc. » ;

• CSS (Cascading Style Sheets, aussi appelées feuilles de style) : le rôle du

INTRODUCTION
CSS est de gérer l'apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte…). Ce langage est
venu compléter le HTML en 1996.

6
■ Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci
ne sera pas très beau : l'information apparaîtra « brute ». C'est pour cela que
le langage CSS vient toujours le compléter.

INTRODUCTION
7
 L'ÉDITEUR DE TEXTE
■ Il existe effectivement de nombreux logiciels dédiés à la création de
sites web
■ VS code Text : mon éditeur
■ VS code est un éditeur de texte devenu très populaire parmi les
développeurs. On l'utilise aussi bien pour développer en HTML et CSS
que dans d'autres langages (Python, Ruby, etc.). Il fonctionne sur
Windows, Mac OS X et Linux.
■ Il a l'avantage d'être simple, épuré et facile à lire dès le départ. Pas de

INTRODUCTION
centaines de boutons dont on ne comprend pas à quoi ils servent.

8
 Les navigateurs

■ Le navigateur est le programme qui nous permet de voir les sites web
■ e travail du navigateur est de lire le code HTML et CSS pour afficher un résultat
visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur
affichera les titres en rouge. Le rôle du navigateur est donc essentiel !

INTRODUCTION
9
PA R T I E 1 - L E S B A S E S D E H T M L 5
1. Organisez votre texte

2. Créez des liens

3. Insérez des images

10
 C R É E Z VOT R E PR E M I È R E PAG E WE B E N H T M L

nous allons créer notre site dans un éditeur de texte , VS CODE

Pour créer une page web il faut créer

un fichier avec l’extention html dans
notre cas notre fichier est site.html

LES BASES DE HTML5

Les extensions indiquent à votre ordinateur quelle
application a créé ou peut ouvrir le fichier et quelle
icône utiliser pour le fichier. Par exemple,
l’extension docx indique à votre ordinateur que
Microsoft Word peut ouvrir le fichier et afficher une
icône Word lorsque vous l’affichez dans

11
 ■ On va faire un petit essai. Je vous invite à écrire ce qui vous passe par la tête, comme moi
à la figure suivante.
• Ouvrez maintenant
l'explorateur de fichiers dans le
dossier où vous avez
enregistré votre page
• L'icône qui représente le fichier
dépend de votre navigateur
web par défaut, en général.
Vous pouvez y voir une icône
de Firefox, de Chrome...

LES BASES DE HTML5

■ Le texte s'affiche sur la même ligne alors qu'on avait demandé à l'écrire sur deux lignes
différentes. Que se passe-t-il ?
■ En fait, pour créer une page web, il ne suffit pas de taper simplement du texte comme on vient
de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle des balises, qui vont
donner des instructions à l'ordinateur comme « aller à la ligne », « afficher une image », etc

12
 Les balises et leurs attributs
■ Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran
pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
■ Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des
symboles < et > , comme ceci : <balise> .
■ On distingue deux types de balises : les balises en paires et les balises orphelines.
• Les balise en paires

LES BASES DE HTML5

• Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent

<titre>Ceci est un titre</titre>

• On distingue une balise ouvrante ( <titre> ) et une balise fermante ( </titre> ) qui indique que le titre se
termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un
titre.
Ceci n'est pas un titre <titre>Ceci est un titre</titre>
Ceci n'est pas un titre

13
• Les balises orphelines

• Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut
juste dire à l'ordinateur « Insère une image ici ».

• Une balise orpheline s'écrit comme ceci :

<image />

LES BASES DE HTML5

Les attributs

■ Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner
des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante
et a le plus souvent une valeur, comme ceci :

<balise attribut="valeur">

14
 S T R U C T U R E D E B A S E D ' U N E PA G E H T M L 5
■ Reprenons notre éditeur de texte Je vous invite à écrire le code source ci-dessous dans votre
éditeur de texte. Ce code correspond à la base d'une page web en HTML5 :

<!DOCTYPE html>
Vous noterez que les balises s'ouvrent et se
<html> ferment dans un ordre précis. Par exemple, la
<head> balise <html> est la première que l'on ouvre et
<meta c'est aussi la dernière que l'on ferme (tout à la

LES BASES DE HTML5

charset="utf-8" /> fin du code, avec </html> ). Les balises doivent
<title>Titre</ être fermées dans le sens inverse de leur
title> ouverture. Un exemple :
</head>
<html><body></body></html> : correct. Une
balise qui est ouverte à l'intérieur d'une autre
<body> doit aussi être fermée à l'intérieur.

</body> <html><body></html></body> : incorrect, les

</html> balises s'entremêlent.

15
Le doctype

■ La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique
qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point
d'exclamation). Vous pouvez considérer que c'est un peu l'exception qui confirme la règle.
La balise </html>

■ C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous
pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !
<html>

LES BASES DE HTML5

L'encodage ( charset )
</html>
■ Cette balise indique l'encodage utilisé dans votre fichier .html
■ L'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les
caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères
arabes, etc.)..

16
L'en-tête <head> et le corps <body>

■ Une page web est constituée de deux parties :

■ L'en-tête <head> : cette section donne quelques informations générales sur la page,
comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est
généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur
la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles
sont cependant très importantes !
■ Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous
écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure

LES BASES DE HTML5

partie de notre code.
■ Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre
aux deux balises contenues dans l'en-tête…

17
■ Le titre principal de la page
■ <title>
■ C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle
contient.
■ Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre
page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet, comme sur la figure suivante.

LES BASES DE HTML5

18
 L E S C O M M E N TA I R E S
■ Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas
affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.
■ Cela sert à vous et aux personnes qui liront le code source de votre page. Vous
pouvez utiliser les commentaires pour laisser des indications sur le fonctionnement
de votre page.
■ Un commentaire est une balise HTML avec une forme bien spéciale :

LES BASES DE HTML5

<!-- Ceci est un commentaire -->

19
 L E S PA R A G R A P H E S
■ La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le
langage HTML propose justement la balise <p> pour délimiter les paragraphes.
<p>Bonjour et bienvenue sur mon site !</p>
■ <p> signifie « Début du paragraphe » ;
■ </p> signifie « Fin du paragraphe ».
■ Comme je vous l'ai dit au chapitre précédent, on écrit le contenu du site web entre les balises <body></
body> . Il nous suffit donc de mettre notre paragraphe entre ces deux balises et nous aurons enfin notre
première vraie page web avec du texte !

LES BASES DE HTML5

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<title>Mon super Site</title>
</head>

<body>
<p> Bonjour et bienvenue sur mon
site ! </p>
</body>

</html>

20
Sauter la ligne
■ En HTML, si vous appuyez sur la touche Entrée , cela ne crée pas une nouvelle ligne comme vous en avez l'habitude Tout le texte s'affiche sur la même ligne
alors qu'on est bien allé à la ligne dans le code ! Taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc strictement à rien.
■ En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise <p>

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-

LES BASES DE HTML5

scale=1.0">
<title>Mon super Site</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site ! Ceci est mon premier
test alors soyez indulgents s'il vous plaît, j'apprends
petit à petit comment cela marche.</p>
<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3
jours quand j'aurai appris un peu plus de choses, je vous
assure que vous allez être surpris !</p>

</body>

</html>

21
 LES TITRES
■ Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir difficile
pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles.
■ En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents. Je veux dire par là qu'on
peut dire « Ceci est un titre très important », « Ceci est un titre un peu moins important », « Ceci est un
titre encore moins important », etc. On a donc six balises de titres différentes :
■ <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au
début de celle-ci ;
■ <h2> </h2> : signifie « titre important » ;

LES BASES DE HTML5

■ <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre », si vous voulez)
;
■ <h4> </h4> : titre encore moins important ;
■ <h5> </h5> : titre pas important ;
■ <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

22
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mon super Site</title>
</head>

<body>
<h1>Bienvenue sur notre ecole !</h1>
<p>Bonjour et bienvenue sur mon site : notre ecole.<br />
Notre ecole, qu'est-ce que c'est ?</p>
<h2>Des cours pour débutants</h2>
<p>Notre ecole vous propose des cours (tutoriels) destinés aux
débutants : aucune connaissance n'est requise pour
lire ces cours !</p>
<p>Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à

LES BASES DE HTML5

créer un site web, à programmer, à construire
des mondes en 3D !</p>
<h2>Une communauté active</h2>
<p>Vous avez un problème, un élément du cours que vous ne comprenez
pas ? Vous avez besoin d'aide pour créer votre
site ?<br />
Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes
pas le seul dans ce cas et vous trouverez très
certainement quelqu'un qui vous aidera aimablement à résoudre
votre problème.</p>

</body>

</html>

23
 LES LISTES
■ Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations.
■ Nous allons découvrir ici deux types de listes :
■ les listes non ordonnées ou listes à puces ;
■ les listes ordonnées ou listes numérotées, ou encore énumérations.
1, Liste non ordonnée

LES BASES DE HTML5

■ C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas de « premier » ni de «
dernier »). Créer une liste non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin
avec </ul> <ul></ul>
■ Commencez donc à taper ceci :
■ Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre deux balises <li></li> .
Chacune de ces balises doit se trouver entre <ul> et </ul> . Vous allez comprendre de suite avec cet exemple :
<body>
<ul>
<li>Fraises</li>
<li>Framboises</
li>
<li>Cerises</li>
</ul>

24
</body>
Liste ordonnée

■ Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer
<ul></ul> par <ol></ol> .
■ À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour délimiter
les éléments.

<body>
<h1>Ma journée</h1>
<ol>
<li>Je me lève.</li>
<li>Je mange et je bois.</li>

LES BASES DE HTML5

<li>Je retourne me coucher.</li>
</ol>
</body>

25
 UN LIEN VERS UN AUTRE SITE

Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> .
Il faut cependant lui ajouter un attribut, href , pour indiquer vers quelle page le lien
doit conduire.

Par exemple, le code ci-dessous est un lien qui amène vers google, situé à

LES BASES DE HTML5

l'adresse :https://google.com

<body>
<p>Bonjour. Vous souhaitez visiter <a href="https://google.com">google</a> ?
<br />
C'est un bon site pour vos recherche!</p>
</body>

26
 U N L I E N V E R S U N E A U T R E PA G E
DE SON SITE
■ Pour commencer, nous allons créer deux fichiers correspondant à deux pages HTML différentes.
Comme je suis très inspiré, je vous propose de les appeler page1.html et page2.html . Nous
aurons donc ces deux fichiers sur notre disque dans le même dossier (figure suivante).

si les deux fichiers sont situés

dans le même dossier, il suffit
d'écrire comme cible du lien le

LES BASES DE HTML5

nom du fichier vers lequel on
veut amener. Par exemple : <a
href="page2.html"> . On dit
que c'est un lien relatif.

27
■ Voici le code que nous allons utiliser dans nos fichiers page1.html et page2.html .
■ page1.html
<p>Bonjour. Souhaitez-vous consulter <a
■ href="page2.html">la page 2</a> ?</p>
page2.html
■ La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien
arrivé sur la page 2 :

<h1>Bienvenue sur la page 2 !</h1>

LES BASES DE HTML5

28
 D E U X PA G E S S I T U É E S D A N S D E S D O S S I E R S D I F F É R E N T S

■ Imaginons que page2.html se trouve dans un sous-dossier appelé contenu , comme à la figure
suivante.
Dans ce cas de figure, le lien doit être rédigé comme ceci :
<a href="contenu/page2.html">

S'il y avait plusieurs sous-dossiers, on écrirait ceci :

LES BASES DE HTML5

<a href="contenu/autredossier/page2.html">

Si votre fichier cible est placé dans un dossier qui se

trouve « plus haut » dans l'arborescence, il faut écrire
deux points, comme ceci :

<a href="../page2.html">

29
 RÉSUMÉ EN IMAGES
■ Les liens relatifs ne sont pas bien compliqués à utiliser une fois qu'on a compris le principe. Il
suffit de regarder dans quel « niveau de dossier » se trouve votre fichier cible, pour savoir
comment écrire votre lien. La figure suivante fait la synthèse des différents liens relatifs
possibles.

LES BASES DE HTML5

30
■
INSÉRER UNE IMAGE
Quelle est la fameuse balise qui va nous permettre d'insérer une image ? Il s'agit de… <img /> !
■ C'est une balise orpheline (comme <br /> ). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires, comme la plupart des
autres balises que nous avons vues jusqu'ici. En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste
insérer une image à un endroit précis.
■ La balise doit être accompagnée de deux attributs obligatoires :
■ src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin absolu (ex. : http://
www.site.com/fleur.png ), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier
images , vous devrez taper : src="images/fleur.png"
■ alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que
contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les navigateurs

LES BASES DE HTML5

de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas « voir » l'image. Cela aide aussi les robots des moteurs
de recherche pour les recherches d'images. Pour la fleur, on mettrait par exemple : alt="Une fleur"
■ Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe ( <p></p> ). Voici un exemple d'insertion d'image :

<p>
Voici une photo que j'ai prise lors de mes dernières vacances à
la montagne :<br />
<img src="images/montagne.jpg" alt="Photo de montagne" />
</p>

31
• Mettez en place le CSS
• Formatez du texte
CSS
• Ajoutez de la couleur et un fond
• Créez des bordures et des ombres
• Créez des apparences dynamiques

CSS
32
 O Ù É C R I T- O N L E C S S ?
■ Vous avez le choix car on peut écrire du code en langage CSS à trois endroits
différents :
■ dans un fichier .css (méthode la plus recommandée) ;
■ dans l'en-tête <head> du fichier HTML ;
■ directement dans les balises du fichier HTML via un attribut style (méthode la moins
recommandée).

CSS
33
 DA N S U N F I C H I E R . C S S (RECOMMANDÉ)
■ C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un
même fichier. J'utiliserai cette technique dans toute la suite de ce cours.
■ Commençons à pratiquer dès maintenant ! Nous allons partir du fichier HTML suivant :

<!DOCTYPE html>
<html>

Vous noterez le contenu de la ligne 5, <link <head>

rel="stylesheet" href="style.css" /> : c'est elle <meta charset="utf-8" />

P R É S E N TAT I O N T I T R E
<link rel="stylesheet" href="style.css" />
qui indique que ce fichier HTML est associé à
<title>Premiers tests du CSS</title>
un fichier appelé style.css et chargé de la mise </head>
en forme.
<body>
<h1>Mon super site</h1>
Enregistrez ce fichier sous le nom que vous <p>Bonjour et bienvenue sur mon site !</p>
voulez (par exemple, page.html ). Pour le <p>Pour le moment, mon site est un peu <em>vide</
moment, rien d'extraordinaire à part la nouvelle em>. Patientez encore un peu !</p>
</body>
balise que nous avons ajoutée.
</html>

34
■ Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Sublime Text)
et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut
dire)
p
:
{
color: blue;
}

■ Enregistrez le fichier
en lui donnant un
nom qui se termine
par .css , comme
style.css . Placez ce
fichier .css dans le
même dossier que
votre fichier .html

CSS
35
 ■ Dans votre explorateur de fichiers, vous devriez
■ Ouvrez maintenant votre fichier page.html les voir apparaître côte à côte. D'un côté le .html
dans votre navigateur pour le tester, , de l'autre le .css , comme à la figure suivante.
comme vous le faites d'habitude.
Regardez, c'est magique : vos
paragraphes sont écrits en bleu, comme
dans la figure suivante !

CSS
36
Notes:

Un fichier html peut appeler plusieurs fichier css

Un fichier css peut être appeler par plusieurs fichier html

L’appel au fichier css respect la meme logique que l’appel au lien relatif

CSS
37
 DA N S L ' E N - T Ê T E < H E A D > DU FICHIER HTML

<!DOCTYPE html>
<html>
Dans l'en-tête <head> du fichier
<head>
HTML
Il existe une autre méthode pour <meta charset="utf-8" />
utiliser du CSS dans ses fichiers <style>
HTML : cela consiste à insérer le p
code CSS directement dans une {
balise <style> à l'intérieur de l'en- color: blue;
tête <head> . }
</style>
Voici comment on peut obtenir
exactement le même résultat avec <title>Premiers tests du CSS</title>
un seul fichier .html qui contient le </head>
code CSS : <body>
<h1>Mon super site</h1>

CSS
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu

38
<em>vide</em>. Patientez encore un peu !</
 D I R E C T E M E N T DA N S L E S BA L I S E S ( N O N R E C O M M A N D É )

<!DOCTYPE html>
Dernière méthode, à <html>
manipuler avec
<head>
précaution : vous
pouvez ajouter un <meta charset="utf-8" />
attribut style à <title>Premiers tests du CSS</title>
n'importe quelle balise. </head>
Vous insérerez votre <body>
code CSS directement <h1>Mon super site</h1>
dans cet attribut : <p style="color: blue;">Bonjour et
bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu

CSS
<em>vide</em>. Patientez encore un peu !</
p>
</body>

39
 APPLIQUER UN STYLE : SÉLECTIONNER UNE BALISE

■ Dans un code CSS, on trouve trois éléments différents :

■ des noms de balises : on écrit les noms des balises dont on veut modifier
l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes
<p> , je dois écrire p ;
■ des propriétés CSS : les « effets de style » de la page sont rangés dans des
propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du
texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de
propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître
toutes par cœur ;
■ les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple,
pour la propriété color , il faut indiquer le nom de la couleur. Pour font-size , il faut
p
indiquer quelle taille on veut, etc.
{

CSS
color: blue;
}

40
■ Schématiquement, une feuille de style CSS ressemble donc à cela :
■ Comme vous le voyez, on écrit le nom de la
balise1 balise (par exemple h1 ) et on ouvre des
{ accolades pour, à l'intérieur, mettre les
propriete1: propriétés et valeurs que l'on souhaite. On peut
valeur1; mettre autant de propriétés que l'on veut à
propriete2: l'intérieur des accolades. Chaque propriété est
valeur2; suivie du symbole « deux-points » ( : ) puis de la
propriete3:
valeur correspondante. Enfin, chaque ligne se
termine par un point-virgule ( ; ).
valeur3;
} ■ Je vous apprendrai de nombreuses propriétés
balise2 dans les chapitres suivants. Pour le moment,
{
dans les exemples, on va juste changer la
couleur pour s'entraîner.
propriete1:
valeur1; ■ Le code CSS que nous avons utilisé jusqu'ici :
propriete2: ■ signifie donc en français : « Je veux que tous

CSS
valeur2; mes paragraphes soient écrits en bleu. ».
propriete3:
valeur3;

41
 APPLIQUER UN STYLE À PLUSIEURS BALISES

■ Prenons le code CSS suivant : h1

■ Il signifie que nos titres <h1> et nos textes importants <em> {
color: blue;
doivent s'afficher en bleu. Par contre, c'est un peu répétitif,
}
■ il existe un moyen en CSS d'aller plus vite si les deux balises em
doivent avoir la même présentation. Il suffit de combiner la {
color: blue;
déclaration en séparant les noms des balises par une virgule, comme
ceci : }
h1, em
{
color: blue;
}

CSS
42
 APPLIQUER UN STYLE : CLASS ET ID
■ Comment faire pour que certains paragraphes seulement soient écrits d'une manière différent
■ Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les
balises :
■ l'attribut class ;
■ l'attribut id .
■ les attributs class et id sont quasiment identiques. Il y a seulement une petite différence qu’on
verra par la suite
■ Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class .
■ Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise,
aussi bien titre que paragraphe, image, etc.

<h1 class=""> </h1>

<p class=""> </p>

CSS
<img class="" />

43
■ Par exemple, on va associer la classe introduction à notre premier paragraphe (ligne 12) :

■ Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction . Vous allez
pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises qui ont
comme nom 'introduction' soient affichées en bleu ».
■ Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme ci-
dessous faite le dans votre fichier css :

CSS
■ on sélectionne une class avec du css en mettant un point «.» comme prefixe au nom de la class

44
■ Testez le résultat : seul votre paragraphe appelé introduction va s'afficher en bleu (figure
suivante) !

CSS
45
■ Id :
■ il fonctionne exactement de la même manière que class , à un détail près : il ne peut être
utilisé qu'une fois dans le code.
■ ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par
exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo">
■ Si vous utilisez des id , lorsque vous définirez leurs propriétés dans le fichier CSS, il
faudra faire précéder le nom de l' id par un dièse (#) :

CSS
46
 Les balises universelles

■ Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id ) à certains mots qui, à
l'origine, ne sont pas entourés par des balises.
■ En effet, le problème de class , c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre
que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le
paragraphe
<p>Bonjoursuivant :
et bienvenue sur mon site !</
p>
■ Cela serait facile à faire s'il y avait une balise autour de « bienvenue » , mais malheureusement, il
n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.
■ En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière
(elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais
significative !) entre ces deux balises :
■ <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein
d'un paragraphe de texte pour sélectionner certains mots uniquement. Les balises <strong> et
<em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est
celle dont nous allons nous servir pour colorer « bienvenue » ;

CSS
47
■ <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p> ,
<h1> , etc., sont de la même famille. Ces balises ont quelque chose en commun : elles créent un
nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est
une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus
tard.
■ Pour le moment donc, nous allons utiliser plutôt la balise <span> . On la met autour de «
bienvenue », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !

CSS
48
 Formatez du texte : la taille
■ Pour modifier la taille du texte, on utilise la propriété CSS font-size . Mais comment
indiquer la taille du texte ? C'est là que les choses se corsent, car plusieurs
techniques vous sont proposées :

■ indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode

est très précise, mais il est conseillé de ne l'utiliser que si c'est absolument
nécessaire, car on risque d'indiquer une taille trop petite pour certains lecteurs ;

■ indiquer une taille relative : en pourcentage, « em » ou « ex », cette technique a

l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille
des visiteurs.

CSS
49
 Une taille absolue
■ Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16
pixels de hauteur, vous devez donc écrire :

CSS
50
 Une valeur relative
■ C'est la méthode recommandée, car le texte s'adapte alors plus facilement aux préférences de
tous les visiteurs.
■ Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille
avec des mots en anglais comme ceux-ci :
■ xx-small : minuscule ;
■ x-small : très petit ; p
■ small : petit ; {
■ medium : moyen ; font-size: small;
}
■ large : grand ;
h1
■ x-large : très grand ; {
■ xx-large : gigantesque. font-size: large;
}

CSS
51
 LA POLICE
■ La propriété CSS qui permet d'indiquer la police à utiliser est font-family . Vous devez écrire le nom de la
police comme ceci :

■ Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :
■ Arial ;
■ Arial Black ; balise
■ Comic Sans MS ; {
■ Courier New ; font-family:
■ Georgia ; police;
■ Impact ; }
■ Times New Roman ;
■ Trebuchet MS ;

CSS
■ Verdana.

52
 L'alignement
■ Le langage CSS nous permet de faire tous les
alignements connus : à gauche, centré, à droite et
justifié.
■ C'est tout simple. On utilise la propriété text-align
et on indique l'alignement désiré :
■ left : le texte sera aligné à gauche (c'est le
réglage par défaut) ;
■ center : le texte sera centré ;
■ right : le texte sera aligné à droite ;
■ justify : le texte sera « justifié ». Justifier le texte
permet de faire en sorte qu'il prenne toute la
largeur possible sans laisser d'espace blanc à la
fin des lignes. Les textes des journaux, par
exemple, sont toujours justifiés.
■ Regardez les différents alignements sur cet

CSS
exemple :

53
 Ajoutez de la couleur et un fond:Couleur du texte
■ Vous connaissez déjà la propriété qui permet de modifier la couleur du texte : il s'agit de color . Nous allons nous
intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs.
■ Seize couleurs, c'est quand même un peu limite quand on sait que la plupart des écrans peuvent en afficher seize
millions.
■ la notation hexadécimale :
■ Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour faire simple, c'est une combinaison de lettres et
de chiffres qui indiquent une couleur.
■ On doit toujours commencer par écrire un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F.
■ Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers indiquent une quantité de rouge, les deux suivants
une quantité de vert et les deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes
Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut.
■ Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais maintenant, ne me demandez pas
quelle est la combinaison qui produit de l'orange couleur « coucher de soleil », je n'en sais strictement rien.
■ Vous pouvez récupérer les code via google ^^

CSS
54
 Images de fond
■ La propriété permettant d'indiquer une image de fond est background-image . Comme
valeur, on doit renseigner url("nom_de_l_image.png") . Par exemple :

CSS
55
 BORDURE
• Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS vous permettent de
modifier l'apparence de vos bordures : border-width , border-color , border-style

• Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces
propriétés. Vous vous souvenez de la super-propriété background ? Cela fonctionne sur le même principe : on va pouvoir
combiner plusieurs valeurs.

• Pour border , on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :

P R É S E N TAT I O N T I T R E
• la largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px ) ;

• la couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ( black , red …), soit une
valeur hexadécimale ( #FF0000 ), soit une valeur RGB ( rgb(198, 212, 37) ) ;

56
Qui a dit que vous étiez obligé d'appliquer la même bordure aux quatre côtés de votre
élément ?

Taratata, si vous voulez mettre des bordures différentes en fonction du côté (haut,
bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez
utiliser ces quatre propriétés :

border-top : bordure du haut ;

P R É S E N TAT I O N T I T R E
border-bottom : bordure du bas ;

border-left : bordure de gauche ;

border-right : bordure de droite.

57
Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millénaires (ou presque). Depuis que CSS3
est arrivé, il est enfin possible d'en créer facilement !

La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille («
l'importance ») de l'arrondi en pixels :

P R É S E N TAT I O N T I T R E
58
•
LES OMBRES
Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit
d'une seule ligne de CSS pour ajouter des ombres dans une page !

• Nous allons ici découvrir deux types d'ombres :

• les ombres des boîtes ;

• les ombres du texte.

• box-shadow : les ombres des boîtes

• La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre
suivant :

P R É S E N TAT I O N T I T R E
• Le décalage horizontal de l'ombre.

• Le décalage vertical de l'ombre.

• L'adoucissement du dégradé.

• La couleur de l'ombre.

• Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :

59
 M I S E E N PA G E H T M L C S S
Les techniques de mise en page des CSS nous permettent de prendre des
éléments contenus dans une page web et d'en contrôler le placement par
rapport à leur position par défaut dans le flot d'une mise en page courante,
aux autres éléments environnants, à leur conteneur parents ou à la fenêtre

P R É S E N TAT I O N T I T R E
principale d'affichage.

60
D I S P O S I T I O N D E S É L É M E N T S PA R D É FA U T

Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son
élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont
la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la
hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu

P R É S E N TAT I O N T I T R E
d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette
manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau
bloc avec display: bloc ; (ou même display: inline-block ; qui mélange les caractéristiques
des deux).

61
 body {
<h2>Cours d'un document de base</h2> width: 500px;
margin: 0 auto;
<p>Je suis un élément de niveau bloc de base. }
Mes éléments de niveau bloc adjacents sont sur de
nouvelles lignes en dessous de moi.</p> p {
background: rgba(255,84,104,.3);
<p>Par défaut, nous occupons 100% de la largeur border: 2px solid rgb(255,84,104);
de notre élément parent et nous sommes aussi hauts padding: 10px;
que notre contenu enfant. Nos largeur et hauteur totales margin: 10px;
sont égales à la largeur/hauteur de notre }
contenu + remplissage + encadrement.</p>
span {
<p>Nous sommes séparés de nos marges. background: white;
Comme il y a fusion des marges, nous sommes séparés border: 1px solid black;
par la largeur de l'une de nos marges et non les deux.</p> }

<p>Des éléments inline <span>comme celui-ci</span> ou

P R É S E N TAT I O N T I T R E
<span>celui‑là</span> sont placés sur la même ligne et
les nœuds de texte adjacents, s'il y a de la place sur
la même ligne. Les débordements des éléments inline
<span>sont placés sur une nouvelle ligne si possible
(comme celle‑ci contenant du texte)</span>, sinon ils
sont placés sur une nouvelle ligne, comme cette image&nbsp;:
<img src="long.jpg"></p>

62
 FLEXBOX
Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les
flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et
frustrants.

Les simples exigences de mise en page suivantes sont difficiles sinon impossibles à réaliser de manière pratique et souple avec ces outils :

Centrer verticalement un bloc de contenu dans son parent ;

Faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;

P R É S E N TAT I O N T I T R E
Faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.

Comme vous le verrez dans les paragraphes suivants, Flexbox facilite considérablement les tâches de mise en page. Approfondissons un
peu !

63
Pour commencer, sélectionnons les éléments devant être présentés sous
forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la
propriété display du parent de ces éléments à disposer. Dans ce cas, comme
cela concerne les éléments <article>, nous affectons la valeur flex à l'élément
<section> (qui devient un conteneur flex) :

P R É S E N TAT I O N T I T R E
64
Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

• L'axe principal (main axis) est l'axe de la direction dans laquelle sont disposés les éléments flex (par
exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin
de cet axe sont appelés l'origine principale (main start) et la fin principale (main end).

• L'axe croisé (cross axis) est l'axe perpendiculaire à l'axe principal, c'est-à-dire à la direction dans
laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début (cross

P R É S E N TAT I O N T I T R E
start) et la fin (cross end) de l'axe croisé.

• L'élément parent dont la propriété est display: flex (<section> dans notre exemple) est appelé le
conteneur flex (flex container).

• Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés
éléments flex (flex items) (les éléments <article> dans notre exemple).

65
66 P R É S E N TAT I O N T I T R E
Flexbox dispose de la propriété flex-direction pour indiquer la direction de
l'axe principal (direction dans laquelle les enfants flexibles sont disposés).
Cette propriété est égale par défaut à row : ils sont donc disposés en ligne,
dans le sens de lecture de la langue par défaut du navigateur (de gauche

P R É S E N TAT I O N T I T R E
à droite, dans le cas d'un navigateur français).

Ajoutez la déclaration suivante dans la règle CSS pour l'élément <section>

:

67
68 P R É S E N TAT I O N T I T R E
quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments
flex débordent du conteneur et brisent cette structure.

P R É S E N TAT I O N T I T R E
69
Il existe plusieurs d’autre propriété flex je vous laisse le soin de les
découvrir sur le site suivant

https://www.w3schools.com/css/css3_flexbox.asp

P R É S E N TAT I O N T I T R E
70
 L E S B O Î T E S F L O T TA N T E S

La propriété float a été introduite pour permettre aux développeurs web

d'implémenter des dispositions simples comme une image flottant dans
une colonne de texte, le texte se développant autour de cette image sur la
gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans

P R É S E N TAT I O N T I T R E
une mise en page de journal.

71
<h1>Exemple simple de boîte flottante</h1>
body {
<div class="box">Boîte flottante</div> width: 90%;
max-width: 900px;
<p> margin: 0 auto;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. font: .9em/1.2 Arial, Helvetica, sans-serif;
Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. }
Duis felis orci, pulvinar id metus ut, rutrum luctus orci.
Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. .box {
</p>
float: left;
margin-right: 15px;
<p>
Sed auctor cursus massa at porta. Integer ligula ipsum, width: 150px;
tristique sit amet orci vel, viverra egestas ligula. Curabitur height: 150px;
vehicula tellus neque, ac ornare ex malesuada et. In vitae border-radius: 5px;
convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet background-color: rgb(207,232,220);
turpis. Aenean finibus sollicitudin eros pharetra congue. Duis padding: 1em;
ornare egestas augue ut luctus. Proin blandit quam nec lacus }
varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

P R É S E N TAT I O N T I T R E
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus
ut, facilisis sed est. Nam id risus quis ante semper consectetur
eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus
suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus
eu urna eget velit cursus viverra quis vestibulum sem. Aliquam
tincidunt eget purus in interdum. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>

72
 LE POSITIONNEMENT

Le positionnement permet de sortir les éléments du flux normal de la

composition du document, et de les faire se comporter différemment, par
exemple en plaçant un élément sur un autre ou en occupant toujours la
même place dans la zone d'affichage du navigateur. Cet article explique

P R É S E N TAT I O N T I T R E
les diverses valeurs de position, et comment les utiliser.

73
Le positionnement statique est celui reçu par défaut par chaque élément. Cela veut tout simplement dire « positionner l'élément selon
le flux normal, rien de spécial à voir ici ».

Pour illustrer ce positionnement (et disposer d'exemple qui nous servira pour les prochaines sections), ajoutez tout d'abord une classe
positioned pour le deuxième <p> dans le HTML :

Si vous sauvegardez et actualisez, vous verrez qu'il n'y a

aucune différence, à l'exception de la mise à jour de la
couleur de l'arrière-plan du deuxième paragraphe. C'est
correct, comme nous l'avons vu plus tôt, le

P R É S E N TAT I O N T I T R E
positionnement statique est le comportement par défaut !

74
• Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au
positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de
la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres
éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

• Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment
modifier la position de l'élément ? Vous avez besoin d'employer les propriétés top, bottom, left et right

• top, bottom, left et right sont utilisés conjointement à position pour définir exactement là où placer l'élément
positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positioned dans le CSS :

P R É S E N TAT I O N T I T R E
75
Le positionnement absolu nous apporte des résultats bien différents.

Appliquer position: absolute

Modifions la déclaration de position dans le code :

P R É S E N TAT I O N T I T R E
76