ÉCOLE SUPÉRIEURE DE GESTION ET

D’ADMINISTRATION DES ENTREPRISES

Agrément définitif par Arrêté n°4677/MES/CAB du 05 Juillet 2017
Accréditée par le Conseil Africain et Malgache pour l’Enseignement Supérieur
(CAMES)
BP : 2339 – Brazzaville – CONGO
E-mail : esgae@esgae.org Site web : www.esgae.org

Département Licence

HTML, CSS & Bootstrap

Parcours
Licence 1 – Analyse et programmation

Enseignants
Equipe pédagogique
TITRE DE L’UE : TECHNOLOGIES WEB

UE9 Elément constitutif (EC) : HTML, CSS & Bootstrap

Volume horaire présentiel : 45 H

TPE estimé : 67,5H

Niveau : LP1-AP Crédits : 4,5

Semestre 2 Analyse et programmation Coefficient : 3

Cours : TD : TP :

15H 30H

Objectif général :
Cet enseignement vise à fournir à l’étudiant les notions fondamentales sur HTML, CSS et Bootstrap.

Objectifs spécifiques :
Au terme de cet enseignement, l’étudiant doit être capable :
• de comprendre la philosophie du HTML et ses bases ;
• de comprendre la philosophie du CSS et ses bases ;
• d’utiliser le Framework Bootstrap;
• de concevoir un site internet avec du HTML, CSS et Bootstrap.
Prérequis : Avoir les notions de l’internet, et de l’ordinateur

Méthodes pédagogiques : Cours magistral, petite révision en classe, exercices à faire à domicile, exposés à préparer,
recherche documentaire, lecture d’ouvrages et d’articles.

Evaluation :

 Sommative (DST et Examens)

 Formative en TD et du TPE (travail personnel de l’étudiant)

Contenu pédagogique :

CHAPITRE I : INTRODUCTION AU LANGAGE HTML

Section 1 : Présentation du langage HTML
Section 2 : Ecrire et interpréter du HTML
Section 3 : Composition d’une balise
Section 4 : Imbrication des balises HTML
CHAPITRE 2 : PREMIER CODE
Section 1 : Editeur de texte

0|Page
 Section 2 : Structure de base d’une page web
Section 3 : Création d’une première page web
Section 4 : Zoom sur l’entête
Section 5 : Langage de la page
CHAPITRE 3 : LA PARTIE BODY
Section 1 : Les titres
Section 2 : Les caractères spéciaux
Section 3 : Les commentaires
Section 4 : Les espaces
Section 5 : Les sauts de ligne
Section 6 : Le formatage
Section 7 : Séparateur horizontale
CHAPITRE 4 : LES LISTES
Section 1 : Les listes non ordonnées
Section 2 : Les listes ordonnées
Section 3 : Les listes imbriquées
Section 4 : Les listes. Application
CHAPITRE 5 : LES LIENS
Section 1 : Les liens internes
Section 2 : Les liens internes complexes
Section 3 : Les liens externes
CHAPITRE 6 : LES IMAGES
Section 1 : Insérer une image
Section 2 : Les différentes extensions
Section 3 : La taille des images
CHAPITRE 7 : LES TABLEAUX
Section 1 : Création d’un tableau
Section 2 : Fusion des lignes
Section 3 : Fusion de colonne
Section 4 : Entête et légende
Section 5 : Définir des zones
CHAPITRE 8 : LES FORMULAIRES
Section 1 : Les bases du formulaire HTML
Section 2 : Les autres types de champs input
Section 4 : Les cases à cocher
Section 5 : Le menu déroulant
Section 6 : Une valeur par défaut

1|Page
 Section 7 : Rendre un champ obligatoire
Section 8 : Etablir des zones
CHAPITRE 9 : LES BALISES SEMENTIQUES
Section 1 : Balise générique du type block
Section 2 : Balise générique de type inline
Section 3 : Balise HTML5
Section 4 : Introduction au langage CSS
Section 5 : Présentation du langage CSS
Section 6 : Ecriture du premier code CSS
Section 7 : Ou placer le CSS
CHAPITRE 10 : Les sélecteurs de base
Section 1 et 2 : Les sélecteurs id et class
Section 3 : La hiérarchie en CSS
Section 4 : Cibler un élément enfant
Section 5 : La pseudo classe hover
Section 6 : Premier et dernier enfant
Section 7 : La pseudo classe nth-child
Section 8 : Paire et impaire
CHAPITRE 11 : MANIPULATION DES BOITES HTML
Section 1 : Modifier la largeur des boites
Section 2 : Modifier la hauteur des boites
Section 3 : Modifier les marges externes des boites
Section 4 : Modifier les marges internes des boites
Section 5 : Modifier l’alignement interne des boites
Section 6 : Modifier les bordures des boites
CHAPITRE 12 : MANIPULATION DE LA FENETRE DU NAVIGATEUR
Section 1 : Changer la couleur de fond
Section 2 : Modifier les marges
Section 3 : Insérer une image de fond
Section 4 : Modifier la police
CHAPITRE 13 : LES MEDIAS
Section 1 : L’image
Section 2 : L’audio
Section 3 : La vidéo
Section 4 : La balise FIGURE
CHAPITRE 14 : MANIPULATION DES COULEURS AVEC CSS
Section 1 : Les couleurs en hexadécimal

2|Page
 Section 2 : Les couleurs en RGB
CHAPITRE 15 : VUE D’ENSEMBLE DE BOOTSTRAP
Section 1 : Présentation du framework Bootstrap
Section 2 : Pourquoi Bootstrap ?
Section 3 : Bootstrap et le responsive design
CHAPITRE 16 : INCLURE BOOTSTRAP DANS UN PROJET
Section 1 : Architecture Bootstrap
Section 2 : Les templates de base
Section 3 : Doctype HTML5
Section 4 : Le système de grille pour positionnement
Section 5 : Grille fixe
Section 6 : Grille élastique
CHAPITRE 17 : LES CLASSES CSS DE BASE AVEC BOOTSTRAP
Section 1 : Les tableaux
Section 2 : Les formulaires
Section 3 : Les boutons
Section 4 : Les images
Section 5 : les icones
CHAPITRE 18 : LES COMPOSANTS BOOTSTRAP
Section 1 : Menu déroulant
Section 2 : groupement de boutons
Section 3 : Barre de navigation
Section 4 : Fil d’ariane
Section 5 : Alertes
Section 6 : Barre de progression
Section 7 : Pagination
Section 8 : Barres de progression
CHAPITRE 19 : ETUDE DE CAS (PROJET HTML , CSS, BOOTSTRAP) : Mise en place d’un site web.

Bibliographie :

 Elisabeth CASTRO, 2006, Le programmeur HTML avec XHTML et CSS, Campus Press;
 Fabrice LEMAINQUE, 2007, HTML, XHTML-CSS-SCRIPTS Edition 2, Micro Application ;
 Mathieu NEBRA, 2006, Accès libre. Reussir son site web avec XHTML et CSS Edition 3, Eyrolles.

3|Page
Sommaire
CHAPITRE I : INTRODUCTION AU LANGAGE HTML ......................................................................... 8
Section 1 : Présentation du langage HTML ......................................................................................... 8
Section 2 : Ecrire et interpréter du HTML ........................................................................................... 8
Section 3 : Composition d’une balise .................................................................................................. 9
Section 4 : Imbrication des balises HTML.......................................................................................... 10
CHAPITRE 2 : PREMIER CODE ...................................................................................................... 11
Section 1 : Editeur de texte ............................................................................................................... 11
Section 2 : Structure de base d’une page web.................................................................................. 11
Section 3 : Création d’une première page web................................................................................. 12
Section 4 : Zoom sur l’entête ............................................................................................................ 13
Section 5 : Langage de la page .......................................................................................................... 14
CHAPITRE 3 : LA PARTIE BODY..................................................................................................... 15
Section 1 : Les titres .......................................................................................................................... 15
Section 2 : Les caractères spéciaux ................................................................................................... 15
Section 3 : Les commentaires............................................................................................................ 16
Section 4 : Les espaces ...................................................................................................................... 17
Section 5 : Les sauts de ligne............................................................................................................. 17
Section 6 : Le formatage.................................................................................................................... 18
Section 7 : Séparateur horizontale.................................................................................................... 18
CHAPITRE 4 : LES LISTES .............................................................................................................. 19
Section 1 : Les listes non ordonnées ................................................................................................. 19
Section 2 : Les listes ordonnées ........................................................................................................ 19
Section 3 : Les listes imbriquées........................................................................................................ 21
Section 4 : Les listes. Application ...................................................................................................... 22
CHAPITRE 5 : LES LIENS ............................................................................................................... 23
Section 1 : Les liens internes ............................................................................................................. 23
Section 2 : Les liens internes complexes ........................................................................................... 23
Section 3 : Les liens externes............................................................................................................. 24
CHAPITRE 6 : LES IMAGES ........................................................................................................... 27
Section 1 : Insérer une image............................................................................................................ 27
Section 2 : Les différentes extensions ............................................................................................... 27
Section 3 : La taille des images.......................................................................................................... 28
CHAPITRE 7 : LES TABLEAUX........................................................................................................ 29
Section 1 : Création d’un tableau ...................................................................................................... 29
Section 2 : Fusion des lignes.............................................................................................................. 30

4|Page
 Section 3 : Fusion de colonne............................................................................................................ 31
Section 4 : Entête et légende ............................................................................................................ 31
Section 5 : Définir des zones ............................................................................................................. 32
CHAPITRE 8 : LES FORMULAIRES ................................................................................................. 34
Section 1 : Les bases du formulaire HTML ........................................................................................ 34
Section 2 : Les autres types de champs input ................................................................................... 34
Section 4 : Les cases à cocher............................................................................................................ 38
Section 5 : Le menu déroulant .......................................................................................................... 39
Section 6 : Une valeur par défaut...................................................................................................... 39
Section 7 : Rendre un champ obligatoire .......................................................................................... 40
Section 8 : Etablir des zones.............................................................................................................. 40
CHAPITRE 9 : LES BALISES SEMENTIQUES..................................................................................... 41
Section 1 : Balise générique du type block........................................................................................ 41
Section 2 : Balise générique de type inline ....................................................................................... 41
Section 3 : Balise HTML5 ................................................................................................................... 41
Section 4 : Introduction au langage CSS............................................................................................ 41
Section 5 : Présentation du langage CSS ........................................................................................... 41
Section 6 : Ecriture du premier code CSS .......................................................................................... 42
Section 7 : Ou placer le CSS ............................................................................................................... 42
CHAPITRE 10 : Les sélecteurs de base .......................................................................................... 44
Section 1 et 2 : Les sélecteurs id et class........................................................................................... 44
Section 3 : La hiérarchie en CSS......................................................................................................... 46
Section 4 : Cibler un élément enfant................................................................................................. 46
Section 5 : La pseudo classe hover.................................................................................................... 48
Section 6 : Premier et dernier enfant................................................................................................ 49
Section 7 : La pseudo classe nth-child............................................................................................... 50
Section 8 : Paire et impaire ............................................................................................................... 51
CHAPITRE 11 : MANIPULATION DES BOITES HTML ....................................................................... 52
Section 1 : Modifier la largeur des boites ......................................................................................... 52
Section 2 : Modifier la hauteur des boites ........................................................................................ 53
Section 3 : Modifier les marges externes des boites......................................................................... 54
Section 4 : Modifier les marges internes des boites ......................................................................... 55
Section 5 : Modifier l’alignement interne des boites........................................................................ 56
Section 6 : Modifier les bordures des boites..................................................................................... 57
CHAPITRE 12 : MANIPULATION DE LA FENETRE DU NAVIGATEUR................................................. 59
Section 1 : Changer la couleur de fond ............................................................................................. 59

5|Page
 Section 2 : Modifier les marges ......................................................................................................... 59
Section 3 : Insérer une image de fond .............................................................................................. 59
Section 4 : Modifier la police............................................................................................................. 60
CHAPITRE 13 : LES MEDIAS ......................................................................................................... 62
Section 1 : L’image............................................................................................................................. 62
Section 2 : L’audio ............................................................................................................................. 62
Section 3 : La vidéo............................................................................................................................ 63
Section 4 : La balise FIGURE .............................................................................................................. 64
CHAPITRE 14 : MANIPULATION DES COULEURS AVEC CSS ............................................................ 65
Section 1 : Les couleurs en hexadécimal........................................................................................... 65
Section 2 : Les couleurs en RGB ........................................................................................................ 65
CHAPITRE 15 : VUE D’ENSEMBLE DE BOOTSTRAP......................................................................... 67
Section 1 : Présentation du framework Bootstrap............................................................................ 67
Section 2 : Pourquoi Bootstrap ?....................................................................................................... 67
Section 3 : Bootstrap et le responsive design ................................................................................... 67
CHAPITRE 16 : INCLURE BOOTSTRAP DANS UN PROJET................................................................ 69
Section 1 : Architecture Bootstrap .................................................................................................... 69
Section 2 : Les templates de base ..................................................................................................... 72
Section 3 : Doctype HTML5 ............................................................................................................... 76
Section 4 : Le système de grille pour positionnement ...................................................................... 77
Section 5 : Grille fixe.......................................................................................................................... 79
Section 6 : Grille élastique................................................................................................................. 82
CHAPITRE 17 : LES CLASSES CSS DE BASE AVEC BOOTSTRAP......................................................... 83
Section 1 : Les tableaux ..................................................................................................................... 83
Section 2 : Les formulaires ................................................................................................................ 84
Section 3 : Les boutons...................................................................................................................... 87
Section 4 : Les images........................................................................................................................ 88
Section 5 : les icones ......................................................................................................................... 88
CHAPITRE 18 : LES COMPOSANTS BOOTSTRAP ............................................................................ 90
Section 1 : Menu déroulant............................................................................................................... 90
Section 2 : groupement de boutons.................................................................................................. 90
Section 3 : Barre de navigation ......................................................................................................... 91
Section 4 : Fil d’ariane ....................................................................................................................... 91
Section 5 : Alertes.............................................................................................................................. 92
Section 6 : Barre de progression ....................................................................................................... 93
Section 7 : Pagination........................................................................................................................ 93

6|Page
 Section 8 : Barres de progression...................................................................................................... 94
CHAPITRE 19 : ETUDE DE CAS (PROJET HTML , CSS, BOOTSTRAP) : Mise en place d’un site web. ... 95
Bibliographie.............................................................................................................................. 96

7|Page
CHAPITRE I : INTRODUCTION AU LANGAGE HTML
Section 1 : Présentation du langage HTML
HTML est l'acronyme de HyperText Markup Language, ce qui signifie "langage de balisage pour
l'hypertexte". Un document hypertexte est un document structuré comprenant des hyperliens qui
mènent vers d'autres documents quand on clique dessus.

Il s'agit de langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés
sur ces langages, ils sont incontournables et universels aujourd'hui. Ils sont à la base même du Web.
Le langage HTML a été inventé le premier par un certain Tim Berners-Lee en 1991.

Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce que vous
souhaitez que la page affiche : du texte, des liens, des images... Vous direz par exemple : "Ceci est mon
titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc.

Les sites web sur lesquels vous naviguez quotidiennement ne sont ni plus ni moins des pages HTML
liées entre elles. Les balises qui les constituent sont invisibles pour le visiteur que vous étiez jusqu'à
aujourd'hui mais, pour le programmeur que vous serez demain, elles permettent d'insérer des liens,
des images, des tableaux ou encore des formulaires.

Un document HTML serait bien triste sans couleurs, sans effets de style et sans forme. Un autre
langage, le CSS (Cascading Style Sheet ou "feuilles de style en cascade" en français), va nous permettre
de l'égayer et de le mettre en forme.

Section 2 : Ecrire et interpréter du HTML

HTML n'est pas le seul langage de balisage, commencez toujours par annoncer la couleur dès la 1ère
ligne : la balise <!DOCTYPE html> indique au navigateur quel langage il doit interpréter pour rendre
correctement la page web (le HTML). A la ligne suivante, <html> annonce le début du document HTML,
et enfin à la dernière ligne, finissez toujours par </html> pour sonner la fin.

Pour consulter votre site web vous avez besoin de lancer un programme appelé Navigateur web en
cliquant sur l’une de ses icônes :

8|Page
C’est donc ce programme appelé navigateur web qui interprète votre code écrit en HTML afin d’avoir
un rendu sur votre écran. Avec le navigateur, vous pouvez consulter n'importe quel site web. Voici par
exemple un navigateur affichant le célèbre site du moteur de recherche Google :

Section 3 : Composition d’une balise

Les balises HTML correspondent à des éléments du code HTML d'une page web sur Internet. Les pages
HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs,
mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.

Vous avez déjà appris 2 balises : <!doctype html>, <html>. La première (doctype) est un peu atypique
avec son point d'exclamation et ses 2 mots à l'intérieur. Ne nous laissons pas perturber par cette
exception. La plupart des balises ressemblent aux 2 autres : un nom entouré de <> .

Toutes les balises qui servent à encadrer un contenu ont une jumelle qui commence avec le
caractère / pour désigner la balise fermante. Ainsi, <html> est appelée la balise ouvrante et </html> la
balise fermante. N'oubliez jamais de refermer une balise sinon votre navigateur ne saura pas où
s'arrête le bloc que vous souhaitez délimiter.

On distingue deux types de balises : les balises en paires et les balises orphelines ou auto-fermante

 Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent

 Les balises orphelines

9|Page
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple
une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à
l'ordinateur "Insère une image ici".

Les balises sont constituées parfois des 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 :

Section 4 : Imbrication des balises HTML

La façon la plus simple de comprendre l'imbrication est de considérer les balises HTML comme des
parenthèses contenant votre contenu. Votre contenu peut inclure du texte, des images et des médias
associés. Les balises HTML sont les cases autour du contenu. Parfois, vous devez placer des boîtes à
l'intérieur d'autres boîtes. Ces boîtes "intérieures" sont imbriquées à l'intérieur des autres.

Exemple d’imbrication de balise :

<balise1><balise2></balise2></balise1>

<html><body></body></html>

10 | P a g e
CHAPITRE 2 : PREMIER CODE
Section 1 : Editeur de texte
Un éditeur de texte est un logiciel destiné à la création et l'édition de fichiers textes. Nous allons créer
notre site web dans un éditeur de texte, il existe plusieurs éditeurs de textes parmi lesquels : bloc note,
notepad++, sublime text,…..

Dans notre cours nous allons utilisés le logiciel NotePad++ qui se présente comme suit :

Section 2 : Structure de base d’une page web

Un fichier HTML est constitué de 2 parties placées l'une en-dessous de l'autre :

 Une tête (head) contenant des informations non visibles dans la fenêtre mais utiles pour
décrire le document comme le titre.

11 | P a g e
  Un corps (body) accueillant le contenu visible de la page (textes, images, liens, vidéos, etc.)

 <!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. Cette balise indique la version HTML
que vous utilisez.

 <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
 L'en-tête <head> : cette section donne quelques informations générales sur la page, comme
son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est
généralement assez courte. Les informations que l'en-tête contient ne sont pas affichées sur
la page, ce sont simplement des informations générales à destination de l'ordinateur.
 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.
 <meta charset="utf-8" /> : Cette balise indique l'encodage utilisé dans votre fichier .html. C'est
lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes
chinois et japonais, symboles arabes, etc.)
 <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é que le titre soit 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).
Enregistrez votre page web et ouvrez-la dans votre navigateur.

Section 3 : Création d’une première page web

Après avoir écrit l’intégralité de la structure de base d’une page HTML sur votre éditeur de texte
(NotePad++), enregistrons ce fichier. Pour cela, comme dans tous les programmes, vous avez un menu
Fichier / Enregistrer. Une boîte de dialogue vous demande où enregistrer le fichier et sous quel nom.
Enregistrez-le où vous voulez. Donnez au fichier le nom que vous voulez, en terminant par .html, par
exemple : page.html.

12 | P a g e
Section 4 : Zoom sur l’entête
Maintenant que vous avez coulé les fondations (<html></html>), il vous faut monter les murs et la
charpente. La balise <body> (corps en anglais) fera office de murs pour accueillir votre contenu et la
balise <head> (tête) viendra chapeauter l'ensemble.

13 | P a g e
Dans le monde virtuel, on commence par le toit : <head></head> viendra avant <body></body> car
l'en-tête contient des informations sur la page qu'il est préférable de communiquer en premier au
navigateur (comme son titre et l’encodage par exemple).

Il ne faut pas les imbriquer mais les accoler (la seconde vient en-dessous de la première). En revanche
les deux sont bien imbriquées dans <html></html>. Dans la suite nous verrons qu’il sera possible
d’intégrer du code CSS dans l’entête de notre page HTML.

Section 5 : Langage de la page

Utilisez toujours un attribut de langue sur l’élément html. Il sera hérité par tous les autres éléments,
et ainsi il fixera la langue par défaut de tout le texte contenu dans l’élément head du document.

Notez bien que vous devriez utiliser l’élément html plutôt que l’élément body, puisque
l’élément body ne couvre pas le texte contenu par l’élément head du document.

Dans certaines parties de votre code vous pouvez avoir un problème : si un texte multilingue est
présent dans l’élément title, vous ne pourrez pas indiquer que des parties de ce texte sont dans
différentes langues parce que l’attribut title ne permet que des caractères, pas de balisage. Il en va de
même pour les langues multiples dans les valeurs d’attributs. Il n’existe pas de bonne solution pour le
moment.

Si votre document est en HTML (c’est à dire qu’il est servi en tant que text/html), utilisez
l’attribut lang pour fixer la langue du document ou d’un segment de texte. Par exemple, le code suivant
fixe la langue par défaut à français :
<html lang="fr">

14 | P a g e
CHAPITRE 3 : LA PARTIE BODY
Section 1 : Les titres
Avec les quelques balises que vous venez d'apprendre, vous pouvez désormais créer une page web,
certes basique, mais le principe est acquis. Vous savez :

1. Structurer un document HTML avec les balises <html> , <head> et <body>

2. Décrire votre document avec la balise <title> imbriquée dans le <head>
3. Mettre un texte en forme à l'aide de paragraphes avec la balise <p>

Pour que votre texte ne soit pas un pavé imbuvable, il faut le hiérarchiser. Cela commence par lui
donner un titre. On a le droit d'utiliser six niveaux de titres différents. La balise <h1> vous permet
d'encadrer le titre le plus important, ensuite nous avons :

 <h2> </h2> : signifie "titre important".

 <h3> </h3> : pareil, c'est un titre un peu moins <h4> </h4> : titre encore moins important.
 <h5> </h5> : titre pas important.
 <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

NB : ne confondez pas avec la balise <title>. La balise <title> affiche le titre de la page dans la barre de
titre du navigateur comme nous l'avons vu. Les titres <hn> servent à créer des titres qui seront affichés
dans la page web.

EXERCICE :

1. Créer une page HTML en respectant la structure de base d’une page HTML en
le nommant index.html
2. Dans la section body de la page, ajouter un paragraphe en utilisant la balise
<p>Bienvenu sur notre site</p>
3. Créez une balise ouvrante <h1>, rédiger votre titre, fermez avec la balise fermante </h1>
4. Ajoutez les titres <h2> jusqu’à <h6> avec votre contenu

Section 2 : Les caractères spéciaux

En HTML, tous les caractères spéciaux peuvent être remplacés par un code commençant
par & (esperluète ou « et commercial ») et terminant par ; (point virgule). En voici une liste non
exhaustive :
Code Résultat dans le navigateur
&nbsp; [Espace insécable]
&quot; "
&lt; <
&gt; >
&laquo; «
&raquo; »
&amp; &
&euro; €
&yen; ¥
&copy; ©
&reg; ®

15 | P a g e
Les caractères accentués ou encore les lettres avec cédilles sont également des caractères spéciaux.
Chacun a donc sa représentation en HTML. En voici quelques exemples :
Code Résultat dans le navigateur
&agrave; à
&acirc; â
&eacute; é
&egrave; è
&ecirc; ê
&icirc; î
&iuml; ï
&oelig; œ
&ugrave; ù
&ucirc; û
&ccedil; ç

Ces caractères peuvent également être utilisés en majuscule :

Code Résultat dans le navigateur
&Agrave; À
&Acirc; Â
&Eacute; É
&Egrave; È
&Ecirc; Ê
&Icirc; Î
&Iuml; Ï
&OElig; Œ
&Ugrave; Ù
&Ucirc; Û
&Ccedil; Ç

L'UTF-8 est aujourd'hui compris par tous les navigateurs courants. Il permet d'encoder un nombre
quasi illimité de caractères (plus de 4 milliards ).

En utilisant l'UTF-8 dans nos pages, on s'affranchit de la conversion des caractères spéciaux en code
HTML. Un "e" avec accent aigu pourra donc être écrit directement "é" et non "&eacute;" dans notre
code source.

Pour écrire nos pages en UTF-8, il faut d'abord préciser lors de leur enregistrement l'encodage
souhaité. Généralement, en choisissant "enregistrer sous" dans votre éditeur de texte, vous pouvez
sélectionner l'encodage. Choisissez alors "UTF-8"

Dans votre page HTML Il vous faudra, si ce n'est pas déjà le cas, préciser dans l'entête de votre page
l'encodage choisi grâce à une balise Meta :

<meta content="text/html; charset=UTF-8" />

Section 3 : Les commentaires

Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas
lu par l'ordinateur, ça ne change rien à l'affichage de la page. Nous avons le droit d'annoter notre code,
pour mieux le comprendre ou garder des informations en mémoire, sans que ces notes soient affichées
par le navigateur.

16 | P a g e
Les commentaires commencent par <!-- et se terminent par -->.

EXERCICE :

1. Dans le fichier précédemment créer index.html, mettez les titres <h3> et <h6> en
commentaire.

Section 4 : Les espaces

Vous pouvez ajouter autant d’espaces que vous le voulez au sein d’un paragraphe ou d’un titre en
utilisant juste la touche espace de votre clavier.

Section 5 : Les sauts de ligne

Vous pouvez ajouter autant de retours à la ligne dans votre code, ceux-ci ne seront jamais affichés
visuellement dans votre navigateur. Essayez ceci :

On remarque tout est sur la même ligne alors qu’on est allé à la ligne dans notre code. Il existe une
pour effectuer les sauts de ligne, c’est une balise orpheline qui sert juste à indiquer qu'on doit aller à
la ligne <br/>. Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.

17 | P a g e
On remarque la balise <p> est utilisée pour organiser le texte en paragraphe tandis que la balise <br/>
effectuer les sauts de ligne.

Section 6 : Le formatage
Section 7 : Séparateur horizontale

18 | P a g e
CHAPITRE 4 : LES LISTES
Les listes à puces nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations. Nous allons découvrir ici deux types de listes à puces : les listes non ordonnées et les
listes ordonnées.

Section 1 : Les listes non ordonnées

C'est un système qui nous permet de faire une liste d'éléments, sans notion d'ordre. Créer une liste à
puces non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin
avec un </ul>, et on va écrire chacun des éléments de la liste entre deux balises <li></li>. Toutes ces
balises doivent se trouver entre <ul> et </ul>.

Remarque :

1. En premier, on ouvre la liste non ordonnée avec la balise <ul> ("unordered list").
2. Puis on ajoute chaque élément entre les balises <li> comme pour les listes ordonnées.
3. En dernier lieu, pour annoncer la fin, on ferme la balise </ul>.

EXERCICE :

1. Dans le <body>, créez un titre de niveau <h1> avec le texte "Mes idées à réaliser un jour".
2. En-dessous de ce titre, ajoutez un paragraphe avec <p> en guide d'introduction à votre liste.
3. Enfin, avec la balise <ul>, créez une liste non ordonnée énumérant les projets qui vous tiennent
à cœur, chacun devant être écrit entre des balises <li> et </li>.

Section 2 : Les listes ordonnées

Allons plus loin maintenant en créant des listes ordonnées c'est-à-dire des listes numérotées, comme
ci-dessous :

19 | P a g e
 1. La liste ordonnée commence avec la balise ouvrante <ol> ("ordered list").
2. On ouvre une balise <li>, puis on écrit le texte du premier élément de la liste et enfin on ferme
avec </li>.
3. On fait la même chose qu'à la ligne 9 pour le deuxième, le troisième et le dernier élément de
la liste.
4. On termine la liste ordonnée la balise fermante </ol>.

Notez qu'on écrit un élément par ligne avec <li> et </li> et que ces 4 éléments de liste sont imbriqués
dans la balise <ol></ol>.

Exemple :

20 | P a g e
 EXERCICE :

1. Dans le <body>, ajoutez un titre de niveau <h3> avec le texte : "Mes fruits préférés".
2. Créez avec <ol> une liste ordonnée du top cinq des fruits que vous aimez le plus.
Rappelez-vous : on place les éléments entre des balises <li>.
3. N'oubliez pas de fermer la liste ordonnée avec la balise </ol>.
4. En-dessous de cette liste, créez un titre de niveau <h2> qui s'appelle "3 choses à faire
en priorité".
5. Enfin, créez une troisième liste de choses à faire.

Section 3 : Les listes imbriquées

Vous savez maintenant créer des listes ordonnées et non ordonnées.

Compliquons un peu les choses : imaginez une liste ordonnée dont chaque point contient lui-même
une liste non ordonnée imbriquée à l'intérieur, Une liste de listes en sorte.

Rappelez-vous : vous avez déjà imbriqué des balises : la dernière balise ouverte est la première
fermée. Voici un exemple :

<ul><li> un seul élément ! </li></ul>

En voici un exemple de liste imbriquée

21 | P a g e
 EXERCICE :

1. Dans le body de votre page HTML créez une liste non ordonnée.
2. Votre liste non ordonnée doit contenir deux éléments : "Couleurs du drapeau français" et
"Couleurs du drapeau Congolais".
3. Sous chaque point de cette liste, créez une liste ordonnée cette fois pour énumérer les
couleurs de chaque drapeau. Utilisez le modèle de listes imbriquées proposé au-dessus pour
vous inspirer.

Section 4 : Les listes. Application

EXERCICE :

1. Dans le body de votre page HTML créez une liste non ordonnée.
2. Votre liste non ordonnée doit contenir deux éléments : "chapitre I" et "chapitre II".
3. Sous chaque point de cette liste, créez une liste ordonnée cette fois pour énumérer les sous
chapitre de I et II.
4. Utilisez le modèle de listes imbriquées proposé au-dessus pour vous inspirer.

22 | P a g e
CHAPITRE 5 : LES LIENS
Une page web serait sans grand intérêt si elle ne contenait pas de liens vers le reste du monde.
Les hyperliens relient les pages entre elles et constituent ainsi une gigantesque toile d'araignée :
le World Wide Web.

C'est la balise <a> qui transforme un texte en lien. Mais encore faut-il lui indiquer la destination Pour
cela, cette balise admet un attribut appelé href.

Section 1 : Les liens internes

Un site web est composé de plusieurs pages. Les liens internes sont utilisés pour créer les liens entre
différentes pages de votre site.

Dans le cas où nous avons deux pages HTML enregistrées à un même emplacement c’est-à-dire dans
un même dossier, il suffit d'écrire simplement le nom du fichier vers lequel on veut amener.

Exemple :

Considérons deux pages, page.html et page2.html enregistrées dans un même dossier.

Voici le code utilisé dans ces pages :

Page.html :

Page2.html :

La page 2 affichera simplement le message Bienvenue sur la page 2 de mon site.

Section 2 : Les liens internes complexes

Les choses se corsent un petit peu si les pages sont situées dans des dossiers différents. Supposons
que la page2.html se situes dans un sous dossier appelé Page. Dans ce cas il va falloir effecteur un lien
en précisant le chemin dans l’attribut href de la balise ouvrante <a>, comme ceci :
<a href="page/page2.html">

23 | P a g e
Au cas où il a un sous-dossier dans le dossier page, on écrirait :
<a href="page/autredossier/page2.html">

Si votre fichier cible est placé dans un dossier qui se trouve "avant" dans l’arborescence, il faut écrire
deux points comme ceci :
<a href="../page2.html">

Voici un schéma synoptique qui explique la notion de lien d’une page à une autre.

Exercice :

1. Créer un dossier page et un sous-dossier mesPage

2. Créer trois pages nommées page1 enregistré à la racine, page2 enregistrée dans le dossier
page et une page3 enregistrée dans le sous dossier mesPages
3. A l’aide de la balise <a>, créer un lien entre page1 et page2, ensuite entre page1 et page3.
4. Créer ensuite un lien de retour entre page2 et page1, ensuite entre page3 et page1

Section 3 : Les liens externes

Les liens externes sont des liens vers un autre site web. Pour faire ce genre lien on a toujours besoin
de la balise <a> avec son attribut href dans la balise ouvrante.

Exemple :

24 | P a g e
<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.google.com">de Google</a> <br />
C'est un puissant moteur de recherche<p>

Section 4 : Les liens ancres

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos grosses pages HTML.
En effet, si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la même
page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

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. Par exemple :
<h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse
(#) suivi du nom de l'ancre.

Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>

Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition
que la page comporte suffisamment de texte pour que les barres de défilement se déplacent
automatiquement).
voici un exemple :

Section 5 : Autres type de lien

Il existe d’autres types de liens parmi lesquels :

 Les liens qui affichent une infobulle au survol

 Les liens qui ouvrent une nouvelle fenêtre
 Les liens pour télécharger un fichier

Un lien qui affiche une infobulle

25 | P a g e
Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut
est facultatif. La syntaxe est la suivante :

Un lien qui ouvre une fenêtre

Il est possible de "forcer" l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera
l’attribut target="_blank" à la balise <a> :

Un lien pour télécharger un fichier

Pour télécharger un fichier, il faut faire exactement comme si vous faisiez un lien vers une page web,
mais en indiquant cette fois le nom du fichier à télécharger.

Par exemple, supposez que vous vouliez 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 :

26 | P a g e
CHAPITRE 6 : LES IMAGES
Une page web avec des liens c'est bien, mais une page avec des images c'est encore mieux !

Section 1 : Insérer une image

C'est la balise <img> qui permet d'insérer une image : mais encore faut-il lui indiquer quelle image.
Pour cela cette balise admet un attribut appelé src.

De la même façon que l'attribut href contient l'adresse de la page cible du lien dans une balise <a>, la
valeur donnée à l'attribut src permet de déterminer la source de l'image. On l'écrit selon ce principe :

<img src = " " />

Remarquez qu'il n'y a pas besoin de balise jumelle pour la fermer car la balise <img> ne sert pas à
encadrer une portion de texte mais représente un objet. C'est pour cette raison qu'on l'appelle auto-
fermante (ou orpheline) et qu'elle se termine par />.

Section 2 : Les différentes extensions

Il est possible d’enregistrer une image dans plusieurs formats ou extensions différents. Le poids (en
Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi, et la qualité de l'image va
changer.

Voici les différents formats que l’on utilise sur le web :

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 pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de
couleurs différentes. Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg.

Ce qui veut dire que l’insertion d’une image dans une page se fera en précisant le format de l’image,
la syntaxe est la suivante :

2. Le PNG

Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart
des graphiques. Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la
qualité de l'image.

Le PNG a été inventé pour concurrencer un autre format, le GIF. Depuis, le PNG a bien évolué et c'est
devenu le format le plus puissant pour enregistrer la plupart des images.

27 | P a g e
 3. Le GIF

C'est un format assez vieux, qui a été néanmoins très utilisé. Aujourd'hui, le PNG est globalement bien
meilleur que le GIF : les images sont le plus souvent plus légères et la transparence est de meilleure
qualité. Je vous recommande donc d'utiliser le PNG autant que possible.

Section 3 : La taille des images

On utilise généralement deux propriétés pour la taille des images. Le width et height pour définir la
taille intrinsèque de l'image, ce qui lui permet d'occuper de l'espace avant son chargement, afin
d'atténuer les décalages de présentation du contenu.

28 | P a g e
CHAPITRE 7 : LES TABLEAUX
Les paragraphes et les listes c'est super, mais parfois il est utile d'organiser une page web de manière
un peu plus compliquée. Pour cela, entrons dans le monde des tables (tableaux en français).

Section 1 : Création d’un tableau

Les tableaux servent à présenter des données sous la forme de lignes et de colonnes. On se sert de la
balise <table></table>.

Comme un tableau est une structure assez complexe, une seule balise ne suffit pas. Pour faire une
liste, il vous a bien fallu deux balises (<ul> ou <ol> et <li>). Et bien pour un tableau, il vous en faudra
encore plus mais la balise principale qui délimite votre structure est <table>.

Commençons donc par définir l'enceinte de votre tableau.

Quand on dessine un tableau, on fait une sorte de quadrillage et on a le choix de commencer par tracer
les lignes verticales (pour former des colonnes) ou plutôt les lignes horizontales (pour former
les lignes). Le croisement des deux aboutit à la formation de cases qu'on appellera "cellules"

En HTML, on n'a pas vraiment le choix : on commence par créer les lignes. C'est un peu la même logique
que l'écriture occidentale : de gauche à droite et de haut en bas.

On utilise la balise <tr> (table row signifie "ligne de tableau") pour créer une ligne dans un tableau.
Nous verrons par la suite comment créer les colonnes : cela consiste à subdiviser notre ligne en
plusieurs cellules.

Avec une feuille et un crayon, vous n'auriez qu'à tirer un trait vertical pour séparer votre ligne en deux
colonnes et ainsi créer deux cellules (au lieu d'une avant). Mais en HTML, on ne procède pas ainsi, on
crée une cellule de données avec la balise <td> (table data signifie "donnée de tableau" en anglais)
dans la première ligne du tableau. Nous avons ainsi créé une première colonne (en réalité, il n'y en
avait pas avant). Ainsi pour mieux faire apparaitre les cellules du tableau attribué une bordure de 1
pixel à la cellule avec l'attribut border). En voici un exemple :

29 | P a g e
 Exercice :

1. Créer une page HTML en respectant l’arborescence de la page.

2. Vous allez créer votre tableau contenant la liste des étudiants d’une classe avec comme données
le nom, le prénom, l’adresse et la date de naissance.
3. Remplir le tableau en respectant ses données.

Section 2 : Fusion des lignes

Pour effectuer une fusion, il faut rajouter un attribut à la balise <td>. Il faut savoir qu'il existe 2 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.

Par exemple <td colspan="2"> signifie : "Cette cellule est la fusion de 2 cellules". Il est possible de
fusionner plus de cellules à la fois (3, 4, 5... tant que vous voulez).

En voici un exemple de tableau dont une ligne est fusionnée :

30 | P a g e
Section 3 : Fusion de colonne
Dans le cas de fusion de colonne on utilise l’attribut colspan dans la balise ouvrante <td>

Section 4 : Entête et légende

Un tableau est un peu un document en soi et à ce titre, il a, comme une page web, un en-tête et un
corps : la balise <thead> ("table header" en anglais ) et <tbody>("table body" en anglais) peuvent être
insérées à l'intérieur de la balise <table> pour délimiter ces deux parties.

Comme <head> et <body> pour votre page HTML, <thead> et <tbody> contiennent respectivement
des informations sur le tableau et des données à l'intérieur du tableau.

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur
le contenu du tableau. Pour insérer le titre d’un tableau on utilise la balise <caption>. En voici un
exemple :

31 | P a g e
Section 5 : Définir des zones
Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties. Pour cela, il
existe des balises HTML qui permettent de définir les 3 "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>

Généralement, si c'est un long tableau, vous y recopiez les cellules d'en-tête. Ça permet de
voir même en bas du tableau à quoi se rapporte chacune des colonnes.

32 | P a g e
33 | P a g e
CHAPITRE 8 : LES FORMULAIRES
Les formulaires HTML permettent de demander à l’utilisateur de saisir des données, par exemple dans
le cas d’un formulaire d’inscription, de connexion à un site, ou encore d’un moteur de recherche.

Section 1 : Les bases du formulaire HTML

Un formulaire doit obligatoirement contenir une balise <form> qui vient encadrer l’ensemble du
formulaire. Nous verrons plus tard quels attributs elle prend, et leur utilité.

Le <label> est l’étiquette du champ, il permet d’indiquer à l’utilisateur quelle information est attendue
dans le champ correspondant.

Le<fieldset> permet de créer des regroupements de champs, afin de séparer les informations
visuellement.

La balise ouvrante <form> contient deux attributs très important qu’on utilisera du côté backend, il
s’agit :

 method : cet attribut indique par quel moyen les données vont être envoyées. Il existe 2
moyens 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://...), mais ce détail ne nous intéresse pas vraiment pour le
moment. La plupart du temps, je vous recommande d'utiliser l'autre méthode : "post".
 method="post" : c'est la méthode la plus utilisée pour les formulaires car on peut envoyer
un grand nombre d'informations grâce à elle. 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. Cette page
se chargera de vous envoyer un e-mail avec le message si c'est ce que vous voulez, ou bien
d'enregistrer le message avec tous les autres dans une base de données. Cela ne peut pas se
faire en HTML et CSS, on utilisera en général un autre langage dont vous avez peut-être
entendu parler : PHP.

Section 2 : Les autres types de champs input

Nous allons passer en revue les différentes balises HTML permettant de rentrer du texte dans un
formulaire. Il faut savoir qu'il y a 2 zones de texte différentes :

34 | P a g e
  La zone de texte monoligne : comme son nom l'indique, on ne peut écrire qu'une seule ligne à
l'intérieur. Elle sert à rentrer des textes courts, comme par exemple : "Entrez votre pseudo".
 La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de
texte sur plusieurs lignes, comme par exemple : "Rédigez une dissertation sur l'utilité du HTML
dans le développement des pays d'Asie du Sud-Est"

La balise <input /> (auto-fermante) indique qu’il s’agit d’un champ de saisie. Il peut être de type :

 text : l’utilisateur pourra donc saisir des caractères alphanumériques

 checkbox : case à cocher
 radio : si plusieurs boutons radio sont liés, alors seul l’un d’entre eux sera sélectionna
le. Si on en sélectionne un, puis un autre, le premier sera désélectionné automatiquement.
 password : attend des caractères alphanumériques, mais va les masquer pour l'utilisateur.
Attention, ce contenu n'est pas crypté pour autant.

Mais également de type (nous verrons en détails plus tard) :

 hidden : permet d’insérer un champ caché dans le formulaire

 number : l'utilisateur pourra saisir un nombre seulement. Attention, il n’est reconnu que par
les navigateurs récents, sur les autres il sera remplacé par un champ texte.
 email : attendra un email. Supporté par les navigateurs récents uniquement.

Chaque <input /> aura un attribut type, qui permet d’indiquer quel type de champ on veut afficher
(texte, radio, checkbox, etc.)

Chaque champ, quel que soit son type, aura au moins un name. Ce nom doit être unique, car la donnée
du champ de formulaire sera ensuite récupérée dans une variable portant ce nom.

Notez que pour les <input type="radio" /> le name doit être identique pour tous les champs qui
doivent être liés (cf le champ sexe dans l’exemple ci‐‐dessous)

Chaque champ peut recevoir un attribut id. Il servira pour le CSS, mais pas que. Nous verrons cela
plus tard. S’agissant d’un ID, la règle est inchangée : il doit être unique dans la page, y compris pour
les boutons radio.

Voici à quoi ressemble une zone de texte monoligne :

Le code associé à cette zone monoligne serait :

35 | P a g e
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du champ...
Le mieux est de le voir sur un exemple :

NB : Si vous cliquez sur le texte "Votre pseudo" : vous allez voir que le curseur se place
automatiquement dans la zone de texte correspondante.

Il existe d’autres attributs que l’on peut placer dans la balise <input/> :

 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 avec 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.

En voici un exemple :

Avec la balise <input/>, Vous pouvez facilement faire en sorte que la zone de texte se comporte comme
une zone "mot de passe", c'est-à-dire une zone où on ne voit pas à l'écran les caractères saisis. Pour
créer ce type de zone de saisie, utilisez l'attribut type="password".

En voici un exemple :

36 | P a g e
Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser
<textarea></textarea>. Comme pour tout autre élément du formulaire, il faut lui donner un nom avec
name, et utiliser un label qui explique de quoi il s'agit.

A l’aide de <input/> on peut également créer des champs E-mail, comme ceci :

Le champ est dédié à la saisie de numéros de téléphone :

Le champ nombre permet de saisir un nombre entier :

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)

Section 3 : Boutons radios

37 | P a g e
Les boutons radios vous permettent de faire un choix (et un seul) parmi une liste de possibilités. Elles
ressemblent un peu aux cases à cocher, mais il y a une petite difficulté supplémentaire : elles doivent
être organisées en groupes. Un même groupe d'options a le même nom (name), mais chaque option
doit avoir une valeur (value) différente.

Section 4 : Les cases à cocher

Pour créer les cases à cocher nous allons utiliser la balise <input/>.

38 | P a g e
Section 5 : Le menu déroulant
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.

Section 6 : Une valeur par défaut

Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :

39 | P a g e
Section 7 : Rendre un champ obligatoire
Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required.

Section 8 : Etablir des zones

Si votre formulaire 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>.

Exercice :

Mettez bien un label pour chaque champ :

1. Un champ texte pour le nom

2. Deux boutons radio de choix pour le sexe
3. Un champ pour le mot de passe
4. Un champ pour le nombre de personnes
5. Une case à cocher "J'accepte d'être le meilleur développeur du Congo"

Regroupons ensuite les éléments comme suit :

1. Un premier fieldset "Identité" qui contiendra : le nom et le sexe

2. Un second fieldset "Coordonnées" qui contiendra : le mot de passe, le nombre de personnes
et la case à cocher

40 | P a g e
CHAPITRE 9 : LES BALISES SEMENTIQUES
Section 1 : Balise générique du type block
Une balise de type bloc occupe tout l’espace horizontal de son élément parent et un espace vertical
égal à la hauteur de son contenu. Par défaut les balises block commencent sur des nouvelles lignes et
peuvent contenir les éléments en ligne et d’autres éléments de block.

Voici la liste des balises types block :

 <article> : contenu d’un article

 <div> : division d’un document
 <<fieldset> : élément d’un champ de formulaire
 <footer>: bas de page ou section
 <form> : formulaire
 <li> : Elément d’une liste
 <nav> : contenu de liens de navigation
 <p> : paragraphe
 Etc

Section 2 : Balise générique de type 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").. Voici une liste de
balise types inlines :

 <a>
 <b>
 <br>
 <boutton>
 <em>
 <input>
 <Img>
 Etc

Section 3 : Balise HTML5

Pour connaitre la liste de l’ensemble des balises utilisées en HTML5, cliquez sur le lien ci-après :

https://jaetheme.com/balises

Section 4 : Introduction au langage CSS

CSS pour Cascading Style Sheet en français feuille de style en cascade est utilisé pour styliser et mettre
en forme des pages web. Par exemple pour modifier la police, la couleur, la taille et l’espacement de
votre contenu, le scinder en plusieurs colonnes ou ajouter les animations et d’autres éléments
décoratifs.

Section 5 : Présentation du langage CSS

Le langage CSS est destiné à gérer le contenu et la structure d’une page web. Il est techniquement
possible de faire de la mise en forme en HTML, mais les possibilités restent très limitées. Le langage
CSS est donc là pour étendre considérablement les possibilités graphiques.

41 | P a g e
Le premier principe est au cœur de la philosophie des styles. Il s’agit de distinguer clairement le code
correspondant au contenu (structure de la page, texte de la page, sémantique) du code correspondant
à la mise en forme (couleurs, positionnement). Ces deux aspects étant gérés respectivement par le
langage HTML et CSS.

Le fait de séparer la forme du contenu permet d’avoir un code beaucoup plus lisible. Par la suite, il sera
ainsi possible de modifier l’un sans toucher à l’autre.

Section 6 : Ecriture du premier code CSS

Il est possible de déclarer un style directement dans les balises HTML, de la manière suivante :

‹p style="color: red"›Texte en rouge !‹/p›

En fait, c'est une façon peu efficace de déclarer les styles utilisés par votre site internet pour les raisons
que nous avons déjà mentionnées : vous devez écrire le même code à de multiples endroits et si vous
voulez faire une modification importante de style sur plusieurs éléments, vous devrez modifier
chacune des balises une par une.

Avec un seul fichier CSS, il vous suffira de faire les modifications à un seul endroit !

Il y a deux manières de déclarer du CSS :

 La première est de mettre votre CSS entre des balises ‹style›‹/style› , directement dans votre
fichier HTML. Ces balises ‹ style› s'insèrent entre les balises ‹head›‹/head› de votre fichier
HTML.

 La deuxième manière c’est de lier votre feuille CSS à votre page HTML, c’est la plus
recommandée.

Section 7 : Ou placer le CSS

Vous avez vu qu'on pouvait mettre le CSS dans la page HTML en utilisant les balises ‹ style›‹/style› .
Mais il y a un autre moyen, beaucoup plus pratique.

Vous savez que vous devez écrire votre CSS dans un fichier à part. Mais comment être sûr que le fichier
HTML aura accès aux informations de style contenues dans le fichier CSS ?

42 | P a g e
Grâce à une balise ‹link› (comme vous l'avez vu dans les premiers exercices de ce cours) insérée entre
les balises ‹head›‹/head› de votre page HTML. Votre balise ‹link› a besoin de trois attributs :

Un attribut type qui doit toujours être égal à "text/css" .

Un attribut rel qui doit toujours être égal à "stylesheet"

Un attribut href qui doit pointer vers l'adresse internet de votre fichier CSS.

Exemple :

1. Dans le fichier index.html, insérez un ‹link› vers stylesheet.css dans index.html. Regardez
l'astuce si vous avez besoin d'aide.
2. Affichez le fichier dans le navigateur pour vérifier vos résultats.

En voici le résultat :

43 | P a g e
CHAPITRE 10 : Les sélecteurs de base
Section 1 et 2 : Les sélecteurs id et class
Certains sélecteurs peuvent "annuler" d'autres quand ils ont un plus grand degré de spécificité.
Cependant, deux autres types de sélecteurs sont encore plus spécifiques que ceux déjà vu : les class et
les id.

Exercice :

1. Le sélecteur p {met par défaut tous les paragraphes ‹ p › en bleu ;

2. Mais le sélecteur div p {est plus spécifique et met tous les paragraphes ‹ p › dans un ‹ div › en
rouge ;
3. Mais ce n'est pas le cas des deux derniers paragraphes ‹ p › ;
4. Ils sont bien dans un ‹ div › aussi, mais ils ont respectivement un sélecteur .class et #id qui sont
eux-mêmes plus spécifiques que le sélecteur div p {. Ils ont donc une couleur particulière ;

44 | P a g e
45 | P a g e
Le sélecteur **class** est utile quand vous souhaitez appliquer le même style à plusieurs éléments HTML
différents. Plutôt que d'appliquer, en la répétant, la même règle aux différents sélecteurs, vous assignez une
seule et même class aux éléments HTML concernés, puis définissez le style de cette class dans l'onglet CSS.

Les "class" sont assignées aux éléments HTML grâce à l'attribut class suivi du signe =, comme ceci :

‹h1 class="NomDeLaClass"›‹/h1›

‹p class="NomDeLaClass"›‹/p›

Dans le fichier .css, la class s'écrit comme ceci : NomDeLaClass { color: red;}

N'oubliez pas le point "." devant le nom de votre class.

Le sélecteur **id** est utile quand vous souhaitez appliquer un style à un seul et unique élément
HTML.
Si le sélecteur class a vocation à être réutilisé plusieurs fois, chaque sélecteur id ne sera utilisé qu'une
seule fois sur un site web.

La syntaxe dans le fichier HTML est la suivante :

‹h1 id="NomIdUnique"›‹/h1›

‹p id="NomIdUnique"›‹/p›

‹p id="NomIdUnique"›‹/p›

Dans le fichier .css, le sélecteur id s'écrit comme ceci : #NomIdUnique { color: red; }

N'oubliez pas le dièse "#" devant le nom de votre id.

Section 3 : La hiérarchie en CSS

L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage
tous les styles de son élément Parent. Par exemple, la balise <html> est parent de <body>,
et <table> est parent de <tr> qui lui-même est parent de <td>. Cet héritage est très pratique et permet
d'éviter beaucoup de répétitions inutiles : en effet, en attribuant une propriété à un parent (par
exemple font-size: 1.5em), elle sera transmise à tous ses enfants, mais aussi aux enfants de ces enfants,
etc...

l'élément enfant héritera de toutes les propriétés de l'élément parent uniquement si ces propriétés
s'héritent, car l'héritage ne fonctionne pas non plus sur toutes les propriétés css (margin, padding et
autres propriétés de bloc)

Section 4 : Cibler un élément enfant

Vous savez qu'il est possible d'imbriquer des éléments HTML les uns à l'intérieur des autres, comme ceci :

46 | P a g e
Comment faire pour modifier uniquement les ‹p› qui sont à l'intérieur des deux ‹div› et non l'intégralité des ‹p›
de la page HTML ? Il suffit d'utiliser le sélecteur CSS suivant :

47 | P a g e
En écrivant div div p { , nous sélectionnons tous les ‹p› imbriqués quelque part dans la page HTML à l'intérieur
d'une ‹div› ; cette ‹div› est elle-même imbriquée quelque part à l'intérieur d'une autre ‹div› .

Si vous voulez sélectionner un enfant direct, c'est-à-dire un élément qui est directement imbriqué à l'intérieur
d'un autre élément et sans aucun autre élément entre les deux, vous devez utiliser le symbole **>** ,
comme ceci :

En procédant ainsi, seuls les ‹p› qui sont imbriqués directement à l'intérieur d'une ‹div› seront sélectionnés. Cela
ne sélectionnera pas les paragraphes qui sont, par exemple, imbriqués dans des ‹div› qui sont
elles-mêmes imbriquées dans d'autres ‹div› .

Exercice :

1. Dans le fichier stylesheet.css, attribuez la police Garamond à tous les ‹ p› de la page HTML. N'utilisez
pas le sélecteur universel * pour cela !
2. Attribuez au paragraphe Introduction la propriété font-weight et sa valeur bold (c'est une nouvelle
propriété qui met en gras le texte).
3. Attribuez la couleur #7ac5cd au paragraphe Synopsis.
4. Attribuez la couleur #000000 ainsi que la propriété text-decoration et sa valeur underline aux ‹p›
imbriqués dans le ‹ul› ;

Section 5 : La pseudo classe hover

Un sélecteur de pseudo-classe est un moyen d'accéder à un élément HTML qui se trouve dans un état particulier,
par exemple les liens quand ils sont survolés, cliqués ou encore visités.

La syntaxe d'un sélecteur pseudo-classe dans un fichier CSS est la suivante :

N'oubliez pas les deux points : entre le sélecteur et la pseudo-classe

48 | P a g e
Section 6 : Premier et dernier enfant
Un autre sélecteur de pseudo-classe utile est : first-child. Il est utilisé pour appliquer un style uniquement aux
éléments qui sont le premier enfant de leur parent.

Exemple :

49 | P a g e
Pour atteindre le dernier élément il suffit de changer la pseudo classe first-child par last-child comme ceci :

Section 7 : La pseudo classe nth-child

En fait, vous pouvez sélectionner n'importe quel enfant d'un élément parent en utilisant le sélecteur
de pseudo-classe :nth-child(x) où "x" correspond à la place de l'enfant dans la descendance de l'élément
parent.

50 | P a g e
Par exemple :

Cela va sélectionner les paragraphes p qui sont le deuxième enfant de leur parent.

L'élément représentant l'enfant que l'on veut sélectionner est spécifié juste avant : nth-child. Dans
l'exemple ci-dessus, l'élément ciblé est un p. Son élément parent est celui qui le contient.

Exercice :

1. Dans le fichier stylesheet.css , attribuez la police Tahoma au second paragraphe;

2. Attribuez la couleur #cc0000 au troisième paragraphe ;
3. Attribuez la couleur de fond du quatrième paragraphe à #00ff00 ;
4. Attribuez la taille de la police du cinquième paragraphe à 2em ;

Section 8 : Paire et impaire

51 | P a g e
CHAPITRE 11 : MANIPULATION DES BOITES HTML
Section 1 : Modifier la largeur des boites
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 a une largeur
et une hauteur. Voyons voir comment ajuster une largeur. Il existe une propriété CSS pour la largeur
d’une boite : c’est le width : c'est la largeur du bloc. A exprimer en pixels (px) ou en pourcentage (%).

Par défaut, un bloc prend 100% de la largeur disponible.

Exemple :

Les pourcentages seront utiles pour créer un design qui s'adapte automatiquement à la résolution du
visiteur. Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en
pixels :

Exemple :

52 | P a g e
Section 2 : Modifier la hauteur des boites
Il existe une propriété CSS pour la largeur d’une boite : c’est le height : c'est la hauteur du block. Là
encore, on l'exprime soit en pixels (px), soit en pourcentage (%).

53 | P a g e
Section 3 : Modifier les marges externes des boites
Il faut savoir que tous les blocs possèdent des marges. Il existe 2 types de marges :

 Les marges intérieures

 Les marges extérieures

La marge externe : margin est l'espace entourant un élément. Plus la marge d'un élément est grande,
plus la distance entre cet élément et ceux qui l'entourent sera grande. Nous pouvons ajuster la marge
pour rapprocher ou éloigner nos éléments HTML les uns des autres ;

54 | P a g e
La propriété margin s'applique aux quatre côtés du bloc. Si vous voulez indiquer une marge en haut, en
bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises.

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

NB : Il y a d'autres façons de spécifier les marges avec les propriétés margin.

Par exemple : margin: 2px 0 3px 1px; signifie "2px de marge en haut, 0px à droite , 3pxen bas, 1px à
gauche. Autre notation raccourcie : margin: 2px 1px; signifie "2px de marge en haut et en bas, 1px de
marge à gauche et à droite".

Exercice :

1. Dans votre page HTML, insérer une div comme ceci : <div></div>
2. Dans un fichier stylsheet.css ajoutez la propriété margin et sa valeur auto à l'élément div. Des
marges automatiques vont centrer l'élément en question;

Section 4 : Modifier les marges internes des boites

La marge interne : padding est l'espace entre le contenu d'un élément et sa bordure. Nous pouvons
ajuster cette valeur avec CSS pour placer les bordures plus ou moins loin du contenu ;

55 | P a g e
La propriété padding s'applique aux quatre côtés du bloc. Si vous voulez indiquer une marge en haut, en bas, à
gauche et à droite, il va falloir utiliser des propriétés plus précises.

Voici la liste pour padding :

 padding -top : marge interne en haut.

 padding -bottom : marge interne en bas.
 padding -left : marge interne à gauche.
 padding -right : marge interne à droite

NB : Il y a d'autres façons de spécifier les marges avec les propriétés padding.

Par exemple : padding: 2px 0 3px 1px; signifie "2px de marge en haut, 0px à droite , 3pxen bas, 1px à gauche.
Autre notation raccourcie : padding: 2px 1px; signifie "2px de marge en haut et en bas, 1px de marge à gauche
et à droite".

Exercice :
Dans cet exercice, l'élément div est collé au body Vous avez vu précédemment comment ajouter des marges
externes margin au div afin de le décoller. Ici, vous allez appliquer des marges internes à l'élément body pour
obtenir un résultat similaire. Dans le fichier stylesheet.css, ajoutez la propriété padding à l'élément body
uniquement (créez un nouveau sélecteur pour cela) et utilisez la notation raccourcie pour appliquer une marge
interne en haut de 25px et à gauche de 50px.

Section 5 : Modifier l’alignement interne des boites

Il existe en CSS 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.

Voici quelques-unes des principales valeurs que peut prendre la propriété display en CSS (il y en a
encore d'autres) :

Valeur Exemple Description

inline <a>, <em>, Eléments d'une ligne. Se placent les uns à côté des
<span>... autres.

Block <p>, <div>, Eléments en forme de blocs. Se placent les uns en-
<section>... dessous des autres et peuvent être
redimensionnés.

inline <select>, Eléments positionnés les uns à côté des autres (comme
block <input> les inline) mais qui peuvent être
redimensionnés (comme les blocs).

none <head> Eléments non affichés.

Quelques petits rappels sur les éléments de type inline-block :

 Ils se positionnent les uns à côté des autres.

 On peut leur donner des dimensions précises.

56 | P a g e
 Exemple :

Section 6 : Modifier les bordures des boites

La bordure : border est la bordure de chaque élément (entre margin et padding ). C'est ce que l'on
rend visible en utilisant la propriété border ;

Il est tout à fait possible de préciser à quel côté vous souhaitez appliquer un style spécifique. Il suffit
d'utiliser les propriétés suivantes :

57 | P a g e
 Exercice :

Dans le fichier stylesheet.css, modifiez la bordure de l'élément div en spécifiant une bordure haute de
1px, une bordure droite de 2px, une bordure basse de 3px et une bordure gauche de 4px. Chaque
bordure sera en trait plein solid et avec la couleur #000000 ;

58 | P a g e
CHAPITRE 12 : MANIPULATION DE LA FENETRE DU NAVIGATEUR
Section 1 : Changer la couleur de fond
Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la
même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire
en notation hexadécimale ou encore utiliser la méthode RGB.

Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui, <body>
correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la
couleur de fond de la page web.

Regardez très attentivement ce fichier CSS :

Le même principe vaut pour toutes les balises HTML et toutes les propriétés CSS

Section 2 : Modifier les marges

Cf chapitre 11, section 3 et 4

Section 3 : Insérer une image de fond

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 aux titres, paragraphes, etc.

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit
lui donner url("nom_de_l_image.png"). Par exemple :

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.

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

59 | P a g e
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)

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). Ainsi, si vous tapez :

Section 4 : Modifier la police

La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Vous devez écrire le nom de
la police comme ceci :

Seulement, pour éviter qu'il n'y ait de problème 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 :

60 | P a g e
Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a pas,
il essaiera la police3 et ainsi de suite.

61 | P a g e
CHAPITRE 13 : LES MEDIAS
Section 1 : L’image
Cf. Chapitre 6

Section 2 : L’audio
Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. La plupart d'entre
eux sont compressés (comme le sont les images JPEG, PNG et GIF) ce qui permet de réduire leur poids:

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

Aucun navigateur ne gère tous ces formats. Retenez surtout la compatibilité pour les MP3 et OGG :

Navigateur MP3 OGG

Internet Explorer OUI -
Chrome OUI OUI
FireFox - OUI
Safari OUI -
Opera - OUI

Pour insérer un élément audio dans une page il suffit d’utiliser la balise <audio>comme ceci :

Vous pouvez compléter la balise des attributs suivants :

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

62 | P a g e
  preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Elle
peut prendre les valeurs: auto (par défaut) : le navigateur décide s'il doit précharger toute la
musique, uniquement les métadonnées ou rien du tout.
o metadata : charge uniquement les métadonnées (durée, etc.).
o none : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur
votre site.

Section 3 : La vidéo
Il suffit d'une simple balise <video > pour insérer une vidéo sur sa page :

Dans cette balise on peut ajouter les attributs comme avec les audios :

 poster : image à afficher à la place de la vidéo lorsque celle-ci n'est pas lancée. Par défaut, le
navigateur prendra la première image de la vidéo, mais comme il s'agit souvent d'une image
noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une ! Vous
pouvez tout simplement faire une capture d'écran d'un moment de la vidéo.
 controls : pour ajouter les boutons "Lecture", "Pause" et la barre de défilement. Ca peut
sembler indispensable, mais certains sites web préfèrent créer eux-mêmes leurs propres
boutons et commander la lecture avec du Javascript. En ce qui nous concerne, ça sera
largement suffisant !
 width : pour modifier la largeur de la vidéo.
 height : pour modifier la hauteur de la vidéo.
 loop : la vidéo sera jouée en boucle.
 autoplay : la vidéo sera jouée dès le chargement de la page. Là encore, évitez d'en abuser, c'est
en général irritant d'arriver sur un site qui lance quelque chose tout seul !
 preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Elle
peut prendre les valeurs :
o auto (par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement
les métadonnées ou rien du tout.
o metadata : charge uniquement les métadonnées (durée, dimensions, etc.).
o none : pas de préchargement. Utile si vous ne nous voulez pas gaspiller de bande
passante sur votre site.

63 | P a g e
Section 4 : La balise FIGURE
En HTML5, on dispose de la balise <figure>. Voici comment on pourrait l'utiliser :

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 :

64 | P a g e
CHAPITRE 14 : MANIPULATION DES COULEURS AVEC CSS
Section 1 : Les couleurs en hexadécimal
Il existe plusieurs façons en CSS de choisir une couleur parmi toutes celles qui existent. La première
que je vais vous montrer est la notation hexadécimale. Elle est couramment utilisée sur le Web, mais
il existe aussi une autre méthode que nous verrons plus loin.

Un nom de couleur en hexadécimal, ça ressemble à ça : #FF5A28. Pour faire simple, c'est une
combinaison de lettres et de chiffres qui indiquent une couleur. On doit toujours commencer par écrire
un dièse (#), suivi de 6 lettres ou chiffres allant de 0 à 9 et de A à F. Ces lettres ou chiffres fonctionnent
deux par deux. Les 2 premiers indiquent une quantité de rouge, les 2 suivants une quantité de vert, et
les 2 derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge
Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut.

Voici par exemple comment on fait pour appliquer la couleur blanche en hexadécimal sur les
paragraphes :

Section 2 : Les couleurs en RGB

RGB signifie En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en "RGB". Comme
pour la notation hexadécimale, on doit définir une quantité de rouge, de vert et de bleu pour choisir
une couleur.

Avec le logiciel paint on peut manipuler la technique de la couleur RGB. Pour se faire il suffit de lancer
paint en suivant les étapes ci-après :

1. Lancez le logiciel Paint depuis le menu Démarrer.

2. Rendez-vous dans la section Modifier les couleurs :

65 | P a g e
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. Supposons que je sois pris d'une envie folle d'écrire mes titres <h1> en rose barbie (supposons
seulement). Je sélectionne la couleur dans la fenêtre, comme ceci :

On relève les quantités de Rouge-Vert-Bleu correspondantes indiquées en bas à droite de la fenêtre (ici 240-96-
204). Je recopie ces valeurs dans cet ordre dans le fichier CSS, comme ceci :

TP : A l’aide de toute les notions vues en classe, réaliser le site ci-dessous :

66 | P a g e
CHAPITRE 15 : VUE D’ENSEMBLE DE BOOTSTRAP
Section 1 : Présentation du framework Bootstrap
Bootstrap est un framework qui peut rendre votre vie plus facile pour créer l'architecture d'une page
web. Mais Bootstrap va bien plus loin qu'offrir du code CSS déjà bien organisé et structuré. Il offre
aussi des plugins jQuery de qualité pour enrichir vos pages.

Un framework est un ensemble de composants structurés qui sert à créer les fondations et à organiser
le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité
ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent de
nombreux langages : Java, Python, Ruby, PHP.

Il existe des frameworks côté serveur (désignés backend en anglais), et d'autres côté client (désignés
frontend en anglais). Bootstrap fait partie de cette deuxième catégorie. Les frameworks CSS sont
spécialisés, comme leur nom l'indique, dans les CSS C'est-à-dire qu'ils nous aident à mettre en forme
les pages web : organisation, aspect, animation…

Section 2 : Pourquoi Bootstrap ?

Bootstrap est un framework CSS, mais pas seulement, puisqu'il embarque également des composants
HTML et JavaScript. Il comporte un système de grille simple et efficace pour mettre en ordre l'aspect
visuel d'une page web. Il apporte du style pour les boutons, les formulaires, la navigation… Il permet
ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées.

Vous créez des pages web et vous passez beaucoup (trop) de temps avec le CSS ? Alors Bootstrap est
fait pour vous et ce cours va vous guider dans la découverte de cette puissante boîte à outils. Bootstrap
est un framework qui peut rendre votre vie plus facile pour créer l’architecture d’une page web. Mais
Bootstrap va bien plus loin qu’offrir du code CSS déjà bien organisé et structuré. Il offre aussi des
plugins jQuery de qualité pour enrichir vos pages.

Section 3 : Bootstrap et le responsive design

Les Media Queries sont destinées à simplifier la création de pages web pour les rendre consultables
sur des supports variés (tablettes, smartphones…). Cette section n'est qu'une introduction rapide à ce
domaine qui mériterait un cours à lui tout seul.

Avec les Media Queries on peut cibler :

 La résolution ;
 Le type de media ;
 La taille de la fenêtre (width et hight) ;
 La taille de l'écran (device-width et device-height);
 Le nombre de couleurs ;
 Le ratio de la fenêtre (par exemple le 16/9) ;
 Etc

Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici un exemple dans du
code CSS :

67 | P a g e
@media est une règle apparue avec le CSS2. Elle permet à la base de cibler un media : écran, imprimante,
projecteur… Cette règle est reprise et étendue avec le CSS3. L'expression située entre parenthèses est évaluée,
et si elle est « vraie », les règles situées dans le bloc sont prises en compte.

68 | P a g e
CHAPITRE 16 : INCLURE BOOTSTRAP DANS UN PROJET
Section 1 : Architecture Bootstrap
Bootstrap propose :

Une mise en page basée sur une grille de 12 colonnes bien pratique. Bien sûr, si vous avez besoin de plus de 12
colonnes, ou de moins, il est toujours possible de changer la configuration ;

L'utilisation de Normalize.css ;

 Du code fondé sur HTML5 et CSS3 ;

 Une bibliothèque totalement open source sous license MIT;
 Du code qui tient compte du format d'affichage des principaux outils de navigation (responsive design)
: smartphones, tablettes… ;
 Des plugins jQuery de qualité ;
 Un résultat cross-browser (la prise en charge de IE7 a été abandonnée avec la version 3), donc une
garantie de compatibilité maximale ;
 Une bonne documentation ;
 La garantie d'une évolution permanente ;
 Une mine de ressources variées sur le web ;
 Une architecture basée sur LESS, un outil bien pratique qui étend les possibilités de CSS (un portage
sur SASS existe également).

Quand vous téléchargez la librairie avec le bouton "Download source", vous obtenez un fichier zippé contenant
un répertoire bootstrap-3.3.7 qui contient lui-même un certain nombre de fichiers et de dossiers, comme le
montre la figure suivante :

69 | P a g e
Les fichiers utiles pour simplement utiliser Bootstrap se situent dans le dossier dist («
distribution »), ce sont les seuls fichiers que vous obtenez si vous utilisez le bouton "Download
Bootstrap".

70 | P a g e
Voyons un peu les principaux fichiers :

 bootstrap.css comporte les classes de base de Bootstrap ;

 bootstrap.min.css comporte les mêmes classes de base que bootstrap.css mais est
minifié ;
 bootstrap-theme.css contient des règles de styles particulières pour créer un thème
spécifique pour Bootstrap ;
 bootstrap-theme.min.css est identique àbootstrap-theme.cssmais est minifié ;
 glyphicons-halflings-regular.svg comporte la collection d'icônes au format svg ;
 glyphicons-halflings-regular.ttf comporte la collection d'icônes au format ttf ;
 glyphicons-halflings-regular.woff comporte la collection d'icônes au format woff ;
 glyphicons-halflings-regular.eot comporte la collection d'icônes au format eot ;
 bootstrap.jscontient le code JavaScript des composants de Bootstrap ;
 bootstrap.min.js contient le même code JavaScript mais est minifié ;

Les fichiers min (bootstrap.min.css, bootstrap.min.js et bootstrap-theme.min.css) contiennent

le même code que leurs équivalents (bootstrap.css, bootstrap.js et bootstrap-theme.css) mais
ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur
chargement.

Les fichiers bootstrap-theme.css.map et bootstrap.css.map permettent de retrouver

l'emplacement original d'une ligne de code à partir du code minifié. Cette fonctionnalité est
utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas
indispensables au fonctionnement de Bootstrap.

Il faut distinguer deux situations :

 Pendant la phase de développement, il est intéressant de pouvoir naviguer dans le

code de Bootstrap, il faut donc mettre les fichiers non compressés.

 Lorsque votre site est en ligne, vous n'avez plus à vous inquiéter du code et seule
compte la vitesse de chargement, il faut donc cette fois utiliser les versions
compressées (min).

La figure suivante montre les fichiers utiles pendant la phase de développement (les
fichiersbootstrap.js et jquery.js ne sont à prévoir que si vous utilisez des plugins jQuery et le
dossier fonts uniquement si vous utilisez les icônes).

71 | P a g e
La figure suivante montre les fichiers utiles lorsque le site est en ligne (les
fichiersbootstrap.min.js etjquery.js ne sont à prévoir que si vous utilisez des plugins jQuery et
le dossier fonts uniquement si vous utilisez les icônes).

Section 2 : Les templates de base

Vous trouvez aussi sur le site de Bootstrap un template de base et des exemples comportant
l'essentiel des éléments pour vous aider à initier un projet. Pour le moment vous n'allez pas
encore comprendre l'utilité de tous ces éléments, mais vous y reviendrez par la suite lorsque
vous aurez fait le tour de ce cours.
Dans le template de base, vous trouvez en premier cette ligne :

Cette déclaration ne concerne que le navigateur Internet Explorer. Elle permet de s'assurer
qu'il utilise la dernière version du moteur de rendu. Notez que cette ligne ne passe pas la
validation W3C.
On trouve ensuite cette ligne :

On trouve ensuite ces déclarations :

Le but de ces appels est de permettre aux navigateurs ne prenant pas en charge HTML5 et les Media
Queries CSS3 de le faire ; ils visent essentiellement IE8. Pour obtenir plus de renseignements

72 | P a g e
surrespond.js vous pouvez aller sur la page GitHub. Méfiez-vous en particulier si vous utilisez un CDN
pour charger vos styles CSS, parce que respond.js utilise AJAX et vous pouvez buter sur le problème
d'accès à plusieurs domaines.

Le but du fichierhtml5shiv est de créer les éléments (avec createElement) de type bloc du HTML 5
(header, section, aside…) qui sont ignorés par IE8.

En fin de page (pour ne pas ralentir le chargement) se trouvent les appels JavaScript (utiles si vous
utilisez des plugins jQuery, comme nous allons le voir dans ce cours) :

En résumé on obtient ce code (en simplifiant les références et en supposant que tous les fichiers sont
situés dans un dossier bootstrap et des sous-dossiers fonctionnels) :

Vous pouvez trouver également sur le site 18 templates d'exemple. Les éléments nécessaires à la
compréhension de ces exemples seront exposés tout au long de ce cours. Voyons toutefois le premier
exemple, qui est le plus simple :

73 | P a g e
74 | P a g e
On retrouve ce qu'on a vu précédemment avec la ligne pour les mobiles et l'appel au fichier CSS de
Bootstrap. On trouve la référence d'un autre fichier CSS : starter-template.css. Voyons ce que contient
ce fichier :

75 | P a g e
Nous verrons, lorsque nous parlerons du composant "Barre de navigation" de Bootstrap, qu'il faut
parfois réserver un espace en haut de la page (avec padding-top: 50px) pour éviter que le texte du
début ne se retrouve sous la barre. On trouve aussi ici la classe starter-template qui se contente de
fixer un espace interne et un alignement centré du texte. Cette classe ne sert que pour le texte de
présentation du template et peut être supprimée ou modifiée selon votre convenance.

On trouve aussi dans la page une trame de la barre de navigation (tout ça sera expliqué en détail dans
ce cours) :

Le contenu de la page est ensuite inséré dans une DIV comportant la classe container :

Nous verrons également l'intérêt de cette classe et son utilisation. Considérez les exemples de
templates fournis sur le site de Bootstrap à la fois comme des guides de démarrage et des aides à la
compréhension du framework. Évitez de les prendre tels quels sans en comprendre tous les éléments.
À l'issue de ce cours vous aurez tout en main pour le faire.

Section 3 : Doctype HTML5

Pour que Bootstrap fonctionne il faut le déclarer dans les pages HTML, qui doivent d'ailleurs être
impérativement au format HTML 5, il faut donc prévoir le bon DOCTYPE :

76 | P a g e
Il faut ensuite déclarer au minimum le fichier bootstrap.min.css (ou bootstrap.css) dans l'en-tête de la
page web :

À partir de là toutes les classes sont accessibles… Évidemment vous devez adapter le lien selon la
localisation de vos fichiers.

Si vous utilisez des composants JavaScript, vous devez également référencer la librairie de Bootstrap
ainsi que jQuery (la librairie jQuery ne fait pas partie des fichiers téléchargés avec Bootstrap et doit
être récupérée indépendamment sur http://jquery.com/) :

Section 4 : Le système de grille pour positionnement

L'organisation spatiale des pages web est l'une des premières préoccupations lorsque l'on crée un site
web. Prévoit-on une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des
blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Faut-
il prévoir un bas de page ?

Bootstrap ne répond évidemment pas à ces questions, mais il peut grandement vous faciliter la tâche,
avec son système de grille, pour obtenir le résultat que vous souhaitez.

La grille de Bootstrap comporte 12 colonnes comme dans l'illustration précédente. Vous commencez
sans doute à comprendre l'utilité de cette organisation.

La grille de Bootstrap n'est pas aussi idéale que celle présentée précédemment. Le découpage en
colonnes est tout simplement une division en pourcentage de la largeur de la fenêtre de visualisation
et correspond donc à ce qu'on vient de voir. En revanche, il n'en est pas vraiment de même pour les
rangées. Ces dernières ont la hauteur de leur contenu :

77 | P a g e
Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l'on peut utiliser
directement dans les balises HTML.

La première classe à connaître est row , qui représente une rangée. Cette classe établit des marges
négatives à droite et à gauche :

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu'il y en a au maximum
12. Pour définir le nombre de colonnes utilisées pour chaque élément, on dispose de quatre batteries
de 12 classes :

 col-xs-1 ou col-sm-1 ou col-md-1 ou col-lg-1

 col-xs-2 ou col-sm-2 ou col-md-2 ou col-lg-2
 ...
 col-xs-12 ou col-sm-12 ou col-md-12 ou col-lg-12

C'est ici qu'interviennent les 4 sortes de classes vues précédemment pour les colonnes. Bootstrap
considère 4 sortes de médias : les petits, genre smartphones (moins de 768 pixels), les moyens, genre
tablettes (moins de 992 pixels), les écrans moyens (moins de 1200 pixels) et enfin les grands écrans
(plus de 1200 pixels). Vous trouverez à la figure suivante un tableau pour illustrer les différences de
réaction selon la catégorie.

Le nom des classes est intuitif :

xs pour x-small, sm pour small, md pour medium et lg pour large.

Note : Le système de quadrillage Bootstrap 4 a cinq classes:

 .col- (extra petits appareils - largeur d'écran inférieure à 576px)

 .col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576px)
 .col-md- (appareils de taille moyenne - largeur d'écran égale ou supérieure à 768px)
 .col-lg- (gros périphériques - largeur d'écran égale ou supérieure à 992px)
 .col-xl- (xlarge devices - largeur d'écran égale ou supérieure à 1200px)

78 | P a g e
Après cette petite mise en jambe pour vous présenter la notion de grille dans Bootstrap, on va passer
en revue les possibilités dans le détail. Mais pour visualiser tous les exemples qui vont suivre, je vous
propose d'ajouter un peu de style, histoire d'afficher les éléments de façon explicite. Pour éviter de
polluer le code HTML on va mettre ce style spécifique dans un fichier CSS particulier (ce fichier sera
nommé style.css dans le code) :

Le seul but de ces règles de style est de faire apparaître nettement les éléments à l'écran. Une petite
marge interne en haut pour le corps, pour éviter que tout soit collé en haut de l'écran. Des bordures
(avec des coins arrondis pour l'esthétique) et un fond coloré pour distinguer les éléments. Une hauteur
fixée à 40 pixels, parce qu'étant donné que la hauteur des rangées dépend du contenu, on aurait un
rendu hétéroclite. La figure suivant présente l'aspect obtenu.

Section 5 : Grille fixe

La classe container contient et centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur
de l'écran.

Exemple : déclarer une seule rangée avec deux éléments un de 4 colonnes et l’autre de 8 colonnes qui
occupent tout l'espace :

Figure suivante :

79 | P a g e
Solution : Bootstrap 3

Pour obtenir plusieurs rangées, il suffit d'utiliser plusieurs fois la classe row

Exemple : déclarer trois rangées, le premier de un, deux, trois et six colonnes, le second de douze
colonnes et le troisième de quatre et huit colonnes.

Figure suivante :

Solution :

Bootstrap permet aussi de sauter des colonnes. Il y a quelques classes d'offset pour ça :

 col-*-offset-1
 col-*-offset-2
 ...
 col-*-offset-11

80 | P a g e
On a sauté 6 colonnes grâce à la classe col-lg-offset-6.

Note : La syntaxe avec Bootstrap 4

 offset-*-1
 offset-*-2
 …
 offset-*-11

On a sauté 6 colonnes grâce à la classe offset-lg-6.

Exemple : Déclaré deux rangée, le premier de trois, six et trois colonnes ; Le second de trois colonnes,
un saut de six colonne et trois colonnes

Figure suivante

Solution :

81 | P a g e
Il est possible d’imbriquer des éléments dans une page web avec Bootstrap, Autrement dit inclure un
row dans un col. Eh bien, on va tester ça tout de suite :

Section 6 : Grille élastique

La classe container-fluid permet à la grille d'occuper toute la largeur pour ainsi construire sa page web
à l’intérieur de cette classe.

82 | P a g e
 CHAPITRE 17 : LES CLASSES CSS DE BASE AVEC BOOTSTRAP
Section 1 : Les tableaux
Classe « table »

C'est la classe de base pour les tableaux, elle fixe quelques styles et crée des lignes de séparation
horizontales :

Ce qui donne la figure suivante :

Classe « table-bordered »

C'est la classe pour avoir des bordures :

Classe « table-striped »

Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3, …) :

Classe « table-condensed »

Cette classe permet de condenser le tableau pour qu'il occupe moins de place verticalement :

En voici un résumé sur les tableaux :

Type de listes Classes Déclarations

crée les lignes de séparation ‘table’ <table class=‘table’></table

horizontales

Crée les jolies bordures avec les coins ‘table-bordered’ <table class=‘table table-
arrondis bordered’></table>

Ajoute un fond avec un gris très léger ‘table-striped’ <table class=‘table table-
pour les lignes impaires (1,3,5…) striped’></table>

permet de condenser le tableau pour ‘table-condensed’ <table class=‘table

qu’il occupe moins de place verticale condensed’></table>

83 | P a g e
Section 2 : Les formulaires
Si on n'utilise aucune classe particulière dans une balise <form>, on obtient une disposition en ligne
comme ceci :

84 | P a g e
Par défaut les contrôles s'alignent horizontalement. J'aimerais que les contrôles occupent toute la
largeur disponible. Il faut utiliser la classe form-control pour obtenir cet effet

On peut encore améliorer l'espacement en utilisant la classe form-group:

Les classes « radio » et « checkbox »

Bootstrap propose l'utilisation d'une classe particulière pour les cases à cocher (checkbox) et les zones
d'option (radio).

La classe well, un peu de style, un joli bouton et un texte d'aide.

Voilà une classe que j'aime bien, elle provoque une jolie stylisation. J'ai apporté ce petit complément
au formulaire de la page :

85 | P a g e
Formulaire horizontal

Pour réaliser un formulaire horizontal, nous allons utiliser tout ce que nous venons de voir en
exploitant la classe form-horizontal et une grille pour positionner les étiquettes et les contrôles :

Les étiquettes disposent de 2 colonnes et les champs de saisie de 10 colonnes. On peut voir l'utilisation
de la classe pull-right pour envoyer le bouton vers la droite.

L'alignement à droite des étiquettes est réalisé par la classe control-label. Voici à la figure suivante
une visualisation du découpage.

Formulaire en ligne

Il arrive qu'on ait besoin d'avoir un formulaire disposé sur une ligne, par exemple dans une barre de
navigation. Faisons un essai avec un formulaire élémentaire :

Bon ce n'est pas très joli, alors arrangeons ça avec tout ce que nous avons déjà vu et en précisant la
classe form-inline:

86 | P a g e
C'est beaucoup mieux ! Remarquez l'utilisation d'une étiquette invisible pour la zone de texte. Il est
conseillé d'avoir toujours une étiquette pour chaque contrôle pour les lecteurs d'écran (accessibilité),
la classe sr-only permet de rendre cette étiquette invisible.

Les classes input-group, input-group-addon et input-group-btn

Accoler une information à un contrôle

Les classes input-group et input-group-addon servent à accoler une information à un contrôle de

formulaire :

On peut aussi les utiliser conjointement pour accoler devant et derrière :

Accoler un bouton à un contrôle

On peut aussi accoler un bouton avec la classe input-group-btn:

Section 3 : Les boutons

Pour créer un bouton avec Bootstrap il suffit d'ajouter les classes btn et btn-default à une balise
<button>, <a> ou <input> :

Les différents types de boutons

L'aspect par défaut est un gris avec le fond blanc. Il existe d'autres possibilités plus colorées :

87 | P a g e
Section 4 : Les images
Bootstrap donne la possibilité de modifier l'apparence des bordures des images. Il y a pour cela 3
classes utilisables :

Voici un exemple illustratif de ces trois effets :

Section 5 : les icones

Bootstrap propose 200 icônes de Glyphicons. L'intégration d'une icône est très facile parce qu'il suffit
d'utiliser la balise <span>. Pour le formulaire de contact de la page d'exemple, le bouton est amélioré
en le complétant par une icône (voir figure suivante).

88 | P a g e
Ce qui nous donne la figure suivante.

La syntaxe est toute simple. On utilise une balise <span> avec deuxclasses. La principale est glyphicon
suivi de la classe qui correspond à l'icône à afficher glyphicon-*.

Ce qui nous donne la figure suivante.

89 | P a g e
CHAPITRE 18 : LES COMPOSANTS BOOTSTRAP
Section 1 : Menu déroulant
Le plugin jQuery Dropdown permet de faire de jolis menus déroulants. Il suffit de modifier une barre
de navigation pour ajouter un menu déroulant :

Pour ajouter la fonctionnalité de dropdown, il faut utiliser la classe dropdown et ajouter data-
toggle="dropdown" dans la balise concernée pour que le menu fonctionne. Ici, je l'ai fait pour la
balise <a> qui contient le libellé du lien du menu. Il faut aussi utiliser la classe dropdown-menu dans
la balise <ul> qui doit englober le menu déroulant.

Menu déroulant dans un bouton

On peut créer un menu déroulant activé par un bouton. Voici un code de base :

Section 2 : groupement de boutons

On peut aussi accoler un bouton avec la classe input-group-btn:

Et rien n'empêche d'en ajouter plusieurs, comme pour la figure suivante.

Noté que vous pouvez accoler aussi une case à cocher ou un bouton radio à un contrôle.

90 | P a g e
Section 3 : Barre de navigation
Bootstrap propose de superbes classes pour créer une barre de navigation. À la base, une barre
nécessite juste les classes navbar et navbar-default:

La classe navbar est toute simple :

La classe navbar-default fixe les couleurs du fond et de la bordure :

Mais une barre vide ne sert pas à grand-chose, en général on la garnit d'items. Voici un exemple :

Les classes nav et navbar-nav doivent être utilisées avec une balise <ul>. Tous les items de navigation
apparaissent alors avec des balises <li>. L'item actif est repéré avec la classe active. Un item désactivé
est défini avec la classe disabled. Voici à la figure suivante un aperçu de la barre.

Section 4 : Fil d’ariane

Le fil d’ariane est utilisé afin de répondre à deux objectifs : améliorer le référencement de la page dans
le moteur de recherche et indiquer la hiérarchie du contenu à l’utilisateur.

91 | P a g e
Section 5 : Alertes
Les alertes permettent de présenter un message visuellement significatif. Il suffit d'utiliser les classes
alert et alert-warning:

Ce qui donne la figure suivante.

Trois autres classes permettent de changer l'aspect de l'alerte selon le résultat désiré :

92 | P a g e
Section 6 : Barre de progression
Les barres de progression constituent une façon élégante de faire patienter l'utilisateur pendant une longue
tâche. Elles ont aussi pour vocation de le rassurer et de lui indiquer approximativement le temps qu'il lui reste à
attendre. Les classes progress et progress-bar permettent de réaliser facilement ce genre d'effet. Pour les
exemples, je prévois un peu de code javascript pour simuler un processus temporel. Voici la barre de base :

Ce qui donne la figure suivante.

Section 7 : Pagination
Bootstrap propose la classe pagination pour réaliser… des paginations. Le principe est tout simple,
voici un exemple de base :

On obtient alors le résultat visible à la figure suivante.

93 | P a g e
Section 8 : Barres de progression
Il est également prévu des couleurs différentes pour enrichir la sémantique de ces barres, que ce soit en version
unie ou rayée :

Ce qui donne la figure suivante.

94 | P a g e
CHAPITRE 19 : ETUDE DE CAS (PROJET HTML , CSS, BOOTSTRAP) : Mise
en place d’un site web.

95 | P a g e
Bibliographie
 Elisabeth CASTRO, Le programmeur HTML avec XHTML et CSS, Campus Press 2006 ;
 Fabrice LEMAINQUE, HTML, XHTML-CSS-SCRIPTS Edition 2, Micro Application 2007 ;
 Mathieu NEBRA , Accès libre. Reussir son site web avec XHTML et CSS Edition 3, Eyrolles 2006.

96 | P a g e
Table des matières
CHAPITRE I : INTRODUCTION AU LANGAGE HTML ......................................................................... 8
Section 1 : Présentation du langage HTML ......................................................................................... 8
Section 2 : Ecrire et interpréter du HTML ........................................................................................... 8
Section 3 : Composition d’une balise .................................................................................................. 9
Section 4 : Imbrication des balises HTML.......................................................................................... 10
CHAPITRE 2 : PREMIER CODE ...................................................................................................... 11
Section 1 : Editeur de texte ............................................................................................................... 11
Section 2 : Structure de base d’une page web.................................................................................. 11
Section 3 : Création d’une première page web................................................................................. 12
Section 4 : Zoom sur l’entête ............................................................................................................ 13
Section 5 : Langage de la page .......................................................................................................... 14
CHAPITRE 3 : LA PARTIE BODY..................................................................................................... 15
Section 1 : Les titres .......................................................................................................................... 15
Section 2 : Les caractères spéciaux ................................................................................................... 15
Section 3 : Les commentaires............................................................................................................ 16
Section 4 : Les espaces ...................................................................................................................... 17
Section 5 : Les sauts de ligne............................................................................................................. 17
Section 6 : Le formatage.................................................................................................................... 18
Section 7 : Séparateur horizontale.................................................................................................... 18
CHAPITRE 4 : LES LISTES .............................................................................................................. 19
Section 1 : Les listes non ordonnées ................................................................................................. 19
Section 2 : Les listes ordonnées ........................................................................................................ 19
Section 3 : Les listes imbriquées........................................................................................................ 21
Section 4 : Les listes. Application ...................................................................................................... 22
CHAPITRE 5 : LES LIENS ............................................................................................................... 23
Section 1 : Les liens internes ............................................................................................................. 23
Section 2 : Les liens internes complexes ........................................................................................... 23
Section 3 : Les liens externes............................................................................................................. 24
CHAPITRE 6 : LES IMAGES ........................................................................................................... 27
Section 1 : Insérer une image............................................................................................................ 27
Section 2 : Les différentes extensions ............................................................................................... 27
Section 3 : La taille des images.......................................................................................................... 28
CHAPITRE 7 : LES TABLEAUX........................................................................................................ 29
Section 1 : Création d’un tableau ...................................................................................................... 29
Section 2 : Fusion des lignes.............................................................................................................. 30

97 | P a g e
 Section 3 : Fusion de colonne............................................................................................................ 31
Section 4 : Entête et légende ............................................................................................................ 31
Section 5 : Définir des zones ............................................................................................................. 32
CHAPITRE 8 : LES FORMULAIRES ................................................................................................. 34
Section 1 : Les bases du formulaire HTML ........................................................................................ 34
Section 2 : Les autres types de champs input ................................................................................... 34
Section 4 : Les cases à cocher............................................................................................................ 38
Section 5 : Le menu déroulant .......................................................................................................... 39
Section 6 : Une valeur par défaut...................................................................................................... 39
Section 7 : Rendre un champ obligatoire .......................................................................................... 40
Section 8 : Etablir des zones.............................................................................................................. 40
CHAPITRE 9 : LES BALISES SEMENTIQUES..................................................................................... 41
Section 1 : Balise générique du type block........................................................................................ 41
Section 2 : Balise générique de type inline ....................................................................................... 41
Section 3 : Balise HTML5 ................................................................................................................... 41
Section 4 : Introduction au langage CSS............................................................................................ 41
Section 5 : Présentation du langage CSS ........................................................................................... 41
Section 6 : Ecriture du premier code CSS .......................................................................................... 42
Section 7 : Ou placer le CSS ............................................................................................................... 42
CHAPITRE 10 : Les sélecteurs de base .......................................................................................... 44
Section 1 et 2 : Les sélecteurs id et class........................................................................................... 44
Section 3 : La hiérarchie en CSS......................................................................................................... 46
Section 4 : Cibler un élément enfant................................................................................................. 46
Section 5 : La pseudo classe hover.................................................................................................... 48
Section 6 : Premier et dernier enfant................................................................................................ 49
Section 7 : La pseudo classe nth-child............................................................................................... 50
Section 8 : Paire et impaire ............................................................................................................... 51
CHAPITRE 11 : MANIPULATION DES BOITES HTML ....................................................................... 52
Section 1 : Modifier la largeur des boites ......................................................................................... 52
Section 2 : Modifier la hauteur des boites ........................................................................................ 53
Section 3 : Modifier les marges externes des boites......................................................................... 54
Section 4 : Modifier les marges internes des boites ......................................................................... 55
Section 5 : Modifier l’alignement interne des boites........................................................................ 56
Section 6 : Modifier les bordures des boites..................................................................................... 57
CHAPITRE 12 : MANIPULATION DE LA FENETRE DU NAVIGATEUR................................................. 59
Section 1 : Changer la couleur de fond ............................................................................................. 59

98 | P a g e
 Section 2 : Modifier les marges ......................................................................................................... 59
Section 3 : Insérer une image de fond .............................................................................................. 59
Section 4 : Modifier la police............................................................................................................. 60
CHAPITRE 13 : LES MEDIAS ......................................................................................................... 62
Section 1 : L’image............................................................................................................................. 62
Section 2 : L’audio ............................................................................................................................. 62
Section 3 : La vidéo............................................................................................................................ 63
Section 4 : La balise FIGURE .............................................................................................................. 64
CHAPITRE 14 : MANIPULATION DES COULEURS AVEC CSS ............................................................ 65
Section 1 : Les couleurs en hexadécimal........................................................................................... 65
Section 2 : Les couleurs en RGB ........................................................................................................ 65
CHAPITRE 15 : VUE D’ENSEMBLE DE BOOTSTRAP......................................................................... 67
Section 1 : Présentation du framework Bootstrap............................................................................ 67
Section 2 : Pourquoi Bootstrap ?....................................................................................................... 67
Section 3 : Bootstrap et le responsive design ................................................................................... 67
CHAPITRE 16 : INCLURE BOOTSTRAP DANS UN PROJET................................................................ 69
Section 1 : Architecture Bootstrap .................................................................................................... 69
Section 2 : Les templates de base ..................................................................................................... 72
Section 3 : Doctype HTML5 ............................................................................................................... 76
Section 4 : Le système de grille pour positionnement ...................................................................... 77
Section 5 : Grille fixe.......................................................................................................................... 79
Section 6 : Grille élastique................................................................................................................. 82
CHAPITRE 17 : LES CLASSES CSS DE BASE AVEC BOOTSTRAP......................................................... 83
Section 1 : Les tableaux ..................................................................................................................... 83
Section 2 : Les formulaires ................................................................................................................ 84
Section 3 : Les boutons...................................................................................................................... 87
Section 4 : Les images........................................................................................................................ 88
Section 5 : les icones ......................................................................................................................... 88
CHAPITRE 18 : LES COMPOSANTS BOOTSTRAP ............................................................................ 90
Section 1 : Menu déroulant............................................................................................................... 90
Section 2 : groupement de boutons.................................................................................................. 90
Section 3 : Barre de navigation ......................................................................................................... 91
Section 4 : Fil d’ariane ....................................................................................................................... 91
Section 5 : Alertes.............................................................................................................................. 92
Section 6 : Barre de progression ....................................................................................................... 93
Section 7 : Pagination........................................................................................................................ 93

99 | P a g e
 Section 8 : Barres de progression...................................................................................................... 94
CHAPITRE 19 : ETUDE DE CAS (PROJET HTML , CSS, BOOTSTRAP) : Mise en place d’un site web. ... 95
Bibliographie.............................................................................................................................. 96

100 | P a g e