1

SOMMAIRE
Introduction
Partie I Les Bases en HTML et en CSS
Chapitre 1 : Premire Approche Thorique du HTML
et du CSS
Chapitre 2 : Les Bases en HTML
Chapitre 3 : Les Bases en CSS

Partie II Formater du Texte & Positionner des

Elments grce au CSS
Chapitre 4 : Les Proprits de Type Font-
Chapitre 5 : Les Proprits de Type Text-
Chapitre 6 : Le Modle des Botes

Partie III Fonctionnalits Avances

Chapitre 7 : Gestion du Background (Le Fond)
Chapitre 8 : Intgrer des Images, de lAudio et de la
Vido grce au HTML5
Chapitre 9 : Les Tableaux
Chapitre 10 : Les Formulaires

Partie IV Aller plus Loin

Conclusion
2

INTRODUCTION
Prsentation du cours et de ses objectifs
Le but premier de ce cours est de vous apprendre pas pas coder
en HTML5 et en CSS3. Outre cela, je vais galement mappliquer
vous montrer la logique et les mcanismes derrire ces deux langages
afin que vous compreniez ce que vous fates et que vous deveniez
vite autonomes.
Ce cours est divis en trois parties, progressives :
Une premire partie avec un peu de thorie dans laquelle nous
poserons les bases pour un apprentissage solide ;
Une deuxime partie dans laquelle nous verrons comment
positionner les diffrents lments de notre site et comment
personnaliser nos textes ;
Une dernire partie o nous explorerons les fonctionnalits
avances du HTML5 et du CSS3 (insertion de vidos,
formulaires, responsive design, etc.).
Au fil de ce cours, nous aborderons galement dautres langages
comme le XHTML ou le PhP lorsque cela justifi et afin que vous
ayez une comprhension globale de ce que vous fates.

A qui sadresse ce livre ?

Les langages HTML et CSS sont, comme nous allons le voir, la base
de tout projet de programmation informatique. Par extension, ce
cours sadresse tous, du plus parfait nophyte lexpert ayant
besoin dun rafraichissement.
Le HTML et le CSS sont des langages plutt simples matriser et
comprendre. Jai voulu dans ce livre vous apporter une approche
concrte et directe de ces langages. Ce cours offre une difficult
graduelle mais, en soi, il ny a jamais rien dinsurmontable.

En rsum, ce cours sadresse :

Aussi bien au nophyte qu la personne exprimente ;
A tous ceux qui veulent apprendre coder en HTML et en CSS

A propos de lauteur
Je suis Pierre Giraud, jai 24 ans au jour de publication de ce livre et
je suis passionn par lentreprenariat et lunivers de la technologie en
gnral. Voici mon parcours en quelques lignes.
Aprs un baccalaurat scientifique, je me dirige vers une classe
prparatoire conomique option scientifique. A la suite de cette
classe prparatoire, jintgre lEDHEC Lille.
Ds mon entre lEDHEC, je commence en dehors des cours me
familiariser et apprendre diffrents langages informatiques. Je
dbute par le HTML, puis le CSS, puis le PhP, le MySQL, le
JavaScript
Je cre galement trois start-ups, pour tester , durant mes deux
premires annes dcole : un e-commerce, un site de services, un
commerce dachat/revente. Je connais deux (petits) succs et un
chec relatif.
Lors de mon anne de csure (anne de stage), je saute dfinitivement
le pas et postule chez PrestaShop (distributeur de sa solution ecommerce Open Source). Je suis retenu et finit donc ma formation au
sein de dveloppeurs.
Je suis aujourdhui diplm dun double Master 2 Entreprenariat et de
Gestion et peut me targuer dtre un expert PrestaShop et dans le
domaine de le-commerce ainsi quun bon dveloppeur.

PARTIE I
LES BASES EN HTML ET EN CSS

CHAPITRE 1 : PREMIERE APPROCHE THEORIQUE

DU HTML ET DU CSS
1.1 Pourquoi apprendre les langages HTML et CSS ?
Si le monde de linformatique vous plat et que vous tes tent
dapprendre la programmation informatique, vous serez oblig de
passer par lapprentissage du HTML et du CSS et ceci pour deux
raisons.
Tout dabord, il faut savoir que le HTML et le CSS sont deux
vritables standards et nont donc, ce titre, pas de concurrent
comme cela peut tre le cas pour le langage PhP par exemple
(concurrenc par Ruby on Rails et Django entre autres).
Ensuite, les langages HTML et CSS sont vritablement le socle de tout
projet de dveloppement web. Que vous vouliez crer un site ecommerce, un blog, une application mobile ou quoique ce soit
dautre, vous serez oblig de passer par les langages HTML et CSS.
Cela tant, si vous connaissez un petit peu le monde du web, vous
pouvez trs bien vous dire que coder en HTML et en CSS est inutile
puisque vous pouvez utiliser des solutions toutes fates comme des
frameworks (WordPress, PrestaShop), des diteurs WYSIWIG (What
You See Is What You Get) ou encore avoir recours aux services dune
agence spcialise.
Abattons ds maintenant quelques ides reues !
1. Un framework, cest gnial. En effet, ce sont des centaines dheures
de travail conomises pour vous et galement la garantie dun travail
bien fait priori. Certes !
Toutefois, le jour o vous voulez intgrer quelque chose comme
disons un systme de paiement, comment faites-vous ? Idem si vous
voulez modifier un peu lapparence graphique de votre site.

Tout a pour vous dire que sil est vrai quinstaller un framework peut
tre une bonne solution, ce nest plus suffisant aujourdhui sur le web.
2. Les diteurs WYSIWIG sont des diteurs qui codent votre
place . En gros, vous choisissez dinsrer un paragraphe, une image,
un carr, etc. et lditeur cre le code correspondant. Un exemple
clbre est Adobe Dreamweaver.
Si ces diteurs sont de plus en plus puissants et de mieux en mieux
fait, il nempche quils font et continueront toujours faire des
erreurs. En effet, il nest pas possible pour un programme de penser
comme un humain et ainsi votre code ne sera jamais tout fait
valide. De plus, certaines limitations demeurent.
3. Une agence spcialise ou un freelance, cela semble tre un must.
Encore une fois : attention ! Tout dabord, nombre de freelances et
dagences ne se rsument en fait qu un tudiant cherchant gagner
un peu dargent. Je vous laisse imaginer dans nombre de cas le
rsultat
De plus, les grosses agences reconnues ont des prix qui dpassent
certainement votre budget priori.
Enfin, une fois le travail rendu, ne vous attendez pas ce que votre
freelance ou votre agence vienne vous dpanner en cas de problme
pendant des annes.
Encore une fois, je ne vous dis pas de ne pas travailler avec une
agence, je vous dis simplement de prendre des prcautions et de vous
organiser avant.
Apprendre le HTML et le CSS signifie entrer dans le monde des
programmeurs et cest donc commencer les comprendre et parler
comme eux.
Si vous comprenez le HTML et le CSS avant de faire appel une
agence, vous rdigerez alors un cahier des charges plus prcis et de

meilleure qualit et conomiserez finalement beaucoup dargent et de

soucis.
Finalement (on garde le meilleur pour la fin !), apprendre le HTML et
le CSS cest surtout et avant tout avoir un socle pour comprendre
comment fonctionne son site et ainsi pouvoir le modifier ou corriger
des problmes au besoin.
Deviendriez-vous plombier sur un coup de tte ? Non, car vous ny
connaissez rien en plomberie. Cest exactement pareil sur le web.
Vous nimaginez pas le nombre de gens qui se lancent sur le web
sans la moindre connaissance de leur environnement et le nombre
dchecs associs.
Noubliez pas quil est essentiel, pour quun commerce fonctionne (et
aujourdhui plus que jamais) davoir une comprhension de son
propre business, de son architecture et infrastructure et de son
environnement.
Si vous fates leffort de comprendre cela, vous avez dores-et-dj
battu 95% de vos concurrents. Sans compter que pour optimiser
votre rfrencement (donc votre visibilit sur le web), la matrise du
HTML et du CSS est indispensable.
Convaincu ? Dans ce cas, passons la suite ! Car je parle, je parle,
mais nous ne savons toujours pas ce que signifient HTML et
CSS !

1.2 Dfinitions et rles du HTML et du CSS

HTML est labrviation de HyperText Markup Language, soit en
franais langage hypertexte de balisage . Ce langage a t cr en
1991 et a pour fonction de structurer et de donner du sens du
contenu.

CSS signifie Cascading StyleSheets, soit feuilles de style en

cascade . Il a t cr en 1996 et a pour rle de mettre en forme du
contenu en lui appliquant ce quon appelle des styles.
Sachez-le : beaucoup de dbutants, et mme des personnes
exprimentes, confondons les fonctions respectives du HTML et du
CSS et utilisent un langage pour faire le travail de lautre. En
loccurrence, cest le HTML qui est souvent utilis mauvais escient,
pour mettre en forme du contenu.
Je vais vous le rpter et vous le rpter nouveau au fil de ce cours :
cest une trs mauvaise pratique ! Il ne faut JAMAIS utiliser le HTML
pour faire le travail du CSS. Mais encore une fois, ne vous inquitez
pas, je vais vous le rpter encore et encore
Retenez donc que le HTML est utilis pour baliser un contenu, cest
dire pour le structurer et lui donner du sens. Le HTML sert, entre
autres choses, indiquer aux navigateurs quel texte doit tre
considr comme un paragraphe, quel texte doit tre considr
comme un titre, que tel contenu est une image ou une vido.
Le CSS, quant--lui, est utilis pour appliquer des styles
contenu, cest--dire le mettre en forme. Ainsi, avec le CSS,
pourra changer la couleur ou la taille dun texte, positionner
contenu tel endroit de notre page web ou ajouter des bordures
des ombres autour dun contenu.

un
on
tel
ou

1.3 Versions actuelles des langages HTML et CSS

Les versions actuelles du HTML et du CSS sont HTML5 et CSS3. Il faut
savoir que, contrairement aux ides reues, ce sont encore des
versions non finalises. Cela signifie que ces versions sont toujours en
dveloppement et quelles sont toujours en thorie sujettes
changements et bugs.

En pratique, toutefois, on peut considrer ces versions comme

totalement stables et cest donc sur celles-ci que nous allons
travailler.
En effet, la version 5 dHTML, tout comme la version 3 de CSS
introduisent de nombreuses nouvelles fonctionnalits longtemps
attendues par les dveloppeurs et il serait donc dommage de sen
priver.
Parmi celles-ci, linsertion simplifie de vidos et de contenus audio
et de nouvelles balises amliorant la smantique (on va y revenir, pas
dinquitude !) pour mieux structurer nos pages en HTML ou encore
la possibilit de crer des bordures arrondies en CSS.

1.4 Un mot sur le XHTML

Avant de poursuivre plus avant notre dcouverte du HTML et du CSS,
je dois vous parler du XHTML.
XHTML signifie eXtensible HTML. Cre en 2000, il devait lorigine
succder au HTML.
En effet, il faut savoir que le HTML base sa syntaxe sur le langage
SGML (Standard Generalized Markup Language) tandis que le
XHTML se fonde sur le XML (eXtensible Markup Language).
Or, lpoque, le XML tait une vritable petite rvolution puisquil
permettait de faire davantage de choses que le SGML et quil tait dit
plus simple utiliser.
Cependant, le HTML a continu se dvelopper en parallle au
XHTML et le XHTML est dfinitivement abandonn en 2009 ou plus
exactement a t en partie intgr dans ce qui allait devenir le
HTML5.

10

Le XHTML reste aujourdhui encore utilis pour raliser certaines

pages de code spcifique. Pour commencer, cependant, je vous
recommande de vous concentrer sur le HTML5.

1.5 Lditeur de texte

Fini la thorie, il est temps de se prparer pour pratiquer ! Et pour
coder en HTML et en CSS, cest trs simple : nous navons besoin que
dun diteur de texte.
Il existe des centaines et des centaines dditeurs de texte et
beaucoup se valent. Certains sont gratuits, dautres sont payants.
Je ne vais pas vous imposer le choix dun diteur, mais simplement
vous donner des recommandations.
Tout dabord, je vous conseille de choisir un diteur de texte gratuit.
Une raison cela : moins dtre un dveloppeur expert, vous
naurez quasiment jamais besoin des options disponibles avec les
diteurs payants.
Deuxime conseil : essayez-en plusieurs avant de faire votre choix.
En effet, comme je lai dit, les bons diteurs possdent quasiment tous
les mmes fonctionnalits. La diffrence va donc se faire sur
lergonomie et la prise en main.
Voici les diteurs que je peux vous conseiller :
NotePad++, si vous tes sous Windows;
Komodo, pour Mac ou Linux
TextWrangler, pour Linux
Personnellement, jutilise Komodo que je trouve trs intuitif et trs
bien fait mais, encore une fois, le meilleur choix est le vtre.
Une fois votre diteur de texte choisi, je vous recommande vivement
de changer la couleur de fond de celui-ci. En effet, les diteurs
utilisent en gnral par dfaut le blanc comme couleur de fond pour

11

les fichiers. Or, ce blanc risque de trs rapidement devenir fatiguant

pour vos yeux comme pour votre cerveau.
Je vous conseille donc de mettre du gris ou du noir en couleur de
fond la place. Pour faire cela, si vous avez un Mac comme moi,
vous navez qu cliquer sur le nom de votre diteur en haut gauche
de votre fentre, puis Prfrences et vous aurez accs toutes les
options de personnalisation.
Si vous tes sous Windows ou Linux, je ne peux malheureusement
pas vous aider mais cela ne doit pas tre trs compliqu trouver je
suppose.
A noter que, pour vous entraner, vous pouvez galement utiliser
lexcellent site JsBin.com qui vous permet dentrer du code en HTML,
en CSS et / ou en JavaScript est davoir un aperu du rsultat visuel en
temps rel.
Bref, une fois votre diteur de texte choisi et install ou le site JsBin
lanc, il est temps de passer la suite et de commencer notre
initiation au HTML.

12

CHAPITRE 2 : LES FONDATIONS DU HTML

2.1 Elments, balises et attributs
Il y a trois termes dont vous devez absolument comprendre le sens
en HTML. Ce sont les termes lment, balise et attribut.
Les lments, tout dabord, vont nous servir dfinir des objets dans
notre page. Grce aux lments, nous allons pouvoir dfinir un
paragraphe (lment p), des titres dimportances diverses (lments
h1, h2, h3, h4, h5 et h6) ou un lien (lment a).
Les lments sont constitus de balises. Dans la majorit des cas, un
lment est constitu dune paire de balises : une balise ouvrante et
une balise fermante.

Les balises reprennent le nom de llment et sont entoures de

chevrons. La balise fermante possde en plus un slash qui prcde le
nom de llment.
Cependant, certains lments ne sont constitus que dune balise
quon appelle alors balise orpheline. Cest par exemple le cas de
llment br qui va nous servir crer un retour la ligne.
Lcriture en HTML est alors la suivante : <br/>.
Notez que, dans le cas des balises orphelines, le slash se situe aprs
le nom de llment. Notez galement que ce slash nest pas
obligatoire et que certains dveloppeurs lomettent volontairement.

13

Je vous conseille cependant, pour des raisons de propret de code et

de comprhension, de mettre le slash dans un premier temps.
Les attributs, enfin, vont venir complter les lments en leur donnant
des indications ou des instructions supplmentaires.
Par exemple, dans le cas dun lien, on va se servir dun attribut pour
indiquer la cible du lien, cest dire vers quel site le lien doit mener.
Notez que les attributs se placent toujours lintrieur de la balise
ouvrante dun lment (ou de la balise orpheline le cas chant).

Dans lexemple ci-dessus, on discerne llment a compos :

dune balise ouvrante elle-mme compose dun attribut href ;
dune ancre textuelle ;
dune balise fermante.
Lattribut href (initiales de Hypertexte Reference ) sert indiquer la
cible de notre lien, en loccurrence le site Wikipdia.
Lancre textuelle correspond au texte entre les balises. Ce sera le texte
sur lequel vos visiteurs devront cliquer pour se rendre sur Wikipdia
et galement lunique partie visible pour eux.
Voici ce que les visiteurs de votre site verront :

14

Si vous vous sentez un peu perdu pour le moment, ne vous inquitez

pas, cest tout--fait normal ! Continuez le cours, vous allez voir :
avec un peu de pratique, tout cela va trs vite se dcanter et vous
aurez tout compris avant mme de vous en rendre compte !

2.2 Structure de base dune page en HTML5

En programmation comme dans beaucoup dautres disciplines, vous
laurez compris, il y a des rgles.
Ainsi, toute page crite en HTML5 doit comporter une certaine
structure, un squelette qui sera toujours le mme. Ce squelette est
bien videmment constitu de divers lments.
Tout dabord, toute page HTML5 doit commencer par la dclaration
de ce quon appelle un doctype . Le doctype, comme son nom
lindique, sert indiquer le type du document. Dans notre cas, le
type de document est HTML. On crira donc :

Notez bien le point dexclamation, obligatoire, au dbut de cet

lment un peu particulier.

15

Ensuite, pour que notre page HTML5 soit valide, il va nous falloir
indiquer trois nouveaux lments : html, head ( en-tte ) et body
( corps de page ).
Llment html va contenir toute la page.
Llment head contiendra entre autres, le titre de la page, lencodage
utilis et des meta-data (des donnes invisibles pour les utilisateurs
mais essentielles nous en reparlerons plus tard).
Llment body contiendra tout le
(paragraphes, images, tableaux, etc.).

contenu

de

notre

page

Voil o nous en sommes rendus pour le moment :

Mais ce nest pas fini ! Pour que la page soit valide, llment head
doit lui mme contenir un lment title, qui correspond au titre de la
page et le meta charset qui prendra comme valeur le type dencodage
choisi.
Pour les langues latines, nous choisirons gnralement la valeur utf8 .
Voici quoi vous devriez arriver en pratique :

16

Et voil, vous venez, sans vous en rendre compte, de crer votre

premire page valide en HTML5 ! Retenez bien ce schma, il sera
toujours le mme quelque soit la page HTML5 que vous crerez.

2.3 Afficher un document en HTML5 dans mon navigateur

Si vous avez utilis JsBin.com dans lexercice prcdent, vous devriez
avoir vu le rsultat (la page telle quelle serait apparue dans nimporte
quel navigateur) instantanment sur la droite de votre cran.
Cependant, si vous avez utilis votre diteur de texte, il se peut que
vous soyez un peu perdu. Pas dinquitude, jarrive !
La premire chose faire, une fois un nouveau fichier ouvert dans
votre diteur de texte, est den changer le type pour mettre votre
document en html . Pour cela, deux solutions : soit vous trouvez
longlet o vous pourrez dfinir le type de votre document, soit vous
enregistrez-sous votre document en lui donnant un nom du type :
document.html. Cela aura pour effet de changer le type de document
en un document HTML.
Ensuite, pour visualiser votre fichier dans un navigateur, vous avez
nouveau deux choix. Soit votre diteur possde une option vous
proposant de pr-visualiser votre document dans le navigateur de
votre choix (cest le cas de Komodo), soit vous devrez enregistrer
votre document (sur votre bureau, par exemple), puis double cliquer

17

dessus, tout simplement, afin que la page souvre dans votre

navigateur par dfaut.
Simple, non ? Allez-y, essayez !
Ah et, un conseil : pensez bien enregistrer dans votre diteur votre
document chaque fois que vous souhaitez louvrir dans votre
navigateur et rafrachir la page dans votre navigateur si votre
document tait dj ouvert (ctrl+r ou cmd+r) sans quoi vous ne verrez
aucun changement.
Cela semble vident mais si vous saviez le nombre dheures que nous
avons tous perdu en cherchant pourquoi telle ou telle chose ne
fonctionnait pas Alors que nous avions simplement oubli
denregistrer les changements effectus au pralable ou de rafraichir
notre document !

2.4 Bonnes pratiques, rgles et commentaires

Je suis de ceux qui pensent quil nest jamais trop tt pour apprendre
les bonnes manires, donc commenons immdiatement, cela vitera
de mauvaises habitudes par la suite !
Tout dabord, vous lavez remarqu, le HTML permet dimbriquer des
lments les uns lintrieur des autres. Cest mme lune des
possibilits qui font toute sa force.
Dans lexemple prcdent, par exemple, notre lment title tait
lintrieur de notre lment head, lui mme contenu dans un lment
html.

18

Toutefois, si le HTML permet dimbriquer des lments les uns dans

les autres, vous devrez toujours faire bien attention de refermer les
balises dans le bon ordre.
Le bon ordre est : <a> <b> </b> </a>, cest dire que le dernier
lment ouvert est toujours le premier referm. Vous ne devrez jamais
crire <a> <b> </a> </b>.
Normalement, si vous refermez bien chaque balise juste aprs lavoir
ouverte, plutt que de dire cest bon, jy penserai plus tard , vous
ne devriez jamais faire lerreur.
Autre bonne pratique maintenant : lindentation. Indenter son code,
cest tout simplement larer en ajoutant des espaces au dbut de
certaines lignes afin de le rendre plus lisible pour vous comme pour
les autres.
Il ny a pas de rgle absolue concernant lindentation, certains
accentuant plus ou moins le retrait en dbut de ligne. Pour ma part,
jutilise une tabulation (la touche gauche du a) chaque fois que
jouvre une nouvelle balise lintrieur dun lment. Cela permet de
bien hirarchiser son code et de voir immdiatement quel lment est
imbriqu dans quel autre.
Par exemple, on voit bien dans lexemple ci-dessus que jai ajout de
nouveaux espaces lorsque jai ouvert ma balise head et title, mais que
je nen ai pas ajout pour le meta charset. Pourquoi ? Tout

19

simplement car la balise meta nest pas contenue dans llment title
mais seulement dans llment head. Elle est donc au mme niveau
de hirarchie que le title.
Lindentation peut peut-tre vous paratre superflue pour le moment,
mais je vous garantis que cest une pratique extrmement utile et
quune bonne indentation est souvent ce qui fait la diffrence entre
un codeur moyen et un bon codeur.
Troisime et dernire bonne pratique dont je voulais vous parler : le
fait de commenter son code.
Commenter son code, cest tout simplement y ajouter des
commentaires. Ces commentaires sont spciaux : il ne seront pas
visibles par vos visiteurs ( moins que ceux-ci naffichent le code
source de la page).
Voici comment on crit un commentaire en HTML :

20

Pourquoi commenter son code ? Pour plusieurs raisons.

Tout dabord, pour vous. En effet, lorsque vous commencerez
vritablement savoir coder, vos pages vont sallonger et se
complexifier. Commenter va alors devenir indispensable pour vous
reprer dans votre page web et pour vous rappeler pourquoi vous
avez fait telle chose de telle faon.
Ensuite, pour les personnes qui vous pourriez distribuer votre code.
Rappelez vous quil existe autant de manires de coder que desprits
humains ou presque et quil est donc essentiel de donner des
indications sur votre code afin que les personnes puissent le
comprendre plus rapidement et plus facilement.

21

En bref : commenter nest pas un luxe mais souvent ce qui spare un

dveloppeur moyen dun bon dveloppeur, tout simplement.
Attention ne jamais mettre dinformations sensibles en
commentaire, comme des mots de passe par exemple. En effet,
rappelez vous que tout le monde peut avoir accs au code source de
votre page, et donc votre code HTML.
Pour vous en convaincre, nhsitez pas aller sur nimporte quel site
(Wikipdia par exemple), puis faire un clic droit sur la page et
choisir loption inspecter llment ou afficher le code source
selon votre navigateur.

Vous aurez alors accs au code HTML de la page, quelque soit le site.

22

Notez que, selon votre navigateur, vous devrez au pralable activer

les extensions pour dveloppeur afin de pouvoir inspecter des
lments ou afficher le code source dune page. Pour cela, rendezvous dans les options avances de votre navigateur !

23

2.5 Les lments Heading, Paragraph et Break

Le HTML, je vous lai dit, sert diffrencier dun point de vue
smantique les diffrents objets que lon peut rencontrer et dont on
peut avoir besoin (titre, paragraphe, espace, image, etc.).
Pour faire cela, le HTML va utiliser des lments. Et le moment est
arriv pour nous dapprendre crer des paragraphes, des titres, et
faire des retours la lignes en HTML.
Pour crer des paragraphes, tout dabord, on va utiliser llment p.
On peut crer autant de paragraphes que lon souhaite dans une
page. Pour chaque nouveau paragraphe, il faut rouvrir une balise
<p>. A chaque nouveau paragraphe, un retour la ligne est
automatiquement effectu.

24

Si maintenant vous dsirez crer un retour la ligne lintrieur

mme dun paragraphe, il faudra utiliser llment br (diminutif de
break).
Cet lment est constitu dune seule balise orpheline, quon notera
donc <br/>.
Pour crer des titres, on va utiliser les lments h1, h2, h3, h4, h5 et
h6. Pourquoi autant dlments diffrents ?
Pour pouvoir crer des titres de diverses importances. Ainsi, un titre
h1 sera considr comme un titre trs important tandis quun titre h6
sera considr comme trs peu important.
En pratique, on nutilisera que trs rarement les titres de niveau h4, h5
et h6. Si vous vous interrogez encore sur lintrt davoir tous ces
lments, pensez que cela est trs important pour le rfrencement
entre autres.
En effet : plus vous serez clair et mieux un moteur de recherche vous
comprendra, mieux vous serez rfrenc.
Voil ce que a donne en image :

25

Vous avez remarqu ? Oui, les titres apparaissent en gras et ont des
tailles diffrentes selon leur degr dimportance. Et cest prcisment
l o jen reviens mon premier point : vous ne devez JAMAIS
utiliser le langage HTML pour mettre en forme le contenu.
Ce que vous voyez nest quune mise en forme automatique fate par
votre navigateur, une interprtation visuelle de ce que vous avez
donn votre navigateur. Cependant, vous ne devez jamais utiliser
un titre de niveau h1 pour mettre un texte en gros et en gras. JA-MAIS.
Pour bien vous faire comprendre ce quil se passe, vous pouvez
imaginer que votre navigateur est un lve et vous un professeur.
Vous fates votre cours, et dun coup vous dtes vos lves
attention, ce point l est trs important ( laide dune balise h1).
Vos lves vont avoir tendance surligner cette partie du cours.

26

Cest exactement ce que fait votre navigateur. Cependant, en tant que

professeur, vous nallez pas dire vos lves ce point l est
important juste pour que vos lves surlignent une partie de votre
cours, cela serait stupide. Vous leur direz prenez vos surligneurs et
surlignez cela . Et cest ce que nous allons faire ave le CSS.
Tout cela pour vous dire que la taille et le poids du texte rendu par
votre navigateur nest que le rsultat dune interprtation et nest
quune mise en forme automatique. Si vous avez compris cela, vous
avez tout compris !
Et pas dinquitudes non plus si vous ne voulez pas avoir vos titres en
gras, on soccupera de laspect visuel plus tard avec le CSS. Le CSS
peut nous permettre de faire rellement tout ce que lon dsire dun
point de vue visuel : crer des styles tout comme enlever des styles
automatiques.

2.6 Les lments Strong, Emphasis et Mark

Continuons apprendre parler en HTML et donc dans la
dcouverte de nos lments avec trois nouveaux lments : les
lments strong, em (diminutif de emphasis) et mark.
Llment strong, tout dabord, est utilis pour indiquer aux moteurs
de recherche quun contenu est particulirement important, afin que
celui-ci soit trait avec plus dimportance. Le rsultat visuel est une
mise en forme automatique en gras. Mais encore une fois, on nutilise
pas llment strong pour mettre un texte en gras !
Llment em, pour emphasis ( emphase en franais) est proche de
llment strong. Il sert lui aussi signifier quun contenu est
important, mais moins important tout de mme quun contenu entre
des balises strong.
Encore une fois, si vous vous demandez lintrt de ces lments, il
est avant tout dans loptimisation du rfrencement de votre site. En
effet, normalement, vous devriez avoir cibl des mots clefs et essayer

27

dtre bien rfrenc sur ces mots l. Les balises strong et em vous
aident atteindre ce but, entre autres.
Enfin, llment mark est utilis pour faire ressortir du contenu. Ce
contenu ne sera pas forcment considr comme important, mais
cette balise peut servir dans le cas de laffichage de rsultats suite
une recherche dun de vos visiteurs par exemple.

Voil donc pour les lments dits de base, il est maintenant tant de
sattaquer des lments relativement plus complexes, et nous allons
commencer avec les listes.

2.7 Listes ordonnes et non-ordonnes

Les listes servent ordonner du contenu, lui donner un ordre
cohrent.
Visuellement, les listes en HTML correspondent ce que vous crez
lorsque vous utilisez des puces dans un document Word ou
PowerPoint par exemple, comme ceci :

28

 Elment numro 1
Elment numro 2
Elment numro 3
En HTML, les listes vont avoir deux grands intrts pour nous : on va
pouvoir les utiliser pour crer des menus ou, dans leur forme brute,
pour mieux prsenter du contenu pour un blog par exemple.
Il existe trois grands types de listes en HTML : les listes ordonnes, les
listes non-ordonnes et un dernier type un peu particulier : les listes
de dfinition. Nous allons commencer avec les listes ordonnes et
non-ordonnes.
La diffrence entre les listes ordonnes et non-ordonnes est que les
listes ordonnes possdent un aspect de subordination, dordre
logique, de classement tandis que ce nest pas le cas pour les listes
non-ordonnes.
Pour crer une liste non-ordonne, on va avoir besoin de deux
nouveaux lments : llment ul (abrviation de unordered list), qui
va contenir toute la liste et llment li (pour list item) que lon va
utiliser pour crer chaque lment de la liste.
Voyons immdiatement comment cela fonctionne en pratique :

29

Dans lexemple prcdent, les diffrents lments de la liste nont pas

de cohrence entre eux et on ne peux donc pas les classer, les
ordonner (sans contexte du moins). Cest pourquoi jai utilis une liste
non-ordonne.
Pour crer une liste ordonne maintenant, nous allons simplement
remplacer llment ul par llment ol (pour ordered list).

30

Cette fois-ci, il y a une relation de subordination, un ordre logique et

naturel entre les lments de la liste (on met gnralement
lintroduction avant la conclusion) ; on utilise donc une liste
ordonne.

2.8 Listes de dfinitions

Dernier grand type de listes que nous allons voir ensemble, les listes
de dfinition son utilises pour dfinir des termes.
Pour crer une liste de dfinition, il va nous falloir utiliser llment dl
(pour definition list), llment dt (pour definition term) et llment
dd pour la dfinition en soi.
Il ny a quune rgle respecter lorsque lon cre une liste de
dfinitions : vous devez toujours placer llment dt avant llment

31

dd, cest--dire le terme dfinir avant sa dfinition. Cela est assez

intuitif et ne devrait donc pas vous poser de problme.
En revanche, il est tout fait possible dassocier plusieurs termes
une dfinition ou mme plusieurs dfinitions un mme terme.
Voici un exemple de liste de dfinitions :

2.9 Listes imbriques

Ca commence devenir vraiment intressant ! En effet, le HTML nous
offre la possibilit dimbriquer les listes les unes dans les autres trs
simplement.
Pour imbriquer des listes, il suffit de commencer une liste, puis den
ouvrir une seconde lintrieur dun lment de la premire (on peut
videmment imbriquer plus de deux listes en rptant le mme
processus).
Voici une illustration, en imbriquant par exemple une liste nonordonne lintrieur dune liste ordonne :

32

Comme vous le voyez, si on noublie pas dlment, les listes restent

trs simples utiliser et manipuler. Jespre que vous comprenez
mieux dsormais limportance de bien indenter son code !
Cest tout pour les listes, nhsitez pas vous entraner afin dtre
certain de bien maitriser tout ce que lon a vu jusquici car le
prochain chapitre est capital : nous allons apprendre crer des liens.

33

2.10 Liens internes et liens externes

Tout dabord, il faut savoir quil existe diffrents types de liens. Pour
linstant, nous allons nous concentrer sur les eux types les plus
classiques : les liens internes et les liens externes.
Quelle diffrence entre ces deux types de liens ? Un lien interne est
un lien cr entre deux pages dun mme site web tandis quun lien
externe est un lien menant dun site web vers un autre site web.
Dans tous les cas, pour crer un lien, nous allons utiliser llment
a accompagn de son attribut href (pour Hypertext Reference) qui
sert indiquer la cible (cest dire la destination) du lien.
Quel que soit le type de liens crs, la seule chose qui va changer va
tre ce que lon va indiquer en valeur pour lattribut href.
Commenons donc avec les liens internes. Nous avons trois cas
distinguer :
1er cas : La page partir de laquelle on fait un lien et celle vers
laquelle on fait un lien se trouvent dans le mme dossier. Dans
ce premier cas, il suffit de prciser le nom de la page dans
lattribut href.
2me cas : La page vers laquelle on souhaite faire un lien se
trouve dans un sous-dossier. Dans ce cas, il faudra en tenir
compte et inclure le nom du sous-dossier dans la valeur de
lattribut href.
3me cas : La page vers laquelle on veut faire un lien se trouve
dans un dossier parent. Dans ce cas, nous devrons rajouter
../ dans la valeur de lattribut href.
Voil donc en images comment cela fonctionne :

34

Jai donc cr quatre pages en HTML (jai simplement crit la

structure minimale pour chacune dentre elles afin de les rendre
valide). Jai plac les pages page1.html et page2.html dans le mme
dossier, la page page3.html dans un sous-dossier relativement ma
page page1.html et la page page4.html dans un dossier parent par
rapport ma page page1.html.
Je vais donc maintenant crer des liens de ma page page1.html vers
mes pages page2.html, page3.html et page4.html grce llment a
et lattribut href :

35

Et voil, cest fini ! Si vous ouvrez votre page page1.html, celle-ci doit
maintenant ressembler cela :

Lorsque vous ou vos visiteurs cliquerez sur page 2 , page 3 ou

page 4 , vous serez redirigs vers la page en question.
Pour crer des liens externes, maintenant, vous allez voir que cest
beaucoup plus simple : il suffit dindiquer lURL complte de la page
vers laquelle on veut faire un lien en valeur de lattribut href.
En pratique, pour faire un lien vers la page daccueil de Wikipdia
par exemple, on crira :

36

Et voil, cest tout pour les liens externes. Simple, non ?

A noter quil existe pour les liens internes et externes des attributs
facultatifs qui peuvent modifier le comportement par dfaut de ces
liens. Cest par exemple le cas de lattribut target qui est selon moi
indispensable connatre.
Lattribut target va vous permettre de choisir si vous voulez que la
cible de votre lien souvre dans une nouvelle fentre / nouvel onglet
ou pas.
Pour que la cible de votre lien souvre dans une nouvelle fentre ou
un nouvel onglet, on attribuera la valeur _blank lattribut target. Un
exemple immdiatement en image :

37

Attribut retenir donc, car celui-ci peut savrer trs utile dans de
nombreux cas (lorsque vous ne voulez pas que vos visiteurs quittent
votre site par exemple). Notez en revanche que vous ne pouvez pas
choisir si le lien va souvrir dans un nouvel onglet ou dans une
nouvelle fentre.

2.11 Les autres types courants de liens

Les liens internes et externes sont trs certainement les types de liens
les plus courants, mais cest loin dtre les seuls ! En effet, on peut
utiliser les liens pour faire bien dautres choses.
Dans ce nouveau chapitre, nous allons nous concentrer sur les liens
de type ancre , les liens pour envoyer un mail et les liens pour
tlcharger un fichier.
Commenons avec les liens de type ancre. Les liens de type ancre
sont des liens menant un autre endroit dune mme page web. Ils
peuvent tre utile dans le cas dune page web trs longue pour
donner vos visiteurs un accs rapide une section en particulier par
exemple.
Vous comprendrez quil va donc tout dabord nous falloir rajouter
quelques lignes de textes dans notre page HTML pour pouvoir tester
les ancres (sinon, on nen verra pas leffet).
Attention, soyez attentif, a se complique un peu partir de l !

38

Pour crer une ancre, on commence par rajouter un attribut id une

balise ouvrante HTML lendroit o lon veut envoyer le visiteur. On
peut attribuer nimporte quelle valeur cet attribut, le mieux tant de
choisir une valeur qui fasse sens.
Ensuite, on cre le lien cliquable en soi qui va amener notre id.
Pour cela, on utilise toujours notre lment a avec son attribut href
(on ne rinvente pas la roue chaque fois), mais cette fois ci on va
devoir placer un dise avant dcrire la valeur de lattribut href.
La valeur inscrite pour lattribut href doit tre strictement la mme que
celle donne notre id.
Comme rien ne vaut un bon dessin, voici lillustration en image :

Faites attention bien choisir des valeurs diffrentes pour chaque id

sinon votre lien ne saura pas o ramener !

39

Pour envoyez un mail, maintenant, on donne tout simplement une

valeur de type mailto : notre attribut href comme ceci :

Enfin, voyons les liens permettant vos visiteurs de tlcharger un

fichier. Pour cela, il va tout dabord falloir nous armer dun fichier (au
format zip, pdf, xls ou autre) que lon va placer dans le mme dossier
que la page web partir de laquelle on cre le lien.
Ensuite, il ne reste plus qu crer un lien comme on en a lhabitude
en utilisant un chemin relatif. Comme notre fichier et notre page web
sont dans le mme dossier, nous navons donc que le nom du fichier
renseigner en valeur de lattribut href.
Par exemple, si mon fichier est un pdf qui sappelle fichier , on
aura :

Notez que si vous cliquez sur le lien, rien ne devrait se passer (tout au
moins, sur Mac, rien ne se passe) tout simplement car vous possdez

40

dj le fichier. Cependant, vos visiteurs pourront tout fait

tlcharger votre fichier une fois votre page hberge sur serveur.
Ca y est, on en a enfin fini (pour le moment tout au moins) avec les
liens ! Nhsitez pas prendre une petite pause et revoir cette partie
tte repose car cest vraiment trs important et, si vous comprenez
la mcanique des liens, vous naurez aucun mal comprendre le
reste.
Pour les plus vaillants dentre vous, poursuivons !

2.11 Validation et compatibilit entre navigateurs

Je voulais terminer cette premire partie dintroduction au langage
HTML sur une note de thorie et avec quelques mises en garde : il
nest jamais trop tt pour apprendre les bonnes manires.
Tout dabord, vous devez savoir quun mme code interprt par
diffrents navigateurs peut produire diffrents rsultats. Autrement dit,
il est possible que votre code saffiche diffremment selon le
navigateur utilis par vos visiteurs.
Pas de panique toutefois : cela est de moins en moins vrai aujourdhui
avec les dernires versions des grands navigateurs qui sont toutes
standardises. De plus, nous verrons comment contourner ce
problme par la suite avec les reset CSS entre autres.
Sachez cependant pour votre culture personnelle que ce qui est vrai
aujourdhui tait loin de ltre il y a quelques annes tout juste et que
ces problmes de compatibilit ont fait sarracher les cheveux plus
dun codeur.
Le problme viendra trs souvent des anciennes versions dInternet
Explorer qui ne reconnat pas ou interprte diffremment certains
lments en HTML ou proprits en CSS. Ceci est un vestige du temps
o Microsoft tait tout puissant et tenter dimposer sa loi et ses
propres proprits non standardises.

41

Prudence donc, mme aujourdhui ! Pensez tester votre code avec

diffrents navigateurs et diffrentes versions de chaque navigateur
lorsque vous avez un doute : cela ne cote pas grand chose et ne pas
le faire peut savrer catastrophique !
Deuxime mise en garde ou plutt bonne pratique, toujours dans
cette ide davoir un code propre et qui fonctionne bien : pensez
systmatiquement vrifier sa validit.
Pour cela, le W3C (World Wide Web Consortium lautorit en
matire de codification des langages informatiques) met notre
disposition diffrents outils, et notamment des validateurs HTML et
CSS.
Pour pouvez trouver ces validateurs ici :
Pour le validateur HTML : http://validator.w3.org
Pour le validateur CSS : http://jigsaw.w3.org/css-validator
Tout est gratuit, nhsitez pas vous en servir !
Il est temps sur ces mots de clore notre introduction au HTML et de
passer la suite : la dcouverte du CSS.

42

CHAPITRE 3 : LES FONDATIONS DU CSS

Vous allez enfin pouvoir modifier lapparence de vos textes, rajouter
des bordures ou changer la disposition des lments sur votre page.
Mais avant tout, il nous faut commencer avec quelques lments de
vocabulaire comme on lavait fait pour le HTML.

3.1 Slecteurs, proprits et valeurs

Dans ce premier chapitre, nous allons voir ensemble ce que sont les
slecteurs, les proprits et les valeurs en CSS.
Pour rappel, le CSS sert modifier lapparence de nos pages web en
appliquant des styles au contenu en HTML.
Un slecteur, tout dabord, va servir dterminer quel(s) lment(s)
HTML ou quel type dlments on souhaite appliquer un style
particulier. Si lon souhaite appliquer un style particulier tous nos
paragraphes, par exemple, on utilisera le slecteur p .
Une proprit va nous servir modifier le style dun lment en
ciblant un critre bien particulier comme la taille dun texte, sa police
ou sa couleur par exemple.
Une valeur, enfin, va venir complter une proprit et va en
dterminer le comportement. Pour la proprit servant changer la
couleur dun texte par exemple, la valeur va tre la nouvelle couleur
appliquer.
Voici ci-dessous une illustration concrte de ce que lon vient de
dire :

43

Dans cet exemple, nous utilisons le slecteur simple p , ce qui

signifie que nous souhaitons appliquer un style particulier tous les
paragraphes de nos pages.
Nous utilisons les proprits color (qui sert modifier la couleur
dun texte) et font-size (pour changer la taille dun texte). Cela
signifie donc que nous travaillerons sur la couleur et la taille de nos
paragraphes.
Enfin, nous indiquons que nous voulons que tous nos paragraphes
saffichent en bleu grce la valeur blue et que notre texte ait une
taille de 16px avec la valeur 16px .
Notez dores-et-dj la syntaxe de notre premire dclaration en CSS.
On entoure les proprits et les valeurs avec des accolades et on
place un point virgule aprs avoir spcifi une valeur pour chacune
de nos proprits. Chaque proprit est spare de sa valeur par un
deux-points.
Fates leffort de bien retenir cette criture, car nous allons sans cesse
nous en resservir partir de maintenant.

3.2 O crire le CSS ?

Nous avons trois possibilits pour crire notre CSS. Lune delles est
prfrable aux deux autres et nous allons immdiatement voir
pourquoi.
Nous pouvons crire le CSS :

44

 A lintrieur de llment head de notre document HTML ;

Dans la balise ouvrante des lments de notre fichier HTML ;
Dans un fichier portant lextension .css spar.
Pour des raisons de performances de votre code, de clart et
dconomie de temps, je vous recommande vivement dutiliser la
dernire mthode ds que cela est possible.
Voyons ensemble comment cela se passe en pratique pour chacune
de ces trois mthodes, puis je vous expliquerai pourquoi la dernire
est la meilleure.
Commenons avec la premire faon : crire son code CSS dans
llment head de notre page HTML. Pour faire cela, il suffit dinsrer
un lment style dans notre lment head et de placer nos
dclarations CSS lintrieur de cet lment style comme ceci :

Deuxime mthode maintenant : crire du CSS dans la balise

ouvrante dun lment HTML. Pour faire cela, nous allons devoir
utiliser un attribut style et lui affecter en valeur nos proprits CSS :

45

Vous remarquerez que lon respecte la syntaxe du CSS lintrieur de

lattribut style en utilisant les deux-points et les points virgules.
Attention cependant : dans notre premier cas, on utilisait llment
style tandis que dans le cas prsent, style est un attribut.
Troisime et dernire mthode enfin (la mthode recommande) :
crire le code CSS dans un fichier spar. Pour faire cela, nous allons
dj devoir ouvrir un nouveau fichier dans notre diteur de texte et
lenregistrer au format .css . Vous pouvez le nommer style.css .
Pensez bien enregistrer ce fichier dans le mme dossier que votre
fichier HTML dont vous souhaitez modifier le style, sinon vous
risquez davoir des problmes (nous expliquerons plus tard dans ce
cours pourquoi).
Une fois que vous avez fait cela, retournez sur votre page HTML.
Nous allons maintenant devoir lier nos deux fichiers HTML et CSS.
On va faire cela laide dun lment link que nous allons placer
dans llment head de cette manire :

46

Llment link est reprsent sous forme de balise orpheline et doit

tre accompagn de ses deux attributs rel et href .
Lattribut rel sert prciser le style du fichier li (dans notre cas cest
une feuille de style, donc stylesheet en anglais). Lattribut href,
que vous connaissez dj, sert faire le lien en soi.
Si notre fichier avait t plac dans un dossier parent ou dans un
sous-dossier par rapport notre fichier HTML, il aurait fallu reflter
cela dans la valeur de notre attribut href (rappelez vous de la leon
sur les liens relatifs !).
Finalement, nous navons plus qu crire notre code CSS dans le
fichier style.css :

Si vous dsirez voir le rsultat immdiatement et pouvoir travailler

avec vos diffrents fichiers sur une mme page, je vous conseille une
nouvelle dutiliser JsBin.com (ce que je ferai trs souvent dans la suite
de ce cours).
Ce site permet en effet dcrire du code en HTML, en CSS et en
JavaScript et davoir un aperu du rsultat immdiatement comme
ceci :

47

3.3 Les commentaires en CSS

Enchanons avec les commentaires en CSS. On a dj vu que lon
pouvait commenter en HTML. Cela est galement possible en CSS.
Plus quune possibilit, cest mme une obligation selon moi.
En effet, les fichiers CSS deviennent rapidement trs long (beaucoup
plus que les fichiers HTML par exemple) donc si vous ne commentez
pas efficacement vous risquez dtre trs vite perdu.
De plus, si vous distribuez votre code, je pense que la personne sera
contente davoir quelques lignes de commentaires pour laider
trouver ce quelle cherche au milieu de 2000 lignes de code !
En CSS, on crit les commentaires de cette manire :

48

3.4 Slecteurs simples et limitations

Retournons maintenant nos slecteurs. Jusqu prsent, nous
navons manipul que des slecteurs que lon appelle simple , car
ils correspondent des lments HTML seuls et sans attributs (par
exemple le slecteur p).
Ce type de slecteur doit tre prfr tant que possible pour des
raisons doptimisation et de performance du code.
En effet, ils requirent moins de code et sont donc moins gourmands
en nergie que des slecteurs plus complexes. Votre page mettra ainsi
moins de temps charger.
Le problme reste quon est quand mme trs limit avec des
slecteurs simples : comment faire pour appliquer un style diffrent
deux lments de mme type, deux paragraphe par exemple ? Ce
nest tout simplement pas possible.
Et cest pour cela que lon a cr les attributs class et id.

3.5 Les attributs class et id

Class et Id sont deux attributs HTML qui ont t crs pour pouvoir
appliquer diffrents styles des lments de mme type. Class permet
galement de faire linverse et dappliquer le mme style diffrents
lments choisis.
Voyons tout de suite comment ils fonctionnent.
Premirement on se place dans la balise ouvrante dun lment
HTML, on crit le nom de notre attribut (class ou id), et on lui donne
une valeur cohrente.
Cette valeur ne devrait contenir ni de caractres spciaux (accents et
autres) ni despace. Par exemple :

49

Ensuite, on retourne sur notre fichier CSS. On va devoir commencer

notre dclaration par un point l o on a utilis un attribut class et par
un dise si lon a utilis lattribut id.
Aprs le point ou le dise, on crit la valeur de lattribut en question
pour former notre slecteur. Enfin, on crit le code CSS voulu. Voil
ce que a donne en pratique :

Vous le voyez, nous pouvons maintenant appliquer un style diffrent

chaque lment HTML grce aux attributs class et id. Pratique,
non ?

50

Pourquoi avoir cr deux attributs pour faire la mme chose ? En fait,

il existe une diffrence notable entre class et id : un attribut id avec
une valeur prcise ne peut tre utilis quune fois dans une page, au
contraire de class.
Id sera donc utilis pour des lments uniques dans une page web,
comme le logo de votre site par exemple.
En revanche, on peut utiliser plusieurs attributs class identiques (cest
dire ayant la mme valeur) par page. Cest dailleurs une des
mthodes que nous utiliserons pour appliquer un mme style
diffrents lments.

Notez que, dans lexemple prcdent, utiliser deux attributs class

nest pas la meilleure solution (nous verrons mieux lorsque nous
tudierons les slecteurs avancs). Jai crit cela seulement pour vous
montrer que a fonctionne.
Nous voil dj un peu moins limits. Cependant, nous ne pouvons
pour le moment appliquer un style qu un contenu entre balises.
Effectivement, on ne pourrait pas appliquer de style particulier au mot
attributs de notre titre dans lexemple prcdent.
Pour remdier cela, on a invent les deux lments HTML div et
span, que nous allons tudier tout de suite.

51

3.6 Les lments div et span

Pour commencer, vous devez bien comprendre que les lments div
et span ne possdent aucune valeur smantique, ce qui va
lencontre mme du rle du HTML. Ainsi, vous ne devez les utiliser
que lorsque vous navez pas dautre choix.
Les lments div et span vont nous servir de containers. Nous allons
nous en servir pour entourer des blocs de code et ainsi pouvoir
attribuer des styles particuliers ces blocs.
Lutilisation des lments div et span est trs simple : il suffit
dentourer le bloc de code voulu avec une paire de balises ouvrante
et fermante div ou span comme cela :

Gnralement, on attribuera une class ou un id div et span afin de

pouvoir diffrencier nos diffrents div et span dans notre page. Ainsi,
on peut dsormais appliquer un style particulier nimporte quel bout
de code dans notre page HTML.

52

Tout comme pour class et id, il existe une diffrence entre div et
span : div est un lment de type block tandis que span est un
lment de type inline.
Block ? Inline ? Nous allons voir immdiatement ce que cela signifie.

3.7 Les lments de type block et inline

En HTML, tout lment est soit de type block, soit de type inline. Par
exemple, div est un lment de type block tandis que span est un
lment de type inline.
Les lments de type block sont fondamentalement diffrents des
lments de type inline en HTML et il est essentiel de bien
comprendre les diffrences entre ces deux types si vous voulez un
jour crer un site Internet, ne serait-ce que pour des raisons de mise
en page.
Voyons immdiatement ces diffrences ensemble :
Les lments de type block
Les lments de type inline
Commencent sur une nouvelle Sinsrent dans une ligne
ligne

53

Occupent toute la largeur

disponible
Peuvent tre imbriqus les uns
dans les autres et contenir des
lments de type inline

Occupent seulement la largeur

ncessaire
Peuvent tre imbriqus les uns
dans les autres mais ne peuvent
pas contenir dlments de type
block

Afin que vous compreniez bien la diffrence entre les deux types
dlments, voyons ensemble quelques exemples dlments de type
inline ou block pour que vous puissiez observer leur comportement.
Elments de type block
p
h1, h2, h3, h4, h5, h6
ol, ul,dl
li
table

Elments de type inline

em
strong
mark
a
img

Illustrons ce que nous venons de dire en regardant par exemple de

plus prs le comportement des lments p et em :

On voit bien dans lexemple ci-dessus les diffrences cites dans cette
partie entre les lments de type block et inline. Jai mis des bordures
autour des paragraphes afin que vous soyez bien convaincu quun
lment de type block occupe toujours toute la largeur disponible.

54

3.8 Les slecteurs avancs

Maintenant que nous avons fait un premier tour dhorizons des
possibilits offertes par le CSS et que nous savons comment appliquer
un style nimporte que bloc de code HTML, je peux vous parler des
slecteurs avancs.
Les slecteurs avancs sont lune des grandes forces du CSS. En effet,
grce eux, nous allons pouvoir cibler du contenu trs prcisment
et assez simplement.
Il faut savoir quil existe de trs nombreux slecteurs avancs en CSS
et que je ne vous prsenterai dans ce cours que les plus utiles selon
moi et les plus utiliss. Nhsitez pas vous renseigner davantage si
cela vous intresse !
Ce slecteur sert
Slectionner
tous
les
lments
(slecteur universel)
Slectionner deux lments A et B
Slectionner un lment B contenu
dans un lment A
Slectionner le premier lment B
suivant un lment A
Slectionner tous les lments A
possdant un attribut particulier
Slectionner tous les lments A
possdant un attribut particulier avec
une valeur
Slectionner tous les lments A
possdant un attribut particulier avec
une valeur prcise

Et il scrit comme cela

*
A, B
AB
A+B
A[nom de lattribut]
A[nom de
valeur ]

lattribut*

A[nom
de
valeur ]

lattribut

Nhsitez pas faire quelques tests par vous mme et vous entraner
un peu pour bien matriser ces quelques slecteurs avancs, cela
pourra vous tre trs utile par la suite.

55

3.9 La notion dhritage en CSS

Lhritage est une notion centrale et fondamentale du CSS. Lhritage
signifie que tout lment HTML va hriter des styles de ses parents
(cest le fameux cascading ).
En HTML, si un lment A est inclus dans un lment B ; llment A
sappellera lenfant et llment B sera le parent de llment A. Ainsi,
si lon applique un style llment B, llment A en hritera
automatiquement.
Voici un exemple de ce que javance ci-dessous :

Ici, llment body est le parent des lments h1 et p, puisque les

lments h1 et p sont bien contenus dans llment body. Ainsi,
lorsquon applique un style llment body (ici, mettre le texte en
rouge), les lments p et h1 hritent automatiquement de ce style.
Cela laisse une question en suspens : que se passe-t-il lorsque lon
donne deux ordres contradictoires un lment parent et son enfant
en CSS (par exemple, donner une couleur rouge au parent et bleue
lenfant) ?
Le CSS possde ici sa logique et le style appliqu sera celui le plus
proche de llment en question. Cela signifie que si on applique un
style un lment enfant, cest bien ce style qui lui sera appliqu.

56

Cette notion dhritage est assez simple comprendre mais est trs
puissante et est la base du CSS, retenez la donc bien !

57

PARTIE II
FORMATER DU TEXTE ET
POSITIONNER DES ELEMENTS
GRACE AU CSS

58

CHAPITRE 4 : LES PROPRIETES CSS DE TYPE

FONT-
Nous allons, dans les prochains chapitres, tudier de nouvelles
proprits CSS et notamment les proprits nous permettant de
changer laspect de nos textes ou de crer le design gnral de nos
pages web.
Nous allons immdiatement commencer avec les proprits de type
font- (qui signifie police dcriture en franais).

4.1 La proprit font-size

Nous utiliserons la proprit font-size lorsque nous voudrons modifier
la taille dun texte.
Cette proprit accepte deux types de valeurs : des valeurs de type
absolu (en pixel ou en point), ou relatif (en em, ex ou en
pourcentage).
Les valeurs de type relatives sont appeles de la sorte car elles
permettent au texte de sadapter relativement aux prfrences de vos
visiteurs. En clair, si vous fixez la taille dun texte 100%, ce texte
pourra avoir des tailles diffrentes selon les rglages faits par vos
visiteurs sur leurs navigateurs.
Ce type de valeur prsente des avantages indniables, et notamment
le fait que tous vos visiteurs devraient tre capables de lire vos crits
sans difficult. De plus, le texte peut galement sadapter relativement
aux autres lments de votre page web.
Une valeur de type absolu, en revanche, va fixer la taille dun texte
dfinitivement. Le grand avantage de ce type de valeur est que vous
pouvez contrler prcisment donc le rendu de votre texte et de votre
page web.

59

Voici un exemple dutilisation de la proprit font-size, avec des

valeurs relative et absolue. Notez quon utilisera les notations px pour
pixel, pt pour point et % pour pourcentage.

4.2 La proprit font-style

La proprit font-style permet de fixer linclinaison dun texte.
La proprit font-style accepte 4 valeurs diffrentes :

Normal (valeur par dfaut) ;

Italic (change le texte en italique) ;
Oblique (penche le texte) ;
Inherit (hrite des proprits de llment parent).

Nous avons dit plus haut que tout lment enfant hritait par dfaut
des styles de ses parents. A quoi sert donc la valeur inherit ? En fait,
cette dernire sert annuler un style dans un cas bien particulier.
Imaginez par exemple que nous ayons dfini un font-style : italic pour
tous les paragraphes de notre page et un font-style : normal un div
en particulier.
Par dfinition, les paragraphes lintrieur de ce div seront en italique
puisque la notion dhritage nous dit dappliquer la rgle la plus

60

proche de llment en question (et pour un lment de type p, on

applique donc les rgles portant sur p en premier).
Si lon souhaite que les paragraphes hritent du mme style que notre
div, lutilisation de la valeur inherit est alors une excellente solution.

Certains dentre vous vont certainement me dire trs bien, mais il

tait aussi rapide dans ce cas dindiquer un font-style = normal
notre attribut class normal . Cest tout fait vrai.
Cependant, imaginez maintenant que vous connaissiez le PhP ou le
JavaScript et que vous laissiez la possibilit vos visiteurs de choisir
le font-style du div, mais que vous voulez absolument que les
paragraphes lintrieur de ce div aient le mme font-style que leur
parent.
Pour faire cela, le plus simple est dutiliser inherit. Cela doit vous
sembler peut-tre un peu tir par les cheveux pour le moment, mais il
arrive plus souvent que vous le pensez quon doive faire des choses
comme a lorsque lon cre un site !
Concernant les valeurs italic et oblique, vous pourrez constater par
vous mmes quelles rendent un rsultat visuellement quasiidentique.

61

Sans vouloir rentrer dans une discussion de puriste, sachez juste que
litalique est un tat spcial dune police, et qui nest pas support par
toutes les polices tandis que loblique correspond une inclinaison
force de la version normale dune police, et peut donc tre appliqu
toutes les polices.

4.3 La proprit font-weight

La proprit font-weight permet de fixer le poids dun texte. Cette
proprit accepte 6 valeurs diffrentes :
Normal (la valeur par dfaut) ;
Lighter (version allge de la police) ;
Bold (la police est en gras) ;
Bolder (la police est encore plus en gras) ;
Une centaine compris entre 100 et 900 (du plus lger au plus
gras) ;
Inherit (hrite des styles de ses parents).
Voyons immdiatement comment cette proprit sutilise avec un
exemple :

A noter que certaines polices et certains navigateurs ne supportent

pas les valeurs infrieures normal et suprieures bold . Si
votre valeur nest pas supporte, la police saffichera dans la valeur la
plus proche supporte (pour bolder, votre police saffichera en bold
par exemple).

62

Je vous conseille vivement de nutiliser que des valeurs numriques

qui permettent un meilleur talonnage et sont plus souples selon moi.
Notez que 400 correspond normal et 700 bold.

4.4 La proprit line-height

Comme vous aurez pu le remarquer, cette proprit nest pas une
proprit de type font- proprement parler mais concerne
galement la mise en forme du texte, donc elle a tout fait sa place
dans cette partie.
La proprit line-height sert fixer lcartement, cest--dire la
distance entre deux lignes de texte. Une pratique communment
admise est dindiquer une valeur pour notre line-height quivalent
1,5 fois la taille en pixel de notre texte.

4.5 La proprit font-family

La proprit font-family va nous permettre de choisir la police de
notre texte.
Dans tous les cas, nous dclarerons plusieurs polices (on parle de
famille de polices, do le nom de cette proprit) afin de
sassurer quau moins une des polices mentionnes soit supporte par
vos visiteurs.

63

En effet, il existe toujours des versions de navigateurs et des

ordinateurs ne supportant pas certaines polices, do tout lintrt
den dclarer plusieurs.
La premire police dclare sera le choix par dfaut. Si elle nest pas
lue par votre visiteur, alors on utilisera la seconde et etc.
Voyons tout de suite comment cette proprit sutilise avec un
exemple :

4.6 Les web safe fonts

Cela mamne donc tout naturellement parler de ce quon appelle
les Web Safe Fonts.
Les Web Safe Fonts correspondent un ensemble de polices, un
pack qui est prinstall sur toutes les machines permettant daller
sur Internet. Ce sont donc des polices lues par tout le monde, do le
mot safe qui veut dire en franais sr , hors de danger .
En gnral, on mentionnera au moins une police Web Safe comme
dernire valeur de la proprit font-family.
Parmi les Web Safe Fonts, nous avons les polices Arial, Times New
Roman, Courier New, Verdana, Georgia, Lucida, Tahoma, Trebuchet
et Garamond entre autres.

64

4.7 La proprit color

Nous allons finalement apprendre changer la couleur dun texte en
CSS avec la proprit color.
Nous ne voyons vritablement cette proprit que maintenant car
vous allez voir quil existe plusieurs faons de grer la couleur dun
texte, et certaines dentre elles ne sont pas videntes priori.
Premire faon de changer la couleur dun texte, la plus simple mais
galement de loin la plus limite : en attribuant un nom de couleur
(en anglais) en valeur de la proprit color.

Cette mthode reste trs limite car nous ne pouvons choisir que
parmi seize noms de couleurs qui sont les suivants :

65

Les valeurs que vous voyez sous le nom des couleurs sont des valeurs
quon appelle hexadcimales. Ce type de valeur va correspondre
notre deuxime mthode pour fixer la couleur dun texte.
Hexadcimal signifie qui fonctionne en base 16 . Pour le dire
simplement, un systme hexadcimal est un systme qui utilise 16
symboles pour compter, savoir dans notre cas les nombres de 0 9
et les lettres de A F. La lettre A correspondra ainsi 10, B 11, C
12, D 13, E 14 et F 15. Cela nous fait donc bien 16 symboles en
comptant le zro.
Ce systme de comptage peut paratre complexe et assez trange
pour ceux qui nont pas fait dtudes de mathmatiques, je veux bien
le comprendre. Cependant, je vous demande de ne pas en avoir peur
et de le voir tel quil est : un systme pour compter de 0 15 en soi
trs simple.
Mais quel rapport avec nos couleurs donc ? En fait, on va pouvoir
donner une valeur hexadcimale en valeur de la proprit color, afin
de choisir trs prcisment la couleur voulue. Cette valeur devra
commencer par un dise, suivie de 6 symboles choisis entre 0 et F.

66

Les deux premiers symboles vont dfinir lintensit de rouge de notre

couleur, les deux suivants lintensit de vert et les deux derniers
lintensit de bleu. Vous pouvez imaginer que cela se passe comme
lorsque vous mlangez de la peinture afin dobtenir une couleur
prcise.
Lintrt de ce type de valeur est de pouvoir choisir parmi plus de 16
millions de nuances diffrentes. Si vous avez bien suivi, lchelle
dintensit va de 0 255 pour chaque binme de valeurs, 00 tant
lintensit la plus faible et FF lintensit la plus forte.
Pourquoi de 0 255 ? Cest en fait trs simple ! Considrez que 00
correspond 0 sur notre chelle dintensit. 01 correspond 1, 02
2, 0A 10 et 0F 15. Aprs 0F, on a 10 (lisez un, zro pour
comprendre plus clairement) qui correspond 16 ; 11 qui correspond
17 ; 1A qui correspond 26 et etc. jusqu FF qui correspond
255. Cela fonctionne finalement comme pour nos dizaines, part
quici on compte en seizaines.
Nhsitez pas vous entraner en faisant diffrents essais pour voir
comment se comporte la proprit color avec ce type de valeur et
tre bien certain de matriser tout cela !

67

Le plus important est encore une fois de retenir que les deux premiers
symboles correspondent lintensit de rouge, les deux suivants
lintensit de vert et les deux derniers lintensit de bleu.
Enfin, le dernier type de valeurs que lon peut utiliser est le type RGB
(pour Red Green Blue). Nous allons voir que ce type de valeurs et les
valeurs hexadcimales reposent sur la mme base.
Cette fois-ci, nous allons devoir indiquer trois nombres compris entre
0 t 255 en valeur. Le premier nombre correspond une nouvelle fois
lintensit de rouge, le second lintensit de vert et le troisime
lintensit de bleu que lon veut utiliser pour former notre couleur
finale.

Vous le voyez, il existe de nombreuses similitudes entre les notations

en hexadcimal et en RGB. On peut dailleurs tout fait convertir
lhexadcimal en RGB, en partant du principe que 00 en hexa
correspond 000 en RGB et que FF en hexa correspond 255 en
RGB.
Je vous conseille de vraiment vous entrainer avec chaque type de
valeurs afin de toutes bien les matriser car, selon les situations, vous
utiliserez plutt un type ou un autre dans le futur.

68

4.8 Lopacit dun texte

Le CSS nous offre deux mthodes pour fixer le niveau dopacit de
nos textes.
Si nous avons utilis une valeur de type nom de couleur ou
hexadcimale avec la proprit color, nous devrons utiliser la
proprit opacity pour fixer lopacit de nos textes.
Cette proprit prend une valeur entre 0 (totalement transparent) et 1
(totalement opaque). Attention : noubliez pas quon utilise des points
et non pas des virgules pour les nombres virgule tant donn quon
utilise le systme dcriture anglo-saxon lorsque lon code.
Si nous avons utilis une valeur de type RGB avec la proprit color,
nous pouvons galement matriser lopacit de notre texte dune
faon plus simple, en utilisant une valeur de type RGBa. Dans ce cas,
il suffit de rajouter une valeur pour lopacit de notre texte aprs les
trois valeurs de notre proprit RGB.
En pratique, la proprit sutilise donc de cette manire :

69

CHAPITRE 5 : LES PROPRIETES CSS DE TYPE

TEXT-
Les proprits de type text- servent galement fixer lapparence
de nos textes. Elles viennent donc complter les proprits de type
font- vues au chapitre prcdent.

5.1 Grer lalignement dun texte

Pour modifier lalignement dun texte, nous allons utiliser la proprit
text-align.
Cette proprit peut prendre cinq valeurs diffrentes :

Left : le texte sera align sur la gauche ; valeur par dfaut ;

Center : le texte sera centr ;
Right : le texte sera align sur la droite ;
Justify : le texte sera justifi ;
Inherit : hrite des proprits de llment parent.

Il est bon de noter que le centrage ou lalignement se fait toujours par

rapport llment parent le plus proche du texte.
Dans lexemple suivant, on voit bien que mon paragraphe pdiv est
align droite de son lment parent (cest--dire le div qui fait luimme 100px de large) et non pas de la page. Le second paragraphe,
nayant pour parent que llment body, est donc bien lui centr sur
la page.

70

5.2 La proprit text-decoration

On va pouvoir modifier la dcoration dun texte grce la proprit
text-decoration.
On peut choisir parmi six valeurs pour cette proprit :
Underline : le texte sera soulign ;
Overline : une ligne apparatra au dessus du texte ;
Line-through : le texte sera barr ;
Blink : le texte clignotera (attention, ne fonctionne pas sur tous
les navigateurs) ;
Inherit ;
None : pas de dcoration, comportement par dfaut.

Voyons quelques exemples dutilisation de cette proprit ensemble :

71

5.3 La proprit text-indent

La proprit text-indent sert grer lindentation dun texte.
Lindentation, pour ceux qui lauraient oubli, est le dcalage dun
texte sur la droite gnralement.
Cette proprit accepte des valeurs de type absolu (px, pt) et relatif
(em, ex, %). Vous pouvez galement lui attribuer des valeurs
ngatives afin de dcaler votre texte sur la gauche.

5.4 La proprit text-transform

72

On utilisera la proprit text-transform pour modifier laspect des

caractres dun texte (majuscules ou minuscules).
Nous pouvons choisir parmi cinq valeurs :
Uppercase : transforme tout le texte en majuscules ;
Lowercase : met tout le texte en minuscules ;
Capitalize : met uniquement la premire lettre de chaque mot
en majuscule ;
None : pas de transformation ;
Inherit : hrite des styles de llment parent.
Exemple :

5.5 Les proprits letter-spacing et word-spacing

Les
proprits
letter-spacing
et
word-spacing
permettent
respectivement dajuster lespace entre les lettres et entre les mots.
Ces proprits se comportent de manire similaire et acceptent des
valeurs absolues (px, pt) et relatives (ex, em, %).
Exemple :

73

5.6 Les ombres des textes

On peut ajouter des effets dombre un texte en utilisant la proprit
text-shadow.
Cette proprit ncessite au minimum deux valeurs pour fonctionner.
Cependant, dans la grande majorit des cas, nous en utiliserons
quatre, dans lordre vu ci-dessous.
Les trois premires valeurs correspondent des longueurs et la
dernire est la couleur de lombre :

1re valeur : dplacement horizontal de lombre ;

2me valeur : dplacement vertical de lombre ;
3me valeur : rayon de propagation (flou gaussien) de lombre ;
4me valeur : couleur de lombre (accepte les mmes valeurs que
la proprit color ).

Voyons ensemble comment cette proprit fonctionne :

74

75

CHAPITRE 6 : LE MODELE DES BOITES

Le modle des botes est un concept essentiel que vous devez
absolument comprendre pour ensuite mettre en page et positionner
les diffrents lments de votre page web.
Le modle des botes nous dit que tout lment dune page est une
bote rectangulaire et peut avoir un padding, une marge et des
bordures .
Ca mrite dtre rpt : tout lment, quil soit un lment de type
block ou de type inline, est une bote rectangulaire.
Les proprits permettant dindiquer la longueur, la largeur, la marge,
le padding et les bordures dun lment forment ce quon appelle le
modle des botes.
Le modle des botes illustr :

La premire bote est dfinie par la longueur et la largeur dun

lment. La padding, ou marge intrieure, forme ensuite la seconde

76

bote. Puis viennent les bordures qui constituent la troisime bote.

Enfin, la marge extrieure vient former la quatrime et dernire bote.

6.1 Hauteur et largeur dun lment

Tout lment possde une hauteur et une largeur par dfaut.
La hauteur dun lment est dtermine par son contenu. Par
exemple, des paragraphes dune ligne ou de deux lignes noccuperont
pas la mme hauteur.
La largeur par dfaut dun lment est avant tout dtermine par son
type (block ou inline) puis par son contenu si llment est de type
inline. En effet, rappelez vous que les lments de type block
occupent automatiquement toute la largeur disponible.
Pour modifier la hauteur dun lment, on utilise la proprit height
laquelle on attribue une valeur en px, % ou gale auto dans la
grande majorit des cas.
En utilisant la valeur auto, on laisse le navigateur de nos visiteurs
dcider de la hauteur que doit prendre llment vis. Cela est trs
utile dans le cas o lon veut conserver les proportions dune image
tout en ladaptant la taille de lcran de nos visiteurs.
Pour modifier la largeur dun lment, on utilise cette fois la proprit
width. Cette proprit prend les mmes types de valeurs que height.
Illustrons tout cela par un exemple. Jai ajout des bordures afin que
vous puissiez bien voir la taille de chaque lment. Ne vous souciez
pas de la proprit border pour le moment.

77

6.2 Les bordures et les bordures arrondies

Tout dabord, vous devez savoir quil existe de nombreuses sortes de
bordures dont certaines sont plus ou moins bien supportes par
certains navigateurs.
Pour crer des bordures et les personnaliser, nous allons avoir besoin
de trois proprits :
Border-width, qui va dfinir lpaisseur de la bordure (valeur en
px) ;
Border-style, qui va dfinir le style de la bordure ;
Border-color, qui va dfinir la couleur de la bordure (accepte les
mmes valeurs que la proprit color ).
La proprit border-style peut prendre de nombreuses valeurs
diffrentes. Les valeurs les plus utilises sont solid, dotted (pointill) et
dashed (tiret). Vous pouvez voir ci-dessous le rsultat pour chaque
style de bordure :

78

Et voici un exemple dutilisation des proprits de type border :

Une fonctionnalit longtemps attendue par les webmasters et les

dveloppeurs et qui a vu le jour avec le CSS3 est la possibilit de
crer des bordures arrondies.
Pour faire cela, nous allons utiliser la proprit border-radius. Cette
proprit va prendre une valeur : la taille de langle, en px.
Notez que lon peut dfinir des angles diffrents pour chaque ct de
nos bordures en utilisant les mots clefs top-left, top-right, bottom-left
et bottom-right.

79

Notez galement que ces mots clefs sont souvent employs en CSS,
ensemble ou sparment (que top, ou que left par exemple).
Nhsitez donc pas les tester avec certaines proprits dj vues ou
que lon va voir !

6.3 Les marges intrieures

Pour dfinir les marges intrieures dun lment, nous utiliserons la
proprit padding.
On peut considrer quun lment HTML possde toujours une
bordure. Celle-ci peut tre explicite, cest--dire matrialise laide
des proprits CSS vues prcdemment ou implicite (invisible).
La proprit padding va dfinir lespace entre llment en soi et sa
bordure. Cette proprit doit tre utilise uniquement dans ce but, et
jamais pour positionner des lments dans une page ou les uns par
rapport aux autres.
On donnera gnralement une valeur en px padding. Notez que
lon peut dfinir des espacements diffrents pour chaque marge
intrieure de nos lments en utilisant les proprits padding-right,
padding-bottom, padding-left et padding-top.

80

Illustrons immdiatement ce que nous venons de dire :

6.4 Les marges extrieures

Pour dfinir la taille des marges extrieures, cest--dire de lespace
lextrieur des bordures dun lment, nous allons utiliser la proprit
margin.
Contrairement la proprit padding, la proprit margin peut tout-fait tre utilise pour positionner des lments dans une page ou les
uns par rapport aux autres.
Nous attribuerons gnralement des valeurs en px ou en % cette
proprit. Tout comme la proprit padding, nous allons pouvoir des
marges diffrentes de chaque ct de nos lments avec les proprits
margin-right, margin-bottom, margin-left et margin-top.
Notez que les valeurs par dfaut des marges intrieures et extrieures
peuvent lgrement diffrer dun navigateur un autre. Cela peut
impacter le design gnral de votre site pour certains de vos visiteurs.

81

Afin de sassurer que chaque visiteur verra un rsultat conforme nos

attentes, nous pouvons utiliser un reset CSS pour notre padding et
notre margin.
Dans ce cas l, cest trs simple, il suffit par exemple dappliquer un
padding et une margin avec des valeurs gales zro notre lment
body. Ensuite, on prcisera les diffrentes marges souhaites nos
lments enfants.
En pratique, voici comment a se passe :

6.5 Les ombres des botes

On peut crer des ombres autour des botes, tout comme on lavait
fait pour nos textes prcdemment.

82

Nous allons cette fois-ci utiliser la proprit box-shadow. Cette

dernire fonctionne exactement comme text-shadow, avec deux
valeurs obligatoires et quatre recommandes pour marcher :

1re valeur : dplacement horizontal de lombre ;

2me valeur : dplacement vertical de lombre ;
3me valeur : rayon de propagation (flou gaussien) de lombre ;
4me valeur : couleur de lombre (accepte les mmes valeurs que
la proprit color ).

Notez que dans le cas des ombres des botes, il peut tre intressant
de rajouter la fin une dernire valeur, linset, si lon souhaite crer
une ombre intrieure.

6.6 Faire flotter un lment

83

Pour aligner des lments les uns par rapport aux autres, on peut les
faire flotter . Pour faire flotter un lment, nous utiliserons la
proprit float avec les valeurs suivantes : left, right, none ou inherit.
Un lment flottant va sortir du schma naturel (du flow ) dune
page web pour venir se placer contre le bord gauche ou droit de
llment qui le contient ou contre le bord de la page.
Lorsque lon fait flotter un lment, les lments aprs llment
flottant vont venir se positionner ct de celui-ci.

Dans lexemple ci-dessus, on remarque que llment strong, contenu

dans llment p2, va venir se placer dans le coin droite de son
lment parent (llment p2 donc).
Llment p1 va lui se placer gauche dans la page tandis que
llment p2 va se placer droite ; ct de llment p1.
Gnralement, on utilisera plutt la proprit float sur des lments
de type inline comme des images par exemple. En effet, cette

84

proprit peut tre la cause de problme daffichages lorsquelle est

mal utilise sur des lments de type block.
Si lon veut quun lment suivant un lment flottant vienne se
placer sous cet lment flottant, il faudra utiliser la proprit clear.
Celle-ci accepte trois valeurs : left, right ou both :
left : un lment va se placer en dessous aprs un float left ;
right : un lment va se placer en dessous aprs un float right ;
both : un lment va se placer en dessous aprs un float left ou
un float right.
Voici ce que a donne en pratique :

6.7 La proprit display

La proprit display est une proprit extrmement puissante : elle
permet de changer le type dun lment de block inline ou dinline
block.

85

Cette proprit supporte quatre valeurs diffrentes qui correspondent

aux diffrents types dlments possibles : inline, block, inline-block
et none.
La nouveaut ici est le type inline-block. Ce nouveau type ne peut
tre donn un lment que grce la proprit display. Il va tre un
mix des types inline et block.
Un lment de type inline-block se comporte de cette faon :
llment en soi (contenu et botes) se comporte comme un type
block tandis que le contenu seulement se comporte comme un type
inline.
Pour le dire plus simplement, un lment de type inline-block se
comportera comme un lment de type inline except que lon va
pouvoir contrler prcisment sa hauteur et sa largeur.

6.8 La proprit position

La proprit position est une autre proprit trs puissante nous
permettant de dfinir lemplacement dlments HTML dans une
page. Cette proprit peut prendre cinq valeurs :

86

 Static : valeur par dfaut, ne change pas la position de base dun

lment ;
Absolute : permet de positionner un lment nimporte o dans
la page, par rapport son lment parent direct ;
Fixed : permet de positionner un lment nimporte o dans la
page. De plus, llment reste visible si vous descendez ou
remontez le long dune page ;
Relative : permet de replacer un lment relativement par
rapport son positionnement par dfaut ;
Inherit : llment hrite des proprits de son parent.
Pour ensuite jouer sur la position de nos lments, nous utiliserons les
mots clefs right, bottom, left et top.

Dans cet exemple, notre paragraphe p1 a un positionnement fixed et

a t dcal de 80px sur la gauche par rapport au bord de la page.

87

Le paragraphe p2 possde lui une position relative. Il a t dcal de

50px par rapport son positionnement de base (par dfaut, il aurait
t plac au dessus de notre p1 cause de son positionnement fixed).
Llment strong possde un positionnement absolute. Sans notre
left :150px, il aurait t coll sur le bord gauche de son lment
parent, llment p2.
Notez quun positionnement absolute sur un lment annule la
proprit float si on lui en a appliqu une.

6.9 Le z-index
Parfois, lorsque lon cre le design de nos pages web, il arrive que
deux lments se chevauchent selon certaines circonstances.
Il peut alors tre utile de savoir comment indiquer quel lment doit
apparatre au dessus de quel autre en cas de chevauchement.
Pour cela, nous utiliserons la proprit z-index. Celle-ci fonctionne
avec tous les lments positionns et permet dindiquer quel lment
doit tre au dessus de quel autre en cas de conflit.
Un lment positionn est un lment auquel on a appliqu la
proprit position avec une valeur soit absolute, soit relative, soit
fixed.
Le z-index ne fonctionnera donc pas sur des lments positionns en
static (qui est la valeur par dfaut).
Un lment avec un z-index possdant une valeur plus leve quun
autre sera au dessus de cet autre lment. Cette proprit va donc
sutiliser de cette manire :

88

Dans lexemple prcdent, par dfaut, llment p2 devrait tre par

dessus llment p1.
Or, en appliquant un z-index avec une valeur plus leve p1, on
arrive refaire passer p1 par dessus p2 (on peut le voir au niveau des
bordures).

6.10 Notations long-hand et short-hand

Vous lavez peut-tre remarqu dans les exemples prcdents, il mest
parfois arriv dcrire les trois proprits relatives aux bordures sous
la forme condense dune seule proprit border.
La premire criture, avec les trois proprits de type border, est ce
que lon appelle une notation long-hand, tandis que la forme
condense est une notation short-hand.
Jusqu prsent, je ne vous ai fait crire que des proprits sous leur
forme long-hand afin que vous compreniez bien les bases et la
logique du CSS et afin de ne pas compliquer inutilement les choses.

89

Dornavant, vous avez tout fait le niveau pour utiliser des notations
short-hand et je vous encourage les utiliser ds que possible (cellesci sont plus rapides crire et donc moins gourmandes en code et en
temps dexcution).
Voici ci-dessous une liste de quelques proprits acceptant une
criture short-hand. Encore une fois, crire une proprit sous sa
forme long-hand ou short-hand produira exactement le mme
rsultat.
Long Hand
[font-style] [font-weight] [font-size]/[line-height]
[font-family]
[border-width] [border-style] [border-color]
[margin-top] [margin-right] [margin-bottom]
[margin-left]
[background-color] [background-image]
[background-repeat] [background-attachment]
[background-position]

Short Hand
font
border
margin
background

90

PARTIE III
FONCTIONNALITES
AVANCEES

91

CHAPITRE 7 : GESTION DU BACKGROUND (LE

FOND)
7.1 Ajouter de la couleur ou une image pour le fond
Commenons par voir comment on peut ajouter une couleur au fond.
Pour ajouter une couleur de fond, nous allons utiliser la proprit
background-color.
Cette proprit accepte les mmes valeurs que la proprit color que
nous avons vu prcdemment, savoir des valeurs de type nom de
couleur, hexadcimale ou RGB.

On peut galement ajouter une image de fond. Pour ce faire, on va

cette fois utiliser la proprit background-image.
On lui donne en valeur lurl de limage qui, en loccurrence, prend la
forme dun chemin relatif comme nous avions vu pour les liens.
Voyons immdiatement comment cette proprit fonctionne ! Tout
dabord, il va nous falloir une page HTML et une page CSS que nous
allons lier entre elles et enregistrer dans le mme dossier pour plus de
simplicit.

92

Ensuite, il va nous falloir une image. On lenregistre galement dans

le mme dossier.

Retour finalement sur notre page CSS et utilisons maintenant la

proprit background-image sur notre lment body (on peut utiliser
cette proprit sur nimporte quel lment mais en gnral ce sera sur
llment body).

93

Comme vous pouvez le constater, par dfaut, limage est rpte

horizontalement et verticalement pour occuper tout lespace de notre
page web puisque nous lavons insre dans notre lment body.
Si votre image occupe dorigine plus de place que llment dans
laquelle vous linsrez, elle ne sera donc pas rpte mais au
contraire rogne.
Cest ce quil se passe dans lexemple suivant o nous avons insre
notre image en fond de notre lment p auquel nous avons donn des
dimensions de 200px * 100px :

94

Notez que pour insrer une image de fond nous pouvons galement
utiliser la proprit short-hand background plutt que la proprit
background-image.
Cette proprit gre galement dautres aspects de la mise en forme
du fond que nous allons voir ensuite.

7.2 Position et rptition du fond

La proprit background-repeat nous permet de grer la rptition de
notre fond. Cette proprit accepte quatre valeurs :
Repeat : le fond se rpte horizontalement et verticalement,
cest le comportement par dfaut ;
Repeat-x : le fond ne se rpte quhorizontalement ;
Repeat-y : le fond ne se rpte que verticalement ;
No-repeat : le fond ne se rpte pas.
Voyons immdiatement un exemple ensemble :

95

Pour contrler la position de notre image de fond, nous allons utiliser

la proprit background-position.
Cette proprit a besoin de deux valeurs pour fonctionner : une
coordonne horizontale et une coordonne verticale. Le fond sera
dcal par rapport au bord en haut gauche de son lment parent.

96

Voici immdiatement un exemple pratique :

Dans cet exemple, jai dcal mon image de 100px vers la droite et
de 10px vers le bas par rapport au coin en haut gauche de llment

97

body, son parent. Rappelez vous que llment body occupe toute la
page.

7.3 Fixer le fond ou le faire dfiler avec la page

Pour fixer le fond et ainsi donner un effet intressant, on utilise la
proprit background-attachment laquelle on donne une valeur
gale fixed.
Cette proprit accepte deux valeurs : fixed donc ou scroll, qui est la
valeur par dfaut et qui va faire dfiler le fond en mme temps que la
page.

7.4 Insrer plusieurs images de fond

Il est possible, grce au CSS3, dinsrer plusieurs images de fond.
Pour ce faire, on va devoir utiliser la notation short-hand de nos
proprits relatives au fond et donc la proprit background. On va
ensuite tout simplement sparer les dclarations par une virgule.
Voyons immdiatement comment a fonctionne dans les faits! Pour
cela, on va prendre deux nouvelles images quon va placer dans un
sous-dossier et dans un dossier parent pour changer un peu et voir
tous les cas de figure.
En pratique, si votre site est bien construit et pas trop compliqu, vous
devriez avoir toutes vos images dans un dossier nomm images
mais pour le moment on sexerce !

98

Jai donc trois images dans trois dossiers diffrents :

Mon image de colibri qui est dans le mme dossier que mes
fichiers HTML et CSS ;
Mon image de pingouin qui est dans un dossier parent ;
Mon image de panda qui est dans un sous-dossier.
Cela est un peu tir par les cheveux, jen conviens, mais encore une
fois nous nous entranons pour le moment.
Il ne nous reste donc plus qu utiliser notre proprit background de
la faon suivante :

99

Ici, jai insr mes trois images dans llment body, en leur
demandant dtre fixe et de ne pas se rpter. Jai dcal mon image
colibri de 300px sur la droite tandis que jai coll mon image
pingouin en haut gauche grce top left et mon image panda en
haut droite grce top right.
Notez que deux images peuvent tout fait se chevaucher. Par dfaut,
la premire image dclare sera au dessus. Attention donc lordre
de dclaration !

7.5 Crer un fond en dgrad : les prfixes vendeurs

Jespre que tout est clair jusqu prsent, car il est maintenant temps
dapprendre comment crer un fond en dgrad et le problme va se
complexifier lgrement.
Tout dabord, il faut savoir que nous avons deux types de dgrad
notre disposition : des dgrads linaire ou radial.
Les fonds en dgrad sont considrs comme des images et donc,
ce titre, nous allons nouveau utiliser la proprit background-image
pour les crer.

100

Mais avant de rentrer dans le vif du sujet, je dois faire un petit apart
sur ce quon appelle les prfixes vendeurs .
Il y a quelques annes de cela, tous les navigateurs ne reconnaissaient
pas les mmes proprits et ne les implmentaient pas de la mme
manire. En loccurrence, chaque navigateur avait une mthode bien
lui dimplmenter un fond en dgrad.
Les prfixes vendeurs ont alors t crs afin que chaque navigateur
affiche une proprit de la mme manire que les autres. Ce sont des
petits mots clefs qui vont tre placs avant la dclaration du type de
dgrad souhait.
Mme si aujourdhui la majorit des navigateurs suivent des standards
qui ont t tablis et implmentent les proprits de la mme faon,
cela peut toujours tre utile (et a ne cote rien) de mentionner des
prfixes vendeurs dans le cas o certains de vos visiteurs utiliseraient
des vieilles versions de navigateurs.
Les prfixes vendeurs sont les suivants :

Pour Chrome et Safari : -webkitPour Mozilla : -mozPour Internet Explorer : -msPour Opera : -o-

7.6 Crer un fond en dgrad : les dgrads de type linaire

Pour crer un dgrad linaire, on utilise les mots clefs lineargradient. On peut ensuite spcifier autant de valeurs que souhaites,
chaque valeur correspondant une couleur de notre dgrad.
Afin que le tout fonctionne correctement, vous devez mentionner
chaque prfixe vendeur et il est recommand de finir avec le lineargradient sans aucun prfixe (ce sera la valeur par dfaut) comme
ceci :

101

Les dgrads linaires peuvent aller du haut vers le bas, de bas en

haut, de gauche droite, de droite gauche en encore en diagonale.
Par dfaut, cependant, les dgrads linaires partent du haut vers le
bas dun lment. On peut choisir linclinaison de nos dgrads en
utilisant des mots clefs ou en spcifiant la valeur en degr de langle
voulu avant dindiquer les couleurs du dgrad.
Pour que notre dgrad aille vers la droite, on utilisera la valeur to
right, pour quil aille gauche to left et pour quil aille de bas en haut
to top :

102

7.7 Crer un fond en dgrad : les dgrads de type radial

Un dgrad de type radial est un dgrad cr partir dun point
central.

103

Les dgrads de type radial fonctionnent sur le mme schma que

ceux de type linaire. Cette fois-ci, nous allons utiliser les mots clefs
radial-gradient comme ceci :

Evidemment, il nest plus question ici dindiquer une quelconque

direction (cela naurait pas de sens puisque le dgrad part du centre
dans toutes les directions.
Cependant, on peut choisir si lon souhaite que notre dgrad ait la
forme dun cercle ou dune ellipse en prcisant les mots clefs circle et
ellipse juste avant nos couleurs.

104

On peut galement choisir avec prcision les dimensions et la forme

de notre dgrad en prcisant deux chiffres (gnralement en px)
correspondant respectivement la largeur et la hauteur de notre
dgrad.

On peut galement utiliser une combinaison de mots clefs et de

valeurs pour dplacer le centre de notre dgrad radial :

105

Dans lexemple ci-dessus, nous avons dplac le centre du dgrad

vers la droite (il est 70% sur la droite par rapport son lment
parent) et lavons fix 160px du bord suprieur de son lment
parent.
Nous aurions galement pu combiner mots clefs et valeurs en
crivant at right 160px ou encore at 40% bottom .
Vous laurez compris, la premire valeur correspond au dplacement
horizontal du centre de notre dgrad tandis que la seconde
correspond au dplacement vertical de ce centre. Par dfaut, le
dgrad radial sera centr.
Notez quil est possible dutiliser des options trs avances de
personnalisation des dgrads que nous naborderons pas dans ce
manuel car celles-ci sont trs peu utilises. Nhsitez pas cependant
vous renseigner ce sujet si cela vous intresse !

106

CHAPITRE 8 : INTEGRER DES IMAGES, DE

LAUDIO ET DES VIDEOS DANS UNE PAGE WEB
GRACE AU HTML5
8.1 Introduction
Tout dabord, il faut savoir que sil est vrai que linsertion dimages en
HTML est assez simple et est bien gre par tous les navigateurs
depuis quelques annes maintenant il nen est pas de mme pour
laudio et la vido.
En fait, il a fallu attendre le HTML5 pour voir linsertion de contenus
audio et vido facilits et pour trouver des navigateurs qui acceptaient
ces contenus.
Dans ce nouveau chapitre, nous allons commencer par voir comment
insrer une image puis nous verrons linsertion de contenus audio et
vido.

8.2 Insrer une image

Pour commencer sur de bonnes bases avec les images, je vais devoir
vous parler des diffrents formats dimages.
Lorsque vous enregistrez une image sur votre ordinateur, vous pouvez
en thorie choisir entre diffrents formats avec entre autre le png, le
jpg ou jpeg, bitmap ou gif pour ne citer que les plus connus.
Comme vous vous en doutez, ces formats ne sont pas strictement
quivalents et chaque format t cre pour un type prcis dimages.
Si votre image est une photographie, je vous recommande dutiliser le
format jpg. Si, en revanche, votre image est un dessin ou tout autre
type dimage statique, prfrez le png qui est un type qui gre
galement la transparence. Enfin, si votre image est anime, vous

107

devrez choisir le format gif. Oubliez le bitmap qui est un format lourd
et sans rel avantage.
Pensez choisir avec attention le nom de vos images et vitez les
caractres spciaux et les espaces (prfrez les underscores ou les
tirets).
Pour insrer une image (finalement !), nous allons utiliser llment
HTML img. Llment img doit tre plac au sein dun lment de
type block, comme llment p ou un div par exemple.
Pour que votre code soit valide, vous devez ajouter deux attributs
llment img : lattribut source, abrg src et lattribut alternative,
quon note alt.
Lattribut src indique le chemin de limage. Vous pouvez lui donner
un chemin relatif ou absolu. Lattribut alt sert donner un texte
descriptif a photo. Ce texte est utile notamment dans les cas o
votre image ne saffiche pas ou pour les robots (de Google, entre
autres).
Enfin, vous pouvez galement ajouter lattribut facultatif title, ce qui
aura pour effet dafficher un texte lorsque vos visiteurs passeront la
souris sur votre image.
Illustrons immdiatement ce que nous venons de voir avec un
exemple :

108

Comme vous pouvez le voir, jai ici indiqu une adresse absolue en
source de mon image (je suis alle la chercher sur Google Image).
Notez que llment img est reprsent par une balise orpheline.

8.3 Ajuster et positionner une image

Pour ajuster la taille dune image en CSS, on utilise les proprits
height (hauteur) et width (largeur) que lon connat dj sur notre
lment img.
Si lon ne spcifie quune hauteur ou quune largeur, la deuxime
dimension va sajuster automatiquement. Attention, lorsque lon
spcifie une hauteur et une largeur, ne pas trop casser les
proportions initiales de limage pour un meilleur rendu !
Une astuce performance et rfrencement : essayez tant que possible
dajuster la taille de vos images avant de les mettre sur votre serveur
(avec Paint ou PhotoShop par exemple).
En effet, si vous envoyez une image de 2000px de large sur votre
serveur et que vous la redimensionnez 400px par exemple par la
suite avec le CSS, laffichage peut tre ralenti pour vos visiteurs.

109

Pourquoi ? Car, chaque fois, notre serveur va envoyer limage au

format original et limage devra tre redimensionne au format
souhait par le navigateur de vo visiteurs. Or, cela use videmment
beaucoup plus de mmoire et va donc influer sur le temps daffichage
de notre page web.
Llment img est un lment de type inline par dfaut. Cela sousentend quune image va se positionner sur la mme ligne quun autre
contenu de type inline.

Souvent, lors de la cration dun site web, nous voudrons quune

image occupe sa propre ligne. Dans ce cas l, il nous faudra utiliser la
proprit display en changer le type de llment img.

110

On peut galement utiliser la proprit float pour positionner une

image, en utilisant les valeurs right ou left. Pour ajuster lespace entre
une image et le contenu qui lentoure, on va utiliser la proprit
margin. On peut mme crer un cadre en utilisant galement les
proprits padding et border.

111

8.4 Insrer de lAudio

Tout comme pour les images, il existe diffrents formats audio.
Cependant, a se complique avec laudio car il nexiste pas de format
support par tous les navigateurs. Cela signifie quil va falloir indiquer
plusieurs formats lorsque lon va insrer de laudio en HTML.

Personnellement, je recommande dutiliser au minimum les formats

mp3 et ogg qui sont les deux formats les mieux supports.
Pour ajouter de laudio sur une page web, on va utiliser llment
audio. Tout comme pour llment img, llment audio va demander
un attribut src pour fonctionner. Cet attribut prendre en valeur lURL
du fichier audio.
Toutefois, si vous ncrivez que cela, vous ne verrez rien lcran. En
effet, par dfaut, llment audio nest pas affich sur les pages web. Il
va donc nous falloir utiliser dautres attributs.
Lattribut controls, tout dabord, va servir afficher les boutons de
contrle tels que les boutons lecture, pause et volume entre autres.
Cet attribut est donc bien videmment obligatoire.

112

Lattribut autoplay va nous permettre de lancer automatiquement le

fichier audio lors du chargement de la page. Lattribut loop nous
permet de faire rpter la musique en boucle.
Lattribut width est utile pour modifier la largeur par dfaut de la barre
de llment audio.
Enfin, lattribut preload nous permet de sauvegarder de la bande
passante et daccrotre les performances de notre site. Cet attribut
peut prendre trois valeurs diffrentes : metadata, auto et none. En
pratique, on utilisera gnralement la valeur auto qui va prloader
toutes les informations et les donnes.
Entre les deux balises de llment audio, on peut ajouter un texte qui
sera affich dans le cas o le navigateur ne supporterait pas le format
audio choisi comme par exemple : Mettez jour votre navigateur,
on vit au 21 sicle ! .
En thorie, il faudrait donc crire ceci pour insrer de laudio dans
une page web :

Cependant, en crivant notre lment audio comme cela, on ne peut

pas insrer diffrents formats audio pour les diffrents navigateurs, ce
qui est trs gnant.

113

En pratique, nous utiliserons donc un deuxime lment source et

crirons cela pour insrer de laudio qui sera lu par tous les
navigateurs :

Ainsi, le navigateur de vos visiteurs lira la version quil reconnat et

ignorera les autres.
Notez que jai donn des valeurs gales aux noms des attributs pour
controls et autoplay. En thorie, il nest pas obligatoire de prciser de
valeur pour ces attributs.
Cependant, comme tout attribut doit thoriquement possder une
valeur en HTML, il est plus propre dcrire cela comme je lai fait.
Libre vous de faire comme vous le voulez !

8.5 Insrer de la Vido

Pour crer et afficher une vido, il nous faut obligatoirement trois
choses : un codec audio (format mp3, ogg, etc.), un codec video
(h.264, ogg thoera, webM) et un format contener dans lequel on va
stocker ces deux lments (gnralement avi, mp4 ou mkv).
L encore, il nexiste pas de format support par tous les navigateurs
et il est donc recommand den utiliser plusieurs pour tre certain que
la vido soit correctement affiche.

114

Pour ajouter une vido, on utilise llment video. Les attributs pris
par cet lment sont exactement les mmes que ceux pris par
llment audio, savoir : src, autoplay, controls, loop, preload et
width.
Contrairement aux lments audio, une vido sera par dfaut affiche
sur une page web.
Il est galement possible dajouter un attribut poster votre vido.
Lattribut poster permet de tlcharger et dafficher une image qui
sera affiche avant le lancement de la vido.
Une illustration ? Bien sr !

115

Une autre alternative, beaucoup plus simple, pour ajouter de la vido

ou de laudio sur son site est de stocker ces contenus sur des sites
comme YouTube, Dailymotion ou Vimeo puis de les intgrer votre
site grce au code dintgration fourni.
De cette manire, vous naurez plus aucun problme daffichage
quelque soit le navigateur de vos visiteurs puisque la transcription
dans diffrents formats est effectue par les sites hbergeurs (et autant
vous dire que cest trs complet !).

8.6 Les Elments Figure et Figcaption

Les lments figure et figcaption ont t crs pour marquer
smantiquement du contenu comme des images, de laudio ou de la
vido.

116

Llment figure est un lment de type block. On lutilise autour

dimages, de contenus audio ou vido ou de blocs de code.
Lide est dutiliser llment figure pour envelopper du contenu
lorsque celui-ci nest pas strictement dcoratif. A lintrieur de
llment figure, on peut utiliser llment HTML figcaption qui va
nous permettre daccoler une lgende notre contenu.

117

CHAPITRE 9 : LES TABLEAUX

9.1 Cration dun tableau simple
Les tableaux en HTML ne servent et ne doivent tre utiliss que pour
organiser des donnes.
Pour crer un tableau, il va nous falloir utiliser au minimum trois
lments : les lments table, tr et td.
Llment table dfinit le tableau en soi. A lintrieur de cet lment
table, on va utiliser llment tr (table raw) pour ajouter des lignes
notre tableau.
Tout tableau en HTML sera construit ligne par ligne.
Enfin, on utilise llment td (table data) pour ajouter des cellules
dans nos lignes.
Si lon insert plusieurs lments td lintrieur dun lment tr, des
colonnes vont se crer automatiquement lintrieur de notre ligne.
Voyons un premier exemple ensemble :

118

Voil, nous venons de crer notre premier tableau ! Cependant, celuici ne ressemble pas vraiment limage que vous vous faisiez dun
tableau je suppose Et cest normal : nous ne lavons pas encore mis
en forme !

9.2 Mise en forme dun tableau

Tout dabord, nous allons commencer par ajouter des bordures
notre tableau. Pour cela, nous allons utiliser les proprit CSS border,
et border-collapse.
On connat dj la proprit border qui va nous permettre de crer
des bordures autour de chaque cellule de notre tableau. Ensuite, pour
coller ces diffrentes bordures entre elles, nous allons utiliser la
proprit border-collapse.

119

Cette proprit accepte trois valeurs : collapse (les bordures des

cellules se collent), separate (valeur par dfaut) et inherit. Cela
ressemble dj beaucoup plus un tableau !

Faites bien attention appliquer la proprit border-collape

llment table et la proprit border vos lments td, sinon a ne
marchera pas !
Gnralement, les tableaux possdent une ligne den-tte. Pour crer
cette ligne, on va cette fois-ci utiliser llment th (table head) la
place du ou des lments td de notre premire ligne. Dun point de
vue smantique, llment th est td ce que llment h1 est p.
Si lon veut crer une ligne den-tte en colonne, il suffit de remplacer
le premier lment td de chaque lment tr par des lments th.

120

Evidemment, on noubliera pas dappliquer notre proprit border

nos lments th galement.

9.3 Construire un tableau structur

Si vous crez un tableau long, il sera certainement prfrable de
commencer lorganiser en le divisant en plusieurs sous-parties.
Cest ce que nous allons apprendre faire tout de suite !
On peut diviser un tableau en trois sous-parties : une partie den-tte
(header), un corps de tableau (body) et un pied (footer). Ces trois
parties sont matrialises en HTML par les lments thead, tbody et
tfoot.
Llment thead va entourer la ou les lignes den-tte. Llment tfoot
va comporter des donnes rcapitulatives de notre tableau, comme

121

des totaux par exemple. Enfin, llment tbody va contenir notre

tableau proprement parler.

9.4 Combiner des cellules

Maintenant, apprenons combiner des cellules. Pour combiner des
cellules, on va utiliser les attributs HTML colspan et rowspan.
Lattribut colspan va nous permettre de combiner des cellules
appartenant diffrentes colonnes dans une mme colonne tandis
que lattribut rowspan va nous permettre de combiner des cellules
provenant de diffrentes lignes.

122

Chacun de ces deux attributs accepte un nombre entier en valeur qui

indique le nombre de cellules qui doivent tre colles entre elles.

Ici, nous avons fusionn les cellules des deux colonnes Nom et
Prnom en une pour Dupont Martin et les cellules de deux
lignes pour 24 ans .
Cest tout pour les tableaux en HTML !

123

CHAPITRE 10 : LES FORMULAIRES

10.1 Introduction aux formulaires
Les formulaires sont certainement le moyen le plus simple et le plus
utilis pour recueillir des donnes propos de vos utilisateurs. En
cela, ils sont essentiels et incontournables.
Cependant, nous touchons l aux limites du HTLM. En effet, si lon
peut crer des formulaires en HTML, en ne peut pas en revanche
stocker ni utiliser les donnes du formulaire avec ce langage. Pour
cela, nous devrons utiliser dautres langages comme le PhP et le
MySQL par exemple.
Mais voyons dj comment crer un formulaire : cela vous fera une
trs bonne base si vous souhaitez pousser plus loin votre
apprentissage des langages de programmation.

10.2 Crer le squelette de notre formulaire

Pour crer notre formulaire, nous allons devoir tout dabord utiliser
llment form avec deux attributs : method et action.
Lattribut action, tout dabord, va servir indiquer o les informations
recueillies dans le formulaire doivent tre envoyes pour tre traites.
Ce sera gnralement vers une page PhP. Comme nous ne savons pas
encore coder en PhP, il faudra limaginer pour le moment.
Lattribut method va lui spcifier de quelle manire on va envoyer ces
donnes. On peut choisir entre deux valeurs : GET et POST. En
utilisant la valeur get, les donnes vont transiter via lURL de la page
ce qui ne sera pas le cas si lon utilise la valeur post.
Il faut savoir que la valeur get est assez limite par rapport post. En
effet, avec get, on est limit dans le nombre dinformations que lon

124

peut envoyer et surtout les informations sont visibles lors de lenvoi,

ce qui est problmatique si lon envoie un mot de passe par exemple.
Cest pourquoi je vous conseille de plutt utiliser la valeur post, qui
ne possde pas ces inconvnients.

10.3 Crer un formulaire simple

Nous allons commencer par crer un formulaire trs simple,
demandant simplement un pseudo et un mot de passe lutilisateur.
Pour capturer des donnes textuelles simples comme un pseudo par
exemple, on utilise soit llment input (pour des textes courts), soit
llment textarea (pour des textes longs).
Dans notre cas, nous allons utiliser llment input. Cet lment
prend forcment un attribut type . La valeur de lattribut type
correspond au type de donnes demandes. On a le choix entre text,
password, date, email, tel, number, time, color et url.
Toutes ces valeurs ont t cres pour des raisons de smantique. A
noter galement que laffichage par dfaut de chaque champ de votre

125

formulaire pourra tre lgrement diffrent selon la valeur choisie

pour lattribut type.
Il faut galement prciser un deuxime attribut llment input qui
est lattribut name. On lui donnera la valeur que lon souhaite en
essayant de rester cohrent. Cet attribut va nous tre trs utile pour
traiter les donnes de notre formulaire.
A noter que llment input est reprsent sous forme dune balise
orpheline.

Il va maintenant falloir indiquer votre visiteur ce quil doit

renseigner comme information dans chaque champ. Cest le rle du
label, quon va donc ajouter juste avant linput.
A noter que pour afficher du texte dans un formulaire, il faut entourer
ce texte avec un lment de type block. Gnralement, on utilisera
donc un lment p.
Ensuite, toujours pour des raisons de smantique, il est bon et
conseill de lier le label linput qui lui correspond. Pour cela, on va
ajouter un attribut for au label et un attribut id linput, et leur
attribuer exactement la mme valeur. Notez que cette valeur peut tre
la mme que celle donne lattribut name de llment input.

126

Voil donc pour notre champ pseudo . Maintenant, on va faire

exactement la mme opration pour notre champ mot de passe, la
diffrence que cette fois on va utiliser un input de type password .
Cela aura pour effet que les caractres inscrits ne saffichent pas
lcran.
Cest tout, notre premier formulaire est prt !

10.4 Demander un Email, une adresse de site web et un numro

de tlphone lutilisateur
Pour demander lutilisateur de saisir son adresse mail, il vous faudra
utiliser un input de type email . Cela permet votre navigateur de
savoir quil doit normalement recevoir une adresse mail.
Si vous souhaitez donner la possibilit vos utilisateurs de laisser un
lien vers leur site Internet, vous devrez utiliser un input de type
url .

127

Si, enfin, vous voulez que lutilisateur renseigne son numro de

tlphone, il vous faudra utiliser un input de type tel .

10.5 Crer une zone de saisie multi-lignes

Imaginons que vous vouliez crer un livre dor pour votre site web,
ou tout simplement que vous souhaitiez laisser la possibilit vos
visiteurs de laisser des commentaires, alors vous aurez certainement
besoin de crer une zone de texte multi-lignes.
Pour faire cela, on va cette fois-ci utiliser llment textarea plutt que
llment input. Tout comme pour llment input, on va lui attribuer
un attribut name et utiliser un label.
Si vous souhaitez modifier la taille de votre champ, vos pouvez
videmment utiliser les proprits width et height en CSS. Notez que
cela fonctionne galement pour un lment de type input.

128

10.6 Cases cocher, zones doptions et listes

On peut encore agrmenter notre formulaire en proposant nos
visiteurs de choisir une rponse parmi diffrentes possibilits.
Nous allons voir trois faons de faire cela avec les types checkbox
(cases cocher), radio (zones doptions) et llment select (listes
droulantes).
Pour crer une zone de formulaire avec des cases cocher, il suffit
dutiliser llment input avec cette fois-ci un attribut de type
checkbox.

129

Cette fois-ci, on crira le label aprs linput afin de bien avoir la case
cocher avant le texte.
Pensez bien galement mettre une valeur diffrente au name de
chaque input afin de pouvoir par la suite identifier quelle case a t
coche.
Si vous le dsirez, vous pouvez pr-cocher une case par dfaut en
ajoutant lattribut checked un input.

130

Pour les zones doptions, on va cette fois-ci utiliser un lment input

de type radio.
Notez que cette fois-ci, et dans ce cas uniquement, vous devez
donner la mme valeur lattribut name pour toutes les options
lintrieur dune mme question.
On utilisera donc en plus un attribut value afin de bien savoir quelle
case a t coche par le visiteur.

131

On peut encore une fois utiliser lattribut checked afin de pr-cocher

une case.
La diffrence entre les cases cocher et les zones doptions est que le
visiteur ne peut choisir quune rponse dans le cas des zones
doptions, au contraire des cases cocher o il peut cocher autant de
cases quil souhaite.
Les listes droulantes, enfin, sutilisent gnralement lorsquil faut
faire un choix parmi une longue liste. On ne va cette fois-ci pas
utiliser llment input mais llment select la place avec ses
attributs name et id.
A lintrieur de cet lment select, nous allons utiliser un lment
option pour chaque option de la liste accompagn dun attribut value.
Enfin, sachez galement que lon peut grouper les options des listes
droulantes sous un dnominateur commun grce llment
optgroup et son attribut label.

132

Cela commence nous faire un beau formulaire, non ?

10.7 Finaliser et envoyer notre formulaire

Nous avons vu lessentiel de ce quil vous fallait savoir pour crer des
formulaires en HTML.
Cependant, sachez quil existe encore normment de petites choses
propos des formulaires dont je nai pas parl afin de ne pas
surcharger le cours. Nhsitez donc pas aller vous renseigner !
Parmi ces petites choses, justement, jaimerais vous parler encore des
attributs placeholder, required et des lments fieldset et legend.

133

Lattribut placeholder, tout dabord, sert donner davantage

dindications sur vos champs vos visiteurs. Il vous sert donner un
exemple de remplissage de champ.

Pour rendre une question de votre formulaire obligatoire, vous devrez

utiliser lattribut required.

134

Enfin, llment fieldset sert organiser votre formulaire en diffrentes

rubriques. Cela peut tre utile si celui-ci devient long. Vous pouvez
ensuite donner une lgende chaque rubrique grce llment
legend.

Il est enfin temps denvoyer notre formulaire ! Pour crer le bouton

denvoi, on va tout simplement utiliser un input de type submit avec
un attribut value.

135

Ca y est, vous savez crer des formulaires ! Il ne vous reste plus

qu apprendre traiter les donnes mais pour cela il vous faudra
certainement apprendre le PhP !

136

PARTIE IV
ALLER PLUS LOIN

137

BONUS #1 : LE RESPONSIVE DESIGN

Lorsque lon parle de responsive design, on parle gnralement de
lensemble des techniques nous permettant de crer un site qui
pourra sadapter en fonction de la taille de lcran de vos visiteurs.
Aujourdhui, nous disposons de trois moyens pour crer un site
pouvant sadapter diffrents terminaux :
1. Crer un site ddi pour chaque terminal diffrent (un site pour
mobile, un site pour tablettes, un pour ordinateur, etc.)
2. Crer des applications mobiles natives (pour Android, iPhone,
etc.)
3. Crer une version responsive de votre site.
Chaque mthode possde des avantages et des inconvnients, ainsi
que des prix divers. Dans notre cas, nous allons nous intresser la
dernire : la cration dune version responsive.
Pour crer la version responsive de notre site, nous allons utiliser ce
quon appelle des media queries, qui ne sont in plus ni moins que des
rgles qui seront appliques selon certaines conditions (par exemple,
lorsque la taille dun cran est comprise entre X et Y pixels).
On va ainsi, grce au media queries, pouvoir modifier le style de
chaque lment de notre site web afin de ladapter lcran de vos
visiteurs. La dtection de la taille de lcran se fait videmment
automatiquement.
Deux solutions soffrent nous pour appliquer des media queries :
soit on cre un nouveau fichier CSS (gnralement, son nom sera
responsive.css), soit on rajoute ces rgles dans notre fichier CSS
principal.
Si lon utilise la premire solution, il nous faudra charger une feuille
de style diffrente selon la taille de lcran de vos visiteurs. Pour cela,

138

nous devrons modifier llment link contenu dans llment head de

notre page HTML.
Pour linstant, nous allons nous contenter de les ajouter un fichier
CSS dj existant pour plus de simplicit.
Ecrivons immdiatement notre premire media query ensemble afin
que vous ayez du concret sous les yeux :

Notre media query ici correspond la ligne avec le arobase. Comme

vous le voyez, nous allons rcrire des proprits CSS lintrieur de
nos media queries.
Dans cet exemple, nous affichons par dfaut tous les paragraphes de
notre page HTML en rouge. Cependant, notre media query vient
changer cela. Pour faire court, les paragraphes safficheront en bleu
pour tous les crans dont la taille sera infrieure 1280px.
Lorsque lon veut crer une version responsive dun site, on utilisera
trs souvent la media query @media. Cependant, vous devez savoir
quil en existe bien dautres, comme par exemple @width, @height,
@color, @orientation, etc.
De mme, nous utiliserons majoritairement @media all (la rgle
sappliquera tous les types dcrans), mais nous pouvons galement
utiliser @media screen (la rgle ne sapplique quaux crans
classiques, @media handheld (mobile) ou encore @media tv
(tlvision).

139

Un autre exemple ? Pas de problme :

Ici donc on demande aux paragraphes de safficher en bleu avec une

bordure d1px solide et bleue pas dfaut.
Cependant, on pose une rgle supplmentaire : si la taille de lcran
(ici, la taille de notre fentre output ) est infrieure 300px pour
un cran classique, alors les paragraphes saffichent dsormais en
orange, ont une bordure verte en tirets de 3px dpaisseur et on
applique un type inline-block nos paragraphes.

140

Cet exemple devrait vous faire comprendre tout ce quil est possible
de faire grce aux media queries : vous pouvez changer le type dun
lment, adapter la taille dune bote, ajouter des proprits clear
pour un meilleur rendu selon la taille de lcran ou encore changer le
positionnement de vos lments.
Je ne vais pas faire un cours complet sur le responsive design car ce
serait beaucoup trop long et ce nest pas vraiment lobjet ici, mais
jespre vous avoir donn de bonnes pistes et de bonnes bases pour
vous permettre daller plus loin !

141

BONUS #2 : LES PSEUDO-CLASSES EN CSS

Le CSS va nous permettre de changer le style de nos lments selon
ltat de ceux-ci, cest--dire de faon dynamique. Pour faire cela,
nous allons utiliser ce quon appelle les pseudo-classes (ou pseudoformats).
Les pseudo-classes peuvent par exemple tre utilises pour modifier
lapparence dun lment lorsque la souris de vos visiteurs est dessus,
ou lorsque llment a dj t cliqu.
Pour modifier lapparence dun lment au survol de la souris, nous
allons utiliser la pseudo classe :hover de cette faon :

142

Dans le premier tat, ma souris nest pas sur llment p, donc rien ne
se passe. Dans le second cas, en revanche, jai pass ma souris sur
llment p. Celui-ci se color donc en rouge.
On peut galement appliquer diffrents styles des lments selon
quils aient t cliqus ou non grce au pseudo-classes :active (lors de
la slection) et :visited (une fois cliqu).
On appliquera souvent ces pseudo-classes des lments de type
lien.
Ci-dessous, on applique une couleur rouge ainsi quune mise en gras
au lien lors du clic, puis ensuite une couleur verte aprs quon lait
cliqu.
Voici le rsultat au moment du clic :

143

Et une fois que le lien a dj t cliqu :

Les pseudo-classes peuvent nous mener beaucoup plus loin et nous

permettre dappliquer des styles des lments trs prcis ou selon
un tat prcis des lments.
Voici ci-dessous une liste de toutes les pseudo-classes utilisables :

144

145

BONUS #3 : LES PESUDO-ELEMENTS EN CSS

Les pseudo-lments sont utiliss en CSS pour modifier lapparence
de certaines parties spcifiques dun lment.
Les pseudo-lments peuvent tre utiliss, entre autres, pour modifier
lapparence de la premire lettre dun lment ou pour insrer du
contenu avant ou aprs un lment.
Lutilisation des pseudo-lments est trs proche de celle des pseudoclasses, je ne mtendrais donc pas autant dessus. Attention
cependant : on va utiliser cette fois :: et non pas : .
Voici dj la liste des pseudo-lments disponibles en CSS :

Voyons tout de mme un exemple avec le pseudo-lment ::before

par exemple.

146

Ici, jai choisi dinsrer un texte avant mon lment p, mais vous
pouvez insrer nimporte quel type de contenu, comme des images
par exemple.

147

BONUS #4 : LES ELEMENTS STRUCTURANTS DU

HTML5
Un des grandes nouveauts du HTML5 a t dintroduire des
lments structurants.
Lide tait une nouvelle fois damliorer la smantique et de nous
permettre galement de faciliter nos mises en page.
Ces lments vont nous permettre de dire aux moteurs de recherche
ceci est len-tte de mon site , ceci est un article , ceci est une
section ou encore ceci est mon pied de page .
Les lments structurants introduits sont les suivants :
Header (len-tte de votre site) ;
Nav (votre menu principal de navigation) ;
Section (pour grouper des lments en fonction dune
thmatique commune) ;
Article (un article indpendant) ;
Aside (informations complmentaires) ;
Footer (le pied de page).
En pratique, voil quoi correspondent les diffrents lments :

148

Ainsi, idalement, tout le contenu de mon header devrait tre plac

entre les balises <header></header>, tout le contenu de mon footer
entre les balises <footer></footer> et etc.

149

Il y a fort parier que ces lments vont tre de plus en plus pris en
compte par les moteurs de recherche et vont compter de plus en plus
pour le rfrencement des sites, ne les ngligez donc pas !

150

CONCLUSION
Et nous voil donc arriv la fin de ce cours ! Merci tous de lavoir
suivi !
Nhsitez pas aller visionner la version gratuite en vido de ce cours
sur ma chane YouTube :
https://www.youtube.com/channel/UCsFoQ4A9CZbF3qag317uZZQ
Vous y trouverez galement dautres tutoriels sur le PhP et le MySQL
entre autres.
Nhsitez pas non plus visiter rgulirement mon site Internet sur
lequel je poste rgulirement mes nouveaux tutoriels : http://pierregiraud.fr
Enfin, merci de parler de moi et de diffuser mon site et ma chane
YouTube vos contacts, amis, etc. Cest trs important pour moi et
cest ce qui me permet de continuer crer des tutoriels !
Une nouvelle fois merci, bon courage, et surtout : pratiquez pour
vous amliorer ou pour toujours rester au top !
A bientt,
Pierre

151