Programmation Web 2ème année Maths

Infos

Partie introductive

La programmation web est la programmation informatique qui permet d’éditer des sites web. Elle
permet la création d’applications, destinées à être déployées sur Internet ou en Intranet. Ces
applications web sont constituées de pages web pouvant prendre différentes formes, telles que :

 Pages statiques : Il s'agit de fichiers, le contenu n'est pas influencé par l'internaute qui la
demande, et il évolue seulement avec une intervention manuelle de son code source.
 pages « dynamiques » : son contenu - ou « réponse » - est dynamiquement généré côté
serveur au moment de la demande. Il évolue sans que le code du site web soit modifié
manuellement. Le contenu est généré selon l'interaction des utilisateurs (paramètres d'URL,
saisi de formulaires..) et selon les données chargées par calcul au moment de l'appel.

Chap 1 : Architecture Client-Serveur

Le protocole ou environnement client–serveur désigne un mode de transmission d'information

(souvent à travers un réseau) entre plusieurs programmes ou processus : l'un, qualifié de client,
envoie des requêtes ; l'autre, qualifié de serveur, attend les requêtes des clients et y répond. Le
serveur offre ici un service au client. Par extension, le client désigne souvent l'ordinateur sur lequel
est exécuté le logiciel client, et le serveur, l'ordinateur sur lequel est exécuté le logiciel serveur. Les
machines serveurs sont généralement dotées de capacités supérieures à celles des ordinateurs
personnels en ce qui concerne la puissance de calcul, les entrées-sorties et les connexions réseau,
afin de pouvoir répondre de manière efficace à un grand nombre de clients. Les clients sont souvent
des ordinateurs personnels ou terminaux individuels (téléphone, tablette), mais pas
systématiquement.

Il existe une grande variété de serveurs et de clients en fonction des besoins ou services à fournir :
un serveur Web publie des pages Web demandées par des navigateurs Web ; un serveur de
messagerie électronique transmet les courriels à des clients de messagerie ; un serveur de
fichiers permet de partager des fichiers sur un réseau aux machines qui le sollicitent ; un serveur de
base de données permet aux clients de récupérer des données stockées dans une base de données,
etc.
Pour un internaute qui fait appel à une URL, la page web correspondante, qu'elle soit statique ou
dynamique, consiste en du code « côté client » (HTML, CSS, Javascript, ...) qui est interprété par son
navigateur (Google Chrome, Firefox, ...) produisant une interface utilisateur. Ce code, qui est renvoyé
par un serveur web, peut ou non avoir été généré par du calcul « côté serveur », via des langages de
programmation particuliers, pouvant faire appel à des bases de données, des API...
Il existe différentes technologies et différents langages permettant de construire des sites web par
l'intermédiaire de serveurs web, que l'on peut classer selon deux principes : des langages
de programmation côté client, ou côté serveur. Cette distinction est faite pour séparer les langages
« côté serveur » dont le code est exécuté sur le serveur web avant d'arriver sur le navigateur de
l'utilisateur, des langages « côté client » dont l'exécution ne nécessite pas de calcul sur le serveur
web mais, seulement après le téléchargement de la page, une interprétation par le navigateur de
l'utilisateur.

I. Principe de programmation web : côté client

Lorsqu'un visiteur demande une page en tapant une adresse ou URL, le serveur web lui renvoie le
contenu de la page demandée, le plus souvent en HTML.
C'est ensuite le navigateur web qui interprète le contenu retourné. La programmation "côté client"
(ou développement web frontal) consiste à produire du code (HTML, CSS, Javascript, ...) qui sera
interprété par un navigateur web (ou une fenêtre, pour les logiciels de bureau ou applications
mobiles) et produira un rendu visuel : une interface utilisateur (UI), et dont certains éléments
permettront une navigation, des liens, avec les autres pages (UX).

I.1. Les langages de balisage

I.1.1. Langage HTML

Toute page web comprend une base de langage HTML. Il s'agit d'un langage de balisage qui définit
essentiellement la structure de la page web (titres, tableaux, paragraphes, listes, etc.).
Une page web créée en HTML est totalement statique et n'offre qu'une faible possibilité
d'interaction avec le visiteur. Chaque page doit être créée au préalable et doit être manuellement
mise à jour. Le langage HTML est multiplateformes. Tous les navigateurs web reconnaissent le
langage HTML de base, seuls certaines balises ou attributs sont propres à certains navigateurs.

I.1.2. Le langage de mise en forme CSS

Le CSS (cascading style sheets) est un langage de programmation permettant la mise en forme d'une
page web. L'HTML et le CSS sont complémentaires.
I.1.3. Le langage Script

La programmation côté client utilise des langages de scripts. À la différence des langages de
programmation côté serveur, ces langages ne sont pas compilés. Ils sont interprétés par le navigateur
web du visiteur. Les langages de script sont utilisés au départ dans le cas de validation de formulaires
(champs obligatoires, petits calculs, ...) et dans la création d'animations sur le navigateur de
l'utilisateur (menus déroulants, rafraîchissement du contenu sans rechargement de la page, …). Ils
permettent toutefois aujourd'hui de faire beaucoup plus, tel que la création de jeux vidéo (API
Canvas), la création d’environnements sonores (API Web Audio), la communication en temps réel
(API RTC), etc.

Le langage de script le plus utilisé est : javaScript car il est compatible sur tous les navigateurs.

II. Principe de programmation web : côté serveur

Lorsqu'un visiteur demande (ou requête) le chargement d'une URL sur son navigateur, un appel (le
plus souvent via HTTP ou HTTPS) est effectué sur le serveur web qui héberge le site correspondant.
Le serveur web va ensuite identifier le ou les scripts (écrits dans un langage « côté serveur »)
correspondant à cette URL, et demander leur exécution. L'exécution va alors résulter en un contenu
HTML, qui va ensuite être expédié en réponse au visiteur, lisible par son navigateur. La
programmation "côté serveur" consiste donc à produire du code dont l'exécution, du calcul et de
la récupération de données externes (bases de données, API, ...), va résulter en un contenu qui sera
envoyé au client. Ce contenu peut être du code "côté client".

II.1. Différents langages de programmation et technologies

En plus de javaScript, il existe des langages de programmation permettant l’écriture de script au

niveau serveur

II.2.1. PHP

PHP (PHP: Hypertext Preprocessor) est un langage de script interprété côté serveur. Le code PHP est
lu par le serveur et interprété pour produire une page HTML (ou d'autres types de fichier comme des
images ou des documents PDF) à chaque fois que la page sera demandée. Ce langage a été créé
initialement dans le cadre des logiciels Open Source. De nombreux développeurs ont ensuite profité
de l'Open Source pour développer de nombreux modules prêts à l'usage et paramétrables à volonté.
Les modules serveurs de PHP sont implémentés sur les serveurs Apache et Unix mais PHP peut être
implémenté sur d'autres plates-formes

II.2.2. Python

Python est aussi un langage de programmation permettant l’écriture de script du coté serveur
Django : Framework open-source largement répandu pour construire et déployer une application
côté serveur en Python.

Chap 2 : Les deux langages client pour créer des

sites web

Pour créer un site web, on doit donner des instructions à l'ordinateur. Pour expliquer à l'ordinateur
ce qu’on souhaite qu’il fasse pour nous, il va falloir utiliser un langage qu'il comprend. Et c'est là que
les choses se corsent, parce qu'il va falloir apprendre deux langages : HTML, CSS !
 HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du
Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce
qui doit être affiché sur la page : du texte, des liens, des images…Vous direz par exemple : «
Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à
afficher, etc. »
 CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer
l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du
texte…). Ce langage est venu compléter le HTML en 1996.

I. Mon 1er site web

I.1. Les balises et leurs attributs

I.1.2. Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-cisont invisibles à l'écran pour
vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se
repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme
ceci : À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles
veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un
paragraphe de texte », etc. On distingue deux types de balises : les balises en paires et les balises
orphelines.

I.1.2.1. Les balises en paires

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

I.1.2.2. Les balises orphélines

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

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus
souvent une valeur, c’est en fait ce que j’ai fait dans l’exemple précédent où j’ai indiqué le chemin
où se trouve l’image, j’ai aussi indiqué un message à mettre dans le cas où l’image ne s’affichait pas.

I.2. Structure de base d’une page HTML

I.2.1. Le doctype

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il
s'agit bien d'une page web HTML. Ce n'est pas vraiment une balise comme les autres (elle commence
par un point d'exclamation).

I.2.2. La balise <html> </html>

C'est la balise principale du code. Elle englobe tout le contenu de la page web. Comme vous
pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !
I.2.3. L’entête <head> et le corps <body>

Une page web est constituée de deux parties :

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

I.3. Organiser son texte

I.3.1. Les paragraphes

La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de
paragraphes. Le langage HTML propose justement la balise <p> </p>
pour délimiter les paragraphes.

I.3.2. Les titres

Lorsque le contenu de la page va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour
les visiteurs de se repérer. C'est là que les titres deviennent utiles. En HTML, on a le droit d'utiliser six
niveaux de titres différents. Je veux dire par là qu'on peut dire « Ceci est un titre très important », «
Ceci est un titre un peu moins important », « Ceci est un titre encore moins important », etc. On a
donc six balises de titres différentes :

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

I.3.3. Les listes

Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes :

 les listes non ordonnées ou listes à puces ;

 les listes ordonnées ou listes numérotées ou encore énumérations.
I.3.3.1. Les listes non ordonnées

Une liste non ordonnée ressemble à ceci :

 fraise
 framboise
 cerise

C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas de «
premier » ni de « dernier »). Créer une liste non ordonnée est très simple.
<ul> </ul>
Puis on va écrire chacun des éléments de la liste entre deux balises <li> </li>

I.3.3.2. Liste ordonnée

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer <ul>
</ul> par <ol> </ol>.

I.3.4. Les liens

I.3.4.1. Un lien vers un autre site

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut, en
bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> </a>, Il faut
cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.

Par exemple, le code ci-dessous est un lien qui amène vers le Site de facebok, situé à l'adresse :
[Link]

Les liens que nous venons de voir sont appelés liens absolus car on indique l'adresse complète. Nous
allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être
utile pour faire des liens entre les pages de notre site.

I.3.4.2. Un lien vers un ancre

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

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce
peut être n'importe quelle balise, un titre par exemple. Utilisez l'attribut id pour donner un nom à
l'ancre. Cela servira ensuite pour faire un lien vers cette ancre. Par exemple :

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

I.3.4.3. Lien vers un ancre situé dans une autre page

L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement à une ancre située
plus bas sur cette page. En pratique c'est assez simple à faire : il suffit de taper le nom de la page,
suivi d'un dièse (#), suivi du nom de l'ancre.
I.3.4.4. Cas pratiques d’utilisation des liens

I.[Link]. Un lien qui affiche une info bulle au survol

Vous pouvez utiliser l'attribut « title » qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet
attribut est facultatif. Vous aurez un résultat ressemblant à la figure suivante.

La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien. Voici
comment reproduire ce résultat :

I.[Link]. Un lien pour envoyer un email

Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de
type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de
l'attribut href comme ceci :

Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous
contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre
adresse e-mail.
C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure
de téléchargement lorsqu'on cliquera sur le lien.

I.[Link]. Un lien pour télécharger des fichiers

Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un fichier…
En fait, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en
indiquant cette fois le nomdu fichier à télécharger. Par exemple, supposez que vous vouliez faire
télécharger « [Link] ». Placez simplement ce fichier dans le même dossier que votre page
web (ou dans un sous-dossier) et faites un lien vers ce fichier :

C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure
de téléchargement lorsqu'on cliquera sur le lien.

I.3.5. Les images

I.3.5.1. Insertion d’images

La balise qui permet d’insérer une image est : <img>. C'est une balise de type orpheline (comme
<br>).

I.3.5.2. Ajout d’une infobulle

L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de title. Cet
attribut est facultatif (contrairement à alt). Voici ce que cela peut donner :
I.3.5.3. Miniature cliquable

Lorsqu’une image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez
ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale.

Je les place toutes les deux dans un dossier appelé par exemple images. J'affiche la version
montagne_mini.jpg sur ma page et je fais un lien vers [Link] pour que l'image agrandie
s'affiche lorsqu'on clique sur la miniature.

II. La mise en forme en CSS

Maintenant que l’on connait les bases du HTML, nous allons donner du style à notre page grâce au
CSS !

C’est le CSS qui permet de choisir la couleur de notre texte. Lui qui permet de sélectionner la police
utilisée sur notre site. Lui encore qui permet de définir la taille du texte, les bordures, le fond… Et
aussi, c'est lui qui permet de faire la mise en page de notre site. On pourrait dire : je veux que mon
menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit
toujours visible, etc.

II.1. Où écrit-on du code css ?

On a le choix car on peut écrire du code en langage CSS à trois endroits différents :

 dans un fichier .css (méthode la plus recommandée) ;

 dans l'en-tête du fichier HTML ;
 directement dans les balises du fichier HTML via un attribut style (méthode la moins
recommandée).

Nous verrons ces trois méthodes mais sachez d'ores et déjà que la première…est la meilleure.

II.1.1. Dans un fichier .css (recommandé)

Comme nous venons de le dire, on écrit le plus souvent le code CSS dans un fichier spécial ayant
l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus
pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. Nous utiliserons
cette technique dans toute la suite de ce cours. Commençons à pratiquer dès maintenant ! Nous
allons partir du fichier HTML suivant :

Remarquons le contenu de la ligne soulignée, c'est elle qui indique que ce fichier HTML est associé à
un fichier appelé [Link] et chargé de la mise en forme. Pour le moment, rien d'extraordinaire à part
la nouvelle balise que nous avons ajoutée. Maintenant, créons un nouveau fichier vide dans votre
éditeur de texte (Notepad++) et copions ce bout de code :

Résultat :
II.1.2. Dans l’entête <head> </head> du fichier html

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le
code CSS directement dans une balise . Voici comment on peut obtenir exactement le même résultat
avec un seul fichier .html qui contient le code CSS :

II.1.3. Directement dans les balises (non recommandées)

Dernière méthode, à manipuler avec précaution : on pourrait ajouter un attribut style à n'importe
quelle balise. Vous insérerez votre code CSS directement dans cet attribut :

Cette fois, seul le texte du paragraphe qui contient le code CSS, sera coloré en bleu.
Voici montré trois méthodes pour appliquer du style css à une page web html. Je recommande
d’appliquer la première méthode.

II.2. Appliquer un style : sélection des balises

Maintenant que nous savons où placer le code CSS, intéressons-nous de plus près à ce code. Je vous
ai donné, sans vous l'expliquer, un premier bout de code CSS :

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

 Des noms de balise : on écrit les noms des balises dont on veut modifier l'apparence. Par
exemple, si je veux modifier l'apparence de tous les paragraphes, je dois écrire p.
 Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a
par exemple la propriété « color » qui permet d'indiquer la couleur du texte, « font-size » qui
permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et, comme nous
l'ai dit, je ne vous obligerai pas à les connaître toutes par cœur.
 Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la
propriété « color », il faut indiquer le nom de la couleur. Pour « font-size », il faut indiquer
quelle taille on veut, etc

Schématiquement, une feuille de style CSS ressemble donc à cela :

Essayons de changer le nom de la balise affectée par le code CSS. Par exemple, si j'écris h1, c'est le
titre qui sera écrit en bleu. Modifiez votre fichier [Link] comme ceci :

Appliquer un style sur 2 balises :

II.2.1. Appliquer un style : class et id

Ce que nous avons vu jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les
paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu ou en rouge).
Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On
pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je
vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut
mieux utiliser un fichier CSS externe). Pour résoudre le problème, on peut utiliser ces attributs
spéciaux qui fonctionnent sur toutes les balises :

 attribut « class » ;
 l'attribut « id ».

Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise,
aussi bien titre que paragraphe, image, etc.

Par exemple, je vais associer la classe introduction à mon premier paragraphe.

Maintenant que c'est fait, que le paragraphe est identifié. On lui a donné une classe: introduction.
Nous allons pouvoir réutiliser ce paragraphe de classe « introduction » dans le fichier CSS pour dire :
« Je veux que seules les balises de classe « introduction » soient affichées en bleu ». Pour faire cela
en CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous :
L'attribut id

Lui, il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé
qu'une fois dans le code. Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si
vous faites du JavaScript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu
l'attribut id dans le chapitre sur les liens (pour réaliser des ancres). En pratique, nous ne mettrons des
id que sur des éléments qui sont uniques dans la page, comme par exemple le logo :

Si on utilise des « id », lorsque nous définirons leurs propriétés dans le fichier CSS, il faudra faire
précéder le nom de l'id par un dièse (#) :

Les balises universelles

Il arrivera parfois que nous ayons besoin d'appliquer une class (ou un id) à certains mots qui, à
l'origine, ne sont pas entourés par des balises. En effet, le problème de class, c'est qu'il s'agit d'un
attribut. Nous ne pouvons donc en mettre que sur une balise. Si, par exemple, nous voulons modifier
uniquement « bienvenue » dans le paragraphe suivant :

Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais, malheureusement il n'y
en a pas. Par chance, on a inventé…la balise-qui-ne-sert-à-rien. En fait, on a inventé deux balises dites
universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est
important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises :

 <span> </span>: c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein
d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong>
et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est
celle dont nous allons nous servir pour colorer « bienvenue ».
 <div> </div>: c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>,
<h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un
nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div>
est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons
plus tard.

Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de « bienvenue »,
on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !

II.2.2. Appliquer un style : les sélecteurs avancés

En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit «
sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Nous en
avons déjà utilisé quelques-uns un peu plus tôt dans ce chapitre, résumons-les pour commencer.

Les sélecteurs que nous connaissons déjà

Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Il faut
les connaître par cœur. Commençons par la base de la base :
…signifie « Je veux toucher tous les paragraphes ».Après, c'est à vous de dire ce que vous faites à ces
paragraphes (vous les écrivez en bleu, par exemple). Et enfin, nous avons vu comment sélectionner
des balises précises à qui nous avons donné un nom grâce aux attributs « class » et « id » :

Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous n'allons pas toutes les voir car
il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus
efficaces en CSS !

Les sélecteurs avancés

* : sélecteur universel

Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

A B : une balise contenue dans une autre

Sélectionne toutes les balises <em> située à l’interrrieur d’une balise <h3>. Notez qu’il n’y a pas de
virgule entre les noms de balises.

Exemple de code HTML correspondant :

A+B : une balise qui en suit une autre

Sélectionne la première balise <p> située après un titre <h3>.

Exemple :

A[attribut] : une balise qui possède un attribut

Sélectionne tous les liens <a> qui possèdent un titre « title ».

Exemple :

A[attribut *= ‘’valeur’’] : une balise, un attribut et une valeur

L’attribut doit cette fois contenir dans sa valuer le mot « ici » (peu importe sa position)

Exemple :

D’autres sélecteurs existent !

Nous avons ici qu’une partie des sélecteurs CSS mais sachez qu’il en existe beaucoup d’autres. Nous
les verrons peut-être dans a suite du cours !

III. Formatage du texte

Le formatage de texte désigne la mise en forme du texte contenu sur notre page web. Ce chapitre va
être l'occasion de découvrir de nombreuses propriétés CSS : nous allons voir comment modifier la
taille du texte, changer la police, aligner le texte…

III.1. La taille

Pour modifier la taille du texte, on utilise la propriété CSS « font-size ». Mais comment indiquer la
taille du texte ? C'est là que les choses se corsent car plusieurs techniques sont proposées :

 On peut indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode
est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on
risque d'indiquer une taille trop petite pour certains lecteurs.
 Indiquer une taille relative : en pourcentage, « em» ou « ex», cette technique a l'avantage
d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.

III.1.1. Une taille absolue

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels
de hauteur, vous devez donc écrire :

Les lettres auront une taille de 16 pixels, comme le montre la figure suivante.
Voici un exemple d'utilisation (placez ce code dans votre fichier .css) :

III.1.2. Une valeur relative

C’est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous
les visiteurs. Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la
taille avec des mots en anglais comme ceux-ci :

 xx-small : minuscule
 x-small : très petit
 medium : moyen
 large : grand
 x-large : très grand
 xx-large : gigantesque

On peut tester l’utilisation de ces valeurs dans le code css

Cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y a que sept noms).
Heureusement, il existe d'autres moyens. Ma technique préférée consiste à indiquer la taille en «
em».

 Si vous écrivez 1em, le texte a une taille normale

 Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em
 Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em

D'autres unités sont disponibles. Vous pouvez essayer le « ex» (qui fonctionne sur le même principe
que le « em » mais qui est plus petit de base) et le pourcentage (80%, 130%…).

III.2. La police

III.2.1. Modification de la police utilisée

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

Seulement, pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en
général plusieurs noms de police, séparés par des virgules :
Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il
passera à la police3, et ainsi de suite. En général, on indique en tout dernier « serif », ce qui
correspond à une police par défaut (qui ne s'applique que si aucune autre police n'a été trouvée).

Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :

 Arial ;
 Arial Black ;
 Comic Sans MS ;
 Courier New ;
 Georgia ;
 Impact ;
 Times New Roman ;
 Trebuchet MS ;
 Verdanan.

La figure suivante montre à quoi ressemblent ces polices.

Ainsi, si j’écris :

…cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon
Verdana, ou si rien n'a marché, mets une police standard (sans-serif) ». En général, il est bien
d'indiquer un choix de trois ou quatre polices (+ serif ou sans-serif) afin de s'assurer qu'au moins
l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.

III.2.2. Utilisation d’une police personnalisée avec @font-face

Pendant longtemps, cela n'était pas possible .Aujourd'hui, avec CSS 3, il existe heureusement un
moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des
navigateurs.

Néanmoins, cela a quelques défauts :

 Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la

police, dont le poids peut atteindre, voire dépasser 1 Mo…
 La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser
sur son site. Heureusement, il existe des sites comme « [Link] » et « [Link] »
qui proposent en téléchargement un certain nombre de polices libres de droits. Je
recommande en particulier « [Link] » car il permet de télécharger des packs prêts
à l'emploi pour CSS 3.
 Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les
navigateurs.

Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître :

En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci :
Le fichier de police (ici [Link]) doit ici être situé dans le même dossier que le fichier CSS
(ou dans un sous-dossier, si vous utilisez un chemin relatif).

L'idéal est de proposer plusieurs formats pour la police : le navigateur téléchargera celui qu'il sait lire.
Voici comment indiquer plusieurs formats :

Pour tester le fonctionnement, je vous propose de télécharger une police sur « Font Squirrel », par
exemple « Learning Curve Pro ». Cliquez sur « @font-face Kit », cela vous permettra de télécharger
un kit prêt à l'emploi avec tous les formats pour cette police. Votre fichier CSS ressemblera au final à
ceci :

La première (grosse) section @font-face permet de définir un nouveau nom de police qui pourra être
utilisé dans le fichier CSS. Ensuite, nous utilisons ce nom de police avec la propriété font-family, que
nous connaissons, pour modifier l'apparence des titres. Vous pouvez voir le résultat à la figure
suivante.
III.2.3. Mettre en italique

Pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :
 Italic : le texte sera mis en italic
 Oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement
différent de l'italique proprement dit).
 Normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique.
Par exemple, si vous voulez que les textes entre « em » ne soient plus en italique, vous devrez
écrire :

Ainsi, dans l'exemple suivant, je me sers de font-style pour mettre en italique tous mes titres

III.2.4. Mettre en gras

La propriété CSS pour mettre en gras est « font-weight » et prend les valeurs suivantes :
 Bold : le texte sera en gras ;
 Normal : le texte sera écrit normalement (par défaut).

Voici par exemple comment écrire les titres en gras :

III.2.5. Soulignement et autres décorations

La propriété CSS associée porte bien son nom: text-decoration. Elle permet, entre autres, de
souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :
 underline : souligné
 line-through : barré
 overline : ligne au-dessus
 blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google
chrome, notamment)
 none : normal (par défaut).

Ce CSS va vous permettre de tester les effets de text-decoration :

Et le résultat est visible à la figure suivante

III.2.6. L’alignement

Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et
justifié. On utilise la propriété text-align et on indique l'alignement désiré :
 left : le texte sera aligné à gauche (c'est le réglage par défaut).
 center : le texte sera centré.
 right : le texte sera aligné à droite
  justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute
la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par
exemple, sont toujours justifiés.

Remarques : On ne peut pas modifier l'alignement du texte d'une balise inline (comme <span>, <a>,
<em>, <strong>, …). L'alignement ne fonctionne que sur des balises de type block (<div>, <h1>,
<p>,<h1>, <h2>, …) et c'est un peu logique, quand on y pense : on ne peut pas modifier l'alignement
de quelques mots au milieu d'un paragraphe ! C'est donc en général le paragraphe entier qu'il vous
faudra aligner.
III.2.7. Les flottants

Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un « habillage
».

La propriété qui fait flotter est…float (« flottant » en anglais). Cette propriété peut prendre deux
valeurs très simples :

 left : l'élément flottera à gauche.

 right : l'élément flottera…à droite ! Oui, bravo.

L'utilisation des flottants est très simple :

1. On peut appliquer un float à une balise.

2. Puis on continue à écrire du texte à la suite normalement.

III.2.8. Faire flotter une image

Nous allons apprendre ici à faire flotter une image. Voici le code HTML que nous devons taper dans
un premier temps :

Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire flotter l'image à gauche :
 IV. La couleur et le fond

Continuons notre tour d'horizon des propriétés CSS existantes. Nous allons nous intéresser ici aux
propriétés liées de près ou de loin à la couleur. Nous verrons entre autres :

 comment changer la couleur du texte ;

 comment mettre une couleur ou une image d'arrière-plan ;
 comment ajouter des ombres ;
 comment jouer avec les niveaux de transparence.

IV.1. Couleur du texte

Vous connaissez déjà la propriété qui permet de modifier la couleur du texte : il s'agit de color. Nous
allons nous intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs.

IV.1.1. Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (in
english, of course ). Le seul défaut de cette méthode est qu'il n'existe que seize couleurs dites «
standard ». La figure suivante montre les seize couleurs que vous pouvez utiliser en tapant
simplement leur nom.
IV.1.2. La notation hexadécimale

Seize couleurs, c'est quand même un peu limite quand on sait que la plupart des écrans peuvent en
afficher seize millions. D'un autre côté, remarquez, s'il avait fallu donner un nom à chacune des seize
millions de couleurs… Heureusement, il existe en CSS plusieurs façons de choisir une couleur parmi
toutes celles qui existent. La première que je vais vous montrer est la notation hexadécimale. Elle est
couramment utilisée sur le Web mais il existe aussi une autre méthode que nous verrons plus loin.
Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour faire simple, c'est une
combinaison de lettres et de chiffres qui indiquent une couleur. On doit toujours commencer par
écrire un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F. Ces lettres ou chiffres
fonctionnent deux par deux. Les deux premiers indiquent une quantité de rouge, les deux suivants
une quantité de vert et les deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont
les composantes Rouge-Vert Bleu de la couleur) on peut obtenir la couleur qu'on veut. Ainsi,
#000000 correspond à la couleur noire et #FFFFFF à la couleur blanche.

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

IV.1.3. La méthode RGB

Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce quis'abrège en « RGB ».

Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de
rouge, de vert et de bleu.

IV.2. Couleur de fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la
même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur,
l'écrire en notation hexadécimale ou encore utiliser la méthode RGB. Pour indiquer la couleur de
fond de la page web, il faut travailler sur la balise <body>.
<body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on
changera la couleur d'arrière-plan de la page. Regardez très attentivement ce fichier CSS :
On a tendance à croire qu'on ne peut modifier que la couleur de fond de la page. C'est faux: vous
pouvez changer le fond de n'importe quel élément : vos titres, vos paragraphes, certains mots…Dans
ce cas, ils apparaîtront surlignés (comme si on avait mis un coup de marqueur dessus). Vous vous
souvenez par exemple de la balise qui permet de mettre en valeur certains mots ? Utilisons-la à
nouveau ici :
On obtient un truc comme ceci :

IV.3. Image de fond

Dans les exemples qui suivent, je vais modifier l'image de fond de la page. Cependant, tout comme
pour la couleur de fond, n'oubliez pas que l'image de fond ne s'applique pas forcément à la page
entière. On peut aussi mettre une image de fond derrière les titres, paragraphes, etc.

IV.3.1. Appliquer une image de fond

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

IV.3.1.1. Option disponible pour l’image de fond

On peut compléter la propriété background-image que nous venons de voir par plusieurs autres
propriétés qui permettent de changer le comportement de l'image de fond.
La propriété CSS background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant
car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :

 fixed : l'image de fond reste fixe ;

 scroll : l'image de fond défile avec le texte (par défaut)

Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriété
background-repeat :

 no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
 repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
 repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
 repeat : le fond sera répété en mosaïque (par défaut)

Exemple d'utilisation :

IV.4. La transparence

Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments ! Pour
cela, nous allons utiliser des fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.

[Link] propriété opacity

La propriété opacity, très simple, permet d'indiquer le niveau d'opacité (c'est l'inverse de la
transparence).

 Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
 Avec une valeur de 0, l'élément sera totalement transparent.
Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera
opaque à 60%…et on verra donc à travers ! Voici comment on peut l'utiliser :

Voici un exemple qui va nous permettre d'apprécier la transparence.

La notation RGBa

CSS3 nous propose une autre façon de jouer avec la transparence : la notation RGBa. Il s'agit en fait
de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre : le
niveau de transparence (appelé « canal alpha »). De la même façon que précédemment, avec une
valeur de 1, le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent.

V. Les bordures et les ombres

Nouveau chapitre, nouveau lot de propriétés CSS. Ici, nous allons nous intéresser aux bordures et aux
effets d'ombrage que l'on peut appliquer, aussi bien sur le texte que sur les blocs qui constituent
notre page. Nous réutiliserons en particulier nos connaissances sur les couleurs pour choisir la
couleur de nos bordures et de nos ombres.

V.1. Bordures standards

Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS
vous permettent de modifier l'apparence de vos bordures : border-width, border-color, border-
style…

Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui
regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background ? Cela
fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.

Pour border on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :

 La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).
 La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nomde
couleur (black, red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198,
212, 37)).
