J'aimerais créer mon propre site web… mais je n’y connais rien… Par où

commencer ?
Vous allez vous initier à la programmation avec des langages accessibles,
faciles à apprendre, et incontournables du Web : HTML5 et CSS3.

C’est très souvent par ces langages qu’on commence quand on apprend à
programmer, car ils sont à la base de tous les sites que vous pouvez voir
lorsque vous naviguez sur internet !

Si vous pensez ne pas avoir le niveau pour suivre ce cours, ne vous inquiétez pas :
HTML et CSS sont des langages très abordables. Nous allons les découvrir pas à
pas : de toute façon, on vous explique tout et vous serez très vite capable d'ajouter
du texte à votre site, de construire un menu de navigation, d'insérer des images...
et bien plus encore !

Dans ce cours, vous allez commencer par apprendre à écrire en langage HTML !
Vous apprendrez à utiliser ce que l'on appelle des balises : elles vous permettront
de structurer les éléments qui constituent le contenu de votre site web. Ainsi, vous
verrez comment créer des titres, des paragraphes de texte, des liens hypertextes,
ou encore comment insérer des images sur vos pages web.

Ensuite, vous allez vous plonger dans le CSS ! Et là, vous vous demandez :

Mais pourquoi apprendre deux langages séparément ? Pourquoi ne pas avoir créé
un seul langage qui mixe HTML et CSS ? Pourquoi HTML n'est pas suffisant ?
Toutes ces questions sont de bonnes questions et il est totalement normal de se
les poser. Ce cours y répondra, mais si vous voulez une réponse en avant-
première, la voici : le HTML et le CSS sont deux langages qui se complètent, le
premier permet de créer et de structurer du contenu, le second permet de faire de
la mise en forme visuelle et dynamique. En bref, le CSS permet d'avoir la main sur
le style, autrement dit le look de votre site web. Sans lui, votre site ressemblerait à
ce que l'on faisait dans les années 90-2000. Bref, c'est le CSS qui rendra votre site
web moderne et créatif.

En basculant sur le langage CSS, vous découvrirez une nouvelle syntaxe, c'est-à-
dire, une nouvelle façon d'écrire du code. Mais vous verrez, elle ne sera pas
fondamentalement différente. Dites-vous déjà que :

1. en HTML, vous utiliserez des balises qui permettent de décrire votre contenu -
vous les écrirez entre chevrons < > ;
2. en CSS, vous utiliserez des propriétés qui permettent d'appliquer du style à des
éléments HTML - vous les écrirez entre accolades { }.
 Mais comment appliquer un style CSS à des éléments HTML si ce sont deux
langages séparés ?
L'éditeur dans lequel vous écrirez du code permet d'écrire dans différents
langages, dont le HTML et le CSS. Ce que nous ferons, c'est tout simplement de
coder :

1. un fichier de contenu en HTML - qui aura l'extension .html ;

2. et un autre fichier de style en CSS - qui aura l'extension .css.

Ces deux fichiers seront enregistrés sur votre ordinateur. Pour les faire
communiquer, il suffira d'ajouter une seule ligne de code dans le fichier HTML !
Grâce à cette ligne de code, dès que vous cliquerez sur votre fichier HTML pour
l'ouvrir afin de regarder votre site web sur le navigateur, il appellera
automatiquement le fichier CSS. Cela vous permettra d'admirer la mise en style
que vous aurez appliquée et de la modifier à loisir sans toucher au contenu.

Et vous verrez que le langage CSS fait vraiment la différence sur un site web : vous
apprendrez à mettre en forme votre texte et notamment à utiliser la police de
caractères de votre choix. Vous apprendrez aussi à appliquer de la couleur sur
différents éléments HTML, comme le texte, mais également le fond d'une portion
de texte ou encore le fond de toute la page. Vous découvrirez comment créer des
bordures et des ombres sur des blocs pour faire une mise en page plus visuelle ;
mais aussi comment ajouter des effets d'interaction avec les futurs visiteurs de
votre site web, pour le rendre dynamique !

Sans mise en page, votre contenu s'afficherait bêtement de manière linéaire, de

haut en bas, les éléments les uns à la suite des autres… C'est dommage ! Dans ce
cours, je vous présenterai différentes techniques pour faire de belles mises en
page, notamment CSS grid et Flexbox.

Alors, prêt à réaliser un site web de A à Z ? C’est parti !

Comprenez le rôle du HTML

Le HTML (HyperText Markup Language) a fait son apparition dès 1991 lors du
lancement du Web. Son rôle est de gérer et d’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… En “français”, cela consiste à dire par exemple : “Ceci est
mon titre”, “Ceci est mon menu”, “Voici une image à afficher”, etc.
 Comprenez le rôle du CSS
Le CSS (Cascading Style Sheets, aussi appelées feuilles de style) a pour rôle 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

Comprenez le rôle du navigateur

Les rôles du HTML et du CSS se complètent. Mais ensuite, c’est le navigateur web
qui fait le reste du travail : 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 !
On ne dirait pas comme ça, mais un navigateur est un programme extrêmement
complexe. En effet, comprendre le code HTML et CSS n'est pas une mince affaire.
Les différents navigateurs n'affichent pas toujours le même site exactement de la
même façon ! Il faudra vous y faire, et prendre l'habitude de vérifier régulièrement que
votre site fonctionne correctement sur les navigateurs les plus utilisés.
Aujourd'hui, vous apprenez à développer dans un environnement quasi magique :
tous les navigateurs que vous utilisez embarquent des outils de développement
particulièrement sophistiqués, notamment l’outil d’inspection d’une page web.
En effet, l'inspection d'une page web permet très simplement d'accéder au HTML
et au CSS, et de faire des changements en temps réel. Pour cela, il vous suffit de
faire un clic droit sur n'importe quelle page, et de sélectionner l'inspecteur.

En résumé

• Le HTML constitue la structure d'une page web.

• Le CSS permet d'ajouter du style.
• Les deux langages se complètent avec un rôle bien défini pour chacun.
• Le navigateur est un logiciel qui permet de lire les langages du Web : HTML et CSS.
• Tous les navigateurs embarquent des outils de développement, dont l'outil
d'inspection qui permet d'accéder au HTML et au CSS d'une page.
 Appropriez-vous les balises HTML

Le langage HTML utilise ce qu'on appelle des balises. On les écrit entre chevrons
< et > :

Comment on fait les chevrons sur le clavier ?

Sur un PC, vous utilisez :

1. la touche < pour faire le chevron ouvrant ;

2. et Maj + < pour le chevron fermant.

Et elles servent à quoi les balises concrètement ?

Les balises indiquent la nature du texte qu'elles encadrent. Elles permettent au
navigateur de comprendre ce qu'il faut afficher à l'écran pour les visiteurs d'un site
web.
Si elles pouvaient parler, elles diraient :
<title> </title> : “Ceci est le titre de la page”,
<img>: “Ceci est une image”,
<p> </p>: “Ceci est un paragraphe de texte”, etc.
Ah tiens, pourquoi certaines balises sont doublées et prennent un / dans leur
syntaxe ?
On distingue deux types de balises :

1. Les balises en paires (une balise ouvrante et une balise fermante)

2. Et les balises orphelines (une seule balise).
 Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Si on prend la balise

title qui correspond au titre de la page, voilà ce que ça nous donne :
<title>Ceci est le titre de ma page</title>

On a donc :

1. Une balise ouvrante : <title> ;

2. Et une balise fermante : </title> .

Cela délimite ce qui sera traduit par un titre. Pour l'ordinateur, tout ce qui n'est pas
entre ces deux balises n'est pas un titre.

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”. Il n'y a donc
pas besoin de faire une balise ouvrante et une fermante, d'où l'appellation "balise
orpheline".
Une balise orpheline s'écrit comme ceci : <img>

Paramétrez vos balises avec des attributs

A la suite, on utilisera, en plus des balises, des attributs. Les attributs sont un peu
les options des balises. Ils viennent les compléter pour donner des informations
supplémentaires.
Un attribut est situé dans la balise ouvrante d'une balise en paire, ou directement
dans une balise orpheline, comme c'est le cas ci dessous avec la balise <img> :
 Utilisez la structure de base d'une page HTML

Pour écrire votre première vraie page web en HTML, ouvrez votre fichier
index.html sous Visual Studio Code et copiez-collez le code ci-dessous à la
place de ce que vous aviez juste avant.
<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>Le titre de ma page</title>

</head>

<body>

</body>

</html>

Tiens c'est quoi ce lang="fr"?

Bien vu ! Il s'agit d'un attribut. Nous l'avons ajouté pour préciser la langue du site
web que l'on va créer : lang=”fr”. Ce n’est pas obligatoire (la balise <html>
seule n’empêche pas le code de fonctionner), c’est simplement que si vous codez
un site web en langue française, cela vous évite de potentiels soucis d’affichage.
En outre, cela permet de mettre la langue par défaut de votre site web sur le
français.
Oui, d'ailleurs, l'ordre des balises est important dans cette structure de base ?
OUI ! Les balises s'ouvrent puis se ferment, et elles s'emboitent les unes dans les
autres dans un ordre précis.
 La syntaxe <html><body></html></body> est incorrecte : les balises
s'entremêlent.
La syntaxe <html><body></body></html> est correcte : une balise qui est ouverte à
l'intérieur d'une autre balise doit aussi être fermée à l'intérieur de celle-ci.
On a ainsi des éléments dits "parents", qui vont contenir d'autres éléments dits
"enfants" :

La structure de base en HTML

Voyons à quoi servent toutes ces balises.

• La première ligne <!DOCTYPE html> est une balise orpheline indispensable : elle
indique qu'il s'agit d'une page HTML.
• La balise en paire <html> </html> englobe tout le contenu de la page web. A
l'intérieur, il y a les balises en paire <head> </head> et <body> </body>.

Pour rappel, c’est dans cette balise qu'on peut préciser la langue par défaut du site web
:

• <html lang=”fr”> pour le français ;

• <html lang=”en”> pour l’anglais ;
• <html lang=”es”> pour l’espagnol…

Si besoin, voici la liste complète des codes de langue.

• La balise en paire <head> </head> contient deux balises qui donnent des
informations au navigateur : l’encodage et le titre de la page.
• La balise orpheline <meta charset="utf-8"> indique l'encodage utilisé dans le
fichier .html : cela détermine comment les caractères spéciaux s'affichent
(accents, idéogrammes chinois et japonais, etc.).

Si les accents s'affichent mal par la suite, c'est qu'il y a un problème avec l'encodage.
Vérifiez que la balise meta indique bien UTF-8, et que votre fichier est enregistré en
UTF-8.

• La balise en paire <title> </title> indique au navigateur le titre de la page

web. Toute page doit avoir un titre qui décrit ce qu'elle contient, il s'affichera dans
l'onglet du navigateur, et apparaîtra dans les résultats de recherche, comme sur
Google. Autant vous dire que bien choisir son titre est important !

• La balise en paire <body> </body> contient tout ce qui sera affiché à l'écran sur
la page web.

Avant de terminer, abordons une bonne pratique que tout développeur devrait
suivre : commenter son code.

Commentez votre code HTML

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.
OK, ça ne sert à rien alors ?!
Si ! Cela sert à vous qui développez 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. Cela vous permettra de vous rappeler comment
fonctionne votre page si vous revenez sur votre code source après un long moment
d'absence.
Et on fait comment pour écrire un commentaire ?
Un commentaire est une balise HTML avec une forme bien spéciale :
<!-- Ceci est un commentaire -->
 Vous pouvez le mettre où vous voulez au sein de votre code source.
Attention, tout le monde peut voir le code HTML source de votre page, une fois celle-ci
mise en ligne sur le Web, avec l’outil d’inspection. Vos commentaires seront donc
également visibles en faisant “Afficher le code source de la page”. Par conséquent, ne
mettez pas d'informations sensibles comme des mots de passe dans les
commentaires… et soignez votre code source, car je pourrai venir vérifier si vous avez
bien suivi le cours à la lettre !
D'ailleurs, dans la plupart des éditeurs de code, il existe un raccourci pour commenter
une ligne de code très rapidement.
Sur Visual Studio Code, pour transformer une ligne (ou même plusieurs lignes) en
commentaire :

À vous de jouer !

C'est maintenant le moment de mettre en pratique ce que vous avez appris.

Pour cet exercice, vous allez devoir partir de votre fichier index.html que vous
venez de créer et :

• y insérer la structure de base HTML ;

• changer le contenu de la balise <title> </title> pour avoir “Accueil – Robbie Lens
Photographie” ;
• écrire un commentaire dans <body> </body> .
 En résumé

• Pour créer une page web, on crée un fichier ayant l'extension .html , qui pourra
être ouvert dans le navigateur web simplement en faisant un double-clic dessus.
• Chaque fichier HTML est constitué de balises.
• Les balises peuvent avoir plusieurs formes :
o <balise> </balise> : balises en paires, elles s'ouvrent et se ferment pour
délimiter le contenu (début et fin d'un titre, par exemple) ;
o <balise> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles
permettent d'insérer un élément à un endroit précis (par exemple une image).
• Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires, ou paramétrer un élément (exemple : <img
src="photo.jpg"> ).
• Une page web est constituée de deux sections principales : l'en-tête<head>
</head> dont le contenu n'apparaît pas dans l'affichage de la page et le corps
<body> </body> qui, lui, apparaît.

Organisez votre texte

Le texte affiché sur une page web est compris entre les balises <body> </body>.
C'est donc dans <body> </body> que nous allons écrire du texte à afficher en
utilisant des balises HTML pour le structurer grâce à des paragraphes, des titres,
des listes ou encore mettre en avant du texte important.

Créez des paragraphes avec les balises <p> </p>

Les balises <p> </p> permettent de délimiter des paragraphes en HTML :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>Ma page</title>

</head>

<body>

<p>Ceci est le contenu de mon premier paragraphe</p>

<p>Ceci est le contenu de mon deuxième paragraphe</p>

 </body>

</html>

Oui, mais si je veux juste revenir à la ligne sans créer un paragraphe à chaque fois
?
Eh bien devinez quoi : il existe une balise pour cela !

Revenez à la ligne avec la balise orpheline <br>

Pour revenir à la ligne, on utilise la balise orpheline <br> (pour break), on n'a donc
pas besoin de la fermer :
<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>Ma page</title>

</head>

<body>

<p>Ceci est le contenu de mon premier paragraphe, <br>dont le contenu est particulièrement
long.</p>

<p>Ceci est le contenu de mon deuxième paragraphe</p>

</body>

</html>

Testez pour voir.

Créez des titres avec les balises <h1>, <h2>, <h3>…

Les balises de titres vont de <h1> </h1> jusqu'à <h6> </h6>, ce qui permet de
hiérarchiser et structurer le texte dans différentes sections, du niveau le plus
grand, au niveau le plus petit.
Il faut toujours structurer sa page en commençant par un titre de niveau 1<h1>,
puis structurer l'intérieur avec des titres de niveau 2<h2>, puis, si besoin de
structurer l'intérieur, utiliser des titres de niveau 3, etc. Il ne devrait pas y avoir de
sous-titre sans titre principal !
Ne confondez pas :

• La balise <h1> sert à créer un titre de niveau 1 qui sera affiché sur la page web.
 • La balise <title>n'affiche rien sur la page web, elle affiche le titre de la page
dans l'onglet du navigateur.

Ajoutons donc des balises de titre dans le code :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Ma page</title>

</head>

<body>

<h1>Bienvenue sur ma page</h1>

<p>Ceci est le contenu de mon premier paragraphe</p>

<p>Ceci est le contenu de mon deuxième paragraphe</p>

<h2>Voilà mon sous-titre 1</h2>

<h3>Une sous-partie</h3>

<p>Un paragraphe</p>

<h3>Une autre sous-partie</h3>

<p>Tiens encore un paragraphe</p>

<h2>Voilà mon sous-titre 2</h2>

</body>

</html>

Votre navigateur affiche par défaut des tailles différentes de texte en fonction des
titres, mais si vous voulez modifier la taille du texte, sachez que nous apprendrons
à faire cela en CSS un peu plus tard.

Créez des listes avec les balises <li> et <ul> ou <ol>

Étape 1 : balisez les éléments d'une liste avec <li> </li>

Pour baliser les éléments qu'on veut mettre dans une liste, on utilise <li> </li>
(pour "listed item" ou "élément de la liste" en français). Puis on les insère tous à
l'intérieur d'une autre balise pour indiquer s'il s'agit d'une liste à puces ou d'une
liste numérotée.
 Étape 2 : insérez la liste dans des balises <ul> </ul> ou <ol> </ol>

Les balises <ul> </ul>(pour "unordered list") permettent d'indiquer qu'on

démarre une liste non ordonnée, c'est-à-dire, ce que l'on appelle en français une
liste à puces.
Les balises <ol> </ol>(pour "ordered list") permettent d'indiquer qu'on démarre
une liste ordonnée, autrement dit en français une liste numérotée.
Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet
exemple :
<h1>Les fruits rouges</h1>

<ul>

<li>Fraises</li>

<li>Framboises</li>

<li>Groseilles</li>

</ul>

<h1>Ma journée</h1>

<ol>

<li>Je me lève.</li>

<li>Je mange et je bois de l'eau.</li>

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

</ol>

Mettez en valeur du texte important

Dans le texte qui s'affiche sur une page web, vous aimeriez faire ressortir certains
mots en particulier.
La balise la plus utilisée pour cela est <strong> mais HTML vous propose
différents moyens de mettre en valeur le texte de votre page :
Balises Traduction par le
navigateur
<mark> Surligner le texte.
</mark>
<em> </em> Mettre le texte en
italique.
<strong> Mettre le texte en gras.
</strong>
Testez pour voir !
Ok ! Mais cette mise en forme ne me plaît pas trop, on peut la changer ?
En fait, c'est le navigateur qui choisit comment afficher les mots qu'on lui indique
comme étant plus ou moins importants (en gras, en italique,…). Les balises <em>
et <strong> ne signifient pas respectivement “mettre en italique" ou "mettre en
gras” mais seulement que le texte est “important”. On pourra décider plus tard, en
CSS, d'afficher les mots “importants” d'une autre façon que le gras, si on le
souhaite.
Soit, et si je n'ai pas envie de faire ressortir du texte important, c'est grave ?
Les robots de moteurs de recherche parcourent le Web en lisant le code HTML de
tous les sites. Les mots-clés “importants”, mais aussi les titres (headings)
hiérarchisés auront tendance à avoir plus de valeur à leurs yeux ; donc si quelqu'un
fait une recherche sur ces mots, il a plus de chances de tomber sur votre site
(votre site aura un meilleur référencement).

Une nuance tout de même : abuser de ces balises n’aura pas l’effet escompté sur votre
référencement. Si quasiment tout le texte est signalé comme étant important, rien en
particulier ne va vraiment pouvoir "ressortir"… Pensez-y !

À vous de jouer

La photographe Robbie Lens nous a demandé de lui faire un site web pour mettre
en avant son travail. Mais il va lui falloir également une page pour se présenter.
Pour l'occasion, nous avons donc ajouté du contenu dans le fichier index.html
et créé une nouvelle page :a-propos.html.
 Vous allez :

1. créer le titre dans la page a-propos.html: "À propos de Robbie Lens" ;

2. créer le paragraphe associé : "Photographe depuis plus de 5 ans, je réalise des
reportages aux photos dynamiques et pertinentes pour vos projets de
communication. Créativité, qualité, et sérénité pour vous ! Je gère tout, depuis la
direction artistique, la réalisation du reportage, jusqu’à la livraison de vos photos
retouchées, prêtes à l’emploi." ;
3. créer un titre de niveau 2 pour ajouter une section nommée : "Services" ;
4. créer une liste non ordonnée pour lister les spécialités de Robbie Lens :
a. Portrait seul ou à plusieurs,
b. Shooting mode,
c. Retouches sur mesure,
d. Développement.

En résumé

• Le HTML comporte de nombreuses balises qui nous permettent d'organiser le

texte de notre page. Ces balises donnent des indications comme “Ceci est un
paragraphe”, “Ceci est un titre”, etc.
• Les paragraphes sont définis par la balise <p> </p> , et les sauts de ligne par la
balise orpheline <br>.
• Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon
l'importance du titre.
• On peut mettre en valeur certains mots avec les balises <strong>, <em> et
<mark>.
• Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée)
ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise
<li> pour chaque item.

Créez un lien hypertexte en HTML

On reconnaît facilement un lien hypertexte (ou hyperlien) sur une page web : par
défaut, il est en bleu et souligné dans le navigateur et un curseur en forme de main
apparaît lorsqu'on pointe dessus ; mais on peut modifier ce style en CSS.

Créez un lien hypertexte avec la balise <a> et l'attribut href

Pour faire un lien hypertexte :

1. on utilise la balise<a>(pour "anchor") pour indiquer qu'on va rediriger vers un autre
endroit,
2. puis, on ajoute l'attribut href suivi de=pour annoncer l'endroit vers lequel on veut
rediriger,
3. on indique explicitement entre " " l'endroit vers lequel le lien doit rediriger,
4. enfin, on écrit le texte qui doit s'afficher sur l'hyperlien.

À partir de là, il y a des subtilités selon l'endroit où l'on veut rediriger l'utilisateur.

Créez un lien hypertexte vers l'URL d'une page disponible sur internet

Si vous voulez faire un lien vers un autre site existant en ligne, rien de plus simple,
il suffit d'utiliser la méthode de copier l'URL du site entre " "à la suite de l'attribut,
comme ceci :
<a href="https://openclassrooms.com/fr/">Accédez à OpenClassrooms</a>

Ce type de lien hypertexte s'appelle un lien absolu : il indique une adresse complète.
Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu
différente, ce qui va nous être utile pour faire des liens entre les pages de notre
site.

Créez un lien hypertexte d'une page à une autre sur votre site

Souvenez-vous : pour l’instant nous n’avons pas d’URL disponible car le site n’est
pas encore en ligne. On va donc créer des liens entre nos pages en utilisant leur
nom, et en indiquant leur arborescence dans notre dossier en local.
Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier
HTML.

Cas n°1 : les deux pages sont situées dans un même dossier en local

Si les pages sont dans le même dossier, il suffit d'écrire comme cible du lien
hypertexte le nom du fichier vers lequel on veut amener, par exemple le fichier
nommé page2.html.
Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier
de page1.html :
<a href="page2.html">Page 2</a>

Mais comment faire si on veut créer un fichier page 3 et le déplacer dans un

dossier `/contenu`: comment indiquer le chemin relatif ?
Justement, la réponse est dans la question : en indiquant le chemin !
 Cas n°2 : les deux pages sont situées dans deux dossiers différents en local

Si on veut créer un fichier page 3 et le déplacer dans un autre dossier, par exemple
un dossier /contenu , on va donc indiquer le chemin à suivre pour trouver ce
fichier :
<a href="contenu/page3.html">Page 3</a>

Et s'il y a plusieurs sous-dossiers, on écrira ceci :

<a href="contenu/autredossier/page3.html">Page 3</a>

Et si le fichier ne se trouve pas dans un sous-dossier, mais dans un dossier

“parent”, on fait comment ?
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="../page3.html">Page 3</a>

Créez une ancre avec les attributs id et href

Une ancre est un repère que l'on peut mettre dans une page HTML si elle est très
longue, cela aide à la navigation et rend un contenu plus facile à parcourir. Cela permet
par exemple aux visiteurs d'un site web d'aller directement à la partie qui les intéresse.
Ce comportement est typique d'un site web "one page" où tout se situe sur la même
page.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors
servir de repère. Ce peut être n'importe quelle balise, une balise de titre par
exemple. Voyons comment faire :
La première étape consiste à ajouter l'attribut id suivi de = pour donner un nom à
l'ancre entre " " :
<h2 id="mon_ancre">Titre</h2>

L'attribut id sert à donner un nom “unique” à une balise, pour s'en servir de
repère. Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet attribut. Ici, on
s'en sert pour faire un lien vers une ancre mais, en CSS, il pourra nous être utile
pour repérer une balise précise, vous verrez.
Évitez de créer des id avec des espaces ou des caractères spéciaux ; utilisez
simplement, dans la mesure du possible, des lettres et des chiffres pour que la valeur
soit reconnue par tous les navigateurs.
La seconde étape consiste à indiquer où se situe l'ancre. La méthode pour se faire
varie selon que :

1. l'ancre est plus bas sur la même page

2. l'ancre est située sur une autre page
 Cas n°1 : l'ancre est plus bas sur la même page

Dans ce premier cas, on crée un lien avec l'attribut href (il contient un dièse #
suivi du nom de l'ancre) :
<a href="#mon_ancre">Aller vers l'ancre</a>

Voici un exemple de page comportant beaucoup de texte et utilisant les ancres :

<h1>Ma grande page</h1>

<p>

Découvrez nos conseils d’aménagement pour :<br>

<a href="#cuisine">La cuisine</a><br>

<a href="#jardin">Le jardin</a><br>

<a href="#salon">Le salon</a><br>

</p>

<h2 id="cuisine">La cuisine</h2>

<p>... (beaucoup de texte) ...</p>

<h2 id="jardin">Le jardin</h2>

<p>... (beaucoup de texte) ...</p>

<h2 id="salon">Le salon</h2>

<p>... (beaucoup de texte) ...</p>

Testez pour voir

Vous avez peut-être remarqué que l’on a commencé à utiliser du latin pour remplir
des zones de texte dans notre code. C'est normal, pas de panique ! Il s'agit du
"lorem ipsum", un “faux texte” qu'on peut ajouter provisoirement, de manière à
calibrer une mise en page avant la validation d’un texte définitif.

Cas n°2 : l'ancre est située dans une autre page

Dans ce cas-là, on tape le nom de la page cible avant le dièse # et enfin le nom de
l'ancre :
<a href="index.html#jardin">Le jardin</a>

Voici une nouvelle page qui contient trois liens, chacun amenant vers une des
ancres de la page de l'exemple précédent :
<h1>Le Mégamix</h1>

<p>

Rendez-vous quelque part sur la page :<br>

<a href="index.html#cuisine">La cuisine</a><br>

 <a href="index.html#jardin">Le jardin</a><br>

<a href="index.html#salon">Le salon</a><br>

</p>

Et voilà pour tout ce que vous devez savoir sur les liens !
Sachez qu'il est possible de configurer un lien pour qu'il ait un comportement un
peu particulier.

• target="_blank" fait en sorte que le lien hypertexte ouvre un nouvel onglet :

<p>Bonjour. Souhaitez-vous apprendre sur <a href="https://openclassrooms.com"

target="_blank">OpenClassrooms</a> ?</p>

• href="mailto:NOMDUMAIL@MAIL.COM" crée un lien hypertexte qui ouvre la boîte

mail avec un nouveau message vide.
• href="NOMDEFICHIER.EXTENSION" crée un lien hypertexte qui permet de
télécharger un fichier que vous avez placé au préalable dans le même dossier que
votre page web.

À vous de jouer

Vous allez maintenant pouvoir mettre en pratique ce que vous venez d'apprendre
sur les liens. Exceptionnellement pour cet exercice, la page a-propos.html a été
déplacée dans un dossier dossier-demo afin que vous puissiez tester votre
compréhension des liens relatifs.
Pour cet exercice, votre mission, si vous l'acceptez, est de :

• créer sur la page d'accueil un lien vers la page "À propos" (sans déplacer les
fichiers) ;
• créer sur la page a-propos.html un lien vers la page d'accueil (sans déplacer les
fichiers) ;
• ajouter les liens vers les réseaux sociaux (qui s'ouvrent dans un nouvel onglet) sur
la page d'accueil et la page "À propos" :
o pour Twitter, vous redirigerez vers "https://twitter.com/",
o pour Instagram, le lien pointe vers "https://www.instagram.com/".

Vous trouverez la base de code nécessaire pour débuter cet exercice sur la branche
P1C5-exercice. Pour vous aider si vous êtes bloqué, la solution se trouve sur la
branche P1C5-solution.
 En résumé

• Un lien hypertexte (ou hyperlien) permet de changer de page. Par défaut, il est en
bleu et souligné dans le navigateur mais on peut modifier ce style en CSS.
• Pour faire un lien hypertexte vers un site web existant, on utilise la balise <a> avec
l'attribut href pour indiquer l'adresse de la page web cible. Il s'agit d'un lien
absolu. Exemple : <a href="https://openclassrooms.com"> .
• Pour faire un lien hypertexte vers une autre page de son site, on utilise la balise <a>
avec l'attribut href pour indiquer le nom du fichier en local. Il s'agit d'un lien
relatif. Exemple : <a href="page2.html"> .
• Un lien hypertexte peut aussi permettre d'amener vers un endroit précis d'une
page. Il faut créer une ancre avec l'attribut id pour “marquer” cet endroit dans la
page, puis faire un lien vers l'ancre comme ceci : <a href="#ancre"> .

Insérez des images

Insérez une image avec la balise orpheline <img>

La balise qui permet d'insérer une image est une balise orpheline : <img>
Pour fonctionner correctement, la balise <img> doit être accompagnée de deux
attributs :

1. src : cet attribut permet d'indiquer la source de l'image.

2. alt : cet attribut permet de donner à l'image une description alternative.

Ajoutez l'attribut src pour indiquer la source de l'image

La source de l'image est précisée avec l'attribut src pour indiquer au navigateur
comment récupérer l'image que l'on veut insérer. De la même manière qu'un lien
hypertexte, on peut indiquer la source d'une image :

…avec un chemin absolu si l'image vient d'internet

On utilise un chemin absolu pour indiquer la source d'une image lorsque celle-ci
est en ligne, sur un site, ou qu'elle est hébergée sur le web. On copie colle donc
simplement l'URL de l'image.
 Lorsque vous utilisez cette technique, faites attention à ce que l'URL corresponde bien
à l'image uniquement, et pas à une page web qui contient une image. Pour vous en
assurer, vous pouvez faire un clic droit sur l'image de votre choix, et choisir "Copier
l'adresse de l'image".

…ou avec un chemin relatif si l'image est en local sur votre ordinateur

C'est ce que l'on fait si l'image est sur notre ordinateur : on utilise alors le nom et
l'arborescence du fichier de l'image en local pour indiquer sa source.
Si l'image est dans un sous-dossier nommé images, on précise :
src="images/logo.png"
Évitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de
dossiers. Par exemple, voici un chemin qui va poser problème : Images du
site/Image toute bête.jpg
Il faut idéalement :

• supprimer les espaces (ou les remplacer par le symbole_) et les accents ;
• tout mettre en minuscules, comme ceci
:images_du_site/image_toute_bete.jpg.

Si votre image ne s'affiche pas, c'est très certainement parce que le chemin est
incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers, et tout ira
bien.
Voici un exemple d'insertion d'image :
<p>

Voici une très belle photo que j'ai trouvée sur Unsplash :<br>

<img src="images/paysage.jpg" alt="Photo de plage vue du dessus" />

</p>

Ah tiens c'est quoi ce alt là ?

Voilà qui nous fait une belle transition vers la suite de ce chapitre !

Ajoutez l'attribut alt pour donner à l'image une description alternative

Donner une decription alternative à une image est une bonne pratique !
C'est-à-dire ? Je ne comprends pas ce que c'est une description alternative.
Une description alternative est un court texte qui décrit ce que contient l'image. Ce
texte alternatif sera :

• inscrit à la place de l'image si elle ne peut pas être affichée au moment du

chargement de la page web (cela arrive) ;
• audio-décrit par les navigateurs de personnes présentant un handicap (trouble de
la vue, non-voyants).

Cela contribue donc à améliorer ce que l'on appelle l'accessibilité d'un site web.
En plus, cela aide les robots des moteurs de recherche pour trouver des images.
D'ailleurs, j'en profite pour faire une petite parenthèse sur les formats d'image !

Choisissez le bon format d'image

Voici quel format adopter en fonction de l'image que vous avez :

• Une photo : utilisez un JPEG.

• N'importe quelle image avec peu de couleurs : utilisez un PNG 8 bits, ou
éventuellement un GIF.
• N'importe quelle image avec beaucoup de couleurs : utilisez un PNG 24 bits.
• Une image animée : utilisez un GIF animé.
• Un logo vectoriel : utilisez un SVG.

Prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espace
ni accent. C’est une bonne pratique à mettre en place dès le début. Vous pouvez
remplacer les espaces par le caractère underscore _. Par exemple : mon_image.png

Ajoutez une infobulle avec l'attribut title

Afin d'afficher une bulle d'aide sur vos images, vous pouvez utiliser l'attribut
title ; (à ne pas confondre avec la balise title qui permet d'indiquer au
navigateur le titre d'une page web).
L'attribut title est facultatif, contrairement à alt.
Voici ce que cela peut donner :
<img src="montagnes.png" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de
randonnée au milieu des montagnes">

Le visiteur du site, n'aura qu'à survoler la photo avec la souris pour voir l'infobulle
"Alors, envie de vous balader n'est-ce pas ?" apparaître par dessus l'image.

Créez une miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature cliquable
sur votre site. De cette manière vos pages web mettront moins de temps à
s'afficher. Si vos visiteurs souhaitent voir vos images en taille originale, ils n'auront
qu'à cliquer dessus.
 Pour ce faire, il faut disposer de deux versions d’une photo : l'image d'origine, et
une version de cette image moins lourde (donc plus petite).
Voyons voir comment faire en sorte que la miniature soit cliquable :

1. placez vos deux images dans un dossier appelé par exemple images .
2. Faites afficher la version montagne_mini.jpg sur une page,
3. et faites un lien vers la version montagne.jpg.

L'image agrandie s'affiche alors lorsqu'on clique sur la miniature.

Voici le code HTML qu’on peut utiliser pour cela :
<p>Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br>

<a href="images/montagne.jpg"><img src="images/montagne_mini.jpg" alt="Chemin de randonnée au

milieu des montagnes" title="Cliquez pour agrandir" ></a>

</p>

Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très
esthétique autour de votre image cliquable. Nous pourrons retirer ce cadre dans peu de
temps grâce au CSS.

À vous de jouer

Vous allez maintenant pouvoir enrichir le portfolio de Robbie Lens. Pour cela, vous
devrez :

• remplacer les liens Twitter et Instagram en bas des pages "À propos" et "Accueil"
par les icônes correspondantes ;
• insérer l'image de Robbie Lens sur la page d'accueil (le fichier s'appelle robbie-
lens.png ) ;
• afficher tout en haut et tout en bas de la page le logo qui renvoie sur la page
d'accueil grâce à un lien.

Vous trouverez toutes les images nécessaires pour cet exercice directement dans
la base de code, dans le dossier /images .
Comme pour les chapitres précédents, vous trouverez la base de code pour démarrer
l'exercice sur la branche P1C6-exercice, et la solution sur la branche P1C6-solution
par ici !

En résumé

• Il existe plusieurs formats d'images adaptés au Web : PNG, JPG…

• On insère une image avec la balise <img> .
• <img> doit obligatoirement comporter au moins ces deux attributs : src (source
de l'image) et alt (courte description de l'image).
• Il est possible d'afficher une autre version d'une image grâce à un lien qui entoure
l’image.

Intégrez le CSS dans la page HTML

Liez le fichier CSS au fichier HTML

À partir du moment où vous créez un fichier .css pour appliquer du style à votre
page web (écrite dans un fichier .html), il vous faut lier ces deux fichiers. Ainsi, les
propriétés CSS que vous ajoutez vont pouvoir s'appliquer aux balises HTML
auxquelles vous souhaitez qu'elles s'appliquent.
Pour lier les fichiers .css et .html, vous allez rajouter une ligne dans le fichier .html
pour indiquer au navigateur d'aller chercher la feuille de style (stylesheet en anglais)
afin d'afficher la page web avec les propriétés de style qu'on lui a appliquées.
Cette ligne à rajouter dans le fichier .html s'ouvre avec la balise orpheline <link>
et on la place à l'intérieur de la balise <head> </head> :
<head>

<meta charset="utf-8">

<title>Ma page</title>

<link href="style.css" rel="stylesheet">

</head>

Lorsque vous cliquerez sur votre fichier HTML pour l'ouvrir dans le navigateur, ce
dernier aura l'instruction d'appeler le fichier CSS associé pour afficher les
propriétés de style de la page web.

Appliquez une propriété CSS à une balise HTML

h1 {

color: blue;

Dans un code CSS comme celui-ci, on trouve en fait trois éléments différents :
1. Le sélecteur : ici on écrit les noms des balises HTML dont on veut modifier
l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes
<p> , je dois écrire p (sans les chevrons).
2. La ou les propriétés CSS : les effets de style sont listés via des propriétés. Par
exemple, color permet d'indiquer la couleur du texte, font-size permet
d'indiquer la taille du texte, etc. Il existe BEAUCOUP de propriétés CSS ! Mais
rassurez-vous, vous n’avez pas besoin de les connaître toutes par cœur.
3. …et leurs 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 indiquer quelle taille on veut, etc.

On écrit le nom de la balise. Puis entre accolades { } on écrit les propriétés et leurs
valeurs. (On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades).
Chaque propriété est suivie du symbole : puis de la valeur correspondante.
Chaque ligne se termine par ;.
Comment on fait des accolades sur le clavier français ?
Sur un PC, vous utilisez :

1. les touches alt gr + 4 pour faire l'accolade ouvrante ;

2. et les touches alt gr ++ pour faire l'accolade fermante ;

Voici un exemple ! Pour changer la couleur des paragraphes, on écrirait :

p {

color: blue;

Ce code signifie en français :

“Je veux que tous les paragraphes soient écrits en bleu."
 Au fait on peut faire des commentaires en CSS, comme on en fait en HTML ?
Oui ! Tapez /* suivi de votre commentaire, puis */ :
p {

/* J'en profite pour

ajouter un commentaire

sur plusieurs lignes */

color: blue;

Appliquez une propriété CSS à plusieurs balises HTML à la fois

Ce code CSS signifie que nos titres de niveau 1 et nos paragraphes doivent
s'afficher en bleu :
h1 {

color: blue;

p {

color: blue;

Ok mais c'est un peu répétitif, non ? On va devoir tout écrire à la main comme ça ?
Heureusement, non. Si les deux balises ont la même style, il suffit de combiner la
déclaration en séparant les noms des balises par une virgule :
h1, p

color: blue;

Et voilà ce que ça donne :

 Les
éléments h1 et p sont en bleu mais le sous-titre h2 reste en noir

Ce que l’on vient de voir implique que TOUS les paragraphes seront écrits en bleu.
Comment faire pour que certains paragraphes soient écrits d'une couleur
différente ?
Pour appliquer un style à un seul élément (par exemple à un seul paragraphe parmi
tous les paragraphes de notre code), on peut - en théorie - utiliser deux attributs :

1. l'attribut class ;
2. ou l'attribut id.

Mais pour ce faire - en pratique - on va surtout utiliser l'attribut class.

Les attributs class et id fonctionnent selon la même méthode mais on ne les utilise
pas pour les mêmes raisons :

• pour appliquer un style à un seul élément parmi d'autres, on utilise un attribut

class.
• pour appliquer un style à un élément unique en son genre, on utilise un attribut
id.

En CSS, on peut appliquer du style à un élément (ou plus) avec l'attribut class. Par
contre id ne peut s'utiliser que pour un seul élément, pas plus.
Voyons comment appliquer la méthode dans un exemple dont l'usage est
pertinent avec l'attribut class

Appliquez un style à un élément isolé avec l'attribut class

Étape 1 : marquez un élément avec l'attribut class dans le fichier .html

class est un attribut que l'on peut mettre sur n'importe quelle balise HTML :
<h1 class="voici"> </h1>

<p class="des"> </p>

<img class="classes">

Oui, mais que met-on comme valeur à l'attribut class?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez,
du moment que le nom commence par une lettre. Souvenez-vous qu'il s'agit d'un
moyen de sélectionner votre élément pour ensuite lui appliquer du style.
Par exemple, je vais associer ma-classe à mon deuxième paragraphe dans le
HTML :
<body>

<h1>Titre principal</h1>

<p>Ceci est le contenu de mon premier paragraphe</p>

<p class="ma-classe">Ceci est le contenu de mon deuxième paragraphe</p>

<h2>Voilà mon sous-titre h2</h2>

</body>

On vient de créer un attribut class nommé ma-classe dans le fichier .html pour
marquer un élément auquel on veut appliquer un style en particulier. Maintenant, il
faut appeler l'élément que l'on a marqué dans le fichier .css pour pouvoir lui
appliquer un style.

Étape 2 : appelez le nom de l'attribut class via un . dans le fichier .css

Pour faire cela, on va indiquer dans le fichier .css le nom de notre classe
précédée d'un point . :
.ma-classe {

color: #663399;

D'ailleurs, on en profite pour utiliser la notation hexadécimale pour indiquer la couleur,

ce qui nous permet d'être plus précis.
Testez le résultat : seul votre paragraphe appelé ma-classe va prendre la couleur
qu'on lui a attribué dans le fichier .css :
 La classe
"ma-classe" associée à la couleur violette pour le deuxième paragraphe

Et comment on fait ça avec l'attribut id alors ? Et en quoi c'est différent ?

Appliquez une propriété CSS à un élément unique avec l'attribut id

L'attribut id fonctionne selon la même méthode que class, mais il y a une différence
de taille : id ne peut être utilisé qu'une fois dans le code.
Quel intérêt alors ?
En CSS, il n'y en a pas vraiment ; cela vous sera surtout utile si vous faites du
JavaScript plus tard, pour reconnaître certaines balises.
En HTML, il y en a un car souvenez-vous on l'avait utilisé dans le chapitre sur le liens
hypertextes pour créer des ancres.
En pratique donc, on n'utilisera en CSS un id que sur un élément qui est unique dans la
page, comme le logo par exemple.

Étape 1 : marquez un élément unique avec l'attribut id dans le fichier .html

Exemple avec le logo, élément unique, que l'on va "marquer" grâce à l'attribut id
dans le fichier .html:
<img src="images/logo.png" alt="Logo du site" id="logo">

Étape 2 : appelez l'attribut id via un # dans le fichier .css

Avec l'attribut id , on définit les propriétés de style de cet élément unique dans le
fichier .css en l'appelant par un dièse#:
#logo {

/* Indiquez les propriétés CSS ici */

 }

Appliquez plusieurs propriétés CSS d'un coup à un élément

En CSS, il est tout à fait possible de cumuler les styles.

Pour l'occasion, j'en profite pour vous montrer une nouvelle propriété :font-size,
qui permet d'indiquer la taille d'un texte.
Si on veut par exemple que tous nos textes soient de la taille 30px, on peut :

• déclarer le style :

.ma-classe {

color: #663399;

.grand-texte {

font-size: 30px;

• et l'utiliser sur p (mais aussi sur vos autres éléments ; il est possible de cumuler
plusieurs classes au sein d'une même balise). Par exemple :

<body>

<h1>Titre principal</h1>

<p>Ceci est le contenu de mon premier paragraphe</p>

<p class="ma-classe grand-texte">Ceci est le contenu de mon deuxième paragraphe</p>

<h2 class="grand-texte">Voilà mon sous-titre h2</h2>

</body>

Ce qui donne :
 De la même manière, on peut ajouter plusieurs propriétés sur un même sélecteur :
balise1

propriete1: valeur1;

propriete2: valeur2;

/* … */

Ok super ! Et comment je fais si je veux appliquer un style à quelque chose qui

n'est pas entouré par une balise, par exemple un mot ou un groupe de mots qu'il y
a dans une phrase ?
Bonne question ! Si vous avez besoin de donner un attribut à certains mots pour
leur donner un style mais que ces derniers ne sont pas entourés par des balises
(un attribut s'applique à une balise en entier, pas juste une partie), alors vous allez
utiliser des balises universelles !

Exploitez les balises universelles

Imaginons, je veux modifier uniquement 990 espèces d'oiseaux dans le

paragraphe suivant :
<p>Il existe plus de 990 espèces d’oiseaux répertoriées dans toute l’Europe.</p>

Cela serait facile à faire s'il y avait une balise autour de “990 espèces d'oiseaux”,
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 petite différence (mais significative) entre ces deux balises :

1. <span> </span>;
2. <div> </div>.
 <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 “990
espèces d'oiseaux”.

<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'une mise en page, comme nous le verrons plus tard.
Pour le moment donc, nous allons plutôt utiliser la balise <span>.
Vous pouvez tester cela dans le CodePen P2C1.

À vous de jouer !

Vous allez exploiter ce que vous venez d'apprendre, et le mettre à profit dans le
projet de Robbie Lens.
Ici, vous allez :

• créer un fichier CSS commun style.css;

• appliquer la couleur black à l'ensemble des liens ;
• mettre le logo et les liens de navigation en haut des pages "Accueil" et "À propos"
dans une balise div ;
• mettre les différents logos en bas des deux pages dans une autre div ;
• sur la page d'accueil, dans le paragraphe d'introduction, vous allez appliquer le
style suivant :color: #A5B4FC; au mot "professionnalisme" et au mot "passion".
Pour l'instant, vous utiliserez un <span> , mais nous le modifierons dans le
prochain chapitre pour utiliser <em>.

En résumé

• CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en
forme votre page web.
• Pour écrire le code CSS, on crée un fichier séparé portant l'extension .css comme
style.css.
• Pour lier les fichiers CSS et HTML, on rajoute une ligne dans la balise <head>
</head> du fichier HTML : <link href="style.css" rel="stylesheet">
• En CSS, on sélectionne les portions de la page HTML qu'on veut modifier, et on
change leur présentation avec des propriétés CSS :

balise1

propriete1: valeur1;

propriete2: valeur2;

• Il existe plusieurs façons de sélectionner la portion de page que l'on veut mettre en
forme. Par exemple, on peut viser :
o toutes les balises d'un même type, en écrivant simplement leur nom (h1par
exemple) ;
o certaines balises spécifiques, auxquelles on a donné des noms à l'aide des
attributs class ouid(.nom-classe ou #nom-id) ;
o uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3,em).

Changez l'apparence du texte

Comme vous avez pu le voir dans la vidéo juste au-dessus, nous allons maintenant
en profiter pour mettre en forme le texte de nos pages.

Changez la taille du texte avec la propriété CSS font-size

Pour modifier la taille du texte, on utilise la propriété CSS font-size et ensuite,

on indique :

• une taille absolue ;

• ou une taille relative.

Indiquer une taille absolue, c’est très précis, mais il est conseillé de n'utiliser cette
méthode que si on sait sur quelle taille d'écran ou dimension d'impression une
personne verra le contenu de la page, car on risque d'indiquer une taille trop petite pour
certains lecteurs.
Indiquer une taille relative a l'avantage d'être plus souple, elle s'adapte, selon les
tailles d'écrans, plus facilement aux préférences des visiteurs.
 Donnez une taille au texte avec une valeur absolue en px

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 :
font-size: 16px;

Les lettres auront une taille de 16 pixels :

Essayez pour voir avec le CodePen P2C2a.

…ou optez pour une valeur relative en em (recommandé)

Il y a plusieurs moyens d'indiquer une valeur relative. Une des plus fréquentes
consiste à indiquer la taille en em.

• Le texte a une taille normale avec 1em .

• Le texte est plus grand avec une valeur supérieure à 1, comme 1.3em .
• Le texte est plus petit avec une valeur inférieure à 1, comme 0.8em.

Attention tout de même à la syntaxe : pour les nombres décimaux, il faut mettre un
point et non une virgule. Vous devez donc écrire 1.4em et non pas 1,4em !
Si on le fait en HTML :
<p class="elem1">Élément 1 : 1em</p>
<p class="elem2">Élément 2 : 1.3em</p>

<p class="elem3">Élément 3 : 2em</p>

… et qu’on y associe le CSS ci-dessous :

.elem1 {

font-size: 1em;

.elem2 {

font-size: 1.3em;

.elem3 {

font-size: 2em;

… on obtient alors le résultat suivant :

La taille change avec l'unité em

Ok d'accord, mais je ne comprends pas la différence avec le pixel, à quoi ça sert

une taille relative ?
Une valeur absolue en pixel comme 16px est fixe. C'est comme si je vous disais
d'indiquer la taille du texte en millimètres. Si je choisis de mettre la taille d'un texte
à 2 millimètres et que vous regardez ma page web depuis votre smartphone vous
devriez pouvoir le lire. Maintenant, si mon site web s'affiche sur l'écran d'un
stadium, à votre avis que se passera-t-il ? C'est pour cela que l'on recommande
une taille relative. 16 pixels est une taille standard pour lire un texte mais peut ne
pas suffire selon l'écran sur lequel il s'affiche. Une valeur relative permet de choisir
une taille de la même manière qu'on utiliserait un pourcentage.
 Choisissez une police avec la propriété CSS font-family

La propriété CSS qui permet d'indiquer la police à utiliser est font-family :

balise

font-family: nom-police;

Voici une liste de polices sans sérif qui fonctionnent nativement sur la plupart des
navigateurs :

• Arial Black ;
• Futura ;
• Helvetica ;
• Impact ;
• Trebuchet MS ;
• Verdana.

Le sérif désigne l’empattement situé à l’extrémité des caractères. Choisir une police de
caractères sans sérif est plus judicieux en termes d’accessibilité, car c’est plus facile à
lire.

Différence entre sérif et sans sérif

C'est tout à fait possible d'utiliser n'importe quelle police sur son site, et ce sur la
plupart des navigateurs. Pour cela, il existe plusieurs méthodes, comme importer
une police depuis le site de Google Fonts.
D'ailleurs, comment fait-on pour intégrer une police de Google Fonts dans nos
fichiers HTML et CSS ?
 Pour cela, rendez-vous sur Google Fonts pour sélectionner une police, puis :

1. Copiez les balises <link> dans le <head> </head> du fichier HTML.

2. Utilisez la propriété font-family dans le fichier CSS pour déclarer que vous
voulez utiliser cette police.

Le code a copier dans le fichier HTML

Par exemple, pour la police Roboto, on vient coller dans le HTML :

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Et on l'utilise dans le CSS en déclarant dans notre sélecteur :

font-family: 'Roboto', sans-serif;

Ici, on s'est contenté de suivre les étapes préconisées par Google Fonts. Mais il est
également possible de télécharger une police localement, et de la joindre à notre projet
HTML / CSS. Mais cette technique requiert quelques étapes de plus, et n'est pas
forcément nécessaire lorsque vous débutez. Néanmoins, vous trouverez un exemple
de ce genre de téléchargement de police au format spécifique et de son utilisation
en CSS juste ici.

Mettez du texte en italique avec la propriété CSS font-style

En CSS, on donne une valeur à font-style pour dire si on veut que du texte soit
en italique ou non :
• italic : le texte sera mis en italique ;
• normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise
en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en
italique, vous devrez écrire :

em

font-style: normal;

Différence entre du
texte normal et du texte italique

Mettez du texte en gras avec la propriété CSS font-weight

Pour varier la graisse d'un texte, on utilise la propriété CSS font-weight à

laquelle on associe une valeur, au choix :

1. bold : le texte sera en gras ;

2. normal : le texte sera écrit normalement (par défaut) ;
3. thin: le texte est plus fin.

Mais il est également possible d'être plus précis et d'indiquer l'épaisseur du texte
avec une valeur numérique allant de 100 à 900, du moins épais au plus épais :
 Les
différentes graisses (ou épaisseurs)

Regardez ce que ça donne avec le CodePen P2C2b.

Pour appliquer les différents styles de texte (épaisseur et italique) pour les polices
importées, il faut bien s'assurer d'avoir importé les styles de polices
correspondants. Ainsi, pour utiliser la police Roboto en italique et bold, il faudra
bien avoir importé dans votre code :
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700&display=swap"
rel="stylesheet">

Soulignez du texte avec la propriété CSS text-decoration

La propriété CSS text-decoration permet, entre autres, de souligner le texte,

mais pas seulement. Voici quelques-unes des différentes valeurs qu'elle peut
prendre :

• underline: souligné ;
• line-through: barré ;
• none: normal (par défaut, sauf dans le cas des liens).

Ce CSS va vous permettre de tester les effets de text-decoration:

 Les
différentes valeurs de text-decoration

Alignez du texte avec la propriété CSS text-align

Le propriété CSS text-align permet d'aligner du texte selon la valeur qu'on lui
donne :

• 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 ;

Les 3
options d'alignements classiques

• 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.
Jouez avec les différentes propriétés qu'on vient de voir grâce au CodePen P2C2c.
L'alignement ne fonctionne que sur des balises de type block : <p>, <div>, <h1>…
Aligner le texte d'une balise inline, comme <span>, <a>, <em> , <strong> n'est pas
possible. Et c'est logique quand on y pense : on ne peut pas modifier l'alignement de
quelques mots au milieu d'un paragraphe.
 À vous de jouer !

Maintenant que vous avez appris comment mettre du texte en forme, vous allez
pouvoir appliquer cela au projet de Robbie Lens. Pour cela, vous allez :

• Importer les deux polices principales du projet avec Google Font : Montserrat et
Manrope.
• Assigner les propriétés de polices suivantes :
o les titres H1 :
▪ 3.5em
▪ en couleur #A5B4FC
▪ police Montserrat
o les paragraphes :
▪ 1.1em
▪ police Manrope
o les listes :
▪ 1em
▪ police Manrope
o les liens :
▪ enlever le soulignement
▪ 1em
▪ police Manrope
• Remplacer les <span class="important"></span> par des éléments em tout
en gardant le même style.

Vous trouverez la base de code pour démarrer l’exercice sur la branche P2C2-
exercice.
Et comme d’habitude, on ne vous abandonne pas dans la nature, la solution se trouve
sur la branche P2C2-solution.

En résumé

• On modifie la taille du texte avec la propriété CSS font-size.

• On peut indiquer la taille en pixels, comme16px ; ou encore en “em”, comme
1.3em.
• On indique la police du texte avec la propriété CSS font-family .
• De nombreuses propriétés de mise en forme du texte existent : font-style pour
l'italique, font-weight pour la mise en gras, text-decoration pour le soulignement.
• Le texte peut être aligné avec la propriété CSS text-align .
 Ajoutez de la couleur et un fond

Changez la couleur du texte avec color

La propriété CSS qui permet de modifier la couleur du texte, c'est color.

Vous l'avez déjà utilisée en lui appliquant en valeur le nom d'une couleur en
anglais :
h1 {

color: blue;

De nombreux noms de couleurs sont supportés par les navigateurs mais il existe
d'autres manières d'indiquer une couleur en CSS :

1. Sous forme hexadécimale (6 chiffres précédés d'un #). Exemple : color:

#FFC8D3;
2. En notation RGB (pour Red Green Blue en anglais). Exemple : color:
rgb(250,25,118);. Notez qu'on peut ajouter la notion d'opacité (ou de
transparence) avec la notation RGBA, où la dernière valeur correspond à l'opacité :
color: rgba(250,25,118, 0.5);

Si vous voulez trouver une couleur, ou bien convertir une valeur en utilisant une autre
syntaxe, vous trouverez des outils en ligne, comme Coolors ou encore HTML Color
Picker.

Appliquez une couleur d'arrière-plan avec background-color

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color.

Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous
pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore
utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il vaut mieux l'appliquer à la balise
<body> . Eh oui, <body> correspond à l'ensemble de la page web. C'est donc en
modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page
:
body {

background-color: black; /* Le fond de la page sera noir */

 color: white; /* Le texte de la page sera blanc */

Et on obtient :

On a demandé à ce que le texte de la balise <body> soit écrit en blanc, et tous

les paragraphes <p> et titres <h1> ont pris cette couleur. Comment ça se fait ?
La balise <body> contient, entre autres, les balises de paragraphe <p> et de titre
<h1>. Si on applique à la balise <body> une couleur de fond noire et une couleur
de texte blanche, tous les titres et paragraphes seront eux aussi en blanc sur fond
noir.
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à
l'intérieur prendront le même style. Cela s’appelle l’héritage : on dit que les balises qui
se trouvent à l'intérieur d'une autre balise “héritent” de ses propriétés. (L'héritage ne
fonctionne pas uniquement pour la couleur, mais pour toutes les propriétés CSS.)
C'est d'ailleurs de là que vient le nom “CSS”, qui signifie “Cascading Style Sheets”,
c'est-à-dire “Feuilles de style en cascade”. Les propriétés CSS sont héritées en
cascade.
Cela veut dire que TOUT le texte de ma page web sera forcément écrit en blanc ?
Non, pas obligatoirement. Si par la suite, vous voulez vos titres en violet par
exemple, il faudra le préciser :
body {

background-color: black; /* Le fond de la page sera noir */

color: white; /* Le texte de la page sera blanc */

h1 {

color: purple;

Vous pouvez tester cela en jouant avec le CodePen P2C3.

 Ajoutez une image de fond avec background-image

Une "image de fond" ne s'applique pas forcément à la page entière. On peut aussi
mettre une image de fond derrière des titres, ou des paragraphes uniquement.

Appliquez une image de fond derrière un élément HTML

La propriété permettant d'indiquer une image de fond est background-image.

Comme valeur, on doit renseigner l'adresse indiquant où se trouve l'image de fond.
Elle peut être écrite en absolu (http://…) ou en relatif (fond.png).
Attention lorsque vous écrivez une adresse en relatif dans le fichier CSS : l'adresse de
l'image doit être indiquée par rapport au fichier .css et non pas par rapport au fichier
.html . Pour simplifier les choses, je vous conseille de placer l'image de fond dans le
même dossier que le fichier .css (ou dans un sous-dossier).
Voyons tout de suite à quoi ça ressemble !
On écrit dans le fichier HTML :
<body>

<div class="banniere">

<h1>Mon blog</h1>

</div>

<p>Ceci est le contenu de mon premier paragraphe</p>

<p>Ceci est le contenu de mon deuxième paragraphe</p>

</body>

Puis dans le fichier CSS :

body {

font-family: sans-serif;

margin: 0; /* Vous ne connaissez pas encore cette propriété mais elle permet de s'assurer que nos
éléments prennent bien toute la largeur de la page */

.banniere {

padding: 100px; /* Vous ne connaissez pas encore cette propriété mais elle permet d'ajouter de
l'espace dans notre élément*/

background-image: url('paysage.jpg');

}
 h1 {

color: white;

text-align: center;

Et on obtient :

Une image en fond du titre

C'est bien beau tout ça, mais l'image apparaît floue : elle n'est pas aux bonnes
dimensions. Pour corriger cela, on va voir ensemble comment changer le
comportement de l'image de fond.

Modifiez le comportement d'une image de fond

Pour changer le comportement d'une image de fond, il existe plusieurs propriétés

CSS :

1. La propriété CSS background-attachment associée à la valeur fixed permet

de rendre l'image de fond fixe lorsqu'on déroule la page web : background-
attachment: fixed;
2. La propriété CSS background-size associée à la valeur cover permet de
redimensionner l'image afin qu'elle s'adapte à la taille de l'élément qui la contient
(elle garde ses proportions, en rognant la largeur ou la hauteur en fonction de la
taille de l'élément qui la contient) : background-size: cover;
3. La propriété CSS background-position associée aux valeurs top , bottom ,
left , center ou right permet d'indiquer où doit se trouver l'image de fond, par
exemple : background-position: top right;
 Chacune de ces 3 propriétés possède plusieurs valeurs possibles qu'on peut leur
associer. Je vous invite à aller tester en direct sur le site de Mozilla Developer les
différents effets possibles des propriétés :

1. background-attachment ;
2. background-size ;
3. background-position.

De nombreux paramètrages existent en ce qui concerne les images de fond. Si vous

voulez en savoir plus, vous pouvez vous référer à la documentation de la propriété
CSS background.

Combinez ces propriétés CSS avec la "super-propriété" background

Si vous utilisez beaucoup de propriétés en rapport avec le fond, vous pouvez

utiliser une sorte de “super-propriété” appelée background dont la valeur peut
combiner plusieurs des propriétés :

• background-image ;
• background-repeat ;
• background-attachment ;
• background-size ;
• et background-position .

C'est la première “super-propriété” que je vous montre, il y en aura d'autres.

On peut donc tout simplement écrire :
.banniere

background: url("paysage.jpg") cover center;

Il faut savoir que :

• l'ordre des valeurs n'a pas d'importance : vous pouvez combiner les valeurs
dans n'importe quel ordre ;
• vous n'êtes pas obligé de mettre toutes les valeurs.

Créez des dégradés avec linear-gradient

Pour créer un dégradé, on a besoin de la propriété CSS background :

 background: linear-gradient(90deg, #8360c3, #2ebf91);

Si je devais lire en français cette ligne de CSS, voici ce que ça donnerait :

"J'applique un dégradé linéaire, à 90 degrés, en partant de la couleur #8360c3 pour
arriver à la couleur #2ebf91.
Ce qui nous permet d'obtenir un très beau dégradé :

Le dégradé va du violet au vert

Ici, on utilise linear-gradient mais il existe d'autres manières de créer des

dégradés. Si vous voulez de l'inspiration en termes de dégradés, rendez-vous sur UI
Gradients, et si vous voulez construire vos propres dégradés, je vous conseille CSS
Gradient.

Jouez sur la transparence avec la propriété CSS opacity

La propriété CSS opacity permet d'indiquer le niveau d'opacité (c'est l'inverse de

la transparence).

• Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement

par défaut.
• Avec une valeur de 0, l'élément sera totalement transparent.

Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6 ,
votre élément sera opaque à 60 %… et on verra donc à travers !
Jetez un œil à ce GIF auquel on applique 0.6 , puis 0.4 et enfin 0.2 :
 L’opacité de l’image change en fonction des valeurs choisies.

Comme vous pouvez le voir, si vous appliquez la propriété opacity à un élément de la

page, tout le contenu de cet élément sera rendu transparent (même les images, les
autres blocs à l'intérieur, etc.). Si vous voulez juste rendre la couleur de fond
transparente, utilisez plutôt la notation RGBA que vous avez vue dans la vidéo
d'introduction du chapitre.

À vous de jouer !

Maintenant que vous maîtrisez les couleurs et l'héritage en CSS, vous allez pouvoir
en tirer parti pour le projet de Robbie Lens ! Pour cela, vous devrez :

• changer les couleurs de fond pour que :

o la div dans laquelle on a les liens en haut des pages, et le pied de page, aient un
fond blanc,
o le cœur de la page ait un fond correspondant à #1F2039 ;
• … et les couleurs de texte pour que :
o les liens en tête et pied de page soient de couleur #242424 ,
o les paragraphes, les listes et les titres H2 soient de la couleur #F9F8FF (sur fond
bleu foncé).

Vous trouverez également des liens hypertextes qui ont été ajoutés : "Un projet ?
Écrivez-moi" et "Voir mon portfolio". Vous devrez leur ajouter un dégradé qui passe
de la couleur #8E86B5 à la couleur #ACAEED et les mettre dans la police
Manrope, en blanc.
 C'est normal si votre couleur de fond a une petite marge, nous corrigerons cela
dans quelques chapitres.
Sur la branche P2C3-exercice, vous trouverez le code nécessaire pour démarrer
l’exercice.
En cas de difficulté, vous pouvez consulter la solution sur la branche P2C3-solution.

En résumé

• On change la couleur du texte avec la propriété color et la couleur de fond avec

la propriété background-color.
• On peut indiquer une couleur en écrivant son nom en anglais, black par exemple,
sous forme hexadécimale, comme #FFC8D3, ou en notation RGB, comme
rgb(250,25,118).
• On peut ajouter une image de fond avec la propriété background-image. On peut
choisir de fixer l'image de fond, ou encore de la positionner où on veut sur la page.
• On peut rendre une portion de la page transparente avec la propriété opacity ou
avec la notation RGBA (une extension de la notation RGB, où la quatrième valeur
indique le niveau de transparence).

Créez des bordures et des ombres

Créez des bordures avec la propriété CSS border

Le CSS offre un large choix de 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 dans le chapitre précédent ? Cela fonctionne sur le
même principe : on va pouvoir combiner plusieurs valeurs.
Avec border, on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la
bordure :

1. La largeur que l'on définit avec une valeur en pixels (comme 2px).
2. La couleur que l'on indique avec un nom de couleur, une valeur hexadécimale, ou
une valeur RGB.
3. Le type de bordure qui peut être solid (un trait simple), double (un double trait),
dotted (un trait en pointillés), dashed (un trait en tirets), ou autre. Vous avez un
large panel d'options :

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 :

1. border-top : bordure du haut.

2. border-bottom : bordure du bas.
3. border-left : bordure de gauche.
4. border-right : bordure de droite.

Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous
le désirez :

• border-top-width pour modifier l'épaisseur de la bordure du haut,

• border-top-color pour la couleur du haut, etc.

Ce sont aussi des super-propriétés, elles fonctionnent comme border mais elles
ne s'appliquent donc qu'à un seul côté.
On pourrait faire une compilation de nos éléments juste au-dessus.
On écrit dans le fichier HTML :
<p class="element">Élément</p>

Puis dans le CSS:

.element {

border-top: 3px #EB5353 dotted;

border-right: 3px #F9D923 double;

border-bottom: 3px #36AE7C dashed;

border-left: 3px #187498 solid;

Ce qui nous donnerait :

 L'élément a 4 styles de bordures différents

Bon ce n'est pas forcément du plus bel effet, mais c'était pour la démonstration !
En tout cas, vous pouvez aller tester ces différentes propriétés et vous amuser à
recréer l'élément ci-dessus avec le CodePen P2C4a.
On pourrait très bien avoir un élément qui n'aurait un bord que d'un seul côté. Pour
cela, il suffit de ne déclarer qu'une seule propriété. Ici, on utilise uniquement la
propriété border-left :
.element {

font-size: 25px;

background-color: skyblue;

border-left: 5px #187498 solid;

padding: 100px;

Ce qui donne :

L'élément a une bordure à gauche

 Arrondissez vos angles avec border-radius

La propriété CSS border-radius permet d'arrondir les angles de n'importe quel

élément. Il suffit d'indiquer la taille de l'arrondi en pixels :
.element {

font-size: 25px;

background-color: skyblue;

border-radius: 10px;

padding: 100px;

Ce qui donne :

L'élément a des coins arrondis

Tout comme pour les bordures, il n'y a aucune obligation d'avoir les mêmes arrondis
partout : on peut aussi préciser la forme de l'arrondi pour chaque coin. D'un point de
vue design, c'est très pratique lorsqu'on souhaite coller deux formes qui ont des border
radius, par exemple pour des "groupes de boutons". Vous trouverez plus d’infos sur
Bootstrap.
Dans ce cas, indiquez les quatre valeurs correspondant aux angles dans la
propriété border-radius , dans cet ordre :

1. En haut à gauche.
2. En haut à droite.
3. En bas à droite.
4. En bas à gauche.

.element {
 font-size: 25px;

background-color: skyblue;

border-radius: 10px 30px 0px 90px;

padding: 100px;

Ce qui donne :

L'élément a des radius de différentes valeurs pour chaque angle

Il est même possible de créer des courbes elliptiques avec border-radius .Pour
cela, il faut indiquer deux valeurs séparées par une barre oblique (slash) : /. Mais
le rendu est assez dur à anticiper. Il vaut mieux utiliser des outils de visualisation
comme Fancy Border Radius du rendu final :
 Des courbes elliptiques sur un élément

Il ne reste plus qu'à cliquer sur "copy" pour reporter la valeur du border-radius
générée automatiquement (sans oublier le point virgule ; à la fin de la ligne) dans
notre code :
.element {

font-size: 25px;

background-color: skyblue;

border-radius: 30% 70% 70% 30% / 30% 58% 42% 70%;

padding: 100px;

Et voilà le résultat ! De quoi faire des éléments (boutons, encarts, blocs…) uniques
sur votre site web :
 L'élément a des courbes elliptiques

Ajoutez une ombre portée avec la propriété CSS box-shadow

Les ombres donnent des effets de profondeur intéressants sur une page web.
C'est particulièrement utile sur les boutons d'un site par exemple. Du fait de
l'impression de relief, un bouton avec une ombre portée indique visuellement aux
visiteurs du site qu'il est "cliquable".
La propriété CSS box-shadow s'applique à tout le bloc, et prend quatre valeurs
dans l'ordre suivant :

1. Le décalage horizontal de l'ombre.

2. Le décalage vertical de l'ombre.
3. L'adoucissement du dégradé.
4. La couleur de l'ombre.

L'adoucissement peut être :

• faible (si on lui donne une valeur inférieure à celle du décalage),

• normal (si on lui donne une valeur égale à celle du décalage)
• ou élevé (si on lui donne une valeur supérieure à celle du décalage).

Par exemple :
.element {

font-size: 25px;

background-color: skyblue;

border-radius: 10px;
 box-shadow: 6px 6px 0px rgba(0, 0, 0);

padding: 100px;

Ce qui donne :

L'élément a une ombre portée à fort contraste

On obtient une ombre noire, portée horizontalement et verticalement, de 6 pixels,

sans adoucissement. Ce qui n'est pas forcément l'effet recherché… Ajoutons donc
un adoucissement grâce au troisième paramètre de la propriété box-shadow ,
tout en jouant sur l'opacité de la couleur avec RGBA :
.element {

font-size: 25px;

background-color: skyblue;

border-radius: 10px;

box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);

padding: 100px;

Ce qui donne :
 L’effet d'ombre est plus esthétique

Il n'est pas toujours simple de trouver l’effet d’ombre désiré à tâtons. Pour vous aider,
vous pouvez :

• utiliser l’outil Shadows Brumm ;

• vous inspirer des exemples listés sur CSS Scan.

Ajoutez une ombre à un texte avec text-shadow

text-shadow permet d'ajouter une ombre sur les lettres de votre texte. Effet
vintage garanti !
Les valeurs fonctionnent exactement de la même façon que box-shadow :

1. décalage horizontal,
2. décalage vertical,
3. adoucissement,
4. et couleur.

Voyez ce que ça donne dans le morceau de code juste en dessous :

h1 {

font-size: 50px;

text-shadow: 3px 3px 0px rgba(0,0,0,0.2);

padding: 100px;

Et voyez ce que ça nous donne :

 Le texte a une ombre portée

Je vous invite maintenant à aller vous entraîner à maitriser toutes les propriétés
que l'on a vues dans ce chapitre avec le CodePen P2C4b.

À vous de jouer !

C’est maintenant le moment de mettre en pratique ce que vous venez

d’apprendre, dans le projet de Robbie Lens. Pour cela, vous allez :

• ajouter des arrondis sur les liens "Un projet ? Écrivez-moi" et "Voir mon portfolio",
d'une valeur de 50px (le rendu n'est pas très beau, mais ne vous inquiétez pas,
nous allons l'améliorer au fil des chapitres) ;
• créer une div , sur la page À propos, qui englobe le paragraphe et la liste de
compétences de Robbie Lens ; lui ajouter une bordure à droite et en bas, de 1px
d'épaisseur et de la couleur #8e86b5 .

Comme pour les activités précédentes, vous avez accès au code nécessaire pour
débuter l’exercice sur la branche P2C4-exercice,
Passez-y un peu de temps avant de consulter la solution sur la branche P2C4-
solution.
 En résumé

• On peut appliquer une bordure à un élément avec la super-propriété CSS border.

Il faut indiquer la largeur de la bordure, sa couleur et son type (simple, double,
pointillés, tirets).
• On peut arrondir les bordures avec la propriété CSS border-radius.
• On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer
le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa
couleur.
• Le texte peut lui aussi avoir une ombre avec text-shadow.

Créez des apparences dynamiques

Le CSS nous permet aussi de modifier l'apparence des éléments de façon

dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que
la page a été chargée ; et tout cela grâce aux pseudo-classes.
Les pseudo-classes viennent s'ajouter à un sélecteur CSS pour décrire à quel moment
un style en particulier doit s'appliquer.

Stylisez un élément au survol de la souris avec :hover

La pseudo-classe :hover s'applique lorsque l'utilisateur survole un élément avec

sa souris (:hover signifie d'ailleurs “survoler”), et va nous permettre d'y appliquer
un style.

Déclarez le sélecteur sur lequel le style va s'appliquer

Prenons un exemple où on applique du style sur les liens hypertextes. Pour

déclarer un style qui va "s'activer" dès que le visiteur du site web va pointer la
souris dessus, on doit écrire notre CSS comme ceci :
a:hover {

// Insérer ici les propriétés CSS à appliquer

D'où il sort ce a qu'on a mis avant la pseudo-classe :hover ?

 Rappelez-vous le chapitre "Créez un lien hypertexte", c'est comme ça qu'on
annonce un lien hypertexte, avec une balise <a> . On pourrait très bien appliquer
un style au survol d'un paragraphe (on écrirait alors p:hover), ou bien d'un
élément auquel on a attribué une classe ma-classe (et on écrirait .ma-
classe:hover).
À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens
lorsqu'on pointe dessus. Laissez libre cours à votre imagination, il n'y a pas de
limite.

Définissez le style qui va s'appliquer au sélecteur

Dans le bout de code ci-dessous, on va appliquer une couleur différente pour le

titre, le paragraphe, et à l'élément de la classe mon-element .
On a la structure suivante en HTML :
<body>

<div class="mon-element">

<h1>Ma page de pseudo-classes</h1>

<p>Les pseudo-classes sont très importantes afin de créer des apparences dynamiques en fonction
des interactions avec les utilisateurs.</p>

</div>

</body>

…et le code suivant en CSS :

.mon-element:hover {

background-color: #BEAEE2;

color: white;

h1:hover {

color: #CDF0EA;

p:hover {

color: #F9CEEE;

… ce qui nous donne :

Ici, les changements sont brusques. Le CSS permet pourtant de créer des effets
fondus, ou bien des animations qui se répètent autant de fois que souhaité. Si ce sujet
vous intéresse, je vous conseille de jeter un œil au cours Créez des animations CSS
modernes.

Stylisez un élément au moment du clic avec :active

La pseudo-classe :active permet d'appliquer un style particulier au moment du

clic.
En pratique, elle n'est utilisée que sur les liens hypertexte car le style ne se maintient
que très peu de temps : en fait, le changement intervient lorsque le bouton de la souris
est enfoncé. Ce n'est donc pas forcément toujours bien visible.
Essayons de changer la couleur de fond du lien hypertexte lorsque l'on clique
dessus. Pour l'occasion, on aura au préalable ajouté un lien hypertexte dans le
bout de code HTML plus haut, et désactivé le changement de style de mon-
element au hover.
On écrit dans le fichier CSS :
a:active {

background-color: #C1FFD7;

On a alors :

Au clic de la souris

Vous remarquerez d'ailleurs que le navigateur applique ici aussi un style par défaut où
color du lien actif est rouge.
 Stylisez un élément sélectionné par le visiteur avec :focus

Là, c'est un peu différent. La pseudo-classe :focus applique un style lorsque

l'élément est sélectionné.
C'est-à-dire ?
On peut notamment utiliser la touche "tab" ⇥ du clavier pour déclencher le
focus sur chacun des éléments.
Cette pseudo-classe pourra être appliquée à d'autres balises HTML que nous
n'avons pas encore vues, comme les éléments de formulaires. Nous nous
pencherons davantage sur le focus dans ce chapitre.
Dans notre bout de code CSS, on écrit :
a:focus {

background-color: #FCFFA6;

Ce qui nous permet d'obtenir, avec la sélection depuis la touche "tab" du clavier :
⇥

Stylisez un lien hypertexte déjà consulté avec :visited

Il est possible d'appliquer un style à un lien hypertexte qui a déjà été "cliqué". Par
défaut, le navigateur colore un lien en violet. Mais grâce à la pseudo-classe
:visited , on peut changer ; même si, en pratique, sur les liens consultés, on ne
change souvent pas grand-chose à part la couleur.
Si vous ne souhaitez pas que les liens déjà visités soient colorés d'une façon
différente qu'un lien hypertexte non cliqués, il vous faudra leur appliquer la même
couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms
y compris !).
Dans notre exemple, on ajoute au code CSS :
a:visited {

color: black;
}

La couleur est désormais la même, que le lien ait été visité ou non.
Tout cela semble un peu magique comme ça : il existe de nombreux sélecteurs,
une grande quantité de propriétés CSS, permettant d'obtenir des effets
particulièrement avancés (souvenez-vous du CSS Art).
Les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. En fait plus
le navigateur est vieux, moins il connaît de fonctionnalités CSS.
Je vous recommande fortement de mettre dans vos favoris le site www.caniuse.com,
qui propose des tables de compatibilité des fonctionnalités de HTML et CSS sur
différents navigateurs (et sur leurs différentes versions).

Allez plus loin avec les sélecteurs avancés

En CSS, le plus dur est bien souvent de réussir à cibler l'élément dont on veut
changer le style. Vous avez appris tout un tas de manières d'appliquer du style à
des éléments, avec les sélecteurs et les pseudo-classes. Mais sachez que nous
n'avons pas tout couvert dans cette partie. Vous avez eu un aperçu de la
puissance des sélecteurs avec le combinateur de voisin direct (ou siblings) dans la
vidéo d'introduction, mais il en existe d'autres. En voici quelques-uns :

Le sélecteur universel *

Le sélecteur universel * sélectionne toutes les balises sans exception.

* {

/* Insérez ici votre style */

Le sélecteur d'une balise contenue dans une autre : A B

Prenons un exemple avec ce code écrit dans le fichier HTML :

<h3>Titre avec <em>texte important</em></h3>

Dans CSS, on écrirait alors :

h3 em {

/* Insérez ici votre style */

Ce morceau de code signifie en français :

"Applique ce style à toutes les balises <em> situées à l'intérieur d'une balise <h3> ".
 Notez qu'il n'y a pas de virgule entre les deux noms de balises.

Le sélecteur d'une balise qui en suit une autre : A + B

Dans CSS, on écrirait par exemple :

h3 + p {

/* Insérez ici votre style */

Ce qui aura pour résultat de sélectionner la première balise <p> située après un
titre <h3>.
Exemple de code HTML associé :
<h3>Titre</h3>

<p>Paragraphe</p>

Le sélecteur d'une balise qui possède un attribut : a[attribut]

a[title] {

/* Insérez ici votre style */

En français, ce morceau de code signifie :

"Sélectionne tous les liens hypertexte <a> qui possèdent un attribut title ".
Exemple de code HTML associé :
<a href="http://site.com" title="Infobulle">

Il existe des variantes de cette forme de sélecteur :

• a[attribut="Valeur"] : une balise qui possède un attribut et une valeur

exacte, comme :

a[title="Cliquez ici"] {

/* Insérez ici votre style */

C'est la même chose, mais l'attribut doit en plus avoir exactement pour valeur
“Cliquez ici”.
Exemple de code HTML associé :
<a href="http://site.com" title="Cliquez ici">

• a[attribut*="Valeur"] : une balise, un attribut et une valeur, comme :

 a[title*="ici"] {

/* Insérez ici votre style */

Idem, l'attribut doit cette fois contenir dans sa valeur le mot “ici” (peu importe sa
position).
Exemple de code HTML associé :
<a href="http://site.com" title="Quelque part par ici">

Il en existe beaucoup d'autres sélecteurs. Si vous voulez une liste complète, vous
pouvez vous renseigner directement à la source : sur le site du W3C !

À vous de jouer !

C'est le moment de mettre en pratique pour le site de Robbie Lens ce que vous
venez d'apprendre, en ajoutant des apparences dynamiques !
Pour cette étape, vous devrez :

• souligner les liens au survol ;

• permettre aux liens ayant la classe "cta" d'avoir un dégradé de la couleur #696484
à la couleur #8788BA au survol (attention, ceux-ci ne sont pas soulignés au
survol) ;
• dans les icônes de l'en-tête et du pied-de-page qui permettent de faire des liens,
réduire l'opacité à 0.5 au survol.

Comme pour les autres chapitres, vous trouverez le code nécessaire pour réaliser
l’exercice sur la branche P2C5-exercice.
Vous avez trouvé comment faire ? Allez vérifier sur la branche P2C5-solution !
 En résumé

• En CSS, on peut modifier l'apparence de certaines sections dynamiquement,

après le chargement de la page, lorsque certaines interactions se produisent. On
utilise pour cela les pseudo-classes.
• La pseudo-classe :hover modifie l'apparence d'un élément au survol (par
exemple : a:hover modifie l'apparence des liens hypertextes lorsque la souris
pointe dessus).
• La pseudo-classe :active modifie l'apparence des liens hypertextes au moment
du clic.
• La pseudo-classe :visited modifie l'apparence des liens hypertextes lorsqu'un
lien a déjà été visité.
• La pseudo-classe :focus modifie l'apparence d'un élément sélectionné via la
touche "tab".
• Encore aujourd'hui, certaines propriétés ne sont pas totalement reconnues par
tous les navigateurs.

12/05/2025

Différencier les balises de type block et de type inline

En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux
catégories :

• block: ce type de balise crée automatiquement un retour à la ligne avant et après ;

• inline: ce type se trouve obligatoirement à l'intérieur d'une balise block .

Il existe en fait plusieurs autres catégories très spécifiques, par exemple pour les
cellules de tableau (type table-cell ) ou les puces (type list-item ). Nous
n'allons pas nous y intéresser pour le moment, car ces balises sont minoritaires.
Pour bien visualiser le concept, voici un petit schéma :
 Comme vous pouvez le voir, les blocs sont les uns en dessous des autres. On peut
aussi les imbriquer les uns à l'intérieur des autres : souvenez-vous, un bloc
<main> contient par exemple des blocs <section> , qui eux-mêmes peuvent
contenir des <div> .
Quant à la balise <a></a> (qui est de type inline ), elle se trouve à l'intérieur
d'une balise block , et le texte vient s'insérer sur la même ligne.

Faites bon usage des balises universelles <span> et <div>

J'en profite pour vous parler à nouveau des balises universelles. Vous les
connaissez déjà car je vous les ai présentées à plusieurs reprises. Ce sont des
balises qui n'ont aucun sens particulier. Le principal intérêt de ces balises est que
l'on peut leur appliquer une class (ou un id ) pour le CSS quand aucune autre
balise ne convient.
Il existe deux balises génériques et, comme par hasard, la seule différence entre
les deux est que l'une d'elles est inline et l'autre est block :

1. La balise<span>(qui est de type inline).

2. La balise<div>(qui est de type block).

N’abusez pas des balises universelles, même si elles sont utiles dans certains cas :
beaucoup de développeurs mettent des <div> et des <span> trop souvent, et
oublient que d'autres balises plus adaptées existent.
Par exemple :
 • <span class="important"> : ici, il ne s'agit pas d'une bonne pratique, alors
qu'il existe les balises <strong> ou <em> qui servent à indiquer l'importance
!
• <div class="titre"> : idem, cela ne convient pas, puisqu'il existe des
balises faites spécialement pour les titres ( <h1> , <h2> …).

Le résultat visuel est le même, mais les balises génériques n'apportent aucun sens
à la page, et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours
d'autres balises plus adaptées quand c'est possible.
Maintenant que vous comprenez la différence entre inline et block , nous allons
apprendre à dimensionner des éléments en CSS ! Nous allons ici travailler
uniquement sur des balises de type block .
Pour commencer, intéressons-nous à la taille des blocs.

Dimensionnez les éléments avec width et height

Contrairement à un inline , un block peut avoir une largeur et une hauteur

précises grâce à ces deux propriétés CSS :

1. width (largeur du bloc).

2. height (hauteur du bloc).

On les exprime en pixels px ou en pourcentage %.

Par défaut, un bloc prend 100 % de la largeur disponible.
On peut le vérifier en appliquant à nos blocs des bordures ou une couleur de fond :
 Les blocs prennent toute la largeur disponible

Maintenant, rajoutons un peu de CSS afin de modifier la largeur des paragraphes.

Si on veut que tous les paragraphes aient une largeur de 50 %, on écrira en CSS :
p { ·

width: 50%;

Le résultat est visible juste en dessous :

Le bloc paragraphe prend 50 % de la largeur disponible

 Les pourcentages sont utiles pour créer un design qui s'adapte automatiquement à la
résolution d'écran du visiteur.
Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension
précise en pixels, par exemple pour reprendre un design très précis. Essayez le
bout de code suivant pour voir :
p {

width: 250px;

Les images sont un cas un peu particulier : elles se mettent les unes à la suite des
autres, sans prendre toute la largeur, mais on peut malgré tout leur donner une
dimension exacte.

Définissez des marges avec margin et padding

Tous les blocs possèdent des marges (intérieures et extérieures) :

Les marges intérieures et extérieures

En CSS, on peut modifier la taille des marges avec deux propriétés :

1. margin (taille de la marge extérieure)

2. padding (taille de la marge intérieure).

Pour bien comprendre la différence, faisons quelques tests.

Pour l'occasion, j'ai rédigé dans le fichier HTML des paragraphes de texte en lorem
ipsum (du faux texte). Ensuite, dans le fichier CSS, j'ai donné au bloc p une largeur
de 350px et j'ai ajouté une couleur jaune avec la balise background-color pour
qu'on visualise bien la différence entre les différentes marges :
p {

width: 350px;

background-color: #F1C864;

text-align: justify;

Voilà ce qu'on obtient avec ce code :

Les paragraphes sont séparés d'une marge par défaut

Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure
(padding ) dans le bloc du paragraphe, (on le voit bien car il a un fond jaune et que
les bordures sont collées au texte).
En revanche, il y a une marge extérieure (margin ), on la voit bien car elle espace
les paragraphe entre eux, avec une marge blanche (couleur du fond de la page par
défaut). C'est cette marge qui fait que deux paragraphes ne sont pas collés, et
qu'on a l'impression de “sauter une ligne”.

Ajoutez une marge intérieure avec la propriété CSS padding

Pour ajouteraux paragraphes une marge intérieure (padding) de 16px par

exemple, on écrit :
p {

width: 350px;

background-color: #F1C864;

text-align: justify;

padding: 16px;
}

On obtient alors :

Les paragraphes ont un padding de 16px

Ajoutez une marge extérieure avec la propriété CSS margin

Maintenant, si on veut que nos paragraphes soient encore plus espacés entre eux,
on rajoute la propriété margin . Demandons par exemple 50px de marge entre
deux paragraphes :
p {

width: 350px;

background-color: #F1C864;

text-align: justify;

padding: 16px;

margin: 50px;

On obtient :
 Les paragraphes ont un margin de 50px et un padding de 16px

Mais ??? Une marge s'est rajoutée tout autour aussi, pas seulement entre les deux
paragraphes !?
Eh oui, margin (comme padding d'ailleurs) s'applique aux quatre côtés du bloc.
Si vous voulez spécifier des marges différentes en haut, en bas, à gauche et à
droite, il va falloir utiliser des propriétés plus précises… Le principe est le même
que pour la propriété border, vous allez voir !

Spécifiez les propriétés margin et padding

Vous allez avoir besoin d'un minimum de vocabulaire en anglais ici :

• top: haut ;
• bottom: bas ;
• left: gauche ;
• right: droite.

Voyez ce que cela donne dans le schéma ci-dessous :

 Les différents types de marges intérieures et extérieures

Vous pouvez aussi utiliser seulement les propriétés raccourcies margin ou padding
en précisant quatre valeurs à la suite, dans le sens des aiguilles d'une montre (haut,
droite, bas, gauche).
Exemple : margin: 2px 0 3px 1px;.
Ce qui signifie :
“ 2 pixels de marge en haut, 0 pixel de marge à droite (le px est facultatif dans ce cas),
3 pixels de marge en bas et 1 pixel de marge à gauche”.

Centrez vos blocs avec width et margin: auto;

Pour centrer des blocs, il faut respecter les règles suivantes :

1. donner une largeur au bloc avec la propriété width ;

2. indiquer margin: auto; (les marges extérieures seront alors automatiques, et
permettront de centrer le contenu.

Essayons cette technique sur nos paragraphes, en ajoutant simplement une ligne
au CSS :
p {

width: 350px;

background-color: #F1C864;

text-align: justify;

padding: 16px;

margin: auto;
}

Et on obtient :

Les paragraphes sont centrés sur la page

Il n'est cependant pas possible de centrer verticalement un bloc avec cette technique.
Seul le centrage horizontal est permis.
Je vous invite maintenant à tester ce que vous venez de découvrir avec le CodePen
P3C2.

À vous de jouer !

Vous allez maintenant pouvoir vous faire la main sur le site de Robbie Lens, et
mettre en pratique ce que vous venez d'apprendre ! Dans la branche de départ de
l'exercice, vous trouverez un bout de CSS qui indique :
* {

margin: 0;

}
 Cela sert à réinitialiser les marges par défaut des navigateurs.
À partir de là, vous allez :

• ajouter unpaddingau header et au footer de 20px en haut et en bas, et de

50px à gauche et à droite ;
• ajouter une section autour du contenu de la page d'accueil ;
• ajouter une section autour du contenu de la page A-propos ;
• donner à vos sections (pour les futures sections à venir) un padding de 80px ;
• créer un padding de 50px pour carre-contenu ;
• centrer le contenu de la page A-propos ;
• aérer le contenu de la page A-propos : mettre de la marge au-dessus du sous-
titre "Services" et de la liste des compétences.

Vous trouverez sur GitHub la base de code nécessaire pour réaliser l’exercice sur la
branche P3C2-exercice. Voici la solution sur la branche P3C2-solution pour vérifier si
vous aviez vu juste.

En résumé

• On distingue deux principaux types de balises en HTML :

o les balises de type block comme <p> ou <h1> créent un retour à la ligne et
occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas ;
o les balises de type inline comme <a> ou <strong> délimitent du texte au
milieu d'une ligne. Elles se suivent de gauche à droite.
• On peut modifier la taille d'une balise de type block avec les propriétés CSS
width (largeur) et height (hauteur).
• Les éléments de la page disposent chacun de padding (marges intérieures) et de
margin (marges extérieures).
• On peut centrer le contenu d'un bloc dont la largeur est définie par width avec
margin: auto;
 Faites votre mise en page avec Flexbox

Comprenez la logique : un conteneur, des éléments

Pour faire de la mise en page avec Flexbox, il faut :

1. Définir un conteneur.
2. Et placer à l'intérieur plusieurs éléments.

Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !
Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs
cartons, si vous préférez). Vous pouvez en créer autant que nécessaire pour
obtenir la mise en page que vous voulez.
Commençons par étudier le fonctionnement d'un carton (euh pardon, d'un
conteneur).
Un conteneur (container en anglais) est une balise qui peut renfermer d'autres balises,
comme du texte ou encore des images. Les conteneurs les plus célèbres sont les
balises <div> et <span> .
<div class="container">

<div class="element element1">Élément 1</div>

<div class="element element2">Élément 2</div>

<div class="element element3">Élément 3</div>

</div>

Mais si je fais ça, par défaut, mes éléments vont se mettre les uns en dessous des
autres, non ? Ce sont des blocs, après tout !
Oui, tout à fait, c'est le comportement normal dont nous avons l'habitude.
Découvrons donc maintenant l'intérêt de Flexbox !

Alignez les éléments d'un conteneur avec display: flex;

Il suffit d'une seule propriété CSS, et tout change ! Cette propriété, c'est flex et
on l'applique au conteneur :
.container {

display: flex;

... alors les blocs se placent par défaut côte à côte. Magique !
 Donnez leur une direction avec la propriété flex-direction

Flexbox permet d'agencer ces éléments dans le sens que l'on veut. Avec flex-
direction, on peut les positionner verticalement ou encore les inverser. Cette
propriété CSS peut prendre les valeurs suivantes :

• row : organisés sur une ligne (par défaut) ;

• column : organisés sur une colonne ;
• row-reverse : organisés sur une ligne, mais en ordre inversé ;
• column-reverse : organisés sur une colonne, mais en ordre inversé.

Ici, on fait simplement :

.container {

display: flex;

flex-direction: column;

Ce qui donne :
 Les éléments du conteneur sont disposés en colonne

Mais mais... c'est pareil qu'au début, non ? On avait ce résultat sans Flexbox,
après tout !
C'est vrai. Mais maintenant que nos éléments sont flex, ils ont tout un tas d'autres
propriétés utiles que nous allons voir juste après, on va y revenir.
Essayez aussi de tester l'ordre inversé, pour voir :
.container {

display: flex;

flex-direction: column-reverse;

Et voilà ce que ça donne :

 Les éléments sont en colonne... dans l'ordre inverse !

Regardez bien la différence : les blocs sont maintenant dans l'ordre inverse ! Je n'ai
pas du tout changé le code HTML, qui reste le même depuis le début.

Retournez à la ligne avec la propriété flex-wrap

Par défaut, les blocs essaient de rester sur la même ligne s'ils n'ont pas la place,
quitte à "s'écraser", et provoquer parfois des anomalies dans la mise en page
(certains éléments pouvant dépasser de leur conteneur). Si vous voulez, vous
pouvez demander à ce que les blocs aillent à la ligne lorsqu'ils n'ont plus la place,
avec flex-wrap.
Voilà les différentes valeurs de flex-wrap :

1. nowrap : pas de retour à la ligne (par défaut) ;

2. wrap : les éléments vont à la ligne lorsqu'il n'y a plus la place ;
3. wrap-reverse : les éléments vont à la ligne, lorsqu'il n'y a plus la place, en sens
inverse.

.container {

display: flex;

flex-wrap: nowrap;
 /* OU wrap;

OU wrap-reverse; */

Dans les illustrations suivantes, vous pouvez voir les différents comportements de
nos blocs en fonction de la valeur que l'on attribue à flex-wrap :

Avec flex-wrap: nowrap; :

Les éléments se serrent pour tenir sur la même ligne

Avec flex-wrap: wrap; :

Les éléments passent à la ligne s'ils ne rentrent pas tous sur la même ligne

Cette propriété sera particulièrement utile quand nous aurons besoin d'adapter nos
pages aux plus petits écrans. Nous verrons ça dans la prochaine partie de ce cours.

Avec flex-wrap: wrap-reverse; :

Les éléments passent à la ligne mais à l'envers

Alignez les éléments sur un axe principal et secondaire

Les éléments sont organisés par défaut de manière horizontale. Mais ils peuvent
être organisés de manière verticale. Selon le choix que vous faîtes, ça va définir ce
qu'on appelle l'axe principal. Il y a aussi un axe secondaire :

• si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical ;
• si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.

Pourquoi je vous raconte ça ? Parce que nous allons découvrir comment aligner
nos éléments sur l'axe principal et sur l'axe secondaire.

Alignez sur l'axe principal avec la propriété justify-content

Pour faire simple, partons sur des éléments organisés horizontalement (c'est le cas par
défaut).
Pour changer leur alignement, on va utiliser justify-content, qui peut prendre
ces valeurs :

• flex-start: alignés au début (par défaut) ;

• flex-end: alignés à la fin ;
• center: alignés au centre ;
• space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace entre
eux) ;
• space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent
aussi de l'espace sur les extrémités.

On écrit alors :
.container {

display: flex;

justify-content: flex-start /* OU flex-end

OU center

OU space-between

OU space-around; */

Le mieux est encore de tester toutes les valeurs possibles pour voir ce que ça
donne, vous ne pensez pas ?
Manipulez toutes les valeurs possibles de justify-content dans le CodePen
P3C3.
Vous voyez comment les éléments s'alignent différemment selon les cas ? Avec
une simple propriété, on peut intelligemment agencer nos éléments comme on
veut !
Maintenant, voici ce qu'il faut bien comprendre : ça marche aussi si vos
éléments sont dans une direction verticale. Dans ce cas, l'axe vertical devient
l'axe principal, et justify-content s'applique aussi :
.container {
 display: flex;

flex-direction: column;

justify-content: center;

height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */

Avec une direction verticale (“column”), le centrage fonctionne de la même façon,

mais cette fois en hauteur.
Ajoutez flex-direction: column; dans le CodePen P3C3, vous verrez la
différence !

Alignez sur l'axe secondaire avec align-items

Si nos éléments sont placés dans une direction horizontale (ligne), l'axe
secondaire est... vertical. Et inversement : si nos éléments sont dans une direction
verticale (colonne), l'axe secondaire est horizontal.
La propriété align-items permet de changer leur alignement sur l'axe
secondaire, grâce aux valeurs :

• stretch: les éléments sont étirés sur tout l'axe (valeur par défaut) ;
• flex-start: alignés au début ;
• flex-end: alignés à la fin ;
• center: alignés au centre ;
• baseline: alignés sur la ligne de base (semblable à flex-start ).

Pour ces exemples, nous allons partir du principe que nos éléments sont dans une
direction horizontale (mais n'hésitez pas à tester aussi dans la direction verticale
!).
.container {

display: flex;

justify-content: center;

align-items: center;

Ajoutez align-items: center; dans le CodePen P3C3, vous verrez le résultat !

Saint Graal du développeur web, le centrage vertical et horizontal peut d'ailleurs
être obtenu encore plus facilement. Dites-vous que votre conteneur est une
Flexbox, et établissez des marges automatiques sur les éléments à l'intérieur.
C'est tout ! Essayez :
.container {
 display: flex;

.element {

margin: auto;

Répartissez les blocs sur plusieurs lignes avec align-content

Si vous avez plusieurs lignes dans votre Flexbox, vous pouvez choisir comment
celles-ci seront réparties avec align-content.
Cette propriété n'a aucun effet s'il n'y a qu'une seule ligne dans la Flexbox.
Prenons donc un cas de figure où nous avons plusieurs lignes. J'autorise les
éléments à aller à la ligne avecflex-wrap.
Voyons voir comment les lignes se répartissent différemment avec la nouvelle
propriété align-content que je voulais vous présenter. Elle peut prendre ces
valeurs :

• stretch (par défaut) : les éléments s'étirent pour occuper tout l'espace ;
• flex-start : les éléments sont placés au début ;
• flex-end : les éléments sont placés à la fin ;
• center : les éléments sont placés au centre ;
• space-between : les éléments sont séparés avec de l'espace entre eux ;
• space-around : idem, mais il y a aussi de l'espace au début et à la fin.

Amusez-vous avec le CodePen P3C3 pour tester tout cela en remplaçant la

propriété justify-content par align-content !
Et si vous voulez vous entraîner pour vous assurer que vous maîtrisez bien les
propriétés de Flexbox, je vous recommande le jeu Flexbox Froggy. Avec les différentes
propriétés, vous devrez replacer les grenouilles sur les nénuphars.
 À vous de jouer !

Maintenant que vous maîtrisez les propriétés de Flexbox, nous allons en profiter
pour mettre en forme les pages du portfolio de Robbie Lens !
À partir de maintenant, la mise en page devient plus élaborée : vous pouvez donc, si
vous le voulez, vous référer à la maquette (le modèle) du site de Robbie Lens.
Pour y accéder, vous avez besoin de créer un compte sur Figma, c'est gratuit.
Des modifications ont été apportées au fichier de code pour que vous ayez
davantage d'éléments :

• des images ont été ajoutées dans le dossier "images" ;

• des sections ont été ajoutées dans la page d'accueil ;
• le style du footer a été modifié pour avoir le logo en haut à gauche de la page, et les
liens de navigation à droite.

Allez récupérer le modèle que vous trouverez dans la branche P3C3-exercice.

À partir de cette base de code, vous allez :

• utiliser flex pour avoir le logo en haut à gauche de la page, et les liens de
navigation à droite dans l’en-tête ;
• réagencer les éléments pour avoir le titre de la page d'accueil, le paragraphe, et le
lien ayant la classe "CTA" à gauche, et la photo à droite ;
• importer les images dans la page d'accueil, et créer une grille d'images avec deux
rangées de 3 images chacune.

Vous trouverez dans la base de code, pour démarrer l'exercice, des exercices qui vous
aideront à mettre en place votre code. Et une fois que vous aurez fini, vous pouvez
comparer ce que vous avez fait avec la solution sur la branche P3C3-solution.
 En résumé

• Le principe de Flexbox est d'avoir un conteneur avec plusieurs éléments à

l'intérieur. Avec display: flex; sur le conteneur, les éléments à l'intérieur sont
agencés en mode Flexbox (horizontalement, par défaut).
• Flexbox peut gérer toutes les directions. Avec flex-direction , on peut indiquer
si les éléments sont agencés horizontalement (par défaut) ou verticalement. Cela
définit ce qu'on appelle l'axe principal.
• L'alignement des éléments se fait sur l'axe principal avec justify-content et
sur l'axe secondaire avec align-items .
• Avec flex-wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus
d'espace.
• S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir
entre elles avec align-content.

Ajoutez des tableaux

Créez un tableau en HTML et CSS

La balise en paire <table> </table> indique le début et la fin d'un tableau. Cette
balise est de type block , on va donc la placer en dehors d'un paragraphe ou
d'une div .

Indiquez les valeurs du tableau avec les balises HTML <tr> et <td>

Pour construire un tableau ligne par ligne, on indique pour chaque ligne, <tr> (pour
table row ou "rangée du tableau"), le contenu des différentes cellules,<td> (pour table
data ou "donnée" ou "entrée") :

• <tr> </tr> indique le début et la fin d'une ligne du tableau ;

• <td> </td> indique le début et la fin du contenu d'une cellule.
 On a une balise de ligne <tr> qui englobe un groupe de cellules <td> .
Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne
(donc trois colonnes), je devrai taper ceci :
<table>

<tr>

<td>Carmen</td>

<td>33 ans</td>

<td>Espagne</td>

</tr>

<tr>

<td>Michelle</td>

<td>26 ans</td>

<td>États-Unis</td>

</tr>

</table>

Bon, le résultat est un peu déprimant :

Cela ne ressemble pas vraiment à un tableau

C'est un tableau, ça ? Le texte s'est écrit à la suite et il n'y a même pas de

bordures…
Oui, un tableau HTML sans CSS paraît bien vide…
 Ajoutez des bordures au tableau HTML grâce à la propriété CSS border

Pour ajouter des bordures, on utilise le sélecteur CSS correspondant !

On utilise td pour sélectionner toutes les cellules des tableaux de la page. Donc
pour créer des bordures à nos cellules, on fait :
td /* Toutes les cellules des tableaux... */

border: 1px solid black; /* auront une bordure de 1px */

Et voici le résultat juste en dessous :

Cela ressemble un peu plus à un tableau

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait
qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Collez les bordures du tableau HTML avec la propriété CSS border-collapse

border-collapse est une propriété CSS qui permet de “coller les bordures entre
elles”. Elle peut prendre deux valeurs :

1. collapse : les bordures seront collées entre elles, c'est l'effet qu'on recherche ici
;
2. separate : les bordures seront dissociées (valeur par défaut).

On écrit :
table {

border-collapse: collapse;

td {

border: 1px solid black;

Ce qui nous permet d'obtenir :

 Cela ressemble encore plus à un tableau

Voilà qui est mieux !

Ajoutez une ligne d'en-tête au tableau avec la balise HTML <th>

La ligne d'en-tête se crée avec un <tr> mais les cellules qu'elle contient sont, cette
fois, encadrées par des balises <th> (pour table header ou "en-tête de tableau" en
français) et non pas <td> !
<table>

<tr>

<th>Nom</th>

<th>Âge</th>

<th>Pays</th>

</tr>

<tr>

<td>Carmen</td>

<td>33 ans</td>

<td>Espagne</td>

</tr>

<tr>

<td>Michelle</td>

<td>26 ans</td>

<td>États-Unis</td>

</tr>

</table>

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

• les cellules sont des<th> au lieu des <td> habituels ;

• c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à
mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales
et sur l'en-tête :
table {

border-collapse: collapse;

td, th /* Mettre une bordure sur les td ET les th */ {

border: 1px solid black;

Ce qui donne :

Cela ressemble vraiment à un tableau

Comme vous pouvez le constater, le navigateur a mis en gras le texte des cellules d'en-
tête. C'est ce que font en général les navigateurs mais, si vous le désirez, vous pouvez
changer cela à coups de CSS : modifier la couleur de fond des cellules d'en-tête, leur
police, leur bordure, etc. Pour cela, il vous suffit d'utiliser le sélecteur th dans le CSS !

Donnez un titre au tableau avec la balise HTML <caption>

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner

rapidement le visiteur sur le contenu du tableau. Notre exemple est constitué
d'une liste de personnes… oui, mais alors ? Qu'est-ce que cela représente ? Sans
titre de tableau, vous le voyez, on est un peu perdu.
Heureusement, il y a <caption> pour ajouter un titre à notre tableau !
Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui
contient le titre du tableau :
<table>

<caption>Passagers du vol 377</caption>

<tr>

<th>Nom</th>

<th>Âge</th>

<th>Pays</th>

</tr>

<tr>

<td>Carmen</td>
 <td>33 ans</td>

<td>Espagne</td>

</tr>

<tr>

<td>Michelle</td>

<td>26 ans</td>

<td>États-Unis</td>

</tr>

</table>

Et voilà le résultat :

On comprend mieux l'objet de ce tableau

Vous pouvez changer la position du titre avec la propriété CSS caption-side. Par
défaut, la valeur est top (au-dessus du tableau), mais vous pouvez aussi indiquer
bottom : le titre sera alors placé en dessous du tableau.
Bon mais on étouffe encore un peu avec ce tableau très compacte !
Oui d'ailleurs, comment on fait pour ajouter des marges dans un tableau, avec
du padding ?
Exactement, et ça se fait côté CSS avec la propriété padding!

Ajoutez des marges à un tableau HTML avec la propriété CSS padding

Pour correctement ajouter des marges à toutes nos cellules, y compris celles de
l'en-tête, on va ajouter la propriété CSS padding sur les sélecteurs td et th à la
fois (comme on l'avait fait pour ajouter des bordures, souvenez-vous) :
td, th {

border: 1px solid black;

padding: 15px;

Et voilà le résultat avec une marge de 15 pixels :

 Le tableau est plus aéré

C'est mieux !
Et comment on fait pour centrer un tableau ? Par défaut il est à gauche…
C'est simple, et ça se passe une fois de plus dans le fichier CSS, cette fois, au
niveau du sélecteur table !

Centrez un tableau HTML avec la propriété CSS margin

Un peu plus haut dans le chapitre avait utilisé le sélecteur table pour ajouter la
propriété CSS border-collapse qui nous permettait de "coller" les cellules
entre elles.
C'est également sous le sélecteur table qu'on va indiquer au navigateur de
centrer le tableau sur la page grâce à la propriété CSS margin , pour laquelle on
va préciser la valeur auto:
table {

border-collapse: collapse;

margin: auto;

Voici ce que ça donne :

Le tableau est centré sur la page

 Super ! Bon maintenant, voyons comment structurer un tableau un peu plus
complexe. Nous avons appris à construire un petit tableau simple. Cela peut
suffire dans la plupart des cas, mais vous aurez parfois besoin de réaliser des
tableaux plus… complexes.

Structurez un grand tableau avec des balises HTML

Divisez un tableau avec les balises HTML thead, tbody et tfoot

Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs
parties. Pour cela, il existe des balises HTML qui permettent de définir les trois
“zones” du tableau :

1. l'en-tête du tableau (en haut) se définit avec les balises <thead></thead>

2. le corps du tableau (au centre) se définit avec les balises <tbody></tbody>
3. le pied du tableau (en bas) se définit avec les balises <tfoot></tfoot>

Vous vous servirez de ces balises, surtout si votre tableau est assez gros, et que vous
avez besoin de l'organiser plus clairement. Pour les “petits” tableaux, vous pouvez
garder sans problème l'organisation plus simple que nous avons vue au début.
Ok d'accord, mais en fait, je vois bien ce qu'on peut mettre en en-tête et à
l'intérieur du tableau, mais que mettre dans le pied de tableau ?
Vous pouvez par exemple y mettre un résumé, ou un total. Le pied de tableau se
mettra, comme l'en-tête, par défaut, en gras :
 Le tableau a un pied de tableau

Dans cet exemple de tableau, ce n'est pas forcément très parlant de mettre le
même contenu dans l'en-tête et le pied du tableau. Mais cela peut être utile
lorsqu'un tableau est très long.
Entraînez-vous et manipulez le code de ce tableau sur le CodePen P4C1a.
Vous l'aurez sûrement remarqué dans le code HTML : c'est un peu déroutant, mais il
est conseillé d'écrire les balises dans l'ordre suivant :

1. <thead>
2. <tfoot>
3. <tbody>

Fusionnez des cellules du tableau avec les attributs colspan et rowspan

Pour fusionner des cellules entre elles, il suffit d'ajouter un attribut dans la balise
HTML <td>. Cela permet d'indiquer le nombre de cellules à fusionner entre elles
(la balise des cellules).
II existe deux attributs pour deux types de fusions différentes :
1. l'attribut colspan permet de fusionner des colonnes : la fusion s'effectue
horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-même.
2. l'attribut rowspan permet de fusionner des lignes : là, deux lignes seront
groupées entre elles. La fusion s'effectuera verticalement.

Voyons tout de suite à quoi cela peut ressembler :

Un tableau avec des lignes et des colonnes fusionnées

Vous trouverez le code utilisé pour réaliser ce tableau dans le CodePen P4C1b.
Notez qu'on peut modifier l'alignement vertical du texte des cellules de tableaux avec la
propriétévertical-align qu'on a vue dans le chapitre "Abordez d'autres techniques
de mise en page".

À vous de jouer !

Vous allez maintenant pouvoir construire le tableau des tarifs de Robbie Lens !
Vous verrez que la base de code a été réorganisée :

• le fichier CSS a été découpé en 4 fichiers CSS différents qui se trouvent dans le
dossier style ;
• le fichier de base style.css est importé par chaque page ;
• chaque page possède son propre fichier CSS.

Vous ajouterez les tarifs à la suite de la page "À propos", après le lien Call to action
(appel à l’action).
Voilà à quoi le tableau devrait ressembler :
 Le tableau des prix de Robbie Lens

Comme d'habitude, vous trouverez la base de code pour faire l’exercice sur la branche
P4C1-exercice, et vous pouvez consulter la solution sur la branche P4C1-solution
pour vérifier vos acquis.

En résumé

• Un tableau s'insère avec la balise HTML <table> et se définit ligne par ligne avec
<tr>.
• Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules
d'en-tête).
• Le titre du tableau se définit avec <caption>.
• On peut ajouter une bordure aux cellules du tableau HTML avec la propriété CSS
border . Pour coller les bordures entre elles, on utilise la propriété CSS border-
collapse.
• Un tableau peut être divisé en trois sections grâce aux balises HTML <thead> (en-
tête), <tbody> (corps) et <tfoot> (bas du tableau). L'utilisation de ces balises
n'est pas obligatoire.
• En HTML, on peut fusionner des cellules horizontalement avec l'attribut colspan,
ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent être
fusionnées.
 Créez des formulaires

Pour créer un formulaire, vous aurez besoin de la balise HTML <form> </form>, elle
permet d'indiquer le début et la fin du formulaire.
Voici les deux attributs indispensables pour construire un formulaire fonctionnel :

1. L'attribut method indique par quel moyen les données vont être envoyées. Ne vous
en préoccupez pas pour le moment. Sachez juste que les méthodes les plus
utilisées sont get et post.
2. L'attribut action indique l'adresse de la page ou du programme qui va traiter les
informations.

Tout cela va nous permettre de créer la structure de base d’un formulaire en HTML
:
<p>Texte avant le formulaire</p>

<form method="get" action="">

<p>Texte à l'intérieur du formulaire</p>

</form>

<p>Texte après le formulaire</p>

Je donne la valeur get à l'attribut method ; et je laisse un champ vide : " " pour
action.
Pourquoi est-ce qu'on le laisse un champ vide dans l'attribut action ?
Si notre projet comportait également du code en *backend, c'est là qu'on
indiquerait une URL qui pourrait traiter notre formulaire. Mais ici, en laissant un
champ vide, on indique à notre formulaire qu'on restera sur la même URL, ce qui
nous permettra plus tard d'inspecter ce qu'on obtient, assez simplement.
*En règle générale, un site internet est composé de deux parties :

1. une partie frontend, c’est la partie visible de notre site internet, celle qui
s’affiche dans votre navigateur grâce à HTML, CSS et JavaScript ;
2. une partie backend, qui se trouve hébergée et qui s’exécute sur un serveur web.
Elle permet de faire des tâches plus complexes, comme traiter un formulaire,
envoyer un mail, sauvegarder des informations dans une base de données, etc.

Voyons maintenant quelle balise HTML utiliser pour saisir du texte dans un
formulaire.
 Insérez des champs de texte avec la balise HTML <input>

La balise HTML <input> est une balise orpheline.

On la retrouvera plusieurs fois dans ce chapitre. Souvent, ce sera la valeur de son
attribut, type, qui changera selon le type de champ que l'on veut ajouter : texte
monoligne, email, date, etc.

Ajoutez une zone de texte monoligne avec <input type="text">

Une zone de texte monoligne est une zone de texte d’une seule ligne. On l'utilise
pour des champs de texte qui ne requièrent que quelques mots, comme un nom
ou un prénom, par exemple.
On ouvre avec la balise <input> et on précise la valeur de l'attribut (type="text"
) pour indiquer qu'il s'agit d'une zone de texte d'une seule ligne :
<input type="text">

Ensuite, il faut donner un nom à votre zone de texte ; pour cela on utilise l'attribut
name.
Ce nom n'apparaît pas sur la page, mais il est indispensable parce qu’il permettra plus
tard d'identifier le champ d'où viennent les informations.
Commençons par demander au visiteur de renseigner son prénom. On écrit alors :
<input type="text" name="prenom">

Voici ce que cela donne pour un formulaire très basique avec uniquement notre
champ de texte monoligne qui demande son prénom au visiteur du site :
<form method="get" action="">

<input type="text" name="prenom">

</form>

Comment le visiteur saura qu'il faut renseigner son prénom si l'attribut name ne
s'affiche pas ?
Bien vu ! Lorsqu’un visiteur tombe sur un champ de texte à saisir, il ne sait pas
toujours ce qu'il doit y écrire. C'est justement le rôle du champ libellé !

Ajoutez un champ de libellé avec la balise HTML <label> </label>

Un libellé est un champ de texte prérempli avec une indication pour guider le visiteur du
site sur ce qu’il doit écrire. On crée un champ de libellé avec la balise HTML<label>
</label> :
<form method="get" action="">
 <label>Votre prénom</label> : <input type="text" name="prenom">

</form>

Mais cela ne suffit pas : il faut lier le label à la zone de texte.

Pour ce faire, on doit donner un nom à la zone de texte, non pas avec l'attribut
name mais avec l'attribut id (que l'on peut utiliser sur toutes les balises).
Un attribut name et un attribut id sur le champ ? Cela ne va-t-il pas faire double
emploi ?

• L'attribut id est utilisé pour identifier l'élément HTML afin d’y accéder et de le
manipuler. Il est donc unique pour cet élément.
• L'attribut name, lui, réfère à la variable du formulaire que l’élément concerne. Ici, il
n’y a qu’un seul élément qui pourra référer à la variable prenom ; name et id
auront donc la même valeur. Mais lorsque nous utiliserons des checkbox ou des
radio, plusieurs éléments correspondront à la même variable. Mais nous verrons
cela un peu plus tard, et vous comprendrez mieux.

Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur
que l' id du champ :
<form method="get" action="">

<p>

<label for="prenom">Votre prénom</label> : <input type="text" name="prenom" id="prenom">

</p>

</form>

Ce qui veut dire en français :

"Pour le champs de texte monoligne, nommé prenom, il y aura un libellé "Votre
prénom" qui s'affichera".
On peut ajouter un certain nombre d'autres attributs à la balise <input> pour
personnaliser son fonctionnement :

• agrandir le champ avec size ;

• limiter le nombre de caractères que l'on peut saisir avec maxlength ;
• pré-remplir le champ avec une valeur par défaut à l'aide de value ;
• donner une indication sur le contenu du champ avec placeholder . Cette
indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.

Dans l'exemple suivant, la zone de texte contient une indication permettant de

comprendre ce qu'il faut saisir ; le champ fait 30 caractères de long, mais on ne
peut écrire que 20 caractères maximum à l'intérieur :
<form method="get" action="">
 <p>

<label for="prenom">Votre prénom :</label>

<input type="text" name="prenom" id="prenom" placeholder="Ex. : Mathieu" size="30"

maxlength="20">

</p>

</form>

Testez vous-même le résultat pour observer le comportement du champ. En

attendant, voici le rendu du champ dans son état initial (avant que le visiteur ne
renseigne quoi que ce soit) :

Ajoutez une zone de texte multiligne avec <textarea> </textarea>

Une zone de texte multiligne est une zone de texte de plusieurs lignes. C’est utilisé
dans le cas où le visiteur d’un site aurait besoin d’écrire un paragraphe de texte
dans un formulaire.
Pour créer une zone de texte multiligne, on utilise :<textarea> </textarea> .
Comme pour tout autre élément du formulaire, il faut lui donner un nom avec
name et utiliser un label qui explique de quoi il s'agit :
<form method="get" action="">

<p>

<label for="ameliorer">Des conseils pour améliorer mon site ?</label><br>

<textarea name="ameliorer" id="ameliorer"></textarea>

</p>

</form>

Et voici le résultat en image :

Une zone de texte multiligne

Grâce à la poignée située en bas à droite de la zone de texte, le visiteur peut étirer
le champ pour mieux visualiser ce qu'il écrit (ce qui n'est pas possible avec un
champ de texte monoligne) :
 Une zone de texte multiligne agrandie avec la poignée

Mais on peut modifier la taille par défaut du <textarea>, et ce, de deux façons
différentes :

1. En appliquant au <textarea> les propriétés CSS width et height .

2. En ajoutant à la balise <textarea> les attributs :
a. rows (indique le nombre de lignes qui peuvent être affichées) ;
b. et cols (indique le nombre de colonnes qui peuvent être affichées).

Vous pouvez pré-remplir le <textarea> avec une valeur par défaut. Dans ce cas, on
n'utilise pas l'attribut value : on écrit tout simplement le texte par défaut entre la
balise ouvrante et la balise fermante !
Ok mais on n'avait pas parlé plus haut de la balise input ? Et expliqué que ce
serait l'attribut type qui changerait selon le type de champ ? Or on a déjà vu deux
autres champs (libellé et multiligne qui ont des balises spécifique, je ne
comprends pas.
Vous avez raison, les balises libellé et zone de texte multiligne sont spécifiques :
libellé n'est pas un champ de saisie (le visiteur ne rempli pas un libellé, c'est juste
une indication pour lui) ; et le textearea permet de spécifier un champs étirable.
Cela dit, en dehors du champs de texte monoligne, il existe d'autres type de saisie.
On utilisera alors a balise input et l'attribut type (pour lequel on indiquera un
type de champ en particulier).

Utilisez <input> pour des formats de saisie particuliers

Vous pouvez créer de nombreux types de champs de saisie :

Type de Code
champ
un e-mail <input type="email">
une URL <input type="url">
On peut demander à saisir une adresse absolue,
commençant généralement par http://
un numéro <input type="tel">
de
téléphone
un nombre <input type="number">
entier Le champ s'affiche en général avec des petites flèches pour
changer la valeur.
un curseur <input type="range">
(aussi On utilise range pour demander au visiteur une valeur
appelé comprise entre deux bornes :
“slider”)

Un champ de curseur
une date Différents types de champs de sélection de date existent,
comme
<input type="date"> pour sélectionner une date :

Un champ de date et le code associé

Mais il existe des variantes :

• <input type="time"> pour l'heure ;

• <input type="week"> pour la semaine ;
• <input type="month" pour le mois ;
• <input type="datetime"> pour la date et l'heure (avec
gestion du décalage horaire) ;
 • <input type="datetime-local"> pour la date et l'heure
(sans gestion du décalage horaire).

Vérifiez bien quels navigateurs gèrent ce type de champ, il

n'est pas encore complètement reconnu.
une <input type="search">
recherche

Un champ de recherche et le code associé

Pour les types de champs nombre, date et curseur, vous pouvez personnaliser le
fonctionnement du champ avec les attributs suivants :

• min : valeur minimale autorisée ;

• max : valeur maximale autorisée ;
• step : c'est un “pas” de déplacement. Si vous indiquez un pas de 2, le champ
n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).

Laissez le visiteur choisir une option

HTML offre plusieurs manières de choisir une ou des option(s) dans un formulaire.
Ce sont des éléments qui demandent au visiteur de faire un choix parmi une liste
de possibilités, comme :

1. Les cases à cocher (plusieurs choix possibles).

2. Les boutons radio (un seul choix possible).
3. Les listes déroulantes (un seul choix possible).

Insérez des cases à cocher avec <input type="checkbox">

On crée une case à cocher avec la balise <input> en spécifiant le type checkbox
qui signifie "case à cocher" en français :
<input type="checkbox" name="choix">

Rajoutez un <label> et le tour est joué :

<form method="get" action="">

<p>

Cochez les aliments que vous aimez manger :<br>

 <input type="checkbox" name="frites" id="frites"> <label for="frites">Frites</label><br>

<input type="checkbox" name="steak" id="steak"> <label for="steak">Steak</label><br>

<input type="checkbox" name="epinards" id="epinards"> <label

for="epinards">Épinards</label><br>

<input type="checkbox" name="huitres" id="huitres"> <label for="huitres">Huitres</label>

</p>

</form>

Ce qui donne, une liste d'aliments (le visiteur a la possibilité d'en cocher plusieurs)
:

Une liste à choix multiple

N'oubliez pas de donner un nom différent à chaque case à cocher, cela vous permettra
d'identifier plus tard lesquelles ont été cochées par le visiteur.
Vous pouvez faire en sorte qu'une case soit cochée par défaut, avec l'attribut checked
: <input type="checkbox" name="choix" checked>.
Normalement, tout attribut possède une valeur. Dans le cas présent, en revanche,
ajouter une valeur n'est pas obligatoire : la présence de l'attribut suffit à faire
comprendre à l'ordinateur que la case doit être cochée. Si cela vous perturbe,
sachez que vous pouvez donner n'importe quelle valeur à l'attribut (certains
développeurs écrivent parfois checked="checked" mais c'est un peu redondant).
Dans tous les cas, la case sera cochée.

Insérez des boutons radio avec <input type="radio">

Les boutons radio permettent au visiteur de faire un choix (et un seul) parmi une
liste de possibilités. Il y a une petite difficulté supplémentaire par rapport aux
cases à cocher : il faut organiser les boutons radio en groupes.
Les options d'un même groupe possèdent le même nom, name, mais chaque
option doit avoir une valeur (value) différente.
La balise à utiliser est toujours <input>, avec cette fois la valeur radio pour
l'attribut type :
<form method="get" action="">

<p>

Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>
 <input type="radio" name="age" value="moins15" id="moins15"> <label for="moins15">Moins de 15
ans</label><br>

<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label for="medium15-

25">15-25 ans</label><br>

<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label for="medium25-

40">25-40 ans</label><br>

<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus de 40

ans</label>

</p>

</form>

Ce qui donne :

Une liste à choix unique

Pourquoi avoir mis le même nom pour chaque option ?

Tout simplement pour que le navigateur sache de quel groupe votre sélection fait
partie. Essayez d'enlever les attributs name, vous verrez qu'il devient possible de
sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut ; c'est
pour cela qu'on les lie entre eux en leur donnant un nom identique.
Vous noterez que cette fois on a choisi un id différent de name.
En effet, les valeurs de name étant identiques, on n'aurait pas pu différencier les id.
Si vous avez deux zones d'options différentes, il faut donner un name unique à
chaque groupe :
<form method="get" action="">

<p>

Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>

<input type="radio" name="age" value="moins15" id="moins15"> <label for="moins15">Moins de 15

ans</label><br>

<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label for="medium15-

25">15-25 ans</label><br>

<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label for="medium25-

40">25-40 ans</label><br>

<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus de 40

ans</label>

</p>

<p>
 Sur quel continent habitez-vous ?<br>

<input type="radio" name="continent" value="europe" id="europe"> <label

for="europe">Europe</label><br>

<input type="radio" name="continent" value="afrique" id="afrique"> <label

for="afrique">Afrique</label><br>

<input type="radio" name="continent" value="asie" id="asie"> <label

for="asie">Asie</label><br>

<input type="radio" name="continent" value="amerique" id="amerique"> <label

for="amerique">Amérique</label><br>

<input type="radio" name="continent" value="oceanie" id="oceanie"> <label

for="oceanie">Océanie</label>

</p>

</form>

Ce qui donne :

Deux listes à la suite

Insérez une liste déroulante avec les balises <select> et <option>

Le fonctionnement est un peu différent :

1. On utilise la balise <select> </select> pour indiquer le début et la fin de la

liste déroulante.
2. On ajoute l'attribut name à la balise pour donner un nom à la liste.
3. Puis, à l'intérieur du <select> </select>, on place plusieurs balises <option>
</option> (une par choix possible), pour donner à chacune d'elles un attribut
value afin d'identifier ce que le visiteur a choisi :

<form method="get" action="">

<p>
 <label for="pays">Dans quel pays habitez-vous ?</label><br>

<select name="pays" id="pays">

<option value="espagne">Espagne</option>

<option value="royaume-uni">Royaume-Uni</option>

<option value="canada">Canada</option>

<option value="japon">Japon</option>

</select>

</p>

</form>

Si vous voulez qu'une option soit sélectionnée par défaut, utilisez l'attribut
selected :
<option value="canada" selected>Canada</option>

À vous d'essayer pour voir ce que ça donne :

Une liste déroulante

Entraînez-vous à manipuler tous ces éléments d’option avec le CodePen P4C2.

Et mais c'est bien joli tout ça, mais normalement on rajoute un bouton d'envoi à la
fin d'un formulaire pour que le visiteur puisse nous envoyer les données saisies,
non ?
Bien vu ! C'est ce que l'on voit dans le prochain chapitre !

En résumé

• Un formulaire est englobé par la balise HTML <form></form> à laquelle on

ajoute les attributs method et action.
• On utilise ensuite d'autres balises HTML pour permettre au visiteur du site de saisir
des informations :
o la balise orpheline <input> pour un champ de saisie monoligne ;
o la balise en paire <textarea> </textarea> pour un champ de saisie multiligne
;
o la balise en paire <select> </select> suivi d'options avec la balise en paire
<option> </option> pour une liste déroulante.
• Le champ <input> peut également être configuré pour saisir d'autres types de
données : e-mail, URL, numéro de téléphone, date, etc.
• Un label peut être relié à n'importe quel input avec l'attribut for correspondant à
l'attribut id pour le champ utilisé.

Finalisez un formulaire et ajoutez un bouton d'envoi

Regroupez des champs avec la balise <fieldset>

Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de

les regrouper au sein de plusieurs balises <fieldset>.
Chaque <fieldset> peut contenir une légende avec la balise<legend>. Regardez
cet exemple :
<form method="get" action="">

<fieldset>

<legend>Vos coordonnées</legend> <!-- Titre du fieldset -->

<label for="nom">Quel est votre nom ?</label>

<input type="text" name="nom" id="nom">

<label for="prenom">Quel est votre prénom ?</label>

<input type="text" name="prenom" id="prenom">

<label for="email">Quel est votre e-mail ?</label>

<input type="email" name="email" id="email">

</fieldset>

<fieldset>

<legend>Votre souhait</legend> <!-- Titre du fieldset -->

<p>

Faites un souhait que vous voudriez voir exaucé :

<input type="radio" name="souhait" value="riche" id="riche"> <label for="riche">Être

riche</label>

<input type="radio" name="souhait" value="celebre" id="celebre"> <label for="celebre">Être

célèbre</label>

<input type="radio" name="souhait" value="intelligent" id="intelligent"> <label

for="intelligent">Être <strong>encore</strong> plus intelligent</label>

<input type="radio" name="souhait" value="autre" id="autre"> <label

for="autre">Autre...</label>

</p>
 <p>

<label for="precisions">Si "Autre", veuillez préciser :</label>

<textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>

</p>

</fieldset>

</form>

On ajoute un peu de CSS pour avoir un style sur notre fieldset et voilà le résultat
:

Vous voyez : chaque groupe est comme "encadré". Cela vous permet d'ajouter du
style, et de visuellement séparer vos éléments entre eux.
Manipulez le résultat obtenu avec le CodePen P4C3.

Sélectionnez automatiquement un champ avec autofocus

Vous pouvez également placer automatiquement le curseur dans l'un des champs
de votre formulaire, avec l'attribut autofocus. Dès que le visiteur chargera la
page, le curseur se placera dans ce champ. C'est très pratique d'un point de vue
de l'expérience utilisateur.
Par exemple, pour que le curseur soit par défaut dans le champ prenom, on écrit :
<input type="text" name="prenom" id="prenom" autofocus>

Rendez un champ obligatoire avec required

Vous pouvez également faire en sorte qu'un champ soit obligatoire, en lui donnant
l'attributrequired.
<input type="text" name="prenom" id="prenom" required>

Le navigateur indiquera alors au visiteur, si le champ est vide au moment de

l'envoi, qu'il doit impérativement être rempli.
 On dispose de pseudo-classes en CSS pour changer le style :
des éléments requis avec :required ;
et des éléments invalides avec :invalid .
N'oubliez pas non plus que vous disposez de la pseudo-classe :focus pour changer
l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
Exemple pour colorer le fond des champs requis :
:required {

background-color:#F2A3BB;

Créez le bouton d'envoi du formulaire avec <input>

Pour créer le bouton d'envoi, c'est encore la balise <input> qu'on utilise.
Elle existe en quatre versions :

1. type="submit" : c'est celui que vous utiliserez le plus souvent. Le visiteur sera
conduit à la page indiquée dans l'attribut action du formulaire.
2. type="reset" : remise à zéro du formulaire (testez pour voir).
3. type="image" : équivalent du bouton submit, présenté cette fois sous forme
d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
4. type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En
général, ce bouton est géré en JavaScript pour exécuter des actions sur la page,
mais nous n'apprendrons pas à le faire dans le cadre de ce cours.

On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value :
<input type="submit" value="Envoyer">

Ce qui nous donne un input qui a l'apparence d'un bouton :

Bouton de validation d'un formulaire

Cela ne fonctionne pas sur CodePen, c'est normal. Essayez de créer cela en code local
si vous voulez voir ce qui se passe.
Lorsque vous cliquez sur le bouton Envoyer, le formulaire vous amène alors à la
page indiquée dans l'attribut action. Le seul petit souci, c'est que nous n'avons
pas de page à indiquer en backend ici.
Comme je vous l'avais dit au chapitre précédent, puisque nous avons gardé
l'attribut action vide dans la balise <form> , le navigateur comprend qu'il doit
 rester sur la même page. En revanche, si vous observez bien la barre URL de votre
navigateur, vous verrez le contenu de votre formulaire apparaître à la suite :
index.html?nom=nebra&prenom=mathieu&email=coucou%40mathieu.com&s
ouhait=autre&precisions=Apprendre+le+machine+learning
Donc, il se passe bien quelque chose !
Mais comme je l'avais dit au chapitre précédent, le HTML et CSS ne sont pas suffisants
pour traiter ces informations. Il est nécessaire d'apprendre un nouveau langage,
comme le PHP, pour pouvoir “récupérer” les informations saisies et décider quoi en
faire.
Cela tombe bien, j'ai aussi rédigé un cours sur le langage PHP pour ceux que cela
intéresse !

À vous de jouer !

Vous allez pouvoir créer un formulaire de contact pour Robbie Lens !

Pour cela, rendez-vous sur GitHub pour avoir la base de code pour faire l’exercice sur la
branche P4C3-exercice.
Vous y trouverez la structure de la nouvelle section à ajouter dans la page
d'accueil. À vous de jouer pour :

• ajouter un champ nom avec le label associé ;

• ajouter un champ email avec le label associé ;
• ajouter un textarea ayant pour label message ;
• créer un bouton de validation "Envoyer".
• changer le lien du bouton “Un projet?Écrivez-moi” pour le faire pointer vers le
formulaire

Le formulaire aura une méthode get et restera vide pour l'attribut action .
Pour ce qui est du style du formulaire, vous trouverez le résultat final du site de
Robbie Lens.
Alors, qu’est-ce que ça donne de votre côté ? Voici la solution sur la branche P4C3-
solution.
 En résumé

• Il est possible de regrouper les champs au sein d'une balise <fieldset> qui
comporte une légende, avec la balise <legend>.
• On peut sélectionner automatiquement un champ en précisant l'attribut
autofocus.
• Il est également possible de rendre un champ obligatoire avec l'attribut required.
• Le bouton qui permet de valider le formulaire est créé à partir d'une balise input en
faisant : <input type="submit" value="Envoyer">