COURS INITIATION PROGRAMMATION WEB

ENSEIGNANT :
AMEVOR Kossi A.
 INITIATION PROGRAMMATION WEB

OBJECTIFS DU COURS

 Connaître les standards du web et leurs spécificités

 Savoir créer des pages en HTML5
 Connaître les principales balises HTML5 existantes
 Créer des interfaces riches, interactives et ergonomiques
 Développer et débugger une application web
 Comprendre comment mettre en page et en forme à l’aide
d’une feuille de styles CSS
 Construire une architecture technique conforme

I
 INITIATION PROGRAMMATION WEB

Table des matières

PARTIE I : LE LANGAGE HTML 5 ......................................................... 1
I. Les balises et les attributs ....................................................2
1. Les balises .......................................................................................... 2
2. Les attributs ...................................................................................... 3
3. Structure de base d’une page HTML 5 ....................................... 4
4. Les règles de base HTML 5 ............................................................ 6
5. L’environnement de travail ............................................................ 8
II. Les différentes balises ..........................................................8
1. Balises relatives au paragraphe ................................................... 8
2. Balises relatives au texte ............................................................... 9
3. Balises relatives à la liste ............................................................... 9
4. Balise relative au lien .................................................................... 11
5. Balise relative aux images ........................................................... 13
6. Balise relatives aux audios et aux vidéos................................ 14
7. Balise relative aux figures............................................................ 15
8. Les cadres......................................................................................... 16
9. Les balises relatives aux tableaux ............................................. 18
10. Balises relatives au formulaire ................................................ 21
PARTIE 2 : LES STYLES CSS 3 ........................................................... 25
I. Les règles générales ...........................................................25
II. Les sélecteurs ....................................................................26
1. Sélectionner un seul élément ..................................................... 26
2. Sélectionner plusieurs éléments ................................................ 27
3. Le sélecteur universel ................................................................... 28
III. Les classes .........................................................................28
1. Appliquer une classe à un élément ........................................... 28
2. Appliquer plusieurs classes au même élément ..................... 30
IV. Sélecteur d’identifiant id ....................................................32

II
 INITIATION PROGRAMMATION WEB

V. Les sélecteurs d’attributs ...................................................33

1. Les sélecteurs de valeur d’attribut ............................................ 34
2. Les sélecteurs de valeur d’attribut CSS 3 ............................... 35
VI. Les sélecteurs contextuels parent-descendant ....................36
VII. ....................................... Les sélecteurs d’éléments adjacents
38
VIII. ..................................................... La déclaration !important
39
IX. L’héritage ...........................................................................40
PARTIE 3 : BOOTSTRAP ........................................................................ 42
1. Intégration de bootstrap dans une application web ................... 42
2. Bootstrap et les styles de mise en page ......................................... 42
3. Mise en forme des tableaux ............................................................... 46
a. Les tableaux simples en pleine largeur ...............................47
b. Les tableaux à lignes alternées ...........................................47
c. Les tableaux encadrés ........................................................48
d. Les tableaux avec effet de survol ........................................48
e. Les tableaux avec effet de survol ........................................49
4. Mise en forme des formulaires ......................................................... 50
a. Structure de base ...............................................................50
b. Affichage linéaire du formulaire..........................................51
c. Affichage Vertical du formulaire .........................................53
d. Les champs de saisie ..........................................................54
e. Les boutons .......................................................................55
5. Mise en forme de Menu (Horizontal et Vertical)........................... 57
a. La navigation verticale........................................................57
b. La navigation Horizontale ...................................................58
6. Mise en forme des pages et grille ..................................................... 59
a. La taille des écrans ............................................................60
b. Largeur des colonnes et classes dédiées .............................61

III
 INITIATION PROGRAMMATION WEB

7. Les composants JavaScript du Bootstrap ..................................... 63

a. Les fenêtres modales ..........................................................63
b. Les alertes ..........................................................................65
c. Le Carrousel.......................................................................65
ANNEXE ........................................................................................................ 67
1. La liste complète des balises HTML5 ..................................67
2. Liste des propriétes CSS3 et leurs significations .................72

IV
 INITIATION PROGRAMMATION WEB

PARTIE I : LE LANGAGE HTML 5

Généalogie de HTML 5

HTML 5 (HyperText Markup Language) est un langage de balisage

(dit aussi langage de marquage) qui permet de structurer le
contenu des pages web dans différents éléments.

Historiquement, les langages de balisage sont issus du langage

SGML (Standard Gene-ralized Markup Language) créé en 1986 pour
structurer des contenus très divers. Ce langage s’est révélé trop
complexe pour être appliqué tel quel au Web, d’où la nécessité d’en
créer une version allégée respectant les mêmes principes
essentiels.

L’inventeur du HTML (1992), Tim Berners-Lee, l’avait conçu à

l’origine comme un outil de structuration des contenus,
principalement textuels, et non pas pour créer des présentations
diversifiées. Ce sont les développements successifs, l’essor
populaire du Web et la concurrence acharnée entre Netscape et
Microsoft pour s’emparer du marché des navigateurs, qui ont
détourné HTML de sa vocation première avec l’ajout d’éléments de
présentation qui n’avaient rien à y faire. Voulant faire mieux que
l’autre, chacun des deux grands a empilé des couches superflues
sur HTML. Il faut également reconnaître que l’entrée du Web dans
le grand public nécessitait de répondre à une demande d’interfaces
graphiques plus esthétiques.

1
 INITIATION PROGRAMMATION WEB

L’absence d’un langage particulier dédié uniquement à la

présentation poussait effectivement les webmesters à utiliser tous
les moyens pour créer des présentations visuelles agréables.
L’apparition de CSS (Cascading Styles Sheets), créé en 1996 par
Hâkon Wium Lie, aurait dû résoudre le problème du détournement
de HTML de sa destination première. Mais les mauvaises habitudes
étaient prises et la facilité faisait le reste.
L’apparition de HTML 4, et particulièrement de sa version strict
associée à l’emploi systématique de CSS 2 (publié en 1998), pouvait
apporter une solution efficace à ce problème. La création de XML
(eXtensible Markup Language) en 1998 et son succès dans de
multiples domaines d’application ont conduit le W3C à créer le
langage XHTML, non plus comme une nouvelle version de HTML,
mais comme une reformulation de HTML en tant qu’application
XML. Au niveau des éléments et des attributs disponibles, il
existait à vrai dire très peu de différences entre HTML 4 strict et
XHTML 1.1.
L’impossibilité pour le W3C de trouver un consensus entre les
éditeurs de navigateurs et les créateurs de moteurs de recherche
pour faire évoluer XHTML a conduit un groupe indépendant, le
WHATWG (Web Hypertext Application Technology Working Group)
dirigé par Ian Hickson (aujourd’hui chez Google !), à entamer le
développement de HTsML 5

I. Les balises et les attributs

1. Les balises
Les pages HTML sont remplies de ce qu'on appelle des balises.
Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles

2
 INITIATION PROGRAMMATION WEB

permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les

balises se repèrent facilement. Elles sont entourées de «chevrons»,
c'est-à-dire des symboles <et>, comme ceci : <balise>
Elles indiquent la nature du texte qu'elles encadrent. Elles peuvent
signifier par exemple : « Ceci est le titre de la page », « Ceci est une
image », « Ceci est un paragraphe de texte », etc.
On distingue deux types de balises : les balises en paires et les
balises orphelines.

a. Les balises en paire

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici
à quoi elles ressemblent : <titre>Ceci est un titre</titre>
On distingue une balise ouvrante (<titre>) et une balise fermante
(</titre>) qui indique que le titre se termine. Cela signifie pour
l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est
pas un titre.

b. Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément
à un endroit précis (par exemple une image). Il n'est pas nécessaire
de délimiter le début et la fin de l'image, on veut juste dire à
l'ordinateur « Insère une image ici ». Une balise orpheline s'écrit
comme ceci : <nom_balise />

2. Les attributs
Les attributs sont un peu les options des balises. Ils viennent les
compléter pour donner des informations supplémentaires.

3
 INITIATION PROGRAMMATION WEB

L'attribut se place après le nom de la balise ouvrante et a le plus

souvent une valeur, comme ceci :
<nom_balise attribut="valeur">
Exemple :
< nom_balise attribut1="Neil Armstrong"
attribut2="21/07/1969">
C'est un petit pas pour l'homme, mais un bond de géant pour
l'humanité.
</nom_balise >

3. Structure de base d’une page HTML 5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>

 Le doctype
<!DOCTYPE html>
La toute première ligne s'appelle le doctype. Elle est indispensable
car c'est elle qui indique qu'il s'agit bien d'une page web HTML. Ce
n'est pas vraiment une balise comme les autres (elle commence par

4
 INITIATION PROGRAMMATION WEB

un point d'exclamation), vous pouvez considérer que c'est un peu

l'exception qui confirme la règle.

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

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

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

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, cela ne
change rien à l'affichage de la page. C’est une balise HTML avec
une forme bien spéciale : <!-- Inserrer un commentaire -->
Exemple :

5
 INITIATION PROGRAMMATION WEB

<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>

4. Les règles de base HTML 5

Un document HTML doit respecter certaines règles simples :
 Les éléments et les attributs sont insensibles à la casse. Par
exemple, <body> et <B0DY> sont acceptés. Choisissez une casse
selon votre goût et conservez-la.
 Les éléments non vides doivent avoir une balise d’ouverture et
une balise de fermeture. Cela facilite la tâche des navigateurs.
Par exemple, plutôt que d’écrire :
<ol>
<1i >élément 1 <1i> élément 2
on préférera le code suivant :
<ol>
<1i> élément 1</li>
<1i> élément 2</li>
</ol>

6
 INITIATION PROGRAMMATION WEB

 Les éléments vides ne comportent qu’une seule balise et il est

plus correct de les terminer par les caractères /> précédés d’un
espace pour marquer la fin de l’élément. Par exemple, plutôt que
d’écrire :
<img src= "[Link]"> <hr> <br>
on préférera le code suivant :
<img src= "[Link]" /> <hr /> <br />
 Les éléments ne doivent pas se chevaucher et donc obéir au
principe premier ouvert, dernier fermé. Dans ce cas, le premier
élément est le parent du second et celui-ci est enfant du premier.
Par exemple, le code suivant est incorrect :
<div> Cette division contient un titre <hl> Important ! </div>
</hl>
et doit être remplacé par :
<div> Cette division contient un titre <hl> Important !
</hl></div>

 Tous les attributs doivent avoir une valeur incluse entre

guillemets ("). Les différents attributs du même élément doivent
être séparés par au moins un espace. Par exemple, plutôt que
d’écrire :
<p class=styleperso title=attention> Texte important</p> on
préférera le code suivant :
<p class="styleperso" title="attention" > Texte important</p>

7
 INITIATION PROGRAMMATION WEB

 Une valeur doit être donnée à tous les attributs utilisés, y

compris à ceux dont la valeur est unique. Par exemple, plutôt
que d’écrire :
<input type= "checkbox" checked disabled /> on préférera le code
suivant :
<input type= "checkbox" checked="checked" disabled="disabled"
/>

 Il y a des exceptions car certains attributs ne doivent pas avoir

de valeur en particulier quand elle est booléenne. Dans ce cas,
la présence seule du nom de l’attribut signifie implicitement la
valeur true et l’absence de la valeur false.

5. L’environnement de travail
Pour créer des pages web avec HTML 5 et CSS 3, il faut être doté
d’un environnement de travail adapté. En théorie, un simple
éditeur de texte tel que le Bloc-notes de Windows ou Emacs sous
Linux peut suffire. Cependant, comme la saisie des noms des
différents éléments HTML 5 dans ce type d’éditeur peut devenir à
la longue plutôt rébarbative, nous pouvons utiliser quelques outils
susceptibles de faire gagner du temps : notepad++, sublime text,
Dreamweaver etc….

II. Les différentes balises

1. Balises relatives au paragraphe
<p> </p> : pour organiser son texte en paragraphes ;
<br /> : pour aller à la ligne.

8
 INITIATION PROGRAMMATION WEB

2. Balises relatives au texte

<h1> </h1> : signifie « titre très important ». En général, on s'en
sert pour afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie « titre important ».
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut
dire un « sous-titre » si vous voulez).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment, mais alors là vraiment pas important
du tout.

<em> </em>.Permet de mettre le texte en italique

<strong> </strong> : Perme de dire que le texte est important (texte

en gras)

<mark></mark> : Permet de surligner le texte

3. Balises relatives à la liste

Les listes nous permettent souvent de mieux structurer notre
texte et d'ordonner nos informations. Elles sont de plusieurs
types:
 Les listes simples
 Les listes non ordonnées ou listes à puces ;
 Les listes ordonnées ou listes numérotées ou encore
énumérations.

a. Les listes simples

Elles sont définies par les balises suivantes :

9
 INITIATION PROGRAMMATION WEB

<dl>
<dt> </dt>
<dt> </dt>
</dl>

b. Listes non ordonnées

Elle est illustrée par les balises suivantes :
<ul></ul> délimite toute la liste ;
<li></li> délimite un élément de la liste (une puce).

Exemple :

<ul Type=x>
<li>Toto</li>
<li>Tata</li>
<li>Titi</li>
</ul>

X=circle; disc ou square

c. Listes ordonnées
<ol></ol> délimite toute la liste ;
<li></li> délimite un élément de la liste (une puce).
Exemple :

<h1>Liste des fournitures</h1>

<ol Type=y>
<li>Cahier.</li>
<li>Bic</li>
<li>Ensemble géométrique</li>

10
 INITIATION PROGRAMMATION WEB

</ol>

y=1; a ; A ; i ou I

4. Balise relative au lien

Pour indiquer un lien on utilise la balise suivante : <a
href="chemin vers le fichier"></>

 Lien absolu
Exemple :
<p> Voulez-vous découvrir ce que c’est que la magie ?
<a href="[Link] ici</a>
</p>

 Lien relatif
Soit deux fichiers [Link] et [Link] se trouvant dans un même
dossier. Si on se trouve sur le fichier [Link], pour faire un lien
vers [Link] on écrira simplement <a href="[Link]"></>

 Lien vers une ancre

Une ancre est un point de repère utilisé lorsque les pages html sont
très longues. Il permet de faire un saut vers un autre titre plus bas
de la page.

Exemple :

<h2 id="mon_ancre">Titre</h2>
<a href="#mon_ancre">Aller vers l'ancre</a>

11
 INITIATION PROGRAMMATION WEB

NB : On peut être amené à faire un lien vers une ancre qui se situe
sur une autre page. Dans ce cas la déclaration se fera de la manière
suivante :
<a href="[Link] #ancre">Aller vers l'ancre sur une autre
page</a>

 Lien qui affiche une infobulle au survol

<a href="Chemin vers mon fichier" title="Mon infobulle">Tester
voir</a>

 Un lien qui ouvre une nouvelle fenêtre

Pour le faire, il faut rajouter l’attribut target="_blank" à la balise
<a>
<a href="Chemin vers mon fichier" target="_blank">Nouvelle
fenêtre</a>

 Lien pour envoyer un e-mail

<a href="[Link] un e-
mail</a>

 Lien pour télécharger un fichier

<a href="[Link]">Télécharger le fichier</a>

Exercice de synthèse 1
Vous allez créer une page, appelée [Link], qui fera apparaître
plusieurs mises en forme de listes. La page comprendra 2 parties.
Il est conseillé d’aller vérifier dans le navigateur votre travail entre

12
 INITIATION PROGRAMMATION WEB

chaque partie. Pour cela, enregistrez votre fichier et réactualiser la

page dans le navigateur.
Description de la page à créer :
 Le fond de la page sera de la couleur "palegoldenrod" et le
texte sera "marroon".
 Le titre de la page sera : Les listes
1ère partie :
 un titre de niveau 1, centré : LISTES A PUCES
 une liste à puces de trois choix appelés : choix1, choix2,
choix3.
 Une ligne séparatrice
2ème partie :
 un titre de niveau 1, centré : LISTES NUMEROTEES
 Une liste numérotée de deux choix appelés : choix1, choix2.

5. Balise relative aux images

On insère une image à travers la balise orpheline et deux
attributs <img src="chemin vers le fichier" alt="Description de
l’image"/>
On distingue différents formats d’image dont les plus utilisés
sont :
JPEG : pour les photos,
PNG : pour toutes les autres illustrations,
GIF : similaire au PNG, plus limité en nombre de couleurs mais
qui peut être animé.
Exemple :
<img src="ma_photo.jpg" alt="Photo préférée" />

13
 INITIATION PROGRAMMATION WEB

Pour ajouter une infobulle à une image il suffit d’ajouter l’attribut

‘ title ’ à la balise <img/>
Exemple :
<img src=" ma_photo.jpg " alt=" Photo préférée " title="Au
survol"/>

6. Balise relatives aux audios et aux vidéos

On insère les audios et les vidéos grâce aux balises suivantes :
<audio src="URL fichier" ></audio>
<video src="URL fichier">...</video>
Voici les attributs qu’on peut ajouter aux balises <audio> et
<video>
 controls="controls" qui permet d’afficher des éléments de
contrôle (lecture, pause, retour, durée...) en dessous de la vidéo.
 autoplay="autoplay" qui déclenche la lecture dès l’ouverture de
la page et le début du chargement du fichier. Pour obtenir le cas
contraire, il faut simplement supprimer cet attribut.
 poster="URL image" qui affiche une image fixe le temps que la
vidéo se charge et démarre soit automatiquement, soit par action
du visiteur.
 1oop="l oop" pour lire le fiehier en boucle (c’est le cas sur les
sites pour les publicités par exemple) ; sinon, il faut enlever cet
attribut.
 muted="muted" pour supprimer le son (non reconnu à ce jour).
 preload="none | metadata | auto" qui détermine le
comportement du navigateur quant au préchargement du

14
 INITIATION PROGRAMMATION WEB

fichier. Avec la valeur none, aucun préchargement n’est effectué

jusqu’à ce que l’utilisateur ne démarre la lecture. Avec la valeur
metadata, seules les métadonnées sont préchargées. La valeur
auto entraîne le préchargement du fichier en même temps que
celui de la page.
 height et width pour imposer des dimensions au cadre de la
vidéo. Si une seule valeur est donnée, l’autre est déterminée
pour conserver les proportions de l’image.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Une vidéo en HTML&nbsp;5</title>
<meta charset="UTF-8"/>
</head>
<body>
<video src="shakira.mp4" type="video/mp4" controls =
"controls" height="300" width="450" autoplay="autoplay"
oop="loop">
</video>
</body>
</html>

7. Balise relative aux figures

En HTML 5, on dispose de la balise <figure></figure> qui permet
d’insérer les figures.
Exemple :

15
 INITIATION PROGRAMMATION WEB

<figure>
<img src="images/[Link]" alt="Bloc-Notes" />
</figure>
On peut aussi ajouter une légende à une figure grâce à la balise
<figcaption></figcaption>
<figure>
<img src="images/[Link]" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>

8. Les cadres
On peut partager la fenêtre du navigateur avec la technique des
cadres (frames) :
Deux balises sont utilisées : FRAMESET et FRAME
<FRAMESET> fractionnement de la fenêtre active.
<FRAMESET ROWS ="30%, 70%"> partage horizontal.
<FRAMESET COLS ="30%, 70%"> partage vertical.
<FRAME> contenu du cadre.
<FRAME SRC="[Link]"> [Link] sera chargée dans ce cadre.
Important : la balise <FRAMESET> remplace la balise <BODY>.

Exemple : tester les trois codes html suivants

16
 INITIATION PROGRAMMATION WEB

<HTML> <HTML> <HTML>

<HEAD> <HEAD> <HEAD>
<TITLE>CADRE1</ <TITLE>cadre <TITLE>cadre3</TITL
TITLE> 2</TITLE> E>
</HEAD> </HEAD> </HEAD>
<FRAMESET <FRAMESET <FRAMESET
COLS="25%,*"> ROWS="25%,*"> ROWS="15%,*">
<FRAME <FRAME <FRAME
SRC="[Link]"> SRC="[Link]"> SRC="[Link]">
<FRAME <FRAME <FRAMESET
SRC="[Link]"> SRC="[Link]"> COLS="30%,*">
</FRAMESET> </FRAMESET> <FRAME
</HTM> </HTM> SRC="[Link]">
<FRAME
SRC="[Link]">
</FRAMESET>
</FRAMESET>
</HTM>

Exemple 2 : Réaliser le cadre suivant

1
2

17
 INITIATION PROGRAMMATION WEB

4
3

9. Les balises relatives aux tableaux

Un tableau est défini par les balises suivantes :
<table/>
<tr>
<td>
</td>
</tr>
<table/>
Exemple 1:
<Table border=2 width="40%">
<tr>
<td colspan="4" align="center"> 1</td>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>

18
 INITIATION PROGRAMMATION WEB

<td> E </td>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
<tr>
<td> I </td>
<td> J </td>
<td> K </td>
<td> L </td>
</tr>
</Table>

Exemple 2 : Réaliser le tableau suivant

Exercice de synthèse 2
Vous allez créer une page, appelée [Link], qui fera
apparaître plusieurs tableaux. La page comprendra 2 parties. Il est
conseillé d’aller vérifier dans le navigateur votre travail entre

19
 INITIATION PROGRAMMATION WEB

chaque partie. Pour cela, enregistrez votre fichier et réactualiser la

page dans le navigateur.
Description de la page à créer :
 Le fond de la page sera de la couleur "palegoldenrod" et le
texte sera "marroon".
 Le titre de la page sera : LES TABLEAUX
1ère partie :
 un titre de niveau 1, centré : TABLEAU SIMPLE
 Vous réaliserez le tableau dont la description en HTML est
donnée ci-dessus. Ce tableau sera centré.
 Une ligne séparatrice
2ème partie :
 un titre de niveau 1, centré : TABLEAU PLUS COMPLEXES
 Vous réaliserez un tableau, centré, similaire au tableau ci-
dessous :

 Une ligne séparatrice de 200 pixels de large

 Vous réaliserez un tableau, centré, similaire au tableau ci-
dessous :

 Une ligne séparatrice de 200 pixels de large

20
 INITIATION PROGRAMMATION WEB

 Vous réaliserez un tableau, centré, similaire au tableau ci-

dessous :

10. Balises relatives au formulaire

La structure générale d’un formulaire est la suivante :
<form method=”#” action="#">
<fieldset>
<1egend>Formulaire type</legend>
<hl>Les composants du formulaire</hl>
<!-- Composants du formulaire -->
</fieldset>
</form>
Les composants d’un formulaire :

1. Zone de texte
<input type=”#” name="#" value="#">

2. L'élément textarea
<Textarea name="commentaire" rows=10 cols=40>
Tapez vos commentaires ici
</textarea>

3. L’élément radio

21
 INITIATION PROGRAMMATION WEB

Exemple:
<input type="radio" name="sexe" value="F" checked>
Feminin<br/>
<input type="radio" name="sexe" value="M"> Masculin

4. Case à cocher
Exemple:
<input type="checkbox" name="ch" value="Word" checked>
Word<BR>
<input type="checkbox" name="ch" value="Excel"> Excel<BR>
<input type="checkbox" name="ch" value="Access"> Access

5. Menu déroulante
<select name="#">
<option><option>
</select >
Example:
<select name="liste">
<option> Taro
<option> Patate
<option> Igname
<option selected> Pomme de Terre
<option> Oignon
<option> Ail
</select >

<select name="liste1" size=4>

<option> Taro

22
 INITIATION PROGRAMMATION WEB

<option> Patate
<option> Igname
<option selected> Pomme de Terre
<option> Oignon
<option> Ail
</select >

<select name="liste2" size=4 multiple>

<option> Taro
<option> Patate
<option> Igname
<option selected> Pomme de Terre
<option> Oignon
<option> Ail
</select >

6. Les boutons
<input type="submit" name="bouton1" value="Envoyer">
<input type="reset" name="bouton2" value="Effacer">

Exercice de synthèse 3
Ecrire le code HTML pour obtenir un formulaire ressemblant à la
capture d’écran ci-dessous.

23
INITIATION PROGRAMMATION WEB

24
 INITIATION PROGRAMMATION WEB

PARTIE 2 : LES STYLES CSS 3

Les feuilles de style CSS permettent de mettre en forme les

éléments du langage HTML.

I. Les règles générales

Une déclaration de style comporte plusieurs parties, selon l’ordre
suivant.
 Un sélecteur qui va déterminer à quel élément et éventuellement
dans quelles conditions va s’appliquer le style. Autant que les
propriétés, c’est la variété des sélecteurs qui fait la richesse de
CSS.

 La déclaration des propriétés que l’on veut voir appliquées à

l’élément sélectionné. Elle doit être incluse entre des accolades
ouvrante ({) et fermante (}).

 Dans ces accolades doivent apparaître une ou plusieurs

propriétés, déterminées chacune par un mot-clé propre à CSS
suivi du caractère deux-points (:), puis de la valeur attribuée à
cette propriété. Si nous définissons plusieurs propriétés dans le
même style, il faut séparer chaque déclaration de la précédente
par le caractère point-virgule (;)

 Les propriétés sont en nombre limité et font l’objet d’une

recommandation du W3C. La version actuelle de CSS est la
version 3, dans laquelle ont été éliminées un certain nombre de

25
 INITIATION PROGRAMMATION WEB

propriétés qui n’étaient mises en application par aucun

navigateur, et qui comporte de nouvelles propriétés par rapport
à la version CSS 2.

Exemple :
Sélecteur {
Propriéte 1 : valeur1 ;
Propriéte 1 : valeur1 ;
}
div {color : red ; background-color :yellow ;}

II. Les sélecteurs

Une des grandes richesses de CSS est la multiplicité des
possibilités de sélection des éléments auxquels on veut attribuer
un style donné. Cette très grande diversité permet en effet
d’appliquer un style aussi facilement à tous les éléments, en une
seule ligne de code, qu’à un unique élément isolé dans la page web,
sans avoir à écrire la définition localement. De plus, la combinaison
de plusieurs sélecteurs dans la même déclaration ouvre la voie à
une quasi-infinité de solutions, propres à répondre à tous les
besoins, même les plus complexes.

1. Sélectionner un seul élément

Il s’agit de la sélection la plus simple, puisque le sélecteur est
constitué du nom de l’élément sans les caractères de début < et
de fin de balise />. Nous écrivons par exemple :

26
 INITIATION PROGRAMMATION WEB

p {color : yellow ; background-color : blue;} pour que le texte de

tous les paragraphes figure en jaune sur fond bleu.

2. Sélectionner plusieurs éléments

Nous pouvons très facilement appliquer le même style à plusieurs
éléments différents en les énumérant et en les séparant par une
virgule dans le sélecteur.
Plutôt que de multiplier les définitions :
hl {color : black ; background-color : red;}
div {color : black ; background-color : red;}
p {color : black ; background-color : red;}
Nous pouvons écrire le style suivant :
hl,div,p {color : black ; background-color : red;}

Cette possibilité de regroupement peut être utile pour définir des

styles communs à un ensemble d’éléments en écrivant ce type de
sélecteur pour cet ensemble, puis en ajoutant d’autres propriétés
spécifiques à un des éléments de la liste. On définit ainsi une sorte
de tronc commun à un groupe, puis on affine chacun de ses
composants.
Si nous écrivons par exemple le code suivant :

hl,div,p {color : black ; background-color : red;}

div {margin : 20px;}

27
 INITIATION PROGRAMMATION WEB

3. Le sélecteur universel
Pour appliquer un style à tous les éléments, nous utiliserons le
sélecteur universel * avant la définition d’une ou plusieurs
propriétés. Par exemple, pour que la couleur de fond de tous les
éléments soit le jaune, nous écrirons :

*{background-color : yellow;}

Cela n’empêche pas de modifier cette couleur de fond pour un

élément particulier, en la redéfinissant uniquement pour celui-ci,
par exemple :

*{background-color : yellow;}
p{background-color : gray;}

Dans ce cas, tous les éléments ont un fond jaune, sauf <p> qui a
un fond gris redéfini spécialement.

III. Les classes

1. Appliquer une classe à un élément
Nous avons vu que tous les éléments HTML 5 possèdent l’attribut
class. Ce dernier permet d’appliquer un style défini dans une classe
à un élément dont l’attribut class se voit attribuer le nom de cette
classe. Pour créer une classe, le sélecteur est constitué du nom
choisi pour la classe précédé d’un point (.). Le nom de la classe
peut être un mot quelconque, en évitant quand même les noms des
propriétés CSS et des éléments HTML 5 car cela occasionnerait des

28
 INITIATION PROGRAMMATION WEB

confusions. Nous pouvons par exemple définir la classe nommée

evidence en écrivant le code :
.evidence (color : red;}
À ce stade, la classe est abstraite et ne s’applique à aucun élément.
Pour mettre en évidence un paragraphe précis de la page avec un
texte rouge, nous devons alors écrire dans le code HTML 5 :

<p class="evidence">Texte contenu du paragraphe</p>

Les classes présentent l’intérêt de pouvoir s’appliquer à

n’importe quel élément, n’importe où dans le code de la page. Notre
classe evidence peut donc s’appliquer à un titre <hl>, une division
<div> ou un élément <span>, simplement en écrivant pour chacun
d’entre eux l’attribut class="evidence".
Nous pouvons également définir une classe en la déclarant
applicable seulement à un élément en faisant précéder son nom de
celui de l’élément. Nous pouvons écrire par exemple :

[Link] {color : yellow;}

Dans ce cas, seules les divisions ayant un attribut class dont la

valeur est jaune ont un texte jaune. Les autres éléments, et même
s’ils ont le même attribut avec la même valeur, n’ont pas de style
défini dans cette classe.
Le sélecteur universel * peut également être employé à la place
du nom d’un élément dans la définition d’une classe. Le style

29
 INITIATION PROGRAMMATION WEB

s’applique alors à tous les éléments dont l’attribut class a pour

valeur le nom de la classe. Nous écrivons alors par exemple :

*.jaune {color : yellow;}

Il est possible de définir d’abord une classe abstraite, puis de la

particulariser en ajoutant une autre propriété pour un élément qui
utilisera la même classe. Dans le code CSS ci-après :

.rouge {color : red;}

[Link] {background-color : blue;}

<div class="rouge">Texte contenu de la division </div>

Implique que le texte contenu dans l’élément <div> est affiché en
rouge sur fond bleu.

2. Appliquer plusieurs classes au même élément

L’avantage de définir des classes abstraites est, nous l’avons vu,

qu’elles peuvent s’appliquer à n’importe quel élément. Leur
puissance peut être multipliée car nous pouvons appliquer
plusieurs classes indépendantes à un même élément. Celui-ci a
alors la combinaison des propriétés de chacune des classes. Pour
utiliser plusieurs classes dans le même élément HTML 5, il faut
donner à son attribut class la liste des noms des classes en les
séparant par un espace comme ceci :
<div class="classel classe2"> Ceci est un texte avec la classe 1 et 2
</div>

30
 INITIATION PROGRAMMATION WEB

Les combinaisons d’emploi des classes sont alors multiples,

chaque classe pouvant définir une caractéristique, et chaque
élément pouvant en utiliser plusieurs au choix.
Exemple:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8” />
<title> Les classes de style </title>
<style type="text/css" title="classes">
*.jaune{color: green;}
[Link] {color: yellow;}
.classel {color: red;}
.classe2 {font-style: italic}
.classe3 {background-color: #CCC;}
</sty1e>
</head>
<body>
<hl class="jaune">HTML 5 et CSS</hl>
<div class="classel">
Ceci est un texte avec la classe1 (texte rouge) <br/> <br/>
</div>
<div class="classel classe2">
Ceci est un texte avec la classe 1 et 2 (texte rouge et en italique)
<br/><br/>

31
 INITIATION PROGRAMMATION WEB

</div>
<div class="classel classe3">@
Ceci est un texte avec les classes 1 et 3 (texte rouge et fond gris)
<br/><br/>
</div>
<div class="jaune classe2 classe3">
Ceci est un texte avec les classes [Link], 2 et 3 (texte jaune, en
italique et fond gris)
</div>
</body>
</html>

IV. Sélecteur d’identifiant id

Pratiquement, chaque élément peut avoir un attribut id qui doit
être unique dans une page donnée. Nous pouvons écrire un style
qui ne sera applicable qu’à l’élément dont l’attribut id a une valeur
précise en donnant cette valeur au sélecteur (comme pour une
classe) et en le faisant précéder du caractère dièse (#).
En écrivant le style suivant :

div {color: black;}

#bleu {color: white; background-color : blue;}

<div id="bleu">Texte en blanc sur bleu</div>

<div>Texte en noir </div>

32
 INITIATION PROGRAMMATION WEB

Seul l’élément <div> contenant l’attribut id="bleu" bénéficie du

texte en blanc sur fond bleu, et aucun autre, car l’identifiant doit
être unique dans une page, et les autres éléments <div> ont un
texte noir. Ce type de définition est très ciblé car le style ne peut
s’appliquer qu’à un seul élément du fait de l’unicité de l’identifiant
id.

NB : Les valeurs de l’attribut id sont sensibles à la casse en HTML

5 ; bleu et B1eu sont donc deux identifiants différents (sauf dans
Internet Explorer pour qui la casse importe peu).

V. Les sélecteurs d’attributs

Il est également possible d’appliquer un style à un élément
déterminé dès qu’il possède un attribut donné, quelle que soit la
valeur de cet attribut. Pour appliquer ce sélecteur, le nom de
l’élément doit être suivi du nom de l’attribut placé entre crochets
([) et (]). En définissant le style suivant :

<abbr>[title] {color: red; background-color: gray;}

Tous les éléments <abbr> qui possèdent un attribut title, quelle

que soit sa valeur, ont un contenu affiché en rouge sur fond gris.
De même, en définissant le style pour l’élément <img/> :

img[ismap] {border-color : red; border-weight: 2px;}

33
 INITIATION PROGRAMMATION WEB

Toutes les images ayant un attribut ismap ont une bordure rouge
de deux pixels de large.
Nous pouvons également créer un style applicable à tous les
éléments qui possèdent un attribut donné en utilisant le sélecteur
universel * placé devant les crochets qui contiennent le nom de
l’attribut choisi. Si nous définissons le style suivant :

*[title] {background-color : yellow;}, ce sont tous les éléments ayant

l’attribut title qui sont affichés avec un fond jaune.
Comme pour les classes, il est possible de sélectionner plusieurs
attributs pour un élément en faisant suivre son nom de plusieurs
attributs entre crochets. Si nous écrivons le style suivant :
h2[title][id]{background-color: yel1ow;}, seuls les titres <h2> ayant
à la fois les attributs title et id ont une couleur de fond jaune.

1. Les sélecteurs de valeur d’attribut

Nous pouvons appliquer un style à un élément à condition que ses
attributs aient une valeur précise en utilisant la syntaxe suivante
:
element [attribut="valeur"] {Définition du style;}
Exemple :
code[title="code JavaScript"] {color: blue;}
Il est aussi possible de particulariser davantage l’application du
style en sélectionnant plusieurs attributs et leurs valeurs en
utilisant la syntaxe :
element[attributl="valeurl"][attribut2="valeur2"] {Définition du
style;}

34
 INITIATION PROGRAMMATION WEB

Par exemple, avec la définition suivante, appliquée à une cellule de

tableau :

td {font-size: 12px;}
td [title="nom"] [align="center"] {font-size: 14px; color: red;}

seules les cellules ayant un attribut title avec la valeur nom et un

attribut align ayant la valeur center sont affichées avec un texte
rouge et avec une taille de fonte de 14 pixels, alors que le texte des
autres cellules a une taille de 12 pixels.

2. Les sélecteurs de valeur d’attribut CSS 3

De nouveaux sélecteurs ont été créés dans CSS 3. Ils permettent
d’affecter un style à un élément de manière encore plus fine que
les précédents, ou redéfinissent la sélection d’une valeur d’attribut.
Les syntaxes à utiliser sont les suivantes :
element[attribut ^= "valeur"]{définition du style}
element[attribut $="valeur"]{définition du style}
element[attribut *="valeur"] {définition du style}

Dans le premier cas, le style est attribué à l’élément dont l’attribut

commence par la chaîne valeur, dans le deuxième cas si l’attribut
finit par cette même chaîne, et enfin dans le troisième, s’il contient
simplement cette chaîne à n’importe quelle place.

En écrivant par exemple les styles suivants :

td[id ^= ”nom"]{background-color:blue;color:white;}

35
 INITIATION PROGRAMMATION WEB

td[id $= "nom"]{background-color:red;color:white;}
td[id *= nnom"]{background-color:black;color:white;}
Puis le code HTML suivant :
<td id="nom de famille">Engels</td>
<td id="mon nom">Engels</td>
<td id="c mon nom de famille">Engels</td>

VI. Les sélecteurs contextuels parent-descendant

Plutôt que de définir un style pour toutes les occurrences d’un
élément, nous pouvons souhaiter ne l’appliquer qu’en fonction de
sa position relative par rapport à un autre dans la hiérarchie des
éléments de la page. Ce type de sélecteur est dit contextuel. Nous
pouvons, par exemple, définir un style général pour l’élément <p>
et vouloir lui en appliquer un autre quand il se trouve inclus dans
un élément <div>. Pour cela, il faut utiliser la syntaxe suivante :
element_parent element_enfant {Définition des styles;}
En écrivant par exemple le style suivant :

p (color: blue;}
div p {color: red;}

Et en l’appliquant au code HTML 5 ci-après :

<div>
<p>Texte du paragraphe inclus dans div</p>
</div>
<p>Texte d’un paragraphe non inclus dans div </p>

36
 INITIATION PROGRAMMATION WEB

seuls les contenus des éléments <p> inclus dans <div> sont de
couleur rouge, tous les autres étant bleus, et le texte inclus
directement dans <div> a la couleur par défaut qui est le noir.
Il est aussi possible de préciser la hiérarchie en appliquant plus de
deux éléments en les séparant tous par un espace.
Pour appliquer un style différent aux éléments de liste <li> inclus
directement dans une liste non ordonnée <ul> ou dans une liste
ordonnée <ol> elle-même incluse dans une liste non ordonnée
<ul>, nous pouvons définir les sélecteurs suivants :

ul li (background-color : #EEE; color: black;}

ul li ol li (background-color : gray; color: w hite;}

Une fois qu’ils sont appliqués au code des listes ci-après :

<ul>
<1i> Item de niveau 1
<ol>
<li> Item de niveau 2 A </li>
<li> Item de niveau 2 B</1i>
<li> Item de niveau 2 C</1i>
</ol>
</1i>
</ul>
Nous obtenons pour les items de niveau 1 un texte noir sur fond
gris, et pour les trois items de niveau 2, un texte blanc sur fond
gris.

37
 INITIATION PROGRAMMATION WEB

VII. Les sélecteurs d’éléments adjacents

Les sélecteurs précédents font appel à la notion de descendance
parent-enfant. Si on considère dans le code de la page deux
éléments consécutifs enfants du même parent, comme deux
éléments de bloc <div> inclus dans <body> par exemple, il n’existe
pas de relation de descendance entre eux mais une relation de
fratrie. Pour sélectionner ce type de relation entre éléments, nous
disposons du sélecteur + qu’il faut utiliser en adoptant la syntaxe
suivante :
elementl+element2 {Définitions des styles;}

Dans ce cas, le style s’appliquera à l’élément de type 2 uniquement

s’il suit immédiatement un élément de type 1 dans le code HTML 5
sans y être inclus. Si nous définissons les styles suivants :

p {background-color: yellow; color: blue;}

div+p {background-color: blue; color: yellow;}

puis le code HTML 5 ci-après :

<div>Les standards HTML 5 et CSS 3 s’imposent aujourd’hui

<p>Texte d’un paragraphe enfant de div</p>
</di v>
<p>Texte d’un paragraphe frère de div</p>
<p>Texte d’un paragraphe frère de div</p >

38
 INITIATION PROGRAMMATION WEB

Seul le deuxième élément <p> a le style texte jaune sur fond bleu,
le premier n’étant pas frère mais enfant de l’élément <div>. Le
troisième paragraphe aura de plus le même style que le premier car
il ne suit pas immédiatement l’élément <div>.
On note que si les deux éléments sont reliés par le sélecteur +, seul
le second présente un style défini. En effet, si nous écrivons le code
suivant au lieu des styles précédents :

p {background-color: yellow; color: blue;}

p+p {background-color: blue; color: yellow;}

et si nous l’appliquons au même code HTML 5 que précédemment,

seul le troisième paragraphe a le style texte jaune sur fond bleu.
Les premier et deuxième paragraphes bien qu’étant consécutifs
n’ont pas le même parent direct. Notons encore qu’avec ce dernier
style, si un élément <div> contenait plus de deux éléments <p>, le
style jaune sur bleu créé avec le sélecteur p+p s’appliquerait à tous
les paragraphes enfants de <div> sauf le premier. De même, s’il
existait deux paragraphes consécutifs en dehors de l’élément <div>,
le second bénéficierait également du même style.

VIII. La déclaration !important

Chaque déclaration de style peut revêtir un caractère de plus
grande importance par rapport à une autre déclaration concernant
le même élément et la même propriété qui comporte une valeur
différente. Ces deux déclarations peuvent entrer en conflit au
moment de la création de la présentation par le navigateur. Pour

39
 INITIATION PROGRAMMATION WEB

donner cette importance à un style, il faut insérer la déclaration

d’importance à l’aide du mot-clé {important en le plaçant entre la
valeur attribuée à la propriété et le point-virgule qui termine la
déclaration. Dans l’exemple suivant :

*{color: black !important; background-color : yellow;}

div{color: blue; background-color: white;}

Les couleurs de texte et de fond des sélecteurs * et div sont en

conflit, mais comme la propriété color définie dans le sélecteur
universel * est marquée !important, le texte de la division figure en
noir. En revanche, le fond de la division est de couleur blanche car
la valeur yellow n’est pas marquée !important et que la déclaration
effectuée dans div est spécifique.

Il est évidemment possible d’utiliser la déclaration !important pour

plusieurs propriétés dans la même déclaration, par exemple :

*{color: black !important; background-color: yellow !important;}

div{color: blue; background-color: white;}
Dans ce cas, tous les éléments <div> ont un contenu affiché en noir
sur fond jaune, et tous les styles définis en propre pour cet élément
sont ignorés.

IX. L’héritage
L’héritage est le fait qu’un élément enfant possède les mêmes styles
que l’élément qui le contient (son parent dans la hiérarchie des

40
 INITIATION PROGRAMMATION WEB

éléments d’une page). Nous pouvons par exemple définir les styles
suivants :

Div{color: white; background-color: blue;}

Si dans le code HTML 5 de la page figurent les éléments suivants :

<div>Texte
<p>Premier paragraphe
<span class=H">HTML 5</span> et les styles<strong>CSS 2.1
</strong>sont indispensables
</p> à tous !
</div>

L’élément <p> est enfant de <div> et les éléments <span> et

<strong> sont eux-mêmes enfants de <p>. Par héritage et bien sûr
faute d’avoir définis des styles propres pour les éléments <p>,
<span> et <strong>, ceux-ci ont un contenu qui possède les styles
définis pour leur parent direct ou indirect <div>. Ils sont donc tous
en blanc sur fond bleu. Si nous créons un style différent pour
l’élément <p>, ses éléments enfants héritent alors de ces styles et
non plus de ceux de l’élément <div>.

De même, si nous définissons un style pour les éléments de listes

ordonnées ou non <ol> et <ul>, tous les items de la liste, quel que
soit leur niveau d’imbrication, ont les mêmes caractéristiques par
défaut sans qu’il faille créer un style propre pour eux.

41
 INITIATION PROGRAMMATION WEB

PARTIE 3 : BOOTSTRAP

1. Intégration de bootstrap dans une application web

Pour intégrer le bootstrap dans vos applications web, il vous faut

au préalable récupérer l’archive sur [Link] et la
décompresser sur votre machine. Une fois la décompression
effectuée, que votre objectif soit de l’intégrer dans une application
web hébergée en local ou à distance, vous devez vous intéresser au
répertoire dist :

2. Bootstrap et les styles de mise en page

Dès lors que vous faites la liaison avec la feuille de style par défaut
de bootstrap, bootstrap applique une règle CSS au corps de la page,
à l’élément <body>. Nous trouvons une famille de police de
caractère, une taille (14px), un interligne et une couleur, définis
pour tous les contenus de la page.

 Les en-têtes

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-
serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

42
 INITIATION PROGRAMMATION WEB

Règles CSS utilisées pour la taille des Caractères

h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}

Règles CSS utilisées pour les marges

h1,h2,h3{
margin-top: 20px;
margin-bottom: 10px;
}

h1,h2,h3{
margin-top: 10px;
margin-bottom: 10px;
}

43
 INITIATION PROGRAMMATION WEB

 Alignement du texte

Pour gérer les alignements du texte à gauche, centré et à droite,

Bootstrap propose d’utiliser trois classes dédiées:.text-left, .text-
center et .text-right.

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}

 Les citations
Bootstrap recommande d’utiliser un paragraphe <p> dans le
<blockquote> pour une mise en forme différente de la police de

<blockquote>
<p>
Loremipsum dolor sit amet, consecteturadipiscingelit.
Integer posuereerata ante.
</p>
</blockquote>

caractère, avec notamment une taille de caractère plus importante.

44
 INITIATION PROGRAMMATION WEB

 Les listes

Le comportement des listes ordonnées <ol> et non ordonnées

<ul>, n’est pas modifier. Bootstrap utilise juste la propriété
margin pour unifier les marges.

 Les listes sans décoration

La classe .list-unstyled est utiliseé pour avoir une liste sans

décoration (pas de numérotation ni de puces).

Exemple :
<ulclass="list-unstyled">
<li><ahref="#">Bons plans</a></li>
<li><ahref="#">Soirées</a></li>
<li><ahref="#">Lieux</a></li>
</ul>

 Les listes en lignes

Pour avoir une liste dont les items s’affichent en ligne il va falloir
utiliser la classe .list-inline.
<ulclass=" list-inline">
<li><ahref="#">Bons plans</a></li>
<li><ahref="#">Soirées</a></li>
<li><ahref="#">Lieux</a></li>
</ul>

 Les listes de définition

Pour les listes de définitions, Bootstrap vous permet de placer les

45
 INITIATION PROGRAMMATION WEB

mots et les définitions les uns à côté des autres avec la classe .dl-

horizontal.

<dlclass="dl-horizontal"><dt>...</dt><dd>...</dd></dl>

 Mise en forme des images

Bootstrap propose trois types de mise en forme pour les images :

 Image avec coins arrondis ;

 Image en cercle ;
 Image dans un cadre

3. Mise en forme des tableaux

Bootstrap propose 5 types de présentation des tableaux :

46
 INITIATION PROGRAMMATION WEB

a. Les tableaux simples en pleine largeur

Pour avoir un tableau simple en utilisant le Bootstrap, il vous faut

utiliser la classe .table qui assure une mise en forme sobre du
tableau. Cela implique que le tableau à comme élément parent
<body>, sa largeur sera celle du <body>. Donc si besoin est, vous
pouvez placer vos tableaux dans des boites <div>à largeur fixe.

Exemple :

b. Les tableaux à lignes alternées

Pour avoir des tableaux avec des lignes grises et blanches, il suffit
d’ajouter la classe .table-striped. Le fond grisé est appliqué à la
balise <td> avec le sélecteur :nth-child(odd).

.table-striped >tbody>tr:nth-child(odd) {
background-color: #f9f9f9;
}

Exemple :

47
 INITIATION PROGRAMMATION WEB

c. Les tableaux encadrés

Pour avoir des tableaux encadrés, ajoutez la classe .table-bordered

à l’élément <table>.

Exemple :

d. Les tableaux avec effet de survol

Pour avoir un tableau plus resserré (valeur de la propriété padding

réduite), ajoutez la classe .table-condensed à l’élément <table>.

48
 INITIATION PROGRAMMATION WEB

.table-condensed >thead>tr>th,
.table-condensed >tbody>tr>th,
.table-condensed >tfoot>tr>th,
.table-condensed >thead>tr> td,
.table-condensed >tbody>tr> td,
.table-condensed >tfoot>tr> td {
padding: 5px;
}

Exemple :

e. Les tableaux avec effet de survol

Pour activer une mise en évidence des lignes survolées par le

pointeur de la souris, ajoutez la classe .table-hoverà l’élément
<table>.

.table-hover >tbody>tr:hover {
background-color: #f5f5f5;
}

Remarque

Pour avoir un tableau adaptatif, optimisé pour un affichage sur

mobile avec des largeurs d’écran inférieur à 768px, placer le

49
 INITIATION PROGRAMMATION WEB

tableau dans une boite <div> et associer la classe .table-

responsive.

Avec un petit écran, l’utilisateur pourra utiliser une barre de

défilement horizontale pour afficher tout le tableau, uniquement si
cela est nécessaire.

4. Mise en forme des formulaires

a. Structure de base

Pour une mise en forme optimale, Bootstrap préconise de placer

les éléments du formulaire dans des boites <div> utilisant la classe
dédiée .form-group.

La classe .form-contrôle quant à elle permet au champ du

formulaire d’occuper 100% de son conteneur.

50
 INITIATION PROGRAMMATION WEB

b. Affichage linéaire du formulaire

La classe .form-inline appliquée à l’élément <form> permet d’avoir

les champs du formulaire en ligne, c’est-à-dire les uns à la suite
des autres et non plus les uns sous les autres.

51
 INITIATION PROGRAMMATION WEB

La deuxième particularité de cet exemple de formulaire, c’est

l’utilisation de la classe .sr-only dans les éléments <label> qui
permet de ne pas afficher les éléments qui utilisent cette classe.

52
 INITIATION PROGRAMMATION WEB

c. Affichage Vertical du formulaire

Bootstrap permet d’aligner les étiquettes et l’élément du formulaire

verticalement avec l’utilisation de la classe .form-horizontal dans
l’élément <form>.

Cet affichage est basé sur la grille adaptative que nous verons par

la suite. C’est donc a vous d’utiliser les classes voulues dans les
éléments<div>, <label> et <input>.

53
 INITIATION PROGRAMMATION WEB

d. Les champs de saisie

Quand un champ est actif, Bootstrap le met nativement en

évidence avec un contour blue ombré.

Pour le désactiver, il suffit d’utiliser l’attribut desabled.

Vous pouvez utiliser trois classes prédéfinies pour mettre en

couleur les champs de saisie :

 .has-seccess qui utilise une couleur verte ;

 .has-warning qui utilise une couleur orange ;

 .has-error qui utilise une couleur rouge.

54
 INITIATION PROGRAMMATION WEB

Avec le Bootstrap, vous pouvez également indiquer une aide pour

les champs du formulaire, pour donner des consignes aux
utilisateurs du formulaire. Chaque aide sera affichée sous les
champs. Pour ce faire, vous pouvez utiliser un élément <span> avec
la classe .help-block.

e. Les boutons

Bootstrap vous propose plusieurs classes pour colorer vos

boutons. Vous pouver donner un sens à vos boutons, de sorte que
vos utilisateurs aient une meilleure expérience dans vos interfaces.

 Largeur des boutons

Vous pouvez gérer la largeur des boutons à l’aide de trois

classes :.btn-lg, .btn-sm, ou .btn-xs.

55
 INITIATION PROGRAMMATION WEB

 Les boutons en bloc

La classe .btn-block va vous permettre de créer des gros boutons

en affichage bloc.

 Les boutons de formulaire

Pour la mise en forme des boutons d’envoi ou d’annulation, utilisez

les classes .btn et .btn-default dans l’élément <input>.

56
 INITIATION PROGRAMMATION WEB

 Désactiver un bouton

Nous l’avons déjà vu avec les formulaires, l’attribut disabled

permet de rendre inactif un bouton avec une mise en forme

spéciale.

Cet attribut peut également être appliqué à un bouton de type lien :

5. Mise en forme de Menu (Horizontal et Vertical)

a. La navigation verticale

Les classes .nav et .nav-pills vont vous permettre d’avoir une

navigation par onglets/boutons. Pour avoir une navigation
verticale vous devez associer la classe .nav-stacked.

Comme les boutons de la liste <ul> occupent 100% de la largeur

disponible de l’élément parent, pour éviter d’avoir des boutons
très/trop larges, nous plaçons la liste <ul> dans une boite <div
class="col-*">ou autre ayant une largeur fixe (width :200px).

57
 INITIATION PROGRAMMATION WEB

b. La navigation Horizontale

La barre de navigation est une boite <div>contenant la classe

.navbar. La mise en forme par défaut de cette barre de navigation
est appliquée avec la classe .navbar-default. Ensuite il y’a les
classes .collapse et .navbar-collapse qui permettent la mise en
forme du contenu de la barre de navigation. Les liens <a> sont
placés dans l’élément <li> d’une liste <ul>. L’élément <ul> utilise
les deux classes de mise en forme .nav et .navbar-nav.

58
 INITIATION PROGRAMMATION WEB

<navclass="navbarnavbar-default">
<divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-
1">
<ulclass="navnavbar-nav">
<liclass="active"><ahref="#">Link <spanclass="sr-
only">(current)</span></a></li>
<li><ahref="#">Link</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-
toggle="dropdown"role="button"aria-expanded="false">Dropdown
<spanclass="caret"></span></a>
<ulclass="dropdown-menu"role="menu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<li><ahref="#">Separated link</a></li>
<liclass="divider"></li>
<li><ahref="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>

6. Mise en forme des pages et grille

Les grilles de mise en page existent depuis fort longtemps dans

l’imprimerie. Le web étant un média relativement récent comparé
à l’imprimerie, les concepteurs n’ont pas utilisé de grille de mise en
page car le support est différent et changeant. Une page de livre,
de magazine ou de journal a une taille fixe, ce qui permet de
déterminer une grille de mise en page.

Les écrans d’ordinateur ont des tailles et des résolutions bien

différentes et les fenêtres des navigateurs peuvent être
redimensionnées par l’utilisateur : donc beaucoup de contraintes
à résoudre pour la mise en place des grilles de mise en page. Mais

59
 INITIATION PROGRAMMATION WEB

l’avènement des requêtes de média (Media Queries) change la

donne et maintenant il devient tout à fait courant et facile d’utiliser
des grilles de mise en page.

De manière générale, les grilles de mise en page pour le web ont

une largeur maximale de 960px et sont sur 12 ou 16 colonnes.

Bootstrap fournit une classe CSS container utilisée pour regrouper

d’autres éléments.

a. La taille des écrans

Bootstrap permet de gérer quatre types d’écran :

 Les écrans inférieurs à 768px pour les Smartphones ;

 Les écrans supérieurs à 768px pour les tablettes ;

 Les écrans supérieurs à 992px pour les ordinateurs avec

les écrans de taille moyenne ;

 Les écrans supérieurs à 1200px pour les ordinateurs avec

des écrans de taille plus grande.

60
 INITIATION PROGRAMMATION WEB

b. Largeur des colonnes et classes dédiées

Pour gérer la largeur des colonnes dans les grilles adaptatives,

Bootstrap utilise un système de classes dédiées défini dans le
fichier [Link] ou dans [Link].

Sachez que chaque règle @media( ) utilise sont propre préfixe pour
les classes CSS à utiliser :

Taille @media Préfixe des CSS

écran
Smartphone Aucune règle, donc .col-xs-*
comportement par défaut
Tablette @media (min-width :768px) { .col-sm-*
…. }
Ecran @media (min-width :992px) { .col-md-*
Moyen …. }
Ecran Large @media (min-width :1200px) .col-lg-*
{ …. }

Le suffixe * sera le nombre de colonne sur lequel doit être placer

l’élément

A l’intérieur d’un container, Bootstrap gère la zone d’affichage sous

la forme d’une grille de 12 colonnes. La classe [Link] crée
une ligne dans cette grille, et chaque classe Bootstrap col-* crée
une cellule qui regroupe * colonnes dans cette ligne.

61
 INITIATION PROGRAMMATION WEB

Dans chaque ligne, la taille totale des colonnes doit être égale à
12. On peut donc choisir de diviser la surface d’affichage en 12

colonnes de taille 1, ou bien en 3 colonnes de taille 4, ou encore

en une colonne de taille 4 et une colonne de taille 8.

Afin de mieux organiser votre mise en page en ligne, Bootstrap

préconise d’utiliser une boite <div> utilisant la classe .row.

Il faut alors penser votre mise en page en ligne. Chaque ligne va

comporter les boites disposées sur les colonnes de la grille.

62
 INITIATION PROGRAMMATION WEB

<div class= "row"

<div class= "row"

<main class= "col-md-9" <aside class= "col-md-3"

<div class= "row"

<div class= "row"

7. Les composants JavaScript du Bootstrap

Tous les plugins JavaSript du bootstrap ont leur code fonctionnel

dans le fichier [Link] ou ([Link]), mais attention
n’utilisez pas les deux fichiers et n’oubliez pas d’importer la
librairie Jquery dans votre application.

a. Les fenêtres modales

Vous pouvez faire apparaitre une fenêtre de contenu au clic d’un
bouton par exemple. Cela va permettre d’afficher des informations
complémentaires sur un produit par exemple.

63
 INITIATION PROGRAMMATION WEB

Pour cela vous allez utiliser une fenêtre modale, elle est composée
de trois parties : l’en-tête, le corps et le pied de page. La boite <div>

de la racine contient tous les attributs nécessaires à son bon

fonctionnement :

64
 INITIATION PROGRAMMATION WEB

b. Les alertes

Les alertes sont plutôt faites pour les interfaces d’administration

des CMS, mais vous pouvez les utiliser pour mettre en évidence des
propos important dans votre application web.

c. Le Carrousel

65
INITIATION PROGRAMMATION WEB

66
 INITIATION PROGRAMMATION WEB

ANNEXE

1. La liste complète des balises HTML5

Balise Description
<!– … –> Définit un commentaire
<!DOCTYPE> Définit le type du document
<a> Définit un lien
<abbr> Définit une abréviation
<address> Définit une adresse
<area> Définit une zone à l’intérieur d’une image
<article>NOUVEAU Définit un article
<aside>NOUVEAU Définit une partie latérale au contenu
<audio>NOUVEAU Définit un fichier audio
<b> Texte en gras
Définit une URL de base pour tous les
<base>
liens de la page
<bdo> Définit la direction du texte
<blockquote> Définit une longue citation
<body> Définit le corps de la page
<br> Saut de ligne
<button> Définit un bouton cliquable
<canvas>NOUVEAU Définit un graphique
<caption> Légende du tableau

67
 INITIATION PROGRAMMATION WEB

<cite> Définit une citation

Mise en forme d’un texte en code
<code>
informatique
<col> Définit une colonne d’un tableau
Définit un groupe de colonne pour un
<colgroup>
tableau
<command>NOUVEAU Définit un bouton de commande
<datalist>NOUVEAU Définit une liste d’options
<dd> Définition d’un terme
<del> Définit un texte supprimé
<details>NOUVEAU Définit les détails d’un élément
<dfn> Définition
<div> Définit un calque ou une section
<dl> Liste de définition
<dt> Définition d’un terme
<em> Mise en exergue d’un texte – italique
Définit un contenu extérieur (audio, vidéo
<embed>NOUVEAU
…)
Regroupe plusieurs éléments d’un
<fieldset>
formulaire
Légende d’un groupe d’élément
<figcaption>NOUVEAU
multimédia
<figure>NOUVEAU Définit un groupe d’élément multimédia
<footer>NOUVEAU Définit le bas d’un section ou d’une page
<form> Définit un formulaire

68
 INITIATION PROGRAMMATION WEB

Définit un titre par degré importance de 1

<h1> to <h6>
à6
<head> Définit l’en-tête d’un document
<header>NOUVEAU Définit le haut d’une section ou d’une page
Regroupe les informations du haut d’une
<hgroup>NOUVEAU
page ou section
<hr> Barre horizontale
<html> Définit un document html
<i> Texte en italique
<iframe> Introduit un page html dans une frame
<img> Définit une image
<input> Définit un champ
<ins> Définit un texte insérer
<keygen>NOUVEAU Générateur de clé pour un formulaire
<kbd> Raccourcis ou touche du clavier
Légende d’un groupe d’élément de
<label>
formulaire
Titre d’un groupe d’élément d’un
<legend>
formulaire
<li> Élément d’une liste
<link> Définit les relations entre les documents
<map> Définit une carte
Mise en valeur d’un mot ou d’un texte –
<mark>NOUVEAU
Texte marqué
<math>NOUVEAU Définit une formule mathématique
<menu> Définit un menu en liste

69
 INITIATION PROGRAMMATION WEB

Définit des informations relatives au

<meta>
document
<meter>NOUVEAU Définit une unité de mesure
<nav>NOUVEAU Définit un groupe de liens de navigation
Définit une alternative au script non
<noscript>
supporté
Définit un objet du contenu extérieur
<object>
multimédia
<ol> Définit une liste ordonné
Regroupe d’une liste d »option dans un
<optgroup>
formulaire
<option> Option d’une liste dans un formulaire
<output>NOUVEAU Définit un type de sortie
<p> Définit un paragraphe
<param> Définit les paramètres d’un objet
<pre> Texte pré-formaté
<progress>NOUVEAU Définit une progression
<q> Définit une courte citation
Annotation ruby si le script n’est pas
<rp>NOUVEAU
supporté
<rt>NOUVEAU Annotation ruby d’explication
<ruby>NOUVEAU Définit une annotation en ruby
<samp> Définit un échantillon de code
<script> Définit un script
<section>NOUVEAU Définit une section
<select> Définit une liste sélectionnable

70
 INITIATION PROGRAMMATION WEB

<small> Minimise l’importance d’un texte

<source>NOUVEAU Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<strong> Mise en exergue d’un texte – Texte en Gras
<style> Définit un style CSS
<sub> Mise en indice d’un texte
Définit l’en-tête des détails d’un document
<summary>NOUVEAU
ou section
<sup> Mise en exposant d’un texte
<svg>NOUVEAU Définit une image vectorielle
<table> Définit un tableau
<tbody> Définit le corps d’un tableau
<td> Définit une cellule d’un tableau
<textarea> Définit une zone de texte
<tfoot> Définit le bas d’un tableau
<th> Définit une cellule d’en-tête d’un tableau
<thead> Définit le haut d’un tableau
<time>NOUVEAU Définit une unité de temps
<title> Définit le titre d’un document
<tr> Définit une ligne de tableau
Définit une unité de temps pour les
<track>NOUVEAU
éléments <audio> et <video>.
<ul> Définit une liste non-ordonné
<var> Définit une variable
<video>NOUVEAU Définit une vidéo
<wbr>NOUVEAU Définit un possible retour à la ligne

71
 INITIATION PROGRAMMATION WEB

2. Liste des propriétes CSS3 et leurs significations

[Link]
%20CSS%20-%20....pdf

72