Prog Web

07/08/2019 Programmation
web
HTML5, CSS3, PHP et MySQL
MSc. Pie Pacifique NTINANIRWA

UGL
1
Table des matières

A. Objectif global ................................................................................................................... 5
A.1. Objectifs spécifiques.................................................................................................... 5
B. Prérequis............................................................................................................................ 5
C. Introduction ...................................................................................................................... 5
I. Le HTML et Le CSS.......................................................................................................... 6
I.1. Pourquoi apprendre les langages HTML et CSS ? ................................................... 6
I.2 Définitions et rôles du HTML et du CSS .................................................................... 6
I.3. Versions actuelles des langages HTML et CSS ......................................................... 7
I.4. Un mot sur le XHTML.................................................................................................. 7
I.5. L’éditeur de texte .......................................................................................................... 7
I.6. Les fondations du html ................................................................................................ 8
I.6.1. Éléments, balises et attributs ................................................................................ 8
I.6.2. Structure de base d’une page en HTML5 ........................................................... 9
I.6.3. Les éléments Heading, Paragraph et Break ..................................................... 11
I.6.4. Les éléments Strong, Emphasis et Mark ........................................................... 13
I.6.5. Listes ordonnées et non-ordonnées ................................................................... 13
I.6.6. Listes de définitions ............................................................................................. 15
I.6.7. Listes imbriquées ................................................................................................. 16
I.7. Liens internes et liens externes ................................................................................. 16
I.7.1. Les autres types courants de liens ..................................................................... 19
I.8. Les fondations du CSS................................................................................................ 21
I.8.1. Sélecteurs, propriétés et valeurs ........................................................................ 21
I.8.2. Où écrire le CSS ? ................................................................................................. 22
I.8.3. Les commentaires en CSS ................................................................................... 25
I.8.4. Sélecteurs simples et limitations ........................................................................ 25
I.8.5 Les attributs class et id ......................................................................................... 26
I.8.6. Les éléments div et span ..................................................................................... 27
I.9. Formater du texte et positionner des éléments grâce au ccs ................................ 27
I.9.1. Les propriétés CSS de type “font-”.................................................................... 28
I.9.2. Les propriétés CSS de type “text-” .................................................................... 33
I.9.3. Gestion du background (le fond)....................................................................... 37
I.10. Iintégrer des images, de l’audio et des vidéos dans une page web grâce au html5
.............................................................................................................................................. 40
I.10.1. Insérer une image............................................................................................... 40
I.10.2. Insérer de l’Audio .............................................................................................. 41
I.10.3 Insérer de la Vidéo .............................................................................................. 43

2
I.11. Les tableaux ............................................................................................................... 46

I.11.1. Tableau simple ................................................................................................... 46
I.11.2. Mise en forme d’un tableau .............................................................................. 48
I.11.3. Tableau structuré ............................................................................................... 50
I.11.4. Combiner les cellules ......................................................................................... 51
I.12. Les formulaires ...................................................................................................... 53
I.12.1. Créer le squelette de notre formulaire ............................................................ 53
I.12.2. Créer un formulaire simple .............................................................................. 54
I.12.3. Demander un Email, une adresse de site web et un numéro de téléphone à
l’utilisateur ..................................................................................................................... 56
1.12.4. Créer une zone de saisie multi-lignes............................................................. 57
1.12.5. Cases à cocher, zones d’options et listes ........................................................ 58
I.12.6. Finaliser et envoyer notre formulaire ............................................................. 61
II. PHP et MySQL .................................................................................................................. 65
II.1. Historique ................................................................................................................... 65
II.2. Utilisation pratique.................................................................................................... 65
II.3. Syntaxe ........................................................................................................................ 66
II.3.1. Séparateur d'instructions ................................................................................... 67
II.3.2. Bloc d'instructions .............................................................................................. 67
II.3.3. Commentaires ..................................................................................................... 67
II.4. Travailler avec des variables .................................................................................... 67
II.4.1. Déclarer une variable ......................................................................................... 67
II.4.2. Portée des variables ............................................................................................ 69
II.4.3. Variables prédéfinies .......................................................................................... 69
II.4.4. Variables dynamiques........................................................................................ 69
II.5. Types de variables ..................................................................................................... 69
II.5.1. Booléens ............................................................................................................... 69
II.5.2. Entiers ................................................................................................................... 70
II.5.3 Virgule flottante ................................................................................................... 70
II.5.4 Chaînes de caractères .......................................................................................... 70
II.5.5. Les tableaux ......................................................................................................... 72
II.5.6. La variable objet .................................................................................................. 73
II.5.7. Les constantes...................................................................................................... 73
II.5.8. Obtenir le type d'une variable .......................................................................... 74
II.5.9. Définir et supprimer une variable .................................................................... 74
II.6. Les opérateurs ............................................................................................................ 74
II.6.1. La précédence des opérateurs ........................................................................... 74

3
II.6. 1. Opérateurs arithmétiques ..................................................................................... 75

II.6.2. Opérateurs d'assignation ................................................................................... 75
II.6.3. Opérateurs sur les bits ....................................................................................... 75
II.6.4. Opérateurs de comparaison .............................................................................. 76
II.6.5. Opérateur d'erreur .............................................................................................. 76
II.6.6. Opérateur d'exécution........................................................................................ 76
II.6.7. Opérateurs d'incrémentation/décrémentation .............................................. 76
II.6.8. Opérateurs logiques ........................................................................................... 76
II.6.9. Opérateurs de chaînes ........................................................................................ 77
II.6.10. Opérateur de tableaux ..................................................................................... 77
II.7. La notion d’expression .............................................................................................. 77
II.8. Les structures de contrôle......................................................................................... 78
II.8.1. if............................................................................................................................. 78
II.8.2. while ..................................................................................................................... 79
II.8.3. for ......................................................................................................................... 79
II.8.4. foreach ................................................................................................................. 80
II.8.5. break et continue................................................................................................. 81
II.8.6. switch.................................................................................................................... 81
II.8.7. return .................................................................................................................... 82
II.8.8. require et include (_once) .................................................................................. 82
II.9. Les fonctions ............................................................................................................... 82
II.9.1. Syntaxe et portée ................................................................................................. 82
II.9.2. Arguments ........................................................................................................... 83
II.9.3. Valeur de retour .................................................................................................. 84
II.8.4. Fonctions internes ............................................................................................... 84
II.10. Gestion des formulaires en PHP ........................................................................... 85
II.10.1. GET et POST ...................................................................................................... 85
II.10.2. Récupération par tableau ................................................................................ 85
II.10.3. Récupération directe ........................................................................................ 86
II.10.4. Utiliser des tableaux ......................................................................................... 87
II.11. Date et heure ............................................................................................................ 87
II.11.1. Localisation ........................................................................................................ 87
II.12. MySQL ...................................................................................................................... 87
II.12.1. Outils .................................................................................................................. 88
II.12.2. Créer une base ................................................................................................... 88
II.12.3. Utilisateurs et droits ......................................................................................... 88
II.12.4. Créer et modifier des tables ............................................................................ 89
4
II.13. MySQL et PHP ......................................................................................................... 89

II.12.1. Connexion à une base de données ................................................................. 89
II.13.2. Les requêtes ....................................................................................................... 90
Conclusion .............................................................................................................................. 93
Références bibliographiques ................................................................................................ 93
ANNEXES .............................................................................................................................. 93

5
A. Objectif global
L’objectif de ce cours est d’apprendre aux étudiants la programmation web avec les
langages HTML5, CSS3, PHP et le SGBDR MySQL afin de permettre à ces derniers de
pouvoir développer des sites web et des applications web de qualité avec des outils
actualisés.
A.1. Objectifs spécifiques

Apprendre le HTL5 et le CSS3 afin de pouvoir maîtriser le design et la
réalisation des pages web pour des sites web statiques.
Apprendre le PHP et le MySQL visant le développement des sites web
dynamiques.
B. Prérequis
Pour apprendre ce cours, il faut avoir étudié les cours suivants :

Programmation modulaire
Base de données
Réseaux informatiques
C. Introduction
Le monde actuel de l’information et de son traitement est numérisé à tel enseigne que,
l’impression que donne la superficie de la terre est réduite, vue que la facilité, la
rapidité et la proximité de l’information par rapport à la distance entre communicants
est quasiment réduite à nulle.
Ce cours est une nécessité pour les informaticiens qui veulent évoluer avec le monde
actuel des NTIC (Nouvelles Technologies de l’Information et de la Communication),
il contribue à la compréhension de l’échange des informations sur la toile et permet de
participer à la mise en place des canaux de ces informations.
Il est constitué de deux chapitres :
Le HTML et Le CSS
Le PHP avec MySQL

6
I. Le HTML et Le CSS
Les langages HTML et CSS sont, comme nous allons le voir, à la base de tout projet de
programmation web.
Le HTML et le CSS sont des langages plutôt simples à maîtriser et à comprendre à

comparer aux autres langages de programmation.
I.1. Pourquoi apprendre les langages HTML et CSS ?

Si le monde de l’informatique vous plaît et que vous êtes tenté d’apprendre la
programmation informatique, vous serez obligé de passer par l’apprentissage du
HTML et du CSS et ceci pour deux raisons.
Tout d’abord, il faut savoir que le HTML et le CSS sont deux véritables standards et
n’ont donc, à ce titre, pas de concurrent comme cela peut être le cas pour le langage
PHP par exemple (concurrencé par Ruby on Rails et Django entre autres).
Ensuite, les langages HTML et CSS sont véritablement le socle de tout projet de
développement web. Que vous vouliez créer un site e-commerce, un blog, une
application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les
langages HTML et CSS.
Cela étant, si vous connaissez un petit peu le monde du web, vous pouvez très bien
vous dire que coder en HTML et en CSS est inutile puisque vous pouvez utiliser des
solutions toutes faîtes comme des frameworks (WordPress, PrestaShop), des éditeurs
WYSIWIG (What You See Is What You Get) ou encore avoir recours aux services d’une
agence spécialisée.
I.2 Définitions et rôles du HTML et du CSS

HTML est l’abréviation de HyperText Markup Language, soit en français « langage
hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer
et de donner du sens à du contenu.
CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été créé en
1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle
des styles.
Sachez-le : beaucoup de débutants, et même des personnes expérimentées, confondons

les fonctions respectives du HTML et du CSS et utilisent un langage pour faire le
travail de l’autre. En l’occurrence, c’est le HTML qui est souvent utilisé à mauvais
escient, pour mettre en forme du contenu.
Retenez donc que le HTML est utilisé pour baliser un contenu, c’est à dire pour le
structurer et lui donner du sens. Le HTML sert, entre autres choses, à indiquer aux
navigateurs quel texte doit être considéré comme un paragraphe, quel texte doit être
considéré comme un titre, que tel contenu est une image ou une vidéo.
7
Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le
mettre en forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte,
positionner tel contenu à tel endroit de notre page web ou ajouter des bordures ou des
ombres autour d’un contenu.
I.3. Versions actuelles des langages HTML et CSS

Les versions actuelles du HTML et du CSS sont HTML5 et CSS3. Il faut savoir que,
contrairement aux idées reçues, ce sont encore des versions non finalisées. Cela signifie
que ces versions sont toujours en développement et qu’elles sont toujours en théorie
sujettes à changements et à bugs.
En pratique, toutefois, on peut considérer ces versions comme totalement stables et

c’est donc sur celles-ci que nous allons travailler.
En effet, la version 5 d’HTML, tout comme la version 3 de CSS introduisent de

nombreuses nouvelles fonctionnalités longtemps attendues par les développeurs et il
serait donc dommage de s’en priver.
Parmi celles-ci, l’insertion simplifiée de vidéos et de contenus audio et de nouvelles

balises améliorant la sémantique pour mieux structurer nos pages en HTML ou encore
la possibilité de créer des bordures arrondies en CSS.
I.4. Un mot sur le XHTML

Avant de poursuivre plus avant notre découverte du HTML et du CSS, parlons du
XHTML.
XHTML signifie eXtensible HTML. Créé en 2000, il devait à l’origine succéder au
HTML.
En effet, il faut savoir que le HTML base sa syntaxe sur le langage SGML (Standard
Generalized Markup Language) tandis que le XHTML se fonde sur le XML
(eXtensible Markup Language).
Or, à l’époque, le XML était une véritable petite révolution puisqu’il permettait de faire
davantage de choses que le SGML et qu’il était dit plus simple à utiliser.
Cependant, le HTML a continué à se développer en parallèle au XHTML et le XHTML

est définitivement abandonné en 2009 ou plus exactement a été en partie intégré dans
ce qui allait devenir le HTML5.
Le XHTML reste aujourd’hui encore utilisé pour réaliser certaines pages de code
spécifique. Pour commencer, cependant, je vous recommande de vous concentrer sur
le HTML5.
I.5. L’éditeur de texte

Pour coder en HTML et en CSS, c’est très simple : nous n’avons besoin que d’un
éditeur de texte.
8
Il existe des centaines et des centaines d’éditeurs de texte et beaucoup se valent.

Certains sont gratuits, d’autres sont payants.
Voici les éditeurs que je peux vous conseiller :
NotePad++, si vous êtes sous Windows;
Komodo, pour Mac ou Linux ;
TextWrangler, pour Linux.
I.6. Les fondations du html

Il y a trois termes dont vous devez absolument comprendre le sens en HTML. Ce sont
les termes élément, balise et attribut.
I.6.1. Éléments, balises et attributs

Les éléments, tout d’abord, vont nous servir à définir des objets dans notre page. Grâce
aux éléments, nous allons pouvoir définir un paragraphe (élément p), des titres
d’importances diverses (éléments h1, h2, h3, h4, h5 et h6) ou un lien (élément a).
Les éléments sont constitués de balises. Dans la majorité des cas, un élément est
constitué d’une paire de balises : une balise ouvrante et une balise fermante.
Les balises reprennent le nom de l’élément et sont entourées de chevrons. La balise

fermante possède en plus un slash qui précède le nom de l’élément.
Cependant, certains éléments ne sont constitués que d’une balise qu’on appelle alors
balise orpheline. C’est par exemple le cas de l’élément br qui va nous servir à créer un
retour à la ligne.
L’écriture en HTML est alors la suivante : <br/>.
Notez que, dans le cas des balises orphelines, le slash se situe après le nom de
l’élément. Notez également que ce slash n’est pas obligatoire et que certains
développeurs l’omettent volontairement.
Les attributs, enfin, vont venir compléter les éléments en leur donnant des indications
ou des instructions supplémentaires.
Par exemple, dans le cas d’un lien, on va se servir d’un attribut pour indiquer la cible
du lien, c’est à dire vers quel site le lien doit mener.
Notez que les attributs se placent toujours à l’intérieur de la balise ouvrante d’un
élément (ou de la balise orpheline le cas échéant).

9
Dans l’exemple ci-dessus, on discerne l’élément a composé :

d’une balise ouvrante elle-même composée d’un attribut href ;
d’une ancre textuelle ;
d’une balise fermante.
L’attribut href (initiales de « Hypertexte Reference ») sert à indiquer la cible de notre

lien, en l’occurrence le site Wikipédia.
L’ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos
visiteurs devront cliquer pour se rendre sur Wikipédia et également l’unique partie
visible pour eux.
Voici ce que les visiteurs de votre site verront :
I.6.2. Structure de base d’une page en HTML5

En programmation comme dans beaucoup d’autres disciplines, vous l’aurez compris,
il y a des règles.
Ainsi, toute page écrite en HTML5 doit comporter une certaine structure, un «
squelette » qui sera toujours le même. Ce squelette est bien évidemment constitué de
divers éléments.
Tout d’abord, toute page HTML5 doit commencer par la déclaration de ce qu’on
appelle un « doctype ». Le doctype, comme son nom l’indique, sert à indiquer le type
du document. Dans notre cas, le type de document est HTML.

10
Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu

particulier.
Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois
nouveaux éléments : html, head (« en-tête ») et body (« corps de page »).
L’élément html va contenir toute la page.
L’élément head contiendra entre autres, le titre de la page, l’encodage utilisé et des
meta-data (des données invisibles pour les utilisateurs mais essentielles – nous en
reparlerons plus tard).
L’élément body contiendra tout le contenu de notre page (paragraphes, images,

tableaux, etc.).
Mais ce n’est pas fini ! Pour que la page soit valide, l’élément head doit lui même
contenir un élément title, qui correspond au titre de la page et le meta charset qui
prendra comme valeur le type d’encodage choisi.
Pour les langues latines, nous choisirons généralement la valeur « utf-8 ».
Toutefois, si le HTML permet d’imbriquer des éléments les uns dans les autres, vous
devrez toujours faire bien attention de refermer les balises dans le bon ordre.
Le bon ordre est : <a> <b> </b> </a>, c’est à dire que le dernier élément ouvert est
toujours le premier refermé. Vous ne devrez jamais écrire <a> <b> </a> </b>.
Normalement, si vous refermez bien chaque balise juste après l’avoir ouverte, plutôt
que de dire « c’est bon, j’y penserai plus tard », vous ne devriez jamais faire l’erreur.
Autre bonne pratique maintenant : l’indentation. Indenter son code, c’est tout
simplement l’aérer en ajoutant des espaces au début de certaines lignes afin de le
rendre plus lisible pour vous comme pour les autres.
Il n’y a pas de règle absolue concernant l’indentation, certains accentuant plus ou

moins le retrait en début de ligne. Pour ma part, j’utilise une tabulation (la touche à
gauche du a) à chaque fois que j’ouvre une nouvelle balise à l’intérieur d’un élément.
Cela permet de bien hiérarchiser son code et de voir immédiatement quel élément est
imbriqué dans quel autre.
Par exemple, on voit bien dans l’exemple ci-dessus que j’ai ajouté de nouveaux espaces
lorsque j’ai ouvert ma balise head et title, mais que je n’en ai pas ajouté pour le meta
charset. Pourquoi ? Tout simplement car la balise meta n’est pas contenue dans
l’élément title mais seulement dans l’élément head. Elle est donc au même niveau de
hiérarchie que le title.
L’indentation peut peut-être vous paraître superflue pour le moment, mais je vous
garantis que c’est une pratique extrêmement utile et qu’une bonne indentation est
souvent ce qui fait la différence entre un codeur moyen et un bon codeur.

11
Troisième et dernière bonne pratique dont je voulais vous parler : le fait de commenter
son code.
Commenter son code, c’est tout simplement y ajouter des commentaires. Ces
commentaires sont spéciaux : ils ne seront pas visibles par vos visiteurs (à moins que
ceux-ci n’affichent le code source de la page).
Voici comment on écrit un commentaire en HTML :
I.6.3. Les éléments Heading, Paragraph et Break

Le HTML, sert à différencier d’un point de vue sémantique les différents objets que
l’on peut rencontrer et dont on peut avoir besoin (titre, paragraphe, espace, image,
etc.).
Pour faire cela, le HTML va utiliser des éléments. Et le moment est arrivé pour nous
d’apprendre à créer des paragraphes, des titres, et à faire des retours à la lignes en
HTML.
Pour créer des paragraphes, tout d’abord, on va utiliser l’élément p. On peut créer
autant de paragraphes que l’on souhaite dans une page. Pour chaque nouveau
paragraphe, il faut rouvrir une balise <p>. A chaque nouveau paragraphe, un retour
à la ligne est automatiquement effectué.
Si maintenant vous désirez créer un retour à la ligne à l’intérieur même d’un
paragraphe, il faudra utiliser l’élément br (diminutif de break).
Cet élément est constitué d’une seule balise orpheline, qu’on notera donc <br/>.
Pour créer des titres, on va utiliser les éléments h1, h2, h3, h4, h5 et h6. Pourquoi autant
d’éléments différents ?
Pour pouvoir créer des titres de diverses importances. Ainsi, un titre h1 sera considéré
comme un titre très important tandis qu’un titre h6 sera considéré comme très peu
important.

12
En pratique, on n’utilisera que très rarement les titres de niveau h4, h5 et h6. Si vous
vous interrogez encore sur l’intérêt d’avoir tous ces éléments, pensez que cela est très
important pour le référencement entre autres.
En effet : plus vous serez clair et mieux un moteur de recherche vous comprendra,
mieux vous serez référencé.
Voilà ce que ça donne en image :
Vous avez remarqué que les titres apparaissent en gras et ont des tailles différentes
selon leur degré d’importance. Et c’est précisément là où j’en reviens à mon premier
point : vous ne devez JAMAIS utiliser le langage HTML pour mettre en forme le
contenu.
Ce que vous voyez n’est qu’une mise en forme automatique faîte par votre navigateur,
une interprétation visuelle de ce que vous avez donné à votre navigateur. Cependant,
vous ne devez jamais utiliser un titre de niveau h1 pour mettre un texte en gros et en
gras.
Et pas d’inquiétudes non plus si vous ne voulez pas avoir vos titres en gras, on
s’occupera de l’aspect visuel plus tard avec le CSS. Le CSS peut nous permettre de faire
réellement tout ce que l’on désire d’un point de vue visuel : créer des styles tout comme
enlever des styles automatiques.

13
I.6.4. Les éléments Strong, Emphasis et Mark

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

Les listes servent à ordonner du contenu, à lui donner un ordre cohérent.
14
Visuellement, les listes en HTML correspondent à ce que vous créez lorsque vous
utilisez des puces dans un document Word ou PowerPoint par exemple, comme ceci :
Elément numéro 1
Elément numéro 2
Elément numéro 3
En HTML, les listes vont avoir deux grands intérêts pour nous : on va pouvoir les
utiliser pour créer des menus ou, dans leur forme brute, pour mieux présenter du
contenu pour un blog par exemple.
Il existe trois grands types de listes en HTML : les listes ordonnées, les listes non-
ordonnées et un dernier type un peu particulier : les listes de définition. Nous allons
commencer avec les listes ordonnées et non-ordonnées.
La différence entre les listes ordonnées et non-ordonnées est que les listes ordonnées
possèdent un aspect de subordination, d’ordre logique, de classement tandis que ce
n’est pas le cas pour les listes non-ordonnées.
Pour créer une liste non-ordonnée, on va avoir besoin de deux nouveaux éléments :
l’élément ul (abréviation de unordered list), qui va contenir toute la liste et l’élément
li (pour list item) que l’on va utiliser pour créer chaque élément de la liste.
Voyons immédiatement comment cela fonctionne en pratique :
Dans l’exemple précédent, les différents éléments de la liste n’ont pas de cohérence
entre eux et on ne peut donc pas les classer, les ordonner (sans contexte du moins).
Pour créer une liste ordonnée maintenant, nous allons simplement remplacer
l’élément ul par l’élément ol (pour ordered list).

15
Cette fois-ci, il y a une relation de subordination, un ordre logique et naturel entre les
éléments de la liste (on met généralement l’introduction avant la conclusion); on utilise
donc une liste ordonnée.
I.6.6. Listes de définitions

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

16
I.6.7. Listes imbriquées

En effet, le HTML nous offre la possibilité d’imbriquer les listes les unes dans les autres
très simplement.
Pour imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une
seconde à l’intérieur d’un élément de la première (on peut évidemment imbriquer plus
de deux listes en répétant le même processus).
Voici une illustration, en imbriquant par exemple une liste non-ordonnée à l’intérieur
d’une liste ordonnée :
Comme vous le voyez, si on n’oublie pas d’élément, les listes restent très simples à
utiliser et à manipuler.
I.7. Liens internes et liens externes

Tout d’abord, il faut savoir qu’il existe différents types de liens. Pour l’instant, nous
allons nous concentrer sur les deux types les plus « classiques » : les liens internes et
les liens externes.
Quelle différence entre ces deux types de liens ? Un lien interne est un lien créé entre
deux pages d’un même site web tandis qu’un lien externe est un lien menant d’un site
web vers un autre site web.

17
Dans tous les cas, pour créer un lien, nous allons utiliser l’élément a accompagné de
son attribut href (pour Hypertext Reference) qui sert à indiquer la cible (c’est à dire la
destination) du lien.
Quel que soit le type de liens créés, la seule chose qui va changer va être ce que l’on va
indiquer en valeur pour l’attribut href.
Commençons donc avec les liens internes. Nous avons trois cas à distinguer :
1er cas : La page à partir de laquelle on fait un lien et celle vers laquelle on fait un lien
se trouvent dans le même dossier. Dans ce premier cas, il suffit de préciser le nom de
la page dans l’attribut href.
2ème cas : La page vers laquelle on souhaite faire un lien se trouve dans un sous-dossier.
Dans ce cas, il faudra en tenir compte et inclure le nom du sous-dossier dans la valeur
de l’attribut href.
3ème cas : La page vers laquelle on veut faire un lien se trouve dans un dossier parent.
Dans ce cas, nous devrons rajouter « ../ » dans la valeur de l’attribut href.
Et voilà, c’est fini ! Si vous ouvrez votre page page1.html, celle-ci doit maintenant
ressembler à cela :

18
Lorsque vous ou vos visiteurs cliquerez sur « page 2 », « page 3 » ou « page 4 », vous
serez redirigés vers la page en question.
Pour créer des liens externes, maintenant, vous allez voir que c’est beaucoup plus
simple : il suffit d’indiquer l’URL complète de la page vers laquelle on veut faire un
lien en valeur de l’attribut href.
En pratique, pour faire un lien vers la page d’accueil de Wikipédia par exemple, on
écrira :
A noter qu’il existe pour les liens internes et externes des attributs facultatifs qui
peuvent modifier le comportement par défaut de ces liens. C’est par exemple le cas de
l’attribut target qui est selon moi indispensable à connaître.
L’attribut target va vous permettre de choisir si vous voulez que la cible de votre lien
s’ouvre dans une nouvelle fenêtre / nouvel onglet ou pas.
Pour que la cible de votre lien s’ouvre dans une nouvelle fenêtre ou un nouvel onglet,
on attribuera la valeur _blank à l’attribut target. Un exemple immédiatement en
image :

19
I.7.1. Les autres types courants de liens

Les liens internes et externes sont très certainement les types de liens les plus courants,
mais c’est loin d’être les seuls ! En effet, on peut utiliser les liens pour faire bien
d’autres choses.
Nous allons nous concentrer sur les liens de type « ancre », les liens pour envoyer un
mail et les liens pour télécharger un fichier.
Commençons avec les liens de type ancre. Les liens de type ancre sont des liens menant
à un autre endroit d’une même page web. Ils peuvent être utiles dans le cas d’une page
web très longue pour donner à vos visiteurs un accès rapide à une section en
particulier par exemple.
Pour créer une ancre, on commence par rajouter un attribut id à une balise ouvrante
HTML à l’endroit où l’on veut envoyer le visiteur. On peut attribuer n’importe quelle
valeur à cet attribut, le mieux étant de choisir une valeur qui fasse sens.
Ensuite, on crée le lien cliquable en soi qui va amener à notre id. Pour cela, on utilise
toujours notre élément a avec son attribut href (on ne réinvente pas la roue à chaque
fois), mais cette fois ci on va devoir placer un dièse avant d’écrire la valeur de l’attribut
href.
La valeur inscrite pour l’attribut href doit être strictement la même que celle donnée à
notre id.
Voici l’illustration en image :

20
Faites attention à bien choisir des valeurs différentes pour chaque id sinon votre lien
ne saura pas où ramener !
Pour envoyez un mail, maintenant, on donne tout simplement une valeur de type «
mailto : » à notre attribut href comme ceci :
Enfin, voyons les liens permettant à vos visiteurs de télécharger un fichier. Pour cela,
il va tout d’abord falloir nous armer d’un fichier (au format zip, pdf, xls ou autre) que
l’on va placer dans le même dossier que la page web à partir de laquelle on crée le lien.
Ensuite, il ne reste plus qu’à créer un lien comme on en a l’habitude en utilisant un

chemin relatif. Comme notre fichier et notre page web sont dans le même dossier, nous
n’avons donc que le nom du fichier à renseigner en valeur de l’attribut href.
Par exemple, si mon fichier est un pdf qui s’appelle « fichier », on aura :

21
I.8. Les fondations du CSS

Vous allez enfin pouvoir modifier l’apparence de vos textes, rajouter des bordures ou
changer la disposition des éléments sur votre page.
Mais avant tout, il nous faut commencer avec quelques éléments de vocabulaire
comme on l’avait fait pour le HTML.
I.8.1. Sélecteurs, propriétés et valeurs

Nous allons voir ensemble ce que sont les sélecteurs, les propriétés et les valeurs en
CSS.
Pour rappel, le CSS sert à modifier l’apparence de nos pages web en appliquant des
styles au contenu en HTML.
Un sélecteur, tout d’abord, va servir à déterminer à quel(s) élément(s) HTML ou à quel

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

Pour la propriété servant à changer la couleur d’un texte par exemple, la valeur va être
la nouvelle couleur à appliquer.
Voici ci-dessous une illustration concrète de ce que l’on vient de dire :
Dans cet exemple, nous utilisons le sélecteur simple « p », ce qui signifie que nous
souhaitons appliquer un style particulier à tous les paragraphes de nos pages.
Nous utilisons les propriétés « color » (qui sert à modifier la couleur d’un texte) et «
font-size » (pour changer la taille d’un texte). Cela signifie donc que nous travaillerons
sur la couleur et la taille de nos paragraphes.
Enfin, nous indiquons que nous voulons que tous nos paragraphes s’affichent en bleu
grâce à la valeur « blue » et que notre texte ait une taille de 16px avec la valeur « 16px
».
Notez d’ores-et-déjà la syntaxe de notre première déclaration en CSS. On entoure les

propriétés et les valeurs avec des accolades et on place un point virgule après avoir

22
spécifié une valeur pour chacune de nos propriétés. Chaque propriété est séparée de
sa valeur par un deux-points.
I.8.2. Où écrire le CSS ?

Nous avons trois possibilités pour écrire notre CSS. L’une d’elles est préférable aux
deux autres.
Nous pouvons écrire le CSS :

A l’intérieur de l’élément head de notre document HTML ;
Dans la balise ouvrante des éléments de notre fichier HTML ;
Dans un fichier portant l’extension .css séparé.
Pour des raisons de performances de votre code, de clarté et d’économie de temps, je

vous recommande vivement d’utiliser la dernière méthode dès que cela est possible.
Voyons ensemble comment cela se passe en pratique pour chacune de ces trois
méthodes, puis je vous expliquerai pourquoi la dernière est la meilleure.
Commençons avec la première façon : écrire son code CSS dans l’élément head de
notre page HTML. Pour faire cela, il suffit d’insérer un élément style dans notre
élément head et de placer nos déclarations CSS à l’intérieur de cet élément style comme
ceci :

23
Deuxième méthode maintenant : écrire du CSS dans la balise ouvrante d’un élément
HTML. Pour faire cela, nous allons devoir utiliser un attribut style et lui affecter en
valeur nos propriétés CSS :

24
Vous remarquerez que l’on respecte la syntaxe du CSS à l’intérieur de l’attribut style
en utilisant les deux-points et les points virgules.
Attention cependant : dans notre premier cas, on utilisait l’élément style tandis que
dans le cas présent, style est un attribut.
Troisième et dernière méthode enfin (la méthode recommandée) : écrire le code CSS
dans un fichier séparé. Pour faire cela, nous allons déjà devoir ouvrir un nouveau
fichier dans notre éditeur de texte et l’enregistrer au format « .css ». Vous pouvez le
nommer « style.css ».
Pensez bien à enregistrer ce fichier dans le même dossier que votre fichier HTML dont
vous souhaitez modifier le style, sinon vous risquez d’avoir des problèmes (nous
expliquerons plus tard dans ce cours pourquoi).
Une fois que vous avez fait cela, retournez sur votre page HTML. Nous allons
maintenant devoir lier nos deux fichiers HTML et CSS. On va faire cela à l’aide d’un
élément link que nous allons placer dans l’élément head de cette manière :
L’élément link est représenté sous forme de balise orpheline et doit être accompagné
de ses deux attributs « rel » et « href ».
L’attribut rel sert à préciser le style du fichier lié (dans notre cas c’est une feuille de
style, donc « stylesheet » en anglais). L’attribut href, que vous connaissez déjà, sert à
faire le lien en soi.

25
Si notre fichier avait été placé dans un dossier parent ou dans un sous-dossier par
rapport à notre fichier HTML, il aurait fallu refléter cela dans la valeur de notre attribut
href (rappelez vous de la leçon sur les liens relatifs !).
Finalement, nous n’avons plus qu’à écrire notre code CSS dans le fichier style.css :
Si vous désirez voir le résultat immédiatement et pouvoir travailler avec vos différents
fichiers sur une même page, je vous conseille une nouvelle d’utiliser JsBin.com (ce que
je ferai très souvent dans la suite de ce cours).
I.8.3. Les commentaires en CSS

Enchaînons avec les commentaires en CSS. On a déjà vu que l’on pouvait commenter
en HTML. Cela est également possible en CSS. Plus qu’une possibilité, c’est même une
obligation.
En effet, les fichiers CSS deviennent rapidement très long (beaucoup plus que les
fichiers HTML par exemple) donc si vous ne commentez pas efficacement vous
risquez d’être très vite perdu.
De plus, si vous distribuez votre code, je pense que la personne sera contente d’avoir
quelques lignes de commentaires pour l’aider à trouver ce qu’elle cherche au milieu
de 2000 lignes de code !
En CSS, on écrit les commentaires de cette manière :
I.8.4. Sélecteurs simples et limitations

Retournons maintenant à nos sélecteurs. Jusqu’à présent, nous n’avons manipulé que
des sélecteurs que l’on appelle « simple », car ils correspondent à des éléments HTML
seuls et sans attributs (par exemple le sélecteur p).
Ce type de sélecteur doit être préféré tant que possible pour des raisons d’optimisation
et de performance du code.
26
En effet, ils requièrent moins de code et sont donc moins gourmands en énergie que
des sélecteurs plus complexes. Votre page mettra ainsi moins de temps à charger.
Le problème reste qu’on est quand même très limité avec des sélecteurs simples :
comment faire pour appliquer un style différent à deux éléments de même type, deux
paragraphes par exemple ? Ce n’est tout simplement pas possible.
Et c’est pour cela que l’on a créé les attributs class et id.
I.8.5 Les attributs class et id

Class et Id sont deux attributs HTML qui ont été créés pour pouvoir appliquer
différents styles à des éléments de même type. Class permet également de faire
l’inverse et d’appliquer le même style à différents éléments choisis.
Voyons tout de suite comment ils fonctionnent.
Premièrement on se place dans la balise ouvrante d’un élément HTML, on écrit le nom
de notre attribut (class ou id), et on lui donne une valeur cohérente.
Cette valeur ne devrait contenir ni de caractères spéciaux (accents et autres) ni

d’espace. Par exemple :
Ensuite, on retourne sur notre fichier CSS. On va devoir commencer notre déclaration
par un point là où on a utilisé un attribut class et par un dièse si l’on a utilisé l’attribut
id.
Après le point ou le dièse, on écrit la valeur de l’attribut en question pour former notre
sélecteur. Enfin, on écrit le code CSS voulu. Voilà ce que ça donne en pratique :

27
I.8.6. Les éléments div et span

Pour commencer, vous devez bien comprendre que les éléments div et span ne
possèdent aucune valeur sémantique, ce qui va à l’encontre même du rôle du HTML.
Ainsi, vous ne devez les utiliser que lorsque vous n’avez pas d’autre choix.
Les éléments div et span vont nous servir de containers. Nous allons nous en servir
pour entourer des blocs de code et ainsi pouvoir attribuer des styles particuliers à ces
blocs.
L’utilisation des éléments div et span est très simple : il suffit d’entourer le bloc de
code voulu avec une paire de balises ouvrante et fermante div ou span comme cela :
Généralement, on attribuera une class ou un id à div et span afin de pouvoir

différencier nos différents div et span dans notre page. Ainsi, on peut désormais
appliquer un style particulier à n’importe quel bout de code dans notre page HTML.
I.9. Formater du texte et positionner des éléments grâce au ccs

Nous allons, étudier de nouvelles propriétés CSS et notamment les propriétés nous
permettant de changer l’aspect de nos textes ou de créer le design général de nos pages

28
web. Nous allons immédiatement commencer avec les propriétés de type « font- »
(qui signifie « police d’écriture » en français).
I.9.1. Les propriétés CSS de type “font-”

La propriété font-size
Nous utiliserons la propriété font-size lorsque nous voudrons modifier la taille d’un
texte. Cette propriété accepte deux types de valeurs : des valeurs de type absolu (en
pixel ou en point), ou relatif (en em, ex ou en pourcentage).
Les valeurs de type « relatives » sont appelées de la sorte car elles permettent au texte
de s’adapter relativement aux préférences de vos visiteurs. En clair, si vous fixez la
taille d’un texte à 100%, ce texte pourra avoir des tailles différentes selon les réglages
faits par vos visiteurs sur leurs navigateurs.
Ce type de valeur présente des avantages indéniables, et notamment le fait que tous
vos visiteurs devraient être capables de lire vos écrits sans difficulté. De plus, le texte
peut également s’adapter relativement aux autres éléments de votre page web.
Une valeur de type absolu, en revanche, va fixer la taille d’un texte définitivement. Le
grand avantage de ce type de valeur est que vous pouvez contrôler précisément donc
le rendu de votre texte et de votre page web.
Voici un exemple d’utilisation de la propriété font-size, avec des valeurs relative et
absolue. Notez qu’on utilisera les notations px pour pixel, pt pour point et % pour
pourcentage.
La propriété font-style
La propriété font-style permet de fixer l’inclinaison d’un texte.

La propriété font-style accepte 4 valeurs différentes :
Normal (valeur par défaut) ;
Italic (change le texte en italique) ;
Oblique (penche le texte) ;
Inherit (hérite des propriétés de l’élément parent).
La propriété font-weight
29
La propriété font-weight permet de fixer le poids d’un texte. Cette propriété accepte 6
valeurs différentes :
Normal (la valeur par défaut) ;
Lighter (version allégée de la police) ;
Bold (la police est en gras) ;
Bolder (la police est encore plus en gras) ;
Une centaine compris entre 100 et 900 (du plus léger au plus gras) ;
Inherit (hérite des styles de ses parents).
Voyons immédiatement comment cette propriété s’utilise avec un exemple :
A noter que certaines polices et certains navigateurs ne supportent pas les valeurs
inférieures à « normal » et supérieures à « bold ». Si votre valeur n’est pas supportée,
la police s’affichera dans la valeur la plus proche supportée (pour bolder, votre police
s’affichera en bold par exemple).
Je vous conseille vivement de n’utiliser que des valeurs numériques qui permettent un
meilleur étalonnage et sont plus souples selon moi. Notez que 400 correspond à
normal et 700 à bold.
La propriété color
Nous allons finalement apprendre à changer la couleur d’un texte en CSS avec la
propriété color.
Nous ne voyons véritablement cette propriété que maintenant car vous allez voir qu’il
existe plusieurs façons de gérer la couleur d’un texte, et certaines d’entre elles ne sont
pas évidentes à priori.
Première façon de changer la couleur d’un texte, la plus simple mais également de loin
la plus limitée : en attribuant un nom de couleur (en anglais) en valeur de la propriété
color.

30
Cette méthode reste très limitée car nous ne pouvons choisir que parmi seize noms de
couleurs qui sont les suivants :
Les valeurs que vous voyez sous le nom des couleurs sont des valeurs qu’on appelle
hexadécimales. Ce type de valeur va correspondre à notre deuxième méthode pour
fixer la couleur d’un texte.
Hexadécimal » signifie « qui fonctionne en base 16 ». Pour le dire simplement, un

système hexadécimal est un système qui utilise 16 symboles pour compter, à savoir
dans notre cas les nombres de 0 à 9 et les lettres de A à F. La lettre A correspondra ainsi
à 10, B à 11, C à 12, D à 13, E à 14 et F à 15. Cela nous fait donc bien 16 symboles en
comptant le zéro.
Ce système de comptage peut paraître complexe et assez étrange pour ceux qui n’ont
pas fait d’études de mathématiques, je veux bien le comprendre. Cependant, je vous

31
demande de ne pas en avoir peur et de le voir tel qu’il est : un système pour compter
de 0 à 15 en soi très simple.
Mais quel rapport avec nos couleurs donc ? En fait, on va pouvoir donner une valeur
hexadécimale en valeur de la propriété color, afin de choisir très précisément la
couleur voulue. Cette valeur devra commencer par un dièse, suivie de 6 symboles
choisis entre 0 et F.
Les deux premiers symboles vont définir l’intensité de rouge de notre couleur, les deux
suivants l’intensité de vert et les deux derniers l’intensité de bleu. Vous pouvez
imaginer que cela se passe comme lorsque vous mélangez de la peinture afin d’obtenir
une couleur précise.
L’intérêt de ce type de valeur est de pouvoir choisir parmi plus de 16 millions de

nuances différentes. Si vous avez bien suivi, l’échelle d’intensité va de 0 à 255 pour
chaque binôme de valeurs, 00 étant l’intensité la plus faible et FF l’intensité la plus
forte.
Pourquoi de 0 à 255 ? C’est en fait très simple ! Considérez que 00 correspond à 0 sur
notre échelle d’intensité. 01 correspond à 1, 02 à 2, 0A à 10 et 0F à 15. Après 0F, on a 10
(lisez « un, zéro » pour comprendre plus clairement) qui correspond à 16 ; 11 qui
correspond à 17 ; 1A qui correspond à 26 et etc. jusqu’à FF qui correspond à
Cela fonctionne finalement comme pour nos dizaines, à part qu’ici on compte en
seizaines.
Le plus important est encore une fois de retenir que les deux premiers symboles
correspondent à l’intensité de rouge, les deux suivants à l’intensité de vert et les deux
derniers à l’intensité de bleu.
Enfin, le dernier type de valeurs que l’on peut utiliser est le type RGB (pour Red Green
Blue). Nous allons voir que ce type de valeurs et les valeurs hexadécimales reposent
sur la même base.

32
Cette fois-ci, nous allons devoir indiquer trois nombres compris entre 0 t 255 en valeur.
Le premier nombre correspond une nouvelle fois à l’intensité de rouge, le second à
l’intensité de vert et le troisième à l’intensité de bleu que l’on veut utiliser pour former
notre couleur finale.
Vous le voyez, il existe de nombreuses similitudes entre les notations en hexadécimal

et en RGB. On peut d’ailleurs tout à fait convertir l’hexadécimal en RGB, en partant du
principe que 00 en hexa correspond à 000 en RGB et que FF en hexa correspond à 255
en RGB.
Je vous conseille de vraiment vous entrainer avec chaque type de valeurs afin de toutes
bien les maîtriser car, selon les situations, vous utiliserez plutôt un type ou un autre
dans le futur.
L’opacité d’un texte
Le CSS nous offre deux méthodes pour fixer le niveau d’opacité de nos textes.
Si nous avons utilisé une valeur de type nom de couleur ou hexadécimale avec la
propriété color, nous devrons utiliser la propriété opacity pour fixer l’opacité de nos
textes.
Cette propriété prend une valeur entre 0 (totalement transparent) et 1 (totalement

opaque). Attention : n’oubliez pas qu’on utilise des points et non pas des virgules pour
les nombres à virgule étant donné qu’on utilise le système d’écriture anglo-saxon
lorsque l’on code.
Si nous avons utilisé une valeur de type RGB avec la propriété color, nous pouvons
également maîtriser l’opacité de notre texte d’une façon plus simple, en utilisant une

33
valeur de type RGBa. Dans ce cas, il suffit de rajouter une valeur pour l’opacité de
notre texte après les trois valeurs de notre propriété RGB.
En pratique, la propriété s’utilise donc de cette manière :
I.9.2. Les propriétés CSS de type “text-”

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

Pour modifier l’alignement d’un texte, nous allons utiliser la propriété text-align.
Cette propriété peut prendre cinq valeurs différentes :
Left : le texte sera aligné sur la gauche ; valeur par défaut ;
Center : le texte sera centré ;
Right : le texte sera aligné sur la droite ;
Justify : le texte sera justifié ;
Inherit : hérite des propriétés de l’élément parent.
Il est bon de noter que le centrage ou l’alignement se fait toujours par rapport à
l’élément parent le plus proche du texte.
Dans l’exemple suivant, on voit bien que mon paragraphe « pdiv » est aligné à droite
de son élément parent (c’est-à-dire le div qui fait lui-même 100px de large) et non pas
de la page. Le second paragraphe, n’ayant pour parent que l’élément body, est donc
bien lui centré sur la page.

34
La propriété text-decoration
On va pouvoir modifier la décoration d’un texte grâce à la propriété text-decoration.

On peut choisir parmi six valeurs pour cette propriété :
Underline : le texte sera souligné ;
Overline : une ligne apparaîtra au dessus du texte ;
Line-through : le texte sera barré ;
Blink : le texte clignotera (attention, ne fonctionne pas sur tous les navigateurs)
;
Inherit ;
None : pas de décoration, comportement par défaut.
Voyons quelques exemples d’utilisation de cette propriété ensemble :

35
La propriété text-indent
La propriété text-indent sert à gérer l’indentation d’un texte. L’indentation, pour ceux
qui l’auraient oublié, est le décalage d’un texte sur la droite généralement.
Cette propriété accepte des valeurs de type absolu (px, pt) et relatif (em, ex, %). Vous
pouvez également lui attribuer des valeurs négatives afin de décaler votre texte sur la
gauche.
La propriété text-transform
On utilisera la propriété text-transform pour modifier l’aspect des caractères d’un

texte (majuscules ou minuscules).
Nous pouvons choisir parmi cinq valeurs :

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

36
La propriété display
La propriété display est une propriété extrêmement puissante : elle permet de changer
le type d’un élément de block à inline ou d’inline à block. Cette propriété supporte
quatre valeurs différentes qui correspondent aux différents types d’éléments possibles
: inline, block, inline-block et none.
La nouveauté ici est le type inline-block. Ce nouveau type ne peut être donné à un
élément que grâce à la propriété display. Il va être un mix des types inline et block.
Un élément de type inline-block se comporte de cette façon : l’élément en soi (contenu

et boîtes) se comporte comme un type block tandis que le contenu seulement se
comporte comme un type inline.
Pour le dire plus simplement, un élément de type inline-block se comportera comme

un élément de type inline excepté que l’on va pouvoir contrôler précisément sa
hauteur et sa largeur.

37
I.9.3. Gestion du background (le fond)

Commençons par voir comment on peut ajouter une couleur au fond. Pour ajouter une
couleur de fond, nous allons utiliser la propriété background-color.
Ajouter de la couleur ou une image pour le fond
Cette propriété accepte les mêmes valeurs que la propriété color que nous avons vu
précédemment, à savoir des valeurs de type nom de couleur, hexadécimale ou RGB.
On peut également ajouter une image de fond. Pour ce faire, on va cette fois utiliser la
propriété background-image.
On lui donne en valeur l’url de l’image qui, en l’occurrence, prend la forme d’un
chemin relatif comme nous avions vu pour les liens.
Voyons immédiatement comment cette propriété fonctionne ! Tout d’abord, il va nous

falloir une page HTML et une page CSS que nous allons lier entre elles et enregistrer
dans le même dossier pour plus de simplicité.

38
Ensuite, il va nous falloir une image. On l’enregistre également dans le même dossier.
Retour finalement sur notre page CSS et utilisons maintenant la propriété background-
image sur notre élément body (on peut utiliser cette propriété sur n’importe quel
élément mais en général ce sera sur l’élément body.
Comme vous pouvez le constater, par défaut, l’image est répétée horizontalement et
verticalement pour occuper tout l’espace de notre page web puisque nous l’avons
insérée dans notre élément body.
Cette propriété gère également d’autres aspects de la mise en forme du fond que nous
allons voir ensuite.
Position et répétition du fond
La propriété background-repeat nous permet de gérer la répétition de notre fond.

Cette propriété accepte quatre valeurs :
Repeat : le fond se répète horizontalement et verticalement, c’est le
comportement par défaut ;
Repeat-x : le fond ne se répète qu’horizontalement ;
Repeat-y : le fond ne se répète que verticalement ;
No-repeat : le fond ne se répète pas.

39
Créer un fond en dégradé : les préfixes vendeurs
Tout d’abord, il faut savoir que nous avons deux types de dégradé à notre disposition
: des dégradés linéaire ou radial.
Les fonds en dégradé sont considérés comme des images et donc, à ce titre, nous allons
à nouveau utiliser la propriété background-image pour les créer.
Il y a quelques années de cela, tous les navigateurs ne reconnaissaient pas les mêmes
propriétés et ne les implémentaient pas de la même manière. En l’occurrence, chaque
navigateur avait une méthode bien à lui d’implémenter un fond en dégradé.
Les préfixes vendeurs ont alors été créés afin que chaque navigateur affiche une
propriété de la même manière que les autres. Ce sont des petits mots clefs qui vont
être placés avant la déclaration du type de dégradé souhaité.
Même si aujourd’hui la majorité des navigateurs suivent des standards qui ont été
établis et implémentent les propriétés de la même façon, cela peut toujours être utile
(et ça ne coûte rien) de mentionner des préfixes vendeurs dans le cas où certains de
vos visiteurs utiliseraient des vieilles versions de navigateurs.
Les préfixes vendeurs sont les suivants :
Pour Chrome et Safari : -webkit-
Pour Mozilla : -moz-
Pour Internet Explorer : -ms-
Pour Opera : -o-
Créer un fond en dégradé : les dégradés de type linéaire
Pour créer un dégradé linéaire, on utilise les mots clefs linear-gradient. On peut
ensuite spécifier autant de valeurs que souhaitées, chaque valeur correspondant à une
couleur de notre dégradé.
Afin que le tout fonctionne correctement, vous devez mentionner chaque préfixe
vendeur et il est recommandé de finir avec le linear-gradient sans aucun préfixe (ce
sera la valeur par défaut) comme ceci :

40
I.10. Iintégrer des images, de l’audio et des vidéos dans une page web
grâce au html5
Tout d’abord, il faut savoir que s’il est vrai que l’insertion d’images en HTML est assez
simple et est bien gérée par tous les navigateurs depuis quelques années maintenant
il n’en est pas de même pour l’audio et la vidéo.
En fait, il a fallu attendre le HTML5 pour voir l’insertion de contenus audio et vidéo
facilités et pour trouver des navigateurs qui acceptaient ces contenus.
I.10.1. Insérer une image

Lorsque vous enregistrez une image sur votre ordinateur, vous pouvez en théorie
choisir entre différents formats avec entre autres le png, le jpg ou jpeg, bitmap ou gif
pour ne citer que les plus connus.
Comme vous vous en doutez, ces formats ne sont pas strictement équivalents et
chaque format à été crée pour un type précis d’images.
Si votre image est une photographie, il est recommandé d’utiliser le format jpg. Si, en
revanche, votre image est un dessin ou tout autre type d’image statique, préférez le
png qui est un type qui gère également la transparence. Enfin, si votre image est
animée, vous devrez choisir le format gif. Oubliez le bitmap qui est un format lourd et
sans réel avantage.
Pensez à choisir avec attention le nom de vos images et évitez les caractères spéciaux
et les espaces (préférez les underscores ou les tirets).

41
Pour insérer une image (finalement !), nous allons utiliser l’élément HTML img.
L’élément img doit être placé au sein d’un élément de type block, comme l’élément p
ou un div par exemple.
Pour que votre code soit valide, vous devez ajouter deux attributs à l’élément img :
l’attribut source, abrégé src et l’attribut alternative, qu’on note alt.
L’attribut src indique le chemin de l’image. Vous pouvez lui donner un chemin relatif
ou absolu. L’attribut alt sert à donner un texte descriptif à a photo. Ce texte est utile
notamment dans les cas où votre image ne s’affiche pas ou pour les robots (de Google,
entre autres).
Enfin, vous pouvez également ajouter l’attribut facultatif title, ce qui aura pour effet
d’afficher un texte lorsque vos visiteurs passeront la souris sur votre image.
Illustrons immédiatement ce que nous venons de voir avec un exemple :
I.10.2. Insérer de l’Audio

Tout comme pour les images, il existe différents formats audios. Cependant, ça se
complique avec l’audio car il n’existe pas de format supporté par tous les navigateurs.
Cela signifie qu’il va falloir indiquer plusieurs formats lorsque l’on va insérer de
l’audio en HTML.

42
Pour ajouter de l’audio sur une page web, on va utiliser l’élément audio. Tout comme
pour l’élément img, l’élément audio va demander un attribut src pour fonctionner. Cet
attribut prendre en valeur l’URL du fichier audio.
Toutefois, si vous n’écrivez que cela, vous ne verrez rien à l’écran. En effet, par défaut,
l’élément audio n’est pas affiché sur les pages web. Il va donc nous falloir utiliser
d’autres attributs.
L’attribut controls, tout d’abord, va servir à afficher les boutons de contrôle tels que
les boutons lecture, pause et volume entre autres. Cet attribut est donc bien
évidemment obligatoire.
L’attribut autoplay va nous permettre de lancer automatiquement le fichier audio lors

du chargement de la page. L’attribut loop nous permet de faire répéter la musique en
boucle.
L’attribut width est utile pour modifier la largeur par défaut de la barre de l’élément
audio.
Enfin, l’attribut preload nous permet de sauvegarder de la bande passante et

d’accroître les performances de notre site. Cet attribut peut prendre trois valeurs
différentes : metadata, auto et none. En pratique, on utilisera généralement la valeur
auto qui va préloader toutes les informations et les données.
Entre les deux balises de l’élément audio, on peut ajouter un texte qui sera affiché dans
le cas où le navigateur ne supporterait pas le format audio choisi comme par exemple
: « Mettez à jour votre navigateur, on vit au 21è siècle ! ».
En théorie, il faudrait donc écrire ceci pour insérer de l’audio dans une page web :

43
Cependant, en écrivant notre élément audio comme cela, on ne peut pas insérer
différents formats audios pour les différents navigateurs, ce qui est très gênant.
En pratique, nous utiliserons donc un deuxième élément source et écrirons cela pour
insérer de l’audio qui sera lu par tous les navigateurs :
Ainsi, le navigateur de vos visiteurs lira la version qu’il reconnaît et ignorera les autres.
Notez que j’ai donné des valeurs égales aux noms des attributs pour controls et
autoplay. En théorie, il n’est pas obligatoire de préciser de valeur pour ces attributs.
I.10.3 Insérer de la Vidéo

Pour créer et afficher une vidéo, il nous faut obligatoirement trois choses : un codec
audio (format mp3, ogg, etc.), un codec video (h.264, ogg thoera, webM) et un format
contener dans lequel on va stocker ces deux éléments (généralement avi, mp4 ou mkv).

44
Là encore, il n’existe pas de format supporté par tous les navigateurs et il est donc
recommandé d’en utiliser plusieurs pour être certain que la vidéo soit correctement
affichée.

45
Pour ajouter une vidéo, on utilise l’élément video. Les attributs pris par cet élément
sont exactement les mêmes que ceux pris par l’élément audio, à savoir : src, autoplay,
controls, loop, preload et width.
Contrairement aux éléments audios, une vidéo sera par défaut affichée sur une page
web.
Il est également possible d’ajouter un attribut poster à votre vidéo. L’attribut poster
permet de télécharger et d’afficher une image qui sera affichée avant le lancement de
la vidéo.

46
Une autre alternative, beaucoup plus simple, pour ajouter de la vidéo ou de l’audio
sur son site est de stocker ces contenus sur des sites comme YouTube, Dailymotion ou
Vimeo puis de les intégrer à votre site grâce au code d’intégration fourni.
De cette manière, vous n’aurez plus aucun problème d’affichage quelque soit le
navigateur de vos visiteurs puisque la transcription dans différents formats est
effectuée par les sites hébergeurs (et autant vous dire que c’est très complet !).
I.11. Les tableaux

Les tableaux en HTML ne servent et ne doivent être utilisés que pour organiser des
données.
I.11.1. Tableau simple

Pour créer un tableau, il va nous falloir utiliser au minimum trois éléments : les
éléments table, tr et td.
L’élément table définit le tableau en soi. A l’intérieur de cet élément table, on va utiliser
l’élément tr (table raw) pour ajouter des lignes à notre tableau.
Tout tableau en HTML sera construit ligne par ligne.
Enfin, on utilise l’élément td (table data) pour ajouter des cellules dans nos lignes.
Si l’on insert plusieurs éléments td à l’intérieur d’un élément tr, des colonnes vont se
créer automatiquement à l’intérieur de notre ligne.
Voyons un premier exemple ensemble :

47

48
Voilà, nous venons de créer notre premier tableau ! Cependant, celui-ci ne ressemble
pas vraiment à l’image que vous vous faisiez d’un tableau je suppose… Et c’est normal
: nous ne l’avons pas encore mis en forme !
I.11.2. Mise en forme d’un tableau

Tout d’abord, nous allons commencer par ajouter des bordures à notre tableau. Pour
cela, nous allons utiliser les propriété CSS border, et border-collapse.
On connaît déjà la propriété border qui va nous permettre de créer des bordures
autour de chaque cellule de notre tableau. Ensuite, pour coller » ces différentes
bordures entre elles, nous allons utiliser la propriété border-collapse.

49
Cette propriété accepte trois valeurs : collapse (les bordures des cellules se collent),
separate (valeur par défaut) et inherit. Cela ressemble déjà beaucoup plus à un
tableau .
Faites bien attention à appliquer la propriété border-collape à l’élément table et la

propriété border à vos éléments td, sinon ça ne marchera pas !
Généralement, les tableaux possèdent une ligne d’en-tête. Pour créer cette ligne, on va
cette fois-ci utiliser l’élément th (table head) à la place du ou des éléments td de notre
première ligne. D’un point de vue sémantique, l’élément th est à td ce que l’élément
h1 est à p.
Si l’on veut créer une ligne d’en-tête en colonne, il suffit de remplacer le premier
élément td de chaque élément tr par des éléments th.

50
Évidemment, on n’oubliera pas d’appliquer notre propriété border à nos éléments th

également.
I.11.3. Tableau structuré

Si vous créez un tableau long, il sera certainement préférable de commencer à
l’organiser en le divisant en plusieurs sous-parties.
C’est ce que nous allons apprendre à faire tout de suite !
On peut diviser un tableau en trois sous-parties : une partie d’en-tête (header), un

corps de tableau (body) et un pied (footer). Ces trois parties sont matérialisées en
HTML par les éléments thead, tbody et tfoot.
L’élément thead va entourer la ou les lignes d’en-tête. L’élément tfoot va comporter

des données récapitulatives de notre tableau, comme des totaux par exemple. Enfin,
l’élément tbody va contenir notre tableau à proprement parler.

51
I.11.4. Combiner les cellules

Maintenant, apprenons à combiner des cellules. Pour combiner des cellules, on va
utiliser les attributs HTML colspan et rowspan.
L’attribut colspan va nous permettre de combiner des cellules appartenant à

différentes colonnes dans une même colonne tandis que l’attribut rowspan va nous
permettre de combiner des cellules provenant de différentes lignes. Chacun de ces
deux attributs accepte un nombre entier en valeur qui indique le nombre de cellules
qui doivent être collées entre elles.

52
Ici, nous avons fusionné les cellules des deux colonnes « Nom » et Prénom » en une
pour « Dupont Martin » et les cellules de deux lignes pour « 24 ans ».

53
I.12. Les formulaires

Les formulaires sont certainement le moyen le plus simple et le plus utilisé pour
recueillir des données à propos de vos utilisateurs. En cela, ils sont essentiels et
incontournables.
Cependant, nous touchons là aux limites du HTLM. En effet, si l’on peut créer des
formulaires en HTML, en ne peut pas en revanche stocker ni utiliser les données du
formulaire avec ce langage. Pour cela, nous devrons utiliser d’autres langages comme
le PhP et le MySQL par exemple.
Mais voyons déjà comment créer un formulaire : cela vous fera une très bonne base si
vous souhaitez pousser plus loin votre apprentissage des langages de programmation.
I.12.1. Créer le squelette de notre formulaire

Pour créer notre formulaire, nous allons devoir tout d’abord utiliser l’élément form
avec deux attributs : method et action.
L’attribut action, tout d’abord, va servir à indiquer où les informations recueillies dans
le formulaire doivent être envoyées pour être traitées. Ce sera généralement vers une
page PhP. Comme nous ne savons pas encore coder en PhP, il faudra l’imaginer pour
le moment.
L’attribut method va lui spécifier de quelle manière on va envoyer ces données. On

peut choisir entre deux valeurs : GET et POST. En utilisant la valeur get, les données
vont transiter via l’URL de la page ce qui ne sera pas le cas si l’on utilise la valeur post.
Il faut savoir que la valeur get est assez limitée par rapport à post. En effet, avec get,
on est limité dans le nombre d’informations que l’on peut envoyer et surtout les
informations sont visibles lors de l’envoi, ce qui est problématique si l’on envoie un
mot de passe par exemple.
C’est pourquoi je vous conseille de plutôt utiliser la valeur post, qui ne possède pas
ces inconvénients.

54
I.12.2. Créer un formulaire simple

Nous allons commencer par créer un formulaire très simple, demandant simplement
un pseudo et un mot de passe à l’utilisateur.
Pour capturer des données textuelles simples comme un pseudo par exemple, on
utilise soit l’élément input (pour des textes courts), soit l’élément textarea (pour des
textes longs).
Dans notre cas, nous allons utiliser l’élément input. Cet élément prend forcément un
attribut « type ». La valeur de l’attribut type correspond au type de données
demandées. On a le choix entre text, password, date, email, tel, number, time, color et
url.
Toutes ces valeurs ont été créées pour des raisons de sémantique. A noter également
que l’affichage par défaut de chaque champ de votre formulaire pourra être
légèrement différent selon la valeur choisie pour l’attribut type.
Il faut également préciser un deuxième attribut à l’élément input qui est l’attribut
name. On lui donnera la valeur que l’on souhaite en essayant de rester cohérent. Cet
attribut va nous être très utile pour traiter les données de notre formulaire.
A noter que l’élément input est représenté sous forme d’une balise orpheline.

55
Il va maintenant falloir indiquer à votre visiteur ce qu’il doit renseigner comme

information dans chaque champ. C’est le rôle du label, qu’on va donc ajouter juste
avant l’input.
A noter que pour afficher du texte dans un formulaire, il faut entourer ce texte avec un
élément de type block. Généralement, on utilisera donc un élément p.
Ensuite, toujours pour des raisons de sémantique, il est bon et conseillé de lier le label
à l’input qui lui correspond. Pour cela, on va ajouter un attribut for au label et un
attribut id à l’input, et leur attribuer exactement la même valeur. Notez que cette
valeur peut être la même que celle donnée à l’attribut name de l’élément input.
Voilà donc pour notre champ « pseudo ». Maintenant, on va faire exactement la même
opération pour notre champ mot de passe, à la différence que cette fois on va utiliser
un input de type « password ». Cela aura pour effet que les caractères inscrits ne
s’affichent pas à l’écran.

56
I.12.3. Demander un Email, une adresse de site web et un numéro de

téléphone à l’utilisateur
Pour demander à l’utilisateur de saisir son adresse mail, il vous faudra utiliser un
input de type « email ». Cela permet à votre navigateur de savoir qu’il doit
normalement recevoir une adresse mail.
Si vous souhaitez donner la possibilité à vos utilisateurs de laisser un lien vers leur site
Internet, vous devrez utiliser un input de type « url ».

57
Si, enfin, vous voulez que l’utilisateur renseigne son numéro de téléphone, il vous
faudra utiliser un input de type « tel ».
1.12.4. Créer une zone de saisie multi-lignes

Imaginons que vous vouliez créer un livre d’or pour votre site web, ou tout
simplement que vous souhaitez laisser la possibilité à vos visiteurs de laisser des
commentaires, alors vous aurez certainement besoin de créer une zone de texte multi-
lignes.
Pour faire cela, on va cette fois-ci utiliser l’élément textarea plutôt que l’élément input.
Tout comme pour l’élément input, on va lui attribuer un attribut name et utiliser un
label.
Si vous souhaitez modifier la taille de votre champ, vous pouvez évidemment utiliser
les propriétés width et height en CSS. Notez que cela fonctionne également pour un
élément de type input.

58
1.12.5. Cases à cocher, zones d’options et listes
On peut encore agrémenter notre formulaire en proposant à nos visiteurs de choisir

une réponse parmi différentes possibilités.
Nous allons voir trois façons de faire cela avec les types checkbox (cases à cocher),
radio (zones d’options) et l’élément select (listes déroulantes).
Pour créer une zone de formulaire avec des cases à cocher, il suffit d’utiliser l’élément
input avec cette fois-ci un attribut de type checkbox.

59
Cette fois-ci, on écrira le label après l’input afin de bien avoir la case à cocher avant le
texte. Pensez bien également à mettre une valeur différente au name de chaque input
afin de pouvoir par la suite identifier quelle case a été cochée.
Si vous le désirez, vous pouvez pré-cocher une case par défaut en ajoutant l’attribut
checked à un input.

60
Pour les zones d’options, on va cette fois-ci utiliser un élément input de type radio.
Notez que cette fois-ci, et dans ce cas uniquement, vous devez donner la même valeur
à l’attribut name pour toutes les options à l’intérieur d’une même question.
On utilisera donc en plus un attribut value afin de bien savoir quelle case a été cochée
par le visiteur.
On peut encore une fois utiliser l’attribut checked afin de pré-cocher une case.
La différence entre les cases à cocher et les zones d’options est que le visiteur ne peut
choisir qu’une réponse dans le cas des zones d’options, au contraire des cases à cocher
où il peut cocher autant de cases qu’il souhaite.
Les listes déroulantes, enfin, s’utilisent généralement lorsqu’il faut faire un choix
parmi une longue liste. On ne va cette fois-ci pas utiliser l’élément input mais l’élément
select à la place avec ses attributs name et id.
A l’intérieur de cet élément select, nous allons utiliser un élément option pour chaque
option de la liste accompagné d’un attribut value.
Enfin, sachez également que l’on peut grouper les options des listes déroulantes sous
un dénominateur commun grâce à l’élément optgroup et son attribut label.

61
I.12.6. Finaliser et envoyer notre formulaire
Nous avons vu l’essentiel de ce qu’il vous fallait savoir pour créer des formulaires en
HTML.
L’attribut placeholder, tout d’abord, sert à donner davantage d’indications sur vos
champs à vos visiteurs. Il vous sert à donner un exemple de remplissage de champ.

62
Pour rendre une question de votre formulaire obligatoire, vous devrez utiliser
l’attribut required.

63
Enfin, l’élément fieldset sert à organiser votre formulaire en différentes rubriques. Cela
peut être utile si celui-ci devient long. Vous pouvez ensuite donner une légende à
chaque rubrique grâce à l’élément legend.
Il est enfin temps d’envoyer notre formulaire.

Pour créer le bouton d’envoi, on va tout simplement utiliser un input de type submit
avec un attribut value.

64
Ça y est, vous savez créer des formulaires, il ne reste qu’à apprendre à traiter les
données mais pour cela il faudra certainement apprendre le PhP.

65
II. PHP et MySQL
PHP (PHP, Hypertext PreProcessor) est un langage de script HTML exécuté du côté
du serveur. Il veut dire « PHP : Hypertext Preprocessor ». Sa syntaxe est largement
inspirée du langage C, de Java et de Perl, avec des améliorations spécifiques. Le but
du langage est d'écrire rapidement des pages HTML dynamiques.
II.1. Historique
L'origine de PHP remonte à 1995 quand Rasmus Lerdorf a créé PHP/FI, une librairie
de scripts Perl utilisés pour la publication de son CV sur son site personnel. Au fur et
à mesure des évolutions, la librairie a été portée en C et agrémentée de nouvelles
fonctionnalités pour créer des pages dynamiques simples pour le web et accéder à
quelques sources de données. PHP/FI signifie Personal Home Page/Forms
Interpreter.
PHP/FI 2.0 sort en 1997, toujours développé par une seule personne. C'est le succès :
50000 sites (1% des noms de domaines) disent l'utiliser ou le supporter. Les
contributeurs affluent.
PHP 3.0 sort en juin 1998, c'est la première version développée conjointement par
Rasmus Lerdorf, Andi Gutmans et Zeev Suraski et entièrement réécrite (les versions
précédentes étaient trop lentes pour une application commerciale). Outre les
performances, PHP 3 est modulaire et extensible, permettant de lui greffer des API
supplémentaires, ce qui n'a pas manqué avec le support de nombreuses bases de
données, de formats et de protocoles, une syntaxe plus cohérente et un support
basique de l'objet. Il a été installé sur 10% du parc mondial des serveurs web avec des
dizaines de milliers de développeurs et des centaines de milliers de sites.
Le moteur de PHP 4 a été repensé afin d'en améliorer les performances pour des
applications complexes et d'augmenter encore la modularité. Un nouveau moteur a
vu le jour, appelé Zend Engine (contraction de Zeev et Andi). PHP 4 sort officiellement
en mai 2000 et apporte des performances accrues, le support de plusieurs serveurs
web, les sessions, une sécurité accrue. C'est actuellement la dernière version stable
(nous ne comptons pas les 4.1, 4.2 et 4.3).
Et PHP 5 ? Actuellement en version beta, un cycle qui peut durer plusieurs mois, le
but de PHP 5 est une amélioration des performances du moteur Zend (Zend Engine
2), un modèle objet étendu et très proche du C++, une compatibilité accrue avec de
nouveaux standards et les anciens (RPC, XML, .NET, ...).
II.2. Utilisation pratique

Forums et Messageries
Commerce électronique
Banque / Comptes en ligne

66
Publication en ligne
Moteurs de recherche
Tout ce que vous voulez, (sauf les jeux)
II.3. Syntaxe
Une page php porte l'extension « .php ». Une page PHP peut être entièrement
programmée en PHP ou mélangée avec du code html. PHP est un langage « Embedded
HTML », c'est à dire qu'il apparaît à n'importe quel endroit de la page HTML. Pour ça
on le place dans des balises particulières : <?php et ?>. On peut aussi utiliser les balises
<script language="php"> et </script>. La première forme est préférable pour plus de
simplicité et une compatibilité XHTML. On écrit donc une page HTML dans laquelle
on intègre du code PHP.
<html>
<head>
<title>Titre</title>
</head>
<body>
<?php
echo "Hello World !";
?>
</body>
</html>
Le code HTML généré sera le suivant
<html>
<head>
<title>Titre</title>
</head>
<body>
Hello World !
</body>
</html>
L'utilisation de balises pour l'intégration de code dans une page web est très souple et
permet de jongler facilement avec du code PHP et du code HTML :
<?php
if ( expression ) {
?>
<strong>Ceci est vrai.</strong>
<?php
} else {
?>
<strong>Ceci est faux.</strong>
<?php
}
?>

67
II.3.1. Séparateur d'instructions

Comme en C une instruction se termine par un point-virgule « ; ». Notez que la balise
fermante ?> implique la fin d'une instruction.
<?php
echo "Ceci est un test";
?>
<?php echo "Ceci est un test" ?>
II.3.2. Bloc d'instructions

Un bloc d'instructions se place entre accolades { et }. Un bloc d'instructions peut
contenir du code de n'importe quelle longueur et est considéré dans le reste du code
comme une instruction unique. Si c'est une expression (qui a une valeur) on peut donc
assigner le bloc, faire des calculs, ...
II.3.3. Commentaires
Les commentaires s'utilisent comme en C et en C++ avec /* .. */ et //. Notez qu'une
balise fermante ferme le commentaire en cours.
<?php
/* echo "salut !" */
// Commentaire sur cette ligne
?>
II.4. Travailler avec des variables

Une variable commence par un dollar « $ » suivi d'un nom de variable.
II.4.1. Déclarer une variable

Les variables ne sont pas typées au moment de leur création. Attention PHP est
sensible à la casse : var et Var ne sont pas les mêmes variables ! Voici les règles à
respecter :
Une variable peut commencer par une lettre
Une variable peut commencer par un souligné (underscore) « _ »
Une variable ne doit pas commencer par un chiffre.
// Déclaration et
règles $var=1; //
$var est à 1 $Var=2;
// $ Var est à 2
$_toto='Salut'; // Ok
$3petitscochons=5; // Invalide : commence par un chiffre
Leur type dépend de leur valeur et de leur contexte d'utilisation. Mais on peut forcer
(cast) ponctuellement une variable à un type de données, ce qui s'appelle le
transtypage. De même comme le type de variable peut changer en fonction de son
utilisation ou du contexte, PHP effectue automatiquement un transtypage, ce qui peut
parfois fournir des résultats surprenants. On affecte une valeur à une variable avec le
signe égal « = » avec ou sans espace avant ou après.
68
// Déclaration et
transtypage $var='2'; //
Une chaîne 2
$var+=1; // $var est maintenant un entier 3
$var=$var+0.3; // $var est maintenant un réel de type double 3.3
$var=5 + "3 petits cochons"; // $var est un entier qui vaut 8
Par défaut les variables sont assignées par valeur : la valeur assignée à la variable est
recopiée dans la variable. PHP peut aussi travailler par référence. Une variable peut
donc référencer une autre variable. On dit alors que la variable devient un alias, ou
pointe sur une autre variable. On assigne par référence en utilisant le signe « & »
devant la variable assignée
$var=2;
$ref=&$var; // $ref devient une référence de $var
echo $ref; // affiche 2
$var=3;
echo $ref; // affiche 3
$ref=4;
echo $var; // affiche 4
Attention à la valeur constante NULL insensible à la casse. Affecter une valeur NULL
à une variable signifie ne pas puis affecter de valeur.
$a=1; // globale par défaut
function foo() {
echo $a; // c'est une variable locale à la fonction : n'affiche rien
}
Pour accéder à une variable globale dans une fonction, il faut utiliser le mot-clé global.
$a=1; // globale par défaut

$b=2; // idem
function foo() {
global $a,$b; // on récupère les variables globales
$b=$a+$b;
}
echo $b; // affiche 3
PHP accepte les variables statiques. Comme en C une variable statique ne perd pas sa
valeur quand on sort d'une fonction.
function test_static() {
static $a=0;
echo $a; // +1 à chaque passage dans la fonction
$a++;
}

69
II.4.2. Portée des variables

La portée d'une variable dépend du contexte. Une variable déclarée dans un script et
hors d'une fonction est globale mais par défaut sa portée est limitée au script courant,
ainsi qu'au code éventuellement inclus (include, require) et n'est pas accessible dans
les fonctions ou d'autres scripts.
II.4.3. Variables prédéfinies

PHP dispose d'un grand nombre de variables prédéfinies. Ces variables sont
généralement de type scalaire ou des tableaux. Elles sont souvent de type
superglobales, c'est à dire accessible depuis n'importe où sans notion de portée. Voici
quelques tableaux prédéfinis (voir au point Tableaux pour comprendre leur
utilisation).
• $_GLOBALS : tableau des variables globales. La clé est le nom de la variable.

• $_SERVER : variables fournies par le serveur web, par exemple 'SERVER_NAME'
• $_GET : variables fournies par HTTP par la méthode GET (formulaires)
• $_POST : idem mais pour la méthode POST
• $_COOKIE : les variables fournies par un cookie
• $_FILES : variables sur le téléchargement d'un fichier (upload)
• $_ENV : accès aux variables d'environnement du serveur
• $_SESSION : les variables de session (voir cours sur les sessions)
II.4.4. Variables dynamiques

Une variable dynamique utilise la valeur d'une variable comme nom d'une autre
variable. On utilise les variables dynamiques en rajoutant un « $ » devant le nom de
la première variable.
$a="var";
$$a=1; // $$a=1 equivaut en fait à $var=1
echo $a; // affiche var
echo $$a; // affiche 1
echo $var; // affiche 1
Attention avec les tableaux ! Pour éviter toute ambiguïté, il est préférable de placer la
variable entre accolades.
II.5. Types de variables

Les types de variables sont de différents ordres dont les booléens, les entiers, les
caractères, les chaînes de caractères, les variables à virgule flottante, les tableaux etc.
II.5.1. Booléens
Un booléen peut prendre deux valeurs TRUE ou FALSE. Les deux constantes TRUE et
FALSE peuvent être utilisées sans aucune distinction de casse (pas de différences entre
les majuscules et les minuscules).
$var=FALSE; // FALSE, False, false, ...

70
$var2=True; // TRUE, True, true, ...
Tous les types peuvent être convertis en booléens. Voici les cas où une variable
retournera FALSE en booléen suivant le type :
• Booléen : FALSE
• Entier : 0 (zéro)
• Nombre flottant : 0.0 (zéro)
• Chaîne : chaîne vide "" ou "0" (zéro)
• Tableau : tableau vide sans aucun élément
• Objet : objet vide sans aucun élément
• Constante spéciale NULL
Dans tous les autres cas, la valeur retournée est TRUE. Attention : -1 est considéré
comme vrai donc TRUE. Comme en C, les tests de conditions dans les structures de
contrôles effectuent une convertion booléenne du la condition.
if($var==true) echo "ok";

if($var) echo "ok"; // Identique
II.5.2. Entiers
Un entier est l'ensemble des nombres naturels, c'est à dire dans virgule, positifs ou
négatifs. Les entiers sont généralement codés sur 32 bits mais cela dépend de
l'architecture. Si on affecte un nombre entier qui dépasse la capacité de la variable,
celle-ci sera transformée en réel (float). Enfin il n'y a pas de notion d'entier non signé.
Lors de la conversion d'un booléen en entier, FALSE devient 0 et TRUE devient 1. Lors
de la conversion d'un nombre à virgule flottante, le nombre sera arrondi à la valeur
inférieure s'il est positif, ou supérieure s'il est négatif (conversion vers zéro). Pour la
conversion depuis les chaînes, voir à ce type.
II.5.3 Virgule flottante

On parte ici des nombres réels, double ou float, c'est à dire les nombres à virgules. La
virgule est spécifiée par le point « . ». La puissance de 10 s'exprime avec le « e » ou le
« E ».
$var=1.234;
$var2=1.1e4; // 1.1 * 10^4 : 11000
II.5.4 Chaînes de caractères

Une chaîne est une séquence de caractères. PHP travaille en ASCII soit 256 caractères,
mais ne supporte pas encore le format Unicode, prévu dans la version 5. Il n'y a pas
de limite théorique pour la taille de la chaîne.
On distingue trois syntaxes pour utiliser une chaîne

71
• Les guillemets simples '...' (apostrophes) : Comme en shell, tous les caractères inclus
dans la chaîne sont sortis tels quels sans interprétation. Si vous devez afficher un
guillemet simple, il faudra l'échapper : \'
• Les guillemets doubles "..." : Certaines séquences de caractères sont interprétées et
les variables sont substituées (remplacées par leur valeur).
• HereDoc : Identique aux HereScripts en Shell. Le texte saisi jusqu'à un délimiteur
spécifié est placé dans la variable.
Voici le tableau issu de la documentation PHP des séquences pouvant être utilisés avec
les guillemets doubles.
Séquence Valeur
\n Nouvelle ligne (linefeed, LF ou 0x0A (10) en ASCII)
\r Retour à la ligne (carriage return, CR ou 0x0D (13) en ASCII)
\t Tabulation horizontale (HT ou 0x09 (9) en ASCII)
\\ Antislash
\$ Caractère $
\" Guillemets doubles
Une séquence de caractères qui permet de rechercher un nombre en

\[0-7]{1,3} notation octale.
\x[0-9A-Fa- Une séquence de caractères qui permet de rechercher un nombre en

f]{1,2} notation hexadécimale.
echo 'Attention l\'abus d\'alcool est dangereux';

$var=2345;
echo "la valeur de \$var est $var\n";
$toto= <<<FIN
Salut les amis
Comment ça va ?
FIN;
echo $toto;
N'importe quelle variable peut être affichée dans une chaîne comme ci-dessus mais
attention si deux variables ont un nom proche ! Il faut alors utiliser les accolades { }
comme en shell. Enfin on peut accéder à n'importe quel caractère dans une chaîne en
indiquant sa position (qui commence à zéro) entre deux accolades collées juste après
le nom de la variable.
$fic='toto.fic';
$fics='riri fifi loulou';

72
echo "$fics ${fic}s"; // affiche riri fifi loulou toto.fics echo

"$fic{3}"; // affiche o
On peut facilement concaténer deux chaînes avec l'opérateur point « . ». On peut

ajouter du texte à une chaîne avec l'opérateur point égal « .= ».
$str="Salut les Amis !\n";

$str.="Comment ça va ?"; // "Salut les Amis !\nComment ça va ?
$str2=$str."\n"; // "Salut les Amis !\nComment ça va ?\n
Si vous devez utiliser une chaîne de caractères comme valeur numérique (dans une
addition par exemple, attention à son contenu. La chaîne sera de type double (réel) si
elle contient un 'e' ou un 'E'. Sinon ce sera un entier. La valeur numérique est ensuite
définie par le début de la chaîne. Si la chaîne commence par une valeur numérique,
elle sera utilisée, sinon elle sera égale à 0 zéro. Si la première expression est une chaîne,
le type de variable dépend de la seconde expression.
$val=10+"2.55"; // float, 12.55

$val=1+"toto2"; // 1 + 0 = 1
$val=2+"3 petits cochons"; // 2 + 3 = 5 (le 3 est en premier dans la chaîne)
II.5.5. Les tableaux

Un tableau PHP est une association ordonnée. Une association fait correspondre des
valeurs à des clés. Les tableaux sont très souples, ils peuvent avoir de multiples
dimensions, être indexés par une clé numérique ou texte, être utilisés comme table de
hachage, une pile, une queue, ... Une valeur de tableau peut être elle-même un tableau,
pour créer des arbres par exemple.
Un tableau est créé avec la fonction array() qui prend comme arguments des paires «
key => value » séparées par des virgules. La clé peut être soit un entier soit du texte.
Attention, 8 est un entier, 08 une chaîne ! Si la clé est absente alors c'est la dernière clé
entière plus 1 qui est choisie. Si c'est la première, c'est 0 zéro.
On accède aux éléments d'un tableau à l'aide des crochets « [ et ] ». On place entre ces
crochets la clé entière ou la chaîne.
$var=array(10,15,17,23,9);
echo $var[0]; // 10
echo $var[3]; // 17
$tab=array("a"=>12,"nom"=>"toto","pipo",17,4=>5
); echo $tab[0]; // pipo
echo $tab[1]; // 17
echo $tab['a']; // 12
echo $tab['nom']; // toto
L'utilisation de la fonction array n'est pas obligatoire et on peut déclarer un tableau à

la volée.
$tab2[1]=2;
$tab2[]=6; // equivaut $tab2[2]=6
73
$tab2['test']='Ma chaîne';
On peut aussi créer des tableaux multidimensionnels à l'aide des deux méthodes
précédentes.
$tab=array("un"=>array("riri",1=>"fifi",2=>'loulou'),2=>array(1,2,3),array('un',
'deux','trois'));
echo $tab['un'][0]; // riri
echo $tab[2][1]; // 2
echo $tab[3][2]; // trois
$tab2['un']['deux']='test'; // créé un tableau à deux dimensions
Il existe une fonction très pratique pour lister le contenu d'un tableau, ou pour
modifier les éléments
: foreach().
$tab=array(1=>'un',2=>'deux',3=>'trois');
foreach($tab as $valeur) {
echo "$valeur \n"; // affiche un deux trois
}
foreach($tab as $cle => $valeur) {
echo "$cle => $valeur\n"; // affiche 1 => un, 2 => deux, 3 => trois
}
II.5.6. La variable objet

Les objets se créent avec l'instruction class. Pour créer une instace de l'objet il faut
utiliser le mot clé new.
class test {
function affiche_hello() {
echo "Hello !";
}
}
$obj=new test;
$obj->affiche_hello();
II.5.7. Les constantes

Les constantes est un nom qui prend une valeur ne pouvant pas être modifiée une fois
fixée. Une constante n'est accessible qu'en lecture seule. Elles sont sensibles à la casse
et doivent par convention être écrites en majuscules.
On définit une constante avec la fonction define() et doit respecter certaines règles :
• une constante ne commence pas par un $

• une constante est accessible depuis n'importe quel endroit du code
• une constante ne peut pas être redéfinie
• une constante ne peut contenir d'un scalaire (entier, booléen, chaîne, double).
define(CONSTANTE,"valeur");
echo CONSTANTE; // affiche "valeur"

74
II.5.8. Obtenir le type d'une variable

Pour obtenir le type d'une variable, on utilise la fonction « gettype » qui retourne une
chaîne de texte indiquant le type. Mais attention rien ne garantit que le résultat soit
le même d'une version PHP à une autre.
Les types retournés sont "boolean", "integer", "double" (pour des raisons historiques,
"double" est retournée lorsqu'une valeur de type float est fournie, au lieu de la chaîne
"float"), "string", "array", "object", "resource" (depuis PHP 4), "NULL" (depuis PHP 4),
"unknown type"
Si vous souhaitez réellement tester le type d'une variable, il est préférable d'utiliser les
fonctions de type « is_* » : is_array, is_bool, is_double, is_float, is_int, is_integer,
is_long, is_null, is_numeric, is_object, is_real, is_resource, is_string, is_callable (est-
ce une fonction).
II.5.9. Définir et supprimer une variable

Si vous souhaitez savoir si une variable est définie, c'est à dire si elle est affectée, on
utilise
« isset ».
Enfin si vous souhaitez supprimer une variable, il faut utiliser « unset ».
II.6. Les opérateurs

Les opérateurs sont des symboles qui, après être utilisés sur des variables produisent
des résultats.
II.6.1. La précédence des opérateurs

C'est l'ordre dans lequel les valeurs doivent être analysées. Ainsi l'expression 4 + 3 * 7
n'est pas lue de gauche à droite et ne retourne pas 49 mais 25. Voici le tableau des
priorités des opérateurs par ordre croissant de priorité :
Associativité Opérateurs
gauche ,
gauche or
gauche xor
gauche and
droite print
gauche = += -= *= /= .= %= &= |= ^= ~= <<=>>=

75
gauche ?:
gauche ||
gauche &&
gauche |
gauche ^
gauche &
non-
associative == != === !==
non-
associative <<=>>=
gauche << >>
gauche +-.
gauche */%
! ~ ++ -- (int) (double) (string) (array) (object)

droite @
droite [
non-
associative new
II.6. 1. Opérateurs arithmétiques

Les opérateurs +, -, *, / et %. Le « % » est le modulo : le reste de la division.
II.6.2. Opérateurs d'assignation

Le principal est le = mais on a aussi comme en C des opérateurs combinés +=, -=, *=,
/=, %=, .= ...
II.6.3. Opérateurs sur les bits

Les opérateurs sont le & (AND), | (OR), ^ (XOR), ~ (NOT, ~$a), >> ($a>>$b décalage
de $b bits sur la gauche) et << ($a << $b décalage de $b bits sur la droite). Un décalage
76
de bits sur la gauche équivaut à une multiplication par deux, un décalage sur la droite
à une division par deux.
II.6.4. Opérateurs de comparaison

Les opérateurs sont == ($a==$b, même valeur), === ($a===$b, même valeur et même
type), != ou <> (différent), <, >, <=, >=.
Il y a aussi l'opérateur ternaire « ?: » expr1?expr2:expr3 Si expr1 est vrai alors expr2

sinon expr3.
II.6.5. Opérateur d'erreur

On dispose d'un opérateur spécial @ qui appliqué à une expression empêche la sortie
d'un message d'erreur en cas de problème. On peut toujours récupérer le message
d'erreur éventuel à l'aide de la variable $php_errormsg mais uniquement si l'option «
track_errors » est à « On » dans le php.ini.
$retour=@$tab['toto']; // ne retourne pas d'erreurs si l'index toto n'existe pas
II.6.6. Opérateur d'exécution

On peut exécuter des commandes externes au PHP comme en Shell avec les opérateurs
« guillemts inverses « ` » (altgr+6). Attention l'option « safe_mode » doit être à « On »
dans le php.ini. On peut aussi utiliser la fonction « shell_exec » qui fait exécuter une
commande par le shell.
II.6.7. Opérateurs d'incrémentation/décrémentation

On dispose comme en C des opérateurs ++ et --, à utiliser avant ou après le nom de
variable.
$a++; // retourne $a puis l'incrémente de 1

++$a; // incrémente $a de 1 puis retourne $a
$a--; // retourne $a puis décrémente de 1 --
$a; // décrémente $a de 1 puis retourne $a
Attention ! Les opérateurs réagissent aux types de variables. Le PHP réagit comme en
PERL. Ainsi :
$a='Z';
$a++;
echo $a; // retourne AA
$a++;
echo $a; // retourne AB
II.6.8. Opérateurs logiques

Les opérateurs logiques sont :
« and » ou « && » ($a and $b, $a && $b) vrai si $a et $b sont vrais

77
« or » ou « || » ($a or $b, $a || $b) vrai si $a ou $b sont vrais

« xor » ($a xor $b) vrai si $a ou $b sont vrais mais pas les deux en même temps
« ! » (!$a) vrai si $a est faux.
Attention, and et or n'ont pas la même priorité (priorité plus faible) que && et || !
II.6.9. Opérateurs de chaînes

Il y a deux opérateurs de chaînes : le « . » qui concatène deux chaînes entre elles et le «
.= » déjà vu qui est l'opérateur d'assignation.
$a="Bonjour";
$b=$a." les amis"; // $b contient Bonjour les amis
$b.="! Salut."; // $b contient Bonjour les amis! Salut.
II.6.10. Opérateur de tableaux

On peut « additionner » deux tableaux entre eux avec le « + » : le tableau de droite est
ajouté au tableau de gauche.
II.7. La notion d’expression

En PHP, une expression peut être résumée en « tout ce qui a une valeur ». Ceci dit, on
remarque vite que en PHP tout ou presque est une expression. Une variable ou une
constante se voient affectés des valeurs. Cette valeur est donc l'expression de la
variable ou de la constante.
Nous pouvons résumer en disant qu'une expression représente tout ce qui peut être
évalué. On ne peut évaluer que les valeurs...
Une fonction peut aussi être une expression si elle retourne une valeur. On dit
généralement qu'une fonction a retourné telle valeur. Une comparaison est aussi une
expression : elle retourne une valeur booléenne. Un calcul est aussi une expression,
puisqu'une valeur est retournée, affectée, calculée.
PHP est orienté expression ce qui fait que tout ou presque en PHP est une expression.
PHP cherche donc à décomposer tout ce qui est possible en expressions à évaluer, pour
optimiser ses traitements. Voici quelques exemples.
$a=2;
On distingue au premier coup d'oeil deux valeurs : la variable $a et la valeur 2, la

variable $a étant
mise à jour avec la valeur 2. Or en interne il y a une troisième valeur qui rentre en jeu:
la valeur de l'assignation, ici elle-même assignée à 2. Cette ligne signifie en fait : « $a=2
est une expression qui vaut 2 ».
$b=$a=2;

78
Les assignations sont analysées de droite à gauche. Ici nous avons l'expression $a=2
qui vaut donc 2. $b vaut donc 2 aussi. C'est plus rapide à écrire et à exécuter que $a=2;
$b=2;
$a=$a+3;
PHP évalue d'abord l'expression $a+3 soit la valeur de $a incrémentée de 3, et assigne

la nouvelle valeur à $a.
$a+=3;
Le résultat est le même, mais il est plus rapide car $a n'est évalué qu'une seule fois. On
peut en arriver à avoir des expressions surprenantes :
$a=2;
$b=$a+=3;
La variable $a est incrémentée de 3 et vaut donc 5. L'expression $a+=3 vaut 5. $b se

voit assigné la valeur 5. L'expression vaut donc 5.
Dernière chose :
$a?$b:$c
si l'expression $a est vrai, l'expression $b est évaluée, sinon l'expression $c est évaluée.
$a=TRUE; $b=2;$c=3;
echo $a?$b:$c; // affiche 2
II.8. Les structures de contrôle
II.8.1. if
if(expression) commande ou { bloc de

commandes } else commande ou { bloc de
commandes }
Il y a aussi le « elseif », combinaison du if et du else. Le elseif en un mot peut aussi

s'écrire en deux mots : le résultat est le même. On peut écrire des elseif en chaîne. Le
premier dont l'expression est vrai est exécuté.
If(expression) commande ou { bloc de commandes }

elsif(expression) commande ou { bloc de commandes
} elsif(expression) commande ou { bloc de
commandes }
...
On peut placer du HTML comme commande ou dans le bloc de commande.

79
<?php if ($a == 5) { ?>

A=5
<?php } ?>
On peut aussi utiliser une syntaxe alternative : on ouvre le bloc (juste après le if, le else
ou le elseif)
avec les « : » deux points, et on ferme l'instruction avec « endif ».
<?php
if ($a == 5):
print "a = 5";
print "...";
elseif ($a == 6):
print "a = 6";
print "!!!";
else:
print "a ne vaut ni 5 ni 6";
endif;
?>
II.8.2. while
while classique
C'est la boucle « tant que » simple : tant que la condition n'est pas vraie, on continue
la boucle. L'expression est placée en début de boucle : si l'expression est fausse avant
de rentrer dans la boucle, la boucle n'est pas exécutée.
While(expression) commande ou { bloc de commandes }
On peut aussi utiliser la syntaxe alternative :
while(expression): commande ou { bloc de

commandes } endwhile
do ... while
C'est la seconde possibilité. Dans ce cas la commande ou le bloc de commande est

exécutée au moins une fois, car l'expression conditionnelle est testée en fin de boucle.
do { bloc de commandes } while(expression)
II.8.3. for
Le « for » du PHP est identique au « for » du C.
for(expr1;expr2;expr3) commande ou { bloc de commandes }
« expr1 » est exécutée à la première entrée dans la boucle. « expr2 » est exécutée à
chaque début d'itération jusqu'à ce que l'expression soit fausse auquel cas on sort de
la boucle. « expr3 » est exécutée à la fin de l'itération.
80
L'usage habituel d'une telle boucle est de placer l'état initial en expr1, la condition de
sortie en expr2 et le calcul en expr3. Mais on peu effectuer toutes sortes de choses.
// de 1 à 10
for ($i = 1; $i <= 10; print $i, $i++)
// infini
for(;;)
// de 1 à 10
for ($i = 1; $i <= 10; print $i, $i++) ;
On peut employer une syntaxe alternative avec le « : » et « endfor ».
for(expr1;expr2;expr3): commande ou { bloc de commandes

} endfor
II.8.4. foreach
La boucle « foreach » est peut-être l'une des plus intéressantes pour la manipulation
de tableaux ou de résultats de requêtes SQL. Elle permet de lister les tableaux. Elle
dispose de deux syntaxes.
foreach(array_expression as $value) commandes

foreach(array_expression as $key => $value)
commandes
La première syntaxe récupère les éléments du tableau un par un, séquentiellement. La

valeur de l'élément courant du tableau est placée dans $value.
La seconde syntaxe est presque identique, sauf qu'en plus la clé (l'index) de l'élément
actuel est placée dans $key.
Attention : modifier la valeur de $value (ou de $key) ne modifie pas le tableau car cette
boucle travaille sur une copie, pas une référence. Par contre dans le second cas, comme
on dispose de la clé, rien n'empêche d'assigner quoi que ce soit à l'élément courant.
Remarque : un appel à foreach « rembobine » automatiquement le tableau à son

premier élément.
Mais pas dans les autres boucles, il faut alors utiliser « reset ».
reset($arr);
while (list(, $value) = each ($arr)) {
echo "Valeur: $value<br>\n";
}
foreach ($arr as $value) {
echo "Valeur: $value<br>\n";
}
$a = array (
"un" => 1,
"deux" => 2,

81
"trois" => 3,
"dix-sept" => 17
);
foreach($a as $k => $v) {

print "\$a[$k] => $v.\n";
}
II.8.5. break et continue

L'instruction « break » permet de sortir d'un for, while, foreach ou switch. On peut lui
indiquer de combien de structures on souhaite sortir si elles sont emboîtées.
L'instruction « continue » permet de passer à l'itération suivante. Attention PHP

conside le switch comme une boucle, et dans ce cas, réévalue le switch. On peut
indiquer à continue combien de structures emboîtées relancer.
II.8.6. switch
Le « switch » est équivalent à une série de if et permet de comparer avec un grand
nombre de valeurs.
switch ($i) {
case 0:
print "i egale 0";
break;
case 1:
print "i egale 1";
break;
case 2:
print "i egale 2";
break;
default:
print "i est inférieur à 0 ou supérieur à 2 »;
}
Le switch s'arrête à la première expression case vraie puis exécute le code suivant dans
l'ordre indiqué, jusqu'à la première instruction break. S'il n'y a pas de break, tout le
code jusqu'à la fin du switch est exécuté. Dans l'exemple suivant, si $i vaut 0, tous les
print seront affichés !
switch ($i) {
case 0:
print "i egale 0";
case 1:
print "i egale 1";
case 2:
print "i egale 2";
}
Notez aussi que le default doit intervenir en dernier, sinon il n'a aucun intérêt.

82
Enfin on peut employer une syntaxe alternative avec « : » et « endswitch ».

switch ($i):
case 0:
print "i egale 0";
break;
case 1:
print "i egale 1";
break;
endswitch
II.8.7. return
Contrairement à d'autres langages, « return » n'est pas une fonction mais une
instruction. Dans une fonction, return sert à sortir de celle-ci et à retourner une valeur.
Dans un script, elle sort de celui-ci. Attention cependant dans les scripts inclus (voir
require et include) : le return dans ce type de code considère qu'il sort de la fonction «
require » ou « include » et donc ne sort pas du script ou de la fonction dans lesquels
ce code a été inclus !
Comme return est un élément du langage et pas une fonction il y a pas besoin d'utiliser
les parenthèses.
II.8.8. require et include (_once)

« require » et « include » incluent à l'endroit actuel et exécutent le fichier PHP. Ils sont
identiques dans leur fonctionnement à une exception : le traitement des erreurs. Un
include produit un
« warning » (le code continue en principe à s'exécuter) tandis qu'un require produit
une « erreur fatale » (l'exécution s'arrête).
Comme require et include sont des éléments du langage et pas des fonctions il y a pas
besoin d'utiliser les parenthèses.
« require_once » et « include_once » ressemblent à leurs homologues avec cependant

une différence. Quoi qu'il arrive, le fichier est inclus une seule fois. Si un second «
require_once » apparaît avec le même fichier, l'instruction ne sera pas exécutée.
II.9. Les fonctions
II.9.1. Syntaxe et portée

Voici la syntaxe d'une fonction.
function fonc($arg1, $arg2, $arg3, ..., $argn) { bloc

de commandes
return $valeur
}
Une fonction n'a pas besoin d'être déclarée avant d'être utilisée (sauf si vous voulez
rester compatible avec PHP3), du moment qu'elle apparaît dans le script.

83
Il y a cependant deux exceptions : si la fonction est conditionnelle, c'est à dire déclarée

dans un if, ou si la fonction est déclarée dans une autre fonction. Dans le premier cas
elle sera inconnue du reste du code tant que la condition du if n'est pas vraie. Dans le
second cas elle ne sera connue que quand la première fonction sera exécutée. Voici un
exemple tiré du manuel.
Pour le premier cas :
$makefoo = true;
/* Impossible d'appeler foo() ici, car cette fonction n'existe pas. Mais
nous pouvons utiliser bar() */
bar();
if ($makefoo) {
function foo () {
echo "Je n'existe pas tant que le programme n'est pas passé ici.\n";
}
}
/* Maitenant, nous pouvons appeler foo() car $makefoo est maintenant vrai */ if
($makefoo) foo();
function bar() {
echo "J'existe dès le début du programme.\n";
}
Pour le second cas :
function foo() {
function bar() {
echo "Je n'existe pas tant que foo() n'est pas appelé.\n";
}
}
/* Impossible d'appeler bar() ici car il n'existe pas. */ foo();

/* Maintenant, nous pouvons appeler bar(), car l'utilisation de foo() l'a rendu
accessible. */
bar();
II.9.2. Arguments
On peut passer autant d'arguments que souhaité à une fonction PHP, de tous types.
Les arguments sont séparés par des virgules. Par défaut ils sont passés par copie.
function affiche($msg) {
echo $msg;
}
Il est possible de passer des arguments par référence, on peut donc en changer la
valeur à l'intérieur de la fonction. Pour cela on rajoute un « & » devant l'argument. On

84
peut passer ponctuellement une variable par référence en plaçant un « & » devant son
nom lors de l'appel de la fonction.
function modif(&$msg) {
$msg="coucou";
}
$msg="salut";
modif($msg);
echo $msg; // coucou
On peut aussi définir des valeurs par défaut mais ATTENTION, dans la liste des
paramètres les valeurs par défaut doivent être en dernier.
function affiche($nom, $prenom="toto") {

echo "$nom $prenom";
}
Enfin on peut utiliser un nombre variable d'arguments avec les fonctions

func_num_args, func_get_arg et func_get_args.
function foo() {
$numargs = func_num_args();
echo "Nombre d'arguments: $numargs\n";
}
foo (1, 2, 3); // affiche 'Nombre d'arguments: 3'
II.9.3. Valeur de retour

On retourne une valeur avec l'instruction « return ». On peut retourner tout type de
valeurs, mais pas plusieurs en même temps. Cependant rien n'empêche dans ce cas de
retourner un tableau. Une fonction peut aussi retourner une référence. Dans ce cas elle
doit être déclarée avec un « & » devant son nom.
function carre ($num) {

return $num * $num;
}
echo carre (4); // affiche '16'
II.8.4. Fonctions internes

En plus des fonctions définies par l'utilisateur PHP propose un grand nombre de
fonctions internes couvrant une multitude de domaines. Pour accéder à ces fonctions
il faut simplement les appeler par leur nom et que le module correspondant soit
compilé avec PHP. Nous verrons dans les chapitres suivants comment en utiliser
certaines.

85
II.10. Gestion des formulaires en PHP

II.10.1. GET et POST
Le but est de récupérer le contenu des champs d'un formulaire HTML dans notre code
PHP pour pouvoir le traiter. Lorsqu'un formulaire est envoyé à un script PHP, toutes
les variables seront disponibles automatiquement dans le script.
Les formulaires peuvent être de type GET ou POST. Pour rappel, dans un formulaire
de type GET, les informations sont passées directement par l'URL en clair, ce qui peut
poser des problèmes de limitations suivant le serveur (de 256 à 8192 octets selon le
cas). La méthode POST n'a pas ce genre de limitation, car les informations sont
transmises par le conteneur de variables globales (dans l'entête) et sont de plus
cachées. PHP peut gérer les deux méthodes de manière transparente.
II.10.2. Récupération par tableau

Chaque champ de formulaire en PHP est défini par un nom et une valeur. Dans un
script, PHP va récupérer ces noms et ces valeurs dans des tableaux spéciaux dit
superglobaux (accessibles depuis partout). Pour la méthode GET, le tableau est
$_GET, pour la méthode POST le tableau est $_POST. Si vous ne souhaitez pas vous
soucier de la méthode, vous pouvez utiliser le tableau $_REQUEST. En index on aura
le nom du champ de formulaire (ou de la variable passée en URL) et en valeur la valeur
du champ. Par exemple :
<form action="foo.php" method="post">

Name: <input type="text" name="username"><br>
Email: <input type="text" name="email"><br>
<input type="submit" name="submit" value="Submit
me!"> </form>
Dans la page PHP foo.php on aura :
<?php
echo $_POST['username'];
echo $_REQUEST['email'];
?>
Imaginons l'appel d'une page test.php par une URL comme ceci :
http://www.monsite.com/test.php?id=1
Ici on transmet une variable via une URL et donc la méthode implicite GET. Pour
récupérer « id » dans un code PHP on peut donc faire :
<?php
echo $_GET['id'];
echo $_REQUEST['id'];
?>

86
$_GET ne contiendra que les variables de type GET. $_POST ne contiendra que les
variables de type POST. $_REQUEST contient les variables de type POST et GET mais
aussi les variables de cookies. Il est aussi possible de procéder autrement en
récupérant le nom du champ directement en tant que variable sans passer par un
tableau. Pour cela il faut vérifier dans le fichier php.ini que la valeur
register_globals est à on. Dans ce cas les noms des champs de formulaire seront les
noms des variables :
<?php
echo $username;
echo $email;
?>
II.10.3. Récupération directe

Si cette valeur est à off et que pour diverses raisons (sécurité, pas le droit, etc) vous ne
souhaitez/pouvez pas la modifier, il existe tout de même une méthode. La fonction
« import_request_variables » permet d'effectuer explicitement la même chose. Cette
fonction prend un ou deux paramètres, le second étant optionnel. Après exécution, on
récupère les variables sans passer par un tableau. Le premier paramètre est le type de
variables qu'on souhaite récupérer :
– P / p : variables de type POST
– G / g : variables de type GET
– C / c : variables de type cookie
On peut cumuler l'ensemble mais attention à l'ordre ! Le second paramètre est le

préfixe qu'on souhaite donner au nom des variables qu'on va récupérer. Voici deux
exemples :
<?php
import_request_variables("p");
echo $username;
?>
<?php
import_request_variables("P","Post_");
echo $Post_username;
?>
On peut aussi passer par la fonction « extract » qui permet d'exporter un tableau en
variables. Ainsi pour le tableau $_POST :
<?php
extract($_POST);
echo $username;
?>

87
II.10.4. Utiliser des tableaux

Les formulaires permettent d'utiliser des listes à choix multiples et PHP doit donc
récupérer l'ensemble des choix de l'utilisateur. Pour ça il faut utiliser les tableaux.
<form action="<?php echo $HTTP_SERVER_VARS['PHP_SELF']; ?>"

method="post"> Name: <input type="text" name="personal[name]"><br>
Email: <input type="text" name="personal[email]"><br>
Beer: <br>
<select multiple name="vin[]">
<option
value="bordeaux">bordeaux</option>
<option
value="beaujolais">beaujolais</option>
<option value="loire">loire</option>
</select><br>
<input type="hidden" name="action"
value="submitted"> <input type="submit"
name="submit" value="submit me!"> </form>
Dans l'exemple précédent si par exemple on sélectionne plusieurs vins (ex : bordeaux
et beaujolais) on aura dans $vin[0] bordeaux et $vin[1] beaujolais.
II.11. Date et heure

II.11.1. Localisation
Le format de date et d'heure (format et langue) est dépendant de l'environnement
d'exécution du code PHP. Généralement la plupart des serveurs web incorporant PHP
sont configurés en langue anglaise avec une gestion des informations de localisation
en anglais. Il peut être préférable de passer en français pour un site francophone ce qui
simplifie largement la tâche. On peut effectuer cela avec la fonction « setlocale ». Voici
deux exemples : un sous NT/2000 et un autre sous Linux.
if (substr(php_uname(), 0, 7) != "Windows") {
setlocale(LC_TIME,"fr_FR@euro");
} else {
setlocale(LC_TIME,"fr");
}
Dans cet exemple, nous vérifions d'abord à quel système nous avons à faire (fonction
php_uname) puis en fonction du résultat nous passons en localisation française selon
deux méthodes. Après ce changement, les appels aux fonctions retournant des jours
de la semaine ou des mois le feront en français.
II.12. MySQL
MySQL est un SGBDR : « Système de Gestion de base de Données Relationnel » qui se
définit lui-même comme étant « La base de données Open Source la plus populaire au
monde ». Rien que ça. Et c'est vrai ! Edité par la société MySQL AB, MySQL est un
88
produit Open Source libre d'utilisation sous licence GPL pour les projets libres.
Cependant une licence commerciale est nécessaire dans les autres cas, notamment si
on souhaite redistribuer MySQL avec un produit non libre ou si on souhaite un
support technique.
La version de production actuelle de MySQL est la version 4 (4.0.17 à l'écriture de ce

support), mais la grande majorité des serveurs des hébergeurs sont encore dans les
dernières versions de MySQL 3.23 (3.23.58). La future version actuellement en
développement est la 5.0.0 et n'est surtout pas à utiliser en production.
Les principales qualités de MySQL sont sa simplicité et sa rapidité. Son principale

défaut est le manque de fonctionnalités dites avancées (dans les versions précédentes)
: clé étrangères, procédures stockées, triggers et selects imbriqués notamment. Mais
cela ne doit pas occulter sa puissance avec l'ajout de fonctionnalités avancées comme
une syntaxe SQL étendue (replace, limit, delete), les index de recherche « fulltext »
permettant de créer des moteurs de recherche, ...
La prochaine version stable (5.0) comblera les lacunes des précédentes versions avec
le support complet de la syntaxe SQL ANSI-99.
II.12.1. Outils
PhpMyAdmin
S'il reste bien entendu possible d'utiliser MySQL en ligne de commande, un peu
comme « sqlplus » de Oracle, on est bien plus à l'aise avec un environnement plus
intuitif. Ainsi, l'outil phpMyAdmin est une interface web à MySQL permettant
d'effectuer la plupart des tâches de maintenance et d'utilisation. Cette solution
fonctionne depuis n'importe quel navigateur et est indépendante de la machine. On
accède à phpMyAdmin généralement par l'URL http://server_name/mysql.
II.12.2. Créer une base

A partir de l'écran d'accueil de phpMyAdmin, on saisit le nom de la base dans « Créer
une base de données ». Il faut de préférence choisir un nom simple et intuitif. Puis on
clique sur « Créer ». Après la création une nouvelle page s'affiche : c'est la page
principale d'administration de la base. En haut seront toujours présents après
l'exécution d'une commande les résultats de celle-ci. Cet écran permet notamment
l'exécution de commandes SQL, et le travail sur les tables.
II.12.3. Utilisateurs et droits

Dans le menu de gauche, on choisit le « - » (tiret) qui correspond à la racine ou
administration du serveur MySQL par lui-même. Dans la nouvelle page, on choisit «
Utilisateurs et privilèges ». La page suivante permet d'ajouter un utilisateur. Il faut
faire attention à une chose : le serveur. En effet, suivant la configuration initiale (sur
Linux par exemple) les droits dépendent de la façon dont a été accédée la base. Ainsi
si localhost et 127.0.0.1 sont identiques, si la base est appelée depuis une autre IP ou
un autre nom, l'utilisateur n'aura pas tous les droits. En cas de doute, il suffit de choisir
« Tout serveur ».

89
Pour créer un administrateur, le mieux est de donner tous les privilèges. Pour un
utilisateur
« standard » (requêtes de sélection, d'ajout, de mises à jour et de suppression
d'enregistrements) on choisira les privilèges Select, Insert, Update et Delete.
Une fois l'utilisateur créé, et si plusieurs bases sont présentes, on peut affiner les droits
pour chacune des bases. La liste des utilisateurs et de leurs droits sur une base est
affiché en haut. En choisissant
« modifier » on peut affiner la sélection notamment en passant par « autres privilèges
» : droits sur des bases, tables ou même colonnes.
II.12.4. Créer et modifier des tables

On retourne par le menu de gauche dans une base existante. Dans l'écran
d'administration on saisit (bas de la page) le nom de la table et le nombre de champs
(colonnes). Il sera possible après coup d'en rajouter ou d'en supprimer. Puis on choisit
« Créer ».
L'étape suivante consiste à définir la table. Intéressons-nous aux différents types de

champs possibles.
II.13. MySQL et PHP

II.12.1. Connexion à une base de données
Deux étapes sont généralement nécessaires pour plus de simplicité. La seconde n'est
pas obligatoire mais bien pratique dans le cas où on travaille sur une seule base de
données dans toute la page.
Connexion au serveur
On utilise la fonction mysql_connect(). Cette fonction prend (au minimum) trois
paramètres : le serveur (hostname) l'utilisateur et son mot de passe.
$b_host="sql.tf-data.net"
$b_user="toto";
$b_pass="CreT1";
$cnx=mysql_connect($b_host, $b_user,
$b_pass); if(!$cnx) die ("erreur de connexion à
MySQL");
Choix d'une base

On choisit une base de données par défaut avec la fonction mysql_select_db(). Elle
prend au minimum un paramètre, le nom de la base. Le second paramètre optionnel
est une ressource retournée par mysql_connect, en cas de connexion sur plusieurs
serveurs MySQL. Par défaut, la fonction prend la dernière connexion ouverte (celle du
dernier mysql_connect exécuté).
$b_base="slyunix";
90
$db=msql_select_db($b_base);
if(!$db) die("Erreur de connexion à la base $b_base");
Fermeture d'une connexion

On ferme une connexion à MySQL avec la fonction mysql_close(). Cependant dans le
cas de connexion non persistantes (voir à ce point) cette fonction n'est pas obligatoire
car PHP ferme automatiquement les connexions à la fin d'un script.
mysql_close($cnx);
Séquence complète pour une base

$b_host="sql.tf-data.net"
$b_user="toto";
$b_pass="CreT1";
$b_base="slyunix";
mysql_connect($b_host, $b_user, $b_pass) or die("erreur de connexion à MySQL");
mysql_select_db($b_base) or die("erreur à la selection de $b_base); mysql_close();
II.13.2. Les requêtes

Exécuter une requête
On exécute une requête SQL avec la fonction mysql_query(). Cette fonction prend au
moins un paramètre : une requête SQL sous forme de chaîne. La fonction retourne
FALSE en cas d'échec (colonne ou table invalide, droits insuffisants, pas de connexion,
etc).
ATTENTION : Ce n'est pas parce que l'appel à mysql_query() n'a pas retourné
d'erreur que la fonction retourne des lignes de résultats dans le cas d'un SELECT par
exemple. Enfin, la requête SQL ne doit pas finir par un point-virgule.
La requête peut être de n'importe quel type (selection, mise à jour, destruction, etc).
Dans le cas d'un SELECT, SHOW, EXPLAIN ou DESCRIBE, mysql_query() retourne
une ressource qui sera ensuite utilisée pour lire le résultat.
$result=mysql_query("select id_message, sujet from f_message");
Nombre de lignes affectées

Dans le cas d'un DELETE, INSERT, REPLACE ou UPDATE, on peut connaître le
nombre de lignes affectées (modifiées) par la requête à l'aide de la fonction
mysql_affected_rows().
$result=mysql_query("delete from f_message where login='toto'");

if($result) echo mysql_affected_rows()." Enregistrements supprimés";
Nombre de lignes retournées

91
Dans le cas d'un SELECT, le nombre d'enregistrements (lignes) retourné est obtenu
avec la fonction mysql_num_rows().
$result=mysql_query("select * from f_message where id_message > 10");

if($result) echo mysql_num_rows().' enregistrements retournés');
Récupérer les résultats

La fonction la plus sympathique pour récupérer les enregistrements après l'exécution
d'une sélection est mysql_fetch_array(). Elle prend au minimum un paramètre : une
ressource résultat (résultat de mysql_query). Elle retourne une ligne de résultat sous
forme d'un tableau associatif, d'un tableau indexé ou des deux. Par défaut, le tableau
retourné est à la fois associatif et indexé.
Dans un tableau associatif, l'index du tableau est le nom du champ correspondant à la

colonne. Dans un tableau indexé, les colonnes sont numérotées à partir de zéro.
Notez que mysql_fetch_array() ne retourne qu'une seule ligne de résultat. Pour passer
à la suivante, il faut exécuter la fonction à nouveau. Elle retournera FALSE quand il
n'y aura plus de lignes à lire.
$result=mysql_query("select sujet,texte from f_message where login='toto'");

$tab=mysql_fetch_array($result); // Première ligne du résultat
echo $tab['sujet'].', '.$tab['texte']; // affiche les champs sujet et texte echo
$tab[0].', '.$tab[1]; // idem
Si plusieurs colonnes portent le même nom, la dernière colonne sera prioritaire. Dans
une requête affichant des noms de colonnes identiques, le mieux est de les renommer :
SELECT t1.nom as col1, t2_nom as col2 FROM t1, t2 ...
Le second paramètre de mysql_fetch_array() peut être :

MYSQL_ASSOC : le résultat est uniquement un tableau associatif (index=nom
de colonne)
MYSQL_NUM : le résultat est uniquement un tableau indexé numériquement.
MYSQL_BOTH (par défaut) : les deux
Voici comment récupérer tous les résultats :

$result=mysql_query("select sujet, texte from f_message where login='toto'");
while ($result && $tab=mysql_fetch_array($result)) {
echo $tab['sujet'].', '.$tab['texte']; // affiche les champs sujet et texte
}
Notez l'expression du while. Pour y rentrer, il faut que le résultat de la requête

($result) ne soit pas FALSE (donc que la requête ait fonctionné) et qu'il reste des lignes
à lire. Autrement dit si la requête ne retourne rien, on ne rentre pas dans la boucle.
Notez enfin qu'il existe deux autres fonctions possibles :

92
mysql_fetch_row() : équivaut à mysql_fetch_array($var,MYSQL_NUM)

mysql_fetch_assoc() : équivaut à mysql_fetch_array($var, MYSQL_ASSOC)
Insertion avec auto-incrément

L'identifiant unique d'une table est souvent un entier auto-incrémenté. L'avantage est
qu'il n'y a pas besoin de gérer cet identifiant, c'est MySQL qui le détermine tout seul.
Mais dans certains cas, il peut être nécessaire de récupérer la valeur de ce champ auto-
incrémenté après une insertion pour, par exemple, mettre à jour un autre
enregistrement (liste chaînée, jointure, etc). On utilise pour ça la fonction
mysql_insert_id().
$result=mysql_query("insert into f_message (sujet, texte) values ('test','test')");

$id=mysql_insert_id();
$result=mysql_query("select sujet, texte from f_message where id_message=$id");
$tab=mysql_fetch_array($result);
echo $tab['sujet'].', '.$tab['texte']; // test, test
Récupération des erreurs

En cas d'erreur lors d'une manipulation sur MySQL, on peut récupérer le numéro de
l'erreur MySQL par la fonction mysql_errno(). De même on peut récupérer le message
d'erreur par la fonction mysql_error().
On peut trouver la liste des codes d'erreurs ici :
http://www.mysql.com/doc/en/Error-returns.html

93
Conclusion
Ce cours vient mettre en évidence la technique relative à la programmation web ; les

outils nécessaires pour mettre en place un site statique et /ou dynamique avec le
maximum de clarté dans ce domaine combien important et d’actualité.
Il est subdivisé en deux grands chapitres :
Le premier parle de deux langages (HTML et CSS) qui sont les langages
incontournables dans le domaine du web ;
Le second passe en revue le langage et le SBDR (PHP et MySQL) qui sont eux
aussi les outils très rependus dans le développement web.
Ce cours montre également l’interopérabilité entre tous ces outils et s’appui beaucoup
sur l’aspect pratique, ce qui le rend facilement utilisable pour les apprenants.
Références bibliographiques
- Apprenez à coder en HTML5 et CSS3, Pierre Giraud

- Cours PHP, Sébastien ROHAUT
ANNEXES
Séances de pratiques sur :

- Installations des outils de développement (Notepad ++, WAMP)
- Codage systématique en séances théoriques
Mode d’évaluation
1ère session : TP 40%, évaluation finale 60%, 2ème session : Examen écrit 100%.

Prog Web

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Prog Web

Transféré par

Droits d'auteur :

Formats disponibles

07/08/2019 Programmation

MSc. Pie Pacifique NTINANIRWA

Table des matières

MSc. Pie Pacifique NTINANIRWA

I.11. Les tableaux ............................................................................................................... 46

MSc. Pie Pacifique NTINANIRWA

II.6. 1. Opérateurs arithmétiques ..................................................................................... 75

II.13. MySQL et PHP ......................................................................................................... 89

MSc. Pie Pacifique NTINANIRWA

A.1. Objectifs spécifiques

Pour apprendre ce cours, il faut avoir étudié les cours suivants :

MSc. Pie Pacifique NTINANIRWA

Le HTML et le CSS sont des langages plutôt simples à maîtriser et à comprendre à

I.1. Pourquoi apprendre les langages HTML et CSS ?

I.2 Définitions et rôles du HTML et du CSS

Sachez-le : beaucoup de débutants, et même des personnes expérimentées, confondons

I.3. Versions actuelles des langages HTML et CSS

En pratique, toutefois, on peut considérer ces versions comme totalement stables et

En effet, la version 5 d’HTML, tout comme la version 3 de CSS introduisent de

Parmi celles-ci, l’insertion simplifiée de vidéos et de contenus audio et de nouvelles

I.4. Un mot sur le XHTML

Cependant, le HTML a continué à se développer en parallèle au XHTML et le XHTML

I.5. L’éditeur de texte

Il existe des centaines et des centaines d’éditeurs de texte et beaucoup se valent.

I.6. Les fondations du html

I.6.1. Éléments, balises et attributs

Les balises reprennent le nom de l’élément et sont entourées de chevrons. La balise

L’écriture en HTML est alors la suivante : <br/>.

MSc. Pie Pacifique NTINANIRWA

Dans l’exemple ci-dessus, on discerne l’élément a composé :

L’attribut href (initiales de « Hypertexte Reference ») sert à indiquer la cible de notre

I.6.2. Structure de base d’une page en HTML5

MSc. Pie Pacifique NTINANIRWA

Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu

L’élément html va contenir toute la page.

L’élément body contiendra tout le contenu de notre page (paragraphes, images,

Pour les langues latines, nous choisirons généralement la valeur « utf-8 ».

Il n’y a pas de règle absolue concernant l’indentation, certains accentuant plus ou

MSc. Pie Pacifique NTINANIRWA

Voici comment on écrit un commentaire en HTML :

I.6.3. Les éléments Heading, Paragraph et Break

MSc. Pie Pacifique NTINANIRWA

Voilà ce que ça donne en image :

MSc. Pie Pacifique NTINANIRWA

I.6.4. Les éléments Strong, Emphasis et Mark

I.6.5. Listes ordonnées et non-ordonnées

Voyons immédiatement comment cela fonctionne en pratique :

MSc. Pie Pacifique NTINANIRWA

I.6.6. Listes de définitions

Voici un exemple de liste de définitions :

MSc. Pie Pacifique NTINANIRWA

I.6.7. Listes imbriquées

I.7. Liens internes et liens externes

MSc. Pie Pacifique NTINANIRWA

MSc. Pie Pacifique NTINANIRWA

MSc. Pie Pacifique NTINANIRWA

I.7.1. Les autres types courants de liens

Voici l’illustration en image :

MSc. Pie Pacifique NTINANIRWA

Ensuite, il ne reste plus qu’à créer un lien comme on en a l’habitude en utilisant un

MSc. Pie Pacifique NTINANIRWA

I.8. Les fondations du CSS

I.8.1. Sélecteurs, propriétés et valeurs

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