I.

Objectif général

Etant donné que la technologie web prend de plus en plus une place importante dans
nos différentes sociétés ; surtout dans la gestion actuelle des entreprises, notre objectif en
enseignant ce cours, est qu’à la fin de notre enseignement, les étudiants qui auront
normalement suivi le cours soient en mesure de concevoir eux-mêmes sans une aide étrangère
un site web statique.

II. Objectifs spécifiques

À la fin de ce cours, vous serez capable de :

 Maîtriser les bases de HTML5.

 maitriser la logique de programmation du langage HTML pour la création des

pages web,
 maitriser la logique de programmation du langage CSS pour formater les
éléments du langage HTML,
 Agencer le contenu des pages.
Introduction générale

Si le monde de l’informatique vous plaît et que vous êtes tenté d’apprendre la

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

 Tout d’abord, il faut savoir que le HTML et le CSS sont deux véritables standards et
n’ont 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 véritablement le socle de tout projet de
développement web. Que vous vouliez créer un site, e-commerce, un blog, une
application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les
langages HTML et CSS
Les langages HTML et CSS sont, comme nous allons le voir, à la base de tout projet
de programmation web. Par extension, ce cours s’adresse à tous, du plus parfait néophyte à
l’expert ayant besoin d’un rafraichissement. Le HTML et le CSS sont des langages plutôt
simples à maîtriser et à comprendre. J’ai voulu dans ce livre vous apporter une approche
concrète et directe de ces langages. Ce cours offre une difficulté graduelle mais, en soi, il n’y
a jamais rien d’insurmontable.
En résumé, ce cours s’adresse :
 Aussi bien au néophyte qu’à la personne expérimentée ;
 A tous ceux qui veulent apprendre à coder en HTML et en CSS

PLAN DE L’UNITE D’ENSEIGNEMENT :

0. INTRODUCTION
CHAP.1 LE HTML
CHAP.2 LE CSS
CHAP.3 STRUCTURER SA PAGE WEB
Chapitre 1 : HTML
HTML est l’abréviation de HyperText Markup Language, soit en français « langage
hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de
donner du sens à du contenu.
HTML est un langage de description des pages web.
 HTML signifie Hyper Text Markup Language
 HTML n’est pas un langage de programmation, il est un langage de balisage
 Un langage de balisage est un ensemble de balises
 HTML utilise des balises pour décrire les pages Web
Balises HTML
 Les balises HTML sont des mots-clés entourés par des crochets comme <
html>
 Les balises HTML entrent normalement en paires comme < b > et < / b>
 La première balise dans une paire est la balise de début, la deuxième balise
est la balise de fin
 Balises de début et de fin sont également appelés balises d'ouverture et
balises de fermeture.

Documents HTML = Pages Web

 Les documents HTML décrivent les pages Web

 Les documents HTML contiennent des balises HTML et texte brut
 Les documents HTML sont également appelés pages Web

1.1 Un mot sur le XHTML

Avant de poursuivre plus avant notre découverte du HTML et du CSS, je dois vous
parler du XHTML. XHTML signifie eXtensible HTML. Crée en 2000, il devait à l’origine
succéder 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, à l’époque, le XML était une véritable petite
révolution puisqu’il permettait de faire davantage de choses que le SGML et qu’il était dit
plus simple à utiliser.
Cependant, le HTML a continué à se développer en parallèle au XHTML et le XHTML est
définitivement abandonné en 2009 ou plus exactement a été en partie intégré dans ce qui allait
devenir le HTML5. Le XHTML reste aujourd’hui encore utilisé pour réaliser certaines pages
de code spécifique. Pour commencer, cependant, je vous recommande de vous concentrer sur
le HTML.

1.2 L’éditeur de texte

Fini la théorie, il est temps de se préparer pour pratiquer ! Et pour coder en HTML et
en CSS, c’est très simple : nous n’avons besoin qued’un éditeur de texte.Il existe des
centaines et des centaines d’éditeurs de texte etbeaucoup se valent. Certains sont gratuits,
d’autres sont payants.
Je ne vais pas vous imposer le choix d’un éditeur, mais simplement vous donner des
recommandations.Tout d’abord, je vous conseille de choisir un éditeur de texte gratuit.
 Une raison à cela : à moins d’être un développeur expert, vousn’aurez
quasiment jamais besoin desoptions disponibles avec leséditeurs payants.
 Deuxième conseil : essayez-en plusieurs avant de faire votre choix.En effet,
comme je l’ai dit, les bons éditeurs possèdent quasiment tous les mêmes
fonctionnalités. La différence va donc se faire surl’ergonomie et la prise en
main.
Voici les éditeurs que je peux vous conseille :
 NotePad, si vous êtes sous Windows;
 NotePad++, pour Windows;
 Komodo, pour Mac ou Linux
 TextWrangler, pour Linux
Une fois votre éditeur de texte choisi et installé, il est temps de passer à la suite et de
commencer notreinitiation au HTML.

1.3 Structure de base d’une page en HTML

En programmation comme dans beaucoup d’autres disciplines, vous l’aurez compris,
il y a des règles. Ainsi, toute page écrite en HTML doit comporter une certaine structure, un «
squelette » qui sera toujours le même. Ce squelette est bien évidemment constitué de divers
éléments.
Tout d’abord, toute page HTML doit commencer par la déclaration de ce qu’on appelle un «
doctype ». Le doctype, comme son nom l’indique, sert à indiquer le type du document. Dans
notre cas, le type de document est HTML.
Ensuite, pour que notre page HTML soit valide, il va nous falloir indiquer trois nouveaux
éléments : html, head (« en-tête ») et body (« corps de page »).
 L’élément html va contenir toute la page.
 L’élément head contiendra entre autres, le titre de la page, l’encodage utilisé et
des meta-data (des données invisibles pour les utilisateurs mais essentielles –
nous en reparlerons plus tard).
 L’élément body contiendra tout le contenu de notre page (paragraphes, images,
tableaux, etc.).
Le but d'un navigateur Web (comme Internet Explorer ou Firefox) est de lire des
documents HTML et les afficher sous forme de pages Web. Le navigateur ne montre pas les
balises HTML, mais utilise les balises pour interpréter le contenu de la page.

Voici à quoi vous devriez arriver en pratique :

<HTML> Ceci est le début d'un document de type HTML.
<HEAD>
Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant
des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.

<TITLE> Ceci est le début du titre de la page.

</TITLE> Ceci est la fin du titre de la page.

<BODY> Ceci est le début du document proprement dit.

</ BODY> Ceci est la fin du document proprement dit.
</HTML> Ceci est la fin d'un document de type HTML.

Et voilà, vous venez, sans vous en rendre compte, de créer votre première page valide en
HTML ! Retenez bien ce schéma, il sera toujours le même quelque soit la page HTML que
vous créerez.
<html>
<body>

<h1>Mon premier titre</h1>

<p>Mon premier paragraph</p>

</body>
</html>

Explication de l’exemple:
 Le texte entre <html > et < / html> décrit la page Web
 Le texte entre <body > et < / body> est le contenu visible de la page
 Le texte entre < h1 > et </ h1 > est affiché comme une rubrique
 Le texte entre <p > et < / p> est affiché comme un paragraphe

Liens HTML
Liens HTML sont définis avec le tag <a>.

Exemple

<a href="http://www.yahoo.com">Yahoo!</a>

1.4 Eléments HTML

Les documents HTML sont définis par les éléments HTML.
Un élément HTML est tout, dès la balise de début à la balise de la fin.

Balise de début * Contenu de l’élément Balise de fin *

<p> Ceci est un paragraphe </p>

<a href="default.htm" > Ceci est un lien </a>

<br />

La balise de début est souvent appelée la balise d’ouverture. La balise de fin est souvent
appelée la balise de fermeture.
Syntaxe d’un élément HTML
 Un élément HTML commence par une balise d'ouverture / balise de début
 Un élément HTML se termine par une balise de fermeture/ balise de fin
 Le contenu de l'élément est tout entre la balise de début et la balise de fin
 Certains éléments HTML ont un contenu vide
 Les éléments vides sont fermés dans la balise de début
 La plupart des éléments HTML peuvent avoir des attributs

1.4.1 Les éléments Heading, Paragraph et Break

Le HTML, je vous l’ai dit, sert à différencier d’un point de vue sémantique les
différents objets que l’on peut rencontrer et dont onpeut avoir besoin (titre, paragraphe,
espace, image, etc.).Pour faire cela, le HTML va utiliser des éléments. Et le moment est arrivé
pour nous d’apprendre à créer des paragraphes, des titres, et à faire des retours à la ligne en
HTML. Pour créer des paragraphes, tout d’abord, on va utiliser l’élément p .On peut créer
autant de paragraphes que l’on 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é.

Si maintenant vous désirez créer un retour à la ligne à l’intérieur même d’un paragraphe, il
faudra utiliser l’élément br (diminutif de break).Cet élément est constitué d’une seule balise
orpheline, qu’on notera donc <br/>.Pour créer des titres, on va utiliser les éléments h1, h2, h3,
h4, h5 eth6. Pourquoi autant d’éléments différents ?Pour pouvoir créer des titres de diverses
importances. Ainsi, un titreh1 sera considéré comme un titre très important tandis qu’un titre
h6 sera considéré comme très peu important. En pratique, on n’utilisera que très rarement les
titres de niveau h4, h5et h6. Si vous vous interrogez encore sur l’intérêt d’avoir tous ces
éléments, pensez que cela est très important pour le référencement entre autres. En effet : plus
vous serez clair et mieux un moteur de recherche vous comprendra, mieux vous serez
référencé.

1.4.1.1 Heading
 Rubriques HTML sont définies avec les balises < h1 > à < h6>

Exemple

<h1> Ceci est une rubrique </h1>

<h2> Ceci est une rubrique</h2>
<h3> Ceci est une rubrique</h3>
<h4> Ceci est une rubrique </h4>
<h5> Ceci est une rubrique</h5>
<h6> Ceci est une rubrique</h6>

1.4.1.2 Paragraphes

Paragraphes HTML sont définies avec la balise < p>.

Exemple

<p>Ceci est un paragraphe</p>

<p>Ceci est un autre paragraphe</p>

1.4.1.3 Break
Break HTML est défini avec la balise < br>.

Exemple

Ceci est un paragraphe<br/>

Ceci est un autre paragraphe<br>

1.4.2 Les éléments Strong, Emphasis et Mark

Continuons à apprendre à « parler » en HTML et donc dans la découverte de nos
éléments avec trois nouveaux éléments : les éléments strong, em (diminutif de emphasis) et
mark. L’élément strong, tout d’abord, est utilisé pour indiquer aux moteurs de recherche
qu’un contenu est particulièrement important, afin que celui-ci soit traité avec plus
d’importance. Le résultat visuel est une mise en forme automatique en gras. Mais encore une
fois, on n’utilisepas l’élément strong pour mettre un texte en gras ! L’élément em, pour
emphasis (« emphase » en français) est proche de l’élément strong. Il sert lui aussi à signifier
qu’un contenu est important, mais moins important tout de même qu’un contenu entre des
balises strong. Encore une fois, si vous vous demandez l’intérêt de ces éléments, ilest avant
tout dans l’optimisation du référencement de votre site.
En effet, normalement, vous devriez avoir ciblé des mots clefs et essayerd’être bien référencé
sur ces mots là. Les balises strong et em vous aident à atteindre ce but, entre autres.
Enfin, l’élément mark est utilisé pour faire ressortir du contenu. Ce contenu ne sera pas
forcément considéré comme important, mais cette balise peut servir dans le cas de l’affichage
de résultats suite àune recherche d’un de vos visiteurs par exemple. Voilà donc pour les
éléments dits de base, il est maintenant tant des’attaquer à des éléments relativement plus
complexes, et nous allons commencer avec les listes.

1.4.2.1 L’élément Strong

Exemple

<strong>Strong</strong>
<strong>Strong</strong>

1.4.2.2 L’élément Emphasis

Exemple

<em>Emphasis</em>
<em>Emphasis</em>

1.4.2.3 L’élément Mark

Exemple

<mark>Mark</mark>
<mark>Mark</mark>
1.5Les Attributs des éléments HTML
Les attributs fournissent des informations supplémentaires sur les éléments
 Les éléments HTML peuvent avoir des attributs
 Les attributs fournissent des informations supplémentaires sur les éléments
 Les attributs sont toujours spécifiés dans la balise de début
 Attributs viennent en paires comme : nom / valeur, nom = "valeur".

Exemple d’un attribut

Les liens HTML sont définis avec la balise <a>. L'adresse du lien est fournie comme un
attribut :

Exemple

<a href="http://www.w3schools.com">Ceci est un lien</a>

1.5.1 Listes ordonnées et non-ordonnées

Les listes servent à ordonner du contenu, à lui donnant un ordrecohérent.
Visuellement, les listes en HTML correspondent à ce que vous créezlorsque vous utilisez des
puces dans un document Word ouPowerPoint par exemple, comme ceci :
 Elément numéro 1
 Elément numéro 2
 Elément numéro 3
En HTML, les listes vont avoir deux grands intérêts pour nous : on va pouvoir les
utiliser pour créer des menus ou, dans leur forme brute,pour mieux présenter du contenu pour
un blog par exemple.Il existe trois grands types de listes en HTML :
1. les listes ordonnées,
2. les listes non ordonnées et un dernier type un peu particulier,
3. les listesde définition.
Nous allons commencer avec les listes ordonnées etnon-ordonnées.La différence entre
les listes ordonnées et non ordonnées est que leslistes ordonnées possèdent un aspect de
subordination, d’ordrelogique, de classement tandis que ce n’est pas le cas pour les listesnon-
ordonnées.
1.5.1.1 Listes non-ordonnées
Pour créer une liste non-ordonnée, on va avoir besoin de deuxnouveaux éléments :
l’élément <ul> (abréviation de unordered list), quiva contenir toute la liste et l’élément <li>
(pour list item) que l’on va utiliser pour créer chaque élément de la liste.

Exemple

• Ceci est le premier

• Ceci est le deuxième

• Ceci est le troisième

Une liste non ordonnée est une liste d’éléments. Les éléments de liste sont marqués avec des
balles (généralement petits cercles noirs).
Une liste non ordonnée commence par la balise < ul>. Chaque élément de la liste commence
par la balise <li>.
<ul>
<li> Ceci est le premier</li>
<li> Ceci est le deuxième </li>
<li> Ceci est le troisième </li>
</ul>

Voici à quoi ça ressemble dans un navigateur :

 Ceci est le premier
 Ceci est le deuxième
 Ceci est le troisième

1.5.1.2 Listes ordonnées

Pour créer une liste ordonnée maintenant, nous allons simplementremplacer l’élément
<ul> par l’élément <ol> (pour ordered list).
Cette fois-ci, il y a une relation de subordination, un ordre logique etnaturel entre les éléments
de la liste (on met généralementl’introduction avant la conclusion) ; on utilise donc une
listeordonnée.
Une liste ordonnée est également une liste d’éléments. Mais ici, les éléments de liste sont
marqués avec des numéros.
Une liste ordonnée commence par la balise < ol>. Chaque élément de la liste commence par la
balise <li>.
<ol>
<li> Ceci est le premier</li>
<li> Ceci est le deuxième </li>
<li> Ceci est le troisième </li>
</ol>

Voici à quoi ça ressemble dans un navigateur :

1 Ceci est le premier
2 Ceci est le deuxième
3 Ceci est le troisième

1.5.1.3 Listes de définitions

Dernier grand type de listes que nous allons voir ensemble, les listesde définition son
utilisées pour définir des termes.Pour créer une liste de définition, il va nous falloir utiliser
l’élément <dl> (pour définition list), l’élément <dt> (pour définition term) et l’élément<dd>
pour la définition en soi.Il n’y a qu’une règle à respecter lorsque l’on crée une liste de
définitions : vous devez toujours placer l’élément <dt> avant l’élément<dd>, c’est-à-dire le
terme à définir avant sa définition. Cela est assezintuitif et ne devrait donc pas vous poser de
problème.
En revanche, il est tout à fait possible d’associer plusieurs termes àune définition ou même
plusieurs définitions à un même terme.
 Une liste de définition commence par une balise <dl> (liste de définitions).
 Chaque terme commence avec une balise <dt> (terme de définition).
 Chaque description commence avec une balise <dd> (la description de
définition).
Voici un exemple de liste de définitions :
<dl>
<dt>Café</dt>
<dd>Boisson noir et chaude</dd>
<dt> Lait</dt>
<dd> Boisson blanche et froide</dd>
</dl>

Voici à quoi ça ressemble dans un navigateur :

Café
Boisson noir et chaude
Lait
Boisson blanche et froide
A l'intérieur de la balise <dd> vous pouvez mettre les paragraphes, les sauts de ligne, des
images, des liens, d'autres listes, etc.

Balises de listes

Balise Description

<ol> Définie une liste ordonnée

<ul> Définie une liste non-ordonnée

<li> Définie l’élément d’une liste(ordonnée ou non ordonnée)

<dl> Définie une liste de définition

<dt> Définie un élément, sur une liste de définition

<dd> Décrit un élément sur une liste de définition

1.5.2 Liens internes et liens externes

Tout d’abord, il faut savoir qu’il existe différents types de liens. Pour l’instant, nous
allons nous concentrer sur les deux types les plus« classiques » : les liens internes et les liens
externes.Quelle différence entre ces deux types de liens ? Un lien interne estun lien créé
entre deux pages d’un même site web tandis qu’un lienexterne est un lien menant d’un
site web vers un autre site web.Dans tous les cas, pour créer un lien, nous allons utiliser
l’élément« a » accompagné de son attribut href (pour Hypertext Reference) quisert à indiquer
la cible (c’est à dire la destination) du lien.Quel que soit le type de liens créés, la seule chose
qui va changer va être ce que l’on va indiquer en valeur pour l’attribut href.
Commençons donc avec les liens internes. Nous avons trois cas àdistinguer :
 1er cas : La page à partir de laquelle on fait un lien et celle verslaquelle on
fait un lien se trouvent dans le même dossier. Dansce premier cas, il suffit
de préciser le nom de la page dansl’attribut href.
 2ème cas : La page vers laquelle on souhaite faire un lien setrouve dans un
sous-dossier. Dans ce cas, il faudra en tenircompte et inclure le nom du
sous-dossier dans la valeur del’attribut href.
 3ème cas : La page vers laquelle on veut faire un lien se trouvedans un
dossier parent. Dans ce cas, nous devrons rajouter « ../ » dans la valeur de
l’attribut href.

1.5.2.1 Liens internes

Généralement un lien interne se présente comme suit :
Balise de début * Contenu de l’élément Balise de fin *

<a href="apropos.html"> A propos </a>

<a
A propos </a>
href="pages/apropos.html">

<a href="../apropos.html"> A propos </a>

1.5.2.2 Liens externes

Pour créer des liens externes, maintenant, vous allez voir que c’estbeaucoup plus
simple : il suffit d’indiquer l’URL complète de la pagevers laquelle on veut faire un lien en
valeur de l’attribut href.
En pratique, pour faire un lien vers la page d’accueil de Wikipédia.
Par exemple, on écrira :<a href="https://www.wikipedia.org ">Wikipédia</a>

Et voilà, c’est tout pour les liens externes. Simple, non ?

1.5.3 Le texte
Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter
par quelques balisesélémentaires.
  Gras[Bold]
<B>...</B>
<STRONG>...</STRONG>
 Italique[Italic]
<I>...</I>
<EM>...</EM>
 Taille de caractère [Font size]
<FONT SIZE= ?>...</FONT>
 Couleur decaractère[Font color]
<FONT COLOR="#$$$$$$">…</FONT>
 A la ligne [Line break]
<BR> Aller à la ligne
 Commentaires [Comments]
<!-- *** --> Ne pas afficher
 Centrage [Center]
<CENTER></CENTER>
Ouvrez l'éditeur de texte et tapez ceci
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<! --C'est fini-->
</BODY>
</HTML>
Vous aurez quelque chose ressemblant à ceci.
Quelques commentaires s’imposent ;
 Le texte tout simple s'écrit sans balises. Il sera repris par le browser (navigateur)
avec la police et taille de caractèreschoisies dans sa configuration par défaut.
 Le browser (navigateur) affiche le texte qu'on lui "dicte" en passant à la ligne
lorsque celui-ci atteint le bord de lafenêtre. Pour le forcer à passer outre à cette
règle de conduite et à faire un saut à la ligne comme vous lesouhaitez, il faut une
instruction particulière. C'est la balise <BR>. Celle-ci représente une
actionponctuelle et n'a donc pas besoin de balise de fin.
 Le même browser (navigateur) ne tient compte que d'un seul espace entre les mots.
Ainsi pour lui
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
Est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en
bleu</FONT>
 Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut
veiller à bien les imbriquer. Ainsi,
<B><I>...</I></B>
Est correct et
<B><I>...</B></I> risque de vous créer des ennuis.
 La taille dans <FONT SIZE= ?> peut être indiquée de deux façons :
1 Avec un nombre de 1 à 7. La valeur par défaut étant 3.
2 De façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2
+3.
  Pour les puristes, les balises <I> et <EM>, <B> et <STRONG> ne sont pas
totalement équivalentes.
Vous verrez en poussant plus avant votre étude du langage Html que <EM> et
<STRONG>appartiennent aux définitions structurales (style logique) dont l'apparence dépend
des options reprisesdans la configuration du browser. Les balises <B> et <I> appartiennent
aux formats de présentation(style physique) dont l'apparence dépend de la volonté de l'auteur.

Voici les codes de quelques couleurs basiques.

Noms des couleurs Codes des couleurs Couleurs

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00
Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Du texte encore...
Des balises de texte, il y en plein des valises ! Selon les versions du HTML (nous en
sommes à la versionHTML 5) et l'apparition des éditeurs Html évolués, certains tags sont
moins utilisés. D'autres aussi sont toutbonnement d'un emploi rare ou pour le moins
particulier.
En voici quelques-uns qui compléteront votre panoplie actuelle.
 Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation.Son utilité
serait douteuse si le texte de cette citation n'était introduit avec un léger retrait à
gauche et à droite.Ce qui est bien pratique pour agrémenter la présentation.
Voici un texte normal sans blockquote.
Voici un texte avec blockquote. Remarquez le retrait.
 Vous savez déjà que les browsers ne reconnaissent qu'un espace entre les mots. Ce
qui peut se révéler gênantdans certaines situations.
La balise <PRE>...</PRE> affiche un texte dit préformaté. Le browser prend ainsi
en compte tous les espaceset sauts de ligne définis à l'écran.Avant que les tableaux
ne soient reconnus par les browsers, les braves pionniers du Html devaient
employerce tag pour faire des tableaux.
 Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse (généralement en
fin de document).Voici mon adresse avec cette balise :
Ville de Bunia
Q. Mudzipela, Av. Centre 2
RDC
 La balise <U>...</U> souligne le texte.Comme, par convention, les éléments
servant d'hyperlien sont soulignés (c'est le même que dans les fichiers d'aide), on
 évitera de souligner des éléments de texte pour lui donner de l'importance. On
préfèrera les mettreen gras ou dans un format ou une couleur de police différent. Il
ne faut donc pas en abuser.
 La balise <BLINK>...</BLINK>. Permet d'afficher un texte clignotant. Ce tag est
un peu tourné en dérision car ilest rapidement ennuyeux. On lui préfèrera une
image animée qui peut être débranchée après quelquesclignotements.
 Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en
indice et en exposant.Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP>
aura comme résultat
escalier
escalier
escalier
 Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe
une balise permettantd'aligner différents éléments. C’est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour
définir l'alignement d'uneportion de texte.
Il existe encore bien d'autres balises que je vous invite à découvrir dans vos études suivantes.

1.5.4 Les arrière-plans

Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan
[background] coloré oucomposé d'une image. Ce qui apporte un élément "artistique" à votre
page.La balise à utiliser ne pose pas de problème :
Couleur d'arrière-plan
<BODY BGCOLOR="#$$$$$$">
Donc, pas de problèmes !
<BODY BGCOLOR="#000088">
<H1>Bonjour</H1>
</BODY>
Joli ! Mais la lisibilité n'est pas parfaite. Heureusement, des balises sont prévues pour
modifier les couleursutilisées par défaut par le browser pour le texte et les liens.
 Couleur de texte
<BODY TEXT="#$$$$$$">
 Couleur de lien
<BODY LINK="#$$$$$$">
 Lien visité
<BODY VLINK="#$$$$$$">
 Lien actif
<BODY ALINK="#$$$$$$">
Reprenons notre exemple;
<BODY BGCOLOR="#000088" TEXT="#FFFF00">
<H1>Bonjour</H1>
</BODY>

On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en
mosaïque par lebrowser. Attention aux raccords... comme lorsque vous posez du papier peint.
Texture d'arrière-plan <BODY BACKGROUND="Adresse">
Ce qui peut nous donner :
<BODY BACKGROUND="PAPER.gif">
<H1>Bonjour</H1>
</BODY>
1.5.5 Les tableaux
En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à
placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très
fréquent.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.
Les balises de base sont donc :
 Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau
 Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne
 Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule
Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme
suit :
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Si vous souhaitez y adjoindre des bordures :

Bordure de cadre [Border] <TABLE border= ?></TABLE>
<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Il y a encore trois éléments (définis par défaut mais modifiables) :
L'espace entre les cellules oul'épaisseur des lignes du quadrillage
<TABLE cellspacing= ?>
L'enrobage des cellules oul'espace entre le bord et le contenu
<TABLE cellpadding= ?>
La largeur de la table <TABLE width= ?>
<TABLE width=%>
Construisons un exemple :
<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

<TABLE border=2 cellpadding=10>

<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Les cellules des tableaux

Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous
penchant sur les cellules destableaux.
Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue
soit :
 du texte
 des images
  des liens
 des arrière-plans
 et même des tableaux (eh oui !)
Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un
petit univers à partqui a ses propres spécifications. Découvrons les balises.
Largeur d'une cellule
<TD width= ?> en pixels
<TD width=%> en pourcentage
Fusion de lignes
<TD rowspan= ?>
Fusion de colonnes
<TD colspan= ?>
Découvrons ceci par des exemples.
Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes
égales. Essayons ceci:
<CENTER>
<TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD> cel2</TD>
<TD> 3</TD>
</TR>
</TABLE>
</CENTER>

Pas brillant ! Et avec la balise de largeur de la cellule ?

<CENTER>
<TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
 </TABLE>
</CENTER>

Impeccable ! Prenons le même tableau mais avec 2 lignes.

<CENTER>
<TABLE width=60% border=1>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
</TABLE>
</CENTER>

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit
donc déborder sur 3cellules horizontales.
<CENTER>
<TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR><TD width=33%>cellule 1</TD><TD width=33%>cel 2</TD>
<TD width=34%>3</TD></TR>
</TABLE>
</CENTER>

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la
colonne. La premièrecellule doit donc déborder sur 2 cellules verticales.
<CENTER>
<TABLE width=60% border=1>
<TR>
 <TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE>
</CENTER>

Maintenant, il est temps de mettre de l'ordre dans les cellules.

Ligne de tableau <TR align=left/center/right> Horizontalement
<TR valign=top/middle/bottom> Verticalement
Cellule de tableau <TD align=left/center/right> Horizontalement
<TD valign=top/middle/bottom> Verticalement

A titre d'exemple, reprenons le tableau suivant :

Avec quelques aménagements, il devient...
<CENTER>
<TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center>Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD>
</TR>
</TABLE>
</CENTER>
Pour terminer cette leçon, il est aussi possible de changer la couleur de la cellule.
Couleur de la cellule <TD BGCOLOR="#$$$$$$">
Notre dernier exemple pourrait devenir :
<TD colspan=3 align=center bgcolor="#000088">

1.5.6 Formulaires
Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page
web d'éléments interactifs permettant par exemple un dialogue avec les internautes, à la
manière des coupons-réponses présents dans certains magazines.

1.5.6.1 Intérêt d'un formulaire

Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des
boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL,
c'est-à-dire de façon générale à une adresse e-mail ou à un script de page web dynamique tel
que PHP, ASP ou un script CGI.

1.5.6.2 La balise FORM

Les formulaires sont délimités par la balise <FORM> ... </FORM>, une balise qui
permet de regrouper plusieurs éléments de formulaire (boutons champs de saisie, ...) et qui
possède les attributs obligatoires suivants :
 METHOD indique sous quelle forme seront envoyées les réponses « POST » est la
valeur qui correspond à un envoi de données stockées dans le corps de la requête,
tandis que « GET »correspond à un envoi des données codées dans l'URL, et séparées
de l'adresse du script par un point d'interrogation (pour plus de renseignement sur les
méthodes POST et GET, consultez l'article sur leprotocole HTTP)
 ACTION indique l'adresse d'envoi. La balise FORM possède comme attribut
facultatif ENCTYPE qui spécifie le codage des données dansl'URL, toutefois il n'est
pas nécessaire de le préciser car la valeur attribuée par défaut (application/x-
wwwform-urlencoded) est la seule valeur valide. L'attribut facultatif ACCEPT permet
de définir les types MIMEdes données pouvant être envoyées par le formulaire.
Voici la syntaxe de la balise FORM :
 <FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-
form-urlencoded">
...
</FORM>
A l'intérieur de la balise FORM...
La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des
éléments qui vontpermettre à l'utilisateur de choisir ou de saisir des données, ensemble de
données qui seront envoyées àl'URL indiqué dans l'attribut ACTION de la balise FORM par
la méthode indiquée par l'attribut METHOD. Ilest possible d'insérer n'importe quel élément
HTML de base dans une balise FORM(textes, boutons, tableaux, liens...) mais il est surtout
intéressant d'insérer des éléments interactifs.
Ceséléments interactifs sont :
 La balise INPUT : un ensemble de boutons et de champs de saisie
 La balise TEXTAREA : une zone de saisie
 La balise SELECT : une liste à choix multiples
1.5.6.3 La balise INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un
bon nombred'éléments "interactifs".
La syntaxe de cette balise est la suivante :
<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de
l'élément">
L'attribut name est essentiel caril permettra au script CGI de connaître le champ associé à la
paire nom/valeur, c'est-à-dire que le nom duchamp sera suivi du caractère "=" puis de la
valeur entrée par l'utilisateur, ou dans le cas contraire de lavaleur par défaut repéré par
l'attribut value.

L'attribut type permet de préciser le type d'élément quereprésente la balise INPUT,

Voici les valeurs que ce champ peut prendre :
 Checkbox : il s'agit de cases à cocher pouvant admettre deux états : checked (coché)
et unchecked(non coché). Lorsque la case est cochée la paire nom/valeur est envoyée
au CGI.
 Hidden : il s'agit d'un champ caché. Ce champ non visible sur le formulaire permet de
préciser unparamètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur.
  File : il s'agit d'un champ permettant à l'utilisateur de préciserl'emplacement d'un
fichier qui sera envoyé avec le formulaire. Il faut dans ce cas préciser le type
dedonnées pouvant être envoyées grâce à l'attribut ACCEPT de la balise FORM.
 Image : il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image
situé àl'emplacement précisé par son attribut SRC
 Password : il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent
sous formed'astérisques afin de camoufler la saisie de l'utilisateur.
 Radio : il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble
des boutonsradios devant porter le même attribut name. La paire nom/valeur du
bouton radio sélectionné seraenvoyé au CGI. Un attribut checked pour un des boutons
permet de préciser le bouton sélectionné pardéfaut.
 Reset : il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir
l'ensemble des élémentsdu formulaire à leurs valeurs pardéfaut.
 Submit : il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte
du bouton peut êtreprécisé grâce à l'attribut value.
 Text : il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte.La taille
du champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi
grâce àl'attribut maxlength.

1.5.6.4 La balise TEXTAREA

La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la
simple ligne de saisieque propose la balise INPUT. Cette balise possède les attributs suivants :
 cols : représente le nombre de caractères que peut contenir une ligne
 rows : représente le nombre de lignes
 name : représente le nom associé au champ, c'est le nom qui permettra d'identifier le
champ dans lapaire nom/valeur
 readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le
champ
 value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie
n'est pas modifiépar une frappe de l'utilisateur.

1.5.6.5 La balise SELECT

La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des
balises OPTION àl'intérieur de celle-ci). Les attributs de cette balise sont :
  name : représente le nom associé au champ, c'est le nom qui permettra d'identifier le
champ dans lapaire nom/valeur
 disabled : permet de créer une liste désactivée, c'est-à-dire affichée en grisée
 size : représente le nombre de lignes dans la liste (cette valeur peut être plus grande
que le nombred'éléments effectifs dans la liste)
 multiple : marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la
liste
Un exemple de formulaire
Les formulaires peuvent être mis en page à l'aide de tableaux (cela est même
conseillé pour avoir une mise en page soignée).

Chapitre 2: CSS
Vous allez enfin pouvoir modifier l’apparence de vos textes, rajouter des
bordures ou changer la disposition des éléments sur votre page. Mais avant tout, il
nous faut commencer avec quelques éléments de vocabulaire comme on l’avait fait
pour le HTML.

CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été

créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle
des styles.

 CSS signifie Cascading Style Sheets

 Les styles définissent comment afficher les éléments HTML
 Les styles sont normalement stockés dans les feuilles de style
 Styles ont été ajoutés en HTML 4.0 pour résoudre un problème
 Feuilles de style externes peuvent économiser beaucoup de travail
 Feuilles de style externes sont stockés dans des fichiers CSS
 Définitions multiples de style en cascade seront en une seule

2.1 Sélecteurs, propriétés et valeurs

Dans cette petite partie, nous allons voir ensemble ce que sont les sélecteurs, les
propriétés et les valeurs en CSS.
Pour rappel, le CSS sert à modifier l’apparence de nos pages web en appliquant des
styles au contenu en HTML.

 Un sélecteur, tout d’abord, va servir à déterminer à quel(s) élément(s)

HTML ou à quel type d’éléments on souhaite appliquer un style particulier.
Si l’on souhaite appliquer un style particulier à tous nos paragraphes, par
exemple, on utilisera le sélecteur « p ».
 Une propriété va nous servir à modifier le style d’un élément en ciblant un
critère bien particulier comme la taille d’un texte, sa police ou sa couleur par
exemple.
 Une valeur, enfin, va venir compléter une propriété et va en déterminer le
comportement. Pour la propriété servant à changer la couleur d’un texte par
exemple, la valeur va être la nouvelle couleur à appliquer.

Voici ci-dessous une illustration concrète de ce que l’on vient de dire :

Dans cet exemple, nous utilisons le sélecteur simple « p », ce qui signifie que nous
souhaitons appliquer un style particulier à tous les paragraphes de nos pages.

Nous utilisons les propriétés « color » (qui sert à modifier la couleur d’un texte) et «
font-size » (pour changer la taille d’un 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 s’affichent en
bleu grâce à la valeur « blue » et que notre texte ait une taille de 16px avec la valeur
« 16px ».

Notez d’ores-et-déjà la syntaxe de notre première déclaration en CSS. On entoure

les propriétés et les valeurs avec des accolades et on place un point-virgule après avoir
spécifié une valeur pour chacune de nos propriétés. Chaque propriété est séparée de sa
valeur par un deux-points.

Faîtes l’effort de bien retenir cette écriture, car nous allons sans cesse nous en
resservir à partir de maintenant.

Où écrire le CSS ?
Nous avons trois possibilités pour écrire notre CSS. L’une d’elles est
préférable aux deux autres et nous allons immédiatement voire pourquoi.

Nous pouvons écrire le CSS :

 A l’intérieur de l’élément head de notre document HTML ;

 Dans la balise ouvrante des éléments de notre fichier HTML ;
 Dans un fichier portant l’extension. ccs séparé.
Pour des raisons de performances de votre code, de clarté et d’économie de temps,
je vous recommande vivement d’utiliser la dernière méthode dès que cela est
possible.

Voyons ensemble comment cela se passe en pratique pour chacune de ces trois
méthodes, puis je vous expliquerai pourquoi la dernière est la meilleure.

Commençons avec la première façon : écrire son code CSS dans l’élément head de
notre page HTML.

Pour faire cela, il suffit d’insérer un élément style dans notre élément head et de
placer nos déclarations CSS à l’intérieur de cet élément style comme ceci :
Deuxième méthode maintenant : écrire du CSS dans la balise ouvrante d’un élément
HTML.

Pour faire cela, nous allons devoir utiliser un attribut style et lui affecter en valeur
nos propriétés CSS :
Vous remarquerez que l’on respecte la syntaxe du CSS à l’intérieur de l’attribut
style en utilisant les deux points et les points virgules.

Attention cependant : dans notre premier cas, on utilisait l’élément style tandis que
dans le cas présent, style est un attribut.

Troisième et dernière méthode enfin (la méthode recommandée) : écrire le code

CSS dans un fichier séparé. Pour faire cela, nous allons déjà devoir ouvrir un
nouveau fichier dans notre éditeur de texte et l’enregistrer au format « .css ». Vous
pouvez le nommer « style.css ».

Pensez bien à enregistrer ce fichier dans le même dossier que votre fichier HTML
dont vous souhaitez modifier le style, sinon vous risquez d’avoir des problèmes
(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 à l’aide
d’un élément link que nous allons placer dans l’élément head de cette manière :

L’élément link est représenté sous forme de balise orpheline et doit être
accompagné de ses deux attributs « rel » et « href ».

L’attribut rel sert à préciser le style du fichier lié (dans notre cas c’est une feuille de
style, donc « stylesheet » en anglais). L’attribut href, que vous connaissez déjà, 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 refléter cela dans la valeur de notre
attribut href (rappelez-vous de la leçon sur les liens relatifs !).

Finalement, nous n’avons plus qu’à écrire notre code CSS dans le fichier style.css :
Si vous désirez voir le résultat immédiatement et pouvoir travailler avec vos
différents fichiers sur une même page, je vous conseille une nouvelle d’utiliser
JsBin.com (ce que je ferai très souvent dans la suite de ce cours).

Ce site permet en effet d’écrire du code en HTML, en CSS et en JavaScript et

d’avoir un aperçu du résultat immédiatement comme ceci :

2.2 Les commentaires en CSS

Enchaînons avec les commentaires en CSS. On a déjà vu que l’on pouvait commenter
en HTML. Cela est également possible en CSS. Plus qu’une possibilité, c’est même une
obligation selon moi.
En effet, les fichiers CSS deviennent rapidement très long (beaucoup plus que les fichiers
HTML par exemple) donc si vous ne commentez pas efficacement vous risquez d’être très
vite perdu.
De plus, si vous distribuez votre code, je pense que la personne sera contente d’avoir quelques
lignes de commentaires pour l’aider à trouver ce qu’elle cherche au milieu de 2000 lignes de
code !
En CSS, on écrit les commentaires de cette manière :
2.3 Sélecteurs simples et limitations
Retournons maintenant à nos sélecteurs. Jusqu’à présent, nous n’avons manipulé que
des sélecteurs que l’on appelle « simple », car ils correspondent à des éléments HTML seuls
et sans attributs (par exemple le sélecteur p).
Ce type de sélecteur doit être préféré tant que possible pour des raisons d’optimisation et de
performance du code.
En effet, ils requièrent moins de code et sont donc moins gourmands en énergie que des
sélecteurs plus complexes. Votre page mettra ainsi moins de temps à charger.
Le problème reste qu’on est quand même très limité avec des sélecteurs simples : comment
faire pour appliquer un style différent à deux éléments de même type, deux paragraphe par
exemple ? Ce n’est tout simplement pas possible.
Et c’est pour cela que l’on a créé les attributs class et id.

2.4 Les attributs class et id

Class et Id sont deux attributs HTML qui ont été créés pour pouvoir appliquer
différents styles à des éléments de même type. Class permet également de faire l’inverse et
d’appliquer le même style à différents éléments choisis.
Voyons tout de suite comment ils fonctionnent.

Premièrement on se place dans la balise ouvrante d’un élément HTML, on écrit le

nom de notre attribut (class ou id), et on lui donne une valeur cohérente.

Cette valeur ne devrait contenir ni de caractères spéciaux (accents et autres) ni

d’espace. Par exemple :
Ensuite, on retourne sur notre fichier CSS. On va devoir commencer notre
déclaration par un point là où on a utilisé un attribut class et par un dièse si l’on a
utilisé l’attribut id.

Après le point ou le dièse, on écrit la valeur de l’attribut en question pour former

notre sélecteur. Enfin, on écrit le code CSS voulu. Voilà ce que ça donne en
pratique :

Vous le voyez, nous pouvons maintenant appliquer un style différent à chaque

élément HTML grâce aux attributs class et id. Pratique, non ?

Pourquoi avoir créé deux attributs pour faire la même chose ?

En fait, il existe une différence notable entre class et id : un attribut id avec une
valeur précise ne peut être utilisé qu’une fois dans une page, au contraire de class.

Id sera donc utilisé pour des éléments uniques dans une page web, comme le logo
de votre site par exemple.
En revanche, on peut utiliser plusieurs attributs class identiques (c’est à dire ayant la
même valeur) par page. C’est d’ailleurs une des méthodes que nous utiliserons pour
appliquer un même style à différents éléments.

Notez que, dans l’exemple précédent, utiliser deux attributs class n’est pas la
meilleure solution (nous verrons mieux lorsque nous étudierons les sélecteurs
avancés). J’ai écrit cela seulement pour vous montrer que ça fonctionne.

Nous voilà déjà un peu moins limités. 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 l’exemple
précédent.

Pour remédier à cela, on a inventé les deux éléments HTML div et span, que nous
allons étudier tout de suite.

2.5 Les éléments div et span

Pour commencer, vous devez bien comprendre que les éléments div et span
ne possèdent aucune valeur sémantique, ce qui va à l’encontre même du rôle du
HTML. Ainsi, vous ne devez les utiliser que lorsque vous n’avez pas d’autre choix.

Les éléments 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.
L’utilisation des éléments div et span est très simple : il suffit d’entourer le bloc de
code voulu avec une paire de balises ouvrante et fermante div ou span comme cela :

Généralement, on attribuera une class ou un id à div et span afin de pouvoir différencier nos
différents div et span dans notre page. Ainsi, on peut désormais appliquer un style particulier à
n’importe quel bout de code dans notre page HTML.

Tout comme pour class et id, il existe une différence entre div et span : div est un élément de
type block tandis que span est un élément de type inline.
Block ? Inline ? Nous allons voir immédiatement ce que cela signifie.
 2.6 Les éléments de type block et inline
En HTML, tout élément est soit de type block, soit de type inline. Par
exemple, div est un élément de type block tandis que span est un élément de type
inline.

Les éléments de type block sont fondamentalement différents des éléments de type
inline en HTML et il est essentiel de bien comprendre les différences entre ces deux
types si vous voulez un jour créer un site Internet, ne serait-ce que pour des raisons
de mise en page.

Voyons immédiatement ces différences ensemble :

Les éléments de type block… Les éléments de type inline…

Commencent sur une nouvelle ligne S’insèrent dans une ligne

Occupent toute la largeur Occupent seulement la largeur nécessaire

disponible

Peuvent être imbriqués les uns dans les Peuvent être imbriqués les uns dans les
autres et contenir des éléments de type inline autres mais ne peuvent pas contenir
d’éléments de type block

Afin que vous compreniez bien la différence entre les deux types d’éléments,
voyons ensemble quelques exemples d’éléments de type inline ou block pour que
vous puissiez observer leur comportement.

Eléments de type block Eléments de type inline

p em

h1, h2, h3, h4, h5, h6 strong

ol, ul,dl mark

li a

table img
Illustrons ce que nous venons de dire en regardant par exemple de plus près le
comportement des éléments p et em :

On voit bien dans l’exemple ci-dessus les différences citées dans cette partie entre les
éléments de type block et inline. J’ai mis des bordures autour des paragraphes afin que vous
soyez bien convaincu qu’un élément de type block occupe toujours toute la largeur disponible.

2.7 La notion d’héritage en CSS

L’héritage est une notion centrale et fondamentale du CSS. L’héritage
signifie que tout élément HTML va hériter des styles de ses parents (c’est le fameux
« cascading »).

En HTML, si un élément A est inclus dans un élément B ; l’élément A s’appellera

l’enfant et l’élément B sera le parent de l’élément A. Ainsi, si l’on applique un style
à l’élément B, l’élément A en héritera automatiquement.

Voici un exemple de ce que j’avance ci-dessous :

Ici, l’élément body est le parent des éléments h1 et p, puisque les éléments h1 et p sont bien
contenus dans l’élément body. Ainsi, lorsqu’on applique un style à l’élément body (ici, mettre
le texte en rouge), les éléments p et h1 héritent automatiquement de ce style.
Cela laisse une question en suspens : que se passe-t-il lorsque l’on donne deux
ordres contradictoires à un élément parent et à son enfant en CSS (par exemple,
donner une couleur rouge au parent et bleue à l’enfant) ?

Le CSS possède ici sa logique et le style appliqué sera celui le plus proche de
l’élément en question. Cela signifie que si on applique un style à un élément enfant,
c’est bien ce style qui lui sera appliqué.

Cette notion d’héritage est assez simple à comprendre mais est très puissante et est à
la base du CSS, retenez la donc bien !

2.8 Formater du texte et positionner des élémentsgrâce au CSS

2.8.1 Les propriétés CSS de type “FONT-”
Nous allons, dans les prochains points, étudier de nouvelles propriétés CSS
et notamment les propriétés nous permettant de changer l’aspect de nos textes ou de
créer le design général de nos pages web.

Nous allons immédiatement commencer avec les propriétés de type « font- » (qui
signifie « police d’écriture » en français).

2.8.1.1 La propriété font-size

Nous utiliserons la propriété font-size lorsque nous voudrons modifier la
taille d’un texte.

Cette propriété accepte deux types de valeurs :

 des valeurs de type absolu (en pixel ou en point),

 des valeurs de type relatif (en em, ex ou en pourcentage).

Les valeurs de type « relatives » sont appelées de la sorte car elles permettent au
texte de s’adapter relativement aux préférences de vos visiteurs. En clair, si vous
fixez la taille d’un texte à 100%, ce texte pourra avoir des tailles différentes selon
les réglages faits par vos visiteurs sur leurs navigateurs.

Ce type de valeur présente des avantages indéniables, et notamment le fait que tous
vos visiteurs devraient être capables de lire vos écrits sans difficulté. De plus, le
texte peut également s’adapter relativement aux autres éléments de votre page web.

Une valeur de type absolu, en revanche, va fixer la taille d’un texte définitivement.
Le grand avantage de ce type de valeur est que vous pouvez contrôler précisément
donc le rendu de votre texte et de votre page web.

Voici un exemple d’utilisation de la propriété font-size, avec des valeurs relative et

absolue. Notez qu’on utilisera les notations px pour pixel, pt pour point et % pour
pourcentage.
2.8.1.2 La propriété font-style
La propriété font-style permet de fixer l’inclinaison d’un texte.
La propriété font-style accepte 4 valeurs différentes :

 Normal (valeur par défaut) ;

 Italic (change le texte en italique) ;
 Oblique (penche le texte) ;
 Inherit (hérite des propriétés de l’élément parent).
Nous avons dit plus haut que tout élément enfant héritait par défaut des styles de ses
parents. A quoi sert donc la valeur inherit ? En fait, cette dernière sert à annuler un
style dans un cas bien particulier.

Imaginez par exemple que nous ayons défini un font-style : italic pour tous les
paragraphes de notre page et un font-style : normal à un div en particulier.

Par définition, les paragraphes à l’intérieur de ce div seront en italique puisque la

notion d’héritage nous dit d’appliquer la règle la plus proche de l’élément en
question (et pour un élément de type p, on applique donc les règles portant sur p en
premier).

Si l’on souhaite que les paragraphes héritent du même style que notre div,
l’utilisation de la valeur inherit est alors une excellente solution.
Certains d’entre vous vont certainement me dire « très bien, mais il était aussi
rapide dans ce cas d’indiquer un font-style = normal à notre attribut class normal ».
C’est tout à fait vrai.

Cependant, imaginez maintenant que vous connaissiez le PhP ou le JavaScript et

que vous laissiez la possibilité à vos visiteurs de choisir le font-style du div, mais
que vous voulez absolument que les paragraphes à l’intérieur de ce div aient le
même font-style que leur parent.

Pour faire cela, le plus simple est d’utiliser inherit. Cela doit vous sembler peut-être
un peu tiré par les cheveux pour le moment, mais il arrive plus souvent que vous le
pensez qu’on devait faire des choses comme ça lorsque l’on crée un site !

Concernant les valeurs italic et oblique, vous pourrez constater par vous mêmes
qu’elles rendent un résultat visuellement quasi identique.

Sans vouloir rentrer dans une discussion de puriste, sachez juste que l’italique est un
état spécial d’une police, et qui n’est pas supporté par toutes les polices tandis que
l’oblique correspond à une inclinaison forcée de la version normale d’une police, et
peut donc être appliqué à toutes les polices.

2.8.1.3La propriété font-weight

La propriété font-weight permet de fixer le poids d’un texte. Cette propriété
accepte 6 valeurs différentes :

 Normal (la valeur par défaut) ;

  Lighter (version allégée de la police) ;
 Bold (la police est en gras) ;
 Bolder (la police est encore plus en gras) ;
 Une centaine compris entre 100 et 900 (du plus léger au plus gras) ;
 Inherit (hérite des styles de ses parents).
Voyons immédiatement comment cette propriété s’utilise avec un exemple :

A noter que certaines polices et certains navigateurs ne supportent pas les valeurs inférieures à
« normal » et supérieures à « bold ». Si votre valeur n’est pas supportée, la police s’affichera
dans la valeur la plus proche supportée (pour bolder, votre police s’affichera en bold par
exemple).
Je vous conseille vivement de n’utiliser que des valeurs numériques qui permettent
un meilleur étalonnage et sont plus souples selon moi. Notez que 400 correspond à
normal et 700 à bold.

2.8.1.4La propriété line-height

Comme vous aurez pu le remarquer, cette propriété n’est pas une propriété
de type « font- » à proprement parler mais concerne également la mise en forme du
texte, donc elle a tout à fait sa place dans cette partie.

La propriété line-height sert à fixer l’écartement, c’est-à-dire la distance entre deux

lignes de texte. Une pratique communément admise est d’indiquer une valeur pour
notre line-height équivalent à 1,5 fois la taille en pixel de notre texte.
2.8.1.4La propriété font-family
La propriété font-family va nous permettre de choisir la police de notre
texte.

Dans tous les cas, nous déclarerons plusieurs polices (on parle de « famille » de polices, d’où
le nom de cette propriété) afin de s’assurer qu’au moins une des polices mentionnées soit
supportée par vos visiteurs.
En effet, il existe toujours des versions de navigateurs et des ordinateurs ne
supportant pas certaines polices, d’où tout l’intérêt d’en déclarer plusieurs.

La première police déclarée sera le choix par défaut. Si elle n’est pas lue par votre
visiteur, alors on utilisera la seconde et etc.

Voyons tout de suite comment cette propriété s’utilise avec un exemple :

2.8.2 La propriété color

Nous allons finalement apprendre à changer la couleur d’un texte en CSS
avec la propriété color.
Nous ne voyons véritablement cette propriété que maintenant car vous allez voir qu’il existe
plusieurs façons de gérer la couleur d’un texte, et certaines d’entre elles ne sont pas évidentes
à priori.
Première façon de changer la couleur d’un texte, la plus simple mais également de
loin la plus limitée : en attribuant un nom de couleur (en anglais) en valeur de la
propriété color.

Cette méthode reste très limitée car nous ne pouvons choisir que parmi seize noms de
couleurs qui sont les suivants :
Les valeurs que vous voyez sous le nom des couleurs sont des valeurs qu’on appelle
hexadécimales. Ce type de valeur va correspondre à notre deuxième méthode pour
fixer la couleur d’un texte.
« Hexadécimal » signifie « qui fonctionne en base 16 ». Pour le dire simplement, un
système hexadécimal est un système qui utilise 16 symboles pour compter, à savoir
dans notre cas les nombres de 0 à 9 et les lettres de A à F. La lettre A correspondra
ainsi à 10, B à 11, C à 12, D à 13, E à 14 et F à 15. Cela nous fait donc bien 16
symboles en comptant le zéro.

Ce système de comptage peut paraître complexe et assez étrange pour ceux qui
n’ont pas fait d’études de mathématiques, je veux bien le comprendre. Cependant,
je vous demande de ne pas en avoir peur et de le voir tel qu’il est : un système pour
compter de 0 à 15 en soi très simple.

Mais quel rapport avec nos couleurs donc ? En fait, on va pouvoir donner une valeur
hexadécimale en valeur de la propriété color, afin de choisir très précisément la couleur
voulue. Cette valeur devra commencer par un dièse, suivie de 6 symboles choisis entre 0 et F.
Les deux premiers symboles vont définir l’intensité de rouge de notre couleur, les
deux suivants l’intensité de vert et les deux derniers l’intensité de bleu. Vous
pouvez imaginer que cela se passe comme lorsque vous mélangez de la peinture
afin d’obtenir une couleur précise.
L’intérêt de ce type de valeur est de pouvoir choisir parmi plus de 16 millions de
nuances différentes. Si vous avez bien suivi, l’échelle d’intensité va de 0 à 255 pour
chaque binôme de valeurs, 00 étant l’intensité la plus faible et FF l’intensité la plus
forte.

Pourquoi de 0 à 255 ? C’est en fait très simple ! Considérez que 00 correspond à 0

sur notre échelle d’intensité. 01 correspond à 1, 02 à 2, 0A à 10 et 0F à 15. Après
0F, on a 10 (lisez « un, zéro » pour comprendre plus clairement) qui correspond à
16 ; 11 qui correspond à 17 ; 1A qui correspond à 26 et etc. jusqu’à FF qui
correspond à 255. Cela fonctionne finalement comme pour nos dizaines, à part
qu’ici on compte en seizaines.

N’hésitez pas à vous entraîner en faisant différents essais pour voir comment se
comporte la propriété color avec ce type de valeur et être bien certain de maîtriser
tout cela !

Le plus important est encore une fois de retenir que les deux premiers symboles
correspondent à l’intensité de rouge, les deux suivants à l’intensité de vert et les
deux derniers à l’intensité de bleu.

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

Vous le voyez, il existe de nombreuses similitudes entre les notations en hexadécimal et en

RGB. On peut d’ailleurs tout à fait convertir l’hexadécimal en RGB, en partant du principe
que 00 en hexa correspond à 000 en RGB et que FF en hexa correspond à 255 en RGB.
Je vous conseille de vraiment vous entrainer avec chaque type de valeurs afin de
toutes bien les maîtriser car, selon les situations, vous utiliserez plutôt un type ou un
autre dans le futur.

2.8.3 Les propriétés CSS de type “TEXT-”

Les propriétés de type « text- » servent également à fixer l’apparence de
nos textes. Elles viennent donc compléter les propriétés de type « font- » vues au
chapitre précédent.

2.8.3.1 Gérer l’alignement d’un texte

Pour modifier l’alignement d’un texte, nous allons utiliser la propriété text-
align.

Cette propriété peut prendre cinq valeurs différentes :

  Left : le texte sera aligné sur la gauche ; valeur par défaut ;
 Center : le texte sera centré ;
 Right : le texte sera aligné sur la droite ;
 Justify : le texte sera justifié ;
 Inherit : hérite des propriétés de l’élément parent.
Il est bon de noter que le centrage ou l’alignement se fait toujours par rapport à
l’élément parent le plus proche du texte.

Dans l’exemple suivant, on voit bien que mon paragraphe « pdiv » est aligné à
droite de son élément parent (c’est-à-dire le div qui fait lui-même 100px de large) et
non pas de la page. Le second paragraphe, n’ayant pour parent que l’élément body,
est donc bien lui centré sur la page.

2.8.3.2 La propriété text-decoration

On va pouvoir modifier la décoration d’un texte grâce à la propriété text-decoration.
On peut choisir parmi six valeurs pour cette propriété :
 Underline : le texte sera souligné ;
 Overline : une ligne apparaîtra au-dessus du texte ;
 Line-through : le texte sera barré ;
 Blink : le texte clignotera (attention, ne fonctionne pas sur tous les
navigateurs) ;
 Inherit ;
 None : pas de décoration, comportement par défaut.
Voyons quelques exemples d’utilisation de cette propriété ensemble :
2.8.3.3 La propriété text-indent
La propriété text-indent sert à gérer l’indentation d’un texte. L’indentation,
pour ceux qui l’auraient oublié, est le décalage d’un texte sur la droite
généralement.Cette propriété accepte des valeurs de type absolu (px, pt) et relatif
(em, ex, %). Vous pouvez également lui attribuer des valeurs négatives afin de
décaler votre texte sur la gauche.

2.8.3.4 La propriété text-transform

On utilisera la propriété text-transform pour modifier l’aspect des caractères
d’un texte (majuscules ou minuscules).

Nous pouvons choisir parmi cinq valeurs :

 Uppercase : transforme tout le texte en majuscules ;

 Lowercase : met tout le texte en minuscules ;
  Capitalize : met uniquement la première lettre de chaque mot en
majuscule ;
 None : pas de transformation ;
 Inherit : hérite des styles de l’élément parent.
Exemple :

2.8.3.5 L’opacité d’un texte

Le CSS nous offre deux méthodes pour fixer le niveau d’opacité de nos
textes.

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

En pratique, la propriété s’utilise donc de cette manière :

2.8.3.6 Les propriétés letter-spacing et word-spacing
Les propriétés letter-spacing et word-spacing permettent
respectivement d’ajuster l’espace entre les lettres et entre les mots.

Ces propriétés se comportent de manière similaire et acceptent des valeurs absolues

(px, pt) et relatives (ex, em, %).

Exemple :

2.8.3.7 Les ombres des textes

On peut ajouter des effets d’ombre à un texte en utilisant la propriété text-shadow.
Cette propriété nécessite au minimum deux valeurs pour fonctionner.
Cependant, dans la grande majorité des cas, nous en utiliserons quatre, dans l’ordre vu ci-
dessous.
Les trois premières valeurs correspondent à des longueurs et la dernière est la
couleur de l’ombre :

 1ère valeur : déplacement horizontal de l’ombre ;

 2ème valeur : déplacement vertical de l’ombre ;
 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la
propriété « color »).

Voyons ensemble comment cette propriété fonctionne :

2.9 Le modèle des boîtes

Le modèle des boîtes est un concept essentiel que vous devez absolument comprendre
pour ensuite mettre en page et positionner les différents éléments de votre page web.
Le modèle des boîtes nous dit que « tout élément d’une page est une boîte rectangulaire et
peut avoir un padding, une marge et des bordures ».
Ça mérite d’être répété : tout élément, qu’il soit un élément de type block ou de type inline,
est une boîte rectangulaire.
Les propriétés permettant d’indiquer la longueur, la largeur, la marge, le padding et les
bordures d’un élément forment ce qu’on appelle le modèle des boîtes.
Le modèle des boîtes illustré :
La première boîte est définie par la longueur et la largeur d’un élément. La padding,
ou marge intérieure, forme ensuite la seconde boîte. Puis viennent les bordures qui
constituent la troisième boîte. Enfin, la marge extérieure vient former la quatrième et
dernière boîte.

2.9.1 Hauteur et largeur d’un élément

Tout élément possède une hauteur et une largeur par défaut. La hauteur d’un élément
est déterminée par son contenu.
Par exemple, des paragraphes d’une ligne ou de deux lignes n’occuperont pas la même
hauteur.
La largeur par défaut d’un élément est avant tout déterminée par son type (block ou
inline) puis par son contenu si l’élément est de type inline.

En effet, rappelez-vous que les éléments de type block occupent automatiquement

toute la largeur disponible.

Pour modifier la hauteur d’un élément, on utilise la propriété height à laquelle on

attribue une valeur en px, % ou égale à auto dans la grande majorité des cas.

En utilisant la valeur auto, on laisse le navigateur de nos visiteurs décider de la

hauteur que doit prendre l’élément visé. Cela est très utile dans le cas où l’on veut
conserver les proportions d’une image tout en l’adaptant à la taille de l’écran de nos
visiteurs.

Pour modifier la largeur d’un élément, on utilise cette fois la propriété width. Cette
propriété prend les mêmes types de valeurs que height.
Illustrons tout cela par un exemple. J’ai ajouté des bordures afin que vous puissiez
bien voir la taille de chaque élément. Ne vous souciez pas de la propriété border
pour le moment.

2.9.2 Les bordures et les bordures arrondies

Tout d’abord, vous devez savoir qu’il existe de nombreuses sortes de
bordures dont certaines sont plus ou moins bien supportées par certains navigateurs.

Pour créer des bordures et les personnaliser, nous allons avoir besoin de trois
propriétés :

 Border-width, qui va définir l’épaisseur de la bordure (valeur en px) ;

 Border-style, qui va définir le style de la bordure ;
 Border-color, qui va définir la couleur de la bordure (accepte les mêmes
valeurs que la propriété « color »).

La propriété border-style peut prendre de nombreuses valeurs différentes. Les

valeurs les plus utilisées sont solid, dotted (pointillé) et dashed (tiret). Vous
pouvez voir ci-dessous le résultat pour chaque style de bordure :
Et voici un exemple d’utilisation des propriétés de type border :

Une fonctionnalité longtemps attendue par les webmasters et les développeurs et qui a vu le
jour avec le CSS3 est la possibilité de créer des bordures arrondies.
Pour faire cela, nous allons utiliser la propriété border-radius. Cette propriété va prendre une
valeur : la taille de l’angle, en px.
Notez que l’on peut définir des angles différents pour chaque côté de nos bordures
en utilisant les mots clefs top-left, top-right, bottom-left et bottom-right.
Notez également que ces mots clefs sont souvent employés en CSS, ensemble ou séparément
(que top, ou que left par exemple). N’hésitez donc pas à les tester avec certaines propriétés
déjà vues ou que l’on va voir !

2.9.3 Les marges intérieures

Pour définir les marges intérieures d’un élément, nous utiliserons la
propriété padding.

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

2.9.4 Les marges extérieures

Pour définir la taille des marges extérieures, c’est-à-dire de l’espace à
l’extérieur des bordures d’un élément, nous allons utiliser la propriété margin.

Contrairement à la propriété padding, la propriété margin peut tout-àfait être utilisée pour
positionner des éléments dans une page ou les uns par rapport aux autres.
Nous attribuerons généralement des valeurs en px ou en % à cette propriété. Tout
comme la propriété padding, nous allons pouvoir des marges différentes de chaque
côté de nos éléments avec les propriétés margin-right, margin-bottom, margin-left et
margin-top.

Notez que les valeurs par défaut des marges intérieures et extérieures peuvent
légèrement différer d’un navigateur à un autre. Cela peut impacter le design général
de votre site pour certains de vos visiteurs.

Afin de s’assurer que chaque visiteur verra un résultat conforme à nos attentes, nous
pouvons utiliser un « reset CSS » pour notre padding et notre margin.
Dans ce cas là, c’est très simple, il suffit par exemple d’appliquer un padding et une
margin avec des valeurs égales à zéro à notre élément body. Ensuite, on précisera
les différentes marges souhaitées à nos éléments enfants.

En pratique, voici comment ça se passe :

2.9.5 Les ombres des boîtes

On peut créer des ombres autour des boîtes, tout comme on l’avait fait pour
nos textes précédemment.

Nous allons cette fois-ci utiliser la propriété box-shadow. Cette dernière fonctionne
exactement comme text-shadow, avec deux valeurs obligatoires et quatre
recommandées pour marcher :

 1ère valeur : déplacement horizontal de l’ombre ;

 2ème valeur : déplacement vertical de l’ombre ;
 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
  4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la
propriété « color »).
Notez que dans le cas des ombres des boîtes, il peut être intéressant de rajouter à la
fin une dernière valeur, l’inset, si l’on souhaite créer une ombre intérieure.

2.9.6 Faire flotter un élément

Pour aligner des éléments les uns par rapport aux autres, on peut les faire «
flotter ». Pour faire flotter un élément, nous utiliserons la propriété float avec les
valeurs suivantes : left, right, none ou inherit.

Un élément flottant va sortir du schéma naturel (du « flow ») d’une page web pour
venir se placer contre le bord gauche ou droit de l’élément qui le contient ou contre
le bord de la page.

Lorsque l’on fait flotter un élément, les éléments après l’élément flottant vont venir
se positionner à côté de celui-ci.
Dans l’exemple ci-dessus, on remarque que l’élément strong, contenu dans l’élément p2, va
venir se placer dans le coin à droite de son élément parent (l’élément p2 donc).
L’élément p1 va lui se placer à gauche dans la page tandis que l’élément p2 va se
placer à droite ; à côté de l’élément p1.

Généralement, on utilisera plutôt la propriété float sur des éléments de type inline
comme des images par exemple. En effet, cette propriété peut être la cause de
problème d’affichages lorsqu’elle est mal utilisée sur des éléments de type block.

Si l’on veut qu’un élément suivant un élément flottant vienne se placer sous cet
élément flottant, il faudra utiliser la propriété clear. Celle-ci accepte trois valeurs :
left, right ou both :

 left : un élément va se placer en dessous après un float left ;

 right : un élément va se placer en dessous après un float right ;
 both : un élément va se placer en dessous après un float left ou un float
right.

Voici ce que ça donne en pratique :

2.9.7 La propriété display

La propriété display est une propriété extrêmement puissante : elle permet de changer
le type d’un élément de block à inline ou d’inline à block.
Cette propriété supporte quatre valeurs différentes qui correspondent aux différents
types d’éléments possibles : inline, block, inline-block et none.

La nouveauté ici est le type inline-block. Ce nouveau type ne peut être donné à un
élément que grâce à la propriété display. Il va être un mix des types inline et block.

Un élément de type inline-block se comporte de cette façon : l’élément en soi

(contenu et boîtes) se comporte comme un type block tandis que le contenu
seulement se comporte comme un type inline.

Pour le dire plus simplement, un élément de type inline-block se comportera comme

un élément de type inline excepté que l’on va pouvoir contrôler précisément sa
hauteur et sa largeur.
2.9.8 La propriété position
La propriété position est une autre propriété très puissante nous permettant
de définir l’emplacement d’éléments HTML dans une page. Cette propriété peut
prendre cinq valeurs :

 Static : valeur par défaut, ne change pas la position de base d’un élément
;
 Absolute : permet de positionner un élément n’importe où dans la page,
par rapport à son élément parent direct ;
 Fixed : permet de positionner un élément n’importe où dans la page. De
plus, l’élément reste visible si vous descendez ou remontez le long d’une
page ;
 Relative : permet de replacer un élément relativement par rapport à son
positionnement par défaut ;
 Inherit : l’élément hérite des propriétés de son parent.

Pour ensuite jouer sur la position de nos éléments, nous utiliserons les mots clefs
right, bottom, left et top.
Dans cet exemple, notre paragraphe p1 a un positionnement fixed et a été décalé de
80px sur la gauche par rapport au bord de la page.

Le paragraphe p2 possède lui une position relative. Il a été décalé de 50px par
rapport à son positionnement de base (par défaut, il aurait été placé au-dessus de
notre p1 à cause de son positionnement fixed).

L’élément strong possède un positionnement absolute. Sans notre left :150px, il

aurait été collé sur le bord gauche de son élément parent, l’élément p2.

Notez qu’un positionnement absolute sur un élément annule la propriété float si on

lui en a appliqué une.

2.9.9 Le z-index
Parfois, lorsque l’on crée le design de nos pages web, il arrive que deux
éléments se chevauchent selon certaines circonstances.

Il peut alors être utile de savoir comment indiquer quel élément doit apparaître au-
dessus de quel autre en cas de chevauchement.
Pour cela, nous utiliserons la propriété z-index. Celle-ci fonctionne avec tous les
éléments positionnés et permet d’indiquer quel élément doit être au-dessus de quel
autre en cas de conflit.

Un élément positionné est un élément auquel on a appliqué la propriété position

avec une valeur soit absolute, soit relative, soit fixed.

Le z-index ne fonctionnera donc pas sur des éléments positionnés en static (qui est
la valeur par défaut).

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

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