Cours HTML-CSS

Programmation web
SMI – S3

Préparé par
Youssef Zaz

2019-2020

FACULTE DES SCIENCES DE TETOUAN

 1

I. Le HTML ........................................................................................................................................... 4
I.1 Principes fondamentaux.......................................................................................................... 4
I.1.1 Balises .................................................................................................................................. 4
I.1.2 Les attributs ......................................................................................................................... 4
I.1.3 La casse ................................................................................................................................ 4
I.1.4 Commentaires ..................................................................................................................... 5
I.2 Syntaxe générale ..................................................................................................................... 5
I.3 Récapitulatif sur la syntaxe ..................................................................................................... 5
I.4 Le DTD ..................................................................................................................................... 5
I.5 Les en-têtes ............................................................................................................................. 5
I.6 Le titre ..................................................................................................................................... 6
I.7 Langue de la page .................................................................................................................... 6
I.8 Les balises <meta>................................................................................................................... 6
I.8.1 Auteur de la page ................................................................................................................ 6
I.8.2 Encodage de la page ............................................................................................................ 6
I.8.3 Mots clefs ............................................................................................................................ 6
I.8.4 Description .......................................................................................................................... 6
I.9 Les références externes........................................................................................................... 6
I.9.1 Référence à un script ........................................................................................................... 6
I.9.2 La balise <link>.................................................................................................................... 6
I.10 Le corps de la page .................................................................................................................. 7
I.11 Balises ...................................................................................................................................... 7
I.11.1 Balise <a>: liens ................................................................................................................... 7
I.12 Gestion des images.................................................................................................................. 8
I.12.1 Format des images .............................................................................................................. 8
I.12.2 Balise <img /> : images ........................................................................................................ 8
I.12.3 Image miniature cliquable ................................................................................................... 8
I.12.4 Figure avec plusieurs images ............................................................................................... 8
I.12.5 Balise <br /> : saut de ligne ................................................................................................. 9
I.12.6 Balise <cite> : citation.......................................................................................................... 9
I.12.7 Balise <em> : mise en emphase .......................................................................................... 9
I.12.8 Balise <span> ....................................................................................................................... 9
I.12.9 Balise <div> : division du document .................................................................................... 9
I.12.10 Balises <h1> à <h6> : entête de paragraphe ..................................................................... 10
I.12.11 Balise <hr /> : trait horizontal............................................................................................ 10
I.12.12 Balise <p> : paragraphe ..................................................................................................... 10
I.12.13 Balise <pre> ....................................................................................................................... 10
I.12.14 Balises <ul> et <ol> : listes ................................................................................................. 10
I.12.15 Sigles et acronymes ........................................................................................................... 11
I.12.16 Tableaux ............................................................................................................................ 11
II. Cascading Style Sheets .................................................................................................................. 12
II.1 Appliquer CSS à un document HTML..................................................................................... 13
II.2 Couleurs et arrières-plans ..................................................................................................... 14

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 2

II.2.1 La propriété 'background-color' ........................................................................................ 14

II.2.2 Les images d'arrière-plan [background-image] ................................................................. 14
II.2.3 Répéter l'image d'arrière-plan [background-repeat] ........................................................ 14
II.2.4 Positionner une image d'arrière-plan [background-position]........................................... 15
II.3 Les polices.............................................................................................................................. 16
II.3.1 La famille de polices [font-family] ..................................................................................... 16
II.3.2 Le style des polices [font-style] ......................................................................................... 17
II.3.3 Les variantes de polices [font-variant] .............................................................................. 17
II.3.4 La graisse des polices [font-weight] .................................................................................. 17
II.3.5 Le corps des polices [font-size] ......................................................................................... 17
II.3.6 Concision [font] ................................................................................................................. 17
II.4 Le texte .................................................................................................................................. 18
II.4.1 L'indentation du texte [text-indent] .................................................................................. 18
II.4.2 L'alignement du texte [text-align] ..................................................................................... 18
II.4.3 La décoration du texte [text-decoration] .......................................................................... 18
II.4.4 L'espacement des lettres [letter-spacing] ......................................................................... 18
II.4.5 La transformation du texte [text-transform] .................................................................... 18
II.5 Les liens ................................................................................................................................. 19
II.6 Les pseudo-classes ................................................................................................................ 19
II.6.1 La pseudo-classe :link ........................................................................................................ 19
II.6.2 La pseudo-classe :visited ................................................................................................... 19
II.6.3 La pseudo-classe :active .................................................................................................... 19
II.6.4 La pseudo-classe :hover .................................................................................................... 19
II.6.5 Supprimer le trait sous les liens ........................................................................................ 20
II.7 L'identification et le regroupement d'éléments (class et id) ................................................ 20
II.8 Le regroupement d'éléments (span et div) ........................................................................... 21
II.9 Le regroupement avec <span> .............................................................................................. 21
II.9.1 Span ................................................................................................................................... 21
II.9.2 Le regroupement avec <div> ............................................................................................. 22
II.10 Le modèle des boîtes ............................................................................................................. 22
II.10.1 Le modèle des boîtes dans CSS ......................................................................................... 22
II.10.2 Margin et padding ............................................................................................................. 23
II.10.3 Fixer l'espacement dans un élément................................................................................. 23
II.11 Les bordures .......................................................................................................................... 23
II.11.1 Les types de bordures [border-style] ................................................................................ 23
II.11.2 La couleur des bordures [border-color] ............................................................................ 24
II.11.3 L'épaisseur des bordures [border-width] .......................................................................... 24
II.11.4 Concision [border] ............................................................................................................. 25
II.11.5 La hauteur et la largeur ..................................................................................................... 25
II.11.6 Fixer la hauteur [height] .................................................................................................... 25
II.12 Les éléments flottants ........................................................................................................... 25
II.12.1 La propriété clear .............................................................................................................. 26
II.13 Les balises structurantes de HTML5 ...................................................................................... 26
II.13.1 <header> : l'en-tête ........................................................................................................... 26

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 3

II.13.2 <footer> : le pied de page ................................................................................................. 27

II.13.3 <nav> : principaux liens de navigation .............................................................................. 27
II.13.4 <article> : un article indépendant ..................................................................................... 27
II.13.5 <section> ........................................................................................................................... 27
II.13.6 <aside> .............................................................................................................................. 27
II.14 Les formulaires ...................................................................................................................... 29
II.14.1 Zone de texte monoligne .................................................................................................. 30
II.14.2 Les libellés.......................................................................................................................... 30
II.14.3 Zone de mot de passe ....................................................................................................... 30
II.14.4 Zone de texte multiligne ................................................................................................... 30
II.14.5 checkbox ............................................................................................................................ 30
II.14.6 Les zones d'options ........................................................................................................... 31
II.14.7 Les listes déroulantes ........................................................................................................ 31
II.14.8 Les zones de saisie enrichies ............................................................................................. 32

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 4

Le langage HTML (HyperText Markup Language) est un langage de formatage de texte adapté à la
conception de pages web.
Ce n'est pas un langage de programmation, mais un langage de mise en forme de données : une page
Web décrit une structure statique, tandis qu'un programme est un processus dynamique.
Pas besoin d'avoir des bases de programmation pour écrire du HTML.

Le W3C

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour
promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF,
CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations
à valeur de standards industriels.
Son site officiel : http://www.w3.org

I. Le HTML
Le HTML définit la structure logique d'un document, permettant ensuite à un navigateur (Firefox,
Mozilla, Netscape, Opera, Internet Explorer, etc.) de rendre visuellement (mais aussi auditivement ou
tactilement, pour les non-voyants) le document.
La norme actuelle recommandée par le W3C est le HTML 5.0.
L'élément de base d'un site est la page. C'est un fichier dont l'extension est normalement .html (ou
.htm) et qui contient du code HTML.
Le HTML ne s'occupe que de définir la structure logique de votre document. Pour l'aspect visuel (mise
en page, couleurs, fontes, etc.), c'est le domaine des feuilles de style.
I.1 Principes fondamentaux
I.1.1 Balises
Le HTML utilise des balises. Toute balise doit être ouverte et doivent également être fermées.
Une balise se présente sous la forme <tagada>, avec un < et un >.
Les balises se referment avec </tagada>, / étant l'élément fermant. Certaines balises se ferment à
l'intérieur (et à la fin) d'elles-mêmes. Dans ce cas, la barre transversale doit être placée juste avant le
> final.
Exemple : <br />.
Un jeu de balises présente donc obligatoirement l'une des deux formes suivantes :
<tagada> quelque chose </tagada>
ou bien :
<tagada />
Il n'existe aucune autre forme possible.

I.1.2 Les attributs

Les balises acceptent parfois des options, qu'on appelle des attributs : dans <tagada type="plouf" />,
tagada est l'élément, type l'attribut, et « plouf » la valeur de l'attribut.

I.1.3 La casse
En HTML, on écrit les balises et les attributs en minuscules.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 5

I.1.4 Commentaires
Les commentaires s'insèrent entre <!-- et -->. A l'intérieur de commentaires, il vaut mieux ne pas
utiliser de doubles tirets (--).
On ne peut pas placer de commentaires à l'intérieur d'un élément (balise).
I.2 Syntaxe générale
Toutes les balises doivent être refermées.
Toute partie de la page doit être contenue dans (au moins) une balise.
Les balises doivent être ouvertes et refermées dans l'ordre.
Il ne faut pas écrire :
<p> Je vous préviens tout de suite, c'est <em>non.</p></em>
mais :
<p> Je vous préviens tout de suite, c'est <em>non.</em> </p>
Il faut refermer la balise <em> avant <p>, car on l'a ouverte après.
I.3 Récapitulatif sur la syntaxe
La grammaire du XHTML répond à certaines règles :
Les noms des balises et des attributs sont en minuscules.
On écrit : <p> et plus <P>.
Les valeurs des attributs sont entre doubles quotes.
On écrit : <p align="center"> et plus <p align=center>.
Tout attribut doit impérativement avoir une valeur.
On écrit : <table border="1"> et plus <table border>.
Toute balise ouvrante doit être refermée.
On écrit : <p>blabla</p> et plus <p>blabla.
Toutes les balises sont ouvrantes.
On écrit : <br /> et plus <br>
On écrit<hr width="50%" /> et plus <HR WIDTH=50%>.
Les balises doivent être correctement imbriquées.
On écrit : <p><i>blabla</i></p> et pas <p><i>blabla</p></i>.
Tout document qui se conforme strictement à ces règles sera dit bien formé.
Toute page XHTML est contenue entre les 2 balises <html> et </html>.
I.4 Le DTD
Toute page XHTML doit commencer par une déclaration de Document Type Definition (DTD), qui
précise au navigateur quelle version de XHTML est utilisée :
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 5
<!DOCTYPE html>
I.5 Les en-têtes
Le rôle des en-têtes dans une page HTML (comme dans un courrier électronique) est de donner des
méta-informations plus ou moins importantes.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 6

Exp: l'identité de l'auteur, le titre de la page, l'encodage, la langue utilisée, etc. Les en-têtes sont
déclarées à l'intérieur de l'élément <head>.
I.6 Le titre
Le titre est affiché par les navigateurs dans la barre. Il est également utilisé par les moteurs de
recherche. Un bon titre est informatif, tout en restant relativement court. Il se déclare dans l'élément
<title> qui est obligatoire.
<title> mon titre </title>
I.7 Langue de la page
fr pour le français, en pour l'anglais, es pour l'espagnol, ar pour l‘arabe. Déclarer la langue utilisée est
utile pour les synthétiseurs vocaux des navigateurs pour aveugles (qui en déduisent comment
prononcer). Et pour les navigateurs standards qui peuvent en déduire s'il faut utiliser des guillemets
anglo-saxons ("") ou français (« »).
<html lang="fr">

I.8 Les balises <meta>

Elles sont facultatives, mais importantes à la fois pour le navigateur qui a des renseignements sur la
manière dont afficher la page, et pour les moteurs de recherche, qui s'en servent pour indexer les
pages.

I.8.1 Auteur de la page

<meta name="author" content="Hmida Hamid" />
Vous pouvez déclarer plusieurs auteurs en séparant les noms par des virgules.

I.8.2 Encodage de la page

<meta charset="utf-8">
Ceci déclare que votre page est du HTML respecte l'encodage iso-8859-1 (l'encodage standard pour
l'Europe occidentale). La déclaration de l'encodage est importante pour le navigateur.

I.8.3 Mots clefs

<meta name="keywords" content=" mot-clef1, mot-clef2, mot-clef3" />
Cette balise meta est utilisée par certains moteurs de recherche pour indexer les pages. Ne mettez que
les mots-clefs les plus significatifs, les moteurs n'aiment pas les listes trop longues.

I.8.4 Description
<meta name="description" content=" description de votre page" />
I.9 Les références externes
Elles sont utilisées afin d'indiquer qu'un autre document est lié au document en cours. Cela peut être
un script, une feuille de style ou encore un icône.

I.9.1 Référence à un script

Pour faire référence à un script, il faut utiliser la balise <script>.
<script src="script.js"></script>

I.9.2 La balise <link>

La balise <link> permet de faire référence à de nombreux types de documents, mais les principaux sont
les feuilles de style (CSS) et l’icône.
• Pour un fichier CSS:
<link rel="stylesheet" href="style.css">

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 7

• Pour un icône:
<link rel="icon" href="images/icon.png" />
I.10 Le corps de la page
Le corps de la page est ce que le lecteur va voir via son navigateur.
Il est contenu entre balises <body>.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<meta name="keywords" content="<!-- Insérer les mots-clefs ici-->" />
<meta name="description" content="<!-- Insérer la description ici-->" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
...
<!-- Le reste du contenu -->
...
</body>
</html>

I.11 Balises
I.11.1 Balise <a>: liens
Insère un lien ou un point d'ancrage.
Exemples :
- Un lien :
<a href="http://www.test.com">test.com</a>
- Un point d'ancrage :
<a href="#intro">Introduction</a>
<!-- Plus loin dans le code -->
<a id="intro"></a>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 8

I.12 Gestion des images

I.12.1 Format des images

Il existe plus d'une centaine de formats de fichiers images, dont beaucoup sont des formats natifs
utilisés par une seule application. Voici les plus standards

JPEG (Joint Photographic Expert Group) : format avec compression à choisir au moment de la
sauvegarde. Palette 16 millions de couleurs (24 bits). Il vaut mieux enregistrer les fichiers JPEG
à partir de l’image originale et non à partir d’un fichier JPEG enregistré précédemment. La
transparence n'est pas conservée en JPEG.

GIF (Graphic Interchange Format) : créé par Compuserve, palette 256 couleurs (8 bits), avec
conservation de la transparence (fond invisible). Idéal pour téléchargement rapide d'images
contrastées. Et possibilité de faire des GIF Animées.

PNG (Portable Network Graphic) : créé pour le Web, il combine les avantages de GIF et JPEG :
couleurs 32 bits, transparence et compression sans perte de qualité... C'est le format natif de
Fireworks (Macromedia).

SVG (Scalable Vector Graphics) : format vectoriel pour le web, mais nécessite un lecteur SVG. TIFF
(Tagged Image File Format) : possibilité de compression LZW (Lempel‐Ziv‐Welch) sans perte de
qualité, un peu lourd. Le bon format pour toute utilisation standard si on a assez de place. Garde
également les calques.

BMP : format standard PC, accepté par la plupart des logiciels PC

TARGA : format utilisable avec une carte vidéo TrueVision.

I.12.2 Balise <img /> : images

Insère une image.

Exemple :
<img src="logo.png" alt="Logo smi.com" />

I.12.3 Image miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez ensuite
un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale.
<p> Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez
dessus !<br />
<a href="img/petite_image.jpg">
<img src="img/grande_image.jpg"
alt="Photo de souvenir" title="Cliquez pour agrandir" />
</a> </p>

I.12.4 Figure avec plusieurs images

<figure>
<img src="firefox.png" alt="Firefox" />
<img src="chrome.png" alt="Google Chrome" />
<img src= explorer.png alt= Internet Explorer />
<figcaption>Les navigateurs Internet</figcaption>
</figure>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 9

I.12.5 Balise <br /> : saut de ligne

Provoque un saut de ligne.

Exemple :
Du texte <br />
La suite ...

I.12.6 Balise <cite> : citation

Insère une citation.
Exemple :
Quand le sage désigne la lune, l'idiot regarde le doigt. <cite>Proverbe
chinois</cite>

I.12.7 Balise <em> : mise en emphase

Met en emphase du texte.

Exemple :
Vive SMI et <em>moi</em> aussi !

I.12.8 Balise <span>

Couplée à du CSS, la balise span met en forme du texte.

Exemple :
<span style="text-decoration:line-through">Du texte barré</span>
et du texte normal.
Balise <strong> : mise en emphase forte
Mise en emphase forte du texte.
Exemple :
Vive <strong>isma.com</strong>.

I.12.9 Balise <div> : division du document

Utilité :
Joue le rôle de "conteneur" en permettant de structurer la page en plusieurs blocs.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 10

Exemple :
<div>
<div> Le haut de page </div>
<div> Le contenu principal de la page </div>
<div> Le bas de page </div>
</div>

I.12.10 Balises <h1> à <h6> : entête de paragraphe

Utilité :
Définit un entête de paragraphe de niveau X (X pouvant aller de 1 à 6).

Exemple :
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

I.12.11 Balise <hr /> : trait horizontal

Insère un trait horizontal.

Exemple :
<p>Premier paragraphe</p>
<hr />
<p>Deuxième paragraphe</p>

I.12.12 Balise <p> : paragraphe

Définit un paragraphe.

Exemple :
<p>Un paragraphe</p>

I.12.13 Balise <pre>

Définit un bloc où le texte sera affiché tel qu'il figure dans le fichier source.

Exemple :
<pre>
#include &lt;stdio.h&gt;
int main(void)
{
printf("Hello, world!\n");
return 0;
}
</pre>

I.12.14 Balises <ul> et <ol> : listes

La balise <li>Définit une liste.
La balise ul étant une liste à puces.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 11

La balise ol étant une liste ordonnée avec des chiffres.

Exemple :
<ul>
<li>Menu</li>
<li>Entrée</li>
<li>Plat principal</li>
<li>Plat secondaire</li>
<li>Dessert (important)</li>
</ul>

I.12.15 Sigles et acronymes

Les sigles peuvent être indiqués par un élément <abbr>, et les acronymes (sigles prononçables, comme
ONU, OTAN, etc.) par l'élément... <acronym>. Ces éléments sont intéressants surtout si on utilise leur
attribut title : certains navigateurs peuvent alors afficher le contenu de title dans une bulle d'aide.
L'<acronym lang="en" title="United Nations Special Commission">
UNSCOM</acronym> a été créée pour assister l'<abbr lang="en"
title="International Atomic Energy Agency">IAEA</abbr> en Iraq.
Les bons navigateurs affichent le contenu du title sous la forme d'une bulle d'aide (tooltip en anglais)
quand vous laissez le curseur dessus.
Faites le test :
L'UNSCOM a été créée pour assister l'IAEA en Iraq.

I.12.16 Tableaux
Les tableaux sont décrits par l'élément <table>.
Un tableau simple
<table> définit l'ensemble du tableau. À l'intérieur, il faut décrire les lignes du tableau et ses cellules.
L'élément <tr> décrit les lignes, et <td> les cellules.
On déclare dans l'ordre <table>, puis <tr> et enfin <td>.
<table>
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
</table>
Ce qui donne :
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6

<table border=1>
<caption>Ceci est un tableau</caption>
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
<tr><td> Cellule 1 </td><td> Cellule 2</td></tr>
<tr><td> Cellule 3 </td><td> Cellule 4</td></tr>
<tr><td> Cellule 5 </td><td> Cellule 6</td></tr>
</table>
Ceci est un tableau
Colonne gauche Colonne droite

Cellule 1 Cellule 2

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 12

Cellule 3 Cellule 4

Cellule 5 Cellule 6

Tableau plus évolué

Les balises <thead>, <tbody> et <tfoot> sert à différencier le contenu des entêtes.
La balise <thead>
C'est elle qui contient l'entête du tableau, en général, la partie du tableau dont les cellules sont définies
par des <th>.
Type de balise : table-header-group
Attributs pouvant être employés : scope, lang, dir, title.
La balise <tfoot>
Elle a la même fonction que <thead>, mais cette fois-ci, pour le pied du tableau.
Type de balise : table-footer-group
Attributs pouvant être employés : lang, dir, title.
La balise <tbody>
Elle permet de délimiter la partie du tableau contenant uniquement les données de ce dernier.
Type de balise : table-row-group
Attributs pouvant être employés : lang, dir, title.

l'attribut colspan: pour fusionner des colonnes l'attribut rowspan : pour fusionner des lignes
<table>
<caption>Le titre du tableau </caption>
<thead> <!-- En-tête du tableau -->
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
</thead>
<tfoot> <!-- Pied de tableau -->
<tr><th>pied gauche</th><th>pied droit</th> </tr>
</tfoot>
<tbody> <!-- Corps du tableau -->
<tr><td colspan="2"> Cellule 1 et Cellule 2</td></tr>
<tr><td rowspan="2"> Cellule 3 et Cellule 5 </td><td> Cellule 4</td></tr>
<tr><td> Cellule 6</td></tr>
</tbody>
</table>

II. Cascading Style Sheets

Les feuilles de style en cascade CSS « Cascading Style Sheets »
(CSS) est un outil pour la présentation des sites Web. Elles peuvent faire gagner beaucoup de temps,
et elles permettent de créer des sites Web de façon entièrement nouvelle.
L'utilisation de CSS nécessite une connaissance de base de HTML.
Comment CSS fonctionne-t-il ?
La syntaxe CSS de base
Exp: le fond d'une page Web rouge :
Avec HTML :
<body bgcolor="#FF0000">
Avec CSS :
body {background-color: #FF0000;}

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 13

Comme vous l'aurez remarqué, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple
illustre également le modèle fondamental de CSS.

II.1 Appliquer CSS à un document HTML

Il existe 3 façons
Méthode 1 : Dans la ligne (l'attribut style)
Avec l'attribut HTML style.
Exp :
<html>
<head>
<title>Exemple</title>
</head>
<body style="background-color: #FF0000;">
<p>Cette page est rouge</p>
</body>
</html>
Méthode 2 : Interne (l'élément style)
Une autre méthode consiste à inclure le code CSS avec la balise HTML <style>.
Exp:
<html>
<head>
<title>Exemple</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Cette page est rouge</p>
</body>
</html>
Méthode 3 : Externe (un lien vers une feuille de style)
La méthode recommandée est celle avec un lien vers feuille de style externe.
Une feuille de style externe est un fichier texte ayant l'extension « .css ».
Exp: votre feuille de style se nomme « style.css » et se trouve dans un dossier appelé « style ». On peut
illustrer cette situation comme ceci :

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 14

On crée un lien depuis (default.htm) vers la feuille de style (style.css). Ce lien peut être créé en une
ligne de code HTML :
<link rel="stylesheet" type="text/css" href="style/style.css" />

La ligne de code doit s'inscrire entre les balises <head> et </head>.

II.2 Couleurs et arrières-plans
La couleur d'avant-plan : la propriété 'color'
La propriété color décrit la couleur d'avant-plan d'un élément.
Par exemple, les titres rouge foncé. <h1>.
h1 { color: #ff0000; }

II.2.1 La propriété 'background-color'

La propriété background-color décrit la couleur d'arrière-plan.
Pour changer la couleur d'arrière-plan d'une page entière, il faudrait l’appliquer à l'élément <body>.
Exp: Les couleurs d'arrière-plan différentes sont appliquées aux éléments <body> et <h1>.
body { background-color: #FFCC66; }
h1 { color: #990000;
background-color: #FC9804; }

II.2.2 Les images d'arrière-plan [background-image]

background-image : insérer une image d'arrière-plan.
body
{ background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1
{ color: #990000;
background-color: #FC9804;
}

II.2.3 Répéter l'image d'arrière-plan [background-repeat]

Le tableau décrit les quatre valeurs différentes de background-repeat.
Valeur Description

Background-repeat: repeat-x L'image se répète horizontalement

background-repeat: repeat-y L'image se répète verticalement

L'image se répète horizontalement et

background-repeat: repeat
verticalement

background-repeat: no-repeat L'image ne se répète pas

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 15

Pour éviter la répétition d'une image d'arrière-plan:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-attachment: pour fixer ou défiler l'image d'arrière-plan avec l'élément conteneur.
Valeur Description

Background-attachment: scroll L'image défile avec la page (non bloquée)

Background-attachment: fixed L'image est bloquée

Exp: le code suivant bloque l'image d'arrière-plan.

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000; background-color: #FC9804;
}

II.2.4 Positionner une image d'arrière-plan [background-position]

Par défaut, l'image d'arrière-plan se positionne dans le coin supérieur gauche de l'écran.
background-position :permet de changer cette position prédéfinie et de placer l'image d'arrière-plan
n'importe où à l'écran.
Exemple: la valeur'100px 200px' positionne l'image d'arrière-plan à 100px depuis la gauche et à 200px
depuis le haut de la fenêtre du navigateur.
Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en unités fixes
(pixels, centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom", "center", "left" ou "right".

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 16

Le tableau suivant fournit quelques exemples.

Valeur Description

L'image est positionnée à 2 cm de la gauche et

background-position: 2cm 2cm
à 2 cm du haut de la page

L'image est positionnée au centre et à un quart

background-position: 50% 25%
de la page vers le bas

L'image est positionnée au coin supérieur droit

background-position: top right
de la page

L'exemple de code à suivre positionne l'image d'arrière-plan dans le coin inférieur droit de la page :
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000; background-color: #FC9804;
}
On peut obtenir le même résultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
II.3 Les polices
II.3.1 La famille de polices [font-family]
font-family : indique la liste prioritaire des polices à utiliser pour l'affichage d'un élément donné ou
d'une page Web. Si la première police de la liste n'est pas disponible sur l'ordinateur utilisé pour
accéder au site, la police suivante est essayée et ainsi de suite.
La différence entre les polices :

On commence par la police préférée suivie par des polices de remplacement.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 17

Il est recommandé de terminer la liste par une famille générique. Ainsi, la page s'affichera au moins
avec une police de la même famille si aucune des polices indiquées n'était disponible.
Exp :
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

II.3.2 Le style des polices [font-style]

La propriété font-style définit le style de la police concernée être normal, italic ou oblique.
Exp:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;
font-style: italic;}

II.3.3 Les variantes de polices [font-variant]

La propriété font-variant sert à choisir entre les variantes normal ou small-caps d'une police.
Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres en
minuscules.
Exp :

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

II.3.4 La graisse des polices [font-weight]

Font-weight décrit le degré de graisse de la police. Elle peut avoir une graisse normal ou bold.

Exp:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif;
font-weight: bold;}

II.3.5 Le corps des polices [font-size]

Le corps d'une police se règle par la propriété font-size.
On peut choisir parmi beaucoup d'unités différentes (par exemple, pixels et pourcentages) pour
décrire les corps des polices.
Exp :
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Il existe une différence essentielle entre les quatre unités précédentes. Les unités « px » et « pt » font
que le corps de la police est absolu, tandis que « % » et « em » permettent à l'utilisateur de l'ajuster si
nécessaire. Il est souhaitable utiliser des unités ajustables telles que « % » ou « em ».

II.3.6 Concision [font]

Avec la propriété raccourcie font, il est possible de couvrir toutes les différentes propriétés de police
en un coup.
Exp:

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 18

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Avec la propriété raccourcie, on peut simplifier le code :
p { font: italic bold 30px arial, sans-serif; }
L'ordre des valeurs de la propriété font est le suivant :
font-style | font-variant | font-weight | font-size | font-family
II.4 Le texte
II.4.1 L'indentation du texte [text-indent]
La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en
appliquant une indentation à la première ligne du paragraphe.
Exp:
p { text-indent: 30px; }

II.4.2 L'alignement du texte [text-align]

La propriété CSS text-align correspond à l'attribut align utilisé dans le HTML. Le texte peut être aligné
à gauche (left), à droite (right) ou centré (center). La valeur justify étirera chaque ligne de sorte que les
marges à gauche et à droite soient droites toutes les deux.
Exp:
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }

II.4.3 La décoration du texte [text-decoration]

La propriété text-decoration permet d'ajouter des « effets » différents au texte. Par exemple, on peut
souligner le texte, le barrer, ou tracer un trait au-dessus.
Exp:
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }

II.4.4 L'espacement des lettres [letter-spacing]

L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La valeur
de la propriété est celle de l'espacement désiré.
Exp:
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }

II.4.5 La transformation du texte [text-transform]

La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation
initiale, une mise en majuscules ou une mise en minuscules, indépendamment de l'aspect du texte
original dans le code HTML.
Exp: le mot « titre » que l'on peut présenter à l'utilisateur comme « TITRE » ou « Titre ». La propriété
text-transform admet quatre valeurs possibles :
Capitalize: Elle capitalise la première lettre de chaque mot.
Uppercase: Elle convertit toutes les lettres en majuscules.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 19

Lowercase: Elle convertit toutes les lettres en minuscules.

None: Aucune transformation n’est appliquée.
Exp:
h1 { text-transform: uppercase; }
li { text-transform: capitalize; }
II.5 Les liens
CSS permet de définir les propriétés du lien différemment, selon que le lien est visité, non visité, activé,
ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles aux sites Web. Pour
contrôler ces effets, on utilise ce qu'on appelle des pseudo-classes.
Une pseudo-classe permet de tenir compte de conditions et événements différents pour la définition
d'une propriété sur une balise HTML.
Exp: les liens sont définis en HTML avec des balises <a>. On peut donc utiliser a comme sélecteur dans
CSS :
a { color: blue; }
Un lien est susceptible d'avoir plusieurs états.
Exp: il peut être visité ou non. On peut utiliser des pseudo-classes pour assigner des styles différents
aux liens visités et non visités.
a:link { color: blue; }
a:visited { color: red; }
On Utilise a:link et a:visited pour les liens non visités et pour ceux visités. Les liens actifs ont pour
pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien.
II.6 Les pseudo-classes
II.6.1 La pseudo-classe :link
utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées.
Exp:
a:link { color: #6699CC; }

II.6.2 La pseudo-classe :visited

Utilisée pour les liens menant aux pages que l'utilisateur a visitées.
Exp:
a:visited { color: #660099; }

II.6.3 La pseudo-classe :active

La pseudo-classe :active est utilisée pour les liens qui sont activés.
Exp:
a:active { background-color: #FFFF00; }

II.6.4 La pseudo-classe :hover

Utilisée lorsque le pointeur de la souris survole un lien.
Exp:
a:hover { color: orange; font-style: italic; }
Exp 1: l'espacement entre les lettres
On peut ajuster l'espacement entre les lettres avec la propriété letter-spacing. Cela s'applique aux liens
pour un effet spécial :
a:hover { letter-spacing: 10px;
font-weight:bold;
color:red; }
Exp2: MAJUSCULES et minuscules

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 20

La propriété text-transform permet de basculer entre des lettres majuscules et minuscules. Elle peut
aussi servir pour créer un effet sur les liens :
a:hover { text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow; }
Les deux exemples donnent un aperçu des possibilités de combinaison des différentes propriétés
presque illimitées.

II.6.5 Supprimer le trait sous les liens

a { text-decoration:none; }
On peut fixer la valeur de text-decoration en même temps que celles d'autres propriétés pour les
quatre pseudo-classes.
a:link { color: blue;
text-decoration:none; }
a:visited { color: purple;
text-decoration:none; }
a:active { background-color: yellow;
text-decoration:none; }
a:hover { color:red;
text-decoration:none; }

II.7 L'identification et le regroupement d'éléments (class et id)

Utilisation des attributs class et id.
Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ?
Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Solution:
Le regroupement d'éléments dans une classe.
Exp :
<p>Pays africains:</p>
<ul>
<li><a href="ma.htm">Maroc</a></li>
<li><a href="al.htm">Algérie</a></li>
<li><a href="tu.htm">Tunisie</a></li>
</ul>
<p>Pays européens:</p>
<ul>
<li><a href="fr.htm">France</a></li>
<li><a href="es.htm">Espagne</a></li>
<li><a href="it.htm">Italie</a></li>
</ul>
Nous voulons ensuite que les liens des pays africains soient jaune, que ceux des pays européens soient
rouge, et que les autres liens de la page Web restent bleu.
Pour y parvenir, nous répartissons les liens en deux catégories. On assigne une classe à chaque lien
avec l'attribut class.
<p>Pays africains:</p>
<ul>
<li><a href="ma.htm" class="af">Maroc</a></li>
<li><a href="al.htm" class="af">Algérie</a></li>
<li><a href="tu.htm" class="af">Tunisie</a></li>
</ul>
<p>Pays européens:</p>
<ul>
<li><a href="fr.htm" class="eu">France</a></li>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 21

<li><a href="es.htm" class="eu">Espagne</a></li>

<li><a href="it.htm" class="eu">Italie</a></li>
</ul>
Fichier HTML

a { color: blue; }
a.af { color: #FFBB00; }
a.eu { color: #800000; }
Fichier CSS

L'identification d'un élément avec id

on utilise l'attribut id pour identifier un élément unique parmi plusieurs éléments
On ne peut pas avoir deux éléments avec le même id dans le document.
Exp :
<h1>Chapitre 1</h1>
<h2>Chapitre 1.1</h2>
<h2>Chapitre 1.2</h2>
<h1>Chapitre 2</h1>
<h2>Chapitre 2.1</h2>
<h3>Chapitre 2.1.2</h3>
Il pourrait s'agir des titres d'un document partagé en chapitres ou en paragraphes. On assigne un id à
chaque chapitre comme ceci :
<h1 id="c1">Chapitre 1</h1>
<h2 id="c1-1">Chapitre 1.1</h2>
<h2 id="c1-2">Chapitre 1.2</h2>
<h1 id="c2">Chapitre 2</h1>
<h2 id="c2-1">Chapitre 2.1</h2>
<h3 id="c2-1-2">Chapitre 2.1.2</h3>
Le titre du chapitre 1.2 apparaît en rouge:
#c1-2 { color: red; }
II.8 Le regroupement d'éléments (span et div)
Les éléments <span> et <div> servent à regrouper et structurer un document et seront souvent utilisés
avec les attributs class et id.
Dans cette leçon, nous verrons de plus près l'utilisation des deux éléments <span>
II.9 Le regroupement avec <span>
L'élément <span> est un élément neutre, qui n'ajoute rien au document. Mais CSS peut utiliser
l'élément <span> pour ajouter des caractéristiques visuelles à des parties spécifiques du texte des
documents.
Exp:
<p>Tôt couché et tôt levé fortifie, enrichit et rend avisé.</p>

II.9.1 Span
Pour accentuer en rouge des parties de cette citation. Dans ce but, on utilise la balise <span>. Chaque
span reçoit un attribut class défini dans la feuille de style :
<p>Tôt couché et tôt levé
<span class="benefit">fortifie</span>,
<span class="benefit">enrichit</span>
et <span class="benefit">rend avisé</span>.</p>
Fichier HTML

span.benefit { color:red; }

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 22

Fichier CSS
On peut utiliser l'attribut id pour ajouter du style aux éléments <span>, tant que vous appliquez un id
unique à chacun des trois éléments <span>.

II.9.2 Le regroupement avec <div>

<span> s'utilise dans un élément de type bloc, <div> sert à regrouper un ou plusieurs éléments de type
bloc.
Le regroupement avec <div> fonctionne plus ou moins de la même façon.
Exp: Deux listes de présidents des États-Unis répartis selon leur affiliation politique :
<div id="democrats">
<ul> <li>Franklin D. Roosevelt</li>
<li>John F. Kennedy</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li></ul>
</div>
<div id="republicans">
<ul> <li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li> </ul>
</div>
Fichier HTML

#democrats { background:blue; }
#republicans { background:red; }
Fichier CSS

II.10 Le modèle des boîtes

Le modèle des boîtes de CSS décrit les boîtes générées pour les éléments HTML. Il contient également
des options détaillées pour l'ajustement des marges, des bordures, des espacements et du contenu de
chaque élément.

II.10.1 Le modèle des boîtes dans CSS

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 23

II.10.2 Margin et padding

Fixer la marge d'un élément
Un élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom").
La marge est la distance entre chaque côté et l'élément avoisinant (ou les bordures du document).
Exp: les marges de l'élément <body>.

body { margin-top: 100px;

margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px; }
Ou bien :
body { margin: 100px 40px 10px 70px; }
Exp2: Ajout de marges dans le paragraphe

body { margin: 100px 40px 10px 70px; }

p { margin: 5px 50px 5px 50px; }

II.10.3 Fixer l'espacement dans un élément

L'espacement peut aussi être assimilé à un « remplissage ». Cela peut se comprendre dans la mesure
où l'espacement n'affecte pas la distance de l'élément aux autres éléments mais définit seulement la
distance interne entre la bordure et le contenu de l'élément.
Exp:
h1 { background: yellow; }
h2 { background: orange; }
En définissant l'espacement des titres, on change le remplissage autour du texte dans chaque titre :

h1 { background: yellow;
padding: 20px 20px 20px 80px; }
h2 { background: orange;
padding-left:120px; }
II.11 Les bordures
II.11.1 Les types de bordures [border-style]
8 types de bordures sont possibles.

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 24

On peut utiliser les valeurs "none" ou "hidden" si on ne veut aucune bordure.

II.11.2 La couleur des bordures [border-color]

Définit la couleur d'une bordure. Des valeurs de couleur normales sont, par exemple, "#123456",
"rgb(123,123,123)" ou "yellow" .

II.11.3 L'épaisseur des bordures [border-width]

Définie par la propriété border-width, dont les valeurs peuvent être thin, medium et thick, ou une
valeur numérique en pixels.

Exp:
On définit les bordures différentes pour <h1>, <h2>, <ul> et <p>. Le résultant montre les possibilités :
h1 { border-width: thick;
border-style: dotted;
border-color: gold; }
h2 { border-width: 20px;
border-style: outset;
border-color: red; }
p { border-width: 1px;
border-style: dashed;
border-color: blue; }
ul { border-width: thin;
border-style: solid;
border-color: orange; }
Exp: Déclaration des propriétés spéciales pour les bordures supérieures, inférieures, gauches ou
droites :
h1 { border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 25

border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange; }

II.11.4 Concision [border]

On peut concentrer plusieurs propriétés en une seule avec border :
p { border-width: 1px;
border-style: solid;
border-color: blue; }
Il peut se concentrer en :
p { border: 1px solid blue; }

II.11.5 La hauteur et la largeur

Il est possible de définir la hauteur et la largeur d'un élément.
Fixer la largeur [width]
La propriété width permet de définir la largeur d'un élément.
Exp :
div.box { width: 200px;
border: 1px solid black;
background: orange; }
Fichier CSS

<body>
<div class="box">Il était une fois , … </div>
</body>
Fichier HTML

II.11.6 Fixer la hauteur [height]

Dans l'exemple précédent, la hauteur de la boîte fixée par son contenu. On peut affecter la hauteur
d'un élément avec la propriété height.
div.box { height: 500px;
width: 200px;
border: 1px solid black;
background: orange; }
II.12 Les éléments flottants
Un élément peut avoir une position flottante à droite ou à gauche avec la propriété float.
Exp:
<div id="picture">
<img src="image.jpg" alt="image">
</div>
<p>biographie ...</p>
Pour que l'image flotte à gauche et que le texte l'entoure, il suffit de définir la largeur de la boîte
entourant l'image puis de donner à la propriété float la valeur "left" :
#picture { float:left;
width: 100px; }
Les flottants peuvent servir pour créer les colonnes d'un document.
Exp:

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 26

<div id="column1">
<p>bla bla bla...</p>
</div>

<div id="column2">
<p>bla bla bla...</p>
</div>
<div id="column3">
<p>bla bla bla...</p>
</div>
Une fois fixée la largeur des colonnes (par exemple à 33%), on fait flotter chaque colonne à gauche en
définissant la propriété float :
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
La propriété float admet les valeurs "left", "right" ou "none".

II.12.1 La propriété clear

Sert à contrôler le comportement des éléments qui viennent après les éléments flottants dans le
document.
Par défaut, les éléments à suivre remontent pour combler l'espace disponible libéré lorsqu'une boîte
flotte d'un côté.
La propriété clear admet les valeurs "left", "right", "both" ou "none". Le principe est tel que, par
exemple, si la valeur de clear d'une boîte est fixée à "both", la bordure supérieure de la marge de cette
boîte se trouvera toujours sous la bordure de la marge inférieure des boîtes flottantes éventuelles
venant du dessus.
<div id="picture">
<img src="image.jpg" alt="image">
</div>
<h1>Said Youssef</h1>
<p class="floatstop">biographie ...</p>
Pour empêcher que le texte ne flotte à côté de l'image, nous pouvons ajouter le code CSS suivant :
#picture { float:left; width: 100px; }
.floatstop { clear:both; }
II.13 Les balises structurantes de HTML5
Dans HTML5, des nouvelles balises sont introduites pour structurer les pages.

II.13.1 <header> : l'en-tête

La plupart des sites web possèdent un en-tête (header). On y trouve le plus souvent un logo, une
bannière, …
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 27

II.13.2 <footer> : le pied de page

le pied de page (footer) se trouve en général tout en bas du document. On y trouve des informations
comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

II.13.3 <nav> : principaux liens de navigation

La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par
exemple le menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

II.13.4 <article> : un article indépendant

La balise <article> sert à englober une portion généralement autonome de la page. C'est une partie de
la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles
de journaux ou de blogs).
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>

II.13.5 <section>
La balise <section> sert pour une section générique regroupant un même sujet, une même
fonctionnalité, de préférence avec un en-tête, ou bien section d'application web

<section>
<h1>titre</h1>
<p>Bla bla bla bla</p>
</section>

II.13.6 <aside>
La balise <aside> est une section dont le contenu est un complément par rapport à ce qui l'entoure,
qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations
supplémentaires.

<aside>
<h4>Sources de l'article</h4>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</aside>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 28

Résumé: exemple d'organisation de la page

Exemple concret d'utilisation des balises

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
<title>Fac Tetouan</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Université Abdelmalek Essaadi</h1>
<h2>Faculté des Sciences</h2>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Licences</a></li>
<li><a href="#">Licences Pro</a></li>
</ul>
</nav>
<section>
<aside>
<h1>Conférence sur les énergies
renouvelables</h1>
<p>Une conférence sur les énergies
renouvelables est organisé à Tanger</p>
</aside>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 29

<article>
<h1>Ouverture d'une nouvelle formation</h1>
<p>La faculté des Sciences de Tétouan a ouvert
une nouvelle formation sur les technologies de
pointes</p>
</article>
</section>
<footer>
<p>Copyright FS ‐ Tous réservés<br />
droits
<a href="#">contacter nous</a></p>
</footer>
</body>
</html>
Exemple concret d'utilisation des balises
style.css
nav
{
float: left; width: 150px;
border: 1px solid black;
}
section
{
margin-left: 170px; border: 1px solid blue;
}
footer
{
text-align: center;
border: 1px solid blue;
}
II.14 Les formulaires

Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site
web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart
du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et
les utiliser elle-même.

Un formulaire HTML est composé d'un ou plusieurs items. Ceux-ci peuvent être des zones de texte
(sur une seule ligne ou plusieurs lignes), des boîtes de sélection, des boutons, des cases à cocher ou
des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle.

Tous les formulaires HTML débutent par un élément <form>

<form> :C'est la balise principale du formulaire
<p>Texte avant le formulaire</p>
<form method="post" action="traitement.php">
<p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>
method : cet attribut indique par quel moyen les données vont être envoyées method="get" : les
informations seront envoyées dans l'adresse de la page (http://…),

method="post" : elle permet d'envoyer un grand nombre d'informations. Les données saisies dans le
formulaire ne transitent pas par la barre d'adresse.
action : c'est l'adresse de la page ou du programme qui va traiter les informations

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 30

II.14.1 Zone de texte monoligne

<input type="text" name="pseudo" />

II.14.2 Les libellés

<label>Votre pseudo</label> : <input type="text" name="pseudo" />
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du champ
<label for="pseudo">Votre pseudo</label> : <input type="text"
name="pseudo" id="pseudo" />

Quelques attributs supplémentaires

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

<label for="pseudo">Votre pseudo :</label>

<input type="text" name="pseudo" id="pseudo" placeholder="Ex : toto"
size="30" maxlength="10" />

II.14.3 Zone de mot de passe

<label for="pseudo">pseudo :</label> <input type="text" name="pseudo"
id="pseudo" /> <br />
<label for="pass">mot de passe :</label> <input type="password"
name="pass" id="pass" />

II.14.4 Zone de texte multiligne

<label for="comment">Commentaire</label><br />
<textarea name="ameliorer" id="comment"></textarea>

II.14.5 checkbox
Cochez les aliments que vous aimez manger :
<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>

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 31

II.14.6 Les zones d'options

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

<input type="radio" name="age" value="moins15" id="moins15" /> <label

for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" />
<label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" />
<label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label
for="plus40">Encore plus vieux que ça ?!</label>

II.14.7 Les listes déroulantes

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

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

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 32

<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option> </optgroup>
<optgroup label="Asie"> <option value="chine">Chine</option>
<option value="japon">Japon</option> </optgroup>
</select>

Sélectionner automatiquement un champ

<input type="text" name="prenom" id="prenom" autofocus />
Rendre un champ obligatoire
<input type="text" name="prenom" id="prenom" required />
Le bouton d'envoi
<input type="submit" value="Envoyer" />

II.14.8 Les zones de saisie enrichies

<input type="email" />

Un champ e‐mail mal renseigné est entouré de rouge dans Firefox

les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie d'e‐mail
<input type="url" />

Clavier de saisie d'URL sur iPhone

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 33

Téléphone
<input type="tel" />
Nombre
<input type="number" />
Un curseur
<input type="range" />
Couleur
<input type="color" />
Date
<input type="date" />
Recherche
<input type="search" />

Y. Zaz Faculté des Sciences de Tétouan Programmation Web

 34

Références

• http://fr.html.net/tutorials/css/
• http://www.elitwork.com/xhtml_tutoriel.html
• http://a-pellegrini.developpez.com/tutoriels/xhtml/
• http://xhtml.developpez.com/faq
• https://www.alsacreations.com/article/lire/1374-html5-structure-globale-document.html
• https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formul
aire_HTML

Y. Zaz Faculté des Sciences de Tétouan Programmation Web