PROGRAMMATION

k
WEB

Objectifs généraux
A la fin de cette UE, l’étudiant doit être capable de :
 Savoir utiliser les différentes balises et attributs contenus dans une
page HTML
 Savoir insérer le code CSS dans du HTML

Sommaire
Partie1 : HTML

 Chapitre 1 : Les bases du html

 Chapitre 2 : Création d’une page web en html5 et organisation du texte
 Chapitre 3: Création des liens
 Chapitre 4 : Les images
 Chapitre 5 : Les tableaux
 Chapitre 6 : Les formulaires

Partie 2 : CSS 3

 Chapitre 1 : Introduction au langage css

 Chapitre 2 : La couleur et le fond
 Chapitre 3 : Les bordures et les ombres
 Chapitre 4 : Style du texte
 Chapitre 5: Le positionnement en css
 Chapitre 6 : Le modèle des boites

1
Partie 1 : HTML

2
 Chapitre 1 : les bases du HTML

Objectifs spécifiques

A la fin cette partie l’étudiant doit être capable de :

 Connaitre le rôle du langage HTML
 Maitriser les éditeurs de texte et navigateurs

Introduction
Le HTML (HypertextMarkupLanguage) est un langage de programmation permettant
d’afficher une page web. Ce langage a pour rôle de gérer et d’organiser le contenu d’une page
web. Le HTML a été inventé en 1991par TIM Berners lors du lancement du Web .mais dans
les années2000, le W3C a lancé le xHTML qui malheureusement n’a pas eu du succès .c’est
en 2009 que le W3C a abandonné le xHTML pour revenir en HTML et le faire évoluer en 5
versions
I .GENERALITES

Le HTML est une version utilisée pour la création des sites web .ce langage a connu plusieurs versions

1- Les différentes versions du HTML

 Le HTML 1 : c’est la toute première version crée en 1991 par TIM Berners
 HTML 2 : deuxième version apparu en 1994 et prend fin en 1996
 HTML 3 : apparu en 1996 elle ajoute au langage les possibilités telles que les
tableaux, les applets, les scripts, le positionnement du texte autour des images.
 HTML4 : elle apparait pour la première fois en 1998 et propose l’utilisation des
frames (qui découpent une page web en plusieurs parties, des tableaux plus
complexes, des améliorations sur les formulaires, permet l’exploitation des feuilles de
styles grâce au CSS)
 HTML 5 : c’est la dernière version, car elle apporte de nombreuses améliorations par
exemple la possibilité d’inclure facilement des vidéos, un meilleur agencement du
contenu de nouvelles fonctionnalités pour les formulaires etc…

NB : HTML gère le fond d’une page web et CSS sa forme.

II. Les logiciels de création de sites web

Il existe de nombreux logiciels dédiés à la création de sites web.
On peut classer ces logiciels de création de site web en deux catégories : Les WYSIWYG et
Les éditeurs de texte
1) Les WYSIWYG
(What You See Is What YouGet- Ce Que Vous Voyez Est Ce Que Vous Obtenez) : ce
sont des programmes qui se veulent très faciles d'emploi, ils permettent de créer des sites
web sans apprendre de langage particulier. Parmi les plus connus d'entre eux : Mozilla
Composer, Microsoft Expression Web, Dreamweaver… et même Word.

2) Les éditeurs de texte

Ce sont des programmes dédiés à l'écriture de code.
3
 a- Sous Windows
Il existe une grande quantité d'éditeurs de texte, nous distinguons par exemple :
- Notepad++, l'un des plus utilisés parmi ceux disponibles pour Windows, Ce
- BlocNote
- jEdit ;
- PSpad ;
- ConTEXT

b- Sous Mac OS X
Nous distinguons les logiciels suivants :
- jEdit ;
- Smultron ;
- BBEditremplacé par Text Wrangler
- TextMate
- Coda
c- Sous Linux
Les éditeurs de texte sont légion sous Linux. Certains d'entre eux sont installés par défaut,
d'autres peuvent être téléchargés facilement via le centre de téléchargement (sous Ubuntu
notamment) ou au moyen de commandes comme apt-get et aptitude. Voici quelques logiciels
que vous pouvez utiliser :
- gEdit ;
- Kate ;
- vim ;
- Emacs ;

NB: d’autres éditeurs peuvent utiliser sur les trois systèmes d’exploitation citez
plus haut tels que :
UltraEdit,
KomodoEdit,
Visual Studio Code,
Brackets,
Sublime Text

3. Les Navigateurs
Un navigateur c’est un logiciel qui permet d’accéder aux pages web. Le navigateur permet
de lire le code HTML et afficher le résultat visuel à l’écran .il existe de nombreux navigateurs
différents mais les plus utilisés dont le récapitulatif se présente dans le tableau suivant :

4
 NB : on distingue également les navigateurs sur mobile
4. Moteur de recherche
Un moteur de recherche est un logiciel qui permet d’effectuer des recherches sur
internet. Par exemple on peut citer entre autres :
 Alta vista avec http : //www.alta vista.com
 Google avec http : //www.google.com
 Yahoo avec http : //www.yahoo.fr

5
 CHAPITRE 2 : CREATION D’UNE PAGE WEB EN HTML5 ET

ORGANISATION DU TEXTE

Objectifs spécifiques

A la fin ce chapitre l’étudiant doit être capable de :

 Connaitre la structure de base du HTML
 Maitriser les différents balises et attributs utilisés dans le HTML
 Etablir une différence entre une balise et un attribut
 Organiser le texte (paragraphe, mise en valeur, les titres, saut à la ligne, listes
ordonnées et désordonnées…

INTRODUCTION
La création d’une page web nécessite l’utilisation de plusieurs outils. La maitrise de
sa structure de base est primordiale avant l’installation d’un éditeur de texte qui est le logiciel
de base pour sa réalisation. Les pages HTML sont remplies par les baliseset des attributs qui
identifient le HTML.

I. Structure de base d’une page HTML

<! DOCTYPE html>1

<Html>2

<Head>3
<meta charset= ’’utf-8’’/>4
<Title>Mon titre</title>5
</head>6
<Body>7

</Body>8

</Html>9

1= Préparation d’une page web

2 et 9 = Structure de notre page web
3 et 6 = Information d’entête de notre page web
7 et 8 = Le corps de notre page web (tout le contenu de notre page web)

6
4 = Ecriture des caractères spéciaux
5 = Indication du titre de notre page web

NB : Quand vous ouvrez une balise rassuré vous que vous l’avez fermée.

Il est a noté que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple,
la balise <html>est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à
la fin du code, avec </html>). Les balises doivent être fermées dans lesens inverse de leur
ouverture. Un exemple :
<html><body></body></html>: correct. Une balise qui est ouverte à l'intérieur d'une autre
doit aussi être ferméeà l'intérieur.
<html><body></html></body>: incorrect, les balises s'entremêlent.
1- Le doctype
Code : HTML
<!DOCTYPE html>
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui
indique qu'il s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les
autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu
l'exception qui confirme la règle.

2- La balise </html>
Code : HTML
<html></html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous
pouvez le voir, la balise fermante </html>se trouve tout à la fin du code.

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

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

4- L'encodage (charset)
Code : HTML
<metacharset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html.
5- Le titre principal de la page
Code : HTML
<title>
C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit
avoir un titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères en général).
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du
navigateur).

7
 6- Les commentaires
Un commentaire en HTML est un texte qui sert simplement de point repère. Il n'est pas
affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.
Un commentaire est une balise HTML avec une forme bien spéciale :
Code : HTML
<!- - Ceci est un commentaire - ->

Remarque : Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun
impact sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans
votre code source (surtout s'il est long).
Code: HTML
<!DOCTYPE html>
<html>
<head>
<!--En-tête de la page -->
<metacharset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>

7- Interface d’un éditeur de texte : notepad++

Dans le cadre notre cours Nous travaillerons avec l’éditeur de texte bloc note (logiciel
d’éditeur de texte par défaut sous Windows) et Notepad++ donc voici l’illustration :

 Apres s’avoir écrit ce l’on souhaite, le fichier doit être enregistré sous
l’extension « .html »
 On va à fichier, cliquer sur Enregistrer sous .html (donner n’importe
quel nom à votre fichier et l’emplacement …)

II- Les balises et leurs attributs

1- Les Balises

Les pages HTML sont remplies des balises, Les balises se repèrent facilement. Elles
sont entourées de « chevrons », c'est-à-dire des symboles < et>, comme ceci :<balise>.
On distingue deux types de balises : les balises en paires et les balises orphelines.
a- Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
Code : HTML

8
<Titre>bienvenu dans mon site </titre>
On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui
indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre
ces deux balises… n'est pas un titre.
Code : HTML
Ceci n'est pas un titre <titre>Ceci est un titre</titre>Ceci n'est pas un titre

b- Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis
(par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image
Une balise orpheline s'écrit comme ceci :
Code : HTML
<img />

2) Les attributs
Les attributs sont un peu les options des balises. Ils viennent les compléter pour
donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme
ceci :
Code : HTML
<balise attribut="valeur">
<image nom="photo.jpg" />

3) Les paragraphes
Lorsqu’on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le
langage HTML propose justement la balise <p>pour délimiter les paragraphes.
Code : HTML
<p>Bonjour et bienvenue sur mon site !</p>
<p>signifie « Début du paragraphe » ;
</p>signifie « Fin du paragraphe ».

4) Saut à la ligne
Il existe une balise « Aller à la ligne » !
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />. Vous
<br />: pour aller à la ligne.

5) Les titres
En HTML, On a six balises de titres différentes qui se trouve à l’intérieur de la balise
<body></body>
<h1></h1>: signifie « titre très important ». la page au début de celle-ci.
<h2></h2>: signifie « titre important ».
<h3></h3>: pareil, c'est un titre un peu moins important
<h4></h4>: titre encore moins important.
<h5></h5>: titre pas important.
<h6></h6>: titre vraiment pas important.

9
 6) La mise en valeur d’un texte
La mise en valeur consiste à ressortir l’importance d’un mot ou d’une phrase dans votre
page.
a) Mettre en italique
Pour mettre un peu en valeur votre texte, vous devez utiliser
La balise <em> ou <I></I>.

b) Mettre en gras
Pour mettre un texte bien en valeur, on utilise la balise <strong></strong>, ou<B><B>.
c) Marquer ou surligner le texte
Pour faire ressortir visuellement une portion de texte on utilise la balise <mark></mark>.
d) Souligner le texte
Pour souligner un mot ou un texte on utilise la balise <U></U>

7) Les listes
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations.
Il existe deux types de listes :
 les listes non ordonnées ou listes à puces ;
 les listes ordonnées ou listes numérotées ou encore énumérations.
 Les listes de définitions
a) Liste non ordonnée
Une liste non ordonnée ressemble à ceci :
 Fraises
 Framboises
 Cerises
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a
pas de « premier » ni de « dernier »). On utilise la balise <ul>que l'on referme un peu plus
loin avec </ul>.
Code : HTML
<ul></ul>
Chacun des éléments de la liste s’écrit entre deux balises <li></li>.
Code : HTML
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
En résumé :
<ul></ul>délimite toute la liste ;
<li></li>délimite un élément de la liste (une puce).
b) Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul></ul>par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li>pour
délimiter les éléments.

Code : HTML

10
<h1>Ma journée</h1>
<ol>
<li>Je me lève</li>
<li>Je mange et je bois</li>
<li>Je retourne me coucher</li>
</ol>

c) listes de définition
La balise dl représente une liste de définition qu’on appelle aussi liste de description
ce type de liste est particulier en HTML doit toujours être compose des termes à définir et sa
définition

On utilise à l’intérieur de la balise dl, les éléments dt pour présenter le terme à définir et les
éléments dd pour fournir les définitions relatives à chaque terme
Code html
<dl>
<dt>HTML </dt>
<dd>le HTML est un langage de balisage utilise pour définir les différents éléments d’une
page </dd>
</dl>

11
 Chapitre 3: CREATION DES LIENS

Objectifs spécifiques
A la fin de ce chapitre, l’étudiant doit être capable de :
 Créer un lien vers un site
 Faire les liens entre les pages d’un même dossier ou de dossiers différents
 Créer un lien vers une ancre

INTRODUCTION
Un lien est un texte sur lequel on peut cliquer pour se rendre sur une autre page .Un lien
peut être fait d’une page A vers une page B ou vers un site ou encore vers une ancre qui est une sorte
de point de repère présente dans une page HTML.

I. Un lien vers un autre site

Pour faire un lien, nous allons utiliser la balise: <a>. Il faut cependant lui ajouter un attribut, href,
pour indiquer vers quelle page le lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène vers mon site, situé à l'adresse
http://www.monsite .com
Code : HTML

<ahref="http://www.mon site.com">monsite</a>
Code : HTML
<p>Bonjour. Souhaitez-vous visiter le <a
href="http://www.monsite.com">mon site</a>?<br />
Remarque : Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà ouvert la page, le lien
s'affiche en violet.

II. Deux pages situées dans un même dossier

Nous allons créer deux fichiers correspondant à deux pages HTML différentes. Nous allons
les appeler page1.html et page2.html. Nous aurons donc ces deux fichiers sur notre disque dans le
même dossier.

<a href="page2.html">. On dit que c'est un lien relatif.

Voici le code que nous allons utiliser dans nos fichiers page1.html et page2.html.
page1.html

Code : HTML
<p>Bonjour. Souhaitez-vous consulter <a href="page2.html">la page
2</a>?</p>

page2.html
La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien arrivé sur
la page 2 :

12
III. Deux pages situées dans des dossiers différents
Dans ce cas nous pouvons avoir deux possibilités
1- Dans le même disque
Par exemple au bureau (disque local C). Nous créons deux dossiers par exemple LICENCE I
et LICENCE II dans lesquelles on introduit les pages respectivement page 1 et page 2.
Dossier1
Code : HTML
<a href="page1.html">page2</a>
Dossier2
Code : HTML
<ahref="page2.html">page1</a>

2- Dans deux les disques différents

Les dossiers peuvent être créés dans le disque local D et le disque local C
Dossier1
Code : HTML
<a href="C:\Users\IAI-Cameroun\Desktop\ licence1">page 3</a>
Dossier 3
Code : HTML
<ahref="D:\licence 3">page2</a>

IV. Un lien vers une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML
lorsqu'elles sont très longues.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce
peut être n'importe quelle balise, un titre par exemple. Utilisez l'attribut id pour donner un nom à
l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre.
.
Exemple :
Code : HTML
<a href="#mon_ancre">Aller vers l'ancre</a>
Cette action est plus visible lorsque nous mettons beaucoup de texte
puis nous ouvrons un paragraphe avec la balise <P> texte </P> nous choisissons un mot qui nous
servira de repère en ajoutant un attribut id Normalement, si vous cliquez sur le lien, cela vous amènera
plus bas dans la même page.
Code : HTML
<h2 id="mon_ancre">Titre</h2>
Nous pouvons également créer plusieurs ancres dans un document
Exemple
Code : HTML
<h1>Ma grande page</h1>
<p>
Aller directement à la partie traitant de :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="arc">Le tir à l'arc</h2>
<p>... (beaucoup de texte) ...</p>

13
 Remarque : L’attribut id sert à donner un nom « unique » à une balise, pour s'en servir de
repère.. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous sera très utile pour «
repérer » une balise précise.

V. Lien vers une ancre située dans une autre page

Pour le faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.
Par exemple : <a href="ancres.html#rollers">
Ceci vous amènera sur la page ancres.html, directement au niveau de l'ancre appelée rollers.
Voici une page qui contient trois liens, chacun amenant vers une des ancres de la page de l'exemple
précédent :
Code : HTML
<h1>Le Mégamix</h1>
<p>
Rendez-vous quelque part sur une autre page :<br />
<a href="ancres.html#cuisine">La cuisine</a><br />
<a href="ancres.html#rollers">Les rollers</a><br />
<a href="ancres.html#arc">Le tir à l'arc</a><br />
</p>

VI. Un lien qui ouvre une nouvelle fenêtre

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera
target="_blank" à la balise <a>:
Code : HTML
<p>Bonjour. Souhaitez-vous visiter le <a
href="http://www.monsite.com" target="_blank">mon site</a>
?<br />
Le site s'affichera dans une autre fenêtre.</p>

Remarque: Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou
un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel
onglet.

VII. Un lien pour envoyer un e-mail

Si vous souhaitez recevoir un e-mail provenant de vos visiteurs, vous pouvez utiliser des liens de
type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de
l'attributhref comme ceci :
Code : HTML
<p><a href="mailto:[email protected]">Envoyez-moi un e-mail
!</a></p>
Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous
contacter. Si vous cliquez sur lelien, un nouveau message vide s'ouvre, prêt à être envoyé à votre
adresse e-mail.

VIII. Un lien pour télécharger un fichier

Le téléchargement d'un fichier se fait exactement comme si on faisait un lien vers une page web,
mais en indiquant cette fois le nom du fichier à télécharger.

Exemple :
Vous souhaitez faire télécharger monfichier.zip.
Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier)
et faites un lien vers ce fichier :
Code : HTML

14
<p><a href="monfichier.zip">Télécharger le fichier</a></p>
Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de
téléchargement lorsqu'on cliquera sur le lien.

IX. Un lien pour lancer un appel

<a href="tel : numéro ">appeler </a>

15
 Chapitre 4 : Les Images

Objectifs Spécifiques
A la fin de ce chapitre l’étudiant doit être capable de :
 Présenter les différents types de formats d’images et leurs caractéristiques
 Insérer une image dans un code HTML
 Ajouter une légende
Introduction
Dans la programmation web, des images occupent une place importante. Celles-ci
existent sous différents formats avec des caractéristiques bien définies. Le choix des images
ne se fait pas au hasard car les images sont parfois volumineuses à télécharger, ce qui ralentit
le temps de chargement de la page.

I. Les différents formats d'images

1. Le JPEG
Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur
le Web. Ce format est conçu pourréduire le poids des photos (c'est-à-dire la taille du fichier
associé), qui peuvent comporter plus de 16 millions de couleurs différentes.
Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg.
2. Le PNG
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est
adapté à la plupart des graphiques (à tout ce qui n'est pas une photo). Le PNG a deux gros
avantages : il peut être rendu transparent et iln'altère pas la qualité de l'image.Le PNG a été
inventé pour concurrencer un autre format, le GIF, à l'époque où il fallait payer des royalties
pour pouvoir utiliserdes GIF. Depuis, le PNG a bien évolué et c'est devenu le format le plus
puissant pour enregistrer la plupart des images.
Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter
l'image :
 PNG 8 bits : 256 couleurs ;
 PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG).
La compression du JPEG est plus puissante sur les photos. Une photo enregistrée en JPEG se
chargera toujours beaucoup plus vite que si elle était enregistrée en PNG. Il est donc conseillé
de toujours réserver le format JPEG aux photos.
3. Le GIF
C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par
habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont
généralement plus légères et la transparence est de meilleure qualité. Il est recommandé donc
d'utiliser le PNG autant que possible.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs
millions de couleurs).
Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.

16
 Remarque :
Il existe un format adapté à chaque image
En résumé, voici quel format adopter en fonction de l'image que vous avez :

 Une photo : utilisez un JPEG.

 N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8
bits ou éventuellement un GIF.
 N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
 Une image animée : utilisez un GIF animé.

II. Insertion d'une image

La balise qui va nous permettre d'insérer une image est la balise <img />.
C'est une balise de type orpheline (comme <br />). La balise doit être accompagnée de deux
attributs obligatoires :
src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit
mettre un chemin absolu (ex. :http://www.site.com/fleur.png), soit mettre le chemin en
relatif (ce qu'on fait le plus souvent). Ainsi, si votreimage est dans un sous-dossier images,
vous devrez taper : src="images/fleur.png"
alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à
l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Par exemple: alt="Une
fleur".
Remarque : Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe
(<p></p>). Voici un exemple d'insertion d'image :
Code : HTML
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />
<imgsrc="images/montagne.jpg" alt="Photo de montagne" />
</p>
La difficulté est de choisir le bon format d'image. Ici, c'est une photo donc c'est
évidemment le format JPEG qu'on utilise.

III. Les figures

Les figures sont des éléments qui viennent enrichir le texte pour compléter les
informations de la page.
Les figures peuvent être de différents types :
 images ;
 codes source ;
 citations ;
 etc.

1. Création d'une figure

En HTML5, on dispose de la balise <figure>.
Code : HTML
<Figure>
<imgsrc="images/blocnotes.png" alt="sublime text " />
</Figure>
Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende,
utilisez la balise <figcaption>à l'intérieur de la balise <figure>, comme ceci :
Code : HTML
<figure>

17
<img src="images/ sublimetext.png" alt="sublime text "/>
<figcaption>Le logiciel sublime text</figcaption>
</figure>

2. Le rôle des figures

Au début de ce chapitre, il était dit que les images devaient être situées dans des
paragraphes (placées à l'intérieur d'une balise <p></p>). Mais l’exception est la suivante.

Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.
Code : HTML
<p>Connaissez-vous le logiciel sublime text ? On peut faire des sites web avec !</p>
<figure>
<imgsrc="images/blocnotes.png" alt="sublime text " />
<figcaption> Le logiciel sublime text </figcaption>
</figure>
Si elle n'apporte aucune information (c'est juste une illustration pour décorer) :
placez l'image dans un paragraphe. Si elle apporte une information : placez l'image dans une
figure.
La balise <figure>a un rôle avant tout sémantique. Cela veut dire qu'elle indique à
l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du
texte.
NB : une figure peut bien comporter plusieurs images
Voici un cas où cela se justifie
Code : HTML
<figure>
<imgsrc="images/internetexplorer.png" alt="Logo Internet
Explorer" />
<imgsrc="images/firefox.png" alt="Logo Mozilla Firefox" />
<imgsrc="images/chrome.png" alt="Logo Google Chrome" />
<figcaption>Logos des différents navigateurs</figcaption>
</figure>

18
 Chapitre 5 : Les Tableaux

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
 Créer les tableaux de base
 Ajouter et supprimer les lignes et les colonnes
 Etendre les lignes et les colonnes
 Ajouter les légendes
 Faire le formatage des tableaux

INTRODUCTION
Les tableaux HTML sont représentés par les grilles avec les lignes et les
colonnes .Ces lignes et colonnes créent les cellules individuelles contenant des textes
et des images. Les tableaux constituent un élément de conception efficace de
présentation visuelle des informations suivant le choix.
I- Création d’un tableau de base
La création de la structure du tableau ce qui veut dire que vous devez entrer l’élément
table et spécifier les lignes et les colonnes ainsi que les entêtes et entrer les données dans la
cellule du tableau

1) Les éléments de base d’un tableau

Eléments Repères
table Balise qui identifie le tableau
tr Balise qui représente une ligne à l’intérieur d’un
tableau
td Balise qui représente une cellule à l’intérieur d’une
ligne
th Balise qui représente une cellule d’entête à l’intérieur
d’une ligne
Pour créer un tableau, on commence toujours par la structure appropriée du html puis
on ajoute l’élément « table »à l’endroit ou vont apparaitre les limites du tableau ensuite
ajouter l’élément « tr » pour chaque ligne entre les balises « table »
Exemple
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>

19
 </table>
Etant donné qu’un tableau contient les entêtes, il faut ajouter l’élément « th »dans la première
ligne ou nous souhaitons insérer les entêtes du tableau
Exemple
<table>
<tr>
<th>production.</th>
<th>……………………</th>
</tr>
<tr>……………………..</tr>
<tr>
</tr>
</table>
A fin d’ajouter les éléments” td” pour créer des cellules individuelles dans lesquelles nous
allons mettre les informations
<table>
<tr>
<th>………………….</th>
<th>……………………</th>
</tr>
<tr>
<td> …….. </td>
<td>……… </td>
</tr>
<tr>
<td>……..</td>
<td>……..</td>
</tr>
</table>
Ajoutons le contenu de chaque cellule, l’entête du tableau entre la balise de début et de fin «
th », puis entrer les données entre les balises de début et de fin « td »
Exemple
<table>
<tr>
<th>production</th>
<th>industrialisation</th>
</tr>
<tr>
<td> les plants de cacaoyers </td>
<td>les sachets </td>
</tr>
<tr>
<td>l’engrais</td>
<td>les machines </td>
</tr>
<tr>
<td>la trouisson</td>
<td>le chocolat </td>
</tr>

20
</table>

II- Ajout ou suppression de lignes et de colonnes

Apres avoir créé un tableau, vous pouvez facilement ajouter et supprimer des éléments si les
informations subissent les modifications

1) Ajout de lignes et de colonnes

a) Ajout de lignes

Pour ajouter une ligne à un tableau, insérez les éléments supplémentaires tr et td ou vous
souhaitez que la nouvelle ligne apparaisse

Exemple
b) Ajout de colonnes
L’ajout de colonnes est beaucoup plus difficile que l’ajout de ligne parce que vous devez
ajouter une cellule pour chaque ligne
Exemple
<Table>
<tr>
<th>production </th>
<th>industrialisation</th>
<th>commercialisation</th>
</tr>
<tr>
<td> les plants </td>
<td> les sachets </td>
<td> la publicité </td>
</tr>
<tr>
<td> les engrais </td>
<td> les machines </td>
<td> les agents pour la vente </td>
</tr>
2) Suppression des lignes et des colonnes
Il est plus facile de supprimer des lignes et des colonnes que d’en ajouter. Mais il faut
que vous supprimiez tous les éléments associés à la ligne ou à la colonne
a) Suppression des lignes
Lorsque vous supprimez des lignes, supprimer la balise de début et de fin « tr » et les
éléments « td » avec les autres informations qu’elles entourent.
Exemple : suppression de la 2e ligne
<Table>
<tr>
<th>production </th>

21
 <th>industrialisation </th>
<th>commercialisation </th>
</tr>
<tr>
<td> les plants </td>
<td> les sachets </td>
<td> la publicité </td>
</tr>
<tr>
<td> les engrais </td>
<td> les machines </td>
<td> les agents pour la vente </td>
</tr>
3) Fusion ou étendue des lignes et colonnes
Pour effectuer une fusion, on rajoute un attribut à la balise <td>.
Il faut savoir qu'il existe deux types de fusion :
La fusion de colonnes : La fusion s'effectue horizontalement. On
utilisera l'attribut colspan.
La fusion de lignes : La fusion s'effectuera verticalement. On
utilisera l'attribut rowspan.
Comme vous le savez, vous devez donner une valeur à l'attribut (que ce
soit colspan ou rowspan). Il faut indiquer le nombre de cellules à fusionner
entre elles. Dans notre exemple, nous avons fusionné deux cellules : celle
de la colonne « Pour enfants ? »
Et celle de « Pour adolescents ? ». On devra donc écrire :
Code : HTML
<td colspan="2">
… qui signifie : « Cette cellule est la fusion de deux cellules ». Il est
possible de fusionner plus de cellules à la fois (trois, quatre, cinq…).

Code : HTML
<table>
<tr>
<th>Titre du film</th>
<th>Pour enfants ?</th>
<th>Pour adolescents ?</th>
</tr>
<tr>
<td>Massacre à la tronçonneuse</td>
<td>Non, trop violent</td>
<td>Oui</td>
</tr>
<tr>
<td>Les bisounours font du ski</td>
22
<td>Oui, adapté</td>
<td>Pas assez violent...</td>
</tr>
<tr>
<td>Lucky Luke, seul contre tous</td>
<td colspan="2">Pour toute la famille !</td>
</tr>
</table>
<td>Oui, adapté</td>
<td rowspan="2">Pour toute la famille !</td>
</tr>
<tr>
<th>Pour adolescents ?</th>
<td>Oui</td>
<td>Pas assez violent...</td>
</tr>
</table>
Notez qu'on peut modifier l'alignement vertical du texte des cellules de tableaux avec la
propriété vertical-align que nous avons découverte dans le chapitre sur la mise en page.

VI. Un tableau structuré

Pour construire un gros tableau,
Nous allons découvrir deux techniques particulières :
Pour les gros tableaux, il est possible de les diviser en trois parties :
 En-tête ;
 Corps du tableau ;
 Pied de tableau.
Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.
1) Diviser un gros tableau
Pour cela, il existe des balises HTML qui permettent de définir les trois « zones » du
tableau :
L’en-tête (en haut) : il se définit avec les balises <thead></thead>;
Le corps (au centre) : il se définit avec les balises <tbody></tbody>;
Le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>.
Il est conseillé d'écrire les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>
Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et
enfin la partie principale (<tbody>). Le navigateur se chargera d'afficher chaque élément au
bon endroit.
Voici donc le code à écrire pour construire le tableau en trois parties :
Code : HTML
<table>
<caption>Passagers du vol Camerco</caption>
<thead><!-- En-tête du tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>

23
</tr>
</thead>
<tfoot><!-- Pied de tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</tfoot>
<tbody><!-- Corps du tableau -->
<tr>
<td>Christelle</td>
<td>33 ans</td>
<td>yaoundé</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>Douala</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>Maroua</td>
</tr>
<tr>
<td>Martine</td>
<td>34 ans</td>
<td>Garoua</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Bertoua</td>
</tr>
<tr>
<td>Roger</td>
<td>19 ans</td>
<td>Obala</td>
</tr>
</tbody>
</table>

2) Ajout des légendes

Une légende est un texte explicatif ou descriptif qui apparait souvent sous le tableau .les
légende servent à :
- résumer les contenus du tableau
- fournir rapidement les informations sur les contenus de tableaux

24
Pour ajouter une légende, on utilise les balises : <caption></caption> entre les balises<
table></table>.
Si la légende doit apparaitre au-dessus du tableau, on utilise l’attribut align="top"
exemple : <caption align="top">ma légende</caption>
Si c’est en dessous on utilise l’attribut align="bottom" exemple : <caption
align="bottom">ma légende</caption>

V- formatage des tableaux

Le formatage consiste à améliorer l’apparence globale d’un tableau. Par exemple

l’ajout des bordures, insertion des couleurs et des images, l’alignement du tableau,
spécification de la taille du tableau…
1) Ajout et formatage de bordures
Les bordures sont les lignes qui entourent les tableaux en séparant clairement les lignes,
les colonnes et les cellules
a) Création des bordures de tableau
Nous pouvons spécifier les bordures des tableaux à l’aide d’un attribut border = « n » plus le
nombre est grand plus la bordure est large, pour la couleur border= « green »
Pour créer une bordure de tableau et spécifier sa couleur, on utilise le code suivant : <table
border="3" bordercolor="green">
Exemple
<!Doctype html>
<head>
<meta charset="utf"-8 />
<title>exemple tableau</title
</head>
<table border="3" bordercolor="green">
<caption ="bottom">Agriculture</caption>
<tr>
<th>production</th>
<th>industrialisation </th></tr>
<tr>
<td> les plants de cacaoyers </td>
<td>les sachets </td>
</tr>
<tr>
<td>l’engrais</td>
<td>les machines </td>
</tr>
<tr>
<td>la trouisson</td>
<td>le chocolat </td>
</tr>
</table>
25
 Chap. 6 : LES FORMULAIRES

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
 Donner la structure d’un formulaire
 Maitriser Les zones de saisie basiques (mot de passe, texte
multiligne,monoligne,zone enrichies …)
 Maitriser Les éléments options (cases à cocher, listes déroulantes, les zones
d’options
 Créer les boutons soumettre et réinitialisation

INTRODUCTION
Un formulaire est une page qui permet aux utilisateurs à renseigner certaines informations
afin d’accéder à l’interface solliciter (saisir du texte, sélectionner des options, validées avec
un bouton…). Les éléments constitutifs d’un formulaire doivent être entre les
balises <form>et </form>, cet élément peut être inclus directement dans l’élément <body>.
L’élément <fieldset >permet de structurer le contenu, car il a pour rôle de délimiter les
groupes de composants actifs du formulaire. D’un point de vue graphique, chaque groupe de
composants est encadré dans les navigateurs par une bordure mince dans laquelle il est
possible d’intégrer un titre pour chaque groupe.

I. Structure d’un formulaire

Un formulaire dans la page HTML, doit comporter la balise <form></form>. C'est la balise
principale du formulaire, elle permet d'en indiquer le début et la fin.
Code : HTML
<p>Texte avant le formulaire</p>
<form>
<p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>
Notez qu'il faut obligatoirement mettre des balises de type block (comme <p></p>)

1) Les attributs de l’élément <form>

method : cet attribut indique par quel moyen les données vont être envoyées
Il existe deux solutions pour envoyer des données sur le Web :
method="get" : c'est une méthode en général assez peu adaptée car elle est limitée à 255
caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de
la page (http://…),.
method="post" : c'est la méthode la plus utilisée et la plus recommandée pour les
formulaires car elle permet d'envoyer un grand nombre d'informations. Les données saisies
dans le formulaire ne transitent pas par la barre d'adresse.

26
Action : c'est l'adresse de la page ou du programme qui va traiter les informations .Cette page
se chargera de vous envoyer un e-mail avec le message si c'est ce que vous voulez, ou bien
d'enregistrer le message avec tous les autres dans une base de données.
2) Exemple de structure d’un formulaire

Code : HTML
<! DOCTYPE html>
<html>
<head>
<title> Formulaire de base </title >
<meta charset =utf-8 />
</head>
<body>
<p>
<form method="post" action="traitement.php">
</p>
<fieldset>
<legend>formulaire type</legend>
<h1> les composants du formulaire </h1>
< !- - composants du formulaire - - >
< /fieldset>
</form>
</body>
</html>

.
II. Les zones de saisie basiques
Il existe deux zones de texte différentes :
- La zone de texte monoligne
- La zone de texte multiligne

1. Zone de texte monoligne

Comme son nom l'indique, on ne peut y écrire qu'une seule ligne. Elle sert à saisir des textes
courts, par exemple un pseudo <input />.
Pour créer une zone de texte à une ligne, on doit écrire :
Code : HTML
<input type="text" />
Pour donner un nom à un élément de formulaire, on utilise l'attribut name.
Code : HTML
<input type="text" name="pseudo" />
Code : HTML
<form method="post" action="traitement.php">
<p><input type="text" name="pseudo" /></p>
</form>

2. Les libellés
C’est la balise <label> qui permet de créer les libellés
Code : HTML
<form method="post" action="traitement.php">
<p>

27
<label>Votre pseudo</label>: <input type="text"
name="pseudo" />
</p>
</form>
Apres ceci nous devons lier le label à la zone de texte. Dans ce cas , on doit donner un
nom à la zone de texte l'attribut id
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du
champ…
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo</label>:<input type="text"
name="pseudo" id="pseudo" />
</p>
</form>
.
3. Quelques attributs supplémentaires
On peut ajouter un certain nombre d'autres attributs à la balise <input />pour personnaliser
son fonctionnement :
- On peut agrandir le champ avec size.
- On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
- On peut pré-remplir le champ avec une valeur par défaut à l'aide de value.
- On peut donner une indication sur le contenu du champ avec placeholder.
Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce
qu'il faut saisir ; le champ fait 30 caractères de long mais on ne peut écrire que 10 caractères
maximum à l'intérieur :
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" placeholder="Ex
: Zibi" size="30" maxlength="10" />
</p>
</form>
.
4. Zone de mot de passe
Cette zone est celle dont les caractères saisis ne sont pas visibles à l’écran .Pour créer ce
type de zone de saisie, on utilise l'attribut type="password".
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>

28
 5. Zone de texte multiligne
Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser la balise
<textarea></textarea>.
Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser
un label qui explique de quoi il s'agit.
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">Comment pensez-vous que je pourrais
améliorer mon site ?</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>
La taille du <textarea>de deux façons différentes.
widthetheight au <textarea>.
Avec des attributs : on peut ajouter les attributs rowsindique le nombre de lignes de texte qui
peuvent être affichées simultanémentet cols qui indique le nombre de colonnes à la balise
<textarea>..

Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">
Comment pensez-vous que je puisse améliorer mon site ?
</label>
<br />
<textarea name="ameliorer" id="ameliorer" rows="10"
cols="50">
</textarea>
</p>
</form>
6. Les zones de saisie enrichies
HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De
nouveaux types de champs sont en effet apparus avec cette version. Il suffit de donner à
l'attribut type de la balise <input />l'une des nouvelles valeurs disponibles. Tous les
navigateurs ne connaissent pas encore ces zones de saisie enrichies. À leur place, les
anciennes versions des navigateurs afficheront une simple zone de saisie monoligne (comme
si on avait écrit type="text").
a) E-mail
Vous pouvez demander à saisir une adresse e-mail :
Code : HTML
<input type="email" />
Le champ vous semblera a priori identique mais votre navigateur sait désormais que
l'utilisateur doit saisir une adresse e-mail.
Un champ e-mail mal renseigné est entouré de rouge dans Firefox
.
7. Une URL
Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement
par http://) :
Code : HTML
<input type="url" />

29
 a) Numéro de téléphone
Ce champ est dédié à la saisie de numéros de téléphone :
Code : HTML
<input type="tel" />
Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit remplir le champ (figure
suivante).
Clavier de saisie de numéro de téléphone sur un iPhone
b) Nombre
Ce champ permet de saisir un nombre entier :
Code: HTML
<input type="number" />
Le champ s'affichera en général avec des petites flèches pour changer la valeur.
8. Champ de saisie de nombre
Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :
 min : valeur minimale autorisée.
 max : valeur maximale autorisée.
 step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ
n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).
9. Un curseur
Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider), comme
à la figure suivante :
Code : HTML
<input type="range" />
Un curseur grâce au type range
Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs
disponibles.
10. Couleur
Ce champ permet de saisir une couleur :
Code: HTML
<input type="color" />
11. Date
Différents types de champs de sélection de date existent :
- date : pour la date (05/08/1985 par exemple) ;
- time : pour l'heure (13:37 par exemple) ;
- week : pour la semaine ;
- month : pour le mois ;
- datetime : pour la date et l'heure (avec gestion du décalage horaire) ;
- datetime-local pour la date et l'heure (sans gestion du décalage horaire).
Exemple :
Code : HTML
<input type="date" />
.
12. Recherche
On peut créer un champ de recherche comme ceci :
Code : HTML
<input type="search" />
Le navigateur décide ensuite comment afficher le champ de recherche. Ainsi, il peut ajouter
une petite loupe au champ pour signifier que c'est un champ de recherche et éventuellement
mémoriser les dernières recherches effectuées par le visiteur.

30
 13. Les éléments d'options
HTML vous offre une ribambelle d'éléments d'options à utiliser dans votre formulaire. Ce
sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités.
Nous allons passer en revue :
 les cases à cocher ;
 les zones d'options ;
 les listes déroulantes.
a. Les cases à cocher
Pour créer une case à cocher, on utilise toujours la balise <input />, en spécifiant cette fois le
type checkbox :
Code : HTML

<input type="checkbox" name="choix" />

Rajoutez un <label>
Code : HTML
<form method="post" action="traitement.php">
<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /><label
for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /><label
for="steak">Steak haché</label><br />
<input type="checkbox" name="epinards" id="epinards" />
<label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /><label
for="huitres">Huitres</label>
</p>
</form>
NB : Des cases à cocher, N'oubliez pas de donner un nom différent à chaque case à
cocher, cela permettra d'identifier plus tard lesquelles ont été cochées par le visiteur.
Une case peut également être cochée par défaut avec l'attribut checked :
Code: HTML
<input type="checkbox" name="choix" checked />

b) Les boutons « radio »

Les zones de texte permettent à l’internaute de saisir du texte, ce qui offre une
infinité de réponses possibles. Cela correspond bien par exemple à la saisie du nom ou
de l’adresse pour les données dont les réponses sont prévisibles et en nombre limité,
nous pouvons inclure des éléments de formulaires spéciaux nommés : boutons radio
et cases à cocher
Un bouton radio se présente sous la forme d’un cercle dans lequel parait un disque noir
que l’utilisateur clique dessus pour effectuer un choix. Les boutons radio sont typiquement
utilisés pour présenter plusieurs choix dont la réponse est unique par exemple un choix entre
un bouton libellé masculin et un bouton libellé féminin. Pour créer un bouton radio,
nous utilisons encore une fois l’élément <input/> dont l’attribut type prend la valeur radio.
L’ensemble des boutons radio avec lesquels on peut opérer un choix donné constitue un
groupe type .il faut que tous les attributs name de ses éléments aient la même valeur.
L’attribut valu de chaque bouton radio contient la valeur que l’on veut associer à chacun
d’eux. Seule la valeur choisie dans le même groupe est récupérée par le serveur

31
 L’attribut checked qui prend la valeur booléenne unique checked permet de cocher par
défaut un des boutons d’un groupe
Les choses seront plus claires sur l'exemple ci-dessous :
Code : HTML
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous
situez :<br />
<input type="radio" name="age" value="moins15" id="moins15"
/><labelfor="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25"
id="medium15-25" /><label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40"
id="medium25-40" /><label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" />
<label for="plus40">Encore plus vieux que ça ?!</label>
</p>
</form>

Des boutons radio. Pourquoi avoir mis le même nom pour chaque option ? Tout
simplement pour que le navigateur sache de quel « groupe » le bouton fait partie.
Essayez d'enlever les attributs name, vous verrez qu'il devient possible de sélectionner tous
les éléments d'options. Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les « lie » entre
eux en leur donnant un nom identique.
Remarque : Vous noterez que cette fois on a choisi un id différent de name. En effet, les
valeurs de name étant identiques, on n'aurait pas pu différencier les id (et vous savez bien
qu'un id doit être unique !). Voilà donc pourquoi on a choisi de donner à l'id la même valeur
que value.
Si vous avez deux zones d'options différentes, il faut donner un name unique à chaque
groupe, comme ceci :
Code : HTML
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous
situez :<br />
<input type="radio" name="age" value="moins15" id="moins15"
/><labelfor="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25"
id="medium15-25" /><label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40"
id="medium25-40" /><label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" />
<label for="plus40">Encore plus vieux que ça ?!</label>
</p>
<p>
Sur quel continent habitez-vous ?<br />
<input type="radio" name="continent" value="europe"
id="europe" /><label for="europe">Europe</label><br />
<input type="radio" name="continent" value="afrique"
id="afrique" /><label for="afrique">Afrique</label><br />
<input type="radio" name="continent" value="asie" id="asie"

32
/><label for="asie">Asie</label><br />
<input type="radio" name="continent" value="amerique"
id="amerique" /><label for="amerique">Amérique</label><br />
<input type="radio" name="continent" value="australie"
id="australie" /><label for="australie">Australie</label>
</p>
</form>
Rmq : L'attribut checked est, là aussi, disponible pour sélectionner une valeur par défaut.
c) Les listes déroulantes
Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs
possibilités. Le fonctionnement est un peu différent. On va utiliser la balise
<select></select>qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name
à la balise pour donner un nom à la liste. Puis, à l'intérieur du <select></select>, nous allons
placer plusieurs balises <option></option>(une par choix possible). On ajoute à chacune
d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi. Voici un exemple
d'utilisation :
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</select>
</p>
</form>
Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :
Code: HTML
<option value="canada" selected>Canada</option>
Vous pouvez aussi grouper vos options avec la balise <optgroup></optgroup>. Dans notre
exemple, nous allons regrouper les pays par continent.
Code : HTML
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup>
33
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</p>
</form>

Remarque : Les groupes ne peuvent pas être sélectionnés. Ainsi, dans notre exemple, on ne
peut pas choisir « Europe » : seuls les noms de pays sont disponibles pour la sélection.
d) Finalisation et envoie du formulaire
Nous y sommes presque. Il ne nous reste plus qu'à agrémenter notre formulaire de quelques
dernières fonctionnalités (comme la validation), puis nous pourrons ajouter le bouton d'envoi
du formulaire.
 Regrouper les champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les
regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset>peut contenir une légende
avec la balise <legend>.
Par exemple :
Code : HTML
<form method="post" action="traitement.php">
<fieldset>
<legend>Vos coordonnées</legend><!-- Titre du fieldset -->
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" />
<label for="prenom">Quel est votre prénom ?</label>
<input type="text" name="prenom" id="prenom" />
<label for="email">Quel est votre e-mail ?</label>
<input type="email" name="email" id="email" />
</fieldset>
<fieldset>
<legend>Votre souhait</legend><!-- Titre du fieldset -->
<p>
Faites un souhait que vous voudriez voir exaucé :
<input type="radio" name="souhait" value="riche"
id="riche" /><label for="riche">Etre riche</label>
<input type="radio" name="souhait" value="celebre"
id="celebre" /><label for="celebre">Etre célèbre</label>
<input type="radio" name="souhait" value="intelligent"
id="intelligent" /><label for="intelligent">Etre
<strong>encore</strong>plus intelligent</label>
<input type="radio" name="souhait" value="autre"
id="autre" /><label for="autre">Autre...</label>
</p>
<p>
<label for="precisions">Si "Autre", veuillez préciser
:</label>
<textarea name="precisions" id="precisions" cols="40"
rows="4"></textarea>
</p>
</fieldset>

34
  Sélection automatique d’un champ
Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire
avec l'attribut autofocus. Dès que le visiteur chargera la page, le curseur se placera dans ce
champ. Par exemple, pour que le curseur soit par défaut dans le champ prenom :
Code: HTML
<input type="text" name="prenom" id="prenom" autofocus />
 Rendre un champ obligatoire
Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required.
Code: HTML
<input type="text" name="prenom" id="prenom" required />
Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi,
qu'il doit impérativement être rempli. Les anciens navigateurs, qui ne reconnaissent pas cet
attribut, enverront le contenu du formulaire sans vérification.
Pour ces navigateurs, il sera nécessaire de compléter les tests avec, par exemple, des scripts
JavaScript.
Remarque : On dispose de pseudo-formats en CSS pour changer le style des éléments requis
(:required) et invalides (:invalid). N'oubliez pas non plus que vous disposez du pseudo-
format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
 Le bouton soumettre ou d'envoi
Le bouton d’envoi, généralement nommé ou OK est indispensable car il est le seul qui après
un clic peut déclencher l’envoi des données vers le serveur. Pour créer un bouton d’envoi on
utilise l’élément <input/>, c’est son attribut type qui permet de lui assigner une fonction
particulière et il prend la valeur submit
. Elle existe en quatre versions :
- type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous
utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans
l'attribut action du formulaire.
- type="reset" : remise à zéro du formulaire.
- type="image" : équivalent du bouton submit, présenté cette fois sous forme
d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
- type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En
général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.
Nous ne l'utiliserons pas ici.
On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value.
Pour créer un bouton d'envoi on écrira donc par exemple :
Code : HTML
<input type="submit" value="Envoyer" />

14.Le transfert de fichiers

Un site interactifpeutpermettreàsesvisiteursd'effectuerletransfertdedivers fichiers
du poste client vers Je serveur .On trouve cette possibilité par exemple dans un site de
petites annonces ou d'enchères en ligne .Le client peut ainsi transmettre la photographie
de l'objet qu'il met en vente. Cette fonctionnalité est incluse dans un formulaire à J'aide de
l'élément<input/>doté d'un attribut t y p e qui prend cette fois la valeur file
Code HTML :
<input type="file" name="fichier" accept="image/*" />

Exemple
<!DOCTYPE html>
35
<html>
<head>
<meta http-equiv="Content-type" content="text/html ;charset=UTF-8" !/>
<title>Transfert de fichier</title>
</head>
<body>
<form action="exemple?-4.php" method="post" enctype="multipart/form-data" >
<fieldset>
<legend><b>Envoyez nous votre photo</b></legend>
<label)Choisissez le fichier JPEG ou PNG : </label><input type="file"
..,. name="ftchier" accept="image/jpeg,image/png" />
<input type="hidden" name="MAX_FILE_SIZE" value="50000" /><br/><br/>
<input type="reset" value="Effacer" />&nbsp;&nbsp;&nbsp;
<input type="submit" value="Envoyer"/>
</fieldset></form>
</body>
</html>

15.les champs cachés

Un formulaire peut aussi contenir des champs cachés comme leur nom l’indique. Ils ne
correspondent à aucun rendu visuel et ne font dont l’objet d’aucune saisie de la part du
visiteur.
Ils permettent de transmettre au serveur des informations particulières et ainsi de
recueillir des données sur le poste client : tels que le système d’exploitation le type de
navigateur qu’il utilise et son numéro de version ceci dans le but de réaliser les statistiques.
Ces champs servent également à communiquer tout type d’informations utiles au serveur
comme la taille maximale d’un fichier téléchargeable du poste client vers le serveur
Pour créer un champ caché nous utilisons encore l’élément <input/>. L’attribut type reçoit la
valeur hidden et les attributs side et name servent à identifier le champ et à recueillir
l’information dans une variable .l’attribut value contient la valeur qui sera transmise après
l’envoi du formulaire.
Pour créer un champ caché on écrit le code suivant
Input type ="hidden" id= "navigateur" name ="navigateur " value="secret"
/>

Exemple
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html ;charset=UTF-8" !/>
<title>Les champs cachés</title>
<link rel="shortcut icon" type="images/x-icon" href=" .. /images/favicon.ico" />
</head>
<body>
<form action="mailto:html@funhtml .corn" id="forml" method="post"
.., onsubmit="getElementByld('forml').navigateur.value=navigator.appName;O
.., getElementByld('forml').systeme.value=navigator.platform" f/>
<fieldset>
<legend><b>Veuillez compléter le questionnaire</b></legend>

36
<label>Nom : </label><input type="text" name="nom" tabindex="l"
.., accesskey="A"/>
<input type="hidden" id="navigateur" name="navigateur" !>
<input type="hidden" id="systeme" name="systeme" />
<input type="submit" value="Envoi " tabindex="2"/>
<input type="reset" value=" Effacer tout" tabindex="3"/><br/>
</fieldset>
</form>
</body>
</html>

VII. exemple d’un formulaire complet

1) formulaire simple
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html :charset=UTF-8"/>
<title>Formulaire traité par PHP</title>
</head>
<body>
<form action="exemple?-14.php" method="post" enctype="multipart/form-data">
<!-- Premier groupe de composants-->
<fieldset>
<legend><b>Vos coordonnées</b></legend>
<label>Nom: </label>
<input type="text" name="nom" size="40" maxlength="256" value="votre nom"/><br/>
<label>Prenom :</label>
<input type="text" name="prenom" size="40" maxlength="256" value="votre
prenom"/><br/>
<label>Date de naissance :</label>
<input type="date" name="date" max="l993-0l-Ol"/><br/>
<label>Mail : </label>
<input type="email" name="mail" size="40" maxlength="256" value="votre mail" />
<br />
<label>Votre site : </label>
<input type="url" name="site" value="http://www." /><br/>
<label>Code : </label>
<input type="password" name="code" size="40" maxlength="6" /><br/>
<input type="radio" name="sexe" value="homme" /><label>Homme</label><br />
<input type="radio" name="sexe" value="femme" /><label>Femme</label><br />
<select name="pays" size="l" tabindex="2" onfocus="this.style.color='red'"
onchange="alert( 'Merci de votre choix')" onblur="this.style.color='black'">
<option value="null" > Votre pays</option>
<optgroup label="Europe">
<option value="France" > France</option>
<option value="Belgique" > Belgique</option>
<option value="Italie" > ltalie</option>
<option value="Allemagne" > Allemagne</option> (/optgroup>
<optgroup label="Amérique">

<option value="USA" label="fr" > USA </option>

<option value="Canada" > Canada</option>
37
<option value="Argentine" > Argentine</option>
<optgroup>
<optgroup label="Autres">
<option value="Europe" > Europe </option>
<option value="Asie" > Asie </option>
<option value="Amériques" > Amériques </option>
<option value="Océanie" >Océanie</option>
</optgroup>
</select>
<br/>
<fieldset>
<!-- Deuxième groupe de composants-->
<fiel dset>
<legend><b>Vos goûts</b></legend>
<input type="checkbox" name="pomme" value="pomme" /> Pommes<br />
<input type="checkbox" name="poire" value="poire" /> Poires<br />
<input type="checkbox" name="haricot" value="haricot" /> haricot
<br />
<textarea name="gouts" cols="SO" rows="5" onclick="this.value=' '">
Décrivez vos goûts en détail
</textarea>
<br />
</fieldset>
<!-- Troisième groupe de composants-->
<fieldset>
<legend><b>Envoyez-nous votre photo</b></legend>
<input type="file" name="fichier" accept="image/jpeg"/>
<input type="hidden" name="MAX_FILE_SIZE" value="lOOOO"/>
<br/><br/>
<input type="reset" value="Effacer"/>
&nbsp;&nbsp;&nbsp;<input type="submit" value="Envoyer"/>
<br/>
</fieldset>
</form>
</body>
</html>
2) Formulaire à l’aide d’un tableau

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html ;charset=UTF-8"!/>
<title>Formulaire avec tableaux</title>
</head>
<body>
<form action="exemple?-14.php" method="post" enctype="multipart/form-data">
<!-- Premier groupe de composants-->
<fieldset>
<legend><b>Vos coordonnées</b></legend>
<table>
<colgroup></colgroup>

38
<tr>
<td><label>Nom : </label></td>
<td><input type="text" name="nom" size="40" maxlength="256".,.value="votre
nom"/></td>
</tr>
<tr>
<td><label>Prenom : </label></td>
<td><input type="text" name="prenom" size="40" maxlength="256".,. value="votre
prenom"/>
</tr>
<tr>
<td><label>Date de naissance : </label></td>
<td><input type="date" name="date" max="1993-01-01"/></td>
</tr>
<tr>
<td><label>Mail </label></td>
<td><input type="email" name="mail" size="40" maxlength="256".. value="votre
mail"/></td>

</tr>
<tr>
<td><label>Votre site : </label></td>
<td><input type="url" name="site" value="http://www." /></td>
</tr>
<tr>
<td><label>Code : </label></td>
<td><input type="password" name="code" size="40" maxlength="6" /></td>
</tr>
<tr>
<td><label>Homme : </label></td>
<td><input type="radio" name="sexe" value="homme" /></td>
</tr>
<tr>
<td><label>Femme : </label></td>
<td><input type="radio" name="sexe" value="femme" /></td>
</tr>
<tr>
<td>Votre pays :
<select name="pays" size="l" tabindex="2" onfocus="this.style.color='red'"
..,. onchange="alert (‘Merci de votre choix')" onblur="this.style.color=.. 'black'">
<option value="null" > Votre pays</option>
<optgroup label="Europe">
<option value="France" > France</option>
<option value="Belgique" > Belgique</option>
<option value="Italie" >Italie (/option>
<option value="Allemagne" > Allemagne</option>
</optgroup>
<optgroup label="Amerique">
<option value="USA" label="fr" > USA </option>
<option value="Canada" > Canada</option>
<option value="Argentine" > Argentine</option>
<optgroup>
39
<optgroup label="Autres">
<option value="Europe" > Europe </option>
<option value="Asie" > Asie </option>
<option value="Ameriques" > Amériques (/option>
<option value="Océanie" > Océanie</option>
</optgroup>
</select></td>
</tr>
</table>
</fieldset>
<!-- Deuxième groupe de composants-->
<fieldset>
<legend><b>Vos goûts</b></legend>
<table>
<colgroup class="fonce"></colgroup>
<colgroup></colgroup>
<tr>
<td><label>Pommes : </label></td>
<td><input type="checkbox" name="pomme" value="pomme" /></td>
</tr>
<tr>
<td><label>Poires : </label></td>
<td><input type="checkbox" name="poire" value="poire" /></td>
</tr>
<tr>
<td><label>haricot : </label></td>
<td><input type="checkbox" name="haricot" value="haricot" /></td>
</tr>
<tr>
<td><label>Decrivez nous vos gouts en detail : </label></td>
<textarea name="gouts" cols="50" rows="5" onclick="this.value=' '">Exprimez vous ici ...
</textarea>
</table>
<fieldset>
<!-- Troisième groupe de composants-->
<fteldset>
<legend><b>Envoyez nous votre photo</b></legend>
<table>
<colgroup></colgroup>
<tr>
<td><label>Choisir le fichier : </label></td>
<td><input type="file" name="fichier" accept="image/jpeg" /><input.. type="hidden"
name="MAX_FILE_SIZE" value="l0000" l><ltd>
</tr>
<tr>
<td><input type="submit" value=" Envoyer» /></td>
<td><input type="reset" value="Effacer toutes les données" /></td>
</tr>
</table>
</fteldset>
</form>
</body>
40
</html>

41
Partie 2 : CSS 3

42
 Chap1 : introduction au langage CSS

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
 Maitriser les différentes méthodes du CSS
 De pouvoir mettre les commentaires dans du CSS
 Présenter les principaux attributs du CSS puis quelques balises universelles
INTRODUCTION
La création des styles CSS (CascadingStyle Sheet ou feuilles de styles en cascade) est
le complément indispensable du Langage HTML5.
Ce procédé correspond parfaitement à la séparation du contenu et de la présentation sur
laquelle nous avons plusieurs fois insisté en décrivant les différents éléments HTML5.d’une
part cette séparation permet d’alléger les pages en centralisant les définitions des styles en un
point unique une seule définition pouvant s’appliquer à un grand nombre d’éléments. Les
styles CSS apporte une plus grande richesse créative que ne le permettrait le langage
HTML4sans CSS il aurait fallu alourdir de quanti té d’éléments le langage HTML5, alors que
la tendance actuelle est à l’opération inverse. Dans ce chapitre indispensable à la
compréhension de leur mécanisme .après les règles générales d’écriture d’un style qui s’avère
simple, nous envisageons toutes les nombreuses possibilités d’écritures des sélecteurs qui
permettent d’appliquer le style voulu à l’élément choisi, quel que soit son contexte. Nous
terminerons cette introduction par l’étude des différentes méthodes d’insertion des styles
dans une page, puis par les règles de cascade et d’héritage, dont la connaissance permet de
gérer les sites.

I. Les différentes méthodes du CSS

On peut écrire le code en langage CSS à trois endroits différents :
 dans un fichier .css (méthode la plus recommandée) ;
 dans l'en-tête <head>du fichier HTML ;
 directement dans les balises du fichier HTML via un attribut style (méthode la moins
recommandée).
1. Dans un fichier .css (recommandé)
On écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension
.css(contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus
pratique et la plus souple. Cela nous évitede tout mélangé dans un même fichier.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<link rel="stylesheet" href="style.css"/>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>

43
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" />: c'est elle qui
indique quece fichier HTML est associé à un fichier appelé style.css et chargé de la mise en
forme.Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple
Notepad++) et copiez-y ce bout de code CSS:
Code : CSS
p{
color: blue;
}
a) Procédure
Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme style.css. Placez
ce fichier .CSS dans le même dossier que votre fichier .html.
Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté
le .html, de l'autre le .css, Ouvrez maintenant votre fichier page.html dans votre navigateur
pour le tester, comme vous le faites d'habitude.
Remarque : Il est inutile d'ouvrir directement le fichier style.css dans le navigateur. Il
faut ouvrir le fichier page.html (il fera automatiquement appel au fichier style.css).

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

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à
insérer le code CSS directement dans une balise <style>à l'intérieur de l'en-tête <head>.
Voici comment on peut obtenir exactement le même résultat avec un seul fichier .html qui
contient le code CSS (lignes 5 à 10) :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

44
 3) Directement dans les balises (méthode non recommandée)
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à
n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site
!</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

NB :
Il est fortement recommandé de travailler avec la première
méthode car c’est celle utilisée par la majorité des webmasters.

II. Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous de
plus près à ce code.
Code : CSS
p{
color: blue;
}
Dans un code CSS comme celui-ci, on trouve trois éléments différents :
Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence.
Par exemple, si on veut modifier l'apparence de tous les paragraphes <p>, on doit écrire p.
Des propriétés CSS : les « effets de style » de la page sont rangés dans des
propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte,
font-size qui permet d'indiquer la taille du texte, etc.
Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple,
pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer
quelle taille on veut, etc.
Schématiquement, une feuille de style CSS ressemble donc à cela :
Code : CSS
balise1
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
}
balise2
{
propriete1: valeur1;

45
propriete2: valeur2;
propriete3: valeur3;
propriete4: valeur4;
}
balise3
{
propriete1: valeur1;
}
Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si on écrit h1,
c'est le titre qui sera écrit en bleu.
Modifiez votre fichier style.css comme ceci :
Code : CSS
h1
{
color: blue;
}
Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, c'est la page HTML qu'on
ouvre dans le navigateur, pas le fichier CSS.

III. Appliquer un style à plusieurs balises

Prenons le code CSS suivant :
Code : CSS
h1
{
color: blue;
}
em
{
color: blue;
}
Il signifie que nos titres <h1>et nos textes importants <em>doivent s'afficher en bleu.
Par contre, c'est un peu répétitif, Heureusement, il existe un moyen en CSS d'aller plus vite si
les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en
séparant les noms des balises par une virgule, comme ceci :
Code : CSS
h1, em
{
color: blue;
}
Cela signifie : « Je veux que le texte de mes <h1>et <em>soit écrit en bleu ».
Vous pouvez indiquer autant de balises à la suite que vous le désirez
IV. Des commentaires dans du CSS
Comme en HTML, il est possible de mettre des commentaires. Les
commentaires ne seront pas affichés, ils servent simplement à indiquer
des informations pour vous, par exemple pour vous y retrouver dans un
long fichier CSS.
Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de
votre commentaire, puis */ pour terminer votre commentaire.

46
 Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par
exemple :
Code : CSS
/*
style.css
---------
Par Atangana Marc
*/
p{
color: blue; /* Les paragraphes seront en vert */
}

V. Appliquer un style : class et id.

On peut solliciter écrire Certains paragraphes d'une manière différente, dans ce cas on
pourrait placer le code CSS dans un attribut style sur la balise que l'on vise. Pour résoudre le
problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :
 l'attribut class ;
 l'attribut id.
Les attributs class et id sont quasiment identiques. Il y a seulement une petite différence.
L’attribut class permet de mettre sur n'importe quelle balise, aussi bien titre que paragraphe,
image, etc.

Code : HTML
<h1 class=""></h1>
<p class=""></p>
<img class="" />
VI. Les balises universelles
En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification
particulière. Il y a une différence minime (mais significative !) entre ces deux balises :
<span></span>: c'est une balise de type inline, c'est-à-dire une balise que l'on
place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les
balises <strong>et <em>sont de la même famille. Cette balise s'utilise donc au milieu d'un
paragraphe et c'est celle dont nous allons nous servir pour colorer « bienvenue ».
<div></div>: c'est une balise de type block, qui entoure un bloc de texte. Les
balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun :
elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à
la ligne. <div>est une balise fréquemment utilisée dans la construction d'un design.
Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de «
bienvenue », on lui ajoute une classe (du nom qu'on veut).
Code : HTML
<p>Bonjour et <span class="salutations">bienvenue</span>sur mon
site !</p>
Code : CSS
.salutations
{
color: vert;
}

VII. Appliquer un style : les sélecteurs avancés

47
 En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on
dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Ces
sélecteurs sont de loin les plus couramment utilisés. Il faut les connaître par cœur.
Code : CSS
p{
}
… signifie « Je veux toucher tous les paragraphes ».
Code : CSS
h1, em
{
}
… qui signifie « Tous les titres et tous les textes importants ». Nous avons sélectionné deux balises
d'un coup.
Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom
grâce aux attributs class et id :

Code : CSS
.class
{
}
#id
{
}

VII. Les sélecteurs avancés

* : sélecteur universel
Code : CSS
*{
}
Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.
A B : une balise contenue dans une autre
Code : CSS
h3 em
{
}
Sélectionne toutes les balises <em>situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de
virgule entre les deux noms de balises.
Exemple de code HTML correspondant :
Code : HTML
<h3>Titre avec <em>texte important</em></h3>

A + B : une balise qui en suit une autre

Code : CSS
h3 + p
{
}
Sélectionne la première balise <p>située après un titre <h3>.
Exemple :
Code : HTML
<h3>Titre</h3>
<p>Paragraphe</p>

A[attribut] : une balise qui possède un attribut

Code : CSS
a[title]

48
{
}
Sélectionne tous les liens <a>qui possèdent un attribut title.
Exemple :
Code : HTML
<ahref="http://site.com" title="Infobulle">

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

Code : CSS
a[title="Cliquez ici"]
{
}

Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
Exemple :
Code : HTML
<ahref="http://site.com" title="Cliquez ici">

A[attribut*="Valeur"] : une balise, un attribut et une valeur

Code : CSS
a[title*="ici"]
{
}

49
 Chap. 2 : La couleur et le fond

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :

 Comment changer la couleur du texte ;

 Comment mettre une couleur ou une image d'arrière-plan ;
 Comment ajouter des ombres ;
 Comment jouer avec les niveaux de transparence.
INTRODUCTION
Dans les anciennes versions de HTML, les définitions des couleurs, de polices faisaient
appel à une multiplication d’éléments <font> et à leurs attributs color appliqués localement. Il
en était de même pour les couleurs de fond des éléments qui ne pouvaient êtres définis que
pour un nombre restreint d’éléments. Ces éléments et attributs ont heureusement disparu des
recommandations HTML5 au profit de définition centralisées dans une feuille des styles CSS
.Chaque éléments peut également se voir attribuer une couleur ou une image de fond.
Nous allons envisager ici la manière de définir la couleur d’avant –plan du contenu d’un
élément, c’est-à- dire essentiellement celle du texte qui est inclus. Nous verrons ensuite
comment attribuer les couleurs et images de fond, ainsi que le positionnement de ces derniers.
L’ensemble de ces définitions permet la création d’effets attractifs.
I. Couleur du texte
La propriété qui permet de modifier la couleur du texte : il s'agit de
color. Nous allons nous intéresser aux différentes façons d'indiquer la
couleur, car il y en a plusieurs.

1. Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur
consiste à taper son nom (in english, of course).Le seul défaut de cette
méthode est qu'il n'existe que seize couleurs dites « standard ».
Pour passer tous les titres en marron, on peut donc écrire :
Code : CSS
h1
{
color: maroon;
}
2. La notation hexadécimale
Code : CSS
p{
color: #FFFFFF;
}

50
Remarque : Notez qu'il existe une notation raccourcie : on peut écrire une
couleur avec seulement trois caractères. Par exemple :#FA3 équivaut à
écrire #FFAA33.

3. La méthode RGB
Le sigle RGB signifie en anglais, Rouge-Vert-Bleu s'écrit Red-Green-
Blue, ce qui s'abrège en « RGB ». Comme avec la notation hexadécimale,
pour choisir une couleur, on doit définir une quantité de rouge, de vert et
de bleu.
Code: CSS
P
{
color: rgb (240,96,204);
}
Il est également possible de travailler avec un logiciel de dessin tout
simple comme Paint, vous pouvez trouver la couleur que vous désirez.
Procédure
a) Lancez le logiciel Paint depuis le menu Démarrer.
b) Rendez-vous dans la section Modifier les couleurs, comme indiqué à la
figure suivante.
c) Une fenêtre s'ouvre. Dans la zone qui apparaît à droite, faites bouger
les curseurs pour sélectionner la couleur qui vous intéresse.

II. Le CSS et l'héritage

En CSS, si vous appliquez un style à une balise, toutes les balises qui se
trouvent à l'intérieur prendront le même style.
La balise <body>, contient déjà entre autres les balises de paragraphe
<p>et de titre <h1>.
1. Exemple d'héritage avec la balise <mark>
Code : HTML
<h1>Qui a éteint la lumière ?</h1>
<p>Br, il fait tout noir sur ce site, c'est un peu
<mark>inquiétant</mark>comme ambiance non vous trouvez
pas ?</p>
Par défaut, le texte s'affiche sur un fond jaune. Vous pouvez changer ce
comportement en CSS :
Code : CSS
body
{
background-color: black;
color: white;
}
mark
{
/* La couleur de fond prend le pas sur celle de toute la page
*/
background-color: red;
color: black;
}

51
III. Images de fond
Dans les exemples qui suivent on va modifier l'image de fond de la
page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que
l'image de fond ne s'applique pas forcément à la page entière. On peut
aussi mettre une image de fond derrière les titres, paragraphes, etc.
1. Appliquer une image de fond
La propriété permettant d'indiquer une image de fond est
background-image. Comme valeur, on doit renseigner
url("nom_de_l_image.png"). Par exemple :
Code : CSS
body
{
background-image: url("photo.png");
}

2. Options disponibles pour l'image de fond

On peut compléter la propriété background-image que nous venons de
voir par plusieurs autres propriétés qui permettent de changer le
comportement de l'image de fond.
background-attachment : fixer le fond
La propriété CSS background-attachment permet de « fixer » le fond.
L'effet obtenu est intéressant car on voit alors le texte « glisser » par-
dessus le fond. Deux valeurs sont disponibles:
 fixed : l'image de fond reste fixe ;
 scroll: l'image de fond défile avec le texte (par défaut).
Code : CSS
body
{
background-image: url("neige.png");
background-attachment: fixed; /* Le fond restera fixe */
}
background-repeat : répétition du fond
Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez
changer cela avec la propriété background-repeat :
 no-repeat : le fond ne sera pas répété. L'image sera donc unique
sur la page.
 repeat-x : le fond sera répété uniquement sur la première ligne,
horizontalement.
 repeat-y: le fond sera répété uniquement sur la première colonne,
verticalement.
 repeat: le fond sera répété en mosaïque (par défaut).
Exemple d'utilisation :
Code : CSS
body
{
background-image: url("soleil.png");
background-repeat: no-repeat;
}
background-position: position du fond

52
 On peut indiquer où doit se trouver l'image de fond avec
background-position. Cette propriété n'est intéressante que si elle est
combinée avec background-repeat: no-repeat; (un fond qui ne se
répète pas).
Vous devez donner à background-position deux valeurs en pixels pour
indiquer la position du fond par rapport au coin supérieur gauche de la
page (ou du paragraphe, si vous appliquez le fond à un paragraphe).
Code : CSS
background-position: 30px 50px;
… votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il
est aussi possible d'utiliser ces valeurs en anglais :
 top : en haut ;
 bottom : en bas ;
 left : à gauche ;
 center : centré ;
right: à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image
en haut à droite, vous taperez :
Code : CSS
background-position: top right;
Ainsi, si on veut afficher un soleil en image de fond (figure suivante), en
un unique exemplaire (no-repeat), toujours visible(fixed) et positionné en
haut à droite (top right), je vais écrire ceci :
Code : CSS
body
{
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à
droite */
}

3. Combiner les propriétés

Si vous utilisez beaucoup de propriétés en rapport avec le fond (comme
c'est le cas sur ce dernier exemple), vous pouvez utiliser une sorte de «
super-propriété » appelée background dont la valeur peut combiner
plusieurs des propriétés vues précédemment : background-image,
background-repeat, background-attachment et
backgroundposition. On peut donc tout simplement écrire :
Code : CSS
body
{
background: url("soleil.png") fixed no-repeat top right;
}

L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les
valeurs dans n'importe quel ordre. Vous n'êtes pas obligés de mettre
toutes les valeurs. Ainsi, si vous ne voulez pas écrire fixed, vous pouvez
l'enlever sans problème.

53
 4. Plusieurs images de fond
Depuis CSS3, il est possible de donner plusieurs images de fond à un
élément. Pour cela, il suffit de séparer les déclarations par une virgule,
comme ceci :
Code : CSS
body
{
background: url("soleil.png") fixed no-repeat top right,
url("neige.png") fixed;
}
Une dernière chose avant d'en terminer avec les images de fond :
dans tous ces exemples, nous avons appliqué un fond à la page entière
(body). Mais cela ne doit pas vous faire oublier qu'on peut appliquer un
fond à n'importe quel élément (un titre, un paragraphe, certains mots d'un
paragraphe, etc.).
5. La transparence
Le CSS nous permet de jouer très facilement avec les niveaux de
transparence des éléments ! Pour cela, nous allons utiliser des
fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.

La propriété opacity
La propriété opacity, très simple, permet d'indiquer le niveau d'opacité
(c'est l'inverse de la transparence).
Avec une valeur de 1, l'élément sera totalement opaque : c'est le
comportement par défaut.
Avec une valeur de 0, l'élément sera totalement transparent.
Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur
de 0.6, votre élément sera opaque à 60%… et on verra
donc à travers !
Voici comment on peut l'utiliser :
Code : CSS
P
{
opacity: 0.6;
}
Code : CSS
body
{
background: url('neige.png');
}
p{
background-color: black;
color: white;
opacity: 0.3;
}
Remarque :Si vous appliquez la propriété opacity à un élément de la
page, tout le contenu de cet élément sera rendu transparent(même les
images, les autres blocs à l'intérieur, etc.). Si vous voulez juste rendre la
couleur de fond transparente, utilisez plutôt la notation RGBa que nous
allons découvrir.
54
 La notation RGBa
CSS3 nous propose une autre façon de jouer avec la transparence :
la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue
précédemment, mais avec un quatrième paramètre : le niveau de
transparence (appelé « canal alpha »). De la même façon que
précédemment, avec une valeur de 1, le fond est complètement opaque.
Avec une valeur inférieure à 1, il est transparent.
Code : CSS
P
{
background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié
transparent */
}
Vous pouvez obtenir exactement le même effet qu'avec opacity
juste en jouant avec la notationRGBa, Cette notation est connue de tous
les navigateurs récents, y compris Internet Explorer (à partirde IE9).
Pour les navigateurs plus anciens, il est recommandé d'indiquer la
notation RGB classique en plus de RGBa.
Pour ces navigateurs, le fond ne sera alors pas transparent mais, au
moins, il y aura bien une couleur d'arrière-plan.
Code : CSS
p{
background-color: rgb(255,0,0); /* Pour les navigateurs anciens
*/
background-color: rgba(255,0,0,0.5); /* Pour les navigateurs
plus récents */

55
 Chap. 3 : Les bordures et les ombres

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
 Les caractéristiques des bordures
 Les types de bordures
 Les différentes positions d’une bordure

INTRODUCTION
Le CSS définit un espace dans lequel pour chaque élément de la hiérarchie du document
HTML5. C’est ce que l’on nomme communément le modèle de boite de CSS .la boite associée à
chaque élément conditionne la surface et éventuellement la position qu’il a dans la page et donc la
position des boites des autres éléments par rapport à lui. Dans les modèles des boites, chaque élément
visuel possède un contenu direct ou indirect que nous pouvons dimensionner mais il peut
également disposer d’un espacement d’une bordure et d’une marge par rapport aux boites des
éléments environnants. Nous allons nous intéresser aux bordures et aux effets d’ombrages que l’on
peut appliquer, aussi bien sur le texte que sur les blocs qui constituent la page.

I. Bordures standard
La création de bordure autour d’un élément permet d’obtenir des effets visuels qui
attirent l’attention dans le but par exemple de mettre davantage en évidence la structure de la
page. En CSS nous pouvons attribuer à une bordure des caractéristiques variées telles qu’un
style une largeur et une couleur.
Le CSS vous offre un large choix de bordures pour décorer votre page.
De nombreuses propriétés CSS vous permettent de modifier l'apparence
de vos bordures : border-width, border-color, border-style….
Pour border on peut utiliser jusqu'à trois valeurs pour modifier
l'apparence de la bordure :
La largeur : indiquez la largeur de votre bordure. Mettez une valeur en
pixels (comme 2px).
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a
appris, soit un nom de couleur (black, red,…), soit
une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212,
37)).
Le type de bordure : Votre bordure peut être un simple trait, ou
des pointillés, ou encore des tirets,etc. Voici les différentes valeurs
disponibles :
 none : pas de bordure (par défaut) ;
 solid : un trait simple ;
 dotted : pointillés ;
 dashed : tirets ;
 double : bordure double ;

56
 groove : en relief ;

ridge : autre effet relief ;

inset : effet 3D global enfoncé ;

outset : effet 3D global surélevé.

Par exemple, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels
autour de mes titres, on écrit le code suivant :
Code: CSS
h1
{
border: 3px blue dashed;
}
II. Positionnement de la bordure
Pour mettre des bordures différentes en fonction du côté (haut, bas,
gauche ou droite), vous devrez utiliser ces quatre propriétés :
 border-top : bordure du haut ;
 border-bottom : bordure du bas ;
 border-left : bordure de gauche ;
 border-right : bordure de droite.
Il existe aussi des équivalents pour paramétrer chaque détail de la
bordure si vous le désirez : border-top-widthpour modifier l'épaisseur de
la bordure du haut, border-top-color pour la couleur du haut, etc.
Pour ajouter une bordure uniquement à gauche et à droite des
paragraphes, on écrira donc :
Code : CSS
P
{
border-left: 2px solid black;
border-right: 2px solid black;
}
On peut modifier les bordures de n'importe quel type d'élément sur
la page. Nous l'avons fait ici sur les paragraphes mais on peut aussi
modifier la bordure des images, des textes importants comme <strong>,
etc., c'est un peu le Saint Graal attendu par les webmasters depuis des
millénaires (ou presque). Depuis que CSS3on peut créer les bordures
arrondies. La propriété border-radius va nous permettre d'arrondir
facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille
(« l'importance ») de l'arrondi en pixels :
Code : CSS
P
{
border-radius: 10px;
}
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas,
indiquez quatre valeurs :
Code : CSS
P
{
border-radius: 10px 5px 10px 5px;
}
Les valeurs correspondent aux angles suivants dans cet ordre :

57
1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche.
Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes
elliptiques figure suivante). Dans ce cas, il faut indiquer deux valeurs
séparées par une barre oblique (slash, caractère /).

Code : CSS
p{border-radius: 20px /
10px;
}

III. Les ombres

Les ombres font partie des nouveautés récentes proposées par CSS3.
Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres
dans une page !
Nous allons ici découvrir deux types d'ombres :
 Les ombres des boîtes ;
 Les ombres du texte.

1. Les ombres des boîtes: box-shadow

La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs
dans l'ordre suivant:
a) le décalage horizontal de l'ombre ;
b) le décalage vertical de l'ombre ;
c) l'adoucissement du dégradé ;
d) la couleur de l'ombre.
Par exemple, pour une ombre noire de 8 pixels, sans adoucissement, on
écrira :
Code : CSS
P
{
box-shadow: 8px 8px 0px black;
}
Ajoutons un adoucissement grâce au troisième paramètre (figure
suivante). L'adoucissement peut être faible (inférieur au décalage), normal
(égal au décalage) ou élevé (supérieur au décalage). Essayons un
décalage normal :
Code : CSS
P
{
box-shadow: 6px 6px 6px black;
}
On peut aussi rajouter une cinquième valeur facultative : inset. Dans ce
cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé
:

Code : CSS
P

58
{
box-shadow: 6px 6px 6px black inset;
}
La propriété box-shadow fonctionne sur tous les navigateurs
récents, IE9 inclus. Pour certains navigateurs, en particulier les
navigateurs mobiles, il faut encore rajouter un préfixe. Ainsi, il faudra
écrire une version -webkitbox-shadow pour que cela fonctionne sur les
navigateurs Android et iOS.

2. L’ombre du texte: text-shadow

Avec text-shadow, vous pouvez ajouter une ombre directement sur les
lettres de votre texte ! Les valeurs fonctionnentexactement de la même
façon que box-shadow : décalage, adoucissement et couleur.
Code: CSS
p
{
text-shadow: 2px 2px 4px black;
}

59
 Chap. 4 : Style du Texte

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
 Présenter les propriétés permettant d’indiquer la taille de la police, la police d’écriture…
 Les propriétés de décorations, d’alignement, la police personnalisée…
 Mettre le texte en gras, en italique…

INTRODUCTION
Le « formatage du texte représente la modification de l’apparence du texte. Il existe de
nombreuses propriétés CSS pour faire la mise en forme. Cette modification s’applique sur la
taille du texte, la police des caractères, alignement, la mise en gras, en italique du texte.
I. La taille
Pour modifier la taille du texte, on utilise la propriété CSS font-size. Il existe deux
méthodes
Une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très
précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque
d'indiquer une taille trop petite pour certains lecteurs.
Une taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être
plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.
1) Une taille absolue
Pour indiquer une taille absolue, on utilise généralement les pixels.
Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
Code : CSS
font-size: 16px
Code : CSS
p{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 40px; /* Titres de 40 pixels */
}
2) Une taille relative
C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences
de tous les visiteurs.
Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la
taille avec des mots en anglais comme ceux-ci :
 xx-small : minuscule ;
 x-small : très petit ;
 small : petit ;

60
  medium : moyen ;
 large : grand ;
 x-large : très grand ;
 xx-large : euh… gigantesque.

Code : CSS
p{
font-size: small;
}
h1
{
font-size: large;
}
Cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y
a que sept noms). Mais il existe d'autres moyens parmi lesquels à
indiquer la taille en « em ».
Si vous écrivez 1em, le texte a une taille normale.
Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure
à 1, comme 1.3em.
Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme
0.8em.
Remarque : pour les nombres décimaux, il faut mettre un point et
non une virgule. Vous devez donc écrire « 1.4em» et non pas «
1,4em ».
Exemple :
Code : CSS
p{
font-size: 0.8em;
}
h1
{
font-size: 1.3em;
}

II. La police.
1) Modifier la police utilisée
La propriété CSS qui permet d'indiquer la police à utiliser est font-
family.
Vous devez écrire le nom de la police comme ceci :
Code : CSS
balise
{
font-family: police;
}
Seulement, pour éviter les problèmes si l'internaute n'a pas la même
police que vous, on précise en général plusieurs noms de police, séparés
par des virgules :
Code : CSS
balise
{
font-family: police1, police2, police3, police4;

61
}
Le navigateur essaiera d'abord d'utiliser la police1, S'il ne l'a pas, il
essaiera la police2, S'il ne l'a pas, il passera à lapolice3, et ainsi de suite.
En général, on indique en tout dernier serif, ce qui correspond à
une police par défaut (qui ne s'applique que si aucune autre police n'a été
trouvée).Il existe aussi une autre police par défaut appelée sans-serif.
La différence entre les deux est la présence de petites pattes de liaison en
bas des lettres, que la police sans-serif n'a pas.

Voici une liste de polices qui fonctionnent bien sur la plupart des
navigateurs :
 Arial ;
 Arial Black ;
 Comic Sans MS ;
 Courier New ;
 Georgia ;
 Impact ;
 Times New Roman ;
 Trebuchet MS ;
 Verdana.
Code : CSS
p{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
… cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black,
ou sinon Arial, ou sinon Verdana, ou si rien n'amarché, mets une police
standard (sans-serif) ».
En général, il est bien d'indiquer un choix de trois ou quatre polices
(+ serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura
été trouvée sur l'ordinateur du visiteur. Si le nom de la police comporte
des espaces, il est recommandé de l'entourer de côtes, comme l’exemple
précédent pour " Arial Black "
2) Utiliser une police personnalisée avec @font-face
En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci :
Code : CSS
@font-face {
font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot');
}
3) Mettre en italique
Code : CSS
em
{
font-style: normal;
}
Ainsi, dans l'exemple suivant, on se sert de font-style pour mettre en
italique tous les titres <h2>:
 Concrètement, en CSS, pour mettre en italique, on utilise font-
style qui peut prendre trois valeurs :

62
  Italic : le texte sera mis en italique.
 Oblique : le texte sera passé en oblique (les lettres sont penchées,
le résultat est légèrement différent de l'italique proprement dit).
 Normal : le texte sera normal (par défaut). Cela vous permet
d'annuler une mise en italique. Par exemple, si vous voulez que les
textes entre <em>ne soient plus en italique, vous devrez écrire :
Code : CSS
h2
{
font-style: italic;
}

4) Mettre en gras
La propriété CSS pour mettre en gras est font-weight et prend les
valeurs suivantes :
bold: le texte sera en gras ;
Normal : le texte sera écrit normalement (par défaut).
Voici par exemple comment écrire les titres en gras :
Code: CSS
h1
{
font-weight: bold;
}

5) Soulignement et autres décorations

La propriété CSS associée porte bien son nom : text-decoration. Elle
permet, entre autres, de souligner le texte, mais pas seulement. Voici les
différentes valeurs qu'elle peut prendre :
 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.
 blink : clignotant. Ne fonctionne pas sur tous les navigateurs
(Internet Explorer et Google Chrome, notamment).
 none : normal (par défaut).
Ce CSS va vous permettre de tester les effets de text-decoration:
Code : CSS
h1
{
text-decoration: blink;
}.
souligne
{
text-decoration: underline;
}.
barre
{
text-decoration: line-through;
}.
ligne_dessus
{
text-decoration: overline;

63
 }
Le langage CSS nous permet de faire tous les alignements connus : à
gauche, centré, à droite et justifié. C'est tout simple. On utilise la propriété
text-align et on indique l'alignement désiré :
 left : le texte sera aligné à gauche (c'est le réglage par défaut).
 center : le texte sera centré.
 right : le texte sera aligné à droite.
 justify : le texte sera « justifié ». Justifier le texte permet de faire en
sorte qu'il prenne toute la largeur possible sans
 laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont
toujours justifiés.
Code : CSS
h1
{
text-align: center;
}
p{
text-align: justify;
}
.signature
{
text-align: right;
}
Remarque : Vous ne pouvez pas modifier l'alignement du texte d'une
balise inline (comme <span>, <a>, <em>, <strong>…).L'alignement
ne fonctionne que sur des balises de type block(<p>, <div>, <h1>,
<h2>, …) et c'est un peu logique, quand on y pense : on ne peut pas
Modifier l'alignement de quelques mots au milieu d'un paragraphe. C’est
donc en général le paragraphe entier qu'il vous faudra aligner.

III. Les flottants

Le CSS nous permet de faire flotter un élément autour du texte. On dit
aussi qu'on fait un « habillage ». float(« flottant » en anglais). Cette
propriété peut prendre deux valeurs très simples :
 left : l'élément flottera à gauche.
 right : l'élément flottera… à droite.
L'utilisation des flottants est très simple :
 Vous appliquez un float à une balise.
 Puis vous continuez à écrire du texte à la suite normalement
1. Faire flotter une image
Pour faire flotter une image. Voici le code HTML que nous devons taper
dans un premier temps :
Code : HTML
<p><img src="flash.gif" class="imageflottante" alt="Image flottante"
/>Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui
l'habillera car l'image est flottante.</p>
Vous devez placer l'élément flottant en premier dans le code HTML. Si
vous placez l'image après le paragraphe, l'effet ne fonctionnera pas.

64
Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de
faire flotter l'image à gauche :
Code : CSS
.imageflottante
{
float: left;
}
Amus

2. Stopper un flottant
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous
flottant et non plus à côté ». C'est la propriété clear, qui peut prendre ces trois valeurs :
 left : le texte se poursuit en-dessous après un float: left;
 right : le texte se poursuit en-dessous après un float: right;
 both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un
float: right.
Pour simplifier, on va utiliser tout le temps le clear: both, qui marche après un flottant à
gauche et après un flottant à droite. Pour illustrer son fonctionnement, on va prendre ce code
HTML :
Code : HTML
<p><img src="flash.gif" class="imageflottante" alt="Image flottante"
/></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
Et ce code CSS :
Code : CSS
.imageflottante
{
float: left;
}.
dessous

{ clear: both; }

65
 Chap.5 : Le positionnement en CSS

Objectifs spécifiques
A la fin ce chapitre, l’étudiant doit être capable de :
 Lister les différents types de positionnement et leur rôle
 Pouvoir insérer ces balises dans un code CSS
INTRODUCTION
Le positionnement en CSS consiste une propriété très puissante : display. Elle est
capable de transformer n'importe quel élément de votre page d'un type vers un autre. Avec
cette propriété magique, je peux par exemple imposer à mes liens (originellement de type
inline) d'apparaître sous forme de blocs :
Code: CSS
a{
display: block;
}
À ce moment-là, les liens vont se positionner les uns en-dessous des autres (comme des blocs
normaux) et il devient possible de modifier leurs dimensions !
Voici quelques-unes des principales valeurs que peut prendre la propriété display en CSS (il y
en a encore d'autres) :
Valeur Exemples Description
inline<a>, <em>,
<span>… Eléments d'une ligne. Se placent les uns à côté des autres.
block<p>, <div>,
<section>…
Eléments en forme de blocs. Se placent les uns en-dessous des autres et peuvent être
redimensionnés.
inlineblock
<select>,
<input>
Eléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être
redimensionnés (comme les blocs). None<head>Eléments non affichés.
On peut donc décider de masquer complètement un élément de la page avec cette propriété.
Par exemple, si nous voulons masquer les éléments qui ont la classe « secret », on écrit :
Code: CSS
.secret
{
display: none;
}
I. Les positionnements absolu, fixe et relatif

Il existe d'autres techniques un peu particulières permettant de positionner avec

précision des éléments sur la page :

Comme pour les flottants, les positionnements absolu, fixe et relatif fonctionnent aussi sur
des balises de type inline. Toutefois, vous verrez qu'on l'utilise bien plus souvent sur des

66
balises block que sur des balises inline. Il faut d'abord faire son choix entre les trois modes de
positionnement disponibles. Pour cela, on utilise la propriété CSS position à laquelle on
donne une de ces valeurs :
 absolute : positionnement absolu ;

 fixed : positionnement fixe ;

 relative : positionnement relatif.
Nous allons étudier un à un chacun de ces positionnements.
1. Le positionnement absolu
Il nous permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à
droite, tout au centre, etc.).Le positionnement absolu permet de placer un
élément (réellement) n'importe où sur la page. Pour effectuer un
positionnement absolu, on doit écrire
Code : CSS
element
{
position: absolute;
}
Pour ce faire, on va utiliser quatre propriétés CSS :
 left : position par rapport à la gauche de la page ;
 right : position par rapport à la droite de la page ;
 top : position par rapport au haut de la page ;
 bottom : position par rapport au bas de la page.
On peut utiliser le pixel (px)ou le pourcentage (%) pour leur donner une
valeur .Il faut donc utiliser la propriété position et au moins une des
quatre propriétés ci-dessus (top, left, right ou bottom).Si on écrit par
exemple :
Code : CSS
element
{
position: absolute;
right: 0px;
bottom: 0px;
}
2. Le positionnement fixe
Le positionnement fixe identique au positionnement absolu mais, cette fois, l'élément reste
toujours visible, même si on descend plus bas dans la page. C'est un peu le même principe
que background-attachment: fixed, mais le bloc reste fixe à sa position, même
si on descend plus bas dans la page.
color: yellow; /* Texte de couleur jaune */
}
Code: CSS
element
{
position: fixed;
right: 0px;
bottom: 0px;
}
3. Le positionnement relatif

67
 Le positionnement relatif permet de décaler l'élément par rapport à sa position
normale.
Le positionnement relatif peut vite devenir difficile à utiliser. Ce
positionnement permet d'effectuer des « ajustements» : l'élément est
décalé par rapport à sa position initiale.
Prenons par exemple un texte important, situé entre deux balises
<strong>. Mettons-le sur fond vert pour qu'on puisse mieux le repérer :
Code: CSS
strong
{
background-color: green; /* Fond vert*/

68
 Chap.6 : Le modèle des boites

Introduction

Une page web peut être vue comme une succession et un

empilement de boîtes, qu'on appelle « blocs ». La plupart des éléments
vus au chapitre précédent sont des blocs : <header>, <article>,
<nav>… Mais nous connaissions déjà d'autres blocs :
les paragraphes <p>, les titres <h1>…
Dans ce chapitre, nous allons apprendre à manipuler ces blocs
comme de véritables boîtes. Nous allons leur donner des dimensions, les
agencer en jouant sur leurs marges, mais aussi apprendre à gérer leur
contenu… pour éviter que le texte ne dépasse de ces blocs !
Ce sont des notions fondamentales dont nous allons avoir besoin pour
mettre en page notre site web.
I. Les balises de type block et inline
En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de
deux catégories :
 Les balises inline : c'est le cas par exemple des liens <a></a>.
 Les balises block : c'est le cas par exemple des paragraphes
<p></p>.
Il existe en fait plusieurs autres catégories très spécifiques, par exemple
pour les cellules de tableau (type tablecell) ou les puces (type list-item).
Nous n'allons pas nous y intéresser pour le moment car ces balises sont
minoritaires.
Mais comment je reconnais une balise inline d'une balise block ?
C'est en fait assez facile : block : une balise de type block sur votre page
web crée automatiquement un retour à la ligne avant et après. Il suffit
d'imaginer tout simplement un bloc. Votre page web sera en fait
constituée d'une série de blocs les uns à la suite des autres. Mais vous
verrez qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre,
ce qui va augmenter considérablement nos possibilités pour créer le
design de notre site ! inline: une balise de type inline se trouve
obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée
pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la
suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle
de balise « en ligne »).Pour bien visualiser le concept, voici en figure
suivante un petit schéma que je vous ai concocté.
1. Différence entre une balise inline et une balise block
Sur fond bleu, vous avez tout ce qui est de type block.
Sur fond jaune, vous avez tout ce qui est de type inline.
Comme vous pouvez le voir, les blocs sont les uns en-dessous des autres.
On peut aussi les imbriquer les uns à l'intérieur des autres (souvenez-
vous, nos blocs <section>contiennent par exemple des blocs <aside>).

69
La balise inline <a></a>, elle, se trouve à l'intérieur d'une balise block et
le texte vient s'insérer sur la même ligne.
2. Quelques exemples
Afin de mieux vous aider à assimiler quelles balises sont inline et quelles
balises sont block, voici un petit tableau dressant la liste de quelques
balises courantes.
<p><em>
<footer><strong>
<h1><mark>
<h2><a>
<article><img />…
Ce tableau n'est pas complet, loin de là. Si vous voulez avoir la liste
complète des balises qui existent et savoir si elles sont de type inline ou
block, reportez-vous à l'annexe donnant la liste des balises HTML.
II. Les balises universelles
Vous les connaissez déjà car je vous les ai présentées il y a quelques
chapitres. Ce sont des balises qui n'ont aucun sens particulier
(contrairement à <p>qui veut dire « paragraphe », <strong>« important
», etc.). Le principal intérêt de ces balises est que l'on peut leur appliquer
une class (ou un id) pour le CSS quand aucune autre balise ne convient.
Il existe deux balises génériques et, comme par hasard, la seule différence
entre les deux est que l'une d'elle est inline et l'autre est block :
 <span></span>(inline) ;
 <div></div>(block).
1. Respectez la sémantique
Les balises universelles sont « pratiques » dans certains cas, certes,
mais attention à ne pas en abuser. Je tiens à vous avertir de suite :
beaucoup de webmasters mettent des <div>et des <span>trop souvent
et oublient que d'autres balises plus adaptées existent.
Voici deux exemples :
Exemple d'un span inutile : <span class="important">. Je ne devrais
jamais voir ceci dans un de vos codes alors qu'il existe la balise
<strong>qui sert à indiquer l'importance !
Exemple d'un div inutile : <div class="titre">. Ceci est complètement
absurde puisqu'il existe des balises faites spécialement pour les titres
(<h1>, <h2>…).
Oui, vous allez me dire qu'au final le résultat (visuel) est le même. Je suis
tout à fait d'accord. Mais les balises génériques n'apportent aucun sens à
la page et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours
d'autres balises plus adaptées quand c'est possible. Google lui-même le
conseille pour vous aider à améliorer la position de vos pages au sein de
ses résultats de recherche.
2. Les dimensions
Nous allons ici travailler uniquement sur des balises de type block.
Pour commencer, intéressons-nous à la taille des blocs. Contrairement à
un inline, un bloc a des dimensions précises. Il possède une largeur et une
hauteur. Ce qui fait, ô surprise, qu'on dispose de deux propriétés CSS :
 width : c'est la largeur du bloc. À exprimer en pixels (px) ou en
pourcentage (%).

70
  height : c'est la hauteur du bloc. Là encore, on l'exprime soit en
pixels (px), soit en pourcentage (%).
Rmq :Pour être exact, width et height représentent la largeur et la
hauteur du contenu des blocs. Si le bloc a des marges (on va découvrir ce
principe un peu plus loin), celles-ci s'ajouteront à la largeur et la hauteur.
Par défaut, un bloc prend 100% de la largeur disponible. On peut le vérifier
en appliquant à nos blocs des bordures ou une couleur de fond. Les blocs
prennent toute la largeur disponible ;
Maintenant, rajoutons un peu de CSS afin de modifier la largeur des
paragraphes. Le CSS suivant dit : « Je veux que tous mes paragraphes
aient une largeur de 50% ».
Code : CSS
P
{
width: 50%;
}
Un paragraphe de 50% de largeur. Les pourcentages seront utiles pour
créer un design qui s'adapte automatiquement à la résolution d'écran du
visiteur.

Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une
dimension précise en pixels :
Code : CSS
p{
width: 250px;
}
3. Minimum et maximum
On peut demander à ce qu'un bloc ait des dimensions minimales et
maximales. C'est très pratique car cela nous permet de définir des
dimensions « limites » pour que notre site s'adapte aux différentes
résolutions d'écran de nos visiteurs :
 min-width : largeur minimale ;
 min-height : hauteur minimale ;
 max-width : largeur maximale ;
 max-height : hauteur maximale.
Par exemple, on peut demander à ce que les paragraphes occupent
50% de la largeur et exiger qu'il fassent au moins 400 pixels de large dans
tous les cas :
Code : CSS
p
{
width: 50%;
min-width: 400px;
}
Observez le résultat en modifiant la largeur de la fenêtre de votre
navigateur. Vous allez voir que, si celle-ci est trop petite, le paragraphe se
force à occuper au moins 400 pixels de largeur.
4. Les marges
Il faut savoir que tous les blocs possèdent des marges.
Il existe deux types de marges :

71
  les marges intérieures ;
 les marges extérieures.
Marges extérieure et intérieure. Sur ce bloc, j'ai mis une bordure pour
qu'on repère mieux ses frontières. L'espace entre le texte et la bordure est
la marge intérieure (en vert).
L'espace entre la bordure et le bloc suivant est la marge extérieure (en
rouge).
En CSS, on peut modifier la taille des marges avec les deux propriétés
suivantes :
padding: indique la taille de la marge intérieure. À exprimer en général
en pixels (px).
margin: indique la taille de la marge extérieure. Là encore, on utilise le
plus souvent des pixels.
Les balises de type inline possèdent également des marges. Vous pouvez
donc aussi essayer ces manipulations sur ce type de balises.
Code : CSS
p{
width: 350px;
border: 1px solid black;
text-align: justify;
}

Marges par défaut sur les paragraphes

Comme vous pouvez le constater, il n'y a par défaut pas de marge
intérieure (padding). En revanche, il y a une marge extérieure (margin).
C'est cette marge qui fait que deux paragraphes ne sont pas collés et
qu'on a l'impression de « sauter une ligne ».
Les marges par défaut ne sont pas les mêmes pour toutes les balises de
type block. Essayez d'appliquer ce CSS à des balises <div>qui
contiennent du texte, par exemple : vous verrez que, dans ce cas, il n'y a
par défaut ni marge intérieure, ni marge extérieure !
Supposons que je veuille rajouter une marge intérieure de 12 px aux
paragraphes Code : CSS
p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px; /* Marge intérieure de 12px */
}
Une marge intérieure ajoutée aux paragraphes
Maintenant, je veux que mes paragraphes soient plus espacés entre eux.
Je rajoute la propriété margin pour demander à ce qu'il y ait 50 px de
marge entre deux paragraphes (figure suivante) :
Code : CSS
p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin: 50px; /* Marge extérieure de 50px */
}

72
 Une marge extérieure ajoutée aux paragraphes margin (comme
padding d'ailleurs) s'applique aux quatre côtés du bloc. Si vous voulez
spécifier des marges différentes en haut, en bas, à gauche et à droite, il va
falloir utiliser des propriétés plus précises… Le principe est le même que
pour la propriété border, vous allez voir !
5. En haut, à droite, à gauche, en bas
L'idéal serait que vous reteniez les termes suivants en anglais :
 top : haut ;
 bottom : bas ;
 left : gauche ;
 right : droite.
Ainsi, vous pouvez retrouver toutes les propriétés de tête.
Je vais quand même vous faire la liste des propriétés pour margin et
padding, histoire que vous soyez sûrs que vous avez compris le principe.
Voici la liste pour margin :
 margin-top : marge extérieure en haut ;
 margin-bottom : marge extérieure en bas ;
 margin-left : marge extérieure à gauche ;
 margin-right : marge extérieure à droite.
Et la liste pour padding :
 padding-top : marge intérieure en haut ;
 padding-bottom : marge intérieure en bas ;
 padding-left : marge intérieure à gauche ;
 padding-right : marge intérieure à droite.
Rmq : Il y a d'autres façons de spécifier les marges avec les propriétés
margin et padding.
Par exemple :
margin: 2px 0 3px 1px; signifie « 2 px de marge en haut, 0 px à droite
(le px est facultatif dans ce cas), 3 px en bas, 1 px à gauche ».
Autre notation raccourcie : margin: 2px 1px; signifie « 2 px de marge en
haut et en bas, 1 px de marge à gauche et à droite ».
6. Centrer des blocs
Il est tout à fait possible de centrer des blocs. C'est même très pratique
pour réaliser un design centré quand on ne connaît pas la résolution du
visiteur. Pour centrer, il faut respecter les règles suivantes :
 donnez une largeur au bloc (avec la propriété width) ;
 indiquez que vous voulez des marges extérieures automatiques,
comme ceci : margin: auto;
Essayons cette technique sur nos petits paragraphes (lignes 3 et 4) :
Code : CSS
p{
width: 350px; /* On a indiqué une largeur (obligatoire) */
margin: auto; /* On peut donc demander à ce que le bloc soit
centré avec auto */
border: 1px solid black;
text-align: justify;
padding: 12px;
margin-bottom: 20px;
}
Ainsi, le navigateur centre automatiquement nos paragraphes !

73
Il n'est cependant pas possible de centrer verticalement un bloc avec
cette technique. Seul le centrage horizontal est permis .
7. overflow : couper un bloc
Supposons que vous ayez un long paragraphe et que vous vouliez (pour
une raison qui ne regarde que vous) qu'il fasse 250 px de large et 110 px
de haut. Ajoutons-lui une bordure et remplissons-le de texte… à ras-:
Code : CSS
p{
width: 250px;
height: 110px;
text-align: justify;
border: 1px solid black;

}
Le texte dépasse du bloc de paragraphe
Eh oui ! Vous avez demandé des dimensions précises, vous les avez eues !
Mais… le texte ne tient pas à l'intérieur d'un si petit bloc.
Si vous voulez que le texte ne dépasse pas des limites du paragraphe, il
va falloir utiliser la propriété overflow. Voici les valeurs qu'elle peut
accepter :
visible (par défaut) : si le texte dépasse les limites de taille, il reste visible
et sort volontairement du bloc.
 hidden : si le texte dépasse les limites, il sera tout simplement
coupé. On ne pourra pas voir tout le texte.
 scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf
que cette fois, le navigateur mettra en place des barres de
défilement pour qu'on puisse lire l'ensemble du texte. C'est un peu
comme un cadre à l'intérieur de la page.
 auto : c'est le mode « pilote automatique ». En gros, c'est le
navigateur qui décide de mettre ou non des barres dedéfilement (il
n'en mettra que si c'est nécessaire). C'est la valeur que je conseille
d'utiliser le plus souvent.
Avec overflow: hidden; le texte est donc coupé (on ne peut pas voir la
suite), comme sur la
Le texte est coupé aux limites du paragraphe
Essayons maintenant overflow: auto; avec le code CSS suivant (résultat
à la figure suivante) :
Code : CSS
p{
width: 250px;
height: 110px;
text-align: justify;
border: 1px solid black;
overflow: auto;
}
Des barres de défilement nous permettent maintenant de consulter
le contenu qui n'était pas visible.
Il existe une ancienne balise HTML, <iframe>, qui donne à peu près le
même résultat. Cependant, l'usage de cette balise est déconseillé
aujourd'hui. Elle permet de charger tout le contenu d'une autre page HTML
au sein de votre page.

74
 8. word-wrap : couper les textes trop larges
Si vous devez placer un mot très long dans un bloc, qui ne tient pas dans
la largeur, vous allez adorer word-wrap. Cette propriété permet de forcer
la césure des très longs mots (généralement des adresses un peu
longues).
La figure suivante représente ce que l'on peut avoir quand on écrit une
URL un peu longue dans un bloc. Le texte déborde en largeur. L'ordinateur
ne sait pas « couper » l'adresse car il n'y a ni espace, ni tiret. Il ne sait pas
faire la césure. Avec le code suivant, la césure sera forcée dès que le texte
risque de dépasser.
Code : CSS
p{
word-wrap: break-word;
}
Le texte est coupé pour ne pas déborder on conseille d'utiliser cette
fonctionnalité dès qu'un bloc est susceptible de contenir du texte saisi par
des utilisateurs (par exemple sur les forums de votre futur site). Sans cette
astuce, on peut « casser » facilement le design d'un site (en écrivant par
exemple une longue suite de « aaaaaaaaaaa »).

75