PLAN DU COURS.

1
PARTIE 0 : ENVIRONNEMENT DE DEVELOPPEMENT.
PARTIE 1 : CONCEPTS FONDAMENTAUX.
CHAPITRE 1 : INTRODUCTION À L’E-LEARNING.
CHAPITRE 2 : INTRODUCTION À HTML
2.1. : Historique et évolution de HTML
2.2. : Présentation du HTML.
2.3. : Le principe du Web
CHAPITRE 3 : STRUCTURE DE BASE D'UN DOCUMENT HTML
CHAPITRE 4 : LES BALISES ET ÉLÉMENTS HTML
4.1. : Les balises
4.2. : Structure d'un document HTML
4.3. : Les balises structurantes de HTML5
CHAPITRE 5 : LES BALISES DE TEXTE
5.1. : Les titres <h1> à <h6>
5.2. : Les paragraphes <p>
5.3. : Les styles de texte : <strong>, <em>, <u>, <s>, etc.
5.4. : Les citations <blockquote> et <q>
CHAPITRE 6 : LES LISTES
6.1. : Les listes non-ordonnées <ul> et les éléments <li>
6.2. : Les listes ordonnées <ol> et les éléments <li>
6.3. : Les définitions <dl>, les termes <dt> et les définitions <dd>
CHAPITRE 7 : LES LIENS HYPERTEXTES.
7.1. : Les balises <a> et les attributs href, target, etc.
7.2. : Les liens internes et externes
7.3. : Les ancres <a> et les liens de messagerie <a>
CHAPITRE 8 : LES IMAGES
CHAPITRE 9 : LES TABLEAUX
CHAPITRE 10 : LES FORMULAIRES
CHAPITRE 11 : LES MÉDIAS
11.1. : Les balises <audio> et <video>
11.2. : Les attributs et les formats de média
11.3. : L'insertion de médias dans une page HTML
CHAPITRE 12 : LES CADRES.
12.1. : La balise <iframe> et son utilisation pour intégrer du
contenu externe.
12.2. : Les attributs de l'iframe : src, width, height, etc.
12.3. : Les bonnes pratiques d'utilisation des iframes
Intégrer une page web
PARTIE 2 : MISE EN FORME.
CHAPITRE 1 : INTRODUCTION À CSS
CHAPITRE 2 : INTÉGRATION DE CSS DANS HTML
CHAPITRE 3 : SÉLECTEURS CSS
CHAPITRE 4 : PROPRIÉTÉS DE STYLE CSS
CHAPITRE 5 : MODÈLE DE BOÎTE CSS
5.1. : Concept du modèle de boîte : contenu, bordure, marge,
rembourrage
5.2. : Box-sizing : border-box vs content-box
5.3. : Techniques de mise en page avec le modèle de boîte

2
 CHAPITRE 6 : POSITIONNEMENT CSS
6.1. : Positionnement statique, relatif, absolu, fixe
6.2. : Propriétés de positionnement : top, bottom, left, right, z-
index
6.3. : Techniques de positionnement avancées : flexbox, grille CSS
CHAPITRE 7 : MISE EN FORME AVANCÉE AVEC CSS
7.1. : Transitions CSS : transition de propriétés, durée, retard,
fonctions de temporisation
7.2. : Animations CSS : définition de keyframes, durée, retard,
itération, fonctions d'accélération
7.3. : backwards-
PARTIE 3 : VALIDATION PAGE ET HEBERGEMENT
CHAPITRE 1 : VALIDATION DE PAGE.
CHAPITRE 2 : PRINCIPES DE L'HÉBERGEMENT DE SITES INTERNET.
CHAPITRE 3 : LES TYPES D’HÉBERGEMENT DE SITES
CHAPITRE 4 : ETAPE D’HÉBERGEMENT D’UN SITE.
BIBLIOGRAPHIE
TABLES DES MATIERES
ANNEXES

3
PARTIE 0 : ENVIRONNEMENT DE DEVELOPPEMENT.

Pour aller au bout de cette formation, vous aurez besoin

d’installer plusieurs logiciels métiers qui vous
permettront de travailler de manière plus efficace. Peu
importe votre système, que ce soit Windows, MacOs ou
n’importe quelle distribution Linux, des outils existent
pour vous aider à développer correctement.

Étape 1 : Choisir un bon navigateur web

Premièrement il faut un navigateur web qui vous servira à

visualiser ce que vous allez coder en HTML. J’imagine que
vous en avez déjà un d’installé sur votre ordinateur et
que vous l'utilisez au quotidien.

Vous pouvez utiliser Google Chrome ou Firefox par

exemple, cependant je vous déconseille fortement
d’utiliser Internet Explorer ou Safari. En effet ces deux
navigateurs, du fait de leur âge et du manque de mise à
jour, peuvent avoir un rendu visuel différent de celui
attendu. Et croyez-moi, vous avez déjà suffisamment de
chose à apprendre, n’allez pas vous compliquer la tâche
avec ces vieux navigateurs.

Étape 2 : Choisir un éditeur de code pour débuter

Maintenant que vous avez choisi votre navigateur, il vous

faut un logiciel pour vous aider à rédiger des balises
HTML. Ces logiciels d’éditions de code sont communément
appelés IDE pour ‘Integrated Development Environment’.

Lorsque l’on débute, il est important de choisir un IDE

relativement simple afin de ne pas avoir trop de tâches
automatisées, sans en comprendre les rouages.

Je vous recommande d’utiliser au choix :

 Sublime Text 3
 Visual Studio Code

Cette liste est volontairement courte pour ne pas vous

perdre dans la jungle des IDE, car il en existe une
multitude. Ces deux logiciels feront largement l’affaire,
à noter que Visual Studio Code bénéficie d’une belle
notoriété en ce moment.

4
L’ensemble des éditeurs de code mentionnés plus haut
peuvent être améliorés à l’aide d’extensions qui ajoutent
des fonctionnalités utiles au logiciel. Cependant,
veillez à ne pas installer trop d’extensions inutiles, ce
qui pourrait nuire à votre apprentissage. Mais
globalement, dites-vous qu’il existe des extensions pour
à peu près tout.

5
PARTIE 1 : CONCEPTS FONDAMENTAUX.

CHAPITRE 1 : Introduction à l’e-Learning.

L’e-Learning représente une méthode d'apprentissage

flexible, interactive et accessible, qui offre de
nombreuses opportunités pour l'éducation formelle et
informelle à travers les technologies de l'information et
de la communication.

L'e-Learning met l'accent sur l'accessibilité, la

flexibilité, l’autonomie, l'interactivité,
l'adaptabilité, l'évaluation, la collaboration, la
multimodalité et la gestion de l'apprentissage, qui sont
tous des éléments essentiels pour créer des expériences
d'apprentissage en ligne efficaces et enrichissantes.

Les objectifs de l’apprentissage en ligne sont :

 Préparer les étudiants à répondre aux besoins

croissants du marché du travail en matière de
conception et de gestion de l'apprentissage en ligne
 Offrir une flexibilité d'apprentissage qui permet aux
étudiants de gérer leur temps et leur lieu d'étude
 Faire bénéficier de l'accès à une variété de
ressources en ligne pour approfondir leurs
connaissances
 Présenter le Web campus de l'ISIPA qui est une
plateforme complète, interactive et évolutive

Différents scénarios peuvent se présenter dans

l’environnement d’un campus virtuel :

 Synchrone Présentiel
 Synchrone Distanciel
 Asynchrone Présentiel
 Asynchrone Distanciel

Les avantages sont les suivants :

 Flexibilité temporelle et spatiale

 Coût réduit
 Diversité des contenus
 Accessibilité accrue

6
  Suivi et évaluation facilitée

Les désavantages :

 Manque d'interaction en personne

 Dépendance à la technologie
 Autonomie et discipline requises
 Possibilité de distractions
 Barrières linguistiques et culturelles

Le web campus de l’ISIPA se trouve à l’adresse suivante :

[Link]

7
CHAPITRE 2 : Introduction à HTML

De nos jours le réseau est devenu une des notions la plus

incontournable dans le domaine de l’informatique.

Le langage HTML(HyperText Markup Language) permet

notamment la lecture de documents sur Internet à partir
de machines différentes, grâce au protocole HTTP,
permettant d'accéder via le réseau à des documents
repérés par une adresse unique, appelée URL.

On appelle World Wide Web (noté WWW) ou tout simplement

Web (mot anglais signifiant toile) la "toile virtuelle"
formée par les différents documents (appelés « pages web
») liés entre-eux par des hyperliens.

Les pages web sont généralement organisées autour d'une

page d'accueil, jouant un point central dans la
navigation à l'aide des liens hypertextes. Cet ensemble
cohérent de pages web liées par des liens hypertextes et
articulées autour d'une page d'accueil commune est
appelée site web.

2.1. : Historique et évolution de HTML

Voici un très bref historique de ce langage pour votre

culture générale.

Les versions de HTML

 HTML 1 : c'est la toute première version créée par

Tim Berners-Lee en 1991.
 HTML 2 : la deuxième version du HTML apparaît en 1994
et prend fin en 1996 avec l'apparition du HTML 3.0.
C'est cette version qui posera en fait les bases des
versions suivantes du HTML. Les règles et le
fonctionnement de cette version sont donnés par le
W3C (tandis que la première version a été créée par
un seul homme).

8
  HTML 3 : apparue en 1996, cette nouvelle version du
HTML rajoute de nombreuses possibilités au langage
comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.
 HTML 4 : il s'agit de la version la plus répandue du
HTML (plus précisément, il s'agit de HTML 4.01). Elle
apparaît pour la première fois en 1998 et propose
l'utilisation de frames (qui découpent une page web
en plusieurs parties), des tableaux plus complexes,
des améliorations sur les formulaires, etc. Mais
surtout, cette version permet pour la première fois
d'exploiter des feuilles de style, notre fameux CSS !
 HTML 5 : c'est la dernière version. Encore assez peu
répandue, elle fait beaucoup parler d'elle car elle
apporte de nombreuses améliorations comme la
possibilité d'inclure facilement des vidéos, un
meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc. C'est
cette version que nous allons découvrir ensemble.

2.2. : Présentation du HTML.

Le HTML (« HyperText Mark-Up Language ») est un langage

dit de « marquage » (de « structuration » ou de «
balisage ») dont le rôle est de formaliser l'écriture
d'un document avec des balises de formatage. Les balises
permettent d'indiquer la façon dont doit être présenté le
document et les liens qu'il établit avec d'autres
documents.

L'HTML est un langage utilisé pour afficher des

documents. Ce langage est surtout utilisé pour la
diffusion d'informations sur le Web.

Lorsque vous demandez à votre navigateur web une page

HTML, le navigateur (client) envoie une requête à un
autre ordinateur sur lequel la page demandée à été
stockée (le serveur). Celui-ci recherche le fichier
demandé et l'envoie au client. Ensuite, le client va lire
le fichier, l'interpréter et l'afficher. Il en profitera
pour demander au serveur tous les fichiers joints à la
page HTML initialement demandée (images, scripts,
animations, ...)
Pour que tous ces transferts se fassent assez rapidement,
les fichiers HTML sont en réalité de simple fichier
texte, vous pouvez les ouvrir avec le bloc note par

9
exemple qui contiennent le texte à afficher avec toutes
sortes de règles pour l'affichage (afficher le texte en
gras, italique, insérer une image, ...).
Un simple éditeur de texte basic, tel que Notepad sous
Windows, suffit pour créer des fichiers HTML et CSS.
Cependant pour améliorer la rapidité de production, un
éditeur spécialisé est recommandé, ne serait-ce que pour
la coloration syntaxique du code.
Sous Windows, Bloc notes, Notepad2, Notepad++.
Sous Mac OS X, TextMate, Smultron.
Sous Linux, il existe Quanta Plus, KWrite et Kate.
Le langage HTML est un langage structuré relativement
simple à apprendre mais limité. La tendance actuelle est
de se tourner vers son frère XML pour réaliser les
documents du web, qui lui offre de nombreuses
possibilités.

2.3. : Le principe du Web

Le web est composé de pages web stockées sur des serveurs

web, c'est-à-dire des machines connectées à Internet en
permanence et chargées de fournir les pages web
demandées. Chacune des pages web, et plus généralement
toute ressource en ligne (image, vidéo, musique,
animation, etc.), est repérée par une adresse unique
appelée URL.

Un URL (Uniform Resource Locator) est le moyen de nommer

un objet dans le monde WWW. La syntaxe d'un URL est la
suivante :

type:serveur:port/chemin_d'acces/fichier#etiquette?parametres

Le type de serveur :

http : pour les URL provenant de serveurs

WWW gopher : pour les serveurs GOPHER
ftp : pour les fichiers à transférer
telnet : pour ouvrir une session interactive
wais : pour interroger une base WAIS
news : pour accéder aux forums

L'élément clé pour la navigation au sein des pages web

est le navigateur (en anglais browser, parfois également
appelé fureteur, fouineur, feuilleteur ou butineur au
Québec), c'est-à-dire le logiciel client capable

10
d'interroger les serveurs web, d'exploiter leurs
résultats et de mettre en page les informations grâce aux
instructions contenues dans la page HTML.

Parmi les principaux navigateurs utilisés sur Internet,

citons notamment les suivants :
• Mozilla Firefox,
• Microsoft Internet Explorer,
• Netscape Navigator,
• Safari.

CHAPITRE 3 : Structure de base d'un document HTML

Voici la structure de base d’une page HTML5 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>

Copié dans Notepad++, cela donne la figure suivante.

11
Vous noterez que les balises s'ouvrent et se ferment dans
un ordre précis. Par exemple, la balise <html> est la
première que l'on ouvre et c'est aussi la dernière que
l'on ferme (tout à la fin du code, avec </html>). Les
balises doivent être fermées dans le sens inverse de leur
ouverture.

Un exemple :

- <html><body></body></html>: correct. Une balise qui

est ouverte à l'intérieur d'une autre doit aussi être
fermée à l'intérieur.
- <html><body></html></body> : incorrect, les balises
s'entremêlent.

12
CHAPITRE 4 : Les balises et éléments HTML

4.1. : Les balises

Les pages HTML sont remplies de ce qu'on appelle des

balises. Celles-ci sont invisibles à l'écran pour vos
visiteurs, mais elles permettent à l'ordinateur de
comprendre ce qu'il doit afficher.

Les balises se repèrent facilement. Elles sont entourées

de «chevrons», c'est-à-dire des symboles < et >, comme
ceci :<balise>

Les balises indiquent la nature du texte qu'elles

encadrent. Elles veulent dire par exemple : « Ceci est le
titre de la page », « Ceci est une image », « Ceci est un
paragraphe de texte », etc.

On distingue deux types de balises : les balises en

paires et les balises orphelines.

Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus

loin. Voici à quoi elles ressemblent : <titre>Ceci est un
titre</titre>

Les balises orphelines

13
Ce sont des balises qui servent le plus souvent à insérer
un élément à un endroit précis (par exemple une image).
Il n'est pas nécessaire de délimiter le début et la fin
de l'image, on veut juste dire à l'ordinateur « Insère
une image ici ». Une balise orpheline s'écrit comme
ceci : <image />

Les attributs

Les attributs sont un peu les options des balises. Ils

viennent les compléter pour communiquer des informations
supplémentaires. L'attribut se place après le nom de la
balise ouvrante et a le plus souvent une valeur, comme
ceci : <balise
attribut="valeur">

4.2. : Structure d'un document HTML

(1) Doctype et encodage

Le doctype : <!DOCTYPE html>

La toute première ligne s'appelle le doctype. Elle est

indispensable car c'est elle qui indique qu'il s'agit
bien d'une page web HTML. Ce n'est pas vraiment une
balise comme les autres (elle commence par un point
d'exclamation), vous pouvez considérer que c'est un peu
l'exception qui confirme la règle.

L'encodage

Sans rentrer dans les détails, car cela pourrait vite

devenir compliqué, l'encodage indique la façon dont le
fichier est enregistré.

C'est lui qui détermine comment les caractères spéciaux

vont s'afficher (accents, idéogrammes chinois et
japonais, caractères arabes, etc.). Il y a plusieurs
techniques d'encodage portant des noms bizarres et
utilisées en fonction des langues : ISO-8859-1, OEM 775,
Windows-1253… Une seule cependant devrait être utilisée
aujourd'hui autant que possible : UTF-8. Cette méthode

14
d'encodage permet d'afficher sans aucun problème
pratiquement tous les symboles de toutes les langues de
notre planète ! C'est pour cela que j'ai indiqué utf-8
dans cette balise.

Il faut aussi que votre fichier soit bien enregistré en

UTF-8. C'est le cas le plus souvent sous Linux par défaut
mais, sous Windows, il faut généralement le dire au
logiciel.

(2) La balise <html>

C'est la balise principale du code. Elle englobe tout le

contenu de votre page. Comme vous pouvez le voir, la
balise fermante </html> se trouve tout à la fin du code !

(3) La balise <head> : métadonnées, liens vers les

feuilles de style, etc.
L'en-tête <head> : cette section donne quelques
informations générales sur la page comme son titre,
l'encodage (pour la gestion des caractères spéciaux),
etc. Cette section est généralement assez courte. Les
informations que contient l'en-tête ne sont pas affichées
sur la page, ce sont simplement des informations
générales à destination de l'ordinateur. Elles sont
cependant très importantes !

(4) La balise <title> : titre de la page

C'est le titre de votre page, probablement l'élément le

plus important ! Toute page doit avoir un titre qui
décrit ce qu'elle contient. Il est conseillé de garder le
titre assez court (moins de 100 caractères en général).
Le titre ne s'affiche pas dans votre page mais en haut de
celle-ci (souvent dans l'onglet du navigateur).

(5) La balise <body> : contenu visible de la page

Le corps <body> : c'est là que se trouve la partie

principale de la page. Tout ce que nous écrirons ici sera
affiché à l'écran. C'est à l'intérieur du corps que nous
écrirons la majeure partie de notre code. Pour le moment,
le corps est vide (nous y reviendrons plus loin).
Intéressons-nous cependant aux deux balises contenues
dans l'en-tête…

15
(6) Les balises sémantiques : <header>, <nav>, <main>,
<article>, <section>, <footer>, etc.

Nous approchons de plus en plus du but. Si nos pages web

ne ressemblent pas encore tout à fait aux sites web que
nous connaissons, c'est qu'il nous manque les
connaissances nécessaires pour faire la mise en page.

En général, une page web est constituée d'un en-tête

(tout en haut), de menus de navigation (en haut ou sur
les côtés), de différentes sections au centre… et d'un
pied de page (tout en bas).

Dans ce point, nous allons nous intéresser aux nouvelles

balises HTML dédiées à la structuration du site. Ces
balises ont été introduites par HTML5 (elles n'existaient
pas avant) et vont nous permettre de dire : « Ceci est
mon en-tête », « Ceci est mon menu de navigation », etc.

Pour le moment, nous n'allons pas encore faire de mise en

page. Nous allons en fait préparer notre document HTML
pour pouvoir découvrir la mise en page dans les prochains
chapitres.

4.3. : Les balises structurantes de HTML5

Je vais vous présenter ici les nouvelles balises

introduites par HTML5 pour structurer nos pages. Vous
allez voir, cela ne va pas beaucoup changer l'apparence
de notre site pour le moment, mais il sera bien construit
et prêt à être mis en forme ensuite !

(1) <header> : l'en-tête

La plupart des sites web possèdent en général un en-tête,

appelé header en anglais. On y trouve le plus souvent un
logo, une bannière, le slogan de votre site… Vous devrez
placer ces informations à l'intérieur de la balise
<header> :

Code : HTML
<header>

16
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>

(2) <footer> : le pied de page

À l'inverse de l'en-tête, le pied de page se trouve en

général tout en bas du document. On y trouve des
informations comme des liens de contact, le nom de
l'auteur, les mentions légales, etc.

Code : HTML
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

(3) <nav> : principaux liens de navigation

La balise <nav> doit regrouper tous les principaux liens

de navigation du site. Vous y placerez par exemple le
menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à
puces à l'intérieur de la balise <nav> :

Code : HTML
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Forum</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
(4) <section> : une section de page.

La balise <section> sert à regrouper des contenus en

fonction de leur thématique. Elle englobe généralement
une portion du contenu au centre de la page.

Code : HTML
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>

(5) <aside> : informations complémentaires

17
La balise <aside> est conçue pour contenir des
informations complémentaires au document que l'on
visualise. Ces informations sont généralement placées sur
le côté (bien que ce ne soit pas une obligation).

Code : HTML
<aside>
<!-- Placez ici des informations complémentaires -->
</aside>

(6) <article> : un article indépendant

La balise <article> sert à englober une portion

généralement autonome de la page. C'est une partie de la
page qui pourrait ainsi être reprise sur un autre site.
C'est le cas par exemple des actualités (articles de
journaux ou de blogs).

Code : HTML
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>

Résumé

Ouf, cela fait beaucoup de nouvelles balises à retenir.

Heureusement, je vous ai fait un petit schéma (figure
suivante) pour vous aider à retenir leur rôle !

18
19
CHAPITRE 5 : Les balises de texte

5.1. : Les titres <h1> à <h6>

Lorsque le contenu de votre page va s'étoffer avec de

nombreux paragraphes, il va devenir difficile pour vos
visiteurs de se repérer. C'est là que les titres
deviennent utiles.

En HTML, on est verni, on a le droit d'utiliser six

niveaux de titres différents. Je veux dire par là qu'on
peut dire « Ceci est un titre très important », « Ceci
est un titre un peu moins important », « Ceci est un
titre encore moins important », etc. On a donc six
balises de titres différentes :

- <h1> </h1> : signifie « titre très important ». En

général, on s'en sert pour afficher le titre de la
page au début de celle-ci.
- <h2> </h2> : signifie « titre important ».
- <h3> </h3> : pareil, c'est un titre un peu moins
important (on peut dire un « sous-titre » si vous
voulez).
- <h4> </h4> : titre encore moins important.
- <h5> </h5> : titre pas important.
- <h6> </h6> : titre vraiment, mais alors là vraiment
pas important du tout.

5.2. : Les paragraphes <p>

La plupart du temps, lorsqu'on écrit du texte dans une

page web, on le fait à l'intérieur de paragraphes. Le
langage HTML propose justement la balise <p> pour
délimiter les paragraphes.

Code : HTML
<p>Bonjour et bienvenue sur mon site !</p>
<p> signifie « Début du paragraphe » ;
</p> signifie « Fin du paragraphe ».

Mais ne nous arrêtons pas en si bon chemin. Nous allons

voir maintenant quelque chose d'un peu particulier en
HTML : le saut de ligne. Cela paraît simple et pourtant,
cela ne fonctionne pas vraiment comme dans un traitement
de texte habituel…

20
5.3. : Les styles de texte : <strong>, <em>, <u>, <s>,
etc.
Au sein de vos paragraphes, certains mots sont parfois
plus importants que d'autres et vous aimeriez les faire
ressortir. HTML vous propose différents moyens de mettre
en valeur le texte de votre page.
Mettre un peu en valeur

Pour mettre un peu en valeur votre texte, vous devez

utiliser la balise <em> </em>.
Son utilisation est très simple : encadrez les mots à
mettre en valeur avec ces balises et c'est bon !

Mettre bien en valeur

Pour mettre un texte bien en valeur, on utilise la balise

<strong> qui signifie « fort », ou « important » si vous
préférez. Elle s'utilise exactement de la même manière
que <em>.

Marquer le texte

La balise <mark> permet de faire ressortir visuellement

une portion de texte. L'extrait n'est pas forcément
considéré comme important mais on veut qu'il se distingue
bien du reste du texte. Cela peut être utile pour faire
ressortir un texte pertinent après une recherche sur
votre site par exemple.

5.4. : Les citations <blockquote> et <q>

Il existe plusieurs éléments HTML pour structurer la

sémantique de citations dans un document web :

 blockquote - depuis HTML 3.2

 cite - depuis HTML 3.2
 q - depuis HTML 4

Chacun possède bien entendu un rôle différent et parfois

des attributs spécifiques.

(1) Cite.

Débutons par l'élément cite qui va contenir le titre

d'une œuvre à laquelle une citation est faite. Il peut
d'ailleurs être utilisé à l'intérieur d'un

21
élément blockquote (ci-après) pour donner une référence à
la source de la citation sous la forme du nom de l'œuvre
d'où elle provient.

Les œuvres possibles sont nombreuses, il peut s'agir d'un

livre, un film, une œuvre d'art (peinture, sculpture,
opéra, pièce de théâtre, poème, exposition...), un jeu,
une chanson, un autre site web, le titre d'un
article/blog, etc.

<cite>Le Rouge et le Noir</cite> - Stendhal

<cite>La Bohème</cite> - Giacomo Puccini

<cite>Papillon de lumière</cite> - Cindy Sander

<cite>Zelda Tears of the Kingdom</cite>

(2) blockquote

L'élément blockquote (littéralement traduisible par "bloc

de citation") structure une section de contenu qui est
citée d'un autre document ou d'une autre source. Son
contenu est souvent affiché avec des marges plus larges
pour le différencier du contenu environnant. C'est
d'ailleurs un élément de type bloc, qui occupe toute la
largeur par défaut et provoque des retours à la ligne
dans le flux naturel du document. On peut également -
mais ce n'est pas obligatoire - utiliser des
paragraphes <p> dans le bloc.

<blockquote>

<p>Mais qu'est-ce que je vais devenir ? Je suis

ministre, je ne sais rien faire !</p>

</blockquote>

L'élément blockquote peut posséder un attribut cite (à ne

pas confondre avec l'élément du même nom) comprenant une
URL vers la source originale de la citation.
<blockquote
cite="[Link]
rs">

22
 <p>Mais qu'est-ce que je vais devenir ? Je suis
ministre, je ne sais rien faire !</p>

</blockquote>

CHAPITRE 6 : Les listes

Les listes nous permettent souvent de mieux structurer

notre texte et d'ordonner nos informations. Nous allons
découvrir ici deux types de listes : les listes non
ordonnées ou listes à puces; les listes ordonnées ou
listes numérotées ou encore énumérations.

6.1. : Les listes non-ordonnées <ul> et les éléments

<li>

C'est un système qui nous permet de créer une liste

d'éléments sans notion d'ordre (il n'y a pas de « premier
» ni de « dernier »). Créer une liste non ordonnée est
très simple. Il suffit d'utiliser la balise <ul> que l'on
referme un peu plus loin avec </ul>.
Commencez donc à taper ceci : <ul></ul>

Et maintenant, voilà ce qu'on va faire : on va écrire

chacun des éléments de la liste entre deux balises
<li></li>. Chacune de ces balises doit se trouver entre
<ul> et </ul>. Vous allez comprendre de suite avec cet
exemple :

Code : HTML
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ul>
6.2. : Les listes ordonnées <ol> et les éléments <li>

Une liste ordonnée fonctionne de la même façon, seule une

balise change : il faut remplacer <ul></ul> par

23
<ol></ol>. À l'intérieur de la liste, on ne change rien :
on utilise toujours des balises <li></li> pour délimiter
les éléments.

6.3. : Les définitions <dl>, les termes <dt> et les

définitions <dd>
<dl> : l'élément de liste de descriptions

L'élément HTML <dl> représente une liste de descriptions

sous la forme d'une liste de paires associant des termes
(fournis par des éléments <dt>) et leurs descriptions ou
définitions (fournies par des éléments <dd>). On
utilisera par exemple cet élément pour implémenter un
glossaire.

Exemple
<p>Cryptids of Cornwall:</p>

<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>

<dt>Morgawr</dt>
<dd>A sea serpent.</dd>

<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>

24
CHAPITRE 7 : Les liens hypertextes.

7.1. : Les balises <a> et les attributs href, target,

etc.

Au point précédent, vous avez appris à créer une page

HTML toute simple. D'accord, elle n'était pas franchement
magnifique, mais c'était une vraie page HTML quand même.
Comme vous le savez, un site web est composé de plusieurs
pages. Comment faire pour aller d'une page vers une autre
? À l'aide de liens pardi ! Dans ce point, nous allons
justement apprendre à créer des liens entre nos pages.

Je suppose que chacun d'entre vous sait ce qu'est un lien

: il s'agit d'un texte sur lequel on peut cliquer pour se
rendre sur une autre page. On peut faire un lien d'une
page [Link] vers une page [Link], mais on peut aussi
faire un lien vers un autre site (par exemple,
[Link] Dans les deux cas, nous allons
voir que le fonctionnement est le même.

7.2. : Les liens internes et externes

(1) Lien Interne.

Nous venons d'apprendre à créer des liens vers des sites

existants. Mais je suis sûr que vous aimeriez faire des
liens entre les différentes pages de votre site, non ?

25
En effet, pour le moment, vous êtes en train de créer
votre site sur votre ordinateur. Vous êtes le seul à
pouvoir le voir et il n'a pas encore « d'adresse web »
qui commence en http:// comme la plupart des sites.
Heureusement, cela ne va pas nous empêcher de travailler.

Deux pages situées dans un même dossier

Pour commencer, nous allons créer deux fichiers

correspondant à deux pages HTML différentes. Comme je
suis très inspiré, je vous propose de les appeler
[Link] et [Link]. Nous aurons donc ces deux
fichiers sur notre disque dans le même dossier.

Comment faire un lien de la page 1 vers la page 2, sans

avoir d'adresse en http:// ? En fait, c'est facile : si
les deux fichiers sont situés dans le même dossier, il
suffit d'écrire comme cible du lien le nom du fichier
vers lequel on veut amener. Par exemple : <a
href="[Link]">. On dit que c'est un lien relatif .

Résumé en images

Les liens relatifs ne sont pas bien compliqués à utiliser

une fois qu'on a compris le principe. Il suffit de
regarder dans quel « niveau de dossier » se trouve votre
fichier cible pour savoir comment écrire votre lien. La
figure suivante fait la synthèse des différents liens
relatifs possibles.

26
(2) Lien Externe

Il est facile de reconnaître les liens sur une page : ils

sont écrits d'une façon différente (par défaut, en bleu
et soulignés) et un curseur en forme de main apparaît
lorsqu'on pointe dessus.

Pour faire un lien, la balise que nous allons utiliser

est très simple à retenir : <a>. Il faut cependant lui
ajouter un attribut, href, pour indiquer vers quelle page
le lien doit conduire. Par exemple, le code ci-dessous
est un lien qui amène vers le Site facebook, situé à
l'adresse [Link] :
<a href="[Link]

7.3. : Les ancres <a> et les liens de messagerie <a>

(1) Introduction aux ancres (signets)

Les ancres permettent de créer des liens pointant vers un

endroit spécifique dans une page web, cet endroit peut
être matérialisé par n'importe quel élément : une balise

27
de type bloc (block), une balise de type en-ligne
remplacé ou non remplacé. Dans les exemples précédents on
a ouvert seulement une nouvelle page mais comment faire
pour se rendre à tel ou tel paragraphe ou bien à tel ou
tel titre c'est ce que permettent les ancres.
On peut par exemple créer un sommaire sous forme
de liens et lorsqu'on clique sur l'un de ces liens on se
rend à la partie correspondante (le sommaire qui se
trouve tout en haut de la page est une bonne illustration
du travail des ancres).

Exemple d'un lien pointant vers une ancre (signet)

Si on veut se rendre à un élément bien déterminé (un

titre, un paragraphe, une image etc.) on doit lui ajouter
l'attribut "id", et dans l'URL du lien vous devez mettre
en premier lieu le chemin d'accès à la page contenant
l'ancre (l'élément qui a reçu l'attribut id) puis mettez
le signe dièse "#" enfin la valeur de l'id :
href="adresse-page#valeur-id".
Maintenant on va se livrer à un exemple plus concret.
Supposons qu'on a les deux pages "[Link]" et
"[Link]" dans le même dossier et au même niveau
:

Notre objectif consiste à faire un lien depuis la page

"[Link]" vers une ancre bien déterminée dans la
page "[Link]" par exemple le troisième en-tête
de premier niveau qui a reçu l'identifiant "titre3" (la
3ème balise <h1> à qui on a attribué l'id "titre3").

On va mettre dans un endroit du code xhtml de la page

[Link], l'en-tête suivant :

28
 <h1 id="titre3">La troisième astuce pour améliorer le
référencement</h1>

Pour créer un lien pointant directement vers l'en-tête

"titre3" on doit taper le code suivant :
<h1 id="[Link]#titre3" >La troisième astuce
pour améliorer le référencement</h1>

Génial cette fois-ci le lecteur sera transporté tout

droit vers l'en-tête "titre3", le visiteur n'aura pas à
fouiller dans la page "destination" pour trouver le titre
"La troisième astuce pour améliorer le référencement".

(2) Lien vers une ancre dans la même page

On peut aussi créer un lien pointant vers un endroit bien

précis dans la même page (l'ancre et le lien se trouvent
dans la même page). Cette fois-ci vous pouvez omettre
l'adresse de la page (mais rien ne vous interdit à la
mettre) et vous contentez uniquement de la notation
"#valeur-id". On va créer une ancre vide (une balise
vide) tout en haut de la page par exemple :
<p id="top"></p> ou bien <span id="top"></span> (ce que
vous voulez)

Et tout en bas de la page mettre un lien qui permet au

lecteur de se rendre en haut (top) par exemple lorsqu'il
a fini la lecture de la page :
<a href="#top">Remonter en haut de la page</a>

Vous pouvez faire le raisonnement inverse (un lien en

haut de la page qui permet de se rendre en pied de page)
ou créer un petit sommaire de la page, il y a beaucoup
d'idées, il faut juste employer un petit peu la matière
grise Notez bien qu'une ancre peut être vide comme
c'est le cas dans cet exemple ou contient des données
comme c'est le cas dans le premier exemple.
(3) Remarques à propos des ancres (signets)

 Le nom de l'attribut "id" ne doit contenir que des

chiffres et des lettres non accentuées et ne doit pas
commencer par un chiffre ni se répéter dans deux ou
plusieurs balises sinon il ne va pas servir
d'identifiant. Les caractères suivants sont autorisés :
le tiret de soulignement "_", Le trait d'union "-", les
deux points ":" et le point ".".

29
 Soyez sûr que ce n'est pas la dernière fois que vous
allez entendre parler de l'attribut "id", il vous sera
fort utile dans les CSS, le JavaScript, le DHTML, et j'en
passe.
 Auparavant pour créer une ancre on se servait de la
syntaxe :
<a name="nom-ancre">le texte de l'ancre</a> ou bien
<a name="nom-ancre">le texte de l'ancre</a> (ancre vide)

Mais l'attribut name n'est plus permis dans la

syntaxe xhtml, c'est pour cela qu'il a été substitué par
l'attribut "id" qui marche avec toutes les balises qui se
placent dans le corps (body). Pour créer une ancre avec
l'attribut name, seule la balise <a> qui pourra être
employée.

 Rien ne vous empêche de passer une URL complète pour les

deux exemples qu'on vient de voir :
<a href="[Link]
>La troisième astuce pour améliorer le référencement</a>
L'utilisation des URL relatives est plus intéressant, si
vous avez votre site en local ou si vous avez aspiré un
site, les liens vont fonctionner en local, mais s'ils
sont référencés en absolu, cela va nécessiter un serveur
(liens relatifs et absolus).
 Par défaut chaque page contient une ancre qui se situe
tout en haut. C'est pourquoi si vous ne spécifiez aucune
autre ancre le lien va pointer sur la partie supérieure
de la page.
(4) Un lien vers une messagerie (mailto)

On peut créer un lien vers une messagerie en procédant

ainsi :
<a href="[Link] du lien</a>
<a href="[Link] vos
remarques, suggestions et critiques seront les
bienvenues</a>

Notez qu'au lieu de l'URL d'une page on insère une

adresse email précédée par la notation : "[Link]
Lorsqu'on clique sur le lien le navigateur va ouvrir
Outlook express ou tout autre logiciel de messagerie
contenant par défaut le nom de l'adresse email spécifiée
dans l'attribut "href".
(5) Les liens de téléchargement

30
 Lorsque le lien pointe vers une ressource autre qu'une
page xhtml (*.html), le navigateur va ouvrir une fenêtre
et vous demandez d'entreprendre l'une des trois actions
suivantes :

 annuler (cancel) : fermer la fenêtre ;

 enregistrer (save) : sauvegarder la ressource dans son
disque dur local (ou tout autre périphérique de stockage
amovible) ;
 ouvrir (open) : Windows va exécuter le logiciel utilisé
par défaut pour la lecture de la ressource en question.
Par exemple :
Un fichier mp3 va être lu par "real Player" ou "Lecteur
Windows Media" selon vos préférences, pour configurer les
programmes par défaut, rendez-vous dans le menu démarrer
puis Panneau de configuration ensuite Ajout/suppression
de programmes et enfin configurer les programmes par
défaut (à gauche de la fenêtre "Ajout/suppression de
programmes").

Parmi ces ressources on peut citer : pdf, doc (word

2003), docx (word 2007), ppt (PowerPoint 2003), ptx
(PowerPoint 2007), xls (Excel 2003), xlsx (Excel 2007),
zip ou rar (fichiers compressés), mp3, flv, txt (fichier
ASCII), fichier BitTorrent, chm (fichier d'aide), mdb
(access 2003), accdb (Access 2007), mpeg, etc.

Pour chacune de ces ressources le navigateur fera appel

au logiciel adéquat pour sa lecture, car le navigateur ne
peut lire que les fichiers xhtml donc la ressource sera
lue à l'extérieur du navigateur.

Mais parfois le browser lit d'autres formats (sans passer

à un logiciel) comme "FLV" et les vidéos "Flash" grâce à
un plug-in téléchargeable dans la toile, c'est-à-dire un
module complémentaire qui permet d'étendre les capacités
du navigateur. En "YouTube" par exemple le navigateur
charge une vidéo FLV dans le plug-in sans changer de
page. Si vous n'avez pas ce plug-in, le navigateur vous
propose automatiquement de le télécharger.

31
CHAPITRE 8 : Les images

Insérer une image dans une page web ? Vous allez voir,
c'est d'une facilité déconcertante… Enfin presque. Il
existe différents formats d'image que l'on peut utiliser
sur des sites web, et on ne doit pas les choisir au
hasard. En effet, les images sont parfois volumineuses à
télécharger, ce qui ralentit le temps de chargement de la
page (beaucoup plus que le texte !).

Pour faire en sorte que vos pages restent lisibles et

rapides à télécharger, suivez donc activement mes
conseils !

8.1. : Les différents formats d'images.

Savez-vous ce qu'est un format d'image ?

Quand vous avez une image « entre les mains », vous avez
la possibilité de l'enregistrer dans plusieurs « formats
» différents. Le poids (en Ko, voire en Mo) de l'image
sera plus ou moins élevé selon le format choisi et la
qualité de l'image va changer. Par exemple, le logiciel
de dessin Paint (même si c'est loin d'être le meilleur)
vous propose de choisir entre plusieurs formats lorsque
vous enregistrez une image.

8.2. : La balise <img> et ses attributs src, alt.

La balise image <img /> ! C'est une balise de type

orpheline (comme <br />). Cela veut dire qu'on n'a pas
besoin de l'écrire en deux exemplaires comme la plupart
des autres balises que nous avons vues jusqu'ici. En
effet, nous n'avons pas besoin de délimiter une portion
de texte, nous voulons juste insérer une image à un
endroit précis.
La balise doit être accompagnée de deux attributs
obligatoires :

32
 - src : il permet d'indiquer où se trouve l'image que
l'on veut insérer. Vous pouvez soit mettre un chemin
absolu (ex. : [Link] soit
mettre le chemin en relatif (ce qu'on fait le plus
souvent). Ainsi, si votre image est dans un sous-
dossier images, vous devrez taper :
src="images/[Link]"
- alt : cela signifie « texte alternatif ». On doit
toujours indiquer un texte alternatif à l'image,
c'est-à-dire un court texte qui décrit ce que
contient l'image. Ce texte sera affiché à la place de
l'image si celle-ci ne peut pas être téléchargée
(cela arrive), ou dans les navigateurs de personnes
handicapées (non-voyants) qui ne peuvent
malheureusement pas « voir » l'image. Cela aide aussi
les robots des moteurs de recherche pour les
recherches d'images. Pour la fleur, on mettrait par
exemple : alt="Une fleur".

Les images doivent se trouver obligatoirement à

l'intérieur d'un paragraphe (<p></p>). Voici un exemple
d'insertion d'image :

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

Bref, l'insertion d'image est quelque chose de très

facile pour peu qu'on sache indiquer où se trouve
l'image, comme on avait appris à le faire avec les liens.
La plus grosse « difficulté » (si on peut appeler cela
une difficulté) consiste à choisir le bon format d'image.
Ici, c'est une photo donc c'est évidemment le format JPEG
qu'on utilise.

8.3. : L'optimisation des images pour le web.

Imaginez qu'un visiteur de votre site Web découvre votre

dernière promotion. Il est tellement séduit qu'il décide
de découvrir l'offre que vous proposez. Il ne peut

33
malheureusement pas charger la page du panier d'achats et
finaliser son achat. Que vient-il de se passer ?

De nombreux problèmes peuvent empêcher le chargement

d'une page. Par exemple, il se peut que vous n'ayez pas
assez d'espace de stockage en ligne pour que votre site
s'affiche. Il peut également ne pas y avoir suffisamment
de cache mémoire.
Mais, parmi toutes les erreurs que vous pouvez commettre
lors de la création d'un site Web, ne pas optimiser les
images pour les pages Web peut être l'une des plus
problématiques. Ne pas optimiser correctement les images
pour le Web peut ralentir votre site Web et, à son tour,
entraîner une réduction du trafic et des pertes
d'opportunités de vente. Nous expliquons ci-dessous
comment optimiser les images pour le Web afin que vous
puissiez créer un site Web qui obtient des résultats.

(1) Qu'est-ce que l'optimisation d'images ?

L'optimisation des images consiste à réduire la taille de

vos fichiers d'image. Cependant, cela implique également
de ne pas diminuer la qualité de votre image et de vos
graphiques pendant le processus de "réduction"
(compression).

Les images qui ne sont pas correctement optimisées sont

l'une des raisons de la lenteur de chargement des sites
Web. Cela signifie que les fichiers sont si volumineux
qu'ils pèsent sur le fonctionnement de votre site et
consomment trop d'espace de stockage sur votre site Web.

L'optimisation des images, quant à elle, redimensionne la

résolution de vos images sur la page. L'optimisation des
images réduit également la taille des fichiers
correspondants, de sorte que le serveur de votre site Web
dispose de plus d'espace. En libérant de l'espace de
stockage sur votre serveur, vous pouvez réduire les temps
de chargement des pages sur votre site Web, rendant ainsi
votre site plus facile et plus agréable à naviguer.

34
(2) Pourquoi est-il important d'optimiser les images pour
le Web ?

L'optimisation des images pour les pages Web rend vos

utilisateurs heureux. Cela permet également à vos
serveurs de domaine de fonctionner correctement. Gardez à
l'esprit qu'environ la moitié de vos lecteurs utilisent
des téléphones portables pour rechercher des informations
en ligne et consulter des sites Web ;

Par conséquent, l'optimisation des images peut

grandement optimiser la vitesse d'affichage de votre site
Web sur mobile et son référencement SEO mobile.
L'optimisation des images pour le Web peut aider les
visiteurs à voir votre contenu même avec une connexion
Wi-Fi lente.

(3) Accélérer le chargement des pages

L'une des principales raisons d'optimiser les images est

d'en permettre le chargement plus rapide. Les images qui
ne sont pas optimisées peuvent ralentir votre site Web au
point d'être difficile à naviguer et frustrant à
utiliser.

Indice : L'optimisation des images est liée à la

réduction de leur taille de résolution, afin qu'elles
n'occupent pas trop d'espace de stockage Web en ligne.
Vous pouvez également compresser les images tout en en
conservant la qualité d'origine ou n'utiliser des images
et des graphiques que lorsque cela est nécessaire.

(4) Optimiser la taille du fichier

Il est plus facile d'optimiser la taille d'un fichier

lorsque vous ne l'avez pas encore téléchargé sur le Web.
Dans ce cas, vous pouvez l'enregistrer dans votre
programme d'édition de photos préféré à la taille dont
vous avez besoin. Cette taille est d'environ 1 024 pixels
de large x 786 pixels de haut pour les en-têtes.

Vos images d'arrière-plan devront être d'environ

1 920 x 1 080 pixels. Les images de logo varient de 100 à
400 pixels de large et de 50 à 100 pixels de haut
généralement. Gardez à l'esprit, en particulier pour les

35
images d'arrière-plan, que la taille à utiliser dépend de
celle du fichier image.

(5) Compresser vos images

Les images de votre site Web qui peuvent affecter le plus

vos temps de chargement sont celles de l'en-tête et de
l'arrière-plan de la page. Pour les images d'en-tête et
d'arrière-plan, il faut généralement utiliser la
compression GIF ou JPEG. Optez pour la plus petite taille
possible afin de donner à votre site Web l'aspect
professionnel dont vous avez besoin.

(6) Utiliser des outils et plug-ins d'optimisation

d'image

Une façon d'éviter de passer d'innombrables heures à

optimiser manuellement des images pour le Web est
d'utiliser des outils d'optimisation. Ces plug-ins,
généralement fournis avec la plupart des principales
plateformes de blog, redimensionnent automatiquement vos
images. Les plug-ins et outils d'optimisation d'image
offrent également un moyen rapide d'ajouter les balises
de remplacement. Il suffit généralement de sélectionner
dans la bibliothèque multimédia les images que vous
souhaitez compresser. Quelques clics et leur taille est
réduite tout en en conservant la qualité.

CHAPITRE 9 : Les tableaux.

Indispensables pour organiser les informations, les

tableaux sont un petit peu délicat à construire en HTML :
cela explique que je vous les présente seulement
maintenant. Il va en effet falloir imbriquer de nouvelles
balises HTML dans un ordre précis.

Nous allons commencer par construire des tableaux

basiques, puis nous les complexifierons au fur et à
mesure : fusion de cellules, division en multiples
sections… Nous découvrirons aussi les propriétés CSS
liées aux tableaux, qui nous permettront de personnaliser
leur apparence

36
9.1. : La structure d'un tableau avec les balises
<table>, <tr>, <td>, <th>.

a) Un tableau simple

La première balise à connaître est <table> </table>.

C'est cette balise qui permet d'indiquer le début et la
fin d'un tableau.

Cette balise est de type bloc, il faut donc la placer en

dehors d'un paragraphe. Exemple :

Code : HTML
<p>Ceci est un paragraphe avant le tableau.</p>
<table>
<!-- Ici, on écrira le contenu du tableau -->
</table>
<p>Ceci est un paragraphe après le tableau.</p>

Bon, et qu'écrit-on à l'intérieur du tableau ?

Là, préparez-vous à subir une avalanche de nouvelles

balises.
Pour commencer en douceur, voici deux nouvelles balises
très importantes :
 <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.
En HTML, un tableau se construit ligne par ligne. Dans
chaque ligne (<tr>), on indique le contenu des
différentes cellules
(<td>).

Schématiquement, un tableau se construit comme à la

figure suivante.

37
Par exemple, si je veux faire un tableau à deux lignes,
avec trois cellules par ligne (donc trois colonnes), je
devrai taper ceci :

Code : HTML
<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>

Maintenant que l'on a ce qu'on voulait, on va rajouter la

ligne d'en-tête du tableau. Dans l'exemple ci-dessous,
les en-têtes sont « Nom », « Âge » et « Pays ».
La ligne d'en-tête se crée avec un <tr> comme on l'a fait
jusqu'ici, mais les cellules qu'elle contient sont, cette
fois, encadrées, par des balises <th> et non pas <td> !

Code : HTML
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>

38
 <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).

9.2. : Les attributs de tableau : rowspan, colspan,

etc.
Fusion.

Dans certains tableaux complexes, vous aurez besoin de «

fusionner » des cellules entre elles. Un exemple de
fusion ? Regardez le tableau à la figure suivante, qui
dresse une liste de films et indique à qui ils
s'adressent.

Pour le dernier film, vous voyez que les cellules ont été
fusionnées : elles ne font plus qu'une. C'est exactement
l'effet qu'on cherche à obtenir.

Pour effectuer une fusion, on rajoute un attribut à la

balise <td>. Il faut savoir qu'il existe deux types de
fusion :

 La fusion de colonnes : c'est ce que je viens de

faire dans cet exemple. La fusion s'effectue
horizontalement. On utilisera l'attribut colspan.

39
  La fusion de lignes : là, deux lignes seront groupées
entre elles. La fusion s'effectuera verticalement. On
utilisera l'attribut rowspan.

Comme vous le savez, vous devez donner une valeur à

l'attribut (que ce soit colspan ou rowspan). Il faut
indiquer le nombre de cellules à fusionner entre elles.
Dans notre exemple, nous avons fusionné deux cellules :
celle de la colonne « Pour enfants ? » et celle de « Pour
adolescents ? ». On devra donc écrire :

Code : HTML
<td colspan="2">

Qui signifie : « Cette cellule est la fusion de deux

cellules ». Il est possible de fusionner plus de cellules
à la fois (trois, quatre, cinq… autant que vous voulez).

Voilà le code HTML qui me permet de réaliser la fusion

correspondant au tableau précédent :

Code : HTML
<table>
<tr>
<th>Titre du film</th>
<th>Pour enfants ?</th>
<th>Pour adolescents ?</th>
</tr>
<tr>
<td>Massacre à la tronçonneuse</td>
<td >Non, trop violent</td>
<td>Oui</td>
</tr>
<tr>
<td>Les bisounours font du ski</td>
<td>Oui, adapté</td>
<td>Pas assez violent...</td>
</tr>
<tr>
<td>Lucky Luke, seul contre tous</td>
<td colspan="2">Pour toute la famille !</td>
</tr>
</table>

Une remarque importante : vous voyez que la ligne 19 ne

contient que deux cellules au lieu de trois (il n'y a que

40
deux balises <td>). C'est tout à fait normal car j'ai
fusionné les deux dernières cellules entre elles. Le <td
colspan="2"> indique que cette cellule prend la place de
deux cellules à la fois.

Et pour la fusion verticale avec rowspan, on fait comment

?

Cela se complique un petit peu. Pour notre exemple, nous

allons « inverser » l'ordre de notre tableau : au lieu de
mettre les titres de films à gauche, on va les placer en
haut. C'est une autre façon de voir le tableau : au lieu
de le construire en hauteur, on peut le construire en
longueur.

Dans ce cas, le colspan n'est plus adapté, c'est un

rowspan qu'il faut utiliser :

Code : HTML
<table>
<tr>
<th>Titre du film</th>
<td>Massacre à la tronçonneuse</td>
<td>Les bisounours font du ski</td>
<td>Lucky Luke, seul contre tous</td>
</tr>
<tr>
<th>Pour enfants ?</th>
<td>Non, trop violent</td>
<td>Oui, adapté</td>
<td rowspan="2">Pour toute la famille !</td>
</tr>
<tr>
<th>Pour adolescents ?</th>
<td>Oui</td>
<td>Pas assez violent...</td>
</tr>
</table>

Résultat : les cellules sont fusionnées verticalement

(figure suivante) !

41
9.3. : Les légendes <caption> et les en-têtes <thead>,
<tbody>, <tfoot>

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> !

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 (figure suivante) :
Code : HTML

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

42
Un tableau structuré
Nous avons appris à construire des petits tableaux
simples. Ces petits tableaux suffisent dans la plupart
des cas, mais il arrivera que vous ayez besoin de
réaliser des tableaux plus… complexes.
Nous allons découvrir deux techniques particulières :
 Pour les gros tableaux, il est possible de les
diviser en trois parties :
 En-tête ;
 Corps du tableau ;
 Pied de tableau.
 Pour certains tableaux, il se peut que vous ayez
besoin de fusionner des cellules entre elles.

Diviser un gros tableau

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 :

 l'en-tête (en haut) : il se définit avec les balises

<thead></thead> ;
 le corps (au centre) : il se définit avec les balises
<tbody></tbody> ;
 le pied du tableau (en bas) : il se définit avec les
balises <tfoot></tfoot>.

Que mettre dans le pied de tableau ? Généralement, si

c'est un long tableau, vous y recopiez les cellules d'en-
tête. Cela permet de voir, même en bas du tableau, à quoi
se rapporte chacune des colonnes. Schématiquement, un
tableau en trois parties se découpe donc comme illustré à
la figure suivante.

43
C'est un peu déroutant mais il est conseillé d'écrire les
balises dans l'ordre suivant :
 <thead>
 <tfoot>
 <tbody>

Dans le code, on renseigne donc d'abord la partie du

haut, ensuite la partie du bas, et enfin la partie
principale (<tbody>). Le navigateur se chargera
d'afficher chaque élément au bon endroit, ne vous
inquiétez pas.

Voici donc le code à écrire pour construire le tableau en

trois parties :

<table>
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</thead>
<tbody> <!-- Corps du tableau -->
<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>
<tr>
<td>François</td>
<td>43 ans</td>
<td>France</td>
</tr>
</tbody>
<tfoot> <!-- Pied de tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>

44
 </tr>
</tfoot>
</table>

N.B : Il n'est pas obligatoire d'utiliser ces trois

balises (<thead>, <tbody>, <tfoot>) dans tous les
tableaux. En fait, vous vous en servirez 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.

CHAPITRE 10 : Les formulaires

Toute page HTML peut être enrichie de formulaires

interactifs, qui invitent vos visiteurs à renseigner des
informations : saisir du texte, sélectionner des options,
valider avec un bouton… tout est possible !

Nous arrivons cependant aux limites du langage HTML car

il faut ensuite pouvoir analyser les informations que le
visiteur a saisies… et cela ne peut pas se faire en
langage HTML. Comme nous allons le voir, le traitement
des résultats doit s'effectuer dans un autre langage, par
exemple le PHP.

En attendant, nous avons un grand nombre de nouvelles

balises HTML à découvrir. Bienvenue dans le monde
merveilleux des formulaires, un monde où les boutons, les
cases à cocher et les listes déroulantes vivent en
harmonie (enfin presque).

10.1. : Les balises <form>, <input>, <textarea>,

<select>, <button>

Lorsqu'il vous prend subitement l'envie d'insérer un

formulaire dans votre page HTML, vous devez pour
commencer écrire une
balise <form> </form>. C'est la balise principale du
formulaire, elle permet d'en indiquer le début et la fin.

Code : HTML
<p>Texte avant le formulaire</p>
<form>
<p>Texte à l'intérieur du formulaire</p>

45
</form>
<p>Texte après le formulaire</p>
Voilà pour la structure de base. Maintenant, soyez
attentifs : ce que j'ai à vous dire n'est pas évident
parce qu'on est à la limite du HTML.

10.2. : Les types d'entrées : texte, email, mot de

passe, case à cocher, boutons radio, etc.

Les zones de saisie basiques

Nous allons passer en revue les différentes balises HTML
permettant de saisir du texte dans un formulaire.

Il faut savoir qu'il y a deux zones de texte

différentes :

 La zone de texte monoligne : comme son nom l'indique,

on ne peut y écrire qu'une seule ligne. Elle sert à
saisir des textes courts, par exemple un pseudo.
 La zone de texte multiligne : cette zone de texte
permet d'écrire une quantité importante de texte sur
plusieurs lignes, par exemple une dissertation sur
l'utilité du HTML dans le développement des pays
d'Asie du Sud-Est (ce n'est qu'une suggestion hein…).

Zone de texte monoligne

La figure suivante montre à quoi ressemble une zone de

texte monoligne.

Pour insérer une zone de texte dans une ligne, on va

utiliser la balise <input />.

Pour créer une zone de texte à une ligne, on doit

écrire :

Code : HTML
<input type="text" />

46
Ce n'est pas encore suffisant : il faut donner un nom à
votre zone de texte. Ce nom n'apparaît pas sur la page
mais il vous sera indispensable par la suite. En effet,
cela vous permettra (en PHP par exemple) de reconnaître
d'où viennent les informations :
vous saurez que tel texte est le pseudo du visiteur, tel
texte est le mot de passe qu'il a choisi, etc.

Pour donner un nom à un élément de formulaire, on utilise

l'attribut name. Ici, on va supposer qu'on demande au
visiteur de rentrer son pseudo :

Code : HTML
<input type="text" name="pseudo" />

Les libellés
Cette zone de texte est bien jolie mais si votre visiteur
tombe dessus, il ne sait pas ce qu'il doit écrire. C'est
justement le rôle de la balise <label> :
Code : HTML
<form method="post" action="[Link]">
<p>
<label>Votre pseudo</label> : <input type="text"
name="pseudo" />
</p>
</form>

Quelques attributs supplémentaires

On peut ajouter un certain nombre d'autres attributs à la

balise <input /> pour personnaliser son fonctionnement :

 On peut agrandir le champ avec size.

 On peut limiter le nombre de caractères que l'on peut
saisir avec maxlength.
 On peut préremplir le champ avec une valeur par
défaut à l'aide de value.
 On peut 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 10 caractères maximum à l'intérieur :

47
Code : HTML
<form method="post" action="[Link]">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo"
placeholder="Ex: Zozor" size="30" maxlength="10" />
</p>
</form>

Zone de mot de passe

Vous pouvez facilement faire en sorte que la zone de

texte se comporte comme une « zone de mot de passe »,
c'est-à-dire une zone où on ne voit pas à l'écran les
caractères saisis. Pour créer ce type de zone de saisie,
utilisez l'attribut type="password".

Code : HTML
<form method="post" action="[Link]">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>

Zone de texte multiligne

Pour créer une zone de texte multiligne, on change de

balise : nous allons utiliser <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.

Code : HTML
<form method="post" action="[Link]">
<p>
<label for="ameliorer">Comment pensez-vous que je
pourrais
améliorer mon site ?</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>

48
</form>

Les zones de saisie enrichies

HTML5 apporte de nombreuses fonctionnalités nouvelles

relatives aux formulaires. De nouveaux types de champs
sont en effet apparus avec cette version. Il suffit de
donner à l'attribut type de la balise <input /> l'une des
nouvelles valeurs disponibles. Faisons un petit tour
d'horizon !

E-mail
Vous pouvez demander à saisir une adresse e-mail :

Code : HTML
<input type="email" />

Numéro de téléphone
Ce champ est dédié à la saisie de numéros de téléphone :
Code : HTML
<input type="tel" />

Nombre
Ce champ permet de saisir un nombre entier :
Code : HTML
<input type="number" />

Recherche
On peut créer un champ de recherche comme ceci :
Code : HTML
<input type="search" />

Les éléments d'options

HTML vous offre une ribambelle d'éléments d'options à

utiliser dans votre formulaire. Ce sont des éléments qui
demandent au visiteur de faire un choix parmi une liste
de possibilités. Nous allons passer en revue :
 les cases à cocher ;
 les zones d'options ;
 les listes déroulantes.

Les cases à cocher

49
Créer une case à cocher ? Rien de plus simple ! Nous
allons réutiliser la balise <input />, en spécifiant
cette fois le type checkbox :

Code : HTML
<input type="checkbox" name="choix" />

Les zones d'options

Les zones d'options vous permettent de faire un choix (et

un seul) parmi une liste de possibilités. Elles
ressemblent un peu aux cases à cocher mais il y a une
petite difficulté supplémentaire : elles doivent être
organisées 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 un <input />, avec

cette fois la valeur radio pour l'attribut type.

Les listes déroulantes

Les listes déroulantes sont un autre moyen élégant de

faire un choix parmi plusieurs possibilités. Le
fonctionnement est un peu différent. On va utiliser la
balise <select> </select> qui indique le début et la fin
de la liste déroulante. On ajoute l'attribut name à la
balise pour donner un nom à la liste.

Puis, à l'intérieur du <select> </select>, nous allons

placer plusieurs balises <option> </option> (une par
choix possible). On ajoute à chacune d'elles un attribut
« value » pour pouvoir identifier ce que le visiteur a
choisi.

Voici un exemple d'utilisation :

Code : HTML
<form method="post" action="[Link]">
<p>
<label for="pays">Dans quel pays habitez-
vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>

50
 <option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="Japon">Japon</option>
</select>
</p>
</form>

Le résultat obtenu est représenté à la figure suivante.

Si vous voulez qu'une option soit sélectionnée par

défaut, utilisez cette fois l'attribut selected :

Code : HTML
<option value="canada" selected>Canada</option>

Vous pouvez aussi grouper vos options avec la balise

<optgroup> </optgroup>. Dans notre exemple, pourquoi ne
pas séparer les pays en fonction de leur continent ?

Code : HTML
<form method="post" action="[Link]">
<p>
<label for="pays">Dans quel pays habitez-
vous ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-
Uni</option>
</optgroup>

51
 <optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-
Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</p>
</form>

Le résultat obtenu est représenté à la figure suivante.

Finaliser et envoyer le formulaire

Nous y sommes presque. Il ne nous reste plus qu'à

agrémenter notre formulaire de quelques dernières
fonctionnalités (comme la validation), puis nous pourrons
ajouter le bouton d'envoi du formulaire.

Regrouper les champs

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 :

Code : HTML
<form method="post" action="[Link]">
<fieldset>
<legend>Vos coordonnées</legend> <!-- Titre du
fieldset -->
<label for="nom">Quel est votre nom ?</label>

52
 <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">Etre riche</label>
<input type="radio" name="souhait"
value="celebre" id="celebre" />
<label for="celebre">Etre célèbre</label>
<input type="radio" name="souhait"
value="intelligent" id="intelligent" />
<label for="intelligent">Etre
<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>

Le résultat obtenu est représenté à la figure suivante.

53
Sélectionner automatiquement un champ

Vous pouvez 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.
Par exemple, pour que le curseur soit par défaut dans le
champ prenom :

Code : HTML
<input type="text" name="prenom" id="prenom" autofocus />

Rendre un champ obligatoire

Vous pouvez faire en sorte qu'un champ soit obligatoire
en lui donnant l'attribut required.

Code : HTML
<input type="text" name="prenom" id="prenom" required />

Le bouton d'envoi
Il ne nous reste plus qu'à créer le bouton d'envoi. Là
encore, la balise <input /> vient à notre secours. Elle
existe en quatre versions :

 type="submit" : le principal bouton d'envoi de

formulaire. C'est celui que vous utiliserez le plus
souvent. Le visiteur sera conduit à la page indiquée
dans l'attribut action du formulaire.

54
  type="reset" : remise à zéro du formulaire.
 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.
 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.
Nous ne l'utiliserons pas ici.

Pour créer un bouton d'envoi on écrira donc par exemple :

Code : HTML
<input type="submit" value="Envoyer" />

10.3. : Les attributs des formulaires : method, action,

required, disabled, etc.

On va prendre un exemple pour que les choses soient

claires. Supposons que votre visiteur vienne de taper un
commentaire dans votre formulaire, par exemple un message
qu'il aimerait publier sur vos forums. Ce message doit
être envoyé pour que vous puissiez le recevoir (logique,
non ?) et l'afficher pour vos autres visiteurs.

Eh bien c'est là le problème, ou plutôt les problèmes,

que l'on va se poser :

 Problème n°1 : comment envoyer le texte saisi par le

visiteur ? Par quel moyen ?
 Problème n°2 : une fois que les données ont été
envoyées, comment les traiter ? Souhaitez-vous
recevoir le message automatiquement par mail ou
préférez-vous qu'un programme se charge de
l'enregistrer quelque part, puis de l'afficher sur
une page visible par tout le monde ?
Pour fournir les réponses à ces deux problèmes, vous
devez ajouter deux attributs à la balise :
 method : cet attribut indique par quel moyen les
données vont être envoyées (réponse au problème n°1).
Il existe deux solutions pour envoyer des données sur
le Web :
- method="get" : c'est une méthode en général
assez peu adaptée car elle est limitée à 255
caractères. La particularité vient du fait que
les informations seront envoyées dans l'adresse
de la page ([Link] mais ce détail ne nous

55
 intéresse pas vraiment pour le moment. La
plupart du temps, je vous recommande d'utiliser
l'autre méthode : post.
- method="post" : c'est la méthode la plus
utilisée pour les formulaires car elle permet
d'envoyer un grand nombre d'informations. Les
données saisies dans le formulaire ne transitent
pas par la barre d'adresse.
 action : c'est l'adresse de la page ou du programme
qui va traiter les informations (réponse au problème
n°2). Cette page se chargera de vous envoyer un e-
mail avec le message si c'est ce que vous voulez, ou
bien d'enregistrer le message avec tous les autres
dans une base de données. Cela ne peut pas se faire
en HTML et CSS, on utilisera en général un autre
langage dont vous avez peut-être entendu parler :
PHP.

On va donc maintenant compléter la balise <form> avec les

deux attributs qu'on vient de voir.
Pour method, vous l'aurez deviné, je vais mettre la
valeur post.
Pour action, je vais taper le nom d'une page fictive en
PHP ([Link]). C'est cette page qui sera appelée
lorsque le visiteur cliquera sur le bouton d'envoi du
formulaire.

Code : HTML
<p>Texte avant le formulaire</p>
<form method="post" action="[Link]">
<p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>
Pour le moment, on ne sait pas ce qu'il se passe à
l'intérieur de la page [Link] : je vous demande
de me faire confiance et d'imaginer que cette page existe
et fonctionne.

Notre priorité, pour le moment, est de découvrir en

HTML/CSS comment faire pour insérer des zones de texte,
des boutons et des cases à cocher dans votre page web.
C'est ce que nous allons voir maintenant.

10.4. : Les champs de saisie avancés : date, heure,

couleur, range, etc.
Date

56
Différents types de champs de sélection de date
existent :

 date : pour la date (05/08/1985 par exemple) ;

 time : pour l'heure (13:37 par exemple) ;
 week : pour la semaine ;
 month : pour le mois ;
 datetime : pour la date et l'heure (avec gestion du
décalage horaire) ;
 datetime-local pour la date et l'heure (sans gestion
du décalage horaire).
Exemple :
Code : HTML
<input type="date" />

10.5. : Les éléments de formulaire personnalisés :

<datalist>, <meter>, <progress>, etc.

<datalist>

datalist est un élément de formulaire permettant de lier

une liste de choix à un élément input de formulaire.
Le champ de formulaire (input) et la liste de suggestions
(datalist + option) sont reliés grâce à la valeur commune
des attributs list rattaché à l'input, et id de la
datalist.

Remarque : Il est possible d'utiliser la même liste de

suggestions pour plusieurs champs de formulaire. Cela

57
 peut être pratique pour les champs dupliqués, il n'y a
ainsi qu'une seule liste à maintenir.
<progress> ...... </progress>

La balise "progress" permet d'afficher l'état

d'avancement d'une tâche ou d'une action à l'aide d'une
barre de progression.
Syntaxe et propriétés spécifiques

<progress (propriété générales) (propriétés

spécifiques)></progress>

Propriétés Commentaires
spécifique
s

max Valeur maximale de la barre de progression

position Pourcentage d'avancement de la barre de

progression (lecture seule)

value Valeur actuelle de la progression

Exemple
<progress max="100" value="40"></progress>
<meter> ...... </meter>

<meter> représente une jauge mesurant une valeur comprise

entre un minimum et un maximum. Les valeurs négatives
peuvent être utilisées, contrairement à <progress>. Son
usage est principalement destiné à indiquer un état,
stable ou évoluant au cours du temps.
Attributs

Attribut Commentaires
s

value valeur à afficher sur l'échelle. Zéro par défaut.

min Borne minimum autorisée. Zéro par défaut. Peut

être négative. Exemple min="3"

max Borne maximum autorisée. 1 par défaut, 50% en

omettant les attributs min et max, la valeur

58
Attribut Commentaires
s

entrée devra être 0.5 (qui se situe entre 0 et 1).

low Si la valeur (value) est inférieure à la valeur de

l'attribut low, la mesure sera considérée comme
faible et le code de couleur de la jauge
s'ajustera en conséquence.

high Si la valeur (value) est inférieure à la valeur de

l'attribut high, et supérieure à la valeur de
l'attribut low, la mesure sera considérée comme
élevée et le code de couleur de la jauge
s'ajustera en conséquence.

optimum Si la valeur (value) est supérieure à la valeur de

l'attribut optimum, la mesure sera considérée
comme optimum et le code de couleur de la jauge
s'ajustera en conséquence.

Personnalisation

 Il n'existe pas de style pour la balise <meter>

 La jauge comporte trois couleurs indicatrices par
défaut
 rouge pour une valeur considérée comme mauvaise
(valeur < low),
 jaune pour une valeur considérée comme moyenne (
low < valeur < high),
 vert pour une valeur considérée comme bonne
(valeur > high),
 C’est à l’utilisateur de spécifier ce qu’il considère
comme une bonne valeur (vert), une mauvaise valeur
(rouge) et une valeur moyenne (jaune).
 Les attributs classiques peuvent être appliqués afin
de personnaliser la jauge et en particulier : width,
height, border, title...
 Les attributs peuvent être pilotés de façon classique
par du javascript.

Exemples

59
 Résultat
Exemples
s
<meter value="39" min="0" max="100" low="50"
high="60" optimum="80">39%</meter>

<meter value="56" min="0" max="100" low="50"

high="60" optimum="80">56%</meter>

<meter value="64" min="0" max="100" low="50"

high="60" optimum="80">64%</meter>

<meter value="86" min="0" max="100" low="50"

high="60" optimum="80">86%</meter>

<meter value="92" min="0" max="100" low="50"

high="60" optimum="80">92%</meter>

10.6. : Les techniques de validation de formulaire en

HTML5

La validation des formulaires a toujours été une affaire

délicate dès les débuts du web. D’abord, il y a eu les
rapports d’erreurs de la validation côté serveur.
Ensuite, on a évolué vers la validation côté client pour
vérifier les résultats en ligne.

Aujourd’hui, nous avons affaire au géant en marche que

représentent les normes HTML5 et CSS3 : le chapitre sur les
formulaires d’HTML5 propose de nouveaux types de saisies et
de nouveaux attributs qui rendent possibles les
contraintes de validation. Le module basique d’interface
utilisateur de CSS3 fournit plusieurs pseudo-classes qui nous
aident à appliquer des styles à ces états de validation
et à modifier l’apparence d’un champ de saisie en
fonction des actions de l’utilisateur.

Plus un utilisateur est guidé en temps réel lorsqu’il

remplit un champ de formulaire, moins il risque de
commettre des erreurs.

De nouveaux types et attributs à notre disposition

60
Les formulaires HTML5 comportent désormais de nouveaux
types d’entrées, tels qu’email, url et number. Par
exemple, email ne déclenche la pseudo-classe valid que
lorsque l’utilisateur saisit une adresse email valide ;
le principe est le même pour number et pour url.

Les contraintes de validation d’une URL varient selon les

navigateurs. Sous Opera, il suffit de saisir « http:// »
pour valider le champ de l’URL. Chrome réclame la saisie
de « [Link] », tandis que Safari n’exige que « http: ».

Il existe aussi quelques attributs qui peuvent faciliter

la
validation,comme placeholder, required, maxlength, patter
n, min, max, et step :

<input id="code_postal" name="code_postal" type="number"

min="1001" max="8000"
maxlength="4" required />

Le champ code_postal exploite le nouveau type number et

certains des nouveaux attributs. En Australie, un code
postal ne peut être composé que de quatre chiffres, donc
j’indique cette limite avec l’attribut maxlength (=
longueur maximale). Comme je veux aussi limiter la plage
des nombres pouvant être saisis, j’utilise les
attributs min et max pour fixer les limites.
L’attribut required (= obligatoire) parle de lui-même.

Il est possible d’utiliser l’attribut step (= un pas)

pour ajouter une contrainte en plus des indications
de min et max. Par défaut, step est fixé à 1, ce qui
permet de valider n’importe quel nombre situé entre les
valeurs min et max, avec une incrémentation d’au moins 1.
En passant step à 100, la validation ne se fera que si
l’utilisateur saisit une valeur avec une incrémentation
de 100. Par exemple, si je fixe à 100 la valeur de
l’attribut step sur mon champ code_postal, 1001 sera une
entrée valide, tout comme 1101, 1201, 1301, etc.

61
CHAPITRE 11 : Les médias
11.1. : Les balises <audio> et <video>

Depuis l'arrivée de YouTube et Dailymotion, il est devenu

courant aujourd'hui de regarder des vidéos sur des sites
web. Il faut dire que l'arrivée du haut débit a aidé à
démocratiser les vidéos sur le Web.
Cependant, aucune balise HTML ne permettait jusqu'ici de
gérer la vidéo. Il fallait à la place utiliser un plugin,
comme Flash.

Encore aujourd'hui, Flash reste de loin le moyen le plus

utilisé pour regarder des vidéos sur Youtube,
Dailymotion, Vimeo et ailleurs. Mais utiliser un plugin a
de nombreux défauts : on dépend de ceux qui gèrent le
plugin (en l'occurrence, l'entreprise Adobe, qui possède
Flash), on ne peut pas toujours contrôler son
fonctionnement, il y a parfois des failles de sécurité…
Finalement, c'est assez lourd.

C'est pour cela que deux nouvelles balises standard ont

été créées en HTML5 : <video> et <audio> !

11.2. : Les attributs et les formats de média

Lorsque je vous ai présenté les images et la balise

<img />, j'ai commencé par un petit tour d'horizon des
différents formats d'images (JPEG, PNG, GIF, etc.). Pour
la vidéo et l'audio, je vais faire pareil… mais c'est
plus compliqué.

En fait, le fonctionnement des vidéos est même tellement

complexe qu'on pourrait faire un cours entier à ce
sujet ! Étant donné qu'on parle ici de HTML, nous
n'allons pas passer toutes nos prochaines nuits à étudier
les subtilités de l'encodage vidéo. Je vais donc
simplifier les choses et vous expliquer juste ce que vous
avez besoin de savoir.

62
(1) Le format audio

Pour diffuser de la musique ou n'importe quel son, il

existe de nombreux formats. La plupart d'entre eux sont
compressés (comme le sont les images JPEG, PNG et GIF) ce
qui permet de réduire leur poids :

 MP3 : vous ne pouvez pas ne pas en avoir entendu

parler ! C'est l'un des plus vieux, mais aussi l'un
des plus compatibles (tous les appareils savent lire
des MP3), ce qui fait qu'il est toujours très utilisé
aujourd'hui.
 AAC : utilisé majoritairement par Apple sur iTunes,
c'est un format de bonne qualité. Les iPod, iPhone et
autres iPads savent les lire sans problème.
 OGG : le format Ogg Vorbis est très répandu dans le
monde du logiciel libre, notamment sous Linux. Ce
format a l'avantage d'être libre, c'est-à-dire qu'il
n'est protégé par aucun brevet.
 WAV (format non compressé) : évitez autant que
possible de l'utiliser car le fichier est très
volumineux avec ce format. C'est un peu l'équivalent
du Bitmap (BMP) pour l'audio.

(2) Les formats vidéo

Le stockage de la vidéo est autrement plus complexe. On a

besoin de trois éléments :

 Un format conteneur : c'est un peu comme une boîte

qui va servir à contenir les deux éléments ci-
dessous. On reconnaît en général le type de conteneur
à l'extension du fichier : AVI, MP4, MKV…
 Un codec audio : c'est le format du son de la vidéo,
généralement compressé. Nous venons de les voir, on
utilise les mêmes : MP3, AAC, OGG…
 Un codec vidéo : c'est le format qui va compresser
les images. C'est là que les choses se corsent, car
ces formats sont complexes et on ne peut pas toujours
les utiliser gratuitement. Les principaux à connaître
pour le Web sont :

- H.264 : l'un des plus puissants et des plus utilisés

aujourd'hui… mais il n'est pas 100% gratuit. En fait,
on peut l'utiliser gratuitement dans certains cas

63
 (comme la diffusion de vidéos sur un site web
personnel), mais il y a un flou juridique qui fait
qu'il est risqué de l'utiliser à tout va.
- Ogg Theora : un codec gratuit et libre de droits,
mais moins puissant que H.264. Il est bien reconnu
sous Linux mais, sous Windows, il faut installer des
programmes pour pouvoir le lire.

WebM : un autre codec gratuit et libre de droits, plus

récent. Proposé par Google, c'est le concurrent le plus
sérieux de H.264 à l'heure actuelle.

11.3. : L'insertion de médias dans une page HTML

(1) Insertion d'un élément audio

En théorie, il suffit d'une simple balise pour jouer un

son sur notre page :
Code : HTML
<audio src="musique.mp3"></audio>

En pratique, c'est un peu plus compliqué que cela.

Si vous testez ce code… vous ne verrez rien ! En effet,
le navigateur va seulement télécharger les informations
générales sur le fichier (on parle de métadonnées) mais
il ne se passera rien de particulier. Vous pouvez
compléter la balise des attributs suivants :

 controls : pour ajouter les boutons « Lecture », «

Pause » et la barre de défilement. Cela peut sembler
indispensable, et vous vous demandez peut-être
pourquoi cela n'y figure pas par défaut, mais
certains sites web préfèrent créer eux-mêmes leurs
propres boutons et commander la lecture avec du
JavaScript.
 width : pour modifier la largeur de l'outil de
lecture audio.
 loop : la musique sera jouée en boucle.
 autoplay : la musique sera jouée dès le chargement de
la page. Évitez d'en abuser, c'est en général
irritant d'arriver sur un site qui joue de la musique
tout seul !

64
  preload : indique si la musique peut être préchargée
dès le chargement de la page ou non. Cet attribut
peut prendre les valeurs :

- auto (par défaut) : le navigateur décide s'il

doit précharger toute la musique, uniquement les
métadonnées ou rien du tout.
- metadata : charge uniquement les métadonnées
(durée, etc.).
- none : pas de préchargement. Utile si vous ne
voulez pas gaspiller de bande passante sur votre
site.

Ajoutons les contrôles et ce sera déjà mieux !

Code : HTML
<audio src="hype_home.mp3" controls></audio>

(2) Insertion d'une vidéo

Il suffit d'une simple balise <video> pour insérer une
vidéo dans la page :
Code : HTML
<video src="[Link]"></video>

Mais, là encore, vous risquez d'être déçus si vous

utilisez seulement ce code. Aucun contrôle ne permet de
lancer la vidéo !
Rajoutons quelques attributs (la plupart sont les mêmes
que pour la balise <audio>) :

 poster : image à afficher à la place de la vidéo tant

que celle-ci n'est pas lancée. Par défaut, le
navigateur prend la première image de la vidéo mais,
comme il s'agit souvent d'une image noire ou d'une
image peu représentative de la vidéo, je vous
conseille d'en créer une ! Vous pouvez tout
simplement faire une capture d'écran d'un moment de
la vidéo.
 controls : pour ajouter les boutons « Lecture », «
Pause » et la barre de défilement. Cela peut sembler
indispensable, mais certains sites web préfèrent
créer eux-mêmes leurs propres boutons et commander la
lecture avec du JavaScript. En ce qui nous concerne,
ce sera largement suffisant !
 width : pour modifier la largeur de la vidéo.
 height : pour modifier la hauteur de la vidéo.
 loop : la vidéo sera jouée en boucle.

65
  autoplay : la vidéo sera jouée dès le chargement de
la page. Là encore, évitez d'en abuser, c'est en
général irritant d'arriver sur un site qui lance
quelque chose tout seul !
 preload : indique si la vidéo peut être préchargée
dès le chargement de la page ou non. Cet attribut
peut prendre les valeurs :

- auto (par défaut) : le navigateur décide s'il

doit précharger toute la vidéo, uniquement les
métadonnées ou rien du tout.
- metadata : charge uniquement les métadonnées
(durée, dimensions, etc.).
- none : pas de préchargement. Utile si vous
souhaitez éviter le gaspillage de bande passante
sur votre site.

Voici un code un peu plus complet :

Code : HTML

<video src="[Link]" controls poster="[Link]"

width="600"></video>

CHAPITRE 12 : Les cadres.

12.1. : La balise <iframe> et son utilisation pour

intégrer du contenu externe.

Iframe, pour « inlineframe », est un élément HTML qui

permet au développeur d'intégrer sur son site web des
contenus en provenance d'autres sites web. Les Iframes
servent par exemple à insérer une vidéo YouTube :
l'utilisateur du site web n'a pas besoin d'ouvrir YouTube
dans un nouvel onglet, la vidéo s'affiche directement sur
la page qu'il est en train de consulter. Pour le
développeur, c'est une manière d'importer un contenu
intéressant, à condition bien sûr d'y être autorisé.
L'Iframe simplifie en outre le travail du développeur.
Intégrer une carte Google Maps avec Iframe, par exemple,
lui évite d'avoir à coder lui-même une carte interactive
pour son site.

L'élément Iframe sert à afficher un contenu tiers sur une

page web. Le code HTML de l'Iframe fonctionne ainsi :

66
1. Le développeur écrit l'élément Iframe à l'endroit de la
page où afficher le contenu.
2. La balise d'Iframe indique à minima l'URL source du
contenu à afficher : le navigateur s'y réfère pour aller
récupérer le contenu.

3. Des attributs d'Iframe permettent de personnaliser le

cadre dans lequel s'insère le contenu. Le développeur
définit par exemple la hauteur et la largeur du cadre.

4. Si le contenu est interactif, le développeur peut en

gérer le comportement. Il indique par exemple que la
lecture d'une vidéo sur la page doit démarrer à partir
d'un moment précis.

L'Iframe est utile au développeur à deux égards :

 Le développeur veut afficher une ressource intéressante

trouvée sur le web. Il peut s'agir d'intégrer une image,
une vidéo, une publication sur un réseau social ou une
page entière d'un site tiers, par exemple.

 Le développeur doit insérer un contenu complexe à coder :

des boutons de réseaux sociaux, une carte ou un
formulaire interactif, par exemple. Pour gagner du temps,
il intègre directement le contenu, fonctionnel et clé en
main, depuis un site externe.

Les Iframes servent en outre des enjeux d'expérience

utilisateur : insérer le contenu dans la page web évite à
l'utilisateur d'ouvrir un nouvel onglet ou une nouvelle
fenêtre de navigation. Le parcours utilisateur, ainsi,
est plus fluide. D'autant plus que le contenu intégré se
comporte de manière individualisée : l'utilisateur peut
le faire défiler indépendamment de la page web.

Quelle est la différence entre Iframe et embed ?

Iframe et embed sont deux éléments HTML qui permettent de

faire des choses similaires. Comme Iframe, en effet,
embed intègre du contenu externe à une page web.
D'ailleurs, remplacer la balise Iframe par la balise
embed dans un éditeur de code produit le même résultat.

67
L'élément embed, toutefois, a posé des difficultés en
matière de sécurité et d'accessibilité. C'est pourquoi
actuellement, Iframe est privilégié à embed. Utiliser
Iframe limite le risque de dysfonctionnements et
d'erreurs à l'affichage de la page web.

Comment intégrer un Iframe sur une page ?

1 - Écrire le code HTML

Pour intégrer un Iframe sur une page, il faut écrire le

code HTML de l'Iframe à l'endroit où le contenu tiers
doit s'afficher. Le code HTML utilise la syntaxe
suivante : <iframe src="adresse URL source"></iframe>.

 L'élément Iframe a une balise d'ouverture et une

balise de fermeture.
 L'attribut src est indispensable pour indiquer au
navigateur l'URL source où récupérer le contenu à
intégrer.
 D'autres attributs, facultatifs, permettent de
personnaliser l'Iframe.
Comment rendre un Iframe responsive ?

Un Iframe responsive est un Iframe qui adapte l'affichage

du contenu à l'écran de l'ordinateur ou du mobile utilisé
pour consulter le site web. Sur mobile et sur ordinateur
en effet, l'écran n'a pas la même taille. Pour un rendu
lisible et esthétique, il faut rendre l'Iframe
responsive.

C'est grâce à CSS que l'Iframe peut être rendu

responsive. Il faut correctement paramétrer les
propriétés CSS position, top, left, bottom, right, width
et height. Quand le code HTML de l'Iframe est généré
automatiquement par le site web source, sur YouTube par
exemple, il faut penser à le modifier.

12.2. : Les attributs de l'iframe : src, width, height,

etc.

Exemples d'attributs de l'élément Iframe :

 L'attribut title est recommandé dans un enjeu
d'accessibilité. Il permet de renseigner la

68
 description du contenu intégré, qui sera lue par les
lecteurs d'écran.
 L'attribut height permet de personnaliser la hauteur
du cadre Iframe. L'attribut width permet d'en définir
la largeur.
 L'attribut allowfullscreen sert à paramétrer les
possibilités d'affichage. À la valeur true,
l'utilisateur a la possibilité d'afficher le contenu
en plein écran.

Certains attributs d'Iframe sont déconseillés en HTML5.

C'est le cas par exemple de l'attribut frameborder, qui
détermine les paramètres de bordure du cadre. À la place
de cet attribut, ainsi que des autres attributs
obsolètes, il est recommandé d'utiliser CSS pour définir
les propriétés de style de l'Iframe.

12.3. : Les bonnes pratiques d'utilisation des iframes

(1) Intégrer une page web

Pour afficher une page web externe dans une page web de
son site, le développeur insère un élément Iframe dans
son document HTML.

(2) Intégrer une vidéo YouTube

L'Iframe est souvent utilisé pour intégrer une vidéo

YouTube dans une page web. YouTube, à cet égard, génère
automatiquement le code HTML de l'Iframe. Il suffit de
cliquer sur le bouton « Partager », en-dessous de la
vidéo, puis sur le bouton « Intégrer ». YouTube propose
plusieurs options : afficher ou non les commandes de

69
lecteur, démarrer la vidéo à un moment déterminé,
renforcer les paramètres de confidentialité des données.

(3) Intégrer une carte Google Maps

Google Maps autorise les sites web à se servir de sa

technologie, pour afficher des cartes interactives. Un
développeur peut par exemple utiliser un extrait de carte
Google Maps à des fins de géolocalisation, pour améliorer
l'expérience utilisateur. Google Maps génère
automatiquement le code HTML de l'Iframe depuis le bouton
de partage, dans l'onglet « Intégrer une carte ».

(4) Intégrer une publication Facebook

L'élément Iframe peut être utilisé pour intégrer sur une

page web du contenu issu de réseaux sociaux. Facebook,
par exemple, permet d'afficher une publication sur un
site depuis le bouton « Intégrer à un site » de la
publication.

70
71
PARTIE 2 : Mise en forme.
CHAPITRE 1 : Introduction à CSS

Après avoir passé toute une première partie du cours à ne

travailler que sur le HTML, nous allons maintenant
découvrir le CSS que j'avais volontairement mis à
l'écart. Le CSS n'est pas plus compliqué que le HTML. Il
vient le compléter pour vous aider à mettre en forme
votre page web.

Dans ce premier point sur le CSS, nous allons voir la

théorie sur le CSS : qu'est-ce que c'est ? À quoi cela
ressemble-t-il ? Où est-ce qu'on écrit du code CSS ? Ces
aspects théoriques ne sont pas bien compliqués mais vous
devez obligatoirement les connaître car c'est la base du
CSS. C'est d'ailleurs la seule chose que je vous
demanderai de retenir par cœur en CSS.
1.1. : Définition de CSS.

Les feuilles de style en cascade, généralement

appelées CSS de l'anglais Cascading Style Sheets, forment
un langage informatique qui décrit la présentation des
documents HTML et XML. Les standards définissant CSS sont
publiés par le World Wide Web Consortium (W3C). Introduit
au milieu des années 1990, CSS devient couramment utilisé
dans la conception de sites web et bien pris en charge
par les navigateurs web dans les années 2000.
1.2. : Rôle de CSS dans la conception web.

CSS ? C'est lui qui vous permet de choisir la couleur de

votre texte.
Lui qui vous permet de sélectionner la police utilisée
sur votre site.
Lui encore qui permet de définir la taille du texte, les
bordures, le fond…

Et aussi, c'est lui qui permet de faire la mise en page

de votre site. Vous pourrez dire : je veux que mon menu
soit à gauche et occupe telle largeur, que l'en-tête de
mon site soit calé en haut et qu'il soit toujours
visible, etc.

72
Grâce au HTML, nous avons pu rédiger le contenu de notre
site mais il est brut de décoffrage. Le CSS vient
compléter ce code pour mettre en forme tout cela et
donner au contenu l'apparence que l'on souhaite.
1.3. : Historique et évolution de CSS.

Je vous avais avertis dès le début de ce cours : nous

allons apprendre deux langages. Nous avons déjà bien
entamé notre découverte du HTML, même s'il reste encore
de nombreuses choses à apprendre (nous y reviendrons dans
quelques chapitres).

En revanche, il est temps maintenant de nous intéresser

au CSS. CSS (Cascading Style Sheets), c'est cet autre
langage qui vient compléter le HTML. Vous vous souvenez
de son rôle ? Gérer la mise en forme de votre site.

CSS : des débuts difficiles

Il faut savoir qu'aux débuts du Web, CSS n'existait pas.

En fait, il n'y avait initialement que le langage HTML.
Le HTML est né en 1991 et CSS en 1996. Alors, vous vous
dites sûrement : comment faisait-on la mise en forme de
1991 à 1996 ?

Eh bien, uniquement en HTML ! Il y avait en effet des

balises HTML dédiées à la mise en forme. <font
color="#aab1c3">, par exemple, permettait de définir la
couleur du texte. Cependant, les pages HTML commençaient
à devenir assez complexes. Il y avait de plus en plus de
balises et c'était un joyeux mélange entre le fond et la
forme, qui rendait la mise à jour des pages web de plus
en plus complexe. C'est pour cela que l'on a créé le
langage CSS.

Cependant, le CSS n'a pas été adopté immédiatement par

les webmasters, loin de là. Il fallait se défaire de
certaines mauvaises habitudes et cela a pris du temps.
Encore aujourd'hui, on peut trouver des sites web avec
des balises HTML de mise en forme, anciennes et
obsolètes, comme <font> !

73
CHAPITRE 2 : Intégration de CSS dans HTML
2.1. : Différentes méthodes d'intégration de CSS :
balise <style>, lien externe, style en ligne.
Vous avez le choix car on peut écrire du code en langage
CSS à trois endroits différents : dans un fichier .css
(méthode la plus recommandée) ; dans l'en-tête <head> du
fichier HTML ; directement dans les balises du fichier
HTML via un attribut style (méthode la moins
recommandée). Je vais vous présenter ces trois méthodes
mais sachez d'ores et déjà que la première… est la
meilleure.
Dans un fichier .css (recommandé)

Comme je viens de vous le dire, on écrit le plus souvent

le code CSS dans un fichier spécial ayant
l'extension .css (contrairement aux fichiers HTML qui ont
l'extension .html). C'est la méthode la plus pratique et
la plus souple. Cela nous évite de tout mélanger dans un
même fichier. J'utiliserai cette technique dans toute la
suite de ce cours. Commençons à pratiquer dès
maintenant ! Nous allons partir du fichier HTML suivant :

Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu
<em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

Vous noterez le contenu de la ligne 5, <link

rel="stylesheet" href="[Link]" /> : c'est elle qui

74
indique que ce fichier HTML est associé à un fichier
appelé [Link] et chargé de la mise en forme.
Enregistrez ce fichier sous le nom que vous voulez (par
exemple [Link]). Pour le moment, rien d'extraordinaire
à part la nouvelle balise que nous avons ajoutée.

Maintenant, créez un nouveau fichier vide dans votre

éditeur de texte (par exemple Notepad++) et copiez-y ce
bout de code CSS (rassurez-vous, je vous expliquerai tout
à l'heure ce qu'il veut dire) :

Code : CSS
p{
color: blue;
}

Enregistrez le fichier en lui donnant un nom qui se

termine par .css, comme [Link]. Placez ce fichier .css
dans le même dossier que votre fichier .html.

Dans l'en-tête <head> du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses

fichiers HTML : cela consiste à insérer le code CSS
directement dans une balise <style> à l'intérieur de
l'en-tête <head>. Voici comment on peut obtenir
exactement le même résultat avec un seul fichier .html
qui contient le code CSS (lignes 5 à 10) :

Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
</head>

Directement dans les balises (non recommandé)

Dernière méthode, à manipuler avec précaution : vous

pouvez ajouter un attribut style à n'importe quelle

75
balise. Vous insérerez votre code CSS directement dans
cet attribut :

Code : HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur
mon site!</p>
<p>Pour le moment, mon site est un peu
<em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

Cette fois, seul le texte du premier paragraphe (ligne

11), dont la balise contient le code CSS, sera coloré en
bleu.
2.2. : Syntaxe de base des règles CSS : sélecteurs,
propriétés, valeurs.
Maintenant que nous savons où placer le code CSS,
intéressons-nous de plus près à ce code. Je vous ai
donné, sans vous l'expliquer, un premier bout de code CSS
:

Code : CSS
p{
color: blue;
}
Dans un code CSS comme celui-ci, on trouve trois éléments
différents :
- Des noms de balises : on écrit les noms des balises
dont on veut modifier l'apparence. Par exemple, si je

76
 veux modifier l'apparence de tous les paragraphes
<p>, je dois écrire p.
- Des propriétés CSS : les « effets de style » de la
page sont rangés dans des propriétés. Il y a par
exemple la propriété color qui permet d'indiquer la
couleur du texte, font-size qui permet d'indiquer la
taille du texte, etc. Il y a beaucoup de propriétés
CSS et, comme je vous l'ai dit, je ne vous obligerai
pas à les connaître toutes par cœur.
- Les valeurs : pour chaque propriété CSS, on doit
indiquer une valeur. Par exemple, pour la propriété
color, il faut indiquer le nom de la couleur. Pour
font-size, il faut indiquer quelle taille on veut,
etc.
CHAPITRE 3 : Sélecteurs CSS.
Ce que je vous ai montré jusqu'ici a quand même un défaut
: cela implique par exemple que TOUS les paragraphes
possèdent la même présentation (ici, ils seront donc tous
écrits en bleu).

Comment faire pour que certains paragraphes seulement

soient écrits d'une manière différente ? On pourrait
placer le code CSS dans un attribut style sur la balise
que l'on vise (c'est la technique que je vous ai présenté
un peu plus tôt) mais, comme je vous l'ai dit, ce n'est
pas recommandé (il vaut mieux utiliser un fichier CSS
externe).

Pour résoudre le problème, on peut utiliser ces attributs

spéciaux qui fonctionnent sur toutes les balises :

- l'attribut class ;
- l'attribut id.

Que les choses soient claires dès le début : les

attributs class et id sont quasiment identiques. Il y a
seulement une petite différence que je vous dévoilerai
plus bas.

3.1. : Sélecteurs de classe

Pour le moment, et pour faire simple, on ne va

s'intéresser qu'à l'attribut class.

77
Comme je viens de vous le dire, c'est un attribut que
l'on peut mettre sur n'importe quelle balise, aussi bien
titre que paragraphe, image, etc.

Source CSS
.haut { text-align:right;
}
Source (X)HTML
<p class="haut">
<a href="#haut">Haut de page</a>
</p>
3.2. : Sélecteurs d'identifiant
Le sélecteur id a presque la même fonction, à la
différence importante qu'on ne peut l'utiliser qu'une
seule fois dans la page, contrairement au sélecteur
class. C'est pour cela qu'il est plutôt utilisé à la mise
en page qu'à la mise en forme de caractères.
Exemple : construisons une section de page à deux
colonnes. L'une des deux colonnes servira pour un menu de
100 pixels de large flottant à gauche, l'autre pour un
contenu placé à 110 pixels du bord gauche (pour ne pas
empiéter sur le menu bien sûr). Cette fois, ce n'est pas
d'un point qu'il faudra faire précéder le nom du
sélecteur id, mais d'un #.

Exemple 1 :

Source CSS

#menu { background-color: silver; width: 100px; float:

left; }
#contenu { margin-left: 110px;
}

Source (X)HTML

<h1 id="haut">Exemple des sélecteurs "class" et "id"</h1>

<div id="menu"> <ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>

78
<div id="contenu">
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.
</p>
<p class="haut">
<a href="#haut">Haut de page</a>
</p>
</div>

Exemple 2
Box-shadow avec CSS3

<div id="ombre1">
</div>

#ombre1{ width : 300px ;

height : 200px ; background : #6666CC ; box-shadow : 15px
10px 12px #000000 ;
}

Exemple 3 :
text-shadow avec CSS3

<p id="ombre2"> voice une ombre appliquer au texte </p>

#tuto_text-shadow
{
Text-shadow:10px 5px 2px #000000 ; }

79
CHAPITRE 4 : Propriétés de style CSS
4.1. : Propriétés de texte : couleur, police, taille,
alignement, décoration, espacement, etc.

Nous arrivons maintenant à un chapitre qui devrait

beaucoup vous intéresser. Non, le « formatage du texte »
n'a rien à voir avec la destruction de toutes les données
présentes sur votre disque dur ! Cela signifie simplement
que l'on va modifier l'apparence du texte (on dit qu'on
le « met en forme »).

Pas de surprise particulière : nous sommes toujours dans

le CSS et nous allons réutiliser ce que nous venons
d'apprendre dans le chapitre précédent. Nous allons donc
travailler directement au sein du fichier .css que nous
avons créé.
Ce chapitre va être l'occasion de découvrir de nombreuses
propriétés CSS : nous allons voir comment modifier la
taille du texte, changer la police, aligner le texte…

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

- Indiquer une taille absolue : en pixels, en

centimètres ou millimètres. Cette méthode est très

80
 précise mais il est conseillé de ne l'utiliser que si
c'est absolument nécessaire, car on risque d'indiquer
une taille trop petite pour certains lecteurs.
- Indiquer une taille relative : en pourcentage, « em »
ou « ex », cette technique a l'avantage d'être plus
souple. Elle s'adapte plus facilement aux préférences
de taille des visiteurs.

Une taille absolue

Pour indiquer une taille absolue, on utilise généralement

les pixels. Pour avoir un texte de 16 pixels de hauteur,
vous devez donc écrire :

Code : CSS
font-size: 16px;
Une valeur relative

C'est la méthode recommandée car le texte s'adapte alors

plus facilement aux préférences de tous les visiteurs. Il
y a plusieurs moyens d'indiquer une valeur relative. Vous
pouvez par exemple écrire la taille avec des mots en
anglais comme ceux-ci :
- xx-small : minuscule ;
- x-small : très petit ;
- small : petit ;
- medium : moyen ;
- large : grand ;
- x-large : très grand ;
- xx-large : euh… gigantesque.

Vous pouvez tester l'utilisation de ces valeurs dans

votre code CSS :
p{
font-size: small;
}
h1
{
font-size: large;
}
Bon, cette technique a un défaut : il n'y a que sept
tailles disponibles (car il n'y a que sept noms).
Heureusement, il existe d'autres moyens. Ma technique
préférée consiste à indiquer la taille en « em ».
- Si vous écrivez 1em, le texte a une taille normale.

81
 - Si vous voulez grossir le texte, vous pouvez inscrire
une valeur supérieure à 1, comme 1.3em.
- Si vous voulez réduire le texte, inscrivez une valeur
inférieure à 1, comme 0.8em.

La police

Ah… La police… On touche un point sensible.

En effet, il se pose un problème : pour qu'une police

s'affiche correctement, il faut que tous les internautes
l'aient. Si un internaute n'a pas la même police que
vous, son navigateur prendra une police par défaut (une
police standard) qui n'aura peut-être rien à voir avec ce
à quoi vous vous attendiez.

La bonne nouvelle, c'est que depuis CSS 3, il est

possible de faire télécharger automatiquement une police
au navigateur. Je vous expliquerai dans un second temps
comment faire cela.

Modifier la police utilisée

La propriété CSS qui permet d'indiquer la police à

utiliser est font-family. Vous devez écrire le nom de la
police comme ceci :

Code : CSS
balise
{
font-family: police;
}

Seulement, pour éviter les problèmes si l'internaute n'a

pas la même police que vous, on précise en général
plusieurs noms de police, séparés par des virgules :

balise
{
font-family: police1, police2, police3, police4;
}

Le navigateur essaiera d'abord d'utiliser la police1.

S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas,
il passera à la police3, et ainsi de suite. En général,
on indique en tout dernier serif, ce qui correspond à une

82
police par défaut (qui ne s'applique que si aucune autre
police n'a été trouvée).

Oui, mais quelles sont les polices les plus courantes

qu'on a le « droit » d'utiliser, me direz-vous ? Voici
une liste de polices qui fonctionnent bien sur la plupart
des navigateurs :
- Arial ;
- Arial Black ;
- Comic Sans MS ;
- Courier New ;
- Georgia ;
- Impact ;
- Times New Roman ;
- Trebuchet MS ;
- Verdana.

Italique, gras, souligné…

Il existe en CSS une série de propriétés classiques de

mise en forme du texte. Nous allons découvrir ici comment
afficher le texte en gras, italique, souligné… et au
passage nous verrons qu'il est même possible d'aller
jusqu'à le faire clignoter !

Mettre en italique

Je n'ai jamais dit cela.

Retournez voir les chapitres précédents si vous avez des
doutes, mais je n'ai jamais dit que la balise <em> était
faite pour mettre le texte en italique (de même que je
n'ai jamais dit que <strong> était faite pour mettre en
gras).

<em>, mettez-vous bien cela dans la tête, est faite pour

insister sur des mots. Cela veut dire que les mots
qu'elle entoure sont assez importants. Pour représenter
cette importance, la plupart des navigateurs choisissent
d'afficher le texte en italique, mais ce n'est pas une
obligation.

Le CSS lui, permet de dire réellement : « Je veux que ce

texte soit en italique ». Rien ne vous empêche, par
exemple, de décider que tous vos titres seront en
italique. Concrètement, en CSS, pour mettre en italique,
on utilise font-style qui peut prendre trois valeurs :

83
 - italic : le texte sera mis en italique.
- oblique : le texte sera passé en oblique (les lettres
sont penchées, le résultat est légèrement différent
de l'italique proprement dit).
- 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 :
-
Code : CSS
em
{
font-style: normal;
}
Ainsi, dans l'exemple suivant, je me sers de font-style
pour mettre en italique tous mes titres <h2> :
Code : CSS
h2
{
font-style: italic;
}

Mettre en gras

Et si nous passions à la mise en gras ?

Alors, là encore, n'oubliez pas que ce n'est pas <strong>
qui permet de mettre en gras (son rôle est d'indiquer que
le texte est important, donc le navigateur l'affiche
généralement en gras). La mise en gras en CSS peut par
exemple s'appliquer aux titres, à certains paragraphes
entiers, etc. C'est à vous de voir. La propriété CSS pour
mettre en gras est font-weight et prend les valeurs
suivantes :

- bold : le texte sera en gras ;

- normal : le texte sera écrit normalement (par
défaut).

Voici par exemple comment écrire les titres en gras :

Code : CSS
h1
{
font-weight: bold;
}

84
Soulignement et autres décorations

La propriété CSS associée porte bien son nom : text-

decoration. Elle permet, entre autres, de souligner le
texte, mais pas seulement. Voici les différentes valeurs
qu'elle peut prendre :

- underline : souligné.
- line-through : barré.
- overline : ligne au-dessus.
- blink : clignotant. Ne fonctionne pas sur tous les
navigateurs (Internet Explorer et Google Chrome,
notamment).
- none : normal (par défaut).

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

decoration :

h1{
text-decoration: blink;
}
.souligne{
text-decoration: underline;
}
.barre{
text-decoration: line-through;
}
.ligne_dessus{
text-decoration: overline;
}

L'alignement

Le langage CSS nous permet de faire tous les alignements

connus : à gauche, centré, à droite et justifié. C'est
tout simple. On utilise la propriété text-align et on
indique l'alignement désiré :

- left : le texte sera aligné à gauche (c'est le

réglage par défaut).
- center : le texte sera centré.
- right : le texte sera aligné à droite.
- justify : le texte sera « justifié ». Justifier le
texte permet de faire en sorte qu'il prenne toute la
largeur possible sans laisser d'espace blanc à la fin

85
 des lignes. Les textes des journaux, par exemple,
sont toujours justifiés.

Regardez les différents alignements sur cet exemple :

h1{
text-align: center;
}
p{
text-align: justify;
}
.signature{
text-align: right;
}
4.2. : Propriétés de fond : couleur, image, répétition,
position, etc.

Continuons notre tour d'horizon des propriétés CSS

existantes. Nous allons nous intéresser ici aux
propriétés liées de près ou de loin à la couleur. Nous
verrons entre autres :

- comment changer la couleur du texte ;

- comment mettre une couleur ou une image d'arrière-
plan ;
- comment ajouter des ombres ;
- comment jouer avec les niveaux de transparence.

Le CSS n'a pas fini de nous étonner !

Couleur du texte

Vous connaissez déjà la propriété qui permet de modifier

la couleur du texte : il s'agit de color. Nous allons
nous intéresser aux différentes façons d'indiquer la
couleur, car il y en a plusieurs.

Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour

choisir une couleur consiste à taper son nom (in english,
of course ). Le seul défaut de cette méthode est qu'il
n'existe que seize couleurs dites « standard ».

86
Pour passer tous les titres en marron, on peut donc
écrire :
h1 {
color: maroon;
}

La notation hexadécimale

Seize couleurs, c'est quand même un peu limite quand on

sait que la plupart des écrans peuvent en afficher seize
millions. D'un autre côté, remarquez, s'il avait fallu
donner un nom à chacune des seize millions de couleurs…

Heureusement, il existe en CSS plusieurs façons de

choisir une couleur parmi toutes celles qui existent. La
première que je vais vous montrer est la notation
hexadécimale. Elle est couramment utilisée sur le Web
mais il existe aussi une autre méthode que nous verrons
plus loin.

Un nom de couleur en hexadécimal, cela ressemble à :

#FF5A28. Pour faire simple, c'est une combinaison de
lettres et de chiffres qui indiquent une couleur. On doit
toujours commencer par écrire un dièse (#), suivi de six
lettres ou chiffres allant de 0 à 9 et de A à F.

Ces lettres ou chiffres fonctionnent deux par deux. Les

deux premiers indiquent une quantité de rouge, les deux
suivants une quantité de vert et les deux derniers une
quantité de bleu. En mélangeant ces quantités (qui sont
les composantes Rouge-Vert-Bleu de la couleur) on peut
obtenir la couleur qu'on veut.

Ainsi, #000000 correspond à la couleur noire et #FFFFFF à

la couleur blanche. Mais maintenant, ne me demandez pas
quelle est la combinaison qui produit de l'orange couleur
« coucher de soleil », je n'en sais strictement rien.

Couleur de fond

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.

87
Pour indiquer la couleur de fond de la page web, il faut
travailler sur 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.
Regardez très attentivement ce fichier CSS :

Code : CSS
/* On travaille sur la balise body, donc sur TOUTE la
page */
body{
background-color: black; /* Le fond de la page sera noir
*/
color: white; /* Le texte de la page sera blanc */
}

Images de fond

Dans les exemples qui suivent, je vais modifier l'image

de fond de la page. Cependant, tout comme pour la couleur
de fond, n'oubliez pas que l'image de fond ne s'applique
pas forcément à la page entière. On peut aussi mettre une
image de fond derrière les titres, paragraphes, etc.
Appliquer une image de fond

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

background-image. Comme valeur, on doit renseigner
url("nom_de_l_image.png"). Par exemple :
body{
background-image: url("[Link]");
}

La transparence

Le CSS nous permet de jouer très facilement avec les

niveaux de transparence des éléments ! Pour cela, nous
allons utiliser des fonctionnalités de CSS3 : la
propriété opacity et la notation RGBa.

La propriété opacity

La propriété opacity, très simple, 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.

88
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 !
Voici comment on peut l'utiliser :

p{
opacity: 0.6;
}

Voici un exemple qui va nous permettre d'apprécier la

transparence. Vous en trouverez le rendu à la figure
suivante.
Code : CSS
body{
background: url('[Link]');
}
p{
background-color: black;
color: white;
opacity: 0.3;
}
4.3. : Propriétés de bordure : largeur, style, couleur,
rayon de bordure, etc.

Nouveau chapitre, nouveau lot de propriétés CSS. Ici,

nous allons nous intéresser aux bordures et aux effets
d'ombrage que l'on peut appliquer, aussi bien sur le
texte que sur les blocs qui constituent notre page.

Nous réutiliserons en particulier nos connaissances sur

les couleurs pour choisir la couleur de nos bordures et
de nos ombres. Prêts à vous en mettre une nouvelle fois
plein la vue ?

4.4. : Propriétés de mise en page : marges, bordures,

rembourrage, dimensions, positionnement, etc.
Bordures standard
Le CSS vous offre un large choix de bordures pour décorer
votre page. De nombreuses propriétés CSS vous permettent

89
de modifier l'apparence de vos bordures : border-width,
border-color, border-style…

Pour aller à l'essentiel, je vous propose ici d'utiliser

directement la super-propriété border qui regroupe
l'ensemble de ces propriétés. Vous vous souvenez de la
super-propriété background ? Cela fonctionne sur le même
principe : on va pouvoir combiner plusieurs valeurs.

Pour border on peut utiliser jusqu'à trois valeurs pour

modifier l'apparence de la bordure :

- La largeur : indiquez la largeur de votre bordure.

Mettez une valeur en pixels (comme 2px).
- La couleur : c'est la couleur de votre bordure.
Utilisez, comme on l'a appris, soit un nom de couleur
(black, red, …), soit une valeur hexadécimale
(#FF0000), soit une valeur RGB (rgb(198, 212, 37)).
- Le type de bordure : là, vous avez le choix. Votre
bordure peut être un simple trait, ou des pointillés,
ou encore des tirets, etc. Voici les différentes
valeurs disponibles :
o none : pas de bordure (par défaut) ;
o solid : un trait simple ;
o dotted : pointillés ;
o dashed : tirets ;
o double : bordure double ;
o groove : en relief ;
o ridge : autre effet relief ;
o inset : effet 3D global enfoncé ;
o outset : effet 3D global surélevé.

Ainsi, pour avoir une bordure bleue, en tirets, épaisse

de 3 pixels autour de mes titres, je vais écrire :

Code : CSS
h1{
border: 3px blue dashed;
}

90
CHAPITRE 5 : Modèle de boîte CSS
5.1. : Concept du modèle de boîte : contenu, bordure,
marge, rembourrage

Le modèle de boîte CSS (Basic Box Model en anglais) est

un module CSS qui définit les boîtes rectangulaires (y
compris leurs zones de remplissage (padding) et de
marges) qui sont générées pour disposer les éléments
selon leur modèle de mise en forme visuelle.
Référence
Propriétés
Les propriétés qui définissent le flux du contenu dans
une boîte

 overflow
 overflow-x
 overflow-y
Les propriétés qui définissent la taille d'une boîte

 height
 width
 max-height
 max-width
 min-height
 min-width
Les propriétés qui définissent les marges d'une boîte

 margin
 margin-bottom
 margin-left
 margin-right
 margin-top
 margin-trim Expérimental
Les propriétés qui définissent le remplissage (padding)
d'une boîte

 padding
 padding-bottom
 padding-left
 padding-right
 padding-top

91
Les autres propriétés

 box-shadow
 visibility
5.2. : Box-sizing : border-box vs content-box.

La box-sizing propriété nous permet d'inclure le

remplissage et la bordure dans la largeur et la hauteur
totales d'un élément.

Si vous définissez box-sizing: border-box;un élément, le

remplissage et la bordure sont inclus dans la largeur et
la hauteur :

Voici le même exemple que ci-dessus, avec box-sizing:

border-box; ajouté aux deux éléments <div> :

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

92
Étant donné que le résultat de l'utilisation de box-
sizing: border-box;est bien meilleur, de nombreux
développeurs souhaitent que tous les éléments de leurs
pages fonctionnent de cette façon.

Le code ci-dessous garantit que tous les éléments sont

dimensionnés de cette manière plus intuitive. De nombreux
navigateurs utilisent déjà box-sizing: border-box;de
nombreux éléments de formulaire (mais pas tous - c'est
pourquoi les entrées et les zones de texte ont une
largeur différente : 100 % ;).

Appliquer cela à tous les éléments est sûr et judicieux :

* {
box-sizing: border-box;
}
5.3. : Techniques de mise en page avec le modèle de
boîte
Le modèle de boîte est essentiel en CSS. La bonne
compréhension de ce modèle est indispensable pour mettre
correctement en forme une page HTML. Pour rappel, c'est
le moteur de rendu qui s'occupe de la compréhension et de
l'affichage du CSS.
La règle est la suivante : dans une page HTML, chaque
élément ou balise est représenté par une boîte
rectangulaire. Cette boîte fait sens avec ce que nous
avons vu dans le chapitre précédemment. Les bordures de
couleur autour des éléments dessinaient tout simplement
les extrémités de la boîte.
Le modèle de boîte peut être ajusté et modifié grâce à
des propriétés particulières. Le schéma ci-après illustre
le modèle de boîte avec les propriétés
incontournables : margin:, border: et padding:.

93
On remarque que le modèle de boîte est évolutif et
ajustable et fait penser à une poupée russe. La boîte
centrale, celle du contenu de la balise, est matérialisée
en bleu clair.
MARGE INTÉRIEURE (PADDING:)
Autour de la boîte centrale et donc du contenu, on
distingue la marge intérieure. Elle est représentée en
CSS grâce à la propriété padding:.
BORDURE (BORDER:)
La bordure est une zone intercalée entre les marges
intérieure et extérieure. On peut matérialiser ou non
cette limite. C'est à l'aide de cette propriété que dans
le chapitre précédent nous avons mis en valeur les
différents types de boîtes. Elle est représentée en CSS
avec la propriété border :
MARGE EXTÉRIEURE (MARGIN:)
La marge extérieure correspond à la limite extrême de la
boîte et représente la distance entre deux boîtes. En
CSS, on utilise la propriété : margina :
EXEMPLES
Pour bien comprendre l'utilisation de ces propriétés et
les mettre en évidence, prenons le temps d'étudier
plusieurs exemples.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page affiché dans la barre du
navigateur</title>
<link rel="stylesheet" href="[Link]" />

94
 </head>

<body>
<p> Numne, si <span>Coriolanus</span> habuit
amicos, ferre contra patriam arma illi cum Coriolano
debuerunt? num Vecellinum amici regnum adpetentem, num
<strong>Maelium</strong> debuerunt iuvare?</p>
<p>Eo quoque accedente quod et
<strong>Nomenclatores</strong> adsueti haec, mercede
accepta lucris quosdam et prandiis inserunt subditicios
<span>Ignobiles</span> et obscuros.</p>
</body>
</html>
p {
border: 3px red solid;
margin: 0;
padding: 0;
}
Numne, si Coriolanus habuit amicos, ferre contra patriam
arma illi cum Coriolano debuerunt? num Vecellinum amici
regnum adpetentem, num Maelium debuerunt iuvare?
Eo quoque accedente quod et Nomenclatores adsueti haec,
mercede accepta lucris quosdam et prandiis inserunt
subditicios Ignobiles et obscuros.
Dans cet exemple, on met en évidence le fait que deux
boîtes qui n'ont pas de marge extérieure (margin: 0),
auront les bordures qui se touchent. Conservons le même
fichier HTML et modifions uniquement la feuille de style
en ajoutant seulement des marges extérieures.
p {
border: 3px red solid;
margin: 15px;
padding: 0;
}

Numne, si Coriolanus habuit amicos, ferre contra

patriam arma illi cum Coriolano debuerunt? num
Vecellinum amici regnum adpetentem,
num Maelium debuerunt iuvare?

Eo quoque accedente quod et Nomenclatores adsueti haec,

mercede accepta lucris quosdam et prandiis inserunt
subditicios Ignobiles et obscuros.
La différence est frappante, les 2 boîtes sont désormais
espacées l'une de l'autre. Qu'en est-il de la valeur
de padding: qui est toujours à zéro ? Utilisons toujours

95
le même fichier HTML et modifions le fichier CSS pour la
mettre en évidence.
p {
border: 3px red solid;
margin: 15px;
padding: 15px;
}

Numne, si Coriolanus habuit amicos, ferre contra

patriam arma illi cum Coriolano debuerunt? num
Vecellinum amici regnum adpetentem,
num Maelium debuerunt iuvare?

Eo quoque accedente quod et Nomenclatores adsueti haec,

mercede accepta lucris quosdam et prandiis inserunt
subditicios Ignobiles et obscuros.

La différence est une nouvelle fois frappante. On

distingue entre les deux exemples, la marge intérieure.
Le contenu est désormais bien éloigné de la bordure.
Le CSS offre un contrôle total sur les marges internes et
externes, et les bordures. Il existe des propriétés pour
définir chaque côté (en haut, à droite, en bas et à
gauche). Pour raccourcir le code et éviter une
redondance, il est possible de spécifier toutes les
propriétés dans une propriété. C'est ce que nous avons
utilisé depuis le début du cours à savoir :
#test {
margin: 25px;
}
Avec cette méthode, toutes les marges externes sont à
25px. Le fonctionnement est le même pour les autres
propriétés. Cependant, la version longue de la ligne ci-
dessus serait donc :
#test {
margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
Il existe également deux autres raccourcis intéressants.
#test {
margin: 25px 10px;
}

96
#test {
margin: 25px 15px 10px;
}
La première règle configurera une marge externe de 25px
en haut et en bas et 10px à droite et à gauche. Tandis
que la seconde règle personnalisera une marge externe en
haut à 25px, à droite à 15px et en bas à 10px. Pour
illustrer encore davantage ces propos, rien de tel qu'un
schéma. Ces raccourcis fonctionnent
avec margin:, padding: et border :

CHAPITRE 6 : Positionnement CSS

6.1. : Positionnement statique, relatif, absolu, fixe
Lorsque l’on choisit un positionnement relatif, l’élément
est décalé de l’endroit où il aurait dû être. Cela est
surtout utile pour de petits ajustements.
CSS
[Link]

1
#objet-a-placer{
2
position: relative;
3
top: 15px;
4
left: 10px;
5
}
À partir du moment où la propriété “position” a pour
valeur “relative”, l’objet est attentif aux propriétés
“top” ou “bottom” pour décaler l’élément verticalement,

97
 et “left” ou “right” pour décaler l’élément
horizontalement.
Le positionnement absolu permet de placer un élément
précisément par rapport au premier ancêtre qui a une
valeur de position différente de static. À noter qu’il
sort alors du flux et ne tient plus aucun compte des
autres éléments de la page, et vice-versa.
CSS

1
#objet-a-placer{
2
position: absolute;
3
top: 30px;
4
left: 50px;
5
}
À partir du moment où la propriété “position” a pour
valeur “absolute”, l’objet va se placer de manière
absolue par rapport à son référentiel :

 Le référentiel : Le référentiel est le premier ancêtre

qui a une position avec une valeur définie par la
propriété position, ou bien si aucun n’en a, le
référentiel est le viewport, soit la fenêtre visible.
 Le décalage : par rapport aux limites du référentiel en
utilisant la propriété “top” ou “bottom” pour la
verticale, et “left” ou “right” pour l’horizontale.

Lorsque l’on choisit un positionnement fixe, l’élément

sera placé comme en absolu avec comme référentiel le
viewport, c’est-à-dire la fenêtre visible du navigateur.
De cette manière, l’élément reste accroché à sa position
même en cas de scroll.

CSS

1
#objet-a-placer{
2
position: fixed;

98
3
bottom: 50px;
4
right: 50px;
5
}
6.2. : Propriétés de positionnement : top, bottom,
left, right, z-index
Nous allons pouvoir gérer et modifier le type de
positionnement d’une élément HTML grâce à la propriété
CSS position.
La propriété position ne va pas nous permettre de
positionner un élément en soi dans une page mais
simplement de définir un type de positionnement grâce aux
valeurs suivantes :
 position : static ;
 position : relative ;
 position : absolute ;
 position : fixed ;
 position : sticky.
Une fois le type de positionnement défini avec position,
nous allons pouvoir effectivement positionner un élément
à un endroit précis dans une page grâce aux
propriétés top, left, bottom et right.
Position : static
La valeur static est la valeur par défaut de la
propriété position. Ainsi, par défaut, tous les éléments
HTML sont positionnés de manière static. Un élément HTML
positionné avec position : static sera positionné selon
le flux normal de la page.
Notez ici que les
propriétés top, left, bottom et right n’auront aucun
effet sur les éléments positionnés avec position :
static.

99
Position : relative
Attribuer une position : relative à un élément va
positionner l’élément dans le flux normal de la page tout
comme la valeur static de la propriété position : static.
Cependant, à l’inverse d’un élément HTML positionné
avec position : static, un élément positionné
avec position : relative va ensuite pouvoir être décalé
par rapport à sa position initiale grâce aux
propriétés top, left, bottom et right.
Ces propriétés vont prendre comme origine la position
initiale de l’élément. Nous allons ainsi pouvoir
positionner un élément relativement à sa position de
départ.
Notez qu’ici l’espace occupé initialement par l’élément
va continuer à lui appartenir : les autres éléments ne
seront pas affectés par le décalage de notre élément et
ne vont pas se repositionner en fonction de celui-ci.
Cela implique également que l’élément décalé va pouvoir
être à cheval par-dessus d’autres éléments puisque a
position de ces autres éléments ne va pas changer en
fonction de l’élément décalé possédant une position :
relative

10
0
Position : absolute
Un élément positionné avec position: absolute va être
positionné par rapport à son parent le plus proche
positionné (avec une valeur de position différente
de static).
Si aucun parent positionné n’est trouvé, alors l’élément
sera positionné par rapport à l’élément racine
représentant la page en soi.
Le point de référence pour les
propriétés top, left, bottom et right va ainsi être le
côté de l’élément parent liée à la propriété (côté gauche
pour left, supérieur pour top , etc.).

10
1
De plus, un élément positionné avec position :
absolute va être retiré du flux normal de la page. Cela
signifie et implique que l’espace initialement attribué à
un élément au positionnement absolu (espace attribué
selon le flux normal de la page) va être occupé par les
éléments suivants.
Un élément positionné avec position: absolute va ainsi
pouvoir se placer par-dessus d’autres éléments.

10
2
Position : fixed
Le positionnement fixe est très proche du positionnement
absolu. Un élément positionné avec position: fixed va
également être retiré du flux de la page et l’espace qui
lui était attribué selon le flux normal de la page va
également pouvoir être utilisé par d’autres éléments.
La seule différence entre position: fixed et position:
absolute est que l’élément ne va plus être positionné par
rapport à son parent le plus proche mais par rapport au
viewport, c’est-à-dire par rapport à la fenêtre visible à
moins que l’un de ses parents possède une
propriété transform, filter ou perspective dont la valeur
est différente de none.
En dehors de ces cas particuliers, un élément positionné
avec position: fixed apparaitra toujours à la même place
même dans la fenêtre si on descend ou on monte dans la
page : il sera fixe par rapport à la fenêtre. En effet,
sa position va être calculée par rapport à la fenêtre
visible.

10
3
A noter ici une exception pour les contenus paginés :
dans ce cas-là, l’élément possédant une position:
fixed sera répété dans chaque page.
Position : sticky
La dernière valeur de la propriété CSS position est la
valeur sticky. Un élément positionné avec position:
sticky sera d’abord positionné selon le flux normal de la
page puis va pouvoir être décalé de manière similaire à
un élément positionné de manière relative. Les éléments
suivants ne verront pas leur position changée : ils
seront toujours placés « comme si » l’élément positionné
avec position: sticky occupait sa place d’origine.
La différence ici entre un élément positionné
avec position: sticky et position: relative est que la
position d’un élément sticky va être calculée par rapport
à son parent possédant un mécanisme de défilement
(scrolling) le plus proche.
Ainsi, un élément positionné avec position: sticky va
avoir une position relative au départ puis son
positionnement va devenir fixe dès qu’un certain point
sera franchi, c’est-à-dire à partir d’un certain niveau
de défilement de la page. Les
propriétés top, left, bottom et right vont nous permettre
de pouvoir préciser à partir de quel moment l’élément
positionné avec position: sticky va devoir être fixe.
Notez que la valeur sticky est une valeur assez récente
de la propriété position et est à ce titre toujours en
développement. On évitera donc de l’utiliser pour le
moment sur un site « live ».
6.3. : Techniques de positionnement avancées : flexbox,
grille CSS

Flexbox est une méthode de mise en page selon un axe

principal, permettant de disposer des éléments en ligne
ou en colonne. Les éléments se dilatent ou se rétractent
pour occuper l'espace disponible. Cet article en explique
tous les fondamentaux.
Pourquoi Flexbox ?

Pendant longtemps, les seuls outils de mise en page CSS

fiables et compatibles avec les navigateurs, étaient les
propriétés concernant les flotteurs (boîtes
flottantes) et le positionnement. Ces outils sont bien et
fonctionnent, mais restent à certains égards plutôt
limitatifs et frustrants.

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

 Centrer verticalement un bloc de contenu dans son

parent ;
 Faire que tous les enfants d'un conteneur occupent
tous une même quantité de hauteur/largeur disponible
selon l'espace offert ;
 Faire que toutes les colonnes dans une disposition
multicolonnes aient la même hauteur même si leur
quantité de contenu diffère.

Comme vous le verrez dans les paragraphes suivants,

Flexbox facilite considérablement les tâches de mise en
page. Approfondissons un peu !
Voici un exemple simple

Dans cet article, nous allons commencer une série

d'exercices pour vous faciliter la compréhension du
fonctionnement de Flexbox. Pour commencer, faites une
copie locale du premier fichier de démarrage
— [Link] de notre dépôt GitHub. Chargez-le dans un
navigateur moderne (comme Firefox ou Chrome) et regardez
le code dans votre éditeur. Vous pouvez le voir en direct
ici aussi.

Qu'avons-nous ? Un élément <header> avec un en-tête de

haut niveau à l'intérieur, et un
élément <section> contenant trois éléments <article>.

10
5
Nous allons les utiliser pour créer une disposition
vraiment classique sur trois colonnes.

Détermination des éléments à disposer en boîtes flexibles

Pour commencer, sélectionnons les éléments devant être

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

Voici le résultat :

Cette unique déclaration donne tout ce dont nous avons

besoin — incroyable, non ? Nous avons ainsi notre
disposition en plusieurs colonnes de largeur égale et
toutes de même hauteur. Ceci parce que les valeurs par
défaut données aux éléments flex (les enfants du
conteneur flex) sont configurés pour résoudre des
problèmes courants tels celui-ci.

10
6
Récapitulons ce qui se passe ici : l'élément auquel nous
avons affecté une valeur display de flex se comporte
d'une manière d'un élément de bloc par rapport à sa façon
d'interagir avec le reste de la page, tandis que les
enfants se disposent comme des éléments flexibles. On en
reparlera plus tard. À noter également que vous pouvez
définir une valeur inline-flex pour display si vous
voulez disposer des éléments en ligne sous forme de
boîtes modulables.
Aparté sur le modèle flex

Lorsque les éléments sont disposés en boîtes flexibles,

ils sont disposés le long de deux axes :

 L'axe principal (main axis) est l'axe de la direction

dans laquelle sont disposés les éléments flex (par
exemple, horizontalement sur la page, ou
verticalement de haut en bas de la page). Le début et
la fin de cet axe sont appelés l'origine principale
(main start) et la fin principale (main end).
 L'axe croisé (cross axis) est l'axe perpendiculaire à
l'axe principal, c'est-à-dire à la direction dans
laquelle sont disposés les éléments flex. Le début et
la fin de cet axe sont appelés le début (cross
start) et la fin (cross end) de l'axe croisé.
 L'élément parent dont la propriété est display:
flex (<section> dans notre exemple) est appelé
le conteneur flex (flex container).

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

Gardez cette terminologie en tête en lisant les

paragraphes suivants. Vous pouvez toujours vous y référer
si vous avez un doute sur la signification des termes
utilisés.
Colonnes ou lignes ?

Flexbox dispose de la propriété flex-direction pour

indiquer la direction de l'axe principal (direction dans
laquelle les enfants flexibles sont disposés). Cette
propriété est égale par défaut à row : ils sont donc
disposés en ligne, dans le sens de lecture de la langue
par défaut du navigateur (de gauche à droite, dans le cas
d'un navigateur français).

Ajoutez la déclaration suivante dans la règle CSS pour

l'élément <section> :
CSSCopy to Clipboard
flex-direction: column;

Cela dispose de nouveau les éléments en colonnes, comme

c'était le cas avant l'ajout de la CSS. Avant de
poursuivre, enlevez cette déclaration de l'exemple.
Note : Vous pouvez aussi disposer les éléments flex dans
la direction inverse avec les valeurs row-
reverse et column-reverse. Expérimentez ces valeurs
aussi !
Enveloppement

Problème : quand votre structure est de largeur ou

hauteur fixe, il arrive que les éléments flex débordent
du conteneur et brisent cette structure. Voyez
l'exemple [Link] et essayez-
le directement (faites une copie locale de ce fichier
maintenant si vous voulez suivre cet exemple) :

10
8
Ici, nous voyons que les enfants débordent du conteneur.
Une façon d'y remédier est d'ajouter la déclaration
suivante à votre règle pour <section> :
CSSCopy to Clipboard
flex-wrap: wrap;

Ajoutez aussi la déclaration suivante à votre règle

pour <article> :
CSSCopy to Clipboard
flex: 200px;

Essayons ; la disposition est bien meilleure avec ces

ajouts :

10
9
 N
ous avons maintenant plusieurs lignes — un nombre sensé
d'enfants flexibles est placé sur chaque ligne, et le
débordement est déplacé vers le bas sur une ligne
supplémentaire. La déclaration flex: 200px pour les
éléments article signifie que chacun aura au moins 200px
de large ; nous discuterons de cette propriété plus en
détail plus tard. Vous noterez aussi que chacun des
enfants de la dernière rangée est plus large, de façon
que toute la rangée reste remplie.

Mais nous pouvons faire plus ici. Tout d'abord, essayez

de changer la valeur de la propriété flex-
direction en row-reverse — maintenant vous avez toujours
la disposition sur plusieurs lignes, mais elles
commencent dans l'angle opposé de la fenêtre du
navigateur et se disposent à l'envers.
Forme abrégée « flex-flow »

Notez maintenant qu'il y a une forme abrégée pour flex-

direction et flex-wrap — flex-flow. Ainsi, par exemple,
vous pouvez remplacer :
CSSCopy to Clipboard
flex-direction: row;

11
0
flex-wrap: wrap;

par :
CSSCopy to Clipboard
flex-flow: row wrap;
Taille modulable des éléments flex

Revenons maintenant au premier exemple, et examinons

comment nous pouvons contrôler la proportion d'éléments
flexibles dans l'espace. Lancez votre copie locale
de [Link] ou prenez une copie
de [Link] comme nouveau point de départ (voir en
direct).

Ajoutez d'abord la règle ci-dessous en fin de la CSS :

CSSCopy to Clipboard
article {
flex: 1;
}

Il s'agit d'une valeur de proportion, sans unité,

définissant la quantité d'espace disponible que chaque
élément flex prendra le long de l'axe principal. Dans ce
cas, nous donnons à chaque élément <article> une valeur
de 1, ce qui signifie qu'ils prendront tous une portion
égale de l'espace libre après le calcul du remplissage et
de la marge. Cette valeur représente une proportion,
c'est-à-dire que le fait de donner une valeur de 400 000
simultanément à tous les éléments flex aurait exactement
le même effet.

Maintenant ajoutons cette règle en dessous de la

précédente :
CSSCopy to Clipboard
article:nth-of-type(3) {
flex: 2;
}

Maintenant, lorsque vous actualisez, vous voyez que le

troisième <article> occupe deux fois plus de largeur
disponible que chacun des deux autres — il y a maintenant
quatre unités de division disponibles au total (puisque
1 + 1 + 2 = 4). Les deux premiers éléments flexibles en
occupent chacun un, soit 1/4 de l'espace disponible pour
chacun. Le troisième remplit deux unités, soit 2/4 (la
moitié) de l'espace disponible.

11
1
Vous pouvez également définir une valeur minimale de
taille dans la valeur flex. Modifiez comme suit vos
règles article existantes :
CSSCopy to Clipboard
article {
flex: 1 200px;
}

article:nth-of-type(3) {
flex: 2 200px;
}

En gros, cela dit : « Chaque élément flex reçoit d'abord

200px de l'espace disponible. Ensuite, le reste de
l'espace disponible est réparti selon les unités de
proportion ». Actualisez et vous devriez voir une
différence dans la façon dont l'espace est réparti.

Le véritable intérêt de Flexbox apparaît dans sa

souplesse et sa réactivité — si vous redimensionnez la
fenêtre du navigateur ou ajoutez un autre
élément <article>, la mise en page continue de
fonctionner correctement.
flex : forme abrégée vs forme longue

flex est une forme abrégée de propriété qui peut servir à

définir trois valeurs différentes :

 Une valeur de proportion sans unité, vue ci-dessus.

Elle peut être précisée seule avec la forme longue de
la propriété flex-grow ;
 Une deuxième valeur de proportion sans unité, flex-
shrink, intervenant quand les éléments flex débordent

11
2
 du conteneur. Elle indique la quantité de dépassement
à retirer de l'extension de chacun des éléments flex
pour les empêcher de déborder du conteneur. Il s'agit
d'une fonctionnalité avancée de Flexbox — nous n'en
parlerons plus dans cet article ;
 Une valeur de taille minimale, vue ci-dessus. Elle
peut aussi être précisée seule avec la forme longue
de la propriété flex-basis.

Nous vous déconseillons d'utiliser les propriétés flex

sous leur forme longue, sans autre alternative possible
(par exemple, pour annuler quelque chose déjà défini).
Elles représentent du code supplémentaire et peuvent être
quelque peu déroutantes.
Alignement horizontal et vertical

Vous pouvez également utiliser les fonctionnalités de

Flexbox pour aligner les éléments flex le long de l'axe
principal ou croisé. Voyons cela avec un nouvel exemple
— [Link] (voir aussi en direct). Nous allons le
transformer facilement en une barre souple de boutons.
Actuellement, nous avons une barre de menu horizontale
avec quelques boutons tassés dans l'angle supérieur
gauche.

D'abord, faites une copie locale de cet exemple.

Ensuite, ajoutez ce qui suit à la fin de la CSS de

l'exemple :
CSSCopy to Clipboard
div {
display: flex;
align-items: center;
justify-content: space-around;
}

11
3
Actualisez la page et vous verrez que les boutons sont
maintenant bien centrés, horizontalement et
verticalement. Cette transformation a été opérée grâce à
deux nouvelles propriétés.

align-items fixe là où les éléments flex sont placés sur

l'axe perpendiculaire, dit aussi croisé (cross axis).

 Par défaut, la valeur est stretch, qui étire tous les

éléments flex de manière à emplir le conteneur parent
le long de l'axe croisé. Si le parent ne possède pas
de dimension définie dans la direction de l'axe
croisé, alors tous les éléments flex auront la
dimension du plus étiré des éléments. C'est pour
cette raison que, dans notre premier exemple, les
colonnes ont toutes la même hauteur par défaut.
 Avec la valeur center utilisée dans le code ci-
dessus, les éléments gardent leur dimension
intrinsèque, tout en étant centrés sur l'axe croisé.
C'est la raison pour laquelle, dans l'exemple actuel,
les boutons sont centrés verticalement.
 Il y a également des valeurs comme flex-
start et flex-end qui alignent respectivement tous
les éléments au début ou à la fin de l'axe croisé.
Voyez align-items pour tous les détails.

Vous pouvez prendre le pas sur le comportement de align-

items pour un élément flex donné en lui appliquant la
propriété align-self. Par exemple, ajoutez ce qui suit
aux CSS :
CSSCopy to Clipboard
button:first-child {
align-self: flex-end;
}

Voyez l'effet obtenu, puis supprimez ensuite la règle.

justify-content fixe où les éléments flex sont placés sur

l'axe principal.

11
4
  La valeur par défaut est flex-start : tous les
éléments sont disposés vers l'origine de l'axe
principal.
 Vous utiliserez flex-end pour les disposer vers la
fin.
 center est aussi une valeur possible pour justify-
content. Avec elle, les éléments flex sont placés
vers le centre de l'axe principal.
 La valeur space-around, utilisée plus haut, est
pratique — elle distribue régulièrement tous les
éléments le long de l'axe principal, en laissant
autant d'espace à chaque extrémité qu'entre chacun.
 Une autre valeur, space-between, est semblable
à space-around, mais elle ne laisse pas d'espace aux
extrémités.

N'hésitez pas à jouer avec ces valeurs pour visualiser

leur fonctionnement avant de poursuivre.
Ordonner les éléments flex

Flexbox dispose aussi d'une fonctionnalité pour modifier

l'ordre d'affichage des éléments flex, sans en modifier
l'ordre dans la source. C'est une chose impossible à
réaliser avec les méthodes classiques de mise en page.

Le code pour ce faire est simple — ajoutez la règle CSS

suivante dans l'exemple de code de la barre de boutons :
CSSCopy to Clipboard
button:first-child {
order: 1;
}

Actualisez, et vous pouvez voir que le bouton « Smile » a

été déplacé en fin de l'axe principal. Voyons en détail
comment cela fonctionne :

 Par défaut, tous les éléments flex possèdent une

valeur order égale à 0 ;
 Les éléments flex avec des valeurs order plus élevées
apparaîtront plus tard dans l'ordre d'affichage que
ceux avec des valeurs plus faibles ;
 Les éléments flex avec les mêmes valeurs
pour order sont affichés dans l'ordre de la source.
Ainsi, si vous avez 4 éléments avec des
valeurs order de 2, 1, 1 et 0, leur ordre d'affichage
sera 4e, 2e, 3e et 1er ;

11
5
  Le troisième élément suit le deuxième, car il a la
même valeur pour order et qu'il est placé après dans
le code source.

Vous pouvez donner des valeurs négatives à order pour

faire en sorte que ces éléments soient affichés avant les
éléments d'ordre 0. Par exemple, vous pouvez faire
apparaître le bouton « Blush » en tête de l'axe principal
avec la règle suivante :
CSSCopy to Clipboard
button:last-child {
order: -1;
}
Boîtes flex imbriquées

Il est possible de créer des mises en page joliment

complexes avec Flexbox. Il est parfaitement loisible de
déclarer un élément flex en tant que conteneur flex, de
sorte que ses enfants sont également disposés en tant que
boîtes modulables. Regardez [Link] (à voir
en direct également).

Le HTML pour cela est vraiment simple. Voici un

élément <section> contenant trois éléments <article>. Le
troisième élément <article> contient trois
éléments <div>, et le premier élément <div> contient cinq
éléments <button> :
section - article
article
article - div - button
div button
div button
button

11
6
 button

Regardez le code utilisé pour cette disposition.

Primo, nous déterminons que les enfants de

l'élément <section> seront des boîtes flexibles.
CSSCopy to Clipboard
section {
display: flex;
}

Secundo, nous définissons des valeurs flex pour les

éléments <article> eux-mêmes. Remarquez en particulier
ici la deuxième règle — nous paramétrons le troisième
élément <article> pour que ses enfants soient eux-mêmes
disposés en tant qu'éléments flex, mais cette fois-ci en
colonne.
CSSCopy to Clipboard
article {
flex: 1 200px;
}

article:nth-of-type(3) {
flex: 3 200px;
display: flex;
flex-flow: column;
}

Tertio, nous sélectionnons le premier élément <div> et

lui assignons la valeur flex: 1 100px; pour qu'il ait
effectivement une hauteur minimale de 100px. Ensuite,
nous indiquons que ses enfants (les éléments <button>)
doivent être disposés en tant qu'éléments flex dans une
ligne enveloppante, centrés dans l'espace disponible
comme dans l'exemple des boutons vu plus haut.
CSSCopy to Clipboard
article:nth-of-type(3) div:first-child {
flex: 1 100px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}

Enfin, nous définissons un dimensionnement des boutons,

et plus précisément nous leur donnons une valeur flex

11
7
de 1 auto. L'effet obtenu est très intéressant ; vous
l'observerez en modifiant la largeur de la fenêtre du
navigateur. Les boutons prennent autant d'espace qu'il
leur est permis et sont, si possible, disposés sur la
même ligne ; sinon ils « descendent » pour créer de
nouvelles lignes.
CSSCopy to Clipboard
button {
flex: 1 auto;
margin: 5px;
font-size: 18px;
line-height: 1.5;
}

11
8
CHAPITRE 7 : Mise en forme avancée avec CSS
7.1. : Transitions CSS : transition de propriétés,
durée, retard, fonctions de temporisation

Les transitions CSS vous permettent de modifier les

valeurs des propriétés en douceur, sur une durée donnée.

Dans ce chapitre, vous découvrirez les propriétés

suivantes :

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function
Prise en charge des transitions par le navigateur

Les nombres dans le tableau spécifient la première

version du navigateur qui prend entièrement en charge la
propriété.

Comment utiliser les transitions CSS ?

Pour créer un effet de transition, vous devez spécifier

deux choses :

 la propriété CSS à laquelle vous souhaitez ajouter un

effet
 la durée de l'effet

Remarque : Si la partie durée n'est pas spécifiée, la

transition n'aura aucun effet, car la valeur par défaut
est 0.

11
9
L'exemple suivant montre un élément <div> rouge de 100 px
* 100 px. L'élément <div> a également spécifié un effet
de transition pour la propriété width, d'une durée de 2
secondes :
Exemple
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

L'effet de transition commencera lorsque la propriété CSS

spécifiée (largeur) changera de valeur.

Maintenant, spécifions une nouvelle valeur pour la

propriété width lorsqu'un utilisateur passe la souris sur
l'élément <div> :
Exemple
div:hover {
width: 300px;
}
Modifier plusieurs valeurs de propriété

L'exemple suivant ajoute un effet de transition pour les

propriétés width et height, d'une durée de 2 secondes
pour la largeur et de 4 secondes pour la hauteur :
Exemple
div {
transition: width 2s, height 4s;
}
Spécifier la courbe de vitesse de la transition

La transition-timing-functionpropriété spécifie la courbe

de vitesse de l'effet de transition.

La propriété transition-timing-function peut avoir les

valeurs suivantes :

 ease- spécifie un effet de transition avec un

démarrage lent, puis rapide, puis une fin lente
(c'est la valeur par défaut)

12
0
  linear- spécifie un effet de transition avec la même
vitesse du début à la fin
 ease-in- spécifie un effet de transition avec un
démarrage lent
 ease-out- spécifie un effet de transition avec une
fin lente
 ease-in-out- spécifie un effet de transition avec un
début et une fin lents
 cubic-bezier(n,n,n,n)- vous permet de définir vos
propres valeurs dans une fonction cubique-bézier

L'exemple suivant montre quelques-unes des différentes

courbes de vitesse pouvant être utilisées :
Exemple
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Retarder l'effet de transition

La transition-Delay propriété spécifie un délai (en

secondes) pour l'effet de transition.

L'exemple suivant présente un délai d'une seconde avant

le démarrage :
Exemple
div {
transition-delay: 1s;
}
Transition + Transformation

L'exemple suivant ajoute un effet de transition à la

transformation :
Exemple
div {
transition: width 2s, height 2s, transform 2s;
}

12
1
7.2. : Animations CSS : définition de keyframes, durée,
retard, itération, fonctions d'accélération

CSS permet d'animer des éléments HTML sans utiliser

JavaScript ! Dans ce chapitre, vous découvrirez les
propriétés suivantes :

 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 animation
Prise en charge des animations par le navigateur

Les nombres dans le tableau spécifient la première

version du navigateur qui prend entièrement en charge la
propriété.

Que sont les animations CSS ?

Une animation permet à un élément de passer

progressivement d'un style à un autre.

Vous pouvez modifier autant de propriétés CSS que vous le

souhaitez, autant de fois que vous le souhaitez.

12
2
Pour utiliser l'animation CSS, vous devez d'abord
spécifier quelques images clés pour l'animation.

Les images clés contiennent les styles que l'élément aura

à certains moments.

La règle @keyframes

Lorsque vous spécifiez des styles CSS dans

la @keyframes règle, l'animation passera progressivement
du style actuel au nouveau style à certains moments.

Pour faire fonctionner une animation, vous devez lier

l'animation à un élément.

L'exemple suivant lie l'animation « exemple » à l'élément

<div>. L'animation durera 4 secondes et changera
progressivement la couleur d'arrière-plan de l'élément
<div> de "rouge" à "jaune" :
Exemple
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Essayez-le vous-même »

Remarque : L’animation-duration propriété définit la

durée d'exécution d'une animation. Si l’animation-
duration propriété n'est pas spécifiée, aucune animation
ne se produira car la valeur par défaut est 0s (0
seconde).

12
3
Dans l'exemple ci-dessus nous avons précisé quand le
style changera en utilisant les mots-clés "from" et "to"
(qui représentent 0% (début) et 100% (terminé)).

Il est également possible d'utiliser un pourcentage. En

utilisant le pourcentage, vous pouvez ajouter autant de
changements de style que vous le souhaitez.

L'exemple suivant modifiera la couleur d'arrière-plan de

l'élément <div> lorsque l'animation est terminée à 25 %,
à 50 % et à nouveau lorsque l'animation est terminée à
100 % :
Exemple
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Essayez-le vous-même »

L'exemple suivant modifiera à la fois la couleur

d'arrière-plan et la position de l'élément <div> lorsque
l'animation est terminée à 25 %, à 50 % et à nouveau
lorsque l'animation est terminée à 100 % :
Exemple
/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

12
4
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Retarder une animation

L’nimation-delay propriété spécifie un délai pour le

début d'une animation.

L'exemple suivant présente un délai de 2 secondes avant

le démarrage de l'animation :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Définir le nombre de fois qu'une animation doit
s'exécuter

L’animation-iteration-countpropriété spécifie le nombre

de fois qu'une animation doit être exécutée.

L'exemple suivant exécutera l'animation 3 fois avant

qu'elle ne s'arrête :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

12
5
L'exemple suivant utilise la valeur « infini » pour que
l'animation continue indéfiniment :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Exécuter l'animation dans le sens inverse ou dans des
cycles alternatifs

L’animation-direction propriété spécifie si une animation

doit être jouée en avant, en arrière ou en cycles
alternés.

La propriété animation-direction peut avoir les valeurs

suivantes :

 normal- L'animation est jouée normalement (avants).

C'est par défaut
 reverse- L'animation est jouée en sens inverse (en
arrière)
 alternate - L'animation est jouée d'abord en avant,
puis en arrière
 alternate-reverse- L'animation est jouée d'abord à
l'envers, puis en avant

L'exemple suivant exécutera l'animation dans le sens

inverse (en arrière) :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

12
6
L'exemple suivant utilise la valeur « alternate » pour
que l'animation s'exécute d'abord vers l'avant, puis vers
l'arrière :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}

L'exemple suivant utilise la valeur "alternate-reverse"

pour que l'animation s'exécute d'abord en arrière, puis
en avant :
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Spécifier la courbe de vitesse de l'animation

L’animation-timing-function propriété spécifie la courbe

de vitesse de l'animation.

La propriété animation-timing-function peut avoir les

valeurs suivantes :

 ease- Spécifie une animation avec un démarrage lent,

puis rapide, puis une fin lente (c'est la valeur par
défaut)
 linear- Spécifie une animation avec la même vitesse
du début à la fin
 ease-in- Spécifie une animation avec un démarrage
lent

12
7
  ease-out- Spécifie une animation avec une fin lente
 ease-in-out- Spécifie une animation avec un début et
une fin lents
 cubic-bezier(n,n,n,n)- Vous permet de définir vos
propres valeurs dans une fonction cubique-bézier

L'exemple suivant montre quelques-unes des différentes

courbes de vitesse pouvant être utilisées :

Exemple
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Spécifier le mode de remplissage pour une animation

Les animations CSS n'affectent pas un élément avant la

lecture de la première image clé ou après la lecture de
la dernière image clé. La propriété animation-fill-mode
peut remplacer ce comportement.

L’animation-fill-mode propriété spécifie un style pour

l'élément cible lorsque l'animation n'est pas en cours de
lecture (avant son démarrage, après sa fin, ou les deux).

La propriété animation-fill-mode peut avoir les valeurs

suivantes :

 none- Valeur par défaut. L'animation n'appliquera

aucun style à l'élément avant ou après son exécution
 forwards- L'élément conservera les valeurs de style
définies par la dernière image clé (dépend de la
direction de l'animation et du nombre d'itérations
d'animation)
7.3. : backwards-

L'élément obtiendra les valeurs de style définies par la

première image clé (dépend de la direction de
l'animation) et les conservera pendant la période de
retard de l'animation.

12
8
  both- L'animation suivra les règles pour l'avant et
l'arrière, étendant les propriétés de l'animation
dans les deux sens

L'exemple suivant permet à l'élément <div> de conserver

les valeurs de style de la dernière image clé à la fin de
l'animation :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

L'exemple suivant permet à l'élément <div> d'obtenir les

valeurs de style définies par la première image clé avant
le début de l'animation (pendant la période de retard de
l'animation) :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}

L'exemple suivant permet à l'élément <div> d'obtenir les

valeurs de style définies par la première image clé avant
le début de l'animation et de conserver les valeurs de
style de la dernière image clé à la fin de l'animation :
Exemple
div {
width: 100px;
height: 100px;
background: red;
position: relative;

12
9
 animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

4.1. Effets spéciaux CSS : ombre, bord arrondi, dégradé,

filtre, clip-path, masquage, etc.

Les ombres

Les ombres font partie des nouveautés récentes proposées

par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS
pour ajouter des ombres dans une page !
Nous allons ici découvrir deux types d'ombres :
- les ombres des boîtes ;
- les ombres du texte.

box-shadow : les ombres des boîtes

La propriété box-shadow s'applique à tout le bloc et

prend quatre valeurs dans l'ordre suivant :

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.

Par exemple, pour une ombre noire de 6 pixels, sans

adoucissement, on écrira :
p{
box-shadow: 6px 6px 0px black;
}

Bordures arrondies

Les bordures arrondies, c'est un peu le Saint Graal

attendu par les webmasters depuis des millénaires (ou
presque). Depuis que CSS3 est arrivé, il est enfin
possible d'en créer facilement !

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

Code : CSS
p{
border-radius: 10px;
}

Avec le masquage CSS, vous créez un calque de masque à

placer sur un élément pour masquer partiellement ou
entièrement des parties de l'élément.
La propriété CSS mask-image

La propriété CSS mask-imagespécifie une image de calque

de masque.
L'image du calque de masque peut être une image PNG, une
image SVG, un dégradé CSS ou un élément <mask> SVG .

PARTIE 3 : VALIDATION PAGE et HEBERGEMENT

Pour assurer le même affichage sur différentes
plateformes, le W3C a développé un validateur du HTML.
Accessible via l'adresse : [Link] il
permet de valider la structure de votre page Web. L'outil
Validateur W3C Multipages permet de valider plusieurs
pages HTML d'un seul coup.
CHAPITRE 1 : Validation de page.

Le professionnalisme d'un Webmaster se montre dans la

qualité de ses sites Web. Le webdesign est le côté
optique d'une page et un code valide est le côté
technique, invisible pour les internautes, mais important
lors de l'optimisation des pages pour le référencement.

13
1
Par la validation des pages un Webmaster montre donc ses
qualités et sa qualification.

La validation des pages selon le standard du W3C

La validation se passe comme la correction d'orthographe

et vérifie si le code est conforme à la norme du W3C et
correspond ainsi à la programmation des divers
navigateurs. Seulement un code valide peut garantir que
les pages s'affichent correctement dans les divers
navigateurs, sous les divers systèmes d’exploitation.
Pour la validation de ses pages le Webmaster se sert d'un
validateur conforme à la norme.

Les avantages d'une validation

La validation ne garantit pas seulement que les pages

s'affichent correctement le jour de leur création mais
aussi dans les années à venir. Ne pas valider une page
signifie donc à négliger les internautes et les
entreprises pour lesquels un Webmaster travaille. Et,
cela signifie aussi à négliger l'optimisation des pages
pour le référencement.

La validation des feuilles de style

Il ne suffit toutefois pas à valider seulement un code

HTML ou xhtml. La programmation actuelle demande aussi la
validation des feuilles de style qui, finalement,
décident sur l'aspect optique de la page. Sous certaines
conditions, une seule ligne de code oublié peut détruire
la mise en page dans de milliers de navigateurs.

La validation et le head des documents Web

Une validation se base toutefois sur le fait que le head

des documents Web soit correctement rédigé et que le
Webmaster emploi la définition de type de document (DTD)
correspondent. Dans le cas idéal, il s'agit toujours du
document "strict" dont seulement ces balises sont
définies qui sont à 100% compatibles avec tous les
navigateurs du monde.

13
2
Il est évident qu'un Webmaster puisse fournir (et écrire)
ses propres DTD, ce qui est prévu pour les sites en xml.
Tant que les pages doivent être affichés dans les
navigateurs standard cela pose, avec certitude, de
problèmes de compatibilité et détruit les efforts de
l'optimisation.

CHAPITRE 2 : Principes de l'hébergement de sites

internet.
La création de sites web ne se résume pas à former vos
pages web pour ensuite les activer sur le net. Tout site
contient un volume de données (textes, photos, vidéo)
auquel les internautes doivent avoir accès.

13
3
Ces données doivent donc être forcément stockées quelque
part lorsqu’elles ne sont pas utilisées. C’est là
qu’intervient l’hébergement de sites : c’est cette entité
qui stocke les données en question. Un hébergeur est une
société dotée d’un système de serveurs constamment actifs
et accessibles.

L’hébergeur doit donc garantir une alimentation

permanente de ses serveurs et une mise à jour de la
sécurité sérieuse. Le type d’hébergement peut varier en
fonction du type de site à héberger, mais aussi de sa
capacité.

CHAPITRE 3 : Les types d’hébergement de sites

Il existe deux principales catégories d’hébergement de
sites.

La première et la plus utilisée est le système mutualisé

qui reçoit plusieurs sites sur un même serveur. Ce

13
4
système est économique pour les propriétaires de site. Il
est dit mutualisé au niveau des tarifs, puisque de
nombreux sites y sont hébergés. Cependant, les capacités
du site ne seront pas vraiment optimales à cause du grand
nombre d’abonnés à un serveur commun. Il sera notamment
plutôt lent à l’accès aux données, et il ne peut pas
recevoir une grande affluence de visiteurs à la fois.

D’un autre côté, il est possible d’opter pour un

hébergement dédié qui octroie un serveur entier pour
votre site. Il est clair que ce type de système aura un
surcoût en raison de son exclusivité. La contrepartie de
ce supplément sera la possibilité de stocker un volume
élevé de données, avec un haut débit en matière de bande
passante. L’accès à votre site sera donc plus rapide. En
outre, le nombre de visiteur en simultané peut être
décuplé. En résumé, l’hébergement dédié est destiné aux
sites aux sites de grande envergure à forte consommation
en ressources.

CHAPITRE 4 : Etape d’hébergement d’un site.

Étape 1 : Enregistrement d'un nom de domaine

13
5
Enregistrer un nom de domaine est facile et il n'y a pas
de configuration nécessaire, cependant vous devez bien
penser au choix du nom de domaine avant de l'enregistrer.

Étape 2 : Inscrivez-vous avec un fournisseur

d'hébergement web

Après votre inscription, vous recevrez par email quelques

informations importantes qui vous permettront de vous
connecter à votre compte et mettre rapidement votre site
en ligne :

 L'adresse IP du serveur et / ou le lien pour vous

connecter au panneau de contrôle.
 Votre compte de connexion (nom d'utilisateur / mot de
passe) à utiliser avec le panneau de contrôle
(souvent il s'agit de Cpanel).
 L'adresse de deux noms de serveurs (DNS) à utiliser
avec votre nom de domaine.

Étape 3 : Télécharger votre site sur votre serveur.

Vous pouvez télécharger les fichiers html et graphiques
avec un gestionnaire de fichier fourni par
l'intermédiaire du panneau de contrôle (Cpanel) ou
d'utiliser un logiciel FTP gratuit comme Filezilla.

Étape 4 : Pointez votre domaine à votre hébergeur.

Maintenant que vous avez un nom de domaine et un compte
d'hébergement, vous avez besoin de les relier de façon
quand quelqu'un tape le nom dans un navigateur, qu’il
puisse accéder aux fichiers que vous avez téléchargés.

13
6
 BIBLIOGRAPHIE

1. Mathieu Nebra, Réussir son site web avec XHTML et CSS, Editions
Eyrolles, Paris, 2010.

2. Emily A. VanderVeer et Ed Tittel, HTML et Javascript pour les nuls,

Editions Broché, 2009.

3. Luc Van Lancker, HTML : Les bases du langage, Editions Broché,

2004.

4. Luc Van Lancker, HTML 4 - Maîtrisez le code source, Editions Broché,

2008.

5. Microsoft® Encarta® 2009 [DVD]. Microsoft Corporation, 2008.

13
7
 TABLES DES MATIERES
PLAN DU COURS................................................................................................ 2
PARTIE 0 : ENVIRONNEMENT DE DEVELOPPEMENT..................................................4
PARTIE 1 : CONCEPTS FONDAMENTAUX................................................................6
CHAPITRE 1 : INTRODUCTION À L’E-LEARNING.................................................................6
CHAPITRE 2 : INTRODUCTION À HTML..............................................................................8
2.1. : Historique et évolution de HTML..........................................................8
2.2. : Présentation du HTML..............................................................................9
2.3. : Le principe du Web................................................................................10
CHAPITRE 3 : STRUCTURE DE BASE D'UN DOCUMENT HTML.................................................11
CHAPITRE 4 : LES BALISES ET ÉLÉMENTS HTML..............................................................13
4.1. : Les balises.............................................................................................. 13
4.2. : Structure d'un document HTML..............................................................14
4.3. : Les balises structurantes de HTML5..................................................16
CHAPITRE 5 : LES BALISES DE TEXTE............................................................................19
5.1. : Les titres <h1> à <h6>.........................................................................19
5.2. : Les paragraphes <p>...............................................................................19
5.3. : Les styles de texte : <strong>, <em>, <u>, <s>, etc..................19
5.4. : Les citations <blockquote> et <q>....................................................20
CHAPITRE 6 : LES LISTES...........................................................................................22
6.1. : Les listes non-ordonnées <ul> et les éléments <li>....................22
6.2. : Les listes ordonnées <ol> et les éléments <li>............................22
6.3. : Les définitions <dl>, les termes <dt> et les définitions <dd>22
CHAPITRE 7 : LES LIENS HYPERTEXTES..........................................................................24
7.1. : Les balises <a> et les attributs href, target, etc...................24
7.2. : Les liens internes et externes..........................................................24
7.3. : Les ancres <a> et les liens de messagerie <a>..............................26
CHAPITRE 8 : LES IMAGES...........................................................................................30
8.1. : Les différents formats d'images.......................................................30
8.2. : La balise <img> et ses attributs src, alt....................................30
8.3. : L'optimisation des images pour le web............................................31
CHAPITRE 9 : LES TABLEAUX.......................................................................................34
9.1. : La structure d'un tableau avec les balises <table>, <tr>, <td>,
<th>. 34
9.2. : Les attributs de tableau : rowspan, colspan, etc.......................36
9.3. : Les légendes <caption> et les en-têtes <thead>, <tbody>,
<tfoot> 39
CHAPITRE 10 : LES FORMULAIRES....................................................................................42
10.1. : Les balises <form>, <input>, <textarea>, <select>, <button>42
10.2. : Les types d'entrées : texte, email, mot de passe, case à
cocher, boutons radio, etc................................................................................42
10.3. : Les attributs des formulaires : method, action, required,
disabled, etc........................................................................................................ 51
10.4. : Les champs de saisie avancés : date, heure, couleur, range,
etc. 53
10.5. : Les éléments de formulaire personnalisés : <datalist>,
<meter>, <progress>, etc...................................................................................53
10.6. : Les techniques de validation de formulaire en HTML5...............56

13
8
 CHAPITRE 11 : LES MÉDIAS...........................................................................................58
11.1. : Les balises <audio> et <video>......................................................58
11.2. : Les attributs et les formats de média.........................................58
11.3. : L'insertion de médias dans une page HTML...................................60
CHAPITRE 12 : LES CADRES..........................................................................................62
12.1. : La balise <iframe> et son utilisation pour intégrer du
contenu externe.................................................................................................... 62
12.2. : Les attributs de l'iframe : src, width, height, etc..............64
12.3. : Les bonnes pratiques d'utilisation des iframes........................64
PARTIE 2 : MISE EN FORME...........................................................................67
CHAPITRE 1 : INTRODUCTION À CSS..............................................................................67
1.1. : Définition de CSS.................................................................................67
1.2. : Rôle de CSS dans la conception web..................................................67
1.3. : Historique et évolution de CSS.........................................................68
CHAPITRE 2 : INTÉGRATION DE CSS DANS HTML............................................................69
2.1. : Différentes méthodes d'intégration de CSS : balise <style>,
lien externe, style en ligne............................................................................69
2.2. : Syntaxe de base des règles CSS : sélecteurs, propriétés,
valeurs................................................................................................................... 71
CHAPITRE 3 : SÉLECTEURS CSS...................................................................................72
3.1. : Sélecteurs de classe.............................................................................72
3.2. : Sélecteurs d'identifiant.....................................................................72
CHAPITRE 4 : PROPRIÉTÉS DE STYLE CSS......................................................................75
4.1. : Propriétés de texte : couleur, police, taille, alignement,
décoration, espacement, etc..............................................................................75
4.2. : Propriétés de fond : couleur, image, répétition, position, etc.
80
4.3. : Propriétés de bordure : largeur, style, couleur, rayon de
bordure, etc.......................................................................................................... 83
4.4. : Propriétés de mise en page : marges, bordures, rembourrage,
dimensions, positionnement, etc......................................................................84
CHAPITRE 5 : MODÈLE DE BOÎTE CSS............................................................................85
5.1. : Concept du modèle de boîte : contenu, bordure, marge,
rembourrage............................................................................................................. 85
5.2. : Box-sizing : border-box vs content-box..........................................86
5.3. : Techniques de mise en page avec le modèle de boîte....................87
CHAPITRE 6 : POSITIONNEMENT CSS..............................................................................91
6.1. : Positionnement statique, relatif, absolu, fixe............................91
6.2. : Propriétés de positionnement : top, bottom, left, right, z-
index 92
6.3. : Techniques de positionnement avancées : flexbox, grille CSS. . .97
CHAPITRE 7 : MISE EN FORME AVANCÉE AVEC CSS.........................................................111
7.1. : Transitions CSS : transition de propriétés, durée, retard,
fonctions de temporisation..............................................................................111
7.2. : Animations CSS : définition de keyframes, durée, retard,
itération, fonctions d'accélération..............................................................113
7.3. : backwards-.............................................................................................. 120
PARTIE 3 : VALIDATION PAGE ET HEBERGEMENT...............................................123
CHAPITRE 1 : VALIDATION DE PAGE............................................................................123
CHAPITRE 2 : PRINCIPES DE L'HÉBERGEMENT DE SITES INTERNET...................................125

13
9
 CHAPITRE 3 : LES TYPES D’HÉBERGEMENT DE SITES.......................................................126
CHAPITRE 4 : ETAPE D’HÉBERGEMENT D’UN SITE..........................................................127
BIBLIOGRAPHIE............................................................................................. 128
TABLES DES MATIERES...................................................................................129
ANNEXES...................................................................................................... 131

14
0
 ANNEXES
Tableau des couleurs - H.T.M.L.

Vous pouvez utiliser le nom de la couleur en lieu et place des valeurs

hexadécimales bien fastidieuses à utiliser : COLOR="bisque" ou
COLOR="#FFE4C4", sont équivalents.

Color Red Green Blue A voir

Aliceblue F0 F8 FF

Antiquewhite FA EB D7

Aqua 00 FF FF

Aquamarine 7F FF D4

Azure F0 FF FF

Beige F5 F5 DC

Bisque FF E4 C4

Black 00 00 00

Blanchedalmond FF EB CD

Blue 00 00 FF

Blueviolet 8A 2B E2

Brown A5 2A 2A

Burlywood DE B8 87

Cadetblue 5F 9E A0

Chartreuse 7F FF 00

Chocolate D2 69 1E

Coral FF 7F 50

Cornflowerblue 64 95 ED

Cornsilk FF F8 DC

Crimson DC 14 3C

Cyan 00 FF FF

Darkblue 00 00 8B

Darkcyan 00 8B 8B

14
1
Darkgoldenrod B8 86 0B

Darkgray A9 A9 A9

Darkgreen 00 64 00

Darkkhaki BD B7 6B

Darkmagenta 8B 00 8B

Darkolivegreen 55 6B 2F

Darkorange FF 8C 00

Darkorchid 99 32 CC

Darkred 8B 00 00

Darksalmon E9 96 7A

Darkseagreen 8F BC 8F

Darkslateblue 48 3D 8B

Darkslategray 2F 4F 4F

Darkturquoise 00 CE D1

Darkviolet 94 00 D3

Deeppink FF 14 93

Deepskyblue 00 BF FF

Dimgray 69 69 69

Dodgerblue 1E 90 FF

Firebrick B2 22 22

Floralwhite FF FA F0

Forestgreen 22 8B 22

Fuchsia FF 00 FF

Gainsboro DC DC DC

Ghostwhite F8 F8 FF

Gold FF D7 00

Goldenrod DA A5 20

14
2
Gray 80 80 80

Green 00 80 00

Greenyellow AD FF 2F

Honeydew F0 FF F0

Hotpink FF 69 B4

Indianred CD 5C 5C

Indigo 4B 00 82

Ivory FF FF F0

Khaki F0 E6 8C

Lavender E6 E6 FA

Lavenderblush FF F0 F5

Lawngreen 7C FC 00

Lightpink FF B6 C1

Lightsalmon FF A0 7A

Lightseagreen 20 B2 AA

Lightskyblue 87 CE FA

Lightslategray 77 88 99

Lightsteelblue B0 C4 DE

Lightyellow FF FF E0

Lime 00 FF 00

Limegreen 32 CD 32

Linen FA F0 E6

Magenta FF 00 FF

Maroon 80 00 00

Mediumaquamarine 66 CD AA

Mediumblue 00 00 CD

14
3
Mediumorchid BA 55 D3

Mediumpurple 93 70 DB

Mediumseagreen 3C B3 71

Mediumslateblue 7B 68 EE

Mediumspringgreen 00 FA 9A

Mediumturquoise 48 D1 CC

Mediumvioletred C7 15 85

Midnightblue 19 19 70

Mintcream F5 FF FA

Mistyrose FF E4 E1

Moccasin FF E4 B5

Navajowhite FF DE AD

Navy 00 00 80

Oldlace FD F5 E6

Olive 80 80 00

Olivedrab 6B 8E 23

Orange FF A5 00

Orangered FF A5 00

Orchid DA 70 D6

Palegoldenrod EE E8 AA

Palegreen 98 FB 98

Paleturquoise AF EE EE

Palevioletred DB 70 93

Papayawhip FF EF D5

Peachpuff FF DA B9

14
4
Peru CD 85 3F

Pink FF C0 CB

Plum DD A0 DD

Powderblue B0 E0 E6

Purple 80 00 80

Red FF 00 00

Rosybrown BC 8F 8F

Royalblue 41 69 E1

Saddlebrown 8B 45 13

Salmon FA 80 72

Sandybrown F4 A4 60

Seagreen 2E 8B 57

Seashell FF F5 EE

Sienna A0 52 2D

Silver C0 C0 C0

Skyblue 87 CE EB

Slateblue 6A 5A CD

Slategray 70 80 90

Snow FF FA FA

Springgreen 00 FF 7F

Steelblue 46 82 B4

Tan D2 B4 8C

Teal 00 80 80

Thistle D8 BF D8

Tomato FF 63 47

Turquoise 40 E0 D0

14
5
 Violet EE 82 EE

Wheat F5 DE B3

White FF FF FF

Whitesmoke F5 F5 F5

Yellow FF FF 00

Yellowgreen 9A CD 32

Toutes les balises HTML.

Balise HTML Description Fin Attribut

Numéro de version du langage

<!doctype> N
HTML utilisé.

14
6
<!-- --> Commentaire. N

<abbr> Abréviation. O

<acronym> Acronyme. O

URL sous forme textuel, sans

<address> utilisation de lien hypertexte O
(italique).

href="[Link] : Hyperlien vers une page Web.

href="[Link] : Hyperlien vers une adresse FTP.
href="telnet://..." : Hyperlien vers une adresse TelNet.
Création d'une ancre pour liens href="[Link] : Hyperlien vers l'e-mail de
<a> O nom@[Link].
hypertexte.
href="nomdefichier" : Hyperlien vers un fichier local, si le
fichier ne peut pas être affiché dans le navigateur, le
fichier sera téléchargé.

Insertion d'un applet Java.

<applet> O
(déconseillé)

Permet de définir une zone

<area> N
cliquable dans la page.

<b> Gras. O

Définition de l'URL de la page

<base> HTML exploité en cas d'erreur N
de transmission.

Définit la taille par défaut des

<basefont> N size=x : La taille par défaut des caractères sera de x.
caractères. (déconseillé)

Changement de direction
<bdo> O
impossible.

Insertion d'un fichier audio au

<bgsound> format WAV ou MID (I.E. N src="fichierson" : emplacement et nom du fichier son.
seulement).

La taille de la police est

<big> O
augmenté de 1 point.

Clignotement du texte (N.N.

<blink> O
seulement).

<blockquote> Petite marge à gauche. O

bgcolor="couleur" : Couleur qui sera utilisé pour l'arrière

plan. background="fichierimage" : Image d'arrière-plan
Encadre le corps d'un fichier
<body> O (BMP, JPG ou GIF). link="couleur" : Couleur des liens.
HTML. alink="couleur" : Couleur des liens déjà exploités.
vlink="couleur" : Couleur des liens lors du clic.

clear="left|right|all" : Le texte ou l'image suivante est décalé

<br> Saut de ligne. N vers le bas, jusqu'à ce qu'il n'y ait plus d'élément de
formatage à gauche|à droite|à gauche et à droite.

Bouton dans un formulaire (I.E.

<button> seulement). O

14
7
 align="left|center|right" : Alignement du titre à gauche|centré|
<caption> Titre de tableau. O
à droite.

<center> Centrage. (déconseillé) O

<cite> Citation (italique). O

<code> Code source. O

Définition d'une colonne d'un

<col> N
tableau (I.E. seulement).

Regroupement de
<colgroup> colonnes dans un tableau F
(I.E. seulement).

<commment> Commentaire (I.E. seulement). O

Définition d'un terme de

<dd> glossaire (retrait) (encadré par F
<dl>).

Information sur le document

<del> O
HTML.

Texte sous forme logique.

<dfn> O
(déconseillé)

<dir> Liste à plusieurs dimensions. O

Implémente une feuille de style id="[nom]" : Identifiant.

<div> O
par bloc entier. class="[nom]" : Classe.

Structure d'un glossaire

<dl> (encadre la balise <dt> et la O
balise <dd>).

Elément d'un glossaire (encadré

<dt> F
par la balise <dl>).

<em> Emphase (italique). O

Insertion d'application
<embed> N
multimédia.

Regroupement de zone dans

<fieldset> O
les formulaires.

size=x : Caractère de taille x (x compris entre 1 et 7).

<font> Définition du texte. (déconseillé) O size=+x|-x : Augmenter|Réduire la taille de caractère de x.
color="couleur" : définit la couleur du texte.

Insertion d'un formulaire

(encadre les balises <input>, action="..." : Pour l'envoi par e-mail, remplacer ... par l'e-mail.
<form> O
<textarea>, <select> et method="..." : Pour l'envoi par e-mail, remplacer... par "post".
<option>).

Insertion d'une nouvelle frame

<frame> 'encadré par la balise N
<frameset>.

Fichier d'index pour les frames,

<frameset> remplace la balise <body> O
(encadre la balise <frame>).

14
8
<h1> Titre de niveau 1. O align="center|left|right" : Titre centré|aligné à gauche|aligné à

droite.

align="center|left|right" : Titre centré|aligné à gauche|aligné à

<h2> Titre de niveau 2. O
droite.

align="center|left|right" : Titre centré|aligné à gauche|aligné à

<h3> Titre de niveau 3. O
droite.

align="center|left|right" : Titre centré|aligné à gauche|aligné à

<h4> Titre de niveau 4. O
droite.

align="center|left|right" : Titre centré|aligné à gauche|aligné à

<h5> Titre de niveau 5. O
droite.

align="center|left|right" : Titre centré|aligné à gauche|aligné à

<h6> Titre de niveau 6. O
droite.

En-tête d'un fichier HTML

<head> (encadre les balises <title>, O
<meta> et <base>).

align="center|left|right" : Barre centré|aligné à gauche|

aligné à droite. width=x%|y : Trait large de x pourcent|y
<hr> Barre horizontale N pixels. size=x : Hauteur du trait en pixels.
color="couleur" : Couleur de la barre (I.E. seulement).
noshade : Pas d'affichage ombré.

Obligatoire au début et à la fin

<html> O
du fichier HTML.

<i> Italique. O

<iframe> Cadre local (I.E. seulement). O

src="nomdefichier" : emplacement et nom du fichier image

(format bmp, jpg, gif). align="top|middle|bottom|left|right" :
aligner l'image en haut|au milieu|en bas|à gauche|à droite.
<img> Insertion d'une image. N width=x : largeur de x pixels. height=y : hauteur de y
pixels. border=x : bordure de x pixels. alt="texte" : affiche
ce texte lorsque l'image n'est pas affichable ou lorsque la
souris reste pointée dessus.

type="submit|reset|radio|checkbox : définit le type de

l'élément : bouton "ENVOYER"|bouton "EFFACER"|case
d'option|case à cocher. Pour tous ces types, l'attribut value
est obligatoire. Pour radio et checkbox, l'attribut name est
obligatoire.
value="texte" : texte à afficher dans la case ou la zone de
Nouvelle élément dans un texte.
<input> N name="NomDeLélément" : nom donné à l'élément, chaque
formulaire.
radio ou checkbox appartenant au même groupe doivent
possédé le même name, mais un value différent. size=x :
longueur x d'un champs de saisie d'une ligne, (pour le
champ de saisie, seuls les attributs size, name et maxlenght
sont demandés. maxlenght=y : longueur maximal d'un
champ de saisie d'une ligne.

Fournit des informations sur le

<ins> O
document.

14
9
 Définition d'un fichier de
<isindex> recherche (script CGI). N
(déconseillé)

<kbd> Texte type "machine à écrire". O

Extension de la balise <form>

<label> (I.E. seulement). O

Définition des couches (N.N.

<layer> seulement). O

<legend> Légende de tableau. O

Elément d'une liste (encadré par

<li> O
la balise <ul> ou la balise <ol>).

<link> Lien indépendant du média. N

<map> Définit une zone cliquable. O

<marquee> Texte défilant (I.E. seulement). O

Liste de type menu.

<menu> O
(déconseillé)

name="description|keywords|author" : la description|les
mots-clés|l'auteur seront indiqués dans l'attribut content.
http-equiv="refresh" : provoque le chargement de la page
<meta> Information sur la page HTML. N indiqué dans l'attribut url après x secondes indiqués
dans l'attribut content. Si url est omis, la même page est
rechargée. content="nombre ou texte" : voir ci-dessus.
url="fichier" : voir l'attribut http-equiv.

<nextid> Indique le document suivant. N

Pas de passage automatique à

<nobr> la ligne sauf avec la balise O
<wbr>.

Encadre les éléments qui seront

interprété si les applications
<noembed> O
multimédia ne sont pas
acceptés par le navigateur.

Encadre les éléments qui seront

<noframes> interprétés si les frames ne sont O
pas accepté par la navigateur.

Encadre les éléments qui seront

<noscript> interprété si les scripts ne sont O
pas acceptés par le navigateur.

Insertion d'objet (multimédia,

<object> O
applet Java...).

Liste numérotée (encadre la

<ol> O
balise <li>).

Nouvelle entrée dans une liste

<option> N
de choix.

15
0
 Début d'un paragraphe, saute 2 align="center|left|right" : Paragraphe centré|aligné à gauche|
<p> F
lignes. aligné à droite.

<param> Paramètre d'un objet inséré. O

Texte pré-formaté avec une

<pre> O
police non-proportionnelle.

<q> Citation longue. O

<s> Texte barré. O

<samp> Exemple en italique. O

<script> Insertion d'un script O language="javascript|vbscript" : Langage utilisé pour le

script.

Liste de choix (encadre la balise

<select> <option> et encadré par la O
balise <form>).

Réduit la taille des caractères

<small> O
de 1 point.

id="[nom]" : Identifiant.
<span> Implémente une feuille de style. O
class="[nom]" : Classe.

<strike> Texte barré. (déconseillé) O

<strong> Texte en gras. O

Feuille de style (le plus souvent

<style> dans entre les balises <head> O
et </head>).

<sub> Texte en indice. O

<sup> Texte en exposant. O

cols=x : Tableau composé de x colonnes.

width=x%|y : Tableau large de x pourcent|de y pixels.
<table> Tableau. O border=x : Taille de la bordure en pixels.
cellpadding=x : Espacement entre bordure et texte.
cellspacing=x : Espacement entre les cellules.

<tbody> Regroupement de tableaux. F

width="x%|y" : Cellule large de x pourcent|y pixels.

align="center|left|right" : Le texte compris dans les
Nouvelle cellule dans un tableau cellules est centré|aligné à gauche|aligné à droite.
<td> F
(encadré par la balise <tr>). colspan=x : x cellules à fusionner horizontalement.
rowspan=x : x cellules à fusionner verticalement.
bgcolor="couleur" : Couleur d'arrière-plan de la cellule.

name="nom" : Nom donné à la zone de texte.

Champ de saisie de plusieurs
<textarea> O rows=x : Zone de texte de largeur x. cols=x :
lignes.
Zone de texte de longueur maximale x.

<tfoot> Regroupement de tableaux. F

<th> Cellule d'en-tête d'un tableau. F

15
1
<thead> Regroupement de tableaux. O

Titre du document HTML (à

<title> O
insérer dans la balise <head>).

Nouvelle ligne d'un tableau height="x%|y" : Ligne large de x pourcent|y pixels.

<tr> F
(encadré par la balise <table>). bgcolor="couleur" : Couleur d'arrière-plan de la ligne.

Texte de type "machine à

<tt> O
écrire".

<u> Texte en souligné. (déconseillé) O

Liste non-numéroté (encadre la

<ul> O
balise <li>).

<var> Texte sous forme de variable. O

Désactive temporairement la
<wbr> N
balise <nobr>.

Texte sous forme d'exemple

<xmp> (italique). (obsolète) O

15
2