Notes de cours de Programmation web Page | 1

INTRODUCTION

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.
Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS
:
• 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.
• CSS 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.
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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 2

versions sont toujours en développement et qu’elles sont

toujours en théorie sujettes à changements et à bugs.
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
(on va y revenir, pas d’inquiétude !) pour mieux structurer nos
pages en HTML ou encore la possibilité de créer des bordures
arrondies en CSS.
Pour coder en HTML et en CSS, nous n’avons besoin que
d’un éditeur de texte.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 3

CHAPITRE I : LES BASES EN HTML

I.1. LE FONDEMENT DE L’HTML

Il y a trois termes dont vous devez absolument comprendre
le sens en HTML. Ce sont les termes élément, balise et attribut.
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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 4

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.
Je vous conseille cependant, pour des raisons de propreté de
code et de compréhension, de mettre le slash dans un premier
temps. 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).

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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 5

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 :

Si vous vous sentez un peu perdu pour le moment, ne vous

inquiétez pas, c’est tout-à-fait normal ! Continuez le cours, vous
allez voir : avec un peu de pratique, tout cela va très vite se
décanter et vous aurez tout compris avant même de vous en
rendre compte !
I.1.1 Structure de base d’une page en HTML 5
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,

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 6

comme son nom l’indique, sert à indiquer le type du document.

Dans notre cas, le type de document est HTML. On écrira donc
:

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.).
Voilà où nous en sommes rendus pour le moment :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 7

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 ».
Voici à quoi vous devriez arriver en pratique :

Et voilà, vous venez, sans vous en rendre compte, de créer votre

première page valide en HTML5 ! Retenez bien ce schéma, il
sera toujours le même quel que soit la page HTML5 que vous
créerez.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 8

I.1.2 Afficher un document en HTML5 dans le navigateur

La première chose à faire, une fois un nouveau fichier
ouvert dans votre éditeur de texte, est d’en changer le type pour
mettre votre document en « html ». Pour cela, deux solutions :
soit vous trouvez l’onglet où vous pourrez définir le type de
votre document, soit vous enregistrez-sous votre document en
lui donnant un nom du type : document.html. Cela aura pour
effet de changer le type de document en un document HTML.
Ensuite, pour visualiser votre fichier dans un navigateur,
vous avez à nouveau deux choix. Soit votre éditeur possède une
option vous proposant de pré-visualiser votre document dans le
navigateur de votre choix (c’est le cas de Komodo), soit vous
devrez enregistrer votre document (sur votre bureau, par
exemple), puis double cliquer dessus, tout simplement, afin que
la page s’ouvre dans votre navigateur par défaut.
Pensez bien à enregistrer dans votre éditeur votre
document à chaque fois que vous souhaitez l’ouvrir dans votre
navigateur et à rafraîchir la page dans votre navigateur si votre
document était déjà ouvert (ctrl+r ou cmd+r) sans quoi vous ne
verrez aucun changement.
Cela semble évident mais si vous saviez le nombre
d’heures que nous avons tous perdu en cherchant pourquoi telle
ou telle chose ne fonctionnait pas… Alors que nous avions
simplement oublié d’enregistrer les changements effectués au
préalable ou de rafraîchir notre document !

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 9

I.1.3 Bonnes pratiques, règles et commentaires

Le HTML permet d’imbriquer des éléments les uns à
l’intérieur des autres. C’est même l’une des possibilités qui font
toute sa force.
Dans l’exemple précédent, par exemple, notre élément title était
à l’intérieur de notre élément head, lui-même contenu dans un
élément html.

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 dernier élément
ouvert est toujours le premier refermé.
Autre bonne pratique : 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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 10

code et de voir immédiatement quel élément est imbriqué dans

quel autre.
Troisième et dernière bonne pratique : 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 :

Pourquoi commenter son code :

1. Tout d’abord, pour vous. En effet, lorsque vous
commencerez a véritablement savoir coder, vos pages
vont s’allonger et se complexifier. Commenter va alors
devenir indispensable pour vous repérer dans votre page
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 11

web et pour vous rappeler pourquoi vous avez fait telle

chose de telle façon.
2. Ensuite, pour les personnes à qui vous pourriez distribuer
votre code. Rappelez-vous qu’il existe autant de manières
de coder que d’esprits humains ou presque et qu’il est
donc essentiel de donner des indications sur votre code
afin que les personnes puissent le comprendre plus
rapidement et plus facilement.
En bref : commenter n’est pas un luxe mais souvent ce qui
sépare un développeur moyen d’un bon développeur, tout
simplement.
Attention à ne jamais mettre d’informations sensibles en
commentaire, comme des mots de passe par exemple. En effet,
rappelez-vous que tout le monde peut avoir accès au code
source de votre page, et donc à votre code HTML.
Pour vous en convaincre, n’hésitez pas à aller sur
n’importe quel site (Wikipédia par exemple), puis à faire un clic
droit sur la page et choisir l’option « inspecter l’élément » ou «
afficher le code source » selon votre navigateur.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 12

Vous aurez alors accès au code HTML de la page, quelque soit

le site.
I.1.4 LES ELEMENTS 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 ligne 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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 13

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 pour 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.
Voilà ce que ça donne en image :

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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 14

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.
Le résultat d’une interprétation et n’est qu’une mise en
forme automatique. Le CSS permet 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.
I.1.4 LES ELEMENTS STRONG, EMPHASIS ET MARK
L’élément strong 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.
L’intérêt de ces éléments, il est avant tout dans
l’optimisation du référencement du site. En effet, normalement,
vous devriez avoir ciblé des mots clefs et essayer d’être bien

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 15

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.

I.1.4.1 LISTES ORDONNEES ET NON-ORDONNEES

Les listes servent à ordonner du contenu, à lui donner un
ordre cohérent.
Visuellement, les listes en HTML correspondent à ce que vous
créez lorsque vous utilisez des puces dans un document Libre
Office :
• Élément numéro 1
• Élément numéro 2
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 16

• Élément numéro 3
En HTML, les listes vont avoir deux grands intérêts : 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 un
ordered 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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 17

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 peux donc pas
les classer, les ordonner (sans contexte du moins). C’est
pourquoi on a utilisé une liste non-ordonnée.
Pour créer une liste ordonnée maintenant, nous allons
simplement remplacer l’élément ul par l’élément ol (pour
ordered list).

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 18

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.1.4.2 LISTES DE DEFINITIONS
Dernier grand type de listes 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 définition list), l’élément dt (pour de finition 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.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 19

En revanche, il est tout à fait possible d’associer plusieurs

termes à une définition ou même plusieurs définitions à un
même terme.

I.1.4.2 Listes imbriquées

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 :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 20

Comme vous le voyez, si on n’oublie pas d’élément, les listes

restent très simples à utiliser et à manipuler. J’espère que vous
comprenez mieux désormais l’importance de bien indenter son
code !
I.1.5 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 eux
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
Conçu et réalisé par l’Ingénieur Lepetit MABIDI
[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 21

web tandis qu’un lien externe est un lien menant d’un site web
vers un autre site web.
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 :
1. 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. 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. 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.
Voilà donc en images comment cela fonctionne :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 22

On a créé quatre pages en HTML (avec une structure

minimale pour chacune d’entre elles afin de les rendre valide).
On a placé les pages page1.html et page2.html dans le même
dossier, la page page3.html dans un sous-dossier relativement à
ma page page1.html et la page page4.html dans un dossier
parent par rapport à ma page page1.html.
On va donc maintenant créer des liens de ma page
page1.html vers mes pages page2.html, page3.html et
page4.html grâce à l’élément a et à l’attribut href :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 23

Si vous ouvrez votre page page1.html, celle-ci doit maintenant

ressembler à cela :

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 :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 24

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 : l’attribut target permet 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 :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 25

Attribut à retenir donc, car celui-ci peut s’avérer très utile

dans de nombreux cas (lorsque vous ne voulez pas que vos
visiteurs quittent votre site par exemple). Notez en revanche
que vous ne pouvez pas choisir si le lien va s’ouvrir dans un
nouvel onglet ou dans une nouvelle fenêtre.
I.1.4.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.
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.
Vous comprendrez qu’il va donc tout d’abord nous falloir
rajouter quelques lignes de textes dans notre page HTML pour
pouvoir tester les ancres (sinon, on n’en verra pas l’effet).
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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 26

de l’attribut href. La valeur inscrite pour l’attribut href doit être

strictement la même que celle donnée à notre id.

Faites attention à bien choisir des valeurs différentes pour

chaque id sinon votre lien ne saura pas où ramener !
Pour envoyer un mail, maintenant, on donne tout simplement
une valeur de type « mailto : » à notre attribut href comme ceci
:

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 27

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, ods 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 :

I.1.4.2 Validation et compatibilité entre navigateurs

Un même code interprété par différents navigateurs peut
produire différents résultats. Autrement dit, il est possible que
votre code s’affiche différemment selon le navigateur utilisé par
vos visiteurs.
Cela est de moins en moins vrai aujourd’hui avec les
dernières versions des grands navigateurs qui sont toutes
standardisées. De plus, nous verrons comment contourner ce
problème par la suite avec les reset CSS entre autres.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 28

Deuxième mise en garde ou plutôt bonne pratique,

toujours dans cette idée d’avoir un code propre et qui fonctionne
bien : pensez systématiquement à vérifier sa validité.
Pour cela, le W3C (World Wide Web Consortium –
l’autorité en matière de codification des langages
informatiques) met à notre disposition différents outils, et
notamment des validateurs HTML et CSS.
Pour pouvez trouver ces validateurs ici :
• Pour le validateur HTML : http://validator.w3.org
• Pour le validateur CSS : http://jigsaw.w3.org/css-validator

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 29

CHAPITRE II : LES BASES DU CSS

I.1 Sélecteurs, propriétés et valeurs
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
en 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 :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 30

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 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.2. OU ECRIRE LE CSS ?
Nous avons trois possibilités pour écrire notre CSS. L’une
d’elles est préférable aux deux autres et nous allons
immédiatement voir pourquoi.
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é.

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 31

Pour des raisons de performances du 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.
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 :

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 :

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 32

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

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 33

L’élément link est représenté sous forme de balise

orpheline et doit être accompagné de ses deux attributs « rel »
et « href ».

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]
Notes de cours de Programmation web Page | 34

Conçu et réalisé par l’Ingénieur Lepetit MABIDI

[0813226488 – lepetitmabidi@gmail.com – MicroTech Books]