COURS COMPLET HTML ET

CSS

Objectifs du cours HTML et CSS et prérequis

<="" p="" style="margin: 5px auto; padding: 3px; background-color:
rgba(168, 197, 36, 0.47); box-shadow: 0px 0px 9px; width: 694px; max-width:
694px;">

Bienvenue à tous dans ce cours complet traitant des deux langages

informatiques incontournables : le HTML et CSS.

Le but de ce tutoriel est d’explorer les différentes fonctionnalités du HTML

et du CSS et de vous apprendre à les utiliser pas à pas.

Ce cours s’adresse à tous, des plus parfaits débutants aux personnes

disposant déjà d’un bagage informatique.

Le HTML et le CSS sont des langages de base en informatique ; on commence

donc généralement par leur apprentissage car ils sont assez simples à
comprendre et car ils sont indispensables.

Méthodologie et pédagogie
Dans un but pédagogique, et afin de vous fournir la meilleure expérience
d’apprentissage possible, ce cours a été divisé en de multiples sous-chapitres.

Vous pouvez à tout moment voir le sommaire du cours sur votre gauche. Le
chapitre consulté actuellement s’affichera en gras afin que vous puissiez
facilement vous repérer.
De plus, ce tutoriel HTML et CSS utilise plusieurs supports afin de faciliter
votre apprentissage et de valider vos progrès.

Chaque nouvelle section dispose d’une vidéo ainsi que d’un script illustré par
de nombreux exemples. Avec les exemples, vous disposerez également
généralement d’un lien vous permettant de tester le code vous même et de le
modifier comme ci-dessous :

Essayer ce code !

Finalement, des quizz et des exercices sont disponibles tout au long de ce

cours HTML et CSS afin que vous puissiez tester votre compréhension du
cours et voir votre progression.

En bref : tout a été fait pour faciliter un apprentissage rapide et une

compréhension globale du HTML et du CSS.

POURQUOI APPRENDRE LE
HTML ET LE CSS ?

Le HTML et le CSS, deux standards

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 à la base de tout projet
de développement web car les navigateurs (Google Chrome, Safari, etc.) vont
utiliser le code HTML et le CSS pour vous fournir et afficher des pages web.

Voici par exemple un exemple de code HTML :

Et voici un exemple de code CSS :

En bref : 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) comme Adobe Dreamweaver ou encore avoir recours aux services d’une
agence spécialisée.

Faisons table rase des idées reçues

IDEE RECUE N°1 : Un framework, c’est génial.
C’est tout à fait vrai. En effet, utiliser un bon framework correspond à des
centaines d’heures de travail économisées pour vous et est également la
garantie d’un travail bien fait à priori.

Toutefois, le jour où vous voulez intégrer quelque chose comme disons… un

système de paiement, comment faites-vous ? Et si vous voulez modifier un
peu l’apparence graphique de votre site ? Dans ce cas là, ça devient la
panique totale.

Si installer un framework peut être une bonne solution, ce n’est pas suffisant.
Vous devez également le comprendre et pouvoir le modifier.

IDEE RECUE N°2 : Avez un éditeur WYSIWIG, pas besoin de savoir coder.

Les éditeurs WYSIWIG sont des éditeurs qui codent « à votre place ». En gros,
vous choisissez d’insérer un paragraphe, une image, un carré, etc. et l’éditeur
crée le code correspondant. Un exemple célèbre est Adobe Dreamweaver.
Ces éditeurs sont certes de plus en plus puissants et de mieux en mieux fait.

Cependant, ils font et continueront toujours à faire des erreurs, ne serait-ce

que d’organisation du code et de logique. En effet, il n’est pas possible pour
un programme de penser comme un humain et ainsi votre code ne sera
jamais tout à fait valide. De plus, certaines autres limitations demeurent.

IDEE RECUE N°3 : Une agence ou un freelance peut faire le travail à ma

place.

Pour peu que vous ayez un budget suffisant (> 50K€ en général), vous
pourrez vous offrir certaines agences reconnues qui font un travail
remarquable et offrent un bon support après vente.

Toutefois, les "bonnes" agences sont généralement hors budget et nombre de

freelances et « d’agences » ne se résument en fait qu’à un étudiant
cherchant à gagner un peu d’argent. Or, aujourd’hui, le web est trop
complexe pour qu’un développeur seul, aussi expérimenté qu’il soit, puisse
gérer seul un projet d’envergure dans des délais convenables. Je vous laisse
donc imaginer dans nombre de cas le résultat…

De plus, pensez bien que le côté technique d'un projet n'est qu'un aspect
parmi d'autres. Si vous dépensez tout votre argent dans le développement de
votre site web ou application, comment pourrez-vous marketer votre projet ?

Enfin, une fois le travail rendu, il faudra très souvent ne pas vous attendre à
ce que votre freelance ou votre agence vienne vous dépanner pendant des
années en cas de problème.

Mettre un pied dans le monde des développeurs

Encore une fois, je ne vous dis pas de ne pas travailler avec une agence, je
vous dis simplement de prendre des précautions et de vous organiser avant.

Apprendre le HTML et le CSS signifie entrer dans le monde des développeurs

et c’est donc commencer à les comprendre et à parler comme eux.

Si vous comprenez le HTML et le CSS avant de faire appel à une agence, vous
rédigerez alors un cahier des charges plus précis et de meilleure qualité et
économiserez finalement beaucoup d’argent et réduirez le nombre de vos
soucis.

Comprendre son site

Finalement (on garde le meilleur pour la fin !), apprendre le HTML et le
CSS c’est surtout et avant tout se créer un socle pour comprendre comment
fonctionne son site et ainsi pouvoir le modifier ou corriger des problèmes au
besoin.

Deviendriez-vous plombier sur un coup de tête ? Non, car vous n’y connaissez
rien en plomberie. C’est exactement pareil sur le web.
L’immense majorité des échecs liés au web proviennent du fait que des
personnes se lancent dans l’aventure sans la moindre connaissance de leur
environnement.

N’oubliez pas qu’il est essentiel, pour qu’un commerce fonctionne (et
aujourd’hui plus que jamais) d’avoir une compréhension de son propre
business, de son architecture et de son infrastructure.

Si vous faîtes l’effort de comprendre cela, vous avez d’ores-et-déjà battu 95%
de vos concurrents. Sans compter que pour optimiser votre référencement
(donc votre visibilité sur le web), la maîtrise du HTML et du CSS est
indispensable.

Convaincu ? Dans ce cas, passons à la suite ! Car je suis certain que vous êtes
impatients de découvrir ce que signifient les initiales « HTML » et « CSS » !

DEFINITIONS ET ROLES DU
HTML ET DU CSS

Le HTML, ou HyperText Markup Language

HTML est l’abréviation de HyperText Markup Language, soit en
français « langage de balisage hypertexte ».

Ce langage a été créé en 1991 et a pour fonction de structurer et de donner

du sens à du contenu.
Grâce au HTML, on va par exemple pouvoir indiquer au navigateur que tel
texte doit être considéré comme un simple paragraphe ou que tel autre est
un titre.

Le code HTML ci-dessous par exemple indique que l’on souhaite créer un
grand titre (grâce à l’élément  h1 ) et un paragraphe (grâce à l’élément  p ).

Le HTML va également nous permettre d’insérer différents types d’éléments

dans nos pages web : du texte, des liens, des images, etc.

Le CSS, ou Cascading StyleSheets

CSS est le diminutif de Cascading StyleSheets, ou feuilles de styles en
cascade.

Le CSS 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.

Le CSS va nous permettre par exemple de définir la taille, la couleur ou

l’alignement d’un texte.

Nous allons donc utiliser le CSS sur notre code HTML, afin d’enjoliver le
résultat visuel final.
Le code ci-dessous par exemple indique que les titres  h1  écrits en HTML
doivent avoir une couleur rouge et une taille de 14px tandis que les
paragraphes doivent être bleus et soulignés.

N’utilisez jamais le HTML pour la mise en forme !

Voilà une chose que je vais vous répéter encore et encore au fil de ces
premiers chapitres : vous ne devez jamais utiliser le HTML pour faire le
travail du CSS.

En effet, si vous affichez la page en HTML créée ci-dessus sans le CSS, vous
pouvez remarquer que le contenu qui a été déclaré comme étant un titre
s’affiche en grand et en gras, tandis que la taille de la police de notre
paragraphe est plus petite.

Certains débutants en déduisent donc « pour mettre un texte en grand et en

gras, il suffit de créer un titre ». Sortez vous cela immédiatement de la tête !

Le HTML est un langage qui a été créé pour structurer des pages et pour
donner du sens au contenu. Le principe même du HTML est d’indiquer aux
navigateurs que tel texte est bien un titre et tel autre est bien un simple
paragraphe.

Si le titre s’affiche en grand et en gras ici, c’est tout simplement dû au

traitement par défaut de celui-ci par votre navigateur : le navigateur a
détecté un titre, et va donc par défaut lui attribuer une grande taille et un
poids de police plus lourd.

Si vous faussez le tout en déclarant par exemple des titres qui n’en sont pas,
vous pervertissez le rôle du HTML et cela va impacter fortement la qualité de
votre page web, sa validité et votre référencement global.

Une nouvelle fois, pour mettre un texte en grand ou en petit, en gras ou en

italique, en rouge ou en bleu… nous utiliserons le langage CSS qui a été créé
pour cela.

LES VERSIONS HTML ET CSS

Qu'est-ce qu'une "version" ?

Vous devez savoir qu'au cours de ces 20 dernières années, le web a
beaucoup évolué et s'est complexifié.
En effet, l'amélioration des performances, aussi bien au niveau des
composants physiques qu'en terme de vitesse de connexion a permis
progressivement de créer des sites web de plus en plus évolués.

Les langages tels que le HTML et le CSS se sont donc également modifiés et
enrichis durant ce temps.

Cependant, l'évolution n'a pas été linéaire ni continue pour l'utilisateur final.

Par exemple, en 1991 est sortie la première version de HTML, l'HTML1.

Directement suite à cela, le créateur du HTML a travaillé de son côté pour
continuer à améliorer ce langage. Une fois les améliorations jugées
suffisantes et suffisamment nombreuses, il a partagé publiquement la
nouvelle "version" de son langage, le HTML2, en 1994.

Chaque nouvelle version d'un langage introduit de nouvelles fonctionnalités

et change parfois totalement la syntaxe ou l'enjeu de ce langage.

HTML5 et CSS3

Durant ce cours, nous allons travailler avec les dernières versions stables

en date du HTML et du CSS : le HTML5 et le CSS3.

Le HTML5 et le CSS3 ont apporté de nouvelles fonctionnalités et ouvert de

nouvelles possibilités intéressantes.

Entre autres, le HTML5 simplifie grandement l'insertion de contenus audio et

vidéo et améliore la sémantique (la distinction des différents contenus est
meilleure que jamais).

Pour sa part, le CSS3 nous apporte une bonne gestion des ombres et des
dégradés, ainsi que la possibilité de créer des bordures arrondies.

Durant tout ce tutoriel, lorsque nous parlerons de HTML ou de CSS, nous

ferons référence aux versions HTML5 et CSS3 sauf mention explicite.
TRAVAIL EN LOCAL VS EN
PRODUCTION

Travailler en local, c’est quoi ?

Avant de commencer notre découverte du HTML et du CSS, il me semble
important de dire un petit mot sur les différentes façons de travailler en
informatique. Cela devrait vous permettre d’y voir beaucoup plus clair par la
suite.

Lorsque vous codez, vous pouvez travailler soit en local, soit en production.

Travailler en local signifie travailler avec des fichiers enregistrés sur votre

propre ordinateur. Comme les fichiers ne sont que sur votre ordinateur, vous
seul pourrez voir ce que vous faîtes.

Travailler en production, au contraire, signifie intervenir sur des fichiers

qui sont déjà stockés sur un serveur web, c’est-à-dire travailler sur des
fichiers déjà accessibles via Internet.

L’intérêt du travail en local

Travailler en local comporte de nombreux avantages. Le plus important est
certainement le fait de pouvoir créer ou tester de nouvelles fonctionnalités
sans impacter le fonctionnement d’un site "live" qui serait déjà visité par des
internautes.
Du local vers la production
Un bon développeur commencera toujours son projet en local, c’est-à-dire
avec ses fichiers stockés sur sa propre machine.

Une fois le travail terminé, il faudra alors louer un hébergement web chez un
hébergeur et acheter et choisir une URL, c’est-à-dire une adresse web pour
notre site. Ensuite, nous allons transférer tous nos fichiers sur l'espace
serveur que nous avons loué chez notre hébergeur.

L’hébergeur se charge alors de veiller à ce que le serveur fonctionne toujours

afin que notre site soit toujours accessible via Internet.

Si nous désirons par la suite modifier quelque chose d’important sur notre
site, nous créerons une copie de notre site live en local en récupérant tous les
fichiers, et nous implémenterons d’abord les modifications en local afin de
minimiser le risque de bugs finaux et ainsi le temps de maintenance sur notre
site.

Durant tout ce tutoriel, nous travaillerons en local : nous stockerons les

fichiers créés sur nos propres ordinateurs.

L’EDITEUR DE TEXTE

Place à la pratique… ou presque

Nous en avons désormais fini avec la théorie et les définitions, et les
chapitres qui vont suivre vont être l’occasion pour vous de commencer à
pratiquer en codant en HTML et en CSS.
Mais avant tout, il va nous falloir mettre en place notre environnement de
travail, c’est-à-dire réunir les différents éléments qui vont nous permettre de
pouvoir coder en HTML et en CSS.

Et sur ce point, vous êtes plutôt chanceux car pour coder en HTML et en

CSS, c’est très simple : nous n’aurons besoin que d’un éditeur de texte.

Qu’est-ce qu’un éditeur

Il existe des milliers d’éditeurs disponibles sur le web, fonctionnant avec des
environnements différents (Windows, Mac Os, etc.). Le plus connu de tous est
certainement NotePad++, le fameux éditeur fonctionnant avec Windows.

Un éditeur va nous permettre de pouvoir écrire des pages de code et de les

enregistrer au bon format (c’est-à-dire avec la bonne extension). Les éditeurs
proposent en général différentes options pour vous aider à coder, comme par
exemple des indications lorsque vous faîtes une faute de syntaxe dans votre
code.

Je n’ai pas de conseil précis quant au choix de votre éditeur. Je vous

recommande simplement d’en télécharger un gratuit qui a déjà fait ses
preuves.

Un bon éditeur : Komodo Edit

Personnellement, j’utilise la version gratuite du logiciel Komodo, c’est-à-dire
Komodo Edit qui est multiplateformes (il fonctionne aussi bien sous Windows
que Mac ou encore Linux).

Vous pourrez trouver ce logiciel en cliquant directement sur l’image ci-

dessous :
Une fois l’éditeur de votre choix installé, n’hésitez pas à l’ouvrir.
Normalement, par défaut, lorsque vous créez une nouvelle page, le fond doit
être blanc. Je vous recommande de paramétrer votre éditeur afin de changer
la couleur de fond pour un gris foncé (vous devrez certainement également
changer la couleur de votre code afin d’y voir). Cela vous fatiguera beaucoup
moins les yeux.

Editeur contre site

Certains d’entre vous connaissent peut être le site jsbin.com ? C’est le site
que j’utilise lorsque je vous propose de tester un code.

En effet, vous n’êtes pas strictement obligés de passer par un éditeur pour
apprendre à coder en HTML et en CSS, car de nombreux sites comme JsBin
vous proposent de rentrer directement votre code en HTML et en CSS et
affichent le résultat en direct.
Ces sites sont très pratiques lorsque vous voulez tester rapidement un bout
de code ou pour des démonstrations de cours.

Cependant, retenez bien qu’ils sont aussi limités : vous ne pourrez pas faire
certaines choses via ces sites et surtout, si vous devez un jour créer un site
avec plusieurs pages reliées entre elles, vous devrez obligatoirement utiliser
un éditeur.

Pour le moment, je vous conseille donc de vous en tenir à votre éditeur et de

progresser en même temps que moi. Nous utiliserons JsBin seulement lorsque
je vous proposerai de tester des codes.

ELEMENTS, BALISES,
ATTRIBUTS EN HTML

Les éléments en HTML

Le langage HTML tout entier repose sur l’utilisation d’éléments. Si vous
comprenez bien ce qu’est un élément, vous comprenez le HTML.

Nous allons utiliser les éléments en HTML pour structurer du contenu, pour

lui donner du sens. Selon l’élément utilisé, le navigateur va reconnaître le
contenu comme étant de telle ou telle nature.

Ainsi, on va utiliser des éléments pour définir un paragraphe ou un titre par

exemple, ou encore pour insérer une image ou une vidéo dans un document.
L’élément  p , par exemple sert à définir un paragraphe.
Les balises en HTML
Un élément HTML peut être soit constitué d’une paire de balises et d’un
contenu, soit (plus rarement) d’une balise unique qu’on dit alors
orpheline.

L’élément  p  ci-dessous est constitué d’une balise ouvrante, d’un balise

fermante (notez la présence du slash), et d'un contenu (textuel) entre les
balises.

L’élément  br  ci-dessous (servant à créer un retour à la ligne) n’est lui

constitué que d’une balise orpheline.

Sur le web, vous trouverez peut être des éléments  br  écrits avec un slash
après le nom de l’élément, comme ceci : <br/>. Les deux syntaxes sont
acceptées en HTML, la seule différence est que la syntaxe utilisant le slash
est également reconnue par le langage XML. Dans ce cours, j'utiliserai par
simplicité la syntaxe sans le slash
Les attributs en HTML
Finalement, la balise ouvrante d’un élément HTML peut contenir des
attributs, qui sont parfois même obligatoires.

Les attributs vont venir compléter les éléments en les définissant plus
précisément ou en leur apportant des informations supplémentaires.

Un attribut contient toujours une valeur, qu’on peut cependant parfois

omettre dans le cas des attributs ne possédant qu’une seule valeur (la valeur
est considérée comme évidente).

Par exemple, l’élément  a  (pour "anchor") servant à créer des liens vers
d’autres sites ou d’autres pages, va avoir besoin d’un
attribut  href  ("hypertexte reference") qui va prendre comme valeur l'adresse
(relative ou absolue) de la page vers laquelle on souhaite faire un lien.

L’élément  img , servant à insérer une image dans une page HTML, va lui
demander deux attributs :  src  et  alt .

L'attribut  src  va prendre comme valeur le nom et l’emplacement de l’image

tandis que l'attribut  alt  va afficher un texte alternatif dans le cas où l’image
ne serait pas disponible (pour les non voyants par exemple).

Notez que cet élément n'est constitué que d'une seule balise orpheline, tout
comme l'élément  br .
Notez bien que les balises et les attributs ne seront jamais affichés par le
navigateur : ils vont servir à indiquer au navigateur comment il doit traiter
chaque contenu. Bien construire sa page web sera aussi hautement
bénéfique pour votre référencement dans les moteurs de recherche.

Résumé et conclusion sur les éléments en HTML

 Les éléments sont à la base du fonctionnement du HTML ;

 Les éléments servent à donner du sens aux différents objets de la

page ;

 Les éléments peuvent être constitués soit d’une paire de balises

(ouvrante et fermante) et d'un contenu entre les balises, soit d’une
seule balise « orpheline » ;

 Un élément peut contenir des attributs. Les attributs se placent dans la

balise ouvrante d’un élément et possèdent toujours une valeur (parfois
implicite) ;

 Le navigateur n’affichera jamais les balises ni les attributs : il va s’en

servir d’indication pour justement savoir ce qu’il doit afficher (un
paragraphe, un titre, un lien, une image, etc.).
STRUCTURE D’UNE PAGE
HTML

Structure minimale d’une page en HTML

Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement
comporter certains éléments et suivre un schéma précis.

Vous devez toujours faire votre maximum pour que vos pages de code soient
valides. Cela améliorera votre référencement et limitera grandement les
problèmes d’ergonomie et les bugs de votre site.

Voici donc ci-dessous le code minimum pour créer une page HTML valide.
Nous allons dans la suite de ce chapitre expliquer le rôle de chaque élément
et attribut.

Le doctype
Tout d’abord, nous devrons toujours démarrer une page HTML en précisant
le  doctype  de notre document. Comme son nom l’indique, le  doctype  sert à
préciser le type du document.
Faites bien attention à l’écriture du  doctype  : vous pouvez remarquer que la
balise représentant le doctype commence par un point d’exclamation. Ceci
est un cas unique.

Dans la balise  doctype , on va préciser le langage utilisé, à savoir le HTML dans

notre cas.

L’élément html
Après le document, nous devons également mentionner un élément  html . Cet
élément est composé de deux balises  <html>  et  </html>  et va représenter
notre page HTML en soi. On va donc insérer tout le contenu de notre page (et
donc les autres éléments) à l’intérieur de celui-ci.

Les éléments head et body

A l’intérieur de l’élément  html , nous devons à nouveau indiquer deux
éléments :  head  et  body .

L’élément  head  va contenir des meta informations relatives à la page, c’est-à-
dire des informations générales dont la page va avoir besoin pour
fonctionner, comme le titre de la page ou encore le type d’encodage utilisé.

L’élément  body  va lui contenir tout le contenu « visible » de la page : les
textes, images, liens, vidéos, etc.

Les éléments title et meta

Finalement, nous allons devoir indiquer au moins deux autres éléments à
l’intérieur de notre élément  head  : l’élément  title , qui va contenir le titre de
la page et un élément  meta  avec son attribut  charset  qui va nous permettre
de définir l’encodage de la page.
L’encodage est très important pour que tous nos caractères, notamment les
accents, s’affichent normalement dans notre page. Pour nous autres, français,
nous utiliserons la valeur  utf-8 .

Notez que vous devrez également régler l’encodage de votre éditeur de texte
sur  utf-8  afin que tous les caractères s’affichent bien par la suite dans votre
navigateur.

Ca y est, nous venons de créer notre première page en HTML. Celle-ci est
pour le moment vide et ne possède qu’un titre, mais c’est déjà un bon début !
Pas d’inquiétude : nous allons la remplir ensemble au fil des prochains
chapitres.

L’imbrication d’éléments
Un autre concept qu’il vous faut comprendre absolument pour coder en HTML
est la façon dont le HTML traite ses éléments.

Vous l’avez probablement remarqué : ci-dessus, nous avons placé des

éléments HTML à l’intérieur d’autres éléments (par exemple, les
éléments  title  et  meta  ont été placés à l'intérieur de l'élément  head ).

On appelle cela l’imbrication. L’imbrication est l’une des fonctionnalités du

HTML qui fait toute sa force (nous découvrirons réellement pourquoi plus tard,
avec l’étude du CSS).

Cependant, comme toujours, on ne peut pas imbriquer des éléments

HTML n’importe comment et il faut suivre des règles précises.

Ainsi, nous n’avons absolument pas le droit de « croiser » les balises des
éléments ou, pour le dire plus clairement : le premier élément déclaré doit
toujours être le dernier refermé, tandis que le dernier ouvert doit toujours
être le premier fermé.
Par exemple, vous voyez que notre premier élément déclaré est
l’élément  html , qui contient les éléments  head  et  body . L'élément  html  devra
donc être le dernier élément refermé.

Faites bien attention à distinguer les éléments contenus dans d’autres et

ceux qui sont au même niveau hiérarchique. Par exemple,
ici,  title  et  meta  sont deux éléments « enfants » de l'élément  head  (car ils
sont contenus à l'intérieur de celui-ci), mais sont deux « frères » : aucun des
deux ne contient l’autre.

Le schéma ci-dessous présente toutes les situations valides d'imbrication

d'éléments :

CREER ET AFFICHER NOTRE

PREMIERE PAGE HTML

Définir le type et l’encodage du fichier

Maintenant que nous avons établi les bases ensemble, vous allez pouvoir
commencer à coder en même temps que moi.

Pour cela, commencez par ouvrir votre éditeur de texte et créez un nouveau
fichier.

Avant toute chose, vous allez devoir définir le type de page que vous
souhaitez créez et l’encodage de votre page.

Dans notre cas, nous souhaitons créer une page html et utiliser l’encodage
utf-8.

Pour définir le type de page, vous avez deux choix : soit vous « enregistrez
votre fichier sous » et vous changez l’extension de celui-ci en « .html »
lorsqu’on vous demande de choisir le nom du fichier et le dossier dans lequel
il doit être enregistré, soit vous définissez cela directement dans votre éditeur
via l’un de ses onglets.

Voici les deux façons de faire illustrées ci-dessous en utilisant Komodo Edit
avec un Mac.

Tout d’abord, en enregistrant mon fichier sous :

Ou, autre façon, en recherchant l’option nous permettant de changer le type
du document.

Dans Komodo Edit, cette option se trouve en bas de votre document ouvert.
Sinon, vous devrez probablement chercher dans les onglets de votre éditeur.

Nous allons utiliser le format HTML5 comme ci-dessous ou, à défaut, le

HTML.
Ensuite, nous devons définir l’encodage utilisé car notre élément  meta  ne
suffit pas : il faut également le préciser dans notre éditeur.

Avec Komodo, c’est très simple, l’option est disponible juste à côté du type de
document, en bas de notre fichier ouvert. Avec un autre éditeur, vous devrez
une nouvelle fois certainement chercher parmi les onglets.
Nous sommes prêts, nous n’avons plus qu’à nous occuper de notre fichier en
soi.

Ecrire et enregistrer notre fichier

Dans ce nouveau fichier, nous allons déjà écrire la structure minimale d’un
page HTML afin qu’elle soit valide comme nous l’avons appris au chapitre
précédent.

Ensuite, nous allons simplement rajouter deux éléments  h1  et  p  à l’intérieur

de notre élément  body  afin de rajouter un peu de contenu dans notre page.
Essayer ce code

Dès que c’est fait, nous pouvons immédiatement enregistrer la page comme
vous le feriez pour n’importe quel document.

Je vous conseille de créer un dossier séparé sur votre bureau dans lequel
vous placerez tous les fichiers que nous créerons durant ce cours. Cela vous
permettra d’avoir une meilleure vision d’ensemble sur vos fichiers et sur les
progrès réalisés.

Lorsque vous enregistrez une page, quelque soit le langage informatique

utilisé, évitez les espaces et les caractères spéciaux (caractères accentués,
etc.) dans le nom de la page.

Ainsi, vous n'enregistrerez pas votre page sous le nom  Première page
html !!.html  mais plutôt  premiere-page-html.html .

Affichage de la page HTML

Pour afficher le résultat correspondant à la page que nous venons de créer
dans votre navigateur favori, c’est très simple : vous n’avez qu’à double-
cliquer sur votre fichier tout juste enregistré.
Votre page s’ouvre alors automatiquement dans votre navigateur par défaut,
et voilà ce que vous devriez voir :

Note : il est possible, que lorsque vous double-cliquiez sur votre document
celui-ci se rouvre dans votre éditeur de texte plutôt que dans votre
navigateur.

Cela peut arriver si votre éditeur de texte a été défini comme le programme
par défaut pour ouvrir ce type de document.

Dans ce cas là, faites simplement un clic droit sur votre document puis
choisissez « ouvrir avec… » et choisissez votre navigateur favori.
INDENTATION ET
COMMENTAIRES

Des bonnes pratiques, pourquoi faire ?

Avant d’aller plus loin dans notre apprentissage du HTML et du CSS, il me
semblait essentiel de d’ores-et-déjà vous parler de certaines bonnes
pratiques de développeurs.

En effet, si vous faîtes l’effort de les respecter dès maintenant, vous verrez
que ça deviendra très vite un automatisme.

Les bonnes pratiques sont là pour nous aider à coder plus proprement et plus
lisiblement, donc pour nous faciliter la vie, pas le contraire !

Nous allons dans cette partie parler d’indentation et de commentaires

HTML.

L’indentation
Indenter correspond à créer des retraits en début de ligne de façon cohérente
et logique.

Vous l’avez certainement remarqué dans les codes précédents : j’accentue

plus au moins le retrait à gauche de chacune de mes lignes de code.

Indenter va nous permettre d’avoir un code plus propre et plus

lisible, donc plus compréhensible. Indenter permet également de plus
facilement détecter les erreurs potentielles dans un code.
Le but de l’indentation est de nous permettre de discerner plus facilement les
différents éléments ou parties de code. Regardez plutôt les deux exemples
suivants.

Avec indentation :

Sans indentation :

J’espère que vous serez d’accord pour dire que le premier code est plus clair
que le second.

Concernant l’indentation, il n’y a pas de règle absolue, notamment par

rapport à la taille du retrait de chaque ligne.

Pour ma part, je me contente de retourner à la ligne et d’effectuer une

nouvelle tabulation à chaque fois que j’ouvre un nouvel élément dans un
autre.
Par exemple, ci-dessus, vous pouvez voir que j’ai effectué une tabulation pour
écrire la balise ouvrante de mon élément  head , contenu dans mon
élément  html .

J’ai ensuite effectué une nouvelle tabulation à l’intérieur de

l'élément  head  pour écrire mon élément  title .

En revanche, je n’ai pas crée de nouvelle tabulation pour l'élément  meta  étant
donné que cet élément n’est pas contenu dans  title  (ce n’est pas un
élément enfant de l'élément  title ) mais est au même niveau hiérarchique
que lui (on parle d’élément frère).

Vous pouvez observer la même chose avec les éléments  head  et  body  par
rapport à l’élément  html  : j’ai décalé  head  et  body  avec le même écart par
rapport à  html  car ces deux éléments sont frères (aucun des deux n’est
contenu dans l’autre).

Les commentaires
Les lignes de commentaires vont être des lignes de texte que l’on va écrire
au milieu de notre code, afin de donner des indications sur ce que fait le code
en question.

Les commentaires seront invisibles pour vos visiteurs, ils ne servent qu’aux
développeurs créant ou lisant le code.

Les commentaires vont être très utile dans deux situations :

1. Dans le cas d’un gros / long projet, afin de bien se rappeler soi même
pourquoi nous avons écrit tel ou tel code, ou encore pour se repérer
dans le code ;

2. Si l’on souhaite distribuer son code, ou si l’on travaille à plusieurs, cela

fait beaucoup plus professionnel et permet aux autres développeurs de
comprendre beaucoup plus rapidement et facilement le code distribué.
Les commentaires peuvent être mono-ligne ou multi-lignes. Pour écrire un
commentaire en HTML, nous allons nous y prendre de la façon suivante :

Essayer ce code

Faîtes bien attention à la syntaxe des commentaires : il y a un point

d’exclamation au début mais il n’y en a pas à la fin.

Même si vous ne voyez pas forcément l’intérêt de commenter dès

maintenant, je vous garantis que c’est souvent ce qui sépare un développeur
moyen d’un bon développeur. Faites donc l’effort d’intégrer cette bonne
pratique dès à présent, cela vous sera bénéfique dans le futur.

Mise en garde
Vous vous rappelez lorsque je vous ai dit que vos commentaires n’étaient pas
affichés aux yeux de vos visiteurs ?

C’est vrai, mais faîtes bien attention, car cela ne veut pas dire qu’il est
impossible pour un visiteur de voir ce que vous avez écrit en commentaire.
En effet, tous vos visiteurs peuvent voir à tout moment, s’ils le souhaitent,
non seulement le contenu de vos commentaires mais aussi l’intégralité de
votre code HTML.

Pour cela, il suffit simplement d’activer les outils pour développeurs dont
dispose chaque navigateur puis de faire un clic droit sur la page et «
d’inspecter l’élément ».

Cela est valable pour n’importe quel site. Regardez par exemple avec le site
Wikipédia. Une fois les outils pour développeurs activés, il suffit d’un clic
droit…

Et le contenu HTML de la page est affiché dans une console !

Faîtes donc bien attention à ne jamais écrire d’informations sensibles au sein
de vos commentaires, comme des codes ou mots de passe par exemple.

INDENTATION ET
COMMENTAIRES

Des bonnes pratiques, pourquoi faire ?

Avant d’aller plus loin dans notre apprentissage du HTML et du CSS, il me
semblait essentiel de d’ores-et-déjà vous parler de certaines bonnes
pratiques de développeurs.

En effet, si vous faîtes l’effort de les respecter dès maintenant, vous verrez
que ça deviendra très vite un automatisme.

Les bonnes pratiques sont là pour nous aider à coder plus proprement et plus
lisiblement, donc pour nous faciliter la vie, pas le contraire !

Nous allons dans cette partie parler d’indentation et de commentaires

HTML.

L’indentation
Indenter correspond à créer des retraits en début de ligne de façon cohérente
et logique.

Vous l’avez certainement remarqué dans les codes précédents : j’accentue

plus au moins le retrait à gauche de chacune de mes lignes de code.

Indenter va nous permettre d’avoir un code plus propre et plus

lisible, donc plus compréhensible. Indenter permet également de plus
facilement détecter les erreurs potentielles dans un code.

Le but de l’indentation est de nous permettre de discerner plus facilement les

différents éléments ou parties de code. Regardez plutôt les deux exemples
suivants.

Avec indentation :
Sans indentation :

J’espère que vous serez d’accord pour dire que le premier code est plus clair
que le second.

Concernant l’indentation, il n’y a pas de règle absolue, notamment par

rapport à la taille du retrait de chaque ligne.

Pour ma part, je me contente de retourner à la ligne et d’effectuer une

nouvelle tabulation à chaque fois que j’ouvre un nouvel élément dans un
autre.

Par exemple, ci-dessus, vous pouvez voir que j’ai effectué une tabulation pour
écrire la balise ouvrante de mon élément  head , contenu dans mon
élément  html .
J’ai ensuite effectué une nouvelle tabulation à l’intérieur de
l'élément  head  pour écrire mon élément  title .

En revanche, je n’ai pas crée de nouvelle tabulation pour l'élément  meta  étant
donné que cet élément n’est pas contenu dans  title  (ce n’est pas un
élément enfant de l'élément  title ) mais est au même niveau hiérarchique
que lui (on parle d’élément frère).

Vous pouvez observer la même chose avec les éléments  head  et  body  par
rapport à l’élément  html  : j’ai décalé  head  et  body  avec le même écart par
rapport à  html  car ces deux éléments sont frères (aucun des deux n’est
contenu dans l’autre).

Les commentaires
Les lignes de commentaires vont être des lignes de texte que l’on va écrire
au milieu de notre code, afin de donner des indications sur ce que fait le code
en question.

Les commentaires seront invisibles pour vos visiteurs, ils ne servent qu’aux
développeurs créant ou lisant le code.

Les commentaires vont être très utile dans deux situations :

1. Dans le cas d’un gros / long projet, afin de bien se rappeler soi même
pourquoi nous avons écrit tel ou tel code, ou encore pour se repérer
dans le code ;

2. Si l’on souhaite distribuer son code, ou si l’on travaille à plusieurs, cela

fait beaucoup plus professionnel et permet aux autres développeurs de
comprendre beaucoup plus rapidement et facilement le code distribué.

Les commentaires peuvent être mono-ligne ou multi-lignes. Pour écrire un

commentaire en HTML, nous allons nous y prendre de la façon suivante :
Essayer ce code

Faîtes bien attention à la syntaxe des commentaires : il y a un point

d’exclamation au début mais il n’y en a pas à la fin.

Même si vous ne voyez pas forcément l’intérêt de commenter dès

maintenant, je vous garantis que c’est souvent ce qui sépare un développeur
moyen d’un bon développeur. Faites donc l’effort d’intégrer cette bonne
pratique dès à présent, cela vous sera bénéfique dans le futur.

Mise en garde
Vous vous rappelez lorsque je vous ai dit que vos commentaires n’étaient pas
affichés aux yeux de vos visiteurs ?

C’est vrai, mais faîtes bien attention, car cela ne veut pas dire qu’il est
impossible pour un visiteur de voir ce que vous avez écrit en commentaire.

En effet, tous vos visiteurs peuvent voir à tout moment, s’ils le souhaitent,
non seulement le contenu de vos commentaires mais aussi l’intégralité de
votre code HTML.
Pour cela, il suffit simplement d’activer les outils pour développeurs dont
dispose chaque navigateur puis de faire un clic droit sur la page et «
d’inspecter l’élément ».

Cela est valable pour n’importe quel site. Regardez par exemple avec le site
Wikipédia. Une fois les outils pour développeurs activés, il suffit d’un clic
droit…

Et le contenu HTML de la page est affiché dans une console !

Faîtes donc bien attention à ne jamais écrire d’informations sensibles au sein
de vos commentaires, comme des codes ou mots de passe par exemple.

LES TITRES ET LES

PARAGRAPHES EN HTML

Pourquoi définir des titres et des paragraphes ?

Une nouvelle fois, rappelez vous que le HTML est un langage de balisage.

Le seul et unique rôle du HTML est de nous permettre de créer un document

structuré en différenciant d’un point de vue sémantique les différents
éléments d’une page.

Le but de tout ceci est que les navigateurs et les ordinateurs puissent
comprendre la structure de notre document et son flux afin de l’afficher de la
meilleure manière.

L’un des effets secondaires d’une bonne utilisation du HTML en tant que
langage de balisage est un meilleur référencement sur des moteurs de
recherche comme Google par exemple.

Il va donc être essentiel de différencier nos titres de nos paragraphes en

HTML, ainsi que les parties de contenu plus ou moins importantes, etc.

Les titres en HTML

Il existe six niveaux hiérarchiques de titres ("heading" en anglais) définis par
les éléments  h1 ,  h2 ,  h3 ,  h4 ,  h5  et  h6 . L'élément  h1  représente un titre très
important,  h2  un titre important,  h3  un titre d'importance moyenne, etc.

Essayer ce code

Comme vous pouvez le voir, le navigateur comprend bien qu’il s’agit de titres
d’importances diverses et les traite donc différemment par défaut, en leur
attribuant une mise en forme différente (très grand et très gras pour un titre
de niveau  h1 , puis de plus en plus petit jusqu’à  h6 ).
Encore une fois, n’utilisez pas un élément de type "h" pour écrire un texte en
grand et en gras ! Utilisez le pour définir un titre dans votre page. Nous nous
chargerons de la mise en forme du contenu plus tard, grâce au CSS.

Notez que « h » signifie « heading », soit l’équivalent du mot « titre » en

français. Les éléments en HTML portent souvent l'initiale de ce qu'ils
représentent, en anglais.

Théoriquement, si vos pages sont bien construites, vous ne devriez que

rarement dépasser le niveau  h3 .

h1  va représenter le titre principal de votre page. Vous n’avez le droit qu’à un
seul élément  h1  par section de page (nous verrons plus tard ce que cela
signifie). En revanche, vous pouvez créer autant de titres  h2 ,  h3 , etc. que
nécessaire.

Les éléments h1, h2, etc. et l'élément title

Faîtes bien attention à ne pas confondre les éléments  h1 ,  h2 , etc. et
l'élément  title , qui sont complètement différents !

Les éléments  h1 ,  h2 , etc. servent à définir des titres à l’intérieur de la page,

tandis que l’élément  title  sert à définir le titre de la page, qui va s’afficher
dans la barre haute de votre navigateur.

Les paragraphes en HTML

Pour créer des paragraphes en HTML, nous allons utiliser l’élément  p .

On peut créer autant de paragraphes que l’on souhaite dans une page. A
chaque nouveau paragraphe, il faut utiliser un nouvel élément  p .

Pour chaque nouveau paragraphe, un retour à la ligne va être créé

automatiquement et affiché par votre navigateur (exactement comme c’était
le cas avec les titres).
L’élément  p  est très simple à utiliser, n’hésitez pas à essayer par vous
même !

LES ESPACES ET LES

RETOURS À LA LIGNE EN
HTML

La problématique
Les plus curieux d’entre vous auront, je suppose, déjà fait le test : vous
pouvez ajouter autant d’espaces que vous le voulez au sein d’un paragraphe
ou d’un titre ou effectuer des retours à la ligne dans votre code, ceux-ci ne
seront jamais affichés visuellement dans votre navigateur.
En effet, pour effectuer des retours à la ligne ou marquer des espaces
en HTML, nous allons à nouveau devoir utiliser des éléments.

Pensez bien à nouveau que le navigateur ne comprend pas ce que vous

écrivez : il ne comprend que les éléments et traite votre contenu par rapport
aux éléments que vous lui avez indiqué.

Les retours à la ligne en HTML

Pour effectuer un retour à la ligne en HTML nous allons devoir utiliser
l’élément  br  qui est représenté par une unique balise orpheline.

Le nom de l'élément  br  est l'abréviation de « break », l’équivalent de « casser

» en anglais (dans le sens de « casser une ligne »).

On peut utiliser autant d’éléments  br  que l’on souhaite au sein d’un titre ou
d’un paragraphe par exemple.
Essayer ce code

Les changements de thématique en HTML

Parfois, au sein d’un article par exemple, vous aborderez des thématiques
différentes que vous voudrez séparer.

Dans ce cas là, il peut être intéressant d’utiliser l’élément  hr  plutôt que  br .
L'élément  hr  a justement été créé pour définir un retour à la ligne avec
changement de thématique. Tout comme  br , cet élément est représenté par
une balise orpheline.

Essayer ce code

Gestion des espaces en HTML

Il n’existe pas à proprement parler d’élément permettant de gérer les
espaces en HTML.

Cependant, on va pouvoir utiliser l’élément  pre  qui sert à préformater un

texte.

Le texte écrit à l’intérieur de cet élément va conserver la mise en forme que

nous allons lui donner.
Essayer ce code

Attention tout de même à ne pas abuser de cet élément et à ne l’utiliser que

si vous n’avez pas d’autre choix car celui-ci ne comporte aucune signification
d’un point de vue sémantique.
DEFINIR L’IMPORTANCE DES
TEXTES

L’importance des textes

Lorsque vous concevez une page web, et écrivez du texte, certaines parties
de ce texte vont être plus importantes que d’autres.

Cela va par exemple être le cas pour les mots ou phrases clefs sur lesquels
vous souhaitez être bien référencé dans les moteurs de recherche.

Nous allons pouvoir signifier à un moteur de recherche (et au navigateur) que

telles ou telles parties d’un texte doivent être considérées comme très
importantes ou juste importantes grâce au HTML.

L’élément strong
L’élément HTML  strong  va être utilisé pour signifier qu’un contenu
est très important et doit être considéré comme tel par les moteurs de
recherche.

En résultat, le navigateur affichera le contenu à l’intérieur de

l’élément  strong  en gras. Encore une fois, n’utilisez pas  strong  pour mettre un
texte en gras ! Utilisez  strong  pour marquer un texte qui vous semble très
important. Nous utiliserons le CSS pour gérer le poids d’un texte.
Essayer ce code

L’élément em
L’élément HTML  em  (pour emphasis ; « emphase » en français) sert à
indiquer qu’un texte doit être considéré comme relativement
important, mais avec moins d’importance qu’un texte dans un
élément  strong .

Le résultat visuel par défaut de l’emphase est la mise en italique du texte

contenu dans l’élément.
Essayer ce code

L’exemple ci-dessus vous montre également que l’on peut véritablement

placer nos commentaires n’importe où dans notre code HTML (ici, j’en ai
placé un à l’intérieur même de notre paragraphe).

L’élément mark
L’élément HTML  mark  va nous permettre de faire ressortir un
contenu en le marquant.

Le contenu n’est pas forcément important en soi mais va être important à un

moment T pour un utilisateur X.
Par exemple, lorsque vous effectuez une recherche sur un site ou sur un
moteur de recherche, les mots que vous allez rentrer dans votre recherche
sont importants pour vous.

Ces mêmes mots vont généralement être mis en relief dans les résultats
retournés suite à votre recherche. Souvent, on utilisera l’élément  mark  dans
ces cas là.

Il reste difficile à votre niveau de vous montrer l’intérêt de cet élément car on
l’utilise généralement de façon dynamique et donc avec d’autres langages
comme le JavaScript. Retenez simplement qu’il existe pour le moment.

Généralement, le texte contenu dans l’élément  mark  sera automatiquement

surligné en jaune par le navigateur (nous pourrons changer ce comportement
en CSS).
LES LISTES EN HTML

Définition d’une liste

Les listes HTML vont nous permettre d’ordonner du contenu en
l’affichant sous forme… de liste.

Visuellement, une liste ressemble à ceci :

 Premier élément de ma liste,

 Deuxième élément de ma liste,

 Troisième élément de ma liste.

Les listes vont être très utiles pour apporter de la clarté et de l’ordre à nos
documents, ainsi que pour créer des menus de navigation (nous verrons plus
tard comment dans ce cours).

Il existe deux grands types de listes en HTML : les listes ordonnées et

les listes non-ordonnées. Il existe également un troisième type de liste un
peu particulier et moins utilisé : les listes de définitions.

Nous allons voir dans ce chapitre comment créer chaque type de liste et
quand utiliser un type de liste plutôt qu’un autre.

Les listes non-ordonnées

Les listes non-ordonnées vont être utiles pour lister des éléments sans
hiérarchie ni ordre logique.
Par exemple, si je souhaite lister les mots « pomme », « vélo » et « guitare »,
sans plus de contexte, j’utiliserai une liste non-ordonnée.

En effet, on ne peut pas dégager de notion d’ordre, de hiérarchie ou de

subordination entre ces trois termes.

Pour créer une liste non-ordonnée, nous allons avoir besoin d’un
élément  ul  (pour « unordered list », ou « liste non-ordonnée » en français) qui
va représenter la liste en soi ainsi que d’éléments  li  ("list items" = "éléments
de liste") représentant chaque élément de la liste.

Essayer ce code
Comme vous pouvez le remarquer, les éléments  li  se trouvent à l’intérieur
de l’élément  ul  (à partir de ce moment, bien indenter son code commence à
être important). Visuellement, des puces (les points noirs) apparaissent
automatiquement devant chaque élément d’une liste non-ordonnée.

Les listes ordonnées

Au contraire des listes non-ordonnées, nous allons utiliser les listes ordonnées
lorsqu’il y aura une notion d’ordre ou de progression logique entre les
éléments de notre liste.

Par exemple, si l’on souhaite lister les étapes naturelles de la vie, ou lorsque
l’on crée un sommaire, on utilisera généralement des listes ordonnées.

Pour créer une liste ordonnée, nous allons cette fois-ci utiliser
l’élément  ol  (pour « ordered list » ou « liste ordonnée ») pour définir la liste
en soi et à nouveau des éléments  li  pour les différents éléments de la liste.
Essayer ce code

Comme vous le voyez, ce sont cette fois-ci des numéros qui sont affichés
devant chaque élément de la liste par défaut.

Vous pouvez changer ce comportement et afficher plutôt des chiffres romains

ou des lettres grâce à l’attribut  type  des listes ordonnées.

Cet attribut peut prendre cinq valeurs différentes :

 « 1 » : valeur par défaut. Des chiffres apparaitront devant chaque

élément de la liste ;

 « I » : Des chiffres romains majuscules apparaitront devant chaque

élément de la liste ;

 « i » : Des chiffres romains minuscules apparaitront devant chaque

élément de la liste ;

 « A » : Des lettres majuscules apparaitront devant chaque élément de

la liste ;

 « a » : Des lettres minuscules apparaitront devant chaque élément de

la liste ;
Essayer ce code

Les listes de définitions

Les listes de définitions, encore appelées « listes de descriptions » vont nous
permettre de lister des termes et d’ajouter des définitions ou descriptions
pour chacun de ces termes.

Pour créer une liste de définitions, nous allons cette fois-ci utiliser
l’élément  dl  signifiant « description list » ou « liste de description / définition
» en français pour définir la liste en soi, puis des éléments  dt  (description
term) pour chaque élément à décrire et enfin l’élément  dd  pour la définition /
description en soi.

Pensez bien lorsque vous créez une liste de définitions à toujours placer le
terme à définir avant sa définition, c’est-à-dire l’élément  dt  avant
l’élément  dd . Cela est normalement assez intuitif.
Essayer ce code

Les listes imbriquées

Finalement, sachez qu’il est tout-à-fait possible d’imbriquer une liste dans une
autre en suivant quelques règles simples.

Pour imbriquer une liste dans une autre, il suffit de définir une nouvelle liste à
l’intérieur de l’un des éléments d’une autre liste, juste avant la balise
fermante de cet élément.
Essayer ce code

Comme vous pouvez le voir, il devient ici très important de bien indenter son
code afin de ne pas se perdre au milieu de nos listes !
Notez que l’on peut imbriquer autant de listes que l’on souhaite les unes dans
les autres.

LIENS INTERNES ET
EXTERNES EN HTML

Définition et types de liens

Un lien, en HTML, va généralement servir à "transporter" un utilisateur d'un
endroit vers un autre après que celui-ci ait cliqué dessus.

Pour créer des liens en HTML, nous allons utiliser l’élément  a  accompagné

de son attribut  href  (hypertext reference) qui va prendre comme valeur la
cible du lien.

La cible d’un lien est tout simplement l’adresse de la page de destination du

lien.

Nous allons pouvoir distinguer deux grands types de liens : les liens
permettant de se déplacer d'une page vers une autre à travers un même site
et les liens permettant de se rendre sur d’autres sites.

On appellera ce premier type de liens des liens internes tandis que le second

type va correspondre aux liens externes.

Dans les deux cas, seule la façon dont on va construire la valeur de

l’attribut  href  va changer.

Les liens externes en HTML

Les liens externes vont être des liens ramenant vers des pages d’autres sites.

Pour créer un lien externe, on va devoir indiquer l’URL complète de

destination du lien.

Par exemple, pour créer un lien ramenant vers la page d’accueil du site
Wikipédia, nous allons nous y prendre comme ceci :

Essayer ce code

Le texte situé entre les balises ouvrante et fermante de notre

élément  a  correspond au texte cliquable et également à la seule partie visible
du lien pour l'utilisateur. Dans notre cas, cela correspond à « ce lien ».

Vous remarquez par ailleurs que le texte, lorsque l’on visualise notre page
web dans un navigateur, est en bleu et est souligné pour indiquer que l’on
peut cliquer dessus.
Lorsque l’attribut  href  prend une URL complète en valeur, on parle de valeur
absolue (car celle-ci est fixe et ne dépend de rien). Les liens externes utilisent
toujours des valeurs absolues.

Les liens internes en HTML

Les liens internes vont être des liens ramenant vers d’autres pages au sein
d’un même site.

Dans ce cas, nous allons renseigner une valeur relative pour notre
attribut  href .

On dit que la valeur est relative car on va devoir indiquer l’adresse de la page
de destination relativement à l’adresse de la page de départ (c’est-à-dire
celle à partir de laquelle on fait notre lien).

En effet, vous devez savoir qu’un site n’est qu’un ensemble de fichiers liés
entre eux. Ces fichiers peuvent être placés dans des dossiers différents.

Pour créer des liens internes, il faut donc distinguer trois cas :

1. Le cas où la page de départ et celle de destination sont dans le même

dossier ;

2. Le cas où la page de destination est dans un sous-dossier par rapport à

la page de départ ;

3. Le cas où la page de destination est dans un dossier parent par rapport

à la page de départ.

Pour illustrer ces cas, nous allons avoir besoin de trois dossiers différents et
de quatre pages. Voici la structure que je vous propose de créer :
Pour le moment, nous nous sommes contentés de créer trois dossiers et
quatre fichiers HTML:

 Un dossier nommé « parent », contenant un fichier HTML

nommé  fichier-parent.html  ainsi qu’un dossier « milieu » ;

 Un dossier nommé « milieu », contenant les fichiers  page-

depart.html  et  fichier-milieu.html  ainsi qu’un dossier nommé « sous

»;

 Un dossier nommé « sous », comportant un fichier nommé  fichier-

sous.html .

Dans chaque fichier HTML, nous nous sommes contentés d’écrire la structure
minimale d’un page HTML afin que nos fichiers soient valides ainsi qu’une
phrase de texte pour les différencier les uns des autres :
Vous pouvez imaginer que ces trois dossiers et ces quatre fichiers
représentent votre site. Notre but va maintenant être de créer des liens à
partir du fichier  page-depart.html  vers chacune des autres pages.

Pour créer un lien vers un autre fichier situé dans un même dossier, il suffit de
préciser le nom du fichier en valeur de l’attribut  href .

Pour créer un lien vers un fichier situé dans un dossier parent, il faudra écrire
« ../ » puis le nom du fichier en valeur de l’attribut  href .

Pour créer un lien vers un fichier situé dans un sous-dossier, il faudra préciser
le nom du sous-dossier et le nom du fichier, séparés par un slash, en valeur
de l’attribut  href .
De même, si on souhaite créer un lien vers une page qui est à deux niveaux
hiérarchiques d’écart de notre page de départ, il faudra soit indiquer le nom
des deux sous-dossiers, soit indiquer deux fois « ../ ».

Par exemple, si l’on souhaite faire un lien de la page  fichier-sous.html  vers la

page  fichier-parent.html située deux dossiers plus haut :
Voilà tout pour les liens internes et externes. Vous verrez qu’avec un petit
peu de pratique, c’est assez simple. Le tout est de ne pas vous emmêler dans
les différents dossiers créés.

L’attribut target ("cible")

Jusqu’à présent, lorsque nous cliquions sur les liens créés, nous étions
immédiatement redirigés vers la nouvelle page.

Souvent, si vous avez un site, vous voudrez que le lien s’ouvre dans un
nouvel onglet ou une nouvelle fenêtre afin que le visiteur ne perde pas la
page de votre site. On va pouvoir faire cela avec l’attribut  target .

L’attribut  target  va nous permettre de choisir où doit s’ouvrir notre page de
destination. En pratique, nous utiliserons très souvent la valeur « _blank » qui
spécifie que la nouvelle page doit s’ouvrir dans un nouvel onglet ou dans une
nouvelle fenêtre selon le navigateur utilisé par vos visiteurs.
Voici un exemple pratique avec un lien externe menant vers Wikipédia et
s’ouvrant dans un nouvel onglet ou une nouvelle fenêtre :

Essayer ce code

AUTRES TYPES DE LIENS EN

HTML

D’autres utilisations de l’élément HTML a

On peut également utiliser l’élément  a  pour créer d’autres types de liens, qui
ne vont pas ramener vers d’autres pages mais nous permettre par exemple
de nous déplacer dans une même page, d’afficher ou de télécharger un ficher
PDF ou encore d’envoyer un mail.

Dans ce nouveau chapitre, nous allons étudier trois nouvelles utilisations de

l’élément  a  :
  Pour se déplacer dans une page (les « ancres »);

 Pour envoyer un mail ;

 Pour afficher ou télécharger un fichier.

Créer une ancre en HTML

Parfois, si votre page est très longue, vous voudrez proposer des raccourcis à
vos visiteurs : en cliquant sur un lien, ceux-ci doivent être redirigés à un
endroit précis de la page.

Pour faire cela, nous allons créer des liens de type « ancre ».

Pour créer un lien de type ancre, il va avant tout nous falloir une ancre. On va
créer cette ancre en rajoutant un attribut  id  à l’intérieur de la balise ouvrante
de l’élément où l’on veut envoyer le visiteur.

Vous n’avez pas encore besoin de savoir véritablement ce que représente  id ,

nous étudierons cet attribut plus en détail plus tard dans le cours.

Vous devez donner une valeur unique à un attribut  id , afin d’ensuite pouvoir
utiliser cette valeur pour retrouver l’ id .

Vous pouvez lui donner n’importe quelle valeur, mais essayez de rester
cohérent. De plus, évitez les espaces, les caractères spéciaux et commencez
par une lettre.
Une fois notre ancre créée, nous allons créer le lien ramenant à l’ancre. Pour
cela, on utilise une nouvelle fois un élément  a  avec son attribut  href .

Seulement, cette fois-ci, on va devoir indiquer la valeur donnée à

l’attribut  id  comme valeur pour notre attribut  href , et faire précéder cette
valeur d’un dièse.

Finalement, pour tester notre lien dans de bonnes conditions, nous allons
rajouter de nombreux retours à la ligne dans notre page.

En effet, nous ne pouvons vérifier si notre ancre fonctionne bien que si notre
page comporte un scrolling (barre de défilement vertical), c’est-à-dire
seulement si celle-ci est suffisamment longue ou si on redimensionne notre
fenêtre.
Dès que l’on va cliquer sur notre lien, nous allons être redirigés à l’endroit où
se trouve notre élément comportant notre  id  dans la page.
Evidemment, on peut créer plusieurs ancres dans une même page, le tout
étant de ne jamais donner la même valeur à deux  id  différents (sinon notre
lien ne pourrait pas savoir où ramener).
Essayer ce code

Un lien pour permettre l'envoi d'un mail en HTML

On peut également utiliser l’élément  a  pour permettre à nos utilisateurs de
nous envoyer simplement un mail. Pour cela, on va placer la valeur « mailto :
» suivie de notre adresse email en valeur de l’attribut  href .

Lorsqu’un visiteur va cliquer sur notre lien, sa messagerie par défaut va

automatiquement s’ouvrir. Par exemple, si vous avez un Mac, ce sera
certainement l’application « Mail » qui va s’ouvrir.

De plus, le champ destinataire sera automatiquement rempli avec notre

adresse email.

Note : si vous travaillez sous Windows, il est possible que rien ne se passe si
vous n’avez configuré aucune messagerie par défaut.
Dès qu’un visiteur clique sur le texte de notre lien, sa messagerie par défaut
s’ouvre s’il en a configuré une :

Essayer ce code

Un lien pour télécharger un fichier

Vous pouvez encore utiliser l’élément  a  pour permettre à vos visiteurs de
télécharger certains types de fichiers, comme des fichiers PDF ou Word par
exemple.

Cependant, cela va être un peu plus compliqué que précédemment comme

nous allons le voir.

Pour faire télécharger un fichier, vous avez deux solutions.

La première solution consiste à utiliser l’attribut  download  dans

l’élément  a  grâce auquel vous pouvez théoriquement faire télécharger
n’importe quel type de fichier à vos visiteurs.

Le problème est que cet attribut a été créé très récemment et ne fonctionne
pas avec certains navigateurs majeurs, dont Safari entre autres.

La deuxième solution est de préciser tout simplement l’adresse du fichier

avec son extension sous forme de lien relatif en valeur de l’attribut  href .

L’inconvénient de cette deuxième méthode est que vous ne pouvez pas faire
télécharger un fichier HTML par exemple à vos visiteurs car le fichier va être
ouvert et donc interprété par le navigateur si ceux-ci cliquent directement sur
votre lien.

Voici cependant un exemple utilisant la deuxième méthode ci-dessous. Ici,

nous voulons faire télécharger le fichier « cours.pdf » à nos visiteurs qui se
situe dans le même dossier que notre fichier HTML à partir duquel nous
créons le lien.
Lorsqu’un utilisateur clique sur le lien, le fichier « cours.pdf » s’ouvre et
l’utilisateur peut alors le télécharger.

INSERER DES IMAGES EN

HTML

Les différents formats d’image

Comme vous le savez certainement, vous pouvez enregistrer vos images sous
différents formats. Les formats les plus utilisés sont :

 Le JPG ou JPEG ;
  Le PNG ;

 Le GIF ;

 Le BITMAP.

Chaque format possède ses propres spécificités et il faut donc faire bien
attention au choix du format lorsqu’on enregistre une image.

Le format JPEG (pour Joint Photographic Expert Group), ou plus

communément JPG est un format qui permet généralement de compresser le
poids d’une image par dix tout en conservant une très bonne qualité.

Généralement, nous choisirons ce format pour enregistrer des photos.

Le PNG (Portable Network Graphic) est un format qui a été créé à l’origine
pour remplacer le format GIF. Le grand intérêt de ce format est qu’il gère la
transparence. Celui-ci a un très bon taux de compression tout en conservant
une bonne qualité d’image.

Nous utiliserons généralement ce format pour enregistrer nos images qui ne

sont pas des photographies.

Le GIF (Grahpic Interchange Format) est un vieux format d’images que je ne

recommande plus d’utiliser aujourd’hui, sauf dans le cas d’images animées.

Finalement, le BITMAP (ou BMP) est un format qui possède une très bonne
prise en charge par tous les navigateurs et éditeurs.

Cependant, la compression des images est assez mauvaise, ce qui donne au

final des images très lourdes et donc longues à charger.

Pour cette raison, je vous déconseille également d’utiliser le BITMAP pour

enregistrer vos images.

Le poids des images

Dans la partie précédente, j’ai beaucoup parlé de « poids des images ». En
effet, vous devez considérer ce facteur lors du développement de votre site
web.

Toute image possède un poids généralement exprimé de kilo-octets. Plus une

image est lourde, plus elle va demander de ressources de la part du serveur
et du navigateur pour être chargée.

En effet, lors de la mise en ligne de votre site web, vous allez louer un espace
serveur chez un hébergeur afin d’y envoyer toute l’architecture de votre site.

Le problème est que vous disposez d’un espace serveur et d'un débit limités.
Il vous faudra donc déjà faire attention à ne pas le saturer avec des images
inutilement lourdes.

Ensuite, selon la qualité de la connexion de vos utilisateurs et du navigateur

utilisé, certaines images, si elles sont trop lourdes, risquent de mettre
longtemps à s’afficher complètement.

Cela aura un effet négatif sur votre site puisque des visiteurs vont le quitter
plutôt que de patienter. Cette problématique est véritablement à considérer
aujourd’hui avec l’essor de l’Internet mobile car les connexions sont
beaucoup moins puissantes sur mobile.

Pour conserver des poids d’images minimaux tout en vous assurant des
images d’une qualité convenable, pensez donc bien à les enregistrer au bon
format et également à les recadrer à la bonne taille avant de les envoyer sur
votre serveur.

Ainsi, elles consommeront moins de ressources lors de leur affichage. Cela

peut vous paraître un peu flou pour le moment mais, pas d’inquiétude, nous
reparlerons de ces problématiques plus en détail plus tard dans ce cours.

Insérer des images en HTML

Nous arrivons enfin au moment que vous attendiez, je suppose : l’insertion
d’images en HTML à proprement parler.

L’insertion d’images en HTML va se faire au moyen de l’élément HTML  img .

Cet élément est représenté par une balise orpheline.

Au sein de l’élément  img , nous allons obligatoirement devoir préciser deux

attributs : les attributs  src  et  alt .

L’attribut  src  (pour source) va prendre comme valeur l’adresse de l’image

(adresse relative ou absolue) tandis que l’attribut  alt  (pour alternative) va
contenir un texte alternatif décrivant l’image. Ce texte va être affiché si
l’image ne peut pas l’être pour une raison ou pour une autre, et est
également très utile pour les non-voyants.

Voyons maintenant comment tout cela fonctionne en pratique. On va

commencer par enregistrer une image dans le même dossier que notre page
HTML. Pour ma part, mon image s’appelle « sunset.png » et possède une
largeur et une hauteur de 150 pixels.

Une nouvelle fois, choisissez un nom d’image sans espace ni caractère

spécial. Cela évitera des problèmes potentiels.

L’attribut  src  va fonctionner de la même manière que  href . Ainsi, si vous
enregistrez votre image dans un dossier différent de votre page HTML, pensez
bien à en tenir compte dans la valeur donnée à  src .
Comme vous pouvez le voir, notre image s’affiche bien à sa taille d’origine,
c’est-à-dire 150*150 pixels pour moi.

Nous verrons plus tard comment modifier la taille d’une image mais encore
une fois, si vous le pouvez, essayez de redimensionner l’image en soi avant
de l’utiliser dans une page web. Cela consommera moins de ressources.

Comme je vous l’ai précisé, on peut aussi préciser une adresse absolue
comme valeur pour notre attribut  src .

Par exemple, si je souhaite afficher une image provenant d’un autre site,
j’utiliserai évidemment une adresse absolue.

Voici ci-dessous un exemple avec la première image que j’ai trouvé sur
Google en cherchant « Pixar Ratatouille ».
Vous pouvez essayer avec n’importe quelle image sur le web, cela
fonctionnera. Faites cependant attention à bien récupérer l’URL complète de
l’image ainsi qu’aux droits d’auteur !

Notez également qu'il est généralement déconseillé d'utiliser des images

provenant d'autres sites car si ces sites les suppriment, elles ne s'afficheront
plus non plus sur le vôtre.
VALIDATION ET
COMPATIBILITE DU CODE
HTML

Les problèmes relatifs aux navigateurs

Si vous apprenez à coder aujourd’hui, en 2015, vous pouvez vous estimer
plutôt chanceux. En effet, le web a atteint une certaine maturité et possède
désormais des règles bien définies.

Cependant, sachez que cela n’a pas toujours été le cas, loin s’en faut !

Il y a quelques années seulement de cela, le web était beaucoup plus

décousu qu’aujourd'hui et les règles n’étaient pas encore fixées.

Les différents navigateurs de l’époque se livraient une guerre sans merci et

comme il n’y avait pas encore d’autorité suffisamment puissante, ces mêmes
navigateurs implémentaient de différentes façons certains codes et utilisaient
leurs propres normes.

Ainsi, certains éléments ou attributs HTML par exemple n’étaient pas

supportés par certains navigateurs et on devait donc créer des codes
différents afin que chaque navigateur affiche le résultat voulu.

Aujourd’hui, cette époque est derrière nous. Cependant, il convient tout de

même de prendre certaines précautions : nous avons vu précédemment que
l’attribut « download » pour télécharger un fichier n’était pas pris en charge
par Safari par exemple.

Pensez donc bien à toujours vérifier que votre code fonctionne normalement
sur les navigateurs les plus utilisés par vos visiteurs.
Les problèmes viendront heureusement très souvent des vieilles versions
d’Internet Explorer (< 9) qui ont quasiment disparu depuis quelques années.

Les entités HTML

Le HTML possède des caractères réservés. Par exemple, vous ne pouvez pas
écrire les signes « < » et « > » tels quels dans vos pages web, tout
simplement car le navigateur pensera que vous venez d’ouvrir une balise
d’élément.

Pour remédier à ce problème, nous allons devoir remplacer ces caractères

réservés par des entités.

Les entités vont être des suites de caractères représentant un caractère

réservé en HTML.

Voici les trois entités à connaître :

Nom de l’entité Résultat visue

&lt; <

&gt; >

&amp; &

Vous vous rappelez également lorsque je vous ai dit qu’il n’existait pas en
HTML de possibilité simple de conserver les espaces au sein de notre code ?

Ce n’était pas tout à fait vrai. Nous allons pouvoir utiliser l’entité &nbsp (pour
« non-breaking space ») pour ajouter des espaces en HTML.

Voyons immédiatement un exemple d’utilisation de ces entités :

Essayer ce code

Tester la validité de son code

Vous devez toujours vous efforcer d’écrire un code valide. Cela évitera des
bugs potentiels et votre site sera au final mieux référencé sur les moteurs de
recherche.

Pour vérifier la validité d’un code HTML ou CSS, le w3c (World Wide Web
Consortium), c’est-à-dire l’organisme qui gère l’évolution des langages
comme le HTML et le CSS entre autres, a mis à disposition des validateurs de
code, gratuits.

Vous pouvez trouver les validateurs HTML et CSS aux adresses suivantes :

 HTML : ici

 CSS : ici
SELECTEURS ET PROPRIETES
CSS

Les sélecteurs CSS simples

Le CSS va nous permettre de mettre en page un contenu et de changer son
apparence en lui appliquant des styles.

Pour appliquer un style à un élément HTML, nous allons devoir au préalable le

« sélectionner » ou le cibler.

Un sélecteur va donc nous permettre de cibler un ou plusieurs

éléments HTML afin de leur appliquer un style particulier.

Il existe différents types de sélecteurs qu’on appelle sélecteurs « simples » ou

« complexes ». Nous allons voir les plus utilisés d’entre eux au cours des
chapitres à venir.

On appelles également les sél"ecteurs CSS simple des "sélecteurs éléments",

tout simplement car ils reprennent le nom du type d'élément HTML à cibler.

Par exemple, si l’on souhaite par exemple appliquer un style particulier à tous
les paragraphes de notre page web, nous utiliserons le sélecteur CSS  p .

Les propriétés CSS

Les propriétés vont nous permettre de choisir quel(s) aspect(s) (ou "styles")
d’un élément HTML on souhaite modifier.

Par exemple, nous allons pouvoir modifier la couleur d’un texte et lui
appliquer la couleur que l’on souhaite grâce à la propriété  color  (« couleur »,
en français).

Une propriété va être accompagnée d’une ou plusieurs valeurs qui vont

définir le comportement de cette propriété.

Par exemple, la propriété  color  peut prendre le nom d’une couleur (en
anglais). Si l’on donne la valeur « red » (rouge) à notre propriété  color , les
textes au sein des éléments HTML auxquels on applique cette propriété
s’afficheront en rouge.

Sélecteurs, propriétés et valeurs en pratique

Prenons immédiatement un premier exemple ensemble, afin d’illustrer ce que
nous venons de dire et de bien voir comment le CSS fonctionne.

Dans l’exemple ci-dessus, nous utilisons le sélecteur CSS simple  p  qui va

cibler tous les paragraphes de notre page HTML.

Ensuite, vous remarquez que nous utilisons deux propriétés  color  (couleur)
et  font-size  (taille de la police d'écriture) pour modifier nos paragraphes.

Nos paragraphes vont dorénavant s’afficher en bleu (blue) et notre texte va

avoir une taille égale à 14 pixels (14px).

Profitez-en pour déjà noter la syntaxe du CSS et apprendre un peu de

vocabulaire : on appelle le couple « propriété : valeur » une déclaration en
CSS.
Chaque déclaration doit être séparée d’une autre par un point virgule (que
vous pouvez observer en fin de ligne dans le code ci-dessus).

On place toutes les déclarations relatives à un sélecteur à l’intérieur d’un

couple d’accolades. Cela permet au CSS de savoir à quel sélecteur il doit
appliquer les styles correspondants.

Vous pouvez d’ores-et-déjà essayer un premier code CSS si vous le souhaitez

ci-dessous. Nous allons progressivement expliquer comment cela fonctionne.

Essayer ce code

OÙ ECRIRE LE CODE CSS ?

Premières explications
Lorsque l’on code, vous devez bien vous dire que rien n’est « magique » : tout
le code que vous écrirez dans votre vie reposera sur des règles et des
mécanismes. Les connaître vous permettra de beaucoup mieux comprendre
ce que vous faîtes et comment faire telle ou telle chose.

Comme nous l’avons vu dans la partie précédente, on va utiliser des

sélecteurs en CSS afin d’appliquer des styles, c’est-à-dire afin de modifier
l’apparence d’éléments HTML.

Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à
notre code HTML afin que les éléments de nos pages HTML tiennent bien
compte des styles qu’on a voulu leur appliquer en CSS.

Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits
différents. Chaque méthode va présenter des avantages et des inconvénients
selon une situation donnée.
Ecrire le CSS dans un élément HTML style
La première façon d’écrire du code CSS va être à l’intérieur même de notre
page HTML, au sein d’un élément  style .

De cette façon, le code CSS ne s’appliquera qu’à la page HTML dans laquelle
il a été écrit.

Cette première méthode d’écriture du CSS n’est pas recommandée, pour des
raisons de maintenance et d’organisation du code en général.

Nous la voyons dans ce cours à titre d’exemple, afin que vous sachiez
l’identifier si un jour vous voyez du code CSS écrit de cette façon dans un
fichier.

L’élément  style  sera en général placé en haut de notre page HTML, à

l’intérieur même de l’élément  head .
Ici, je commence donc par créer un élément  style  que je place dans
l’élément  head  de ma page HTML. Ensuite, j’écris mon CSS à l’intérieur de cet
élément  style .

Je commence par appliquer une couleur de fond orange à mon

élément  body  (c’est-à-dire à toute la partie visible de ma page) avec la
propriété CSS  background-color  en le ciblant avec le sélecteur CSS  body .

Ensuite, je change la couleur et la taille du contenu de tous les éléments  p  de

ma page HTML. Mes paragraphes auront désormais une taille égale à 16
pixels et s’afficheront en bleu.

Essayer ce code

Ecrire le CSS dans la balise ouvrante des

éléments HTML
Nous pouvons également écrire notre code CSS à l’intérieur de la balise
ouvrante de nos éléments HTML.

Pour faire cela, nous utiliserons cette fois-ci un attribut  style  (à ne pas
confondre avec l’élément  style ). Cet attribut va prendre comme valeur les
différentes déclarations CSS relatives à l’élément.

Avec cette seconde méthode, les styles CSS ne s’appliqueront qu’à l’élément
au sein duquel est écrit le CSS.
Cette méthode d’écriture du CSS, bien qu’elle puisse parfois être pratique,
n’est également pas recommandée et est à éviter tant que possible.

Comme vous pouvez le voir ci-dessus, seul notre premier paragraphe a été
modifié cette fois-ci. C’est normal puisqu’aucun style CSS n’a été attribué à
notre deuxième paragraphe.

Essayer ce code

Ecrire le CSS dans un fichier CSS séparé

Finalement, nous pouvons écrire notre code CSS dans un fichier séparé
portant l’extension « .css ». C’est la méthode recommandée, qui sera utilisée
autant que possible.
Cette méthode comporte de nombreux avantages, notamment une meilleure
maintenabilité du code grâce à la séparation des différents langages, ainsi
qu’une meilleure lisibilité.

Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir

appliquer des styles à plusieurs pages HTML en même temps, d'un seul coup.

En effet, en utilisant l'une des deux premières méthodes, nous aurions été
obligés de réécrire tout notre code CSS pour chaque nouvelle page HTML
composant notre site.

Ici, nous allons pouvoir lier notre fichier CSS à autant de fichiers HTML que
nous le voulons. Ainsi, lorsque nous voudrons modifier, par exemple, la
couleur de tous les paragraphes, nous n’aurons à le faire qu’une fois pour
toutes.

Nous allons donc commencer par créer un fichier CSS qu’on va

appeler  styles.css . Nous allons enregistrer ce fichier et le placer dans le
même dossier que notre page HTML pour plus de simplicité.

Nous travaillons donc dorénavant avec deux fichiers : un fichier que j’ai
appelé  cours.html  et notre fichier  styles.css .

Nous allons maintenant finalement devoir lier notre fichier CSS à notre fichier
HTML. Pour cela, nous allons utiliser un nouvel élément HTML :
l’élément  link  (« lien », en français).
Cet élément va avoir besoin de deux attributs :  rel , qui va préciser le type de
fichier (dans notre cas, ce sera « stylesheet » pour feuille de style) et un
attribut  href  qui va indiquer l’adresse relative du fichier CSS.

On va placer l’élément  link  dans l’élément  head  de notre fichier HTML. Cet
élément prend la forme d’une balise orpheline.

Nos deux fichiers sont maintenant liés et les styles CSS vont bien être
appliqués aux éléments de notre page HTML.

A noter : cette méthode correspond plus ou moins à écrire le code dans

l’onglet « CSS » séparé du site Jsbin.com. Cependant, sur ce site, nous
n’avons pas besoin de lier nos fichiers entre eux car le site le fait
automatiquement. Vous pouvez constater tout cela en cliquant sur le lien
essayer ci-dessous.
COMMENTAIRES ET
INDENTATION EN CSS

Les commentaires, le retour

Tout comme nous avons vu qu’on pouvait écrire des commentaires en HTML,
nous allons également pouvoir commenter notre code CSS.

Les commentaires n’influent une nouvelle fois en rien sur le code et ne sont
pas visibles par les utilisateurs.

Commenter le code CSS n’est pas une option : cela va très vite devenir
indispensable car vous allez vous rendre compte que les fichiers CSS
s’allongent très très vite.

Il est donc essentiel de bien organiser et de bien commenter son code CSS
afin de ne pas faire d’erreur en appliquant par exemple deux styles différents
à un même élément.

La syntaxe des commentaires en CSS est totalement différente de celle des

commentaires en HTML.

Nous écrirons de la même manière un commentaire mono-ligne ou multi-

lignes en CSS.
Dans l’exemple ci-dessus, notez que les étoiles en début de ligne pour mon
commentaire multi-lignes ne sont absolument pas nécessaires (à part pour la
première ligne, évidemment) : ce n’est que de la décoration afin de bien voir
que l’on commente.

Vous pouvez également remarquer une utilisation intéressante des

commentaires et qui est très commune en CSS : le fait de commenter une
déclaration CSS.

En effet, vous voudrez parfois supprimer momentanément une déclaration

CSS, pour effectuer des tests par exemple. Plutôt que de l’effacer
complètement, vous pouvez la commenter.

Ainsi, la déclaration CSS ne sera plus prise en compte. Vous n’aurez ensuite
plus qu’à enlever le commentaire pour la « réactiver ».

L’indentation en CSS
Indenter en CSS est également très important afin de conserver le plus de
clarté possible dans son code et de paraître professionnel si un jour vous
devez le distribuer.

En terme de règles, nous indenterons en général d’une tabulation les

différentes déclarations concernant un sélecteur donné.
Pour plus de lisibilité, nous retournerons également à la ligne après chaque
déclaration. Notez que cela augmentera de façon très minime le temps
d’exécution du code et donc le temps d’affichage de la page.

Cependant, en phase de développement tout au moins, il est essentiel de

conserver un code aéré et propre. Vous pourrez toujours le compresser par la
suite ; de nombreux outils existent sur le web pour cela.

SELECTEURS CSS SIMPLES

Les sélecteurs de type élément

Comme je vous le disais précédemment, le CSS va pouvoir appliquer des
styles à du contenu écrit en HTML grâce à des sélecteurs qui vont cibler un
contenu particulier.

Jusqu’à présent, nous n’avons vu que des sélecteurs CSS de type élément,
c’est-à-dire des sélecteurs qui ciblent un élément en se basant sur le nom de
l’élément.

Par exemple, le sélecteur  p  va cibler tous les éléments  p  (c’est-à-dire tous les
paragraphes) d’une page HTML.

De même, le sélecteur CSS  h1  va nous permettre d’appliquer des styles à

notre titre  h1  ; le sélecteur  a  va nous permettre de mettre en forme nos liens,
etc.
<="" p="" style="margin: 5px auto; padding: 3px; background-color:
rgba(168, 197, 36, 0.47); box-shadow: 0px 0px 9px; width: 694px; max-width:
694px;">

<="" p="" style="margin: 5px auto; padding: 3px; background-color:

rgba(168, 197, 36, 0.47); box-shadow: 0px 0px 9px; width: 694px; max-width:
694px;">
Essayer ce code

Ces sélecteurs de type élément sont également appelés des sélecteurs

simples en CSS, car il suffit simplement de reprendre le nom de l’élément
HTML pour lui appliquer des styles.

Appliquer un style à différents types d’éléments

Le CSS va nous permettre de regrouper différents types d’éléments (par
exemple  h1  et  p ) afin de leur appliquer le même style à tous d’un coup.

Pour faire cela, c’est très simple, il suffit de séparer les différents sélecteurs
représentant les éléments auxquels on souhaite appliquer un style CSS
particulier par une virgule.

Ici, on applique une couleur bleue à tous nos paragraphes ainsi qu'à notre
titre principal d'un coup.
Essayer ce code

Préférence et limitation des sélecteurs simples

L’utilisation de sélecteurs simples doit être favorisée tant que possible car ces
sélecteurs consomment moins de ressources que des sélecteurs plus
complexes et car ils sont plus clairs.

Le problème avec les sélecteurs de type élément est que nous allons être vite
limités : par exemple, comment appliquer une couleur différente à deux
paragraphes différents avec le sélecteur simple  p  ? Ce n’est tout simplement
pas possible, à moins de placer les déclarations CSS dans la balise ouvrante
des éléments, ce qui n'est pas recommandé.

Pour contourner ce problème, nous avons créé deux attributs

HTML  id  et  class  qui vont nous aider à cibler du contenu HTML de manière
plus précise.

LES ATTRIBUTS ID ET CLASS

Les attributs id et class et les sélecteurs associés
Les sélecteurs  #id  et  .class  vont nous permettre de cibler un élément en
particulier plutôt qu’un type d’élément.

Nous allons tout simplement écrire nos attributs  id  et / ou  class  à l’intérieur
de la balise ouvrante d’un élément HTML et leur attribuer une valeur.

Nous allons ensuite cibler cet élément en CSS en réutilisant cette même
valeur.

Comme d’habitude, les valeurs indiquées pour les attributs  id  et  class  ne
doivent contenir ni caractères spéciaux ni espaces et commencer par une
lettre.

Regardons immédiatement comment cela va fonctionner en pratique à l’aide

d’exemples.

Comme vous pouvez le voir ci-dessus, j’ai attribué un attribut  id  à mon

premier paragraphe et un attribut  class à mon deuxième paragraphe.
Vous pouvez remarquer que j’ai donné la même valeur à mes
attributs  id  et  class . Ce n’est pas un problème, car on va pouvoir les
différencier en CSS.

En effet, pour cibler un élément possédant un attribut  id , en CSS, il faudra

préciser la valeur de l’attribut précédée d’un dièse (#).

Pour cibler un élément possédant un attribut  class , en revanche, il faudra en

CSS préciser la valeur de l’attribut précédée d’un point (.).

Ainsi, on peut tout à fait donner la même valeur à un attribut  class  et  id  : il
n’y a aucun risque de confusion en CSS si vous faites bien attention à bien
faire précéder la valeur par le dièse ou le point.

Essayer ce code

Class et id : différences et utilisation avancée

Il existe une différence notable entre les deux attributs  class  et  id  :
chaque  id  doit avoir une valeur unique tandis que plusieurs
attributs  class  peuvent posséder la même valeur.

En effet, rappelez vous de nos liens de type ancre. Il s’agit bel et bien du
même attribut  id  qu’on utilise aujourd’hui, avec des finalités différentes.

Il est donc strictement interdit de donner la même valeur à deux  id  différents

dans une même page HTML. En revanche, on peut tout à fait attribuer la
même valeur à plusieurs attributs  class  appartennant à différents éléments
HTML.

Cette particularité de l’attribut  class  va notamment nous permettre

d’appliquer le même style à différents (types) d’éléments HTML d’un coup.
Essayer ce code

Nous allons également pouvoir attribuer un attribut  class  et un attribut  id  à

un même élément HTML afin de pouvoir lui appliquer un style « semi-général
» et un style particulier.
Essayer ce code

Notez qu’en cas de conflit, c’est le style du sélecteur le plus précis qui va être
appliqué. Par exemple, si vous donnez une  class  et un  id  à un même élément
HTML et que vous utilisez cette  class  et cet  id  pour définir deux couleurs
différentes, c’est la couleur de l’ id  qui va s’imposer car l'attribut  id  permet
de cibler du code HTML plus précisément que l'attribut  class .
Essayer ce code

Notez également que toutes les propriétés CSS ne s’appliquent pas à tous les
éléments HTML. Par exemple, cela n’aurait pas de sens de donner une
propriété  color  à un élément  br  puisque celui-ci ne représente pas un
contenu visible par l'utilisateur. Nous reparlerons de tout cela plus tard.

L’HERITAGE EN CSS

Qu’est-ce que l’héritage ?

L’héritage est une notion centrale et fondamentale en CSS.
La notion d’héritage signifie que tout élément HTML enfant va
hériter, « en cascades », des styles de ses parents.

C’est par ailleurs de là que vient le nom du CSS : Cascading StyleSheets, ou

Feuilles de Style en Cascades.

Par exemple, tous les éléments à l’intérieur de l’élément  body  sont des
enfants de cet élément. Si l’on applique un style à l’élément  body , ses enfants
en hériteront automatiquement.

Ici, les éléments  h1 ,  p  et  strong  ont hérité des styles de leur parent  body .
Ainsi, nos différents textes s’affichent en violet.
Priorité et ordre en CSS
Cette notion d’héritage est très puissante et très pratique en CSS.

Cependant, il convient de bien comprendre dans quel ordre et selon quelle

priorité s’appliquent les différents styles à un élément afin de ne pas faire
d’erreur.

En CSS, si il y a un conflit, c’est-à-dire si un élément reçoit plusieurs fois une

même propriété avec des valeurs différentes, le style qui va être prioritaire va
être le style le plus proche de l’élément.

Voyons immédiatement un exemple ensemble afin de bien comprendre.

Essayer ce code

Comment interpréter l’exemple ci-dessus ? Tout d’abord, notez que nous

appliquons à chaque fois la même propriété  color  à nos différents éléments
avec des valeurs différentes. Il va donc y avoir conflit.

On applique une couleur violette à notre élément  body . Ainsi, tous les
éléments contenus dans  body  vont hériter de cette couleur par défaut sauf si
une autre couleur est définie entre temps.

C’est le cas pour les éléments de type  p , auxquels on attribue une couleur
bleue. Ici, nous avons donc un premier conflit : nos paragraphes doivent-ils
hériter des styles définis avec le sélecteur  body  ou de ceux définis avec le
sélecteur  p  ?
La solution est simple : le sélecteur  p  cible de manière plus précise les
paragraphes que le sélecteur  body , et le style défini dans le sélecteur  p  est
donc plus proche de nos paragraphes que celui défini dans  body ; c'est donc
bien celui-ci qui sera appliqué.

Par défaut, tous nos paragraphes seront donc bleus, sauf si un style encore
plus proche leur est appliqué. C’est le cas pour notre paragraphe comportant
la  class="para3" .

Comme le ciblage est plus précis, les éléments possédant cet

attribut  class  vont récupérer les styles de l'attribut  class  s’il y a conflit.

Pour le texte dans l’élément  strong , celui-ci récupère le style le plus proche
de lui, c’est-à-dire celui qui lui est appliqué directement via le
sélecteur  strong .

Quel ordre par rapport à l’emplacement du CSS ?

De même, il va y avoir un ordre de priorité selon où on va écrire notre code
CSS.

Rappelez vous que l’on peut écrire le code CSS à trois endroits différents :

 Au sein de la balise ouvrante de chaque élément HTML, dans un

attribut  style  ;

 Dans un élément  style  placé dans l’élément  head  d’un fichier HTML ;

 Dans un fichier CSS séparé.

Si on écrit le CSS à différents endroits, et si il y a un conflit, le style appliqué à

l’élément directement (grâce à l’attribut  style ) sera prioritaire.

Ensuite, ce sera le style écrit dans l’élément HTML  style  qui sera retenu.

Finalement, le style écrit dans un fichier CSS séparé sera retenu en dernier.
Notez qu'on va pouvoir outrepasser cette notion d'ordre en ajoutant la
mention "!important" à la fin d'une déclaration CSS qu'on veut imposer.
LES ELEMENTS HTML DE TYPE
BLOCK ET DE TYPE INLINE

Les types d’éléments HTML

En HTML, tout élément est soit de type « block » (bloc), soit de type
« inline » (en ligne).

Par exemple, l’élément  p  est un élément de type block tandis que

l’élément  strong  est un élément de type inline.

Connaître le type d’un élément HTML va être essentiel pour créer et mettre
en forme nos pages web car les éléments de type block et inline vont se
comporter de façon radicalement différente dans une page et nous n'allons
pas forcément pouvoir leur appliquer les mêmes propriétés CSS.

Pour le moment, nous allons découvrir ensemble les différences entre les
éléments de type block et inline. Nous verrons plus en détail le côté pratique
lorsque nous étudierons le modèle des boîtes.
Les éléments de type block
Un élément de type block va toujours commencer sur une nouvelle ligne et
prendre toute la largeur disponible dans la page.

De plus, un élément de type block peut contenir d’autres éléments de type

block ainsi que des éléments de type inline.

Illustrons immédiatement visuellement cela en prenant un exemple avec un

élément  p  :

Essayer ce code
Ici, nous nous sommes contentés de créer une bordure autour de nos
éléments  p  grâce à la propriété CSS  border  (que nous étudierons plus en
détail plus tard).

Comme vous pouvez l’observer, en rajoutant des bordures autour de nos

paragraphes on s’aperçoit bien que nos éléments  p  occupent toute la largeur
disponible dans notre page et commencent par défaut sur une nouvelle ligne.

Les éléments HTML de type block les plus communs sont les suivants :

 L’élément  p  ;

 Les éléments  h1 ,  h2 , etc. ;

 Les éléments  ol  et  ul  ;

 L’élément  form  (utilisé pour créer des formulaires) ;

 L’élément  div  (que nous étudierons dans la partie suivante).

Les éléments de type inline

Au contraire des éléments de type block, les éléments de type inline ne vont
pas commencer sur une nouvelle ligne mais s’insérer dans la ligne actuelle.

Les élément de type inline prennent uniquement la largeur qui leur est
nécessaire (c’est-à-dire la largeur de leur contenu).

Par exemple, l’élément HTML  strong  est un élément de type inline.

Essayer ce code

Les éléments HTML de type inline les plus communs sont les suivants :

 Les éléments  strong  et  em  ;

 L’élément  a  ;

 L’élément  img  ;

 L’élément  span  (que nous allons étudier dans la partie suivante).

Rappel sur l’importance de la connaissance des
types d’éléments HTML
Une nouvelle fois, la connaissance du type d’un élément HTML et des
différences de comportement entre les éléments de type inline ou block va
être essentielle pour créer une page web fonctionnelle.

En effet, nous n’allons pas pouvoir agir de la même manière en CSS pour
manipuler les éléments de type block et de type inline.

Retenez donc bien cette partie !

LES ELEMENTS HTML DIV ET

SPAN

Valeur sémantique
Commençons par rappeler une nouvelle fois le rôle du HTML : structurer du
contenu et lui donner du sens.

Les éléments HTML nous servent justement à donner du sens à un contenu en

indiquant s’il doit être considéré comme un paragraphe ou un titre, comme
important ou non, etc.

A ce titre, les éléments HTML  div  et  span  sont un peu spéciaux puisqu’ils ne
possèdent aucune valeur sémantique, c’est-à-dire qu’ils ne servent pas à
donner du sens à un contenu.
Le fait que ces deux éléments n’apportent pas de sens à un contenu peut
faire penser qu’ils vont à l’encontre même du rôle du HTML. C’est à moitié
vrai, et c’est la raison pour laquelle on évitera tant que possible de s’en servir
généralement.

Toutefois, ces éléments, comme vous vous en doutez, n’ont pas été créés
pour rien. Les éléments  div  et  span vont nous servir de conteneurs et
grandement faciliter la mise en forme d’une page HTML à des niveaux
différents.

La différence entre ces deux éléments est que le premier est de type block
tandis que le second est de type inline.

Utilisation de l’élément HTML div

L’élément HTML  div  est un élément de type block. Cet élément va
souvent être utilisé comme conteneur pour plusieurs autres éléments HTML.

Ainsi, nous pourrons appliquer des styles CSS directement à notre

élément  div  afin de faciliter la mise en forme de notre page.

Il est très commun d’attribuer un attribut  class  à un élément  div  afin de

pouvoir le cibler plus facilement.

Prenons immédiatement un exemple pratique :

Essayer ce code

Ici, nous avons créé un  div  autour de nos deux paragraphes. Ensuite, nous
appliquons les styles CSS directement à notre  div .

Utilisation de l’élément HTML span

L’élément HTML  span  est un élément de type inline.

Cet élément va souvent servir de conteneur pour du contenu textuel. Cet

élément va s’avérer pratique dans certains cas où nous aimerions mettre en
forme une portion de texte à l’intérieur d’un élément sans pouvoir la cibler de
façon simple.

L’élément  span  sera souvent utilisé avec un attribut  class  afin de pouvoir le
cibler plus facilement en CSS.

Ici, nous appliquons une couleur de fond verte à notre élément  div  portant la
valeur « green », puis une couleur de fond bleue plus spécifiquement à notre
élément  span .
FONT-FAMILY ET LES GOOGLE
FONTS

La propriété CSS font-family

La propriété CSS  font-family  va nous permettre de définir la police de notre
texte.

Vous devez savoir que tous les navigateurs, selon la version possédée par vos
visiteurs, ne supportent pas tous les mêmes polices.

Pour cette raison, nous indiquerons toujours plusieurs noms de police à

utiliser en valeur de la propriété  font-family , en commençant par celle
souhaitée, et en séparant chaque valeur par une virgule.

Ainsi, le navigateur va lire les différentes polices renseignées dans  font-

family  dans l’ordre et utiliser la première qu’il supporte.

Si vous renseignez un nom de police qui contient des espaces, vous devrez le
mettre entre guillemets ou apostrophes.
Voyons un premier exemple d’utilisation de  font-family  ensemble. On va
définir une même police pour toute notre page HTML en appliquant notre
propriété directement à l'élément  body .

Essayer ce code

Dans cet exemple, j’indique trois polices d’écriture différentes en valeur de

ma propriété  font-family  : Source code pro, Verdana et sans-serif.

Lors de l’affichage, mon navigateur va d’abord tenter d’afficher la première

police. Si celui-ci ne la supporte pas, il va prendre la seconde et etc.
Les deux dernières polices que j’ai indiquées sont un peu particulières :
Verdana fait partie des « web safe fonts » (en français "famille de polices
sûres") tandis que sans-serif est ce qu’on appelle une « famille générique ».

Web safe fonts et familles génériques

Les web safe fonts sont un ensemble de polices qui sont lues par tous les
navigateurs quels qu’ils soient.

Les familles génériques regroupent un ensemble de polices ayant une allure

similaire, comme les polices de la famile serif par exemple.

En général, on indiquera toujours au moins une police appartenant aux web

safe fonts en valeur de notre propriété  font-family  ainsi qu’une famille
générique associée afin d’être certain qu’au moins une valeur puisse être lue
par le navigateur de vos visiteurs.

Voici une liste des web safe fonts les plus utilisées avec leur famille générique
associée :

Famille générique Police

Times New
Serif
Georgia

Arial,
Sans-serif
Verdana

Courier
Monospace
Lucida Console

Cursive Comic sans MS

Intégration des Google Fonts

Google a développé sa propre liste de polices d’écriture appelées les Google
Fonts.

Ces polices peuvent être utilisées sur n’importe quel site, le tout est de faire
un lien en HTML vers la police Google désirée puis de l’utiliser comme valeur
de notre propriété  font-family  en CSS.

Le grand intérêt des Google Fonts est qu’elles ne dépendent pas d’un
navigateur mais peuvent être lues par (quasiment) tous les navigateurs.

L’autre grand avantage est que vous pouvez faire votre choix parmi une très
longue liste de polices et ainsi totalement personnaliser l’écriture sur votre
site.

Pour utiliser les Google Fonts, il va tout d’abord nous falloir choisir une police
dans la liste proposée sur le site de Google dédié.

Pour ma part, je vais choisir la police « Open sans ». Cliquez sur le bouton «
quick use » pour obtenir le lien de la police.
Ensuite, il nous faut insérer notre lien dans une page HTML avec
l’élément  link  et il ne nous restera alors plus qu’à utiliser notre police en CSS
!

LES PROPRIETES CSS DE TYPE

FONT
Les propriétés de type font
Les propriétés CSS de type  font-  vont nous permettre de modifier
l’apparence de notre police d’écriture, et donc de nos textes.

Nous allons par exemple pouvoir transformer la taille, le poids ou le style de

notre police d’écriture.

Dans cette partie, nous allons voir les propriétés de type  font-  les plus
utilisées :

 font-size  pour modifier la taille de nos textes ;

 font-style  pour modifier le style de nos textes ;

 font-weight  pour modifier le poids de nos textes.

La propriété CSS font-size

La propriété CSS  font-size  va nous permettre de modifier la taille de notre
police d’écriture.

Cette propriété va accepter deux grands types de valeurs : des tailles de

polices absolues ou fixes et des tailles relatives ou variables.

Les valeurs de type absolu vont souvent être exprimées en px (pixels) ou

éventuellement en pt (points).

Une taille absolue est fixée : elle ne bougera jamais.

Les valeurs de type relatif vont être exprimées soit en % (pourcentage), en

em ou en ex.

L’intérêt des valeurs relatives est qu’elles vont s’adapter relativement à

certains paramètres : soit par rapport aux préférences enregistrées dans le
navigateur par un visiteur, soit par rapport à la taille d’un élément parent.
Ainsi, même les personnes possédant une vision faible pourront à priori lire
vos textes sans problème.

Les tailles relatives vont cependant être moins faciles à gérer dans la mise en
forme globale d’une page (car si on ne prend pas de précautions, un texte
peut dépasser d’une partie de la page par exemple).

La propriété  font-size  peut également prendre la valeur « inherit », ce qui

veut dire que l’élément ciblé héritera de la valeur de son parent. Cette valeur
fonctionne avec beaucoup de propriétés CSS et peut être utile pour annuler
un comportement par défaut ou en cas de conflit de styles. Nous y
reviendrons plus tard.

Voici quelques exemples utilisant  font-size  et ses différents types de

valeurs :
Essayer ce code

Faites bien attention : lorsque l’on code, nous utilisons les notations anglo-
saxonnes. Pensez donc bien à utiliser un point pour les chiffres décimaux à la
place de notre virgule.

La propriété CSS font-style

La propriété CSS  font-style  va nous permettre de forcer le style de notre
police.

Nous allons par exemple pouvoir mettre nos textes en italique.

La propriété font-style accepte quatre valeurs différentes :

  normal (par défaut) ;

 italic (italique) ;

 oblique (penché) ;

 inherit (l’élément ciblé hérite du style de son élément parent).

Essayer ce code
Les valeurs italic et oblique produisent souvent un résultat très similaire.
Sachez pour votre propre culture que toutes les polices ne supportent pas
l’état italique (certaines n’ont pas été conçues pour pouvoir être mises en
italique). Dans ces cas là, la valeur oblique va forcer l’inclinaison de la police
en question.

La propriété CSS font-weight

La propriété CSS  font-weight  va nous permettre de définir le poids d’une
police, c’est-à-dire son épaisseur.

Cette propriété peut prendre différentes valeurs :

 normal (valeur par défaut) ;

 lighter (la police sera plus fine) ;

 bold (la police sera plus épaisse) ;

 bolder (la police sera très épaisse) ;

 une centaine entre 100 (police très fine) et 900 (police très épaisse).
400 correspond à la valeur « normal » et 700 à « bold » ;

 inherit (l’élément hérite du style de son parent) ;

 initial (définit la propriété sur sa valeur d’origine).

Essayer ce code

Une nouvelle fois, faites bien attention : certaines polices ne supportent pas
certains poids et donc ne supportent pas certaines valeurs.
COULEUR ET OPACITE D’UN
TEXTE EN CSS

La couleur en CSS
Nous allons changer la couleur d’un texte avec la propriété  color , que nous
avons déjà vue auparavant dans ce cours.

Jusqu’à présent, nous n’avons donné que des noms de couleurs (en anglais)
comme valeurs à cette propriété.

Cependant,  color  accepte différents types de valeurs :

 Un nom de couleur (red, blue, etc.) ;

 Une valeur hexadécimale (#AA8811, etc.) ;

 Une valeur RGB ou RGBa.

Nous allons voir ce que signifie et comment utiliser chaque type de valeurs.

Les noms de couleurs

La façon la plus simple de changer la couleur d’un texte est de donner le nom
d’une couleur (en anglais) en valeur de la propriété  color .

Le problème avec cette manière de procéder est que nous sommes très
limités dans le choix de nos couleurs.

En effet, bien que les versions récentes des grands navigateurs supportent
jusqu’à 160 couleurs et nuances différentes (ce qui est déjà peu), il n’y a que
16 qui soient réellement, universellement supportées.
Pour information, vous pouvez trouver ci-dessous ces 16 noms de couleurs
avec leur équivalent en notation hexadécimale (que nous allons étudier juste
après).

Comme je vous l’ai dit, il est très simple de modifier la couleur d’un texte en
indiquant le nom d’une couleur :
Essayer ce code

Les valeurs hexadécimales

Le mot « hexadécimal » signifie « qui fonctionne en base 16 ». Généralement,
dans la vie de tous les jours, nous comptons en base 10 : dès que nous
arrivons à 10, nous avons une première dizaine et nous recommençons avec
les unités à partir de 0 : 10, 11, 12, etc.

Le système hexadécimal va lui compter non pas par dizaines mais par
seizaines. Les « unités » de 10 à 15 vont être représentées par les lettres A,
B, C, D, E et F.

Par exemple, l’équivalent de « 12 » en base hexadécimale est « 0C ».

Dès qu’on arrive à 16, on a un première seizaine et un recommence avec les

unités à partir de zéro, tout comme on le ferait avec les dizaines.

Voyez plutôt le tableau suivant afin de bien comprendre comment ça

fonctionne :

Equivalent base 10 Equivalent base 1

00 00

01 01

02 02

03 03

04 04

05 05

06 06

07 07
 08 08

09 09

10 0A

11 0B

12 0C

13 0D

14 0E

15 0F

16 10

17 11

32 20

42 2A

Comme vous pouvez le voir, c’est juste une autre façon de compter à laquelle
nous ne sommes pas habitués. Ne vous formalisez pas trop là dessus.

Si je vous parle de tout cela, c’est parce que la propriété CSS  color  va
accepter justement des valeurs hexadécimales qui vont représenter une
couleur.

Le grand intérêt de ces valeurs est que nous allons cette fois-ci pouvoir
choisir parmi 16 millions de nuances de couleurs !
Pour construire une valeur hexadécimale pour la propriété  color , vous devez
tout d’abord commencer par un dièse (#) afin de dire à la propriété que vous
allez utiliser une valeur hexadécimale.

Ensuite, vous allez devoir indiquer trois suites de valeurs représentant

respectivement les intensités de rouge, de vert et de bleu dont va être
composée votre couleur.

Chacune de ces trois intensités va devoir être comprise entre 0 et 255 en

base 10, c’est-à-dire entre 00 et FF en notation hexadécimale.

Si vous êtes un peu perdu à ce stade, pas de panique, ne lâchez pas : nous
allons voir différents exemples afin que vous compreniez plus facilement.

Regardez plutôt les couleurs suivantes. La notation correspond à la valeur

hexadécimale de chaque couleur.

Notre première couleur est un rouge pur. Comme vous pouvez le voir, la
notation hexadécimale qui a permis de la créer contient une intensité
maximale de rouge (les deux premiers chiffres : FF), une intensité minimale
de vert (les deux chiffres du milieu : 00) et une intensité également minimale
de bleu (les deux derniers chiffres : 00).

Notre deuxième couleur est un jaune pur. On l’obtient en mixant une intensité
maximale de rouge (les deux premiers chiffre : FF), une intensité maximale
de vert (les deux chiffres du milieu : FF) et une intensité minimale de bleu (les
deux derniers chiffres : 00).

De même, on obtient les couleurs « lime » (vert pur), « aqua » (vert-bleu) et «

blue » (bleu pur) en réglant différemment les intensités de chacune de nos
trois couleurs de base.
Vous devez bien retenir surtout que l’on crée une couleur en utilisant une
valeur hexadécimale en mixant trois couleurs de base qui sont le rouge, le
vert et le bleu avec des intensités différentes.

Comme je vous l’ai dit précédemment, on peut choisir l’intensité de chaque

couleur de base entre 00 et FF, c’est-à-dire en base 10 entre 0 et 255. Ainsi,
nous pouvons créer 255 * 255 * 255 couleurs différentes, c’est-à-dire plus de
16 millions !

Si vous comprenez bien ce principe de mélange d’intensité, vous pourrez

créer simplement n’importe quelle couleur. Pour créer du orange, par
exemple, vous savez que la bonne notation va se situer entre #FF0000 (rouge
pur) et #FFFF00 (jaune pur).

Vous pouvez alors tenter quelque chose comme #FF8800 par exemple, et
vous obtiendrez à coup sûr une nuance d’orange. Vous n’aurez ensuite plus
qu’à affiner les intensités jusqu’à arriver à la couleur voulue.

Notez que la couleur noire correspond à une intensité minimale de rouge, vert
et bleu (donc #000000) tandis que la couleur blanche correspond à une
intensité maximale de rouge, vert et bleu (donc #FFFFFF).

Notez également que lorsque chacune de vos intensités possède le même

chiffre des seizaines et des unités, vous pouvez ne préciser qu’un chiffre. Par
exemple, écrire #FFFFFF ou plus simplement #FFF revient au même, tout
comme écrire #AA8800 et #A80.
Essayer ce code
Les valeurs RGB
RGB signifie « Red Green Blue » (rouge, vert, bleu). Ce type de valeur utilise
le même système de nuances que les valeurs hexadécimales, à part que
cette fois-ci nous allons de nouveau compter « normalement ».

Pour créer une couleur RGB, nous allons à nouveau devoir indiquer trois
intensités de rouge, de vert et de bleu qui vont être mixées pour créer une
couleur. La différence est que cette fois-ci nous indiquons bien l’intensité
entre 0 et 255, et non pas entre 00 et FF.

Voici comment on va créer nos couleurs en utilisant les valeurs de type RGB :
Essayer ce code

Le grand intérêt des valeurs de type RGB, en plus de la création possible de

plus de 16 millions de couleurs différentes, est que cette notation va
également nous permettre de gérer l’opacité de nos textes.

L’opacité des textes

Il y a deux manières de gérer l’opacité (le fait d’être plus ou moins
transparent) des textes.

La première est en utilisant la propriété CSS  opacity . Cette propriété va

prendre une valeur entre 0 (texte totalement transparent) et 1 (texte
totalement opaque).
La deuxième façon est d’indiquer une quatrième valeur définissant l’opacité
dans nos notations RGB. Dans ce cas là, la notation devient RGBa.

Cette quatrième valeur, tout comme pour  opacity , doit être comprise entre 0
(texte transparent) et 1 (texte opaque).

Voyons immédiatement en pratique comment tout cela fonctionne.

LES PROPRIETES CSS DE TYPE
TEXT
Les propriétés CSS de type « text- »
Les propriétés CSS de type  text-  vont nous permettre de changer la mise en
forme de nos textes et leur apparence.

A la différence des propriétés de type  font- , les propriétés de type  text-  ne
sont pas dépendantes de la police utilisée.

Dans cette partie, nous allons étudier les propriétés CSS de

type  text-  suivantes :

 La propriété  text-align  (gère l'alignement) ;

 La propriété  text-transform  (gère la mise en majuscules / minuscules) ;

 La propriété  text-decoration  (gère la décoration) ;

 La propriété  text-indent  (gère l'indentation) ;

 La propriété  text-shadow  (gère les ombres).

La propriété CSS text-align

La propriété CSS  text-align  va nous permettre de définir l’alignement de
notre texte.

Nous pouvons choisir l’alignement de notre texte parmi cinq valeurs :

 Left : Le texte sera aligné à gauche (par défaut) ;

 Right : Le texte sera aligné à droite ;

 Center : Le texte est centré ;

 Justify : Le texte est justifié ;

 Inherit : Hérite de la valeur de l’élément parent.

Notez que le texte est aligné par rapport aux bords de son élément parent par
défaut. Nous verrons cela plus en détail lorsque nous aborderons le modèle
des boîtes.

Comme d’habitude, nous allons illustrer l’utilisation de cette nouvelle

propriété par des exemples.
Essayer ce code

La propriété CSS text-transform

La propriété CSS  text-transform  va nous permettre de transformer un texte
ou une partie d’un texte en majuscules ou en minuscules.

Cette propriété nous permet de choisir parmi cinq valeurs :

 Lowercase : Met tout le texte en minuscules ;

 Uppercase : Met tout le texte en majuscules ;

 Capitalize : Met la première lettre de chaque mot en majuscule ;

 Inherit : Hérite de la valeur de l’élément parent ;

 None : Pas de transformation du texte. Utile pour annuler une

transformation par défaut donnée par héritage.
Essayer ce code

La propriété CSS text-decoration

La propriété CSS  text-decoration  va nous permettre d’ajouter ou d’enlever
des décorations à nos textes.

Cette propriété accepte six valeurs différentes :

 Underline : Le texte sera souligné ;

 Overline : Une ligne apparaît au dessus du texte ;

 Line-through : Le texte sera barré ;

 Inherit : Hérite de la valeur de l’élément parent ;

 Initial : Utilise la valeur par défaut de la propriété ;

 None : Pas de décoration.

Cette propriété va par exemple nous permettre d’enlever le soulignement
automatique qui apparaît dès que l’on crée un lien.
Essayer ce code

La propriété CSS text-indent

La propriété CSS  text-indent  va nous permettre de gérer l’indentation d’un
texte. Pour rappel, indenter un texte, c’est le décaler vers la droite.

La propriété  text-indent  accepte aussi bien des valeurs absolues (en px par
exemple) que des valeurs relatives (en % ou em par exemple). On peut
également lui attribuer des valeurs négatives afin de décaler un texte vers la
gauche.
Essayer ce code

La propriété CSS text-shadow

La propriété CSS  text-shadow  va nous permettre de créer des ombres autour
de nos textes, afin que ceux-ci se détachent de l’arrière plan.

On va devoir indiquer quatre valeurs dans un ordre précis à la propriété  text-

shadow  afin que celle-ci fonctionne correctement :

1. La projection horizontale de l’ombre (en px) ;

2. La projection verticale de l’ombre (en px) ;

3. Le rayon de propagation de l’ombre (le « radius », en px) ;

4. La couleur de l’ombre. Accepte les mêmes valeurs que la

propriété  color .
Si l’on indique des valeurs positives pour les projections horizontales et
verticales de l’ombre, l'ombre sera projetée en bas à droite du texte. En
indiquant des valeurs négatives, on peut modifier l’orientation de notre
ombre.
GESTION DES ESPACES AU
SEIN D’UN TEXTE EN CSS

La propriété CSS line-height

La propriété CSS  line-height  va nous permettre de choisir la distance ou
l’écartement entre deux lignes de texte.

Cette propriété accepte des valeurs absolues ou relatives. Généralement, on

fixera la valeur de  line-height  à 1,5 fois la taille de nos textes.
Essayer ce code

Les propriétés CSS letter-spacing et word-spacing

Les propriétés CSS  letter-spacing  et  word-spacing  vont nous permettre
respectivement de définir l’espace entre les lettres et entre les mots dans un
texte.

A noter que les valeurs des espaces précisées pour  letter-spacing  et  word-
spacing  viendront s’ajouter à l’espace par défaut.

Pour enlever une partie de l’espace ou même inverser les lettres ou les mots,
on peut donner des valeurs négatives.

Voyons immédiatement comment ces deux propriétés fonctionnent ensemble

:
LE MODELE DES BOITES EN
CSS
Importance et définition
Le modèle des boîtes est un concept essentiel et central pour la mise en
page d’une page web.

Vous devez absolument comprendre le modèle des boîtes pour ensuite

pouvoir positionner les différents éléments de votre page où vous le souhaitez
et créer de belles pages web.

Le modèle des boîtes nous dit que « tout élément HTML peut être considéré
comme une boîte rectangulaire », qu’il soit de type block ou inline.

Autour de la « boîte » contenant l’élément en soi, on va pouvoir dessiner

d'autres boîtes contenant la marge intérieure (padding), les bordures et
finalement la marge extérieure de l'élément.

Grâce au modèle des boîtes, nous allons comprendre comment définir des
marges intérieures et extérieures et des bordures autour du contenu de
l’élément. Nous allons également pouvoir positionner les éléments les uns par
rapport aux autres de manière efficace.

Explication et illustrations du modèle des boîtes

Voici une première illustration théorique du modèle des boîtes :
La première boîte (la boîte centrale) représente le contenu de l’élément ou
l'élément en soi.

Ensuite, autour du contenu, la deuxième boîte contient en plus la marge

intérieure de l’élément qu'on appelle en CSS le "padding".

La troisième boîte va contenir en plus la bordure de l’élément.

Enfin, la dernière boîte va également contenir la marge extérieure de

l’élément.

Vous pouvez déjà voir ci-dessous un exemple plus pratique avec un élément
HTML  div . Ne vous préoccupez pas trop des différentes propriétés CSS
utilisées pour le moment : nous allons les voir une par une dans la suite de
cette partie.

Pour l’instant, contentez vous de bien distinguer les différentes boîtes autour
de notre élément  div .
LA LARGEUR (WIDTH) ET LA
HAUTEUR (HEIGHT) EN CSS

Types d'éléments HTML et valeurs par défaut

Tout élément HTML possède une largeur et une hauteur. La hauteur par
défaut d’un élément HTML est déterminée par son contenu. Ainsi, un
paragraphe, selon qu’il occupe une ou deux lignes, ne possèdera pas la
même hauteur par défaut.

La largeur d’un élément, en revanche, est avant tout déterminée par son type
: en effet, les éléments de type block occuperont par défaut tout l’espace
disponible. Les éléments de type inline, en revanche, n’occuperont que la
largeur nécessaire à leur contenu.

Modifier la hauteur et la largeur d’un élément

Pour modifier la hauteur par défaut d’un élément, nous allons utiliser la
propriété  height .

Cette propriété peut prendre des valeurs absolues, relatives (utiles dans le
cas d’un site responsive) ou la valeur « auto » (la hauteur sera calculée
automatiquement par le navigateur).

Pour modifier la largeur par défaut d’un élément, nous allons cette fois-ci
utiliser la propriété  width . Cette propriété peut prendre les mêmes valeurs
que la propriété  height .

Regardez par exemple l’exemple suivant où l’on définit la largeur et la

hauteur de notre élément  div . On lui donne également une couleur de fond
afin de bien voir sa taille.
Essayer ce code

Hauteur, largeur et modèle des boîtes

Pour régler efficacement la hauteur et la largeur d’un élément, il faut avant
tout bien avoir compris le modèle des boîtes.

En effet, vous devez bien vous rappeler que vous ne définissez que la hauteur
et la largeur du contenu de l’élément en soi. Les tailles des marges
intérieures, extérieures et des bordures viendront s’ajouter à cette hauteur et
à cette largeur afin de former la taille totale de l’élément.

Si vous ne faîtes pas attention, vous risquez de créer des éléments plus
grands au final que leurs éléments parents, ce qui est généralement
considéré comme une mauvaise pratique en HTML et en CSS.
Essayer ce code

Dans l’exemple ci-dessus, j’ai donné une largeur égale à 400px au pargraphe
portant l'attribut  class="para1" . Cependant, j’ai également défini des marges
intérieures de 60px de chaque côté ainsi qu’une bordure de 5px.

Mon élément  p  fait donc au final 400 + 2*60 + 2*5 = 530px de large, soit
30px de plus que le  div , son élément parent , ce qui fait qu'il déborde !

LES BORDURES EN CSS

Définir des bordures en CSS
Nous allons pouvoir définir des bordures de couleurs, épaisseurs ou types
différents autour de nos éléments HTML en CSS.

L’espace pris par la bordure va se trouver entre la marge intérieure et la

marge extérieure d’un élément HTML.

Nous pouvons définir les bordures d’un élément de différentes manières en

CSS : soit en utilisant les trois propriétés  border-style ,  border-
width  et  border-color , soit un utilisant directement la notation courte  border .

Voyons immédiatement un premier exemple illustrant cela.

Essayer ce code

Comme vous pouvez le voir, il est identique d’utiliser les trois propriétés de
type  border-  ou directement la propriété  border  avec les trois valeurs
requises.

Evidemment,  border-width  va prendre comme valeur une taille correspondant

à l'épaisseur de la bordure en pixels et  border-color  va prendre une couleur.
Notez qu’en utilisant la propriété  border  on doit préciser dans l’ordre les
valeurs associées à  border-width ,  border-style  et enfin  border-color .
Concernant  border-style , cette propriété peut prendre différentes valeurs que
nous allons voir immédiatement.

Les styles de bordures

La propriété  border-style  peut prendre huit valeurs différentes qui vont
définir l’allure générale (le style) de notre bordure.

Vous pouvez voir dans l’image ci-dessous les différentes valeurs possibles
ainsi que l’apparence donnée à la bordure.

Les valeurs les plus couramment utilisées sont solid, dotted et dashed. Faîtes
attention avec les valeurs groove, ridge, inset et outset qui restent parfois
encore mal supportées par certains navigateurs. Ces quatre dernières valeurs
sont censées ajouter un effet 3D à nos bordures.

Voici un exemple utilisant différentes valeurs pour  border-style  :

Essayer ce code

Bordures haute, droite, basse et gauche

Le CSS nous permet également de définir des bordures différentes au dessus,
à droite, en dessous et à gauche de nos éléments HTML.

Pour cela, nous allons devoir ajouter les mots

clefs  top  (haut),  right  (droit),  bottom  (bas) et  left  (gauche) dans le nom de
nos propriétés.

Regardez plutôt l’exemple suivant pour bien comprendre :

Essayer ce code

Les bordures arrondies

L’une des fonctionnalités nouvelles apportées par le CSS3 qui figure sans
conteste parmi les plus attendues par les développeurs a été la possibilité de
créer des bordures arrondies.

Nous allons pouvoir créer des bordures arrondies avec la propriété  border-
radius . Cette propriété va prendre une valeur en pixels qui va correspondre à

la valeur du radius de la bordure, et nous allons donc devoir l'utiliser de

concert avec la propriété  border .

Encore une fois, on va pouvoir définir des bordures plus ou moins arrondies
de chaque côté d’un élément HTML, cette fois-ci en utilisant les mots
clefs  top-right ,  bottom-right ,  bottom-left ,  top-left .
LES MARGES EN CSS

Marges intérieures et marges extérieures

En CSS, nous allons devoir distinguer deux types de marges : les marges
intérieures (le padding) et les marges extérieures (le margin).

Les marges intérieures se trouvent entre le contenu de l’élément et sa

bordure. Ainsi, définir une marge intérieure importante va éloigner la bordure
de l’élément de son contenu. Si on définit une couleur de fond pour notre
élément, celle-ci s’applique également dans l'espace correpondant aux
marges intérieures.

Les marges extérieures, au contraire, vont définir l’espace autour d’un

élément. Les marges extérieures se trouvent en dehors des bordures d’un
élément et servent généralement à éloigner un élément d’un autre. Comme
les marges extérieures se trouvent « en dehors » d’un élément, celles-ci ne
sont pas affectées par la couleur de fond donnée à un élément.

Les marges intérieures

Les marges intérieures d’un élément vont pouvoir être définies en CSS grâce
à la propriété  padding . Cette propriété peut prendre des valeurs absolues (px)
ou relatives (%).

Notez que l’on va pouvoir définir des marges intérieures haute, droite, basse
et gauche de tailles diverses avec  padding-top ,  padding-right ,  padding-
bottom  et  padding-left .
Essayer ce code

Les marges extérieures

Nous allons pouvoir définir des marges extérieures (« en dehors » de nos
éléments) en CSS grâce à la propriété  margin .

Cette propriété accepte en valeurs des valeurs absolues, relatives, ainsi que
les valeurs inherit ou auto. Cette dernière valeur, auto, va souvent nous être
utile pour centrer horizontalement un élément par rapport à un élément
parent.

Une nouvelle fois, nous allons pouvoir définir des marges extérieures haute,
droite, basse et gauche d’importances diverses grâce à  margin-top ,  margin-
right ,  margin-bottom  et  margin-left .
Essayer ce code

Nous pouvons également centrer horizontalement un élément par rapport à

son élément parent en utilisant la valeur auto. Pour que cela fonctionne, il
faut que deux critères soient réunis : l’élément doit être de type block et doit
posséder une largeur définie.

Regardez plutôt l’exemple ci-dessous avec notre élément  div .

Essayer ce code

Notations raccourcies padding et margin

Notez finalement que l’on peut définir des marges intérieures et extérieures
de tailles différentes pour chaque côté de nos éléments en utilisant
directement les propriétés  padding  et  margin  plutôt que  padding-top ,  padding-
right , etc.

Pour cela, nous allons tout simplement enchaîner les quatre valeurs à la suite.
La première valeur correspond à la marge haute, la seconde à la marge
droite, la troisième à la marge basse et la dernière à la marge gauche.

On peut également ne préciser que deux valeurs. Dans ce cas, la première

correspond aux marges haute et basse et la seconde aux marges droite et
gauche.
LES OMBRES DES BOITES

La propriété box-shadow
Nous allons pouvoir créer des ombres autour de nos boîtes (à l’extérieur ou à
l’intérieur des bordures) grâce à la propriété CSS  box-shadow .

Tout comme la propriété  text-shadow ,  box-shadow  va prendre quatre valeurs

différentes dans l’ordre suivant :

1. Le déplacement horizontal (vers la droite ou la gauche) de l’ombre ;

2. Le déplacement vertical (vers le bas ou le haut) de l’ombre ;

3. Le rayon de propagation de l’ombre ;

 4. La couleur de l’ombre.

Notez que l’on va également pouvoir créer des ombres intérieures (à

l’intérieur des bordures d’un élément) en rajoutant une cinquième valeur
à  box—shadow  : la valeur « inset ».

Voyons immédiatement quelques exemples d’utilisation de  box-shadow .

Essayer ce code
Nous commençons par créer une ombre de couleur orange autour de notre
élément  div . Nous appliquons une projection de 3 pixels vers la droite et 3
pixels vers le bas pour cette première ombre, ainsi qu’un rayon de
propagation de 9 pixels.

Pour l’ombre autour de notre premier paragraphe, nous avons cette fois-ci
indiqué des déplacements horizontal et vertical négatifs, ce qui a pour effet
de projeter notre ombre en haut à gauche plutôt qu’en bas à droite.

Enfin, nous utilisons la valeur inset pour l’ombre de notre second paragraphe
afin de créer une ombre intérieure plutôt qu’extérieure.

LA PROPRIETE CSS DISPLAY

La propriété CSS display

Par défaut, les éléments HTML vont s’afficher soit sous forme de « bloc », soit
« en ligne ». C’est la différence majeure entre les éléments de type block et
inline.

La propriété  display  est une propriété CSS très puissante, puisqu’elle va nous
permettre de maîtriser la façon dont un élément va être affiché, et ainsi de
gérer la mise en page de nos éléments.

La propriété  display  peut prendre de nombreuses valeurs nous permettant de

gérer précisément la façon dont chaque élément va être affiché. Nous allons
voir ensemble les valeurs les plus utilisées.
Display : inline
Lorsque l’on donne la valeur inline à la propriété  display , l’élément ciblé va
se comporter comme un élément de type inline et donc n’occuper que la
largeur qui lui est strictement nécessaire.

Par exemple, en appliquant un  display:inline  à des éléments HTML  p , ceux-ci

vont venir se coller les uns à côté des autres selon la place disponible.
Essayer ce code

Display : block
En attribuant la valeur block à la propriété  display , les éléments ciblés vont
se comporter comme des éléments HTML de type block et ainsi prendre toute
la largeur disponible.

On peut par exemple appliquer un  display:block  à un élément HTML  span  (qui
est par défaut de type inline) afin d’observer la modification du
comportement de celui-ci.
Essayer ce code

Ici, nous avons appliqué une bordure à nos deux éléments HTML  span  afin de
bien voir la modification du comportement. Ensuite, nous n’avons appliqué
un  display:block  qu’à notre deuxième élément  span . Celui-ci se comporte
alors comme un élément de type block et occupe toute la largeur disponible.

Display : inline-block
En HTML, les éléments sont soit de type inline, soit de type block. La
propriété  display  va nous permettre de créer des éléments d’un troisième
type qui est une combinaison des deux premiers grâce à sa valeur inline-
block.

La valeur inline-block va nous permettre d’emprunter certaines propriétés des

éléments de type block et certaines propriétés des éléments de type inline.
Ainsi, l’élément en soi va être de type inline tandis que ce qu’il contient («
l’intérieur de la boîte ») va être considéré comme étant de type block.

Cela va nous permettre entre autres d’afficher plusieurs éléments côte–à-côte

tout en maîtrisant précisément la taille de chacun d’entre eux.
Essayer ce code

Display : none
Finalement, la valeur none va nous permettre tout simplement de ne pas
afficher un élément. Cela peut se révéler très pratique dans de nombreux cas,
notamment lorsqu’on veut modifier l’affichage de nos pages selon l’appareil
utilisé par nos visiteurs (ordinateur de bureau, téléphone portable, tablette,
etc.).
LE POSITIONNEMENT EN CSS

La propriété CSS position

On va pouvoir gérer le positionnement de nos éléments HTML en CSS grâce à
la propriété CSS  position . Cette propriété est à nouveau une propriété très
puissante.

Grâce à  position , nous allons pouvoir positionner nos différents éléments

HTML de façon absolue ou relativement par rapport à d’autres éléments HTML
ou par rapport à leur place d’origine entre autres.

La propriété CSS  position  supporte quatre valeurs différentes que nous allons
étudier dans cette partie :

 static ;

 relative ;

 fixed ;

 absolute.

Nous allons utiliser la propriété  position  conjointement aux

propriétés  top ,  right ,  bottom  et  left  afin de positionner précisément nos
éléments.

Ces quatre propriétés vont pouvoir prendre des valeurs en pixels qui vont
indiquer un déplacement d'un élément par rapport à sa position initiale sur un
certain bord.

Position : static
La valeur static correspond au positionnement par défaut des éléments HTML
dans une page.
Tout élément positionné de façon « static » ne pourra pas être affecté par les
propriétés  top ,  right ,  bottom  et  left .
Essayer ce code

Comme vous pouvez le voir dans l’exemple ci-dessus, les

propriétés  top  et  left  n’ont aucun effet sur un élément positionné
avec  position:static .

Position : relative
Un élément positionné grâce à  position:relative  va être repositionné
relativement par rapport à sa position par défaut.

Par exemple, si on positionne un élément HTML de façon relative et qu’on lui

ajoute  left:50px , l’élément sera déplacé de 50 pixels vers la droite par
rapport à sa position par défaut.

Essayer ce code
Position : fixed
Un élément HTML possédant un positionnement « fixed » va toujours rester à
la même place, même si l’un de vos visiteurs descend ("scroll") dans la page.

Cette valeur est très utile pour conserver un élément constamment visible,
comme un menu ou un sommaire par exemple.
Essayer ce code

Ici, nous avons appliqué une  position:fixed  à notre titre et l’avons placé en
haut de notre page, à 200 pixels vers la droite. Notez que nous avons ajouté
des espaces dans notre page pour tester la propriété CSS  position .

Comme vous pouvez le voir, lorsque l’on descend dans la page, notre
titre  h1  conserve sa position.

Position : absolute
La valeur absolute de la propriété  position  va nous permettre de positionner
un élément de façon relative par rapport à son parent le plus proche auquel
on a appliqué un positionnement spécifique (relative, fixed ou absolute).

Attention : si l’élément auquel on applique  position:absolute  ne possède pas

d’élément parent positionné spécifiquement, celui-ci va se positionner par
rapport à la page entière.

Faîtes bien attention à l’utilisation de cette valeur, car si vous ne maitrisez

pas parfaitement la propriété  position vous risquez d’arriver assez vite à un
comportement non désiré, car la valeur absolute sort totalement un élément
HTML du flux normal de la page web.
Essayer ce code

Le z-index
La propriété  position  nous permet de modifier et de casser le flux normal des
éléments HTML dans la page en les positionnant où l’on souhaite dans la
page.

Parfois, en modifiant la position des éléments ou pas, certains vont pouvoir se

chevaucher. Par défaut, l’élément positionné en dernier apparaitra par dessus
les autres.

Cependant, on peut choisir quel élément va apparaître au dessus de quel

autre grâce à la propriété  z-index .

La propriété  z-index  va prendre un nombre en valeur : un nombre plus grand

positionnera un élément devant un autre ayant un  z-index  plus petit.

Prenons un exemple pour illustrer le fonctionnement de la propriété  z-index .

Ci-dessus, on s’est arrangé pour que notre titre  h1  et notre élément  div  se
chevauchent. Sans  z-index , c’est le dernier élément positionné qui sera « par
dessus » l’autre. C’est donc bien le  div  qui est devant notre  h1 .

On peut inverser l’ordre de ces éléments en indiquant un  z-index  avec une
valeur plus grande pour notre  h1 que pour notre  div  comme ceci :

Essayer ce code

La propriété  z-index  va être particulièrement utile dans le cas d’un menu
déroulant (afin que les rubriques s’affichent devant le reste de la page) ou
pour l’affichage de produits dans le cas d’un site e-commerce complexe par
exemple dans lequel de nombreux  div  et autres éléments HTML risquent de
se chevaucher.

FLOAT ET CLEAR

La propriété float
La propriété  float  va nous permettre de faire « flotter » des éléments HTML à
gauche ou à droite dans une page web.

On utilisera généralement soit la valeur right (l’élément ciblé flotte à droite),

soit left (l’élément ciblé flotte à gauche) avec cette propriété.

La propriété  float  va faire sortir un élément du flux normal de la page. Il y a

trois choses à retenir lorsque l’on utilise cette propriété :

1. Les éléments suivants un élément flottant vont se positionner à côté de

celui-ci par défaut. Nous allons pouvoir annuler ce comportement grâce
à la propriété  clear  ;

2. Les élément positionnés de façon absolue

avec  position:absolute  ignoreront la propriété  float  (ils ne pourront
pas flotter) ;

3. Un élément flottera toujours dans les limites (en terme de largeur) de

son élément parent conteneur.
Essayer ce code
Ci-dessus, on fait flotter notre élément HTML  h1  sur la gauche de la page.
Ainsi, s’ils ont la place nécessaire, les éléments suivants
l’élément  h1  viendront se positionner par défaut à côté de celui-ci.

On fait ensuite flotter notre élément  div  sur la droite. Celui-ci se positionne
donc bien par défaut sur la « même ligne » (imaginaire) que  h1  mais à droite
de notre page.

Finalement, on fait flotter notre premier paragraphe à droite dans notre  div .
Cela a pour effet de placer notre deuxième paragraphe sur la même ligne que
le premier… et sur sa gauche !

Arrêter le flottement avec clear

La propriété  clear  va nous permettre de contrôler le comportement
d’éléments flottants.

Plus précisément, cette propriété va nous permettre d’empêcher des

éléments de venir se positionner aux côtés d’éléments flottants.

Cette propriété peut prendre les valeurs suivantes :

 Left : neutralise l'effet d'un  float:left  ;

 Right : neutralise l'effet d'un  float:right  ;

 Both : neutralise l'effet d'un  float:left  et d'un  float:right  ;

Faîtes bien attention à appliquer le  clear  à l’élément qui va venir flotter par
défaut autour de l’élément flottant, pas à celui qui possède la propriété  float .
Essayer ce code
Dans l’exemple ci-dessus, nous avons fait flotter notre titre  h1  sur la gauche.
Par défaut, le  div  en dessous du  h1 dans notre code HTML va venir se placer
sur la même ligne que notre titre et donc se placer autour de notre  h1 .

Pour éviter ce comportement, on va spécifier un  clear:left  à notre

élément  div , afin de l’empêcher de venir flotter autour de notre  h1 .

Essayer ce code

Gestion du débordement (l’overflow)

Vous devez faire bien attention en utilisant la propriété  float  car celle-ci va
également sortir complètement un élément HTML du flux normal de notre
page web.
Ainsi, si un élément flottant est plus grand que son élément parent conteneur,
celui-ci va déborder de son conteneur verticalement.

Afin d’éviter ce comportement, on peut utiliser la propriété  overflow  qui va

nous permettre de cacher (ou pas) ce qui va dépasser.

Cette propriété peut prendre les valeurs suivantes :

 Visible : valeur par défaut (rien ne sera coupé) ;

 Hidden : ce qui dépasse sera coupé ;

 Scroll : coupe de qui dépasse et ajoute une barre de défilement afin

d’avoir accès à tout le contenu ;

 Auto : Laisse le navigateur décider du meilleur choix ;

 Initial et inherit.

Voyons immédiatement quelques exemples utilisant ces différentes valeurs.

Commençons déjà par constater le problème avec un  overflow:visible  par
défaut.
Observons maintenant la différence avec un  overflow:hidden . Tout ce qui
dépasse va être coupé et caché.
Essayer ce code

Finalement, regardons à nouveau le comportement avec

un  overflow:auto  (qui correspond généralement, en cas de dépassement,
à  overflow:scroll  pour des navigateurs modernes).
Essayer ce code

Comme vous pouvez le voir, dans ce dernier exemple, une barre de

défilement est apparue nous permettant d’avoir accès à tout le contenu
caché.

ALIGNEMENT EN CSS
Aligner des éléments HTML grâce au CSS
Il existe différentes méthodes en CSS nous permettant d’aligner
horizontalement ou de centrer des éléments HTML.

Dans cette dernière partie consacrée au modèle des boîtes, nous allons voir
trois manières couramment utilisées pour aligner ou centrer des éléments
HTML dans une page :

 En utilisant la propriété  margin  ;

 En utilisant la propriété  position  ;

 En utilisant la propriété  float .

Cette partie de comporte pas de nouvelles propriétés CSS. Nous allons voir ou
revoir comment exploiter à leur maximum des propriétés déjà vues
précédemment.

Centrer horizontalement avec margin

Nous avons déjà vu comment centrer horizontalement un élément HTML en
utilisant la propriété CSS  margin  avec sa valeur auto. Ceci ne devrait donc
être qu’un rappel.

On va indiquer deux valeurs à la propriété  margin  : une valeur pour les

marges haute et basse (au choix) et la valeur auto pour les marges gauche et
droite, ce qui va avoir pour effet de centrer notre élément HTML.

Attention cependant : rappelez vous que l’élément à centrer doit être de type
block et posséder une largeur définie pour pouvoir être centré correctement.
Essayer ce code
Notez bien que lorsque vous centrez un élément de type block
horizontalement dans une page, c’est bien l’élément en soi (c’est-à-dire tout
le bloc) qui est centré dans la page.

Pour centrer le contenu de l’élément dans le bloc (par exemple le texte de

notre élément  h1 ), nous devrons en plus utiliser la propriété CSS  text-align .

Aligner horizontalement un élément HTML grâce

à la propriété CSS position
On peut également aligner horizontalement un élément HTML grâce à la
propriété  position  utilisée conjointement avec les propriétés  left  et  right .

Pour cela, on va utiliser la valeur absolute de la propriété  position . Encore

une fois, cela nous avons déjà vu cela précédemment.

Lorsque vous centrez des éléments HTML de cette façon, pensez bien à
effectuer un « reset CSS », sur votre page, c’est-à-dire à définir des marges
intérieures et extérieures sur votre élément  body  égales à 0px afin d’éviter
des différences d’affichage entre navigateurs.
Une petite astuce : vous pouvez également centrer horizontalement un
élément en utilisant la propriété  position . Pour cela, il vous suffit d’attribuer
la même valeur, en pourcentage, aux propriétés  left  et  right .

Cependant, afin que cela fonctionne parfaitement, pensez cette fois à ne pas
donner de largeur définie à l’élément HTML ciblé (celui-ci va se recadrer de
lui-même selon la valeur attribuée à  left  et à  right  et la place disponible).
Essayer ce code

Aligner horizontalement en utilisant float

On peut également très simplement aligner un élément sur la gauche ou la
droite de la page en utilisant la propriété  float  et ses valeurs left et right.

Comme pour la propriété  position , la propriété  float  perturbe le flux normal

de la page. Pensez donc bien à effectuer un reset CSS des marges intérieures
et extérieures sur l’élément  body  lorsque vous l’utilisez.
LA COULEUR DE FOND EN
CSS

La propriété CSS background-color

Pour changer la couleur de fond d’un élément, nous allons utiliser la propriété
CSS  background-color .

Grâce à cette propriété, nous allons tout aussi bien pouvoir rajouter une
couleur derrière un texte ou une couleur de fond pour toute une page en
l’appliquant à l’élément  body .

La propriété CSS  background-color  va prendre une couleur en valeur. Vous

pouvez préciser cette couleur sous forme de nom, valeur hexadécimale,
valeur RGB ou RGBa.

Voyons immédiatement un exemple d’utilisation de  background-color .

Essayer ce code

Ici, on a appliqué une couleur de fond violette ("purple" en anglais) à notre

élément  body , ce qui a pour effet de changer la couleur de fond de toute la
page web en violet (puisque l’élément HTML  body  représente la partie visible
de la page web).

Ensuite, nous avons indiqué des couleurs de fond différentes pour notre titre
et notre élément  div . Rappelez vous bien qu’en CSS, en cas de conflit sur une
propriété, c’est toujours la propriété appliquée à l’élément le plus proche de
l’élément en question qui est appliquée.
IMAGES DE FOND EN CSS

Ajouter une image de fond

Pour ajouter une image de fond derrière un élément nous allons cette fois-ci
utiliser la propriété  background-image .

Cette propriété va prendre comme valeur l’adresse de l’image que l’on

souhaite afficher.

Afin d’observer en pratique comment cela fonctionne, je vous invite à placer

une image dans le même dossier que vos pages HTML et CSS. Donnez lui par
exemple le nom « mon-image.png ».

Ensuite, nous allons utiliser la propriété  background-image  afin de placer cette

image en fond de notre page web. Pensez à prendre une image d’une taille
raisonnable afin d’avoir un bon affichage pour l’exemple.
Comme vous le voyez, il ne suffit pas simplement d’indiquer le nom de
l’image mais il faut avant indiquer le mot clef « url » puis ensuite indiquer le
chemin de l’image.

Nous utilisons ici encore une fois une adresse relative, pensez donc à adapter
la valeur de l'url si votre image se trouve dans un dossier différent de votre
page de code.

Vous pouvez également utiliser une image déjà présente sur le web en fond
en précisant cette fois-ci une adresse absolue (l’url complète de l’image) en
valeur de la propriété  background-image . Cependant, cela n’est pas
recommandé car si le site web supprime ou modifie le nom ou l’emplacement
de l’image votre fond ne s’affichera plus.

On remarque également que votre image de fond, si elle est plus petite que
l’élément auquel on l’applique, va se répéter par défaut pour « remplir » tout
le fond de l’élément. Pas d’inquiétude, nous allons apprendre à changer ce
comportement immédiatement.

Redimensionner une image de fond en CSS

Comme nous l’avons vu précédemment dans ce cours, il est préférable de
redimensionner une image avant de la mettre sur son serveur, afin de gagner
en performance.

Cependant, il arrive que nous n’ayons pas le choix et que nous devions
redimensionner une image à postériori. Dans ces cas là, vous pouvez utiliser
la propriété  background-size .

Cette propriété va utiliser deux valeurs : la nouvelle largeur de votre image et

sa nouvelle hauteur.

Vous pouvez indiquer des valeurs absolues ou relatives. En cas de valeurs

relatives, faites bien attention : l’image de fond occupera un pourcentage de
la taille de l’élément auquel elle est appliquée, et non pas un pourcentage de
sa taille originale. Dans ce cas là, il vaut mieux ne préciser qu’une valeur (la
largeur de l’image).
Gérer la répétition d’une image de fond en CSS
On va pouvoir indiquer si l’on veut qu’une image de fond se répète
verticalement, horizontalement, dans les deux sens ou pas du tout grâce à la
propriété CSS  background-repeat .

On va généralement choisir parmi les quatre valeurs suivantes de  background-

repeat  :

 repeat (valeur par défaut) : l’image se répète horizontalement et

verticalement ;

 repeat-x : l’image va se répéter horizontalement seulement ;

 repeat-y : l’image va se répéter verticalement seulement ;

 no-repeat : l’image ne se répétera pas.

Voyons immédiatement deux exemples d’utilisation de cette propriété avec
notre image de fond, en commençant avec la valeur repeat-x (répétition
horizontale) :

Avec la valeur no-repeat, notre image ne se répétera plus du tout :

Fixer ou faire défiler le fond en CSS
On va pouvoir choisir de « fixer » notre image de fond ou de la faire défiler en
même temps qu’un utilisateur va descendre dans la page grâce à la propriété
CSS  background-attachment .

Cette propriété peut prendre deux valeurs différentes : fixed (pour fixer le
fond) et scroll (valeur par défaut).
Ici, l’image reste fixée en haut à gauche de l’écran même lorsqu’on descend
dans la page.

Modifier la position d’une image de fond en CSS

On va encore pouvoir modifier la position d’une image de fond en CSS grâce à
la propriété CSS  background-position .

Cette propriété est généralement utilisée avec  background-repeat:no-repeat  et

lorsque l’on souhaite utiliser plusieurs images de fond.

Nous allons apprendre à placer plusieurs images de fond par la suite, pour le
moment concentrons nous sur la position de notre image seulement.

La propriété  background-position  accepte toutes sortes de valeurs.

Généralement, nous utiliserons soit deux mots clefs (comme « top right» par
exemple, pour placer l’image en haut à droite), soit deux valeurs en pixels
pour régler l’écart de l’image par rapport au coin supérieur gauche de
l’élément auquel elle est appliquée.

Voyons à nouveau deux exemples, en commençant avec la valeur top right

par exemple :

Pour un positionnement plus précis, on peut également utiliser des valeurs en

pixels :
Ajouter plusieurs images de fond en CSS
On peut finalement ajouter plusieurs images de fond à un même élément
HTML.

Pour faire cela, il va suffire de séparer les déclarations pour chaque image par
une virgule pour chacune de nos propriétés.

Imaginons par exemple que l’on souhaite attacher deux images de fond à
notre élément  body . Je commence pour cela par placer une deuxième image
(que j’appelle « image-2.png ») dans le même dossier.

On veut que notre première image soit redimensionnée à 25% de

l’élément  body  en largeur et à 50% pour la deuxième. De même, on souhaite
avoir notre première image en haut à gauche et notre deuxième en haut à
droite. On va donc s’y prendre comme cela :
Comme vous pouvez le voir, nous avons à chaque fois précisé deux valeurs
pour chaque propriété relative au fond, en les séparant par une virgule. La
première valeur de chaque propriété sera utilisée pour la première image
déclarée, tandis que la seconde affectera la deuxième image.

Notez que si nous n’avions pas précisé de valeur pour le  background-
position  pour nos images de fond, nos deux images auraient été l’une sur

l’autre. Par défaut, c’est la première image déclarée qui se retrouve au

dessus de l’autre. Faîtes donc bien attention à l’ordre des déclarations !
CREER DES DEGRADES
LINEAIRES EN CSS

Présentation des dégradés et préfixes vendeurs

Grâce au CSS, nous allons pouvoir créer des dégradés en fond de nos
éléments HTML.

Il existe deux types de dégradés : les dégradés linéaires (de la gauche vers la
droite par exemple) et les dégradés radiaux (à partir d’un point central).

Nous allons pour le moment nous concentrer sur les dégradés linéaires et
étudierons les dégradés radiaux par la suite.
Pour créer un dégradé linéaire en CSS, nous allons utiliser la
propriété  linear-gradient .

Cependant, les dégradés sont une fonctionnalité assez récente proposée par
le CSS, ce qui signifie que la compatibilité risque de ne pas être parfaite avec
les navigateurs de certains de vos visiteurs.

Par exemple, la propriété  linear-gradient  n’est reconnue qu’à partir de la

version 26 de Chrome, ou encore à partir de Safari 6.1.

Certes il est rare, au jour d’aujourd’hui, de posséder une version de

navigateur vieille de 3 ans étant donné que les mises à jour sont désormais
quasi-automatiques pour tous les navigateurs, mais cela peut arriver.

Afin d’être parfaitement exhaustif, je dois donc vous présenter les préfixes
vendeurs.

Les préfixes vendeurs sont des mots clefs qui ont été créés afin d’optimiser
artificiellement la compatibilité de certaines propriétés CSS avec certaines
versions de navigateurs.

Les préfixes, comme leur nom l’indique, vont devoir être précisés avant
l’emploi de la propriété « qui peut poser problème ».

Quasiment chaque navigateur possède son préfixe vendeur. Voici la liste des
principaux :

 -webkit- pour Safari et Chrome ;

 -moz- pour Mozilla Firefox ;

 -ms- pour Internet Explorer ;

 -o- pour Opéra.

Nous allons donc utiliser ces préfixes avec la propriété  linear-gradient  afin
que celle-ci fonctionne normalement avec les anciennes versions des
navigateurs cités ci-dessus.
Ensuite, le navigateur de vos visiteurs « choisira » lui même quelle « version »
de la propriété utiliser.

Une petite exception cependant : nous n’aurons pas à utiliser le préfixe

d’Internet Explorer pour cette propriété tout simplement car Internet
Explorer, dans ses versions inférieures à 10, ne la reconnaît pas du tout.

La propriété CSS linear-gradient

On va donc utiliser la propriété CSS  linear-gradient  avec des préfixes
vendeurs pour créer des dégradés linéaires.

Cette propriété va prendre en valeurs obligatoires la direction du dégradé

puis le nom des couleurs composant le dégradé.

La propriété  linear-gradient  est un peu spéciale car elle va devoir elle même
être utilisée à l’intérieur de la propriété  background  (en réalité,  linear-
gradient  n'est pas tout à fait une propriété CSS mais on va la considérer en

tant que telle).

Vous pouvez ajouter autant de couleur que vous le souhaitez et devez

séparer chaque valeur par une virgule. Vous pouvez également utiliser tous
les types de valeurs vus jusqu’à présent pour les couleurs (hexadécimal, RGB,
nom de couleur, etc.).

Concernant la direction du dégradé, cela va se compliquer un peu. En effet,

vous pouvez utiliser soit des mots clefs (« bottom left » par exemple), soit des
angles.

Le problème étant que selon le préfixe vendeur utilisé, un même mot clef ou
angle ne signifie pas la même chose.

Par exemple, la syntaxe commune (c’est-à-dire sans préfixe vendeur, pour les
versions récentes des navigateurs) pour un dégradé vers la droite est « to
right ».
Cependant, avec les préfixes vendeurs –moz- et –o-, la syntaxe sera
simplement « right » tandis qu’avez –webkit- il faudra préciser… le contraire,
c’est-à-dire « left ».

Vous pouvez retenir que le préfixe –webkit- utilise le « point de départ » du

dégradé plutôt que la direction.

Pour les angles, en revanche, aucun problème : vous pouvez préciser le

même angle (en « deg », pour degré) pour tous les préfixes et pour la
propriété non préfixée.

Si vous omettez de préciser la direction du dégradé, celui-ci se fera par défaut

du haut vers le bas.

Cela doit peut être vous sembler un peu obscur pour le moment, nous allons
donc voir différents exemples ensemble.

Dans ce premier exemple, on créer un dégradé linéaire vers la droite en

utilisant les couleurs rouge, orange et bleue :
Essayer ce code

Comme vous le voyez, on utilise bien notre propriété  linear-gradient  à

l’intérieur de la propriété  background , comme « valeur » de la
propriété  background  si vous préférez. Pour le moment, ne vous compliquez
pas avec cela et acceptez le tout simplement.

Remarquez qu’on a dû réécrire la propriété  background  avec  linear-

gradient  pour chaque préfixe utilisé et une dernière fois sans préfixe, afin que

chaque navigateur puisse utiliser la version qui lui convient. Il faudra toujours
préciser la version non préfixée de  linear-gradient  en dernier.

Notez également une nouvelle fois l’utilisation de mots clefs différents afin
que tous les navigateurs comprennent bien la même direction pour notre
dégradé.

Prenons un deuxième exemple en indiquant cette fois-ci une diagonale et des

valeurs hexadécimales pour nos couleurs. Vous pouvez préciser une hauteur
pour notre élément  body , afin d'éviter que le dégradé ne se répète dans la
page.
Essayer ce code

Ici, notre dégradé se déplace du coin supérieur gauche vers le coin inférieur
droit.

On peut encore utiliser des angles comme direction de nos dégradés. A noter
que 180deg est la valeur par défaut, c’est-à-dire que cela crée un dégradé du
haut vers le bas.

La valeur 90deg va créer un dégradé de la gauche vers la droite, 270deg un

dégradé de droite vers la gauche et 0deg un dégradé du bas vers le haut.
Vous pouvez également utiliser des valeurs négatives pour vos angles.
Essayer ce code

On peut finalement créer des dégradés linéaires transparents en utilisant des

notations de type RGBa :

Essayer ce code

CREER DES DEGRADES

RADIAUX EN CSS
Présentation des dégradés radiaux
Les dégradés radiaux sont des dégradés qui vont se propager à partir d’un
point central et dans toutes les directions, à la différence des dégradés
linéaires qui se propageaient à partir d’un point vers un autre selon une
direction.

La création et l’utilisation des dégradés radiaux vont être très similaires à

celles des dégradés linéaires, à la différence qu’on va cette fois-ci utiliser la
propriété  radial-gradient .

La propriété radial-gradient
La propriété  radial-gradient  va donc nous servir à créer des dégradés
radiaux. On va une nouvelle fois l’utiliser de concert avec  background .

Cette propriété va pouvoir prendre différentes valeurs qui vont nous

permettre de contrôler l’aspect général de notre dégradé, comme la forme de
notre dégradé, la taille du point central et du dégradé, et les couleurs
composant le dégradé.

Concernant la forme du dégradé, tout d’abord, nous pouvons choisir entre

deux valeurs : ellipse pour avoir un dégradé de forme elliptique ou circle pour
avoir un cercle. La valeur par défaut est ellipse.

Pour tester ce nouveau type de dégradé, nous allons plutôt cette fois-ci créer
un  div  dédié car, si on applique un dégradé radial à notre élément  body , le
rendu risque d'être très mauvais. Nous allons donc également donner une
taille définie à ce  div .
Essayer ce code
Nous venons donc tout simplement de créer notre premier dégradé radial de
forme circulaire. Ce dégradé utilise trois couleurs : le bleu, le violet et le
rouge.

Les transitions entre couleurs

Nous pouvons indiquer à quel moment changer de couleur en ajoutant des
valeurs en pourcentage après chaque couleur, qui vont correspondre aux
pourcentages totaux du dégradé auxquels doivent se faire les transitions
entre couleurs. Notez que nous aurions pu faire de même avec les dégradés
linéaires.

Ces pourcentages vont également de fait définir la « douceur » de la

transition entre les couleurs utilisées dans nos dégradés.

Voyons un nouvel exemple avec un dégradé radial (à gauche) et un dégradé

linéaire (à droite) afin d’être certain de bien comprendre.
Essayer ce code

Définir la position et la taille d'un dégradé radial

en CSS
On va tout d’abord pouvoir définir la position et la taille de notre dégradé en
ajoutant une paire de coordonnées et un mot clef en premières valeurs
de  radial-gradient .

Les coordonnées vont pouvoir être données soit en pixels soit en

pourcentages et vont correspondre à l’emplacement du centre du dégradé
par rapport au coin supérieur gauche de l’élément qui le contient.

Concernant les mots clefs nous permettant de gérer la taille du dégradé, nous
pouvons choisir entre :

 closest-side : le dégradé va toucher le côté le plus proche de son centre

(dans le cas d’un cercle) ou les deux côtés les plus proches de son
centre (dans le cas d’une ellipse) ;

 farthest-side : le dégradé va toucher le côté le plus éloigné de son

centre (dans le cas d’un cercle) ou les deux côtés les plus éloignés de
son centre (dans le cas d’une ellipse) ;

 closest-corner : le dégradé va toucher le coin le plus proche de son

centre ;

 farthest-corner : le dégradé va toucher le coin le plus éloigné de son

centre.

Voyons immédiatement quelques exemples ensemble :

Essayer ce code

Ici, notre premier dégradé « deg1 » possède un centre situé à 20% du bord
gauche de son élément conteneur et à 40% de bord haut. De plus, on
demande au dégradé de toucher le ou les côtés les plus proches de son
centre avec le mot clef closest-side.
Remarquez bien la différence de syntaxe entre la propriété préfixée et
l’écriture non-préfixée. Dans ce dernier cas, il faut ajouter un « at » et définir
ensemble la position et la taille du dégradé.

On fait de même pour notre dégradé « deg2 » sauf que cette fois-ci on lui
demande de toucher le ou les côtés les plus éloignés de son centre.

Dans les deux cas, on crée une démarcation assez nette entre le violet et le
rouge à 90% de la taille du dégradé afin de bien observer les effets de notre
positionnement et de nos mots clefs.

CREER DES DEGRADES

RADIAUX EN CSS

Présentation des dégradés radiaux

Les dégradés radiaux sont des dégradés qui vont se propager à partir d’un
point central et dans toutes les directions, à la différence des dégradés
linéaires qui se propageaient à partir d’un point vers un autre selon une
direction.

La création et l’utilisation des dégradés radiaux vont être très similaires à

celles des dégradés linéaires, à la différence qu’on va cette fois-ci utiliser la
propriété  radial-gradient .

La propriété radial-gradient
La propriété  radial-gradient  va donc nous servir à créer des dégradés
radiaux. On va une nouvelle fois l’utiliser de concert avec  background .

Cette propriété va pouvoir prendre différentes valeurs qui vont nous

permettre de contrôler l’aspect général de notre dégradé, comme la forme de
notre dégradé, la taille du point central et du dégradé, et les couleurs
composant le dégradé.

Concernant la forme du dégradé, tout d’abord, nous pouvons choisir entre

deux valeurs : ellipse pour avoir un dégradé de forme elliptique ou circle pour
avoir un cercle. La valeur par défaut est ellipse.

Pour tester ce nouveau type de dégradé, nous allons plutôt cette fois-ci créer
un  div  dédié car, si on applique un dégradé radial à notre élément  body , le
rendu risque d'être très mauvais. Nous allons donc également donner une
taille définie à ce  div .
Essayer ce code

Nous venons donc tout simplement de créer notre premier dégradé radial de
forme circulaire. Ce dégradé utilise trois couleurs : le bleu, le violet et le
rouge.

Les transitions entre couleurs

Nous pouvons indiquer à quel moment changer de couleur en ajoutant des
valeurs en pourcentage après chaque couleur, qui vont correspondre aux
pourcentages totaux du dégradé auxquels doivent se faire les transitions
entre couleurs. Notez que nous aurions pu faire de même avec les dégradés
linéaires.

Ces pourcentages vont également de fait définir la « douceur » de la

transition entre les couleurs utilisées dans nos dégradés.

Voyons un nouvel exemple avec un dégradé radial (à gauche) et un dégradé

linéaire (à droite) afin d’être certain de bien comprendre.
Essayer ce code

Définir la position et la taille d'un dégradé radial

en CSS
On va tout d’abord pouvoir définir la position et la taille de notre dégradé en
ajoutant une paire de coordonnées et un mot clef en premières valeurs
de  radial-gradient .

Les coordonnées vont pouvoir être données soit en pixels soit en

pourcentages et vont correspondre à l’emplacement du centre du dégradé
par rapport au coin supérieur gauche de l’élément qui le contient.

Concernant les mots clefs nous permettant de gérer la taille du dégradé, nous
pouvons choisir entre :

 closest-side : le dégradé va toucher le côté le plus proche de son centre

(dans le cas d’un cercle) ou les deux côtés les plus proches de son
centre (dans le cas d’une ellipse) ;
  farthest-side : le dégradé va toucher le côté le plus éloigné de son
centre (dans le cas d’un cercle) ou les deux côtés les plus éloignés de
son centre (dans le cas d’une ellipse) ;

 closest-corner : le dégradé va toucher le coin le plus proche de son

centre ;

 farthest-corner : le dégradé va toucher le coin le plus éloigné de son

centre.

Voyons immédiatement quelques exemples ensemble :

Essayer ce code

Ici, notre premier dégradé « deg1 » possède un centre situé à 20% du bord
gauche de son élément conteneur et à 40% de bord haut. De plus, on
demande au dégradé de toucher le ou les côtés les plus proches de son
centre avec le mot clef closest-side.

Remarquez bien la différence de syntaxe entre la propriété préfixée et

l’écriture non-préfixée. Dans ce dernier cas, il faut ajouter un « at » et définir
ensemble la position et la taille du dégradé.

On fait de même pour notre dégradé « deg2 » sauf que cette fois-ci on lui
demande de toucher le ou les côtés les plus éloignés de son centre.

Dans les deux cas, on crée une démarcation assez nette entre le violet et le
rouge à 90% de la taille du dégradé afin de bien observer les effets de notre
positionnement et de nos mots clefs.
CREER UN TABLEAU SIMPLE
EN HTML

L’élément HTML table

Les tableaux en HTML doivent être utilisés pour organiser de façon logique
des données.

Pour créer un tableau simple, nous allons avoir besoin de trois éléments HTML
:

 L’élément  table  (« tableau » en français) va définir le tableau en soi ;

 L’élément  tr , pour « table row » ou « ligne de tableau » en français va

nous servir à introduire une nouvelle ligne dans notre tableau ;

 L’élément  td , pour « table data » ou « donnée de tableau » en français

va nous permettre d’ajouter des cellules dans nos lignes.

Ainsi, les tableaux en HTML vont être construits ligne par ligne, et cellule par
cellule en ajoutant des éléments  td  à l'intérieur d'éléments  tr . Des colonnes
vont se créer automatiquement dès que l’on va insérer au moins deux
éléments  td  à l’intérieur d’un élément  tr .

Ne perdons pas de temps et créons ensemble notre premier tableau en HTML.

Essayer ce code
Nous venons ci-dessus de créer notre premier tableau entièrement en HTML.
Retenez bien la syntaxe et particulièrement l’ordre d’imbrication des
éléments avec nos éléments  td  à l’intérieur de nos éléments  tr  : on va
utiliser un nouvel élément  td  dès que l'on va vouloir ajouter une cellule (et
donc une colonne) au sein d’une même ligne.

Cependant, pour l’instant, cela ne ressemble pas à l’idée que l’on se fait d’un
tableau, je vous l’accorde.

Cela est parfaitement normal puisque nous n’avons pas encore mis notre
tableau en forme grâce au CSS, en ajoutant des bordures par exemple.
Pourtant, au sens du HTML, c’est déjà un tableau.

Nous allons donc maintenant utiliser le CSS pour mettre notre tableau en
forme.

Ajouter des bordures en CSS à notre tableau

Pour ajouter des bordures à notre tableau, afin que celui-ci ressemble plus à
un tableau justement, nous allons utiliser la propriété CSS  border .

Nous allons pouvoir appliquer la propriété  border  soit à l’élément  table ,

auquel cas la bordure va se créer autour du tableau, soit aux
éléments  td  pour avoir des bordures autour de chaque cellule, soit aux deux
afin d’avoir une double bordure extérieure.

Généralement, cependant, nous n’attribuerons notre bordure qu’aux

éléments  td  comme cela :
Essayer ce code

Nous avons donc maintenant des bordures autour de chacune des cellules de
notre tableau. Il ne nous reste plus qu’à coller ces bordures entre elles afin
d’obtenir un premier rendu correct.

Nous allons pouvoir faire cela avec la propriété CSS  border-collapse , en

l’appliquant sur notre élément  table cette fois-ci et en lui donnant la valeur
collapse.

Essayer ce code
Une nouvelle fois, faîtes bien attention à bien appliquer  border-collapse  à
l’élément  table  et non pas aux éléments  td .

Notre premier tableau simple est maintenant quasiment terminé. On peut

encore ajouter un  padding  (marge intérieure) à nos éléments  td  afin d’espacer
un peu le contenu des bordures et d’avoir un meilleur rendu ou ajouter des
couleurs de fond grâce à  background-color .
Essayer ce code

Ici, on attribue des class différentes selon que la ligne soit « impaire » (1ère
ligne, 3ème ligne, etc.) ou « paire » (2ème ligne, 4ème ligne, etc.) puis on
attribue une couleur de fond à chaque type de ligne afin de créer une
alternance de couleur. Simple mais efficace !
CREER UN TABLEAU
STRUCTURE EN HTML

Créer une ligne d’en tête

Très souvent, les tableaux vont posséder une ligne d’en tête dans laquelle on
va préciser le type des données qui seront inscrites dans chaque colonne.

Par exemple, dans notre tableau créé dans la partie précédente, notre ligne
d’en-tête est celle qui contient les cellules « nom », « prénom » et « âge »,
qui indiquent bien le type de données de chaque colonne.

Pour créer une ligne d’en-tête en HTML, nous allons cette fois-ci devoir utiliser
l’élément  th , pour « table head » ou « en-tête du tableau » en français à la
place de nos éléments  td  dans notre première ligne.

On peut appliquer un style particulier en CSS à cette ligne afin de bien la

démarquer des autres. Par défaut, le texte s’affichera en gras dans les
éléments  th . Nous pouvons modifier cela en CSS également avec la
propriété  font-weight .
Essayer ce code

Ici, on s’est contenté de changer la couleur de notre texte dans notre ligne
d’en-tête ainsi que la couleur de fond de cette ligne et le poids par défaut du
texte, afin de mieux le faire ressortir.
Pensez bien surtout à appliquer vos bordures et votre padding à vos
éléments  th  aussi bien qu’à vos éléments  td !

Un tableau structuré en HTML

Si vous devez créer des tableaux assez longs, il peut être judicieux de
commencer à les structurer en les subdivisant en plusieurs parties.

On peut distinguer trois parties dans un tableau : le haut du tableau

contenant généralement la ligne d’en tête, le corps du tableau contenant les
informations de notre tableau en soi et le pied du tableau servant à calculer
des totaux ou à rappeler les informations d’en tête si votre tableau est
vraiment long.

Pour définir chaque partie d’un tableau, nous disposons d'un élément HTML
spécifique :

 thead  pour la tête du tableau ;

 tbody  pour le corps du tableau ;

 tfoot  pour le pied du tableau.

Voyons immédiatement comment utiliser ces nouveaux éléments

judicieusement.
Essayer ce code
Notez qu’en HTML on place généralement les éléments de notre tableau dans
l’ordre suivant :  thead , puis  tfoot et enfin  tbody . Ne vous inquiétez pas, cela
n’a aucune influence sur le rendu visuel : la ligne correspondante à
l’élément  tfoot  sera toujours la dernière du tableau.

Vous remarquerez qu’on a également changé le texte à l’intérieur de nos

éléments  thead  et  tfoot  afin qu'il s'affiche en majuscules grâce à la propriété
CSS  text-transform .

OPERATIONS SUR LES

TABLEAUX

Fusionner des cellules entre elles

Le HTML va nous permettre d’arranger efficacement nos tableaux et
notamment de combiner certaines cellules entre elles, ou plus exactement
d'étendre la taille d'une cellule sur plusieurs colonnes ou lignes.

Nous allons ainsi pouvoir combiner plusieurs cellules adjacentes d’une même
ligne ou d’une même colonne entre elles grâce aux attributs
HTML  colspan  et  rowspan .

Ces deux attributs vont prendre comme valeur le nombre de cellules à

combiner entre elles tout simplement.

Voyons déjà comment combiner plusieurs cellules d’une même ligne entre
elles, c’est à dire comment combiner plusieurs colonnes finalement
avec  colspan .
Pour faire cela, nous allons utiliser un tableau simple avec une mise en forme
CSS minimale.
Essayer ce code

Examinons ce code ensemble. La première chose à faire lorsque l'on souhaite

fusionner des cellules d'un tableau entre elles est de déterminer le nombre
maximal de lignes et de colonnes que comporte notre tableau à la base. Dans
notre cas, le tableau possède 3 lignes et 5 colonnes.

Notre but va donc être d'utiliser l'attribut  colspan  afin que l'ensemble des
cellules constituant chaque ligne occupent la place de cinq colonnes à chaque
fois pour uniformiser le tableau.

On commence donc par demander à la première cellule de notre ligne d'en-

tête d'occuper la place de trois colonnes avec  colspan="3" .

Ainsi, la dernière cellule de notre ligne d'en-tête devra occuper la place de

deux colonnes. On utilise donc  colspan="2" .

On réitère ensuite l'opération pour la ligne du dessous, en fusionnant les deux

cellules correspondant au deuxième et au troisième prénoms de Pierre, ainsi
que les deux cellules d'adresses e-mail.

La seule chose à laquelle vous devez faire attention ici est de bien adapter le
nombre d'éléments  th  ou  td  de chaque ligne selon le nombre de cellules
fusionnées.
Pour fusionner des cellules d’une même colonne appartenant donc à
différentes lignes, nous allons nous y prendre de la même façon mais en
utilisant cette fois-ci l’attribut HTML  rowspan .
Essayer ce code

Lorsque vous utilisez  rowspan , faites bien attention une nouvelle fois à
compter le nombre de cellules par ligne. Si une cellule occupe deux lignes,
par exemple, il faudra donc en déclarer une de moins pour la deuxième ligne.

Ajouter une légende au tableau

On va également pouvoir ajouter un titre ou une légende à notre tableau afin
d’indiquer ce que contient notre tableau.

Pour ajouter une légende, nous allons utiliser l’élément HTML  caption . Cet
élément est très simple d’utilisation, mais il faut respecter une règle : il doit
être inséré immédiatement après la balise ouvrante de l’élément  table .
LES IMAGES EN HTML ET EN
CSS

Rappel : insérer une image en HTML

Nous avons vu précédemment dans ce cours qu’il fallait utiliser
l’élément  img  pour insérer une image dans un fichier HTML.

Pour rappel, l’élément  img  est représenté par une balise orpheline et possède
deux attributs obligatoires : l'attribut  src , qui sert à indiquer le chemin (relatif
ou absolu) de l’image, et l'attribut  alt  qui sert à décrire l’image, dans le cas
où l'utilisateur ne pourrait pas la voir.

Commençons donc par placer une image dans le même dossier que notre
fichier HTML et essayons de l’afficher. Pour ma part, mon image s’appelle «
coucher-soleil.png ».
Mon image, sans surprise, s’affiche convenablement.

Maintenant, nous allons apprendre à ajuster et positionner cette image dans

notre page web grâce au CSS.

Redimensionner une image en CSS

Pour redimensionner une image en CSS, nous allons utiliser les
propriétés  width  (pour la largeur) et  height  (pour la hauteur).

Une petite astuce ici : en ne modifiant que l’un des deux paramètres de
l’image, le second va se mettre automatiquement à l’échelle.
En revanche, si vous souhaitez modifier la largeur et la hauteur, faites bien
attention à ne pas trop « casser » les proportions initiales de l’image pour un
rendu visuel optimal.

Positionner une image en CSS

L’élément  img  est un élément HTML de type inline. Cela signifie que nos
images, si elles en ont la place, vont se positionner à côté d’autres contenus
HTML.
Souvent, lorsque l’on crée un site, nous voudrons changer ce comportement
par défaut et faire en sorte que nos images se positionnent sur leur propre
ligne.
Nous avons trois manières simples de faire cela : soit en encadrant notre
image avec un élément de type block, soit en utilisant la propriété  display ,
soit en utilisant les propriétés CSS  float  et  clear .

Première méthode, on peut déjà commencer par placer nos images au sein
d'un élément  div  ou  p , tous deux de type block :
Deuxième méthode, on peut utiliser la propriété  display  :
Dernière méthode, nous pouvons encore utiliser les
propriétés  float  et  clear  :
Créer un cadre autour de nos images
Afin d’améliorer l’esthétique de nos images, nous pouvons utiliser les
propriétés vues dans la partie concernant le modèle des boîtes pour créer un
cadre autour de nos images et les faire ressortir.
Ici, nous commençons par définir une bordure grise et fine autour de notre
image grâce à la propriété CSS  border .

Ensuite, nous utilisons la propriété  padding  afin d'éloigner notre image en soi
de sa bordure, et ainsi de créer un cadre blanc autour de notre image.

Finalement, nous créons une ombre centrée et très diffuse autour de notre
image avec la propriété  box-shadow . Cela nous permet de faire ressortir notre
image et sa bordure du reste de la page.
INSERER DU CONTENU AUDIO
EN HTML

Un problème de formats
Pour insérer du contenu audio dans un document HTML, nous allons
utiliser l’élément HTML  audio .

Le problème, c’est que la prise en charge de l’audio par le HTML est assez
récente (cela date du HTML5).

Ainsi, tandis qu’il existe différents formats audio (tout comme il existe
différents formats d’image), aucun de ces formats n’est reconnu de façon
universelle par les vieilles versions des principaux navigateurs.

Il va donc nous falloir insérer plusieurs fois la même piste audio sous
différents formats afin d’être sûr d’avoir une bonne prise en charge de notre
fichier par les navigateurs principaux utilisés par vos visiteurs.

Pour information, voici ci-dessous la liste des formats audio principaux

supportés par l’élément HTML  audio  et leur prise en charge ou non par les
dernières versions des navigateurs les plus utilisés :

Navigateur MP3 O

Chrome Oui O

Safari Oui No

Firefox Oui (seulement depuis la version 21) O

Internet Explorer Oui No

 Opera Oui O

Comme vous pouvez le voir, les dernières versions des navigateurs les plus
connus supportent toutes le mp3. Cependant, je vous conseille d’utiliser au
moins deux formats pour vos visiteurs utilisant d’anciennes versions, afin
encore une fois de maximiser la compatibilité.

Utilisation de l’élément HTML audio et de ses

attributs
Pour commencer, vous allez devoir vous munir d’une piste audio. Dans l’idéal,
vous devrez enregistrer cette piste sous deux formats différents, disons mp3
et ogg.

Nous allons très simplement enregistrer cet audio dans le même dossier que
notre fichier HTML, afin encore une fois de faciliter la création de lien avec
celui-ci. Dans mon cas, les deux versions de mon fichier s’appellent «
magic.mp3 » et « magic.ogg »

L’élément  audio  possède un attribut obligatoire : l’attribut  controls  qui ne

possède qu'une valeur (que nous ne sommes donc pas strictement obligé de
préciser car celle-ci est implicite). Celui-ci va tout simplement afficher les
contrôles de base (lecture, pause, retour au début et volume) de notre piste
audio.

Afin de laisser le choix au navigateur d’utiliser le fichier qu’il souhaite, nous

allons utiliser en plus de l’élément  audio un élément  source  (représenté sous
forme de balise orpheline) avec son attribut  src .

De plus, nous allons écrire un texte dans notre élément  audio  qui ne sera
affiché que si aucun fichier audio n’a pu être lu.
Comme vous pouvez le voir, c’est rudimentaire, mais ça fonctionne.

On peut ensuite ajouter d’autres fonctionnalités à notre fichier audio en

rajoutant des attributs facultatifs à l’élément  audio  :

 L’attribut  preload  va nous permettre de charger le fichier en même

temps que la page web. Cet attribut possède trois valeurs : auto,
metadata et none. Auto va faire charger tout le fichier audio en même
temps que la page web tandis que metadata ne va charger que les
données méta du fichier audio en même temps que la page web ;

 L’attribut  autoplay  va automatiquement lancer le fichier audio dès que

celui-ci est prêt ;

 L’attribut  loop  va faire se répéter le fichier en boucle ;

  L’attribut  muted  va mettre le son du fichier sur 0.

Notez que seul l’attribut  preload  a absolument besoin d'une valeur, car tous
les autres ne possèdent qu’une valeur qui est donc utilisée par défaut.

Cependant, c'est une bonne pratique de toujours préciser une valeur pour un
attribut même lorsque celle-ci est évidente, et je vous recommande donc de
le faire.

INSERER DU CONTENU AUDIO

EN HTML

Un problème de formats
Pour insérer du contenu audio dans un document HTML, nous allons
utiliser l’élément HTML  audio .

Le problème, c’est que la prise en charge de l’audio par le HTML est assez
récente (cela date du HTML5).

Ainsi, tandis qu’il existe différents formats audio (tout comme il existe
différents formats d’image), aucun de ces formats n’est reconnu de façon
universelle par les vieilles versions des principaux navigateurs.

Il va donc nous falloir insérer plusieurs fois la même piste audio sous
différents formats afin d’être sûr d’avoir une bonne prise en charge de notre
fichier par les navigateurs principaux utilisés par vos visiteurs.

Pour information, voici ci-dessous la liste des formats audio principaux

supportés par l’élément HTML  audio  et leur prise en charge ou non par les
dernières versions des navigateurs les plus utilisés :

Navigateur MP3 O

Chrome Oui O

Safari Oui No

Firefox Oui (seulement depuis la version 21) O

Internet Explorer Oui No

Opera Oui O

Comme vous pouvez le voir, les dernières versions des navigateurs les plus
connus supportent toutes le mp3. Cependant, je vous conseille d’utiliser au
moins deux formats pour vos visiteurs utilisant d’anciennes versions, afin
encore une fois de maximiser la compatibilité.
Utilisation de l’élément HTML audio et de ses
attributs
Pour commencer, vous allez devoir vous munir d’une piste audio. Dans l’idéal,
vous devrez enregistrer cette piste sous deux formats différents, disons mp3
et ogg.

Nous allons très simplement enregistrer cet audio dans le même dossier que
notre fichier HTML, afin encore une fois de faciliter la création de lien avec
celui-ci. Dans mon cas, les deux versions de mon fichier s’appellent «
magic.mp3 » et « magic.ogg »

L’élément  audio  possède un attribut obligatoire : l’attribut  controls  qui ne

possède qu'une valeur (que nous ne sommes donc pas strictement obligé de
préciser car celle-ci est implicite). Celui-ci va tout simplement afficher les
contrôles de base (lecture, pause, retour au début et volume) de notre piste
audio.

Afin de laisser le choix au navigateur d’utiliser le fichier qu’il souhaite, nous

allons utiliser en plus de l’élément  audio un élément  source  (représenté sous
forme de balise orpheline) avec son attribut  src .

De plus, nous allons écrire un texte dans notre élément  audio  qui ne sera
affiché que si aucun fichier audio n’a pu être lu.
Comme vous pouvez le voir, c’est rudimentaire, mais ça fonctionne.

On peut ensuite ajouter d’autres fonctionnalités à notre fichier audio en

rajoutant des attributs facultatifs à l’élément  audio  :

 L’attribut  preload  va nous permettre de charger le fichier en même

temps que la page web. Cet attribut possède trois valeurs : auto,
metadata et none. Auto va faire charger tout le fichier audio en même
temps que la page web tandis que metadata ne va charger que les
données méta du fichier audio en même temps que la page web ;

 L’attribut  autoplay  va automatiquement lancer le fichier audio dès que

celui-ci est prêt ;

 L’attribut  loop  va faire se répéter le fichier en boucle ;

  L’attribut  muted  va mettre le son du fichier sur 0.

Notez que seul l’attribut  preload  a absolument besoin d'une valeur, car tous
les autres ne possèdent qu’une valeur qui est donc utilisée par défaut.

Cependant, c'est une bonne pratique de toujours préciser une valeur pour un
attribut même lorsque celle-ci est évidente, et je vous recommande donc de
le faire.

INSERER DU CONTENU VIDEO

EN HTML

Les formats vidéo

Nous avons vu dans la partie précédente le problème de la non-prise en
charge universelle d’un format audio par tous les navigateurs.

Pour la vidéo, nous allons retrouver ce problème, étant donné qu’une vidéo
est composée d’un codec audio, d’un codec vidéo et d’un conteneur
rassemblant ces deux éléments.

Une nouvelle fois, il va donc être conseillé d’utiliser différents formats vidéo
afin de s’assurer une bonne compatibilité avec les navigateurs les plus
utilisés par vos visiteurs.

Vous pouvez trouver ci-dessous le tableau des compatibilités entre les

formats vidéo les plus utilisés et les dernières versions des navigateurs les
plus utilisés.

Navigateur MP4 Og

Chrome Oui Oui

Safari Oui Non

Firefox Oui (seulement depuis la version 21) Oui

Internet Explorer Oui Non

Opera Oui Oui

L’élément video et ses attributs

L’élément  video  va s’utiliser exactement comme l’élément  audio . De plus, il
possède les mêmes attributs que ce dernier à savoir :

 Un attribut  controls  pour ajouter les contrôles de base de la vidéo

(lecture, arrêt, etc.) ;
  Un attribut  preload  pour précharger la vidéo. Cet attribut accepte trois
valeurs : auto (chargement total), metadata (chargement partiel de la
vidéo) et none (pas de chargement) ;

 Un attribut  autoplay  pour activer la lecture automatique de la vidéo ;

 Un attribut  loop  pour lire une vidéo en boucle ;

 Un attribut  muted  pour désactiver le son de la vidéo.

L’élément  video  va également posséder quelques attributs qui lui sont
propres, notamment l’attribut  poster  qui va nous permettre d’afficher une
image de fond avant que la vidéo ne soit lancée.

Voyons immédiatement un exemple d’insertion de contenu vidéo dans une

page web. Pour cela, je me suis muni de deux versions d'un même fichier
vidéo : « lever-soleil.mp4 » et « lever-soleil.ogg ».

Je vais également utiliser une image « lever-soleil.png », placée dans le

même dossier, comme image de fond. Il faut bien penser à recadrer l’image à
la taille de la vidéo avant.

Notez qu’on peut changer la taille de la vidéo sans problème en CSS en

appliquant les propriétés  height  et  width  sur l’élément  video .
Notez que l’on pourrait aller beaucoup plus loin dans la personnalisation des
options de notre lecteur vidéo, mais il nous faudrait pour cela connaître et
utiliser le langage JavaScript.

INTEGRATION ET
SEMANTIQUE : YOUTUBE,
FIGURE ET FIGCAPTION
L’alternative YouTube
Si vous ne souhaitez pas vous embêter à créer différents formats de pistes
audio ou de vidéo et à gérer le tout en HTML, vous disposez d’une autre
alternative : télécharger votre audio ou votre vidéo sur un site comme
YouTube, Dailymotion ou Vimeo puis intégrer le contenu sur votre site.

En procédant ainsi, vous êtes certain d’assurer une compatibilité maximale

avec n’importe quelle version de chaque navigateur puisque le site hébergeur
va lui-même s’occuper de créer les différentes pistes adéquates et gérer la
prise en charge.

Pour intégrer une vidéo préalablement postée sur YouTube, par exemple, il
vous suffit de vous rendre dans l’onglet « partager » de la vidéo puis de
choisir « intégrer ». Vous n’aurez alors plus qu’à copier-coller le code
d’intégration dans votre page HTML, à l’endroit voulu.
Bien évidemment, vous pouvez modifier les valeurs des attributs de l’élément
HTML  iframe  ou tout simplement les supprimer, selon comment vous
souhaitez afficher votre vidéo sur votre site.

Les éléments figure et figcaption

Les éléments  figure  et  figcaption  vont nous aider à marquer
sémantiquement du contenu média comme des images, de l’audio ou des
vidéos.
En effet, il est très difficile pour un navigateur de savoir « de quoi parle » ou «
ce que représente » votre image, votre fichier audio ou vidéo sans plus de
détail.

On va utiliser l’élément HTML  figure  pour indiquer qu’une image, une piste
audio ou vidéo n’est pas strictement décorative, mais sert à la
compréhension générale de notre page web. On n’utilisera donc pas cet
élément si nos contenus ne sont là que pour habiller la page.

On va ensuite utiliser l’élément  figcaption  à l’intérieur de  figure  pour accoler

une légende à notre contenu.
NOTATIONS LONG HAND VS
SHORT HAND

Short hand et long hand

Vous l’avez peut être remarqué, il nous est déjà arrivé durant ce cours
d’écrire une même propriété CSS de différentes façons.

En effet, en CSS, certaines propriétés peuvent être « regroupées » en une

seule qui constitue leur notation short hand.

Par exemple, pour définir une bordure, nous avons deux façons de faire : soit
on utilise les trois propriétés CSS  border-width ,  border-style  et  border-
color  (notation long hand), soit on utilise la propriété  border  (qui correspond

donc à la notation short hand) avec les valeurs des trois propriétés
précédentes.

Les notations short hand ont l’avantage d’être plus rapides à écrire, de
consommer moins de ressources et d’être également finalement plus lisibles.
Je vous encourage donc à les utiliser.

Dans la suite de cette partie, nous allons voir quelques unes des notations
short hand les plus utilisées.

La propriété CSS font

La propriété  font  est la notation short hand des propriétés CSS  font-
style ,  font-weight ,  font-size ,  line-height  et  font-family .
Essayer ce code

Comme vous pouvez le voir ci-dessus, nous devons juste donner les valeurs
des différentes propriétés dans l’ordre que je vous ai donné à  font  pour que
cette propriété fonctionne.

Faîtes bien attention à l'utilisation des notations short hand : vous devrez
toujours suivre un ordre précis d'écriture des différentes valeurs.

Notez également que l'on doit ici séparer les deux valeurs en pixels par un
slash.

Les propriétés CSS relatives au modèle des boîtes

Parmi les propriétés étudiées dans la partie « modèle des boîtes », il y a trois
notations short hand à connaître :

 Border  qui regroupe  border-width ,  border-style  et  border-color  ;

  Padding  qui est la notation short hand de  padding-top ,  padding-
right ,  padding-bottom  et  padding-left ;

 Margin  qui regroupe  margin-top ,  margin-right ,  margin-bottom  et  margin-

left .

Voyons immédiatement un exemple d’utilisation de ces propriétés ensemble.

Essayer ce code

La propriété CSS background

La dernière notation short hand que vous devez connaître correspond à la
propriété  background .

Cette propriété va regrouper les valeurs des propriétés  background-

color ,  background-image ,  background-repeat ,  background-attachment  et  backgrou
nd-position .

SELECTEURS CSS AVANCES

Les sélecteurs CSS « avancés »
Ce qui fait la grande force du CSS, c’est avant tout sa capacité à cibler
précisément du contenu HTML pour lui appliquer des styles.

Dans cette partie, nous allons découvrir ensemble de nouveaux sélecteurs

CSS dits « sélecteurs avancés ».

Grâce à eux, nous allons par exemple pouvoir sélectionner tous les éléments
d’une page HTML, sélectionner un élément par rapport à son parent ou
encore sélectionner un élément selon la valeur de son attribut.

Note : il existe de très nombreux sélecteurs avancés en CSS, nous n’allons

voir que les plus utilisés ensemble.

Le sélecteur CSS universel « * »

Le sélecteur « * » (étoile) permet de sélectionner tous les éléments HTML
d’une page d’un coup ; c’est pourquoi il est appelé sélecteur CSS universel.

Grâce à ce sélecteur, on va par exemple pouvoir appliquer une bordure et des

marges identiques à tous les éléments HTML de notre page :
Essayer ce code

Grouper les sélecteurs

Cette partie n’est qu’un rappel, car nous avons déjà souvent groupé des
sélecteurs à l’aide du symbole « , » (virgule).

Grouper les sélecteurs nous permet d’appliquer un même style à différents

éléments.
Essayer ce code

Sélectionner un élément par rapport à un autre

Le CSS va également nous permettre de sélectionner un élément
relativement à un autre.

Tout d’abord, le sélecteur « A B » (remplacez « A » et « B » par n’importe quel

élément) va nous permettre de sélectionner un élément B contenu dans un
élément A.
Par exemple, nous allons pouvoir sélectionner tous les paragraphes contenus
dans un élément  div .
Essayer ce code

Ensuite, le sélecteur « A + B » va lui nous permettre de sélectionner tous les

éléments B de même niveau et suivant immédiatement les éléments A.
Essayer ce code

Ici, seul notre dernier paragraphe possède une couleur de fond car c’est bien
le seul élément  p  de même niveau qu’un élément  div  et suivant directement
un élément  div  (les autres paragraphes sont des éléments enfants de nos
éléments  div ).

Finalement, le sélecteur « A > B » va sélectionner tous les éléments B qui

sont des éléments enfants directs de A.
Essayer ce code

Ici, seul notre élément  div class="page-container"  est un enfant direct de

l’élément  body , ce sera donc le seul à posséder une bordure. Notez bien qu’ici
l’attribut  class  ne sert à rien, je ne l’ai précisé que pour bien savoir de
quel  div  on parle dans les explications du code.

Les sélecteurs CSS d’attributs

Le CSS va encore nous permettre de sélectionner un élément HTML selon le
fait qu’il possède ou non un attribut et selon la valeur de l’attribut.

Ici encore, nous n’allons voir que les sélecteurs assez courants.

Le sélecteur « A[attribut] » (remplacez "A" par n'importe quel élément HTML

et "attribut" par le nom d'un attribut HTML), tout d’abord, va sélectionner tous
les éléments A possédant un attribut en particulier.
Essayer ce code

Le sélecteur CSS « A[attribut="valeur"] » va lui sélectionner tous les éléments

A possédant un attribut en particulier avec une valeur précise.
LES PSEUDO CLASSES CSS

Définition des pseudo classes CSS

Les pseudo classes vont nous permettre de changer le style d’un élément
HTML selon son état, c’est-à-dire de façon quasi dynamique.

Par exemple, nous allons pouvoir afficher un paragraphe en gras lorsque

l’utilisateur passe sa souris dessus ou changer la couleur d’un lien une fois
celui-ci cliqué.

Les pseudo classes sont reconnaissables au fait qu’elles commencent tous

par le symbole « : » (deux-points).

Les pseudo classes CSS :link, :visited, :hover et

:active
Les pseudo classes  :link ,  :visited ,  :hover  et  :active  vont être très souvent
utilisées sur des liens HTML. Cependant, rien ne nous empêche
d’utiliser  :hover  sur des paragraphes par exemple.

Généralement, la pseudo classe

 :link  va nous permettre de styliser un lien non visité;

 :visited  va nous permettre de styliser un lien une fois celui-ci visité.

Cependant, comme cet état a souvent été utilisé dans le passé par des
utilisateurs malveillants pour exploiter des failles, les navigateurs
modernes vont ignorer la plupart des règles données en CSS ;

 :hover  va nous permettre de changer l’aspect d’un élément lorsque vos

visiteurs poseront leur curseur dessus ;

  :active  va nous permettre de modifier l’aspect d’un lien lors du clic.

Attention : si vous utilisez plusieurs des pseudo classes ci-dessus sur un

même élément, il faut impérativement les utiliser dans l’ordre que je vous ai
donné.
Essayer ce code

Dans l’exemple ci-dessus, le curseur de notre souris se trouve sur notre

titre  h1 ; celui-ci change donc de couleur et de police. De plus, nous avons
déjà visité notre deuxième lien mais nous n’avons pas encore cliqué sur le
premier.

Les pseudo classes :first-child et :last-child

Les pseudo classes CSS  :first-child  et  :last-child  vont nous permettre
respectivement de sélectionner le premier élément et le dernier élément
enfant HTML d’un certain type par rapport à un élément parent.

Par exemple, dans mon fichier HTML ci-dessous, le paragraphe contenant le

texte « un premier paragraphe » est le premier élément enfant de mon
élément  div class="test" . Le troisième paragraphe est son dernier enfant.

De même, le paragraphe hors  div  est le dernier enfant de l’élément  body .

Essayer ce code
La pseudo classe CSS :nth-child()
La pseudo classe CSS  :nth-child()  va nous permettre de cibler certains
enfants d'un élément HTML.

Nous allons pouvoir indiquer entre les parenthèses de cette pseudo classe
soit un nombre, soit un mot clef.

Cette pseudo classe CSS n'est pas forcément la plus évidente à comprendre.
Nous allons voir son fonctionnement à travers différents exemples.
Essayer ce code

Ce que vous devez bien comprendre, lorsque vous utilisez la pseudo

classe  :nth-child() , est que vous ne devez pas faire de distinction entre les
éléments HTML dans votre comptage.

Par exemple, dans mon exemple précédent, l'élément  body  possède en tout
cinq enfants : un titre  h1 , un titre  h2 , deux éléments  p  et un élément  div .

Notre élément  div  possède à son tour trois enfants : un titre  h2  et deux
éléments  p .
Je commence par utiliser ma pseudo classe pour mettre en violet tous mes
paragraphes qui sont des enfants pairs d'un certain élément HTML, quel qu'il
soit (grâce au mot clef "even" qui signifie "pair" en anglais).

Mon premier paragraphe est le troisième enfant de l'élément  body , il ne sera

donc pas ciblé. Mon deuxième paragraphe, en revanche, est le quatrième
enfant. Il sera donc ciblé.

De même, mon troisième paragraphe est le deuxième enfant de mon

élément  div , il s'affichera donc également en violet.

Ensuite, je veux que tous mes éléments  h2  qui sont le deuxième enfant d'un
élément HTML s'affichent en vert. Ce n'est le cas que de mon premier titre  h2 .

Autres pseudo classes CSS

Il existe de nombreuses autres classes CSS, beaucoup moins utilisées que
celles présentées ci-dessous.

La majorité d’entre elles vont servir à cibler des types d’éléments présents
dans les formulaires HTML, et ne sont donc pas intéressantes à connaître
pour le moment.

LES PSEUDO ELEMENTS CSS

Présentation des pseudo éléments CSS

Les pseudo éléments CSS vont nous permettre de modifier l’apparence d’une
partie seulement d’un ou de plusieurs éléments HTML, ou encore d’ajouter du
contenu au début ou à la fin d'un certain élément HTML.

Les pseudo éléments sont reconnaissables en CSS à leur écriture : tous

commencent par « :: » (un double deux-points).

Il est possible que vous croisiez encore des pseudo éléments CSS écrits avec
seulement « : » (un deux-points). Ceci est une ancienne syntaxe, vouée à
disparaître.

Il n’existe que cinq pseudo éléments en CSS, que nous allons étudier dans
l’ordre :

 ::first-letter  va nous permettre de ne sélectionner que la première

lettre d’un texte contenu dans un élément ;

 ::first-line  va nous permettre de ne sélectionner que la première

ligne d’un texte contenu dans un élément ;

 ::selection  va nous permettre de sélectionner la partie d’un élément

sélectionnée (par un double clic) par l’utilisateur ;

 ::before  va nous permettre d’insérer du contenu au début d'un

élément HTML ;

 ::after  va nous permettre d’insérer du contenu à la fin d'un élément

HTML.

Le pseudo élément CSS ::first-letter

Le pseudo élément CSS  ::first-letter  va donc nous permettre de modifier
l’apparence de la première lettre du texte d’un élément.

On peut par exemple agrandir et changer la couleur de la première lettre de

tous nos paragraphes :
Essayer ce code

A noter que le pseudo élément  ::first-letter  ne peut être appliqué qu’à des
éléments HTML de type block.
De plus, ce pseudo élément ne supporte pas toutes les propriétés CSS mais
peut être utilisé avec les suivantes (liste non exhaustive) :

 Les propriétés liées à la police (font) ;

 Les propriétés liées à la couleur ;

 Les propriétés liées au fond (background) ;

 La propriété  border  ;

 La propriété  margin  ;

 La propriété  padding  ;

 Les propriétés  text-decoration  et  text-transform  ;

 La propriété  vertical-align  ;

 La propriété  line-height  ;

 Les propriétés  float  et  clear .

Le pseudo élément CSS ::first-line

Le pseudo élément CSS  ::first-line  va nous permettre de cibler et de
modifier le style de la première ligne de texte d’un élément.
Essayer ce code

Ce pseudo élément ne s’applique une nouvelle fois qu’aux éléments HTML de

type block.
Ce pseudo élément ne peut pas être utilisé avec toutes les propriétés CSS. Il
peut cependant être utilisé entre autres avec les propriétés suivantes :

 Les propriétés liées à la couleur ;

 Les propriétés liées au fond (background) ;

 La propriété  border  ;

 Les propriétés  letter-spacing  et  word-spacing  ;

 Les propriétés  text-decoration  et  text-transform  ;

 La propriété  vertical-align  ;

 La propriété  line-height  ;

 La propriété  clear .

Le pseudo élément CSS ::selection

Le pseudo élément CSS  ::selection  va nous permettre de cibler et de mettre
en forme la partie d’un élément actuellement sélectionnée (double cliquée ou
sélectionnée directement avec le pointeur de la souris) par un utilisateur.

Ce pseudo élément supporte les propriétés CSS  color  et  background  ainsi
que  cursor  et  outline .
Essayer ce code

Dans l'exemple précédent, évidemment, j'ai sélectionné les mots "zone

sélectionnée" avec ma souris au moment de prendre la capture d'écran.
Les pseudo éléments CSS ::before et ::after
Les pseudo éléments CSS  ::before  et  ::after  vont nous permettre
respectivement d’ajouter du contenu HTML au début et à la fin d'un certain
élément HTML.

Ces pseudo éléments ne vont peut être pas vous sembler très utile pour le
moment, mais lorsque vous aurez emmagasiné de nouvelles connaissances
en HTML, CSS et JavaScript, vous comprendrez toute la puissance de ceux-ci.

Ces pseudo éléments vont devoir être utilisés avec la propriété

CSS  content  qui va nous permettre d’ajouter toute sorte de contenu (du texte,
des images, etc.).
Essayer ce code

Dans l’exemple ci-dessus, nous avons pu ajouter du texte au début de

notre  div class="div-un"  et une image à la fin de celui-ci grâce
à  ::before  et  ::after .
LES SPRITES D’IMAGES EN
CSS

Définition des sprites et utilisation

Un sprite d’images correspond à une collection d’images rassemblées en une
seule grande image.

L’idée derrière l’utilisation de sprites est de réduire le nombre de requêtes

serveur.

En effet, en cas d’images séparées, une requête va être envoyée au serveur

pour récupérer chaque image présente dans une page web pour les afficher.
Dans le cas d’une page contenant de nombreuses images, cela peut diminuer
sensiblement la vitesse d’affichage de la page.

En utilisant des sprites, une seule requête sera envoyée au serveur et cela
optimisera les performances de votre site.

Exemple d’utilisation de sprites CSS

Imaginions que nous voulions afficher des liens ramenant vers nos pages
sociales sur notre site. Pour cela, nous allons utiliser les logos des différents
réseaux sociaux en tant que liens.

Plutôt que d’enregistrer les logos des réseaux sociaux qui nous intéressent
séparément, on va tous les enregistrer côte-à-côte, sur la même image,
comme ceci :
On place ensuite notre image dans le même dossier que nos fichiers HTML et
CSS.

Ensuite, nous allons simplement créer nos liens en HTML et leur appliquer la
propriété  background  afin d’y ajouter notre image cliquable.

L’idée va alors être de ne récupérer que le logo qui nous intéresse dans notre
sprite d’image pour chaque lien et nous allons évidemment faire cela en CSS.

Commencez donc par vous munir d’une image contenant différents logos de
réseaux sociaux, puis renommez la « logos-sociaux.png » par exemple afin
que nous travaillions tous avec les mêmes bases.

Ensuite, nous allons créer nos liens en HTML en donnant un  id  à chaque lien
afin de pouvoir ensuite le cibler précisément en CSS.

Pour notre exemple, nous n’allons créer des liens que vers les réseaux
sociaux Facebook, Twitter et LinkedIn.
Finalement, nous allons utiliser le CSS pour mettre seulement le bon « bout »
d’image en fond de chaque lien.

Pour cela, la solution la plus simple va être de déclarer nos liens comme des
éléments block afin de pouvoir leur donner une taille en pixels puis de
positionner l’image de fond.
Ici, je sais que mes petits logos ont une taille d’environ 50*50 pixels. Je donne
donc la même taille à tous mes liens afin de ne récupérer qu’un bout de
50*50 pixels de notre sprite CSS à chaque fois.

J’utilise également un positionnement absolu pour pouvoir par la suite séparer

les images de fond les unes des autres.

Ensuite, nous utilisons la propriété  background  pour insérer notre image de

fond et précisons deux coordonnées qui vont correspondre au déplacement
de l’image, c’est-à-dire à partir d’où elle va commencer à s'afficher.

Par exemple, pour afficher le logo de Twitter, je sais qu’il faut se déplacer de
50px vers la droite sur notre image, ou encore faire bouger notre image de
50px vers la gauche pour la faire « démarrer » à 50px de son bord gauche.
J’utilise donc la valeur -50px qui va me faire commencer à 50px du début «
théorique » de mon image.
La deuxième valeur correspond au déplacement vertical. Notre logo Twitter
est sur la première ligne, donc à 0px du haut de notre image. Je précise donc
0px. Pour le logo LinkedIn, en revanche, je précise -50px pour décaler mon
image de 50px vers le haut et donc commencer 50px plus bas.

Au final, voici le résultat :

LES TRANSITIONS EN CSS

Présentation des transitions

Les transitions vont nous permettre de modifier la valeur d'une propriété CSS
de façon fluide, dans le temps, créant ainsi une transition entre les différentes
valeurs de notre propriété. On va par exemple pouvoir changer
progressivement la couleur de nos textes.

Avant de commencer, sachez que le CSS ne gère les transitions que depuis
relativement peu de temps.

Ainsi, nous utiliserons les préfixes vendeurs afin de « forcer » la compatibilité

de nos propriétés pour les anciennes versions des navigateurs. Notez
également que Internet Explorer dans ses versions inférieures à 10 ne gère
tout simplement pas du tout les transitions, que ce soit sans ou avec son
préfixe vendeur.

La propriété CSS transition

Nous allons utiliser la propriété CSS  transition  pour créer des transitions en
CSS.

La propriété CSS  transition  est une écriture short hand regroupant en fait
quatre propriétés :

 Transition-delay  : indique quand doit commencer la transition ;

 Transition-duration  : indique la durée de la transition ;

 Transition-property  : définit la propriété à laquelle la transition doit

s’appliquer ;

 Transition-timing-function  : définit la courbe de vitesse de notre

transition.

Parmi ces quatre propriétés, seules les valeurs de  transition-

duration  et  transition-property  vont être obligatoires à préciser pour utiliser
la propriété  transition .

Ces deux valeurs vont donc correspondre à la durée de la transition en

secondes (« s ») ainis qu'au nom de la propriété CSS à laquelle on souhaite
appliquer la transition.

Afin qu’une transition démarre, il va également falloir que la propriété ciblée

connaisse un changement de valeur. Nous allons souvent changer la valeur
d’une propriété lors d’un changement d’état de l’élément auquel elle est
associée.

Ainsi, nous utiliserons souvent les transitions avec les pseudo classes et
particulièrement avec  :hover .
Création d’une transition simple en CSS
Nous allons effectuer un effet de transition sur la taille et la couleur de fond
d’un  div , lorsqu’un utilisateur va passer sa souris dessus.
Essayer ce code

Comme vous pouvez le voir, on peut très bien spécifier plusieurs noms de
propriétés et transitions dans notre propriété  transition , en les séparant par
une virgule.

Pensez bien une nouvelle fois à déclarer les préfixes vendeurs avant la
version standardisée de la propriété en soi ainsi que les valeurs dans l'ordre
que je vous propose (nom de la propriété avant la durée de la transition).
Ici, dès qu’un utilisateur passe sa souris sur notre  div , celui-ci change
progressivement de forme et de couleur en deux secondes.

Création d’une transition CSS en utilisant toutes

les valeurs
Nous allons cette fois-ci également préciser les valeurs de  transition-delay  et
de  transition-timing-function .

La propriété  transition-delay  va spécifier le temps d’attente avant que la

transition démarre. Cette propriété va donc prendre en valeur un nombre de
secondes.

La propriété  transition-timing-function  va définir la courbe de vitesse de

notre transition. On va pouvoir choisir parmi cinq valeurs simples :

 Ease : La transition commence lentement puis accélère au milieu pour

finir lentement

 Ease-in : la transition commence lentement ;

 Ease-out : la transition se termine lentement ;

 Ease-in-out : la transition commence et se finit lentement ;

 Linear : transition linéaire.

LES ANIMATIONS EN CSS

Présentation des animations en CSS

Les animations en CSS vont nous permettre de changer le style d’un élément
HTML.

Contrairement aux transitions, on va pouvoir grâce aux animations modifier le

style d’un élément HTML sans changement d’état de celui-ci et autant de fois
que voulu.

Les animations sont une fonctionnalité relativement récente du CSS. Ainsi, la

compatibilité avec d’anciennes versions de navigateurs n’est pas parfaite et
nous allons devoir utiliser des préfixes vendeurs.
A noter qu’Internet Explorer, dans ses versions antérieures à la version 10, ne
supporte tout simplement pas les animations.

Pour créer une animation en CSS, nous allons utiliser la

propriété  animation  ainsi que la règle CSS  @keyframes .

La règle CSS @keyframes et la propriété

animation
On appelle  @keyframes  une « règle » en CSS, qui va nous permettre de
modifier progressivement le style d’un élément.

La propriété CSS  animation  est en fait la notation short-hand des propriétés

relatives aux animations suivantes :

 animation-name  : nom de l’animation, qu’on réutilisera dans la

déclaration du  @keyframes  ;

 animation-duration  : durée de l’animation, en secondes ;

 animation-timing-function  : courbe de vitesse de l’animation ;

 animation-delay  : délai de l’animation ;

 animation-iteration-count  : nombre de fois que l’animation doit être

jouée ;

 animation-direction  : spécifie si l’animation doit se jouer à l’envers ou

selon des cycles alternés, c’est-à-dire en changeant de sens à chaque

fois.

Parmi toutes ces propriétés, seules les valeurs relatives aux deux premières
doivent obligatoirement être précisées dans la propriété CSS  animation .

Cependant, je vous conseille ici plutôt d’utiliser les propriétés  animation-

xx  plutôt que la notation short hand car cette dernière n’est pas toujours bien

supportée par tous les navigateurs.

Voyons immédiatement quelques exemples d’animations qu’il est possible de
créer uniquement grâce à la propriété CSS  animation .

Créer une animation simple en CSS

Commençons par créer une animation très simple en CSS : on va tout
simplement changer la couleur d’un  div , du bleu vers l’orange.
Essayer ce code

N'hésitez pas à essayer le code ci-dessus afin de voir le résultat final.

Comme vous pouvez le voir, on applique notre animation à notre élément  div .
On se contente ici d’utiliser les propriétés  animation-name  et  animation-
duration . Pensez bien une nouvelle fois à préciser la propriété préfixée avant

la version standard de celle-ci.

Ensuite, on réutilise le nom de notre animation dans notre  @keyframes  qu’il

faut également préfixer pour s’assurer un fonctionnement correct sur
différents navigateurs.
A l’intérieur du  @keyframes , le plus simple est d’utiliser les mots clefs « from »
et « to » pour indiquer, dans notre cas, la couleur de départ et de fin
d’animation.

On peut également préciser des pourcentages plutôt que « from » et « to »

afin de gérer plusieurs changements d’état et de préciser quand ceux-ci
doivent survenir durant notre ainmation.

Notez qu’une fois notre animation terminée un élément reprend son style
d’origine.

Créer une animation complète en CSS

On va maintenant tenter de créer une animation plus complète pour
notre  div , avec les différentes propriétés  animation-xx .

On va faire changer notre  div  de couleur plusieurs fois dans

notre  @keyframes  en précisant des valeurs en pourcentage.

On va également faire bouger notre  div  dans notre page en lui attribuant une
position relative puis en modifiant celle-ci dans notre  @keyframes .
Essayer ce code

Ici, nous commençons par définir la taille, une couleur de fond par défaut et le
positionnement de notre  div .

Ensuite, nous lui appliquons les propriétés  animation-name ,  animation-

duration ,  animation-iteration-count  et  animation-direction .

La propriété  animation-iteration-count  va définir combien de fois notre

animation va être jouée. Elle prend en valeur soit un nombre, soit un mot clef
comme « infinite » (l’animation sera répétée indéfiniment).

La propriété  animation-direction  va définir le sens de l’animation. Notre

animation peut aller en sens inverse (valeur reverse), en cycles alternatifs
(une fois à l’endroit, une fois à l’envers avec la valeur alternate) ou encore en
cycles alternatifs inversés.

Finalement, nous utilisons notre  @keyframes  pour préciser la nature de notre

transition et lui donner un effet fluide. Comme prévu, nous utilisons des
valeurs en pourcentage pour définir à quel moment dans l’animation doit
commencer chaque nouvel effet et attribuons les pourcentages souhaités à
chaque effet d'animation.

Dans le cas présent, nous changeons la couleur de fond du  div  à chaque fois
ainsi que sa place relativement à sa place de départ.

N’hésitez pas à essayer ce code avec le lien ci-dessus afin de bien

comprendre comment il fonctionne !

PRESENTATION DES
FORMULAIRES
Les formulaires en HTML
Les formulaires vont nous permettre de recueillir des données envoyées par
nos utilisateurs.

Nous allons par exemple utiliser des formulaires HTML pour créer des

formulaires d’inscription, des formulaires de contact, etc.

Création et traitement d’un formulaire

Vous devez bien comprendre que nous touchons, avec les formulaires, aux
limites du HTML.

En effet, le HTML va nous permettre de créer notre formulaire sans problème.

Cependant, nous n’allons ni pouvoir traiter les données envoyées par les
utilisateurs, ni pouvoir les stocker.

Pour effectuer ces opérations, nous allons avoir besoin de connaître de

nouveaux langages informatiques qui vont traiter les informations envoyées
côté serveur, comme le PHP par exemple et pouvoir enregistrer les données
efficacement comme c’est le cas du système de gestion de bases de données
MySQL, entre autres.

Comme l’apprentissage de ces langages n’est pas l’objet de ce cours, nous

nous contenterons dans les parties suivantes de créer notre formulaire en
HTML, tout simplement, sans se préoccuper du traitement et de
l’enregistrement des données.

Mise en garde : les données utilisateurs

Si vous ne connaissez que le HTML et le CSS pour le moment, cette mise en
garde va peut être vous paraître abstraite. Cependant, je préfère la faire dès
maintenant car elle vous sera très précieuse si vous continuez l’apprentissage
de la programmation par la suite.

Lorsque l’on crée des formulaires, on va demander aux utilisateurs de nous

envoyer des données.

Vous devez TOUJOURS vous méfier des données envoyées par l’utilisateur et
sécuriser vos formulaires avant d’effectuer toute autre opération sur ces
données.

En effet, même s’ils sont peu nombreux, soyez sûr qu’un jour ou l’autre un
utilisateur malveillant essaiera de profiter d’un formulaire pour envoyer des
données non souhaitées et tenter de faire buguer votre site ou encore de
récupérer des informations sensibles.

Une nouvelle fois, nous n’allons pas pouvoir sécuriser nos formulaires en
HTML, nous aurons besoin de l’aide d’autres langages comme le PHP pour
faire cela.

Cependant, retenez bien cette mise en garde si vous devez un jour demander
des données à vos utilisateurs.

CREER UN FORMULAIRE
SIMPLE

Les éléments de formulaire

Le HTML met à notre disposition une série d'éléments qui vont nous
permettre de créer nos formulaires.
Ces différents éléments vont nous permettre de définir le formulaire en soi,
de créer des zones de saisie de texte courtes ou longues, de proposer des
zones d'options à nos utilisateurs, etc.

Les formulaires vont être l’occasion pour nous de découvrir de nombreux

éléments. Voici la liste des éléments que nous allons étudier dans les parties
suivantes :

Elément Définition

form Définit un formulaire

input Définit un champ de données pour l’utilisateur

label Définit une légende pour un élément input

textarea Définit un champ de texte long

select Définit une liste de choix

optgroup Définit un groupe d’options dans une liste

option Définit une option dans une liste

fieldset Permet de regrouper les éléments d’un formulaire en différente

legend Ajoute une légende à un élément fieldset

L’élément form
Pour définir un formulaire en HTML, nous allons utiliser l’élément  form  qui
signifie « formulaire » en anglais.
Cet élément  form  va avoir besoin de deux attributs pour fonctionner
normalement : les attributs  method  et  action .

L’attribut  method  va indiquer comment doivent être envoyées les données
saisies par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.

Ces deux valeurs vont correspondre aux deux choix que nous avons : soit
faire transiter les données par l’URL afin de pouvoir ensuite les traiter, soit les
envoyer par HTTP post transaction.

Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), nous serons
limités dans la quantité de données pouvant être envoyées et surtout les
données vont être envoyées en clair. Evitez donc absolument d’utiliser cette
méthode si vous demandez des mots de passe ou toute information sensible
dans votre formulaire.

En choisissant l’envoi de données via post transaction HTTP (avec la valeur

post), nous ne sommes plus limités dans la quantité de données pouvant être
envoyées et les données ne sont visibles par personne. C’est donc
généralement la méthode que nous utiliserons.

L’attribut  action  va lui nous servir à préciser l’adresse relative de la page
dans laquelle les données doivent être traitées. Ce sera généralement un
fichier PHP. Nous n’allons pas créer ce fichier dans ce cours, mais je vous
propose pour les exemples suivants de faire comme si ce fichier existait et de
l’appeler « traitement.php ».

Voici donc le squelette d’un formulaire HTML :

Les éléments HTML input, textarea et label
L’élément  input  est l’élément le plus utilisé dans les formulaires HTML. Il va
nous permettre de créer la majorité des champs de notre formulaire.

L’élément  input  se présente sous la forme d’une balise orpheline et possède
un attribut type  auquel on va pouvoir donner de nombreuses valeurs.

En changeant la valeur de l’attribut  type , nous allons changer le type de

données qui vont pouvoir être envoyées via notre élément  input  et allons
ainsi par exemple pouvoir créer un champ de saisie de texte mono-ligne, un
champ contenant des zones d’options ou encore le bouton permettant l’envoi
des données du formulaire rentrées par l’utilisateur.

L’élément  textarea  va nous permettre de créer un champ de texte multi-

lignes, pouvant accueillir par exemple un commentaire ou une présentation
d’un utilisateur. Cet élément est également communément utilisé au sein des
formulaires HTML.

Finalement, nous allons utiliser l’élément  label  pour décrire à l’utilisateur ce

qu’il doit rentrer dans chaque champ du formulaire. Nous allons lier un label à
un élément de formulaire grâce aux attributs  for  (pour le label) et  id (pour
l’élément de formulaire).

Il faudra donner strictement la même valeur aux attributs  for  et  id  afin de «
lier » entre eux un label et un élément de formulaire. Vous pouvez donner la
valeur que vous voulez, mais essayez de rester cohérent et logique dans la
mesure du possible.

L’attribut name
Nous allons également devoir préciser un attribut  name  pour chaque élément
de notre formulaire demandant des informations à un utilisateur.

Cet attribut  name  va nous permettre, par la suite, de reconnaître le contexte
de chaque donnée envoyée par l’utilisateur afin de pouvoir les traiter
efficacement.

En effet, sans attribut  name , nous recevrions des données mais ne saurions
pas quoi en faire, ne sachant pas à quel champ elles appartiennent.

Cet attribut est donc indispensable. Vous pouvez une nouvelle fois lui
attribuer la valeur souhaitée. Seule restriction : cette valeur doit être unique
afin de bien pouvoir identifier chaque champ.

Créer un formulaire HTML simple

Nous allons créer notre premier formulaire en HTML. Dans ce formulaire, nous
allons demander :

 Un pseudonyme à l’utilisateur, avec un  input  de type « text » ;

 Une présentation, avec un élément  textarea .

Nous penserons également à créer un  label  pour chaque information

demandée ainsi qu’un bouton d’envoi des données du formulaire.
Voici comment on va procéder :

Essayer ce code

Analysons et décortiquons le code ci-dessus. Tout d’abord, on définit un

élément  form  avec ses deux attributs  method  et  action .
Comme méthode d’envoi de données, nous choisissons « post » et nous
précisons la page de traitement en valeur de l’attribut  action . Evidemment,
nous ne savons pas pour le moment créer la page « traitement.php »,
n’essayez donc pas d’appuyer sur le bouton d’envoi du formulaire, vous aurez
une erreur.

A l’intérieur du formulaire, on utilise un premier élément  input

type="text"  pour créer le champ de soumission du pseudo. On pense bien à
préciser un attribut  name  pour cet élément avec une valeur unique par rapport
aux autres  name  des autres éléments.

Ensuite, on crée un premier élément  label  pour indiquer à l’utilisateur ce qu’il

doit remplir dans le champ. Une nouvelle fois, on pense à lier notre  label  à
notre  input  en utilisant deux attributs  for  et  id  et en leur donnant la même
valeur.

Pour le champ de présentation, on utilise un élément  textarea  qui nous

permet de gérer des textes longs. Là encore, nous devons préciser un
attribut  name  car le champ va recevoir des données de l’utilisateur et nous
créons également un  label  allant avec notre  texarea .

Finalement, nous devons créer le bouton d’envoi de notre formulaire. Pour

cela, on utilise  input type="submit" . On n’utilise pas d’attribut  name  ici car il
n’y a aucune entrée de données par l’utilisateur (ce n’est pas un champ mais
un bouton).

Nous n’avons pas besoin non plus de  label  pour notre bouton d’envoi : nous
préférerons indiquer un attribut  value  et préciser une valeur qui s’affichera
dans le bouton même.

Voilà, nous venons de créer notre premier formulaire ensemble. Pour le

moment, vous remarquerez que c’est un peu rudimentaire. Pas d’inquiétude,
nous allons enrichir ce formulaire au fur et à mesure et finalement le styliser
en CSS.
LES DIFFERENTS TYPES
D’INPUT ET LES LISTES

L’élément HTML input

L’élément HTML  input  va nous permettre de créer toutes sortes de champs
de formulaire en changeant la valeur de son attribut  type .

Nous allons voir ensemble quelques unes des valeurs les plus courantes de
l’attribut  type .

Input type = "text"

La valeur text va tout simplement nous permettre de créer un champ de
saisie mono-ligne dans lequel l’utilisateur entrera des données.

Nous avons déjà vu cette valeur en action lors de la partie précédente.

Input type = "password"
La valeur password va nous permettre de créer un champ de saisie « sécurisé
» pour par exemple demander un mot de passe à nos utilisateurs.

Lorsque l’utilisateur écrit dans le champ, ce qu’il écrit n’est pas affiché en
clair mais est remplacé par des astérisques ou des points.
Input type = "date"
La valeur date va être utilisée pour créer des champs de formulaire devant
recevoir une date, comme une date de naissance par exemple.

Selon le navigateur utilisé par vos visiteurs, ceux-ci verront peut être une liste
de dates à choisir dans le champ  input type="date" .

Dans l’illustration ci-dessous, par exemple, j’utilise le navigateur Google

Chrome :
Input type = "email"
La valeur email de l'attribut  type  va nous permettre de créer un champ de
formulaire devant recevoir une adresse email.

Ainsi, certains navigateurs récents vont tester la valeur rentrée dans le

champ par l’utilisateur afin de s’assurer que celle-ci a bien la forme d’un
email (présence d’un @ par exemple).

Sur les smartphones, le clavier tactile va changer pour ce champ et afficher

des touches comme « .com » ou « @ » par exemple.
Input type = "url"
La valeur url de l'attribut  type  va nous permettre de créer une zone de saisie
acceptant une URL.

Cela va être utile si l’on souhaite demander l’adresse de son site web à un
utilisateur par exemple.

Tout comme pour la valeur email de  type , une validation des données pourra
être faîte lors de la soumission du formulaire selon le navigateur utilisé.

De plus, là encore, si un utilisateur utilise un smartphone pour remplir le

formulaire, son clavier tactile changera pour ce champ en affichant des
touches comme « .com » par exemple.
Input type = "number"
La valeur number de l'attribut  type  va nous permettre de créer une zone de
saisie n’acceptant que les nombres.

Selon le navigateur utilisé, une barre de défilement de nombres va apparaître

à droite du champ créé.
Input type = "radio"
La valeur radio va nous permettre de créer des boutons de type « radio »,
c’est-à-dire de demander à l’utilisateur de choisir une option et une
seulement dans une liste proposée.

Pour chaque choix possible, il nous faudra utiliser un nouvel  input

type="radio" .

Attention en revanche, dans ce cas et dans ce cas seulement, chacune des

options disponibles au sein d’une même zone de choix doit posséder le même
attribut  name  afin que l’on sache qu’il s’agit de la même zone de choix.
Nous distinguerons donc les différents choix possibles au moyen d’un autre
attribut : l’attribut  value .

Pour plus d’esthétique, nous allons cette fois-ci placer le  label  après
l’élément  input  (afin d’avoir nos boutons radio alignés avant le texte
descriptif).
Essayer ce code

Input type = "checkbox"

La valeur checkbox de attribut HTML  type  ressemble à la valeur radio : elle va
également nous permettre de créer des options à choisir par nos visiteurs.

Cependant, cette valeur est moins restrictive que radio : en effet, avec radio,
l’utilisateur devait absolument choisir une et une seule option.

Avec checkbox, en revanche, l’utilisateur peut ne choisir aucun choix, un

choix ou même plusieurs choix.

Tout comme pour les boutons radio, nous allons devoir utiliser le même
attribut  name  pour chaque groupe d’options et différencier les options en soi
avec un attribut  value .
Essayer ce code

Input type = "submit"

Un élément  input type="submit"  va nous permettre de créer un bouton
d’envoi des données du formulaire.

Les données seront envoyées via la méthode précisée dans

l’attribut  method  de l’élément  form  à l'adresse précisée en valeur de
l’attribut  action  de ce même élément.

Un élément  input type="submit"  ne va pas nécessiter de  name  car ce n’est pas
un champ de saisie de données utilisateur. Nous allons utiliser un
attribut  value  contenant en valeur le texte qui sera affiché au sein de notre
bouton.
Les listes d'options des formulaires HTML
Les listes vont permettre à un utilisateur de choisir une valeur dans une liste
d’options déroulante.

Pour créer une liste d’options, nous allons cette fois-ci utiliser l’élément
HTML  select  pour définir notre liste en soi, et des éléments  option  pour
définir chaque élément de notre liste.

Nous devrons préciser un attribut  name  pour notre élément  select  puis des
attributs  value  pour chaque élément  option .
Essayer ce code

Nous allons encore pouvoir grouper différentes options entre elles au sein
d’une liste grâce à l’élément  optgroup (pour « option group », ou « groupe
d’options »).
Pour chaque groupe d’options, nous préciserons un attribut  label  (à ne pas
confondre avec l’élément  label utilisé précédemment). Celui-ci va tenir le
même rôle que l’élément  label .
Essayer ce code

AMELIORER UN FORMULAIRE
AVEC LES ATTRIBUTS HTML

De nouveaux attributs pour notre formulaire

Nous avons vu dans les parties précédentes quelques attributs indispensables
pour les éléments de formulaire comme par exemple l’attribut  name .

Cependant, il existe de nombreux autres attributs HTML disponibles qui vont

nous permettre d’améliorer notre formulaire.

Je vous propose de découvrir les attributs suivants :

Attribut Rôle
 Autocomplete Permet l'autocomplétion d'un champ

Autofocus Force le focus sur un champ

Min et Max Permettent de définir une valeur minimale et maximale pou

Placeholder Donne des indications sur les données attendues

Checked Pré-coche une case

Selected Pré-sélectionne une option dans une liste

Required Force le remplissage d'un champ

L’attribut HTML autocomplete

L’attribut  autocomplete  va nous permettre de finir automatiquement le
remplissage d’un champ en se basant sur les informations entrées
précédemment dans d’autres formulaires par l’utilisateur.

Cet  attribut  peut prendre deux valeurs : on (le champ va s’auto compléter)
et off.
Essayer ce code

L’attribut autofocus
L’attribut HTML  autofocus  va nous permettre d’attribuer automatiquement le
focus sur un élément lors du chargement de la page.

Le « focus » correspond au fait d’avoir sa barre d’écriture (le "curseur" de la

souris) automatiquement présente dans le champ en question.

Il n’est pas obligatoire de préciser une valeur pour cet attribut, puisqu'il n'en
possède qu'une qui est "autofocus". Cependant, une nouvelle fois, je vous
conseille de toujours écrire un attribut avec sa valeur afin de bien se rappeler
qu'un attribut possède toujours une valeur.
Essayer ce code

Les attributs HTML min et max

Les attributs HTML  min  et  max  vont nous permettre de préciser les valeurs
minimale et maximale attendues pour un champ. Ces attributs seront
généralement utilisés avec un élément  input type="number" .
Essayer ce code

L’attribut HTML placeholder

L’attribut HTML  placeholder  va nous permettre de donner un exemple de
remplissage d’un champ dans le champ lui même.

La valeur donnée au  placeholder  apparaitra sous forme de valeur grise, à

moitié transparente.
Dès que l’utilisateur cliquera dans le champ, la valeur du placeholder
disparaitra.

Essayer ce code

Les attributs HTML checked et selected

L’attribut HTML  checked  va nous permettre respectivement de pré-cocher une
ou plusieurs zones d’option selon le type d’élément  input  utilisé.

L’attribut HTML  selected  va lui occuper le même rôle pour l’élément  select ,
c’est-à-dire pour les listes d’option de nos formulaires.
Essayer ce code

L’attribut HTML required

L’attribut HTML  required  va nous permettre de rendre un champ de
formulaire obligatoire : si l’utilisateur n’a pas rempli ce champ, le formulaire
ne pourra pas être envoyé.

Une nouvelle fois, il n’est pas strictement nécessaire de préciser de valeur

pour cet attribut (comme il n'en possède qu'une, elle est dite implicite).

Attention cependant, cet attribut n’est pas supporté ni par les vieilles version
d’Internet Explorer (<9), ni par Safari. Nous utiliserons donc Chrome pour le
tester dans ce cours.
Essayer ce code
Ici, j’ai essayé d’envoyer le formulaire sans remplir de valeur dans mon
champ pseudo. Comme celui-ci possède un attribut  required , le navigateur
n’envoie pas le formulaire et m’indique à la place que je dois remplir le
champ en question.

ORGANISER ET METTRE EN
FORME UN FORMULAIRE

Organiser un formulaire : l’élément HTML fieldset

L’élément HTML  fieldset  va nous permettre de regrouper certains éléments
d’un formulaire HTML entre eux, afin de créer différentes « sections » pour
notre formulaire et de le structurer.

Pour donner un nom à chaque section, nous allons utiliser l’élément

HTML  legend  à l’intérieur de  fieldset .
Essayer ce code

Mettre en forme un formulaire grâce au CSS

Maintenant que nous avons fait le tour des éléments et des attributs
indispensables aux formulaires, et que nous savons créer des formulaires
assez complets en HTML, nous allons pouvoir mettre en forme nos formulaires
avec le CSS.

Pour cela, nous allons commencer par harmoniser nos lignes grâce aux
propriétés  width  et  height .

Ensuite, nous allons rajouter des  padding  et  margin  pour aérer nos formulaires
et nous allons mettre en forme nos textes.

Nous allons également modifier la couleur de fond de nos différentes sections

afin de bien les différencier.

Voici donc le code CSS que je vous propose. A votre niveau, vous devriez être
capable de comprendre ce code tout seul. Notez que nous utilisons la pseudo
classe  :hover  pour que l’utilisateur puisse mieux se repérer dans le
formulaire.
Essayer ce code

INTRODUCTION AU
RESPONSIVE DESIGN

Définition du « responsive design »

Les mots « responsive design », en anglais, peuvent être traduits en français
par « design adaptable ».
Par extension, le « responsive design » désigne généralement l’ensemble des
techniques nous permettant d’adapter nos pages web à toutes les tailles
d’écrans afin d’avoir un bon rendu.

La problématique du responsive design est apparue avec l’apparition des

tablettes et des Smartphones pouvant se connecter à Internet : en effet,
comment faire pour que mon site s’affiche aussi bien sur un petit écran de
téléphone portable que sur un ordinateur de salon ?

Trois façons d’adapter son site sur tous les écrans

Aujourd’hui, il existe trois façons d’adapter son site afin d’avoir un bon rendu
visuel sur toutes les tailles d’écrans :

1. Créer un site dédié pour chaque terminal différent (un site mobile, un
site pour ordinateur, etc.) ;

2. Créer une application mobile en plus de notre site web (gérant

l’environnement Androïd et iOS) ;

3. Utiliser les outils offerts par le HTML et le CSS et créer une version «
responsive » de notre site.

Dans cette section, nous nous concentrerons sur cette troisième méthode.

LE VIEWPORT ET
L'UTILISATION DES
POURCENTAGES
Présentation du viewport
Le « viewport » correspond à la taille de la fenêtre web de vos visiteurs.

Une première méthode, très simple, pour commencer à optimiser son site
web pour un affichage sur mobile ou tablette est d’utiliser et de manipuler le
viewport.

En HTML5, nous pouvons prendre « contrôle » de la taille de la fenêtre grâce

à l’élément  meta  et aux attributs  name  et  content .

On va demander à ce que nos pages web s’adaptent à la taille de la fenêtre

de chacun de nos visiteurs, afin que notre contenu la remplisse.

Cela ne va évidemment pas toujours fournir un résultat parfait, mais ce sera

déjà un bon début !

Voilà ce qu’il faut écrire :

Le code  width=device-width  va faire en sorte que la page s’adapte à la taille
de l’écran de votre visiteur avec les éléments HTML prenant la place
disponible.

Le code  initial-scale=1.0  définit le niveau de zoom initial lorsque la page est

chargée par le navigateur.

Regardez le résultat avec et sans utilisation de  meta  viewport de notre code
HTML pour un affichage sur mobile :
Utilisation des valeurs en pourcentage en CSS
En plus de l'emploi de l'élément  meta , nous pouvons utiliser des valeurs en
pourcentages en CSS pour définir les tailles de certains éléments plutôt que
des valeurs en pixels.
Si votre code est bien pensé et bien construit, cela aura pour effet de
redimensionner les différents éléments de vos pages en même temps que la
fenêtre va se rétrécir ou s'agrandir.

Lorsque vous utilisez cette méthode, pensez bien que les tailles exprimées
sont un pourcentage de la taille de l'élément parent des éléments que vous
ciblez actuellement.

Ainsi, si vous définissez une taille égale à 100% pour votre élément  body , puis
ensuite une largeur de 50% pour un  div  enfant direct du  body , la taille
du  div  sera toujours égale à 50% de celle du  body .

Si maintenant vous définissez à nouveau une largeur égale à 50% pour les
paragraphes à l'intérieur de votre  div , les paragraphes occuperont 50% de la
largeur du  div
Limites de ces deux premières méthodes
Le fait d'utiliser la  meta name="viewport"  et des tailles relatives dans votre
code CSS devrait déjà vous fournir une bonne base pour adapter votre site
web aux différentes tailles d'écran.

Cependant, parfois, ces deux premières méthodes ne seront pas suffisantes.

En effet, selon comment sont construites vos pages, vous voudrez peut être
les réagencer totalement selon la taille de l'écran de vos visiteurs.
Par exemple, pour un affichage sur mobile, on préférera souvent enlever du
contenu et afficher nos différents éléments en longueur plutôt qu'en largeur.

La meilleure méthode pour faire tout cela va être d'utiliser une nouvelle fois
la règle CSS @ ainsi que ce qu'on appelle les "media queries".

MEDIA QUERIES ET
RESPONSIVE DESIGN

Présentation des media queries

Les media queries correspondent à une technique introduite en CSS3 et qui
va se servir de la règle CSS  @media .

Grâce aux media queries, nous allons pouvoir appliquer différentes propriétés
ou différentes valeurs à des éléments HTML selon la taille de l’écran et le type
de media utilisé (écran, imprimante, etc.) par vos visiteurs.

Cela va nous permettre par exemple de ne pas afficher certains éléments

pour des tailles d’écran trop petites ou de réorganiser nos pages web grâce
aux propriétés CSS.

Utilisation de @media en CSS

Nous allons obligatoirement devoir préciser une chose avec  @media  : le type
de media pour lequel les déclarations CSS doivent s’appliquer.
Dans l’immense majorité des cas, nous utiliserons  @media screen , afin
d’appliquer nos propriétés à tous les medias dotés d’un écran (téléphone
portable, tablette, ordinateur de bureau, etc.).

Cependant, sachez que l’on peut également utiliser  @media print , par
exemple, afin de n’appliquer certaines règles que pour les imprimantes ou
encore  @media speech , pour les ordinateurs spéciaux qui vont « lire à haute
voix » une page.

Finalement, on peut également utiliser  @media all  pour appliquer des

déclarations à tous les types de media.

Avec  @media screen , nous préciserons également une taille ou un intervalle de

tailles d’écran au sein duquel les propriétés vont s’appliquer. C’est cette
fonctionnalité qui va nous permettre de créer un site responsive en soi.

Voyons immédiatement un premier exemple d’utilisation des media queries

et de  @media .
Essayer ce code

Utiliser les media queries pour changer

l’agencement des éléments HTML
Les media queries vont être particulièrement intéressants pour masquer
certains éléments ou pour modifier leur agencement selon la taille de l’écran
de vos visiteurs.

Pour faire cela, nous allons pouvoir utiliser les propriétés  display ,  position  et
les valeurs relatives en pourcentages de façon générale.

Imaginons par exemple une page web composée de trois  div  côte à côte et
d’un pied de page.
Essayer ce code

Remarquez que l’on a déjà commencé à préparer le terrain : nous avons

utilisé des valeurs en pourcentages pour nos éléments  div  afin que ceux-ci
grandissent ou rapetissent en même temps que la page web.

Notez également qu’on a effectué un reset CSS des marges intérieures et

extérieures sur notre élément  body  afin d’être sûr de tous travailler sur les
mêmes bases.

Pour l’affichage sur mobile, nous désirons maintenant afficher la page sur une
seule colonne et enlever le pied de page afin de faciliter la lisibilité des
visiteurs.

Admettons qu’on considère tous les écrans de mobiles d’une taille intérieure
à 780px.

Nous allons utiliser  @media  avec les bonnes propriétés CSS afin d’avoir
l’affichage souhaité sur téléphone portable :
Essayer ce code

Comme vous le voyez, nous avons pu modifier complètement notre page

grâce à  @media . En effet, les règles définies dans @media vont être prioritaires
sur les règles « générales » dès que la taille de l’écran va passer sous les
780px.

@media et orientation
On peut également définir des règles spécifiques selon l’orientation de l’écran
de vos visiteurs (utile pour l’affichage sur tablette ou iPhone entre autres).
Pour cela, on peut utiliser « orientation : landscape » pour définir des règles
spécifiques pour les écrans tournés en mode « paysage ».

LE FLEXBOX CSS

Introduction au Flexbox
Jusqu’à présent, nous avons étudié différentes techniques et propriétés CSS
pour mettre en page et organiser nos différents éléments HTML.

En particulier, nous nous sommes concentrés sur la propriété display et ses

différentes valeurs block,  inline  et  inline-block  ainsi que sur les
propriétés  float  et  position .

Toutes ces techniques fonctionnent mais peuvent parfois se trouver limitées

ou créer des comportements inattendus notamment dans les cas où le
contenu HTML va varier en taille de manière dynamique ou lorsqu’il faudra
gérer l’orientation du terminal comme c’est le cas avec les mobiles
aujourd’hui.

Pour répondre à ces problématiques, le CSS a créé un modèle de disposition

appelé « Flexible box » (qu’on appelle couramment le FlexBox) qui introduit la
nouvelle valeur  flex  pour la propriété  display  ainsi que la propriété  flex  (et
toutes ses sous propriétés).
Le flexbox est aujourd’hui l’outil le plus puissant et simple pour créer des
structures responsives et flexibles, c’est-à-dire pour positionner et aligner des
éléments HTML sans même connaitre leur dimension à priori.

En effet, le Flexbox va nous permettre de gérer précisément :

 La direction des éléments (en colonne ou en ligne, avec un retour à la ligne ou non) ;

 L’alignement des éléments selon un axe principal et secondaire ainsi que leur répartition ;

 L’ordre des éléments ;

 La place prise par les éléments en fonction de l’espace disponible.

Principe de base du Flexbox CSS : conteneur et

éléments contenus
Le Flexbox va fonctionner sur le principe de conteneurs et d’éléments
contenus.

L’idée est simple : nous allons commencer par définir un élément conteneur
(qui sera souvent un  div ) dans lequel nous allons placer les différents
éléments que l’on souhaite positionner dans la page et aligner les uns par
rapport aux autres.

Bien évidemment, nous allons pouvoir définir autant de conteneurs dans une
page web que l’on souhaite. L’idée ici est que les éléments contenus dans un
conteneur vont former un groupe. Nous allons ensuite pouvoir organiser les
éléments de manière précise et efficace les uns par rapport aux autres à
l’intérieur de chaque groupe.

Pour faire fonctionner le modèle de FlexBox, nous allons déjà devoir appliquer
un  display : flex  ou éventuellement un  display : inline-flex  à notre

conteneur.

Les éléments contenus dans notre conteneur deviennent alors

automatiquement des éléments de type flex-item (« éléments flexibles »).
Notez déjà que la différence entre les valeurs  flex  et  inline-flex  n’impacte
que le conteneur qui se comportera ainsi comme un élément de type block
(avec  flex ) ou inline (avec  inline-flex ). Cela n’impacte nullement le
comportement des éléments contenus qui seront de type flex-item.

Commençons immédiatement à pratiquer en créant une page HTML avec un

div conteneur et des éléments contenus à l’intérieur.
Pour le moment, pas de surprise : comme nos éléments  div  sont des
éléments de type block, ils prennent par défaut toute la place disponible dans
leur élément parent (le  div class=".c1" ) et se placent sur une nouvelle ligne,
donc les uns en dessous des autres.

Notez que j’ai ajouté une marge intérieure et une couleur de fond différente
pour chaque  div  contenu dans notre conteneur afin de rendre l’exemple plus
visuel et de pouvoir bien les différencier les uns des autres.

Maintenant, appliquons un  display : flex  à notre conteneur pour observer le

changement de comportement des éléments contenus.
Grâce au  display : flex  du conteneur, les éléments contenus deviennent
flexibles (éléments de type flex-item) et vont donc venir se placer à la suite
les uns des autres.

Cependant, ce n’est que le début : maintenant que notre conteneur possède

un  display : flex  et que nos éléments contenus sont flexibles, nous allons
pouvoir utiliser les différentes propriétés appartenant au modèle Flexbox pour
les organiser de façon précise et puissante.

Nous allons ici étudier les propriétés suivantes (notez que certaines
propriétés vont s’appliquer au conteneur tandis que d’autres vont s’appliquer
aux éléments contenus) :

 Flex-flow  (version shorthand des propriétés  flex-direction  +  flex-

wrap ) ;

 Justify-content  ;

 Align-items  ;

 Align-self  ;

 Align-content  ;

 Order  ;

 Flex  (version shorthand des propriétés  flex-grow  +  flex-shrink  +  flex-
basis ).

Gérer la direction des flex-items avec le Flexbox

Nous allons déjà pouvoir gérer la direction des éléments de type flex-items,
c’est à dire leur sens d’affichage (en ligne ou en colonne) avec la
propriété  flex-direction .

Cette propriété peut prendre les valeurs suivantes :

 Row (valeur par défaut) : les éléments sont organisés horizontalement ;

 Row-reverse : les éléments sont organisés horizontalement mais dans

l’ordre inverse ;

 Column : les éléments sont organisés verticalement ;

 Column-reverse : les éléments sont organisés verticalement mais dans

l’ordre inverse.

Nous allons pouvoir appliquer la propriété  flex-direction  à notre conteneur.

Elle va nous servir à déterminer l’axe principal du modèle de Flexbox.

Reprenons nos pages HTML et CSS et appliquons par exemple un  flex-
direction : column-reverse  à notre conteneur.
Comme vous pouvez le constater, nos éléments s’affichent désormais
verticalement (c’est-à-dire en colonne) dans l’ordre inverse de leur
déclaration en HTML.

Le modèle de Flexbox nous fournit également la propriété  flex-wrap  qui va

nous permettre de définir si le contenu doit être affiché sur une seule ligne
(ou colonne) ou sur plusieurs.

On va ainsi pouvoir définir si nos  flex-items  vont avoir le droit de passer à la

ligne ou non.

La propriété  flex-wrap  peut prendre les valeurs suivantes :

 Nowrap : les éléments ne peuvent pas passer à la ligne ;

 Wrap : les éléments peuvent passer à la ligne dans leur ordre naturel
de déclaration ;

 Wrap-reverse : les éléments peuvent passer à la ligne dans l’ordre

inverse de leur déclaration.

Regardez plutôt l’exemple suivant pour bien comprendre l’utilisation que l’on
peut faire avec cette propriété :
Ici, j’ai défini un  flex-direction : row  pour notre conteneur. Les éléments
contenus s’afficheront donc à la suite les uns des autres.

J’ai également défini une largeur de 250px pour chacun de nos éléments à
l’intérieur de notre conteneur.

Par défaut, les éléments flex-items n’ont pas le droit d’aller à la ligne. Ainsi, si
j’essaie de modifier la largeur de ma fenêtre, les éléments vont se recadrer à
l’intérieur du conteneur jusqu’à finalement dépasser si la somme de leurs
contenus devient plus grande que ma fenêtre.

En appliquant maintenant un  flex-wrap : wrap  au conteneur, je donne

l’autorisation aux éléments flex-items de se positionner sur plusieurs lignes si

jamais le conteneur devient trop petit.
Ainsi, grâce à cette propriété, nous sommes certains que notre conteneur
englobera toujours ses éléments flex-items et que les éléments conserveront
la largeur qu’on leur a définie.

Notez pour finir que les deux propriétés  flex-direction  et  flex-wrap  peuvent
être déclarées avec la propriété raccourcie  flex-flow .

La propriété  flex-flow  va donc prendre donc deux valeurs : la valeur relative
à  flex-direction  en premier puis celle relative à  flex-wrap  en deuxième.

Gérer l’alignement avec le Flexbox

Le Flexbox est un modèle qui nous permet d’organiser et d’aligner nos
éléments selon deux axes : un axe principal et un axe secondaire.

Nous allons pouvoir définir l’organisation des éléments selon l’axe principal
des éléments (horizontal ou vertical) avec la propriété  justify-content .
L’organisation des éléments selon l’axe secondaire va ensuite pouvoir être
gérée avec les propriétés  align-items ,  align-self  et  align-content .

Notez que l’axe secondaire dépend du choix de l’axe principal. Ainsi, si on

décide d’organiser nos éléments de manière horizontale, alors l’axe principal
des éléments sera horizontal tandis que l’axe secondaire sera vertical.

De même, si on décide d’organiser nos éléments de manière verticale, leur

axe principal est l’axe vertical tandis que l’axe secondaire sera l’axe
horizontal.

Gérer l’organisation des éléments selon l’axe principal

La propriété  justify-content  nous permet de distribuer l’espace entre les

éléments notamment lorsque ceux-ci possèdent une taille absolue ou ont
atteint leur taille maximale. Cette propriété nous permet également de
contrôler l’alignement des éléments lorsque ceux-ci dépassent de leur cadre.

La propriété  justify-content  va pouvoir prendre les valeurs suivantes :

 Flex-start (défaut) : les éléments s’alignent en début de ligne ;

 Flex-end : les éléments s’alignent en fin de ligne ;

 Center : les éléments s’alignent au centre ;

 Space-between : les éléments sont distribués régulièrement sur la ligne

avec le premier élément en tout début de ligne et le dernier en toute
fin ;

 Space-around : les éléments sont distribués régulièrement sur la ligne

et s’espacent les uns des autres de manière identique (notez que
l’espace entre le premier / dernier élément et le bord est deux fois
moins grands qu’entre deux éléments) ;
  Space-evenly : les éléments sont distribués régulièrement sur la ligne
et s’espacent les uns des autres et des bords de manière identique.

Notez que cette propriété va une nouvelle fois s’appliquer au conteneur.

Testons immédiatement la propriété  justify-content  de manière pratique.

Pour cela, je vais cette fois créer trois conteneurs dans ma page HTML.
Ici, on crée trois  div  conteneurs  .c1 ,  .c2  et  .c3 . On définit un axe principal
horizontal pour nos deux premiers conteneurs avec  flex-direction : row  (les
flex-items s’aligneront les uns à côté des autres). Pour notre troisième
conteneur, on choisit un axe principal vertical avec  flex-direction :
column  (les flex-items s’aligneront les uns en dessous des autres).
Ensuite, on applique la propriété  justify-content  à chacun de nos trois
conteneurs en donnant une valeur différente à chaque fois.

Pour notre premier conteneur  .c1 , on définit un  justify-content : center , ce

qui signifie que les éléments s’aligneront au centre selon leur axe principal
horizontal.

Pour notre deuxième conteneur  .c2 , on définit un  justify-content : space-

around . Ainsi, nos éléments seront distribués de manière régulière selon leur

axe principal horizontal avec le même espace entre les éléments et un

espace deux fois plus petit entre un élément et un bord.

Finalement, on applique un  justify-content : space-evenly  à notre dernier

conteneur  .c3 . Les éléments seront donc distribués de manière régulière avec
le même espace entre eux et entre un élément et un bord selon leur axe
principal qui est cette fois-ci vertical.

Gérer l’organisation des éléments selon l’axe secondaire

La propriété  align-items  va nous permettre de définir le comportement des

éléments le long de leur axe secondaire. Elle possède donc un rôle similaire à
la propriété  justify-content  mais pour l’axe secondaire.

Cette propriété va également s’appliquer au conteneur et va pouvoir prendre

les valeurs suivantes :

 Stretch (défaut) : les éléments sont étirés sur tout l’axe ;

 Flex-start : les éléments sont alignés au début de l’axe ;

 Flex-end : les éléments sont alignés à la fin de l’axe ;

 Center : les éléments sont centrés par rapport à l’axe ;

 Baseline : les éléments sont alignés de telle sorte à ce que leurs lignes
de base soient alignées les unes par rapport aux autres.

Illustrons à nouveau cela avec quelques exemples :

Ici, commencez par noter que nous appliquons la propriété  align-items  en
plus de  justify-content . Vous avez parfaitement le droit de faire cela, c’est
même l’un des grands avantages du Flexbox.

On demande donc aux éléments de notre premier conteneur  .c1  de s’aligner
à partir de la fin de leur axe secondaire en plus de leur alignement par
rapport à l’axe principal. Dans ce cas, l’axe secondaire des éléments est l’axe
vertical et nos éléments sont par défaut organisés du haut vers le bas. Le bas
de l’axe vertical correspond donc à la fin de l’axe. Nos éléments s’alignent
donc à partir du bas de notre conteneur en plus de leur alignement principal
horizontal.

Ensuite, nous alignons les éléments de notre conteneur  .c2  au centre par
rapport à l’axe vertical. Ainsi, ils se placent au milieu (en hauteur) de leur
conteneur.

Finalement, on demande également aux éléments de notre conteneur  .c3  de

s’aligner au centre selon leur axe secondaire qui est cette fois-ci l’axe
horizontal.

Gérer l’organisation d’un élément particulier selon l’axe secondaire

Nous allons également pouvoir organiser un élément en particulier grâce à la

propriété  align-self . Notez que cette propriété sera prioritaire sur  align-
items .

La propriété  align-self  peut prendre les mêmes valeurs que  align-items . Elle
va s’appliquer à un élément flex-item en particulier et non pas au conteneur.
Illustrons son fonctionnement immédiatement :
Ici, on cible le deuxième élément dans notre premier conteneur et on lui
applique un  align-self : flex-start . Cet élément en particulier se placera
donc au début du conteneur selon son axe secondaire, c’est-à-dire l’axe
vertical dans le cas présent.
Gérer l’organisation éléments par ligne selon l’axe secondaire

Dans le cas où nos flex-items s’affichent sur plusieurs lignes, le Flexbox va

également nous permettre de gérer l’organisation de chaque ligne avec la
propriété  align-content  par rapport à l’axe secondaire.

Notez que cette propriété n’aura aucun effet si notre Flexbox ne contient
qu’une ligne.

La propriété  align-content  va pouvoir prendre les valeurs suivantes :

 Stretch (par défaut) : les éléments s’étendent pour prendre toute la

place ;

 Flex-start : les lignes se collent au début du conteneur ;

 Flex-end : les lignes se collent en fin du conteneur ;

 Center : les lignes se centrent dans le conteneur ;

 Space-between : les lignes sont distribuées régulièrement avec la

première ligne au début du conteneur et la dernière à la fin de celui-ci ;

 Space-around : les lignes sont distribuées régulièrement avec le même

espace entre chaque ligne.

Illustrons cela immédiatement avec un exemple. Pour cela, rajoutons des

éléments dans notre conteneur ainsi qu’un  flex-wrap : wrap  afin d’avoir
plusieurs lignes dans celui-ci :
Comme vous pouvez le voir, en utilisant  align-content : center  les lignes
sont centrées dans l’axe secondaire (l’axe vertical en l’occurrence) dans leur
conteneur.

En utilisant  align-content : flex-end , les lignes se collent en fin de conteneur

selon l’axe secondaire (l’axe vertical encore une fois dans notre exemple).
Centrer des éléments dans un conteneur

Grâce au Flexbox, nous allons pouvoir centrer très simplement des éléments
horizontalement et verticalement.

Pour cela, il nous suffit de centrer les éléments selon leur axe principal avec
la propriété  justify-content  et selon leur axe secondaire grâce à la
propriété  align-items .

Regardez plutôt l’exemple suivant :

Gérer l’ordre d’affichage des éléments
Le Flexbox va nous permettre de choisir quel élément doit apparaitre dans
quel ordre au sein d’un conteneur. Pour cela, nous allons utiliser la
propriété  order  que nous allons appliquer aux éléments de type flex-item (et
non pas au conteneur).
La propriété  order  va prendre un nombre entier en valeur. Ainsi, l’élément
avec la valeur la plus basse apparaitra en premier. Notez ici que la valeur par
défaut de  order  est 0.

Notez également que vous n’êtes pas du tout obligé de donner un  order : 0  à
l’élément que vous voulez voir s’afficher en premier, un  order : 1  au
deuxième, etc. Il suffit juste de donner la valeur la plus faible au premier, et
d’aller croissant ensuite.

Illustrons cela avec un exemple :

Ici, on donne un  order : 3  à notre élément  div class="e1" , un  order : -4  à
notre  div class="e2"  et un  order : 1  à notre  div class="e3" .

Notre élément  div class="e2"  possède la valeur la plus faible liée à sa

propriété  order  dans notre conteneur et s’affichera donc en premier, puis
ensuite s’afficheront notre élément  div class="e3"  et enfin notre  div
class="e1" .

Gérer la flexibilité des éléments avec le Flexbox

Comme vous devez vous en douter, le Flexbox va également nous permettre
de gérer la flexibilité des éléments HTML... d'où le nom de Flexbox !

La "flexibilité" correspond ici au fait de pouvoir faire grossir ou rétrecir un

élément. Nous allons pouvoir faire cela avec la propriété CSS  flex , qui est la
notation short hand des propriétés  flex-grow ,  flex-shrink  et  flex-basis .

Notez déjà que les différentes propriétés que l'on va voir dans cette partie
s'appliquent aux flex-items et non pas au conteneur.

La propriété  flex-grow  va nous permettre de gérer la capacité d'un élément à

grossir pour occuper l'espace restant par rapport aux autres flex-items.

Cette propriété va prendre un nombre en valeur. Sa valeur par défaut est 0,

ce qui signifie que l'espace restant dans le conteneur ne sera pas distribué
entre les éléments.

Si tous les flex-items possèdent un  flex-grow : 1 , par exemple, alors l'espace
restant dans le conteneur sera distribué régulièrement à tous les flex-items.
En revanche, si on définit un  flex-grow : 2  à l'un des flex-items, alors il
absorbera deux fois pus d'espace disponible que les autres.

Illustrons cela evec un exemple pour bien comprendre :

Par défaut, le  flex-grow  de nos flex-items est réglé sur la valeur 0, ce qui
signifie que l'espace restant dans le conteneur n'est pas distribué dans nos
flex-items. C'est ce qu'on peut voir avec notre conteneur  .c1 .

Dans notre deuxième conteneur  .c2 , nous attribuons un  flex-grow : 1  à tous
nos flex-items. L'espace restant dans le conteneur sera donc distirbué
également entre tous nos flex-items.
Enfin, nous attribuons un  flex-grow : 1  aux deux premiers flex-items de notre
troisième conteneur et un  flex-grow : 2  au dernier. Le dernier flex-item
absorbera deux fois plus d'espace restant que les deux premiers flex-items.

La propriété  flex-shrink  va être la propriété inverse de  flex-grow  et va gérer
la capacité d'un flex-item à rétrécir par rapport aux autres.

Cette propriété va également prendre un nombre en valeur. Sa valeur par

défaut est 1.

Notez que pour que  flex-shrink  ait un effet visible, il faut que la somme des
tailles par défaut des flex-items dépasse du conteneur.

Illustrons le fonctionnement de  flex-shrink  avec un exemple

Ici, j'ai appliqué un  flex-shrink : 4  au troisième flex-item du troisième
conteneur. Celui-ci se réduit donc pour laisser plus de place aux autres flex-
items pour qu'ils se rapprochent de la taille définie pour eux.

La propriété  flex-basis  permet de définir la taille par défaut d'un élément

avant que l'espace restant dans le conteneur ne soit attribué.

Cette propriété peut prendre une valeur de type taille (20%, 5rem, etc.) ou un
mot clef en valeur.
La valeur par défaut de  flex-basis  est  auto , qui signifie que l'élément obéira
aux règles données par les propriétés  width  et  lenght  si celles-ci ont été
définies.

Si on attribue la valeur 0 à  flex-basis  à nos flex-items, alors l'espace autour

du contenu des éléments sera réduit au maximum.

Enfin,  flex-basis  peut prendre la valeur  content  qui signifie que la taille des
flex-items sera basée sur la taille de leur contenu. Cependant, cette valeur
n'est pas encore bien standardisée ni reconnue par les navigateurs donc je
vous recommande de l'éviter.

Regardez les exemples suivants pour bien comprendre :

Enfin, vous devez savoir que les trois propriétés  flex-grow ,  flex-
shrink  et  flex-basis  peuvent être abrégées avec leur version shorthand : la
propriété  flex .

Les valeurs par défaut de la propriété  flex  correspondent à celles des

propriétés  flex-grow ,  flex-shrink  et  flex-basis  dans cet ordre, à
savoir  flex : 0 1 auto .
CREER UN SITE PERSONNEL /
CV EN HTML ET EN CSS

Présentation de l’exercice
Vous savez maintenant quasiment tout ce qu’il y a à savoir sur le HTML et le
CSS. Tout ce qu’il vous reste à faire maintenant est de pratiquer, encore et
encore.

Dans cette optique, il me semblait intéressant de finir ce cours avec un gros

exercice qui correspond à la création d’un site web personnel ou « site
CV » en HTML et en CSS.

Cet exercice va réutiliser beaucoup de notions vues dans ce cours et va

également me permettre d’introduire les quelques points de détails
concernant le HTML et le CSS dont je n’ai pas encore pu parler.

Déroulé de l’exercice
Comme souvent lorsque l’on doit mener à bien un projet (informatique), nous
allons suivre différentes phases.

Nous commencerons d’abord avec une période de réflexion durant laquelle

nous établirons précisément ce que l’on souhaite et ferons la liste de ce qu’il
va nous falloir pour y parvenir.

Ensuite, nous attaquerons le squelette HTML de notre site dans son

ensemble, page par page.
Nous ne mettrons en forme avec le CSS qu’une fois le squelette HTML de
chaque page terminé : rappelez vous qu’on bâtit toujours les murs d’une
maison avant de passer la couche de peinture.

Commençons donc déjà par la phase de réflexion.

Réfléchir au résultat voulu

Nous voulons donc ici créer un site web personnel, qui va servir à nous
présenter et à présenter nos compétences et expériences.

Nous sommes limités dans cet exercice par une chose : nous n’avons le droit
de n’utiliser que le HTML et le CSS.

Nous voulons un site moderne qui s’adapte selon les tailles d’écran ( donc un
site responsive).

Notre site comportera quatre pages :

 Une page d’accueil ;

 Une page décrivant nos expériences professionnelles ;

 Une page décrivant nos loisirs ;

 Une page de contact.

La page d’accueil nous servira de page de CV : nous nous présenterons et

mettrons en avant notre formation et nos compétences.

LES PARTIES FIXES DE NOTRE

SITE
Explication du schéma de travail
Comme notre projet de création de site personnel en HTML et en CSS n’est
pas d’une difficulté absolue, nous allons pouvoir alterner les étapes HTML /
CSS pour chaque page afin de rendre ce tutoriel plus concret et plus
intéressant pour vous.

En effet, nos pages auront des designs et des codes différents les unes des
autres, à l’exception de certaines parties « fixes ». On va donc pouvoir
travailler sur chaque page séparément.

Commençons déjà par créer nos quatre pages HTML qui vont constituer notre
site.

Nous allons appeler ces pages :

 index.html  ;

 experiences-pro.html  ;

 hobbies.html  ;

 contact.html .

On peut également d’ores-et-déjà créer une page  style.css  que nous

remplirons plus tard.

Pour simplifier le tout, je vous invite à mettre tous ces fichiers dans le même
dossier comme ceci :
Comme vous pouvez le voir, j’ai également créé un dossier « imgs » dans le
dossier contenant les différentes pages de notre site.

Nous placerons toutes les images de notre site dans ce sous-dossier.

Création du header, footer et menu

Nous allons déjà commencer par créer les parties « fixes » de notre site,
c’est-à-dire les parties qui vont être identiques sur chaque page de notre site.

Généralement, ce seront le haut de page avec le menu ainsi que le pied de

page.

Nous allons créer ces parties dans la page  index.html , puis nous copierons et
collerons le code dans les autres pages de notre site.

Notez que cette façon de procéder n’est toutefois pas optimale.

En pratique, nous écririons les codes correspondant à notre haut de page,
menu et pied de page dans des fichiers différents et nous inclurions ces
fichiers grâce au PHP.

Cependant, je pars du principe pour cet exercice que vous ne connaissez que
le HTML et le CSS. Nous allons donc être obligé de procéder en copiant et en
collant.

Voici donc le code correspondant à ces parties :

On commence, comme à notre habitude, par créer la structure minimale

d’une page en HTML afin que celle-ci soit valide.
Nous profitons déjà ici de créer le lien vers notre fichier CSS grâce à
l’élément  link  et on précise également un  meta name="viewport"  pour mettre
nos pages à l’échelle.

Notez également qu’on ajoute un attribut  lang  à notre élément  html . Cela va
donner une indication aux moteurs de recherche sur la langue utilisée dans
nos pages web. Pour le français, le code est « fr-FR ».

Ensuite vous remarquez qu’on utilise trois éléments

HTML  header ,  nav  et  footer  à l’intérieur de notre élément  body .

Ces éléments sont des éléments HTML structurants qui sont apparus avec
HTML5.

Les éléments structurants du HTML5

Le rôle des éléments structurants est de diviser le contenu d’une page en
différentes parties selon un ordre logique.

Ces éléments sont de type block et peuvent ainsi remplacer certains de nos
éléments  div .

Voici la liste complète des éléments HTML structurants ainsi que leur cas
d’utilisation. Je vous encourage fortement à vous aussi les utiliser.

Nom de
Cas d’utilisation
l’élément

header Utilisé pour définir le haut de page (menu exclus)

nav Utilisé pour définir le menu principal de navigation d’une pag

Représente une section dans une page, c’est-à-dire un

section
thématique de contenu
 Représente une partie de page qui se suffit à elle même, co
article
sur un blog par exemple

Représente une section de page indirectement liée aux au

aside
une mini-biographie d’un auteur sur un blog par exemple

footer Utilisé pour définir le pied d’une page HTML

Vous pouvez noter plusieurs choses à propos de ces éléments structurants.

Premièrement, chaque élément structurant va agir comme entité à part

entière.

Cela signifie qu’on va par exemple pouvoir définir un titre  h1  à l’intérieur de

chacun de nos éléments structurants dans une page, mais également qu’un
élément  section  par exemple peut lui-même contenir un élément  header , un
élément  nav , un élément  aside , etc.

De plus, certains de ces éléments peuvent se contenir l’un l’autre. Par

exemple, un élément  section  peut contenir différents éléments  article  mais
un élément  article  peut également contenir différents éléments  section  si
cela fait du sens.

Au final, il faut bien vous interroger à l’avance sur le sens que vous voulez
donner à vos pages et bien définir leurs contenus pour bien les structurer.

Utiliser les éléments structurants du HTML5 dans

nos pages
Dans notre cas, nous nous contentons d’écrire un titre dans notre
élément  header .
Faites bien attention à ne pas confondre les éléments  header  et  head  !
L’élément  header  sert bien à définir l'en-tête du contenu « visible » de notre
page et se situe dans l’élément  body .

Ensuite, nous créons notre menu à l’intérieur de notre élément  nav .

Pour cela, nous utilisons de façon classique un élément  ul  pour définir notre
menu en soi et des éléments  li  pour chaque élément de notre menu.

Dans nos éléments  li , nous créons des liens avec des éléments  a  afin que
nos éléments de menu renvoient bien vers les autres pages de notre site.

Nous précisons déjà des attributs  class  pour nos éléments  li  afin de préparer
le terrain pour la mise en forme en CSS.

De même, nous insérons un  div  qui englobe notre menu. Celui-ci nous
permettra plus tard de centrer le menu dans notre page en CSS.

Finalement, nous plaçons une ligne de texte dans l’élément  footer .

Vous pouvez ici, si vous le souhaitez, insérer des liens vers vos réseaux
sociaux, etc.

Voilà tout pour les éléments « fixes » de notre site. Vous pouvez ici copier ce
contenu et le coller dans vos quatre pages HTML, en modifiant juste le
contenu de l’élément  title  afin d’avoir un titre qui reflète le contenu de
chaque page.

Voici le résultat si vous l’affichez dans votre navigateur :

Evidemment, sans CSS, ce n’est pour le moment pas très engageant, mais
patience !

Mise en forme CSS générale de notre site

Afin de rendre ce tutoriel immédiatement intéressant pour vous, nous
pouvons déjà commencer à mettre en forme en CSS les parties fixes de notre
site.

Cependant, retenez une nouvelle fois qu’il est généralement déconseillé de

travailler comme cela en temps normal, sous peine d’avoir un code mal
construit et de perdre beaucoup de temps au final dans la majorité des cas.
Ici, je me permets de faire cela car je connais exactement tous les codes
utilisés dans cet exercice à l’avance.

Commençons avec les styles généraux et ceux de nos  header  et  footer .

On commence par définir des polices d’écriture pour notre site.

On effectue également un reset CSS des marges intérieures et extérieures de

notre élément  body  afin d’avoir le même rendu sur tous les navigateurs
(certains ajoutent automatiquement une petite marge).

Ensuite, on centre nos titres  h1  et on les met en forme.

On effectue également une mise en forme minimale du  header  et

du  footer  de notre site.
Pour le menu, le code est un peu plus long. On commence déjà par mettre les
éléments de notre menu en ligne et par enlever les puces devant les
éléments de liste.

On va ensuite également effectuer un reset des marges de notre élément de

liste  ul .

On étend notre élément  nav  et on lui donne une couleur de fond :

Ensuite, nous allons mettre en forme nos éléments de lien, c’est-à-dire nos
éléments  a .

On commence par enlever le trait de soulignement avec la propriété  text-

decoration .
Ensuite, on change la couleur des textes pour qu’ils soient bien lisibles, ainsi
que la taille et on met l’écriture en majuscules avec la propriété  text-
transform .

Finalement, on change le type de nos éléments  a  en inline-block afin de leur

appliquer un gros padding. Cela va avoir pour effet d’aérer notre menu tout
en gardant tout l’espace autour du texte cliquable.

Ensuite, on veut centrer notre menu dans notre page. Pour cela, nous allons
devoir appliquer un  display : table et un  margin : 0
auto  au  div  intermédiaire que nous avions créé.

Arrivé ici, nous avons fait le plus gros du travail. Il ne nous reste plus qu’à
ajouter un style spécifique pour chacun de nos éléments de menu.

Nous allons simplement appliquer une bordure en haut des éléments de

menu ainsi qu’une couleur de fond en semi-transparence lors du survol de
l’élément en question :
Comme la bordure déplace nos éléments de menu de sa hauteur lors du
survol, on ajoute une marge intérieure spécifique lors du survol des éléments
de menu pour contrebalancer l’effet de la bordure.

Voilà tout pour notre menu, et pour les parties fixes de notre site.

Voilà à quoi cela ressemble pour le moment :

Concernant l’aspect responsive de notre site, nous allons faire très simple
pour le moment en nous contenant de réduire les dimensions et écarts entre
nos différents éléments afin que le site s’affiche également bien sur mobile.

On se permet de faire comme cela car nos éléments de menu prennent peu
de place. Pour créer un véritable menu responsive, je vous invite à regarder
l’exercice qui y est consacré sur ce site.
En voilà donc le résultat sur Smartphone :
SQUELETTE HTML ET MISE EN
FORME CSS DE NOTRE PAGE
D'ACCUEIL

Le résultat final
Afin que vous compreniez dès le début pourquoi on fait telle ou telle chose, et
que ce tutoriel vous soit le plus bénéfique, je vais déjà vous montrer le
résultat auquel on souhaite parvenir.
La meta description et les sections
Nous allons à présent nous attaquer au code HTML spécifique à la
page  index.html .

Nous allons commencer par rajouter un élément  meta

name="description"  dans l’élément  head  de notre page.

La meta description va être un petit texte qui va être affiché dans les
résultats de recherche des moteurs de recherche (Google par exemple), sous
le titre de votre site.

La meta description ne doit pas excéder 160 caractères (en valeur de

l’attribut  content ) et devrait contenir des mots clefs et expliciter le contenu
de votre page.

Je ne le répèterai pas, mais nous ferons évidemment de même avec nos

autres pages.

J’aimerais afficher quatre sections dans ma page  index.html  :

 une première section de présentation ;

 une deuxième section où je détaille mon parcours et mes expériences

professionnelles ;

 une troisième section où je présente mes compétences ;

 une dernière partie contenant des recommandations de mes anciens

employeurs.

Pour faire cela, nous allons utiliser quatre éléments HTML  section  et allons
placer le tout à l’intérieur d’un élément  article , car le tout peut faire office de
CV et donc se suffit à lui même.

Nous allons placer l’élément  article  juste sous l’élément  nav .

La section présentation de notre site HTML
Dans la première partie de présentation, j’aimerais afficher ma photo à
gauche et un texte de présentation à droite.

Je vais donc découper cette section en deux avec deux éléments  div .
Une nouvelle fois, je rajoute un  div class="sec"  et des attributs  class  et  id  à
mes éléments  div  et  section car je sais que je vais ensuite en avoir besoin en
CSS pour la mise en page.

Comme toutes mes images sont dans mon sous dossier « imgs », je pense
bien à en tenir compte dans la valeur de mon attribut  src .

La section expériences de notre site HTML

La deuxième section de ma page d’accueil va contenir mon parcours scolaire
et mes expériences professionnelles.

Là encore, je vais séparer ma section en deux avec des dates sur la gauche et
les expériences correspondant aux dates sur la droite.

Cependant, ici, afin que les dates soient bien alignées par rapport aux
expériences, nous allons utiliser un  div intermédiaire de plus à chaque fois
pour englober la date et l'expérience correspondante ensemble.
J’expliquerai mieux le pourquoi de chaque  div  lorsque nous passerons au
CSS. Pour l’instant, je veux simplement vous montrer l’intérêt et l’efficacité
d’une bonne réflexion avant de se lancer dans un projet.
La section compétences de notre site HTML
La troisième section de ma page doit présenter mon niveau de compétences
relativement à certains sujets. Ici, je vais utiliser plus ou moins la même mise
en forme que pour ma section précédente à l’exception près qu’on va vouloir
afficher deux compétences sur la même ligne.

On va donc avant tout séparer la section en deux parties, puis ensuite mettre
en forme chaque partie sur le même schéma que précédemment.
La section recommandations de notre site HTML
Finalement, la dernière section de ma page d’accueil va contenir des
témoignages et des recommandations de mes anciens employeurs,
professeurs ou clients.

On va vouloir mettre des extraits de recommandations et les

recommandations complètes en tant que fichiers à télécharger.
On va donc une nouvelle fois séparer notre section en deux sur le même
schéma que notre première section.

Voilà tout pour notre page  index.html . Ce sera déjà pas mal pour
commencer !

Mise en forme CSS de notre page index.html

Il est maintenant temps de passer à la mise en page en CSS de la page qu’on
vient de créer.

Nous allons déjà commencer par définir la largeur de nos sections, ainsi que
la hauteur minimale et les marges intérieures et extérieures.
Ensuite, nous allons rajouter des marges gauche et droite à nos
div  class="sec"  afin de centrer un peu le contenu des sections.

On précise ici des valeurs en pourcentage afin de simplifier le passage en

responsive par la suite.

Nous allons après devoir organiser chacune de nos sections.

Nous allons déjà faire flotter tous nos  div  de sous-section. En effet, rappelez
vous que nous avons utilisé des  div pour "couper" chacune de nos sections en
deux (ou en quatre).

Nous allons maintenant faire flotter tous ces  div  afin que les contenus se
placent côte à côte.

Nous avons séparé nos sections en deux avec  div class="left"  et  div
class="right" .

Dans ce cas, on veut que la sous section gauche occupe 30% de l’espace
disponible et la section droite les 70% restants.
Ici, la section compétence est un peu particulière puisqu’on la découpe en
deux puis à nouveau en deux.

Dans ce cas, on veut que chacune des quatre parties de section occupe 25%
de l’espace disponible.

On applique donc un  width : 50%  aux  div  qui coupent la section en deux et à
nouveau 50% pour les  div  qui recoupent en deux.

Arrivé ici, on se heurte à un problème : nos  div  de section contiennent des
enfants flottants. Or, en CSS, tout parent non flottant qui possède des enfants
flottants va collapser.

Pour empêcher ce comportement, nous allons utiliser le clearfix CSS suivant

sur le  div  parent en question :

Vous pouvez déjà observer le résultat dans votre navigateur : tout est bien
placé !
Cela n’est pas un miracle : c’est dû au fait que nous avons construit notre
code HTML avec une idée précise de ce que nous souhaitions obtenir.

Il ne nous reste plus qu’à ajouter un peu de couleur et des délimiteurs.

Pour cela, je vous propose de reprendre le thème du menu en utilisant

finalement nos  id  de section :

Nous arrivons finalement au résultat voulu :

Ce qui est parfait, dans notre cas, est qu’on peut redimensionner notre page
à loisir : comme nous avons utilisé des valeurs relatives en CSS au bon
moment et comme notre code est bien organisé, nous n’avons même pas à
créer de règles supplémentaires pour gérer l’aspect responsive !
Création des autres pages de
notre site CV en HTML et CSS

Quatre pages, un design

La création des autres pages de notre site va être beaucoup plus rapide.

En effet, nous allons récupérer le schéma général de notre première page et

emprunter le design de celle-ci pour créer nos autres pages.

Le but de cet exercice, encore une fois, n’est pas d’en mettre « plein la vue »
question CSS, mais simplement de créer un site agréable et fonctionnel.

La page experiences-pro.html
Dans la page  experiences-pro.html , nous allons détailler nos expériences
professionnelles.

Pour cela, on peut par exemple décrire l’activité de nos anciens employeurs,
créer un lien vers leur site web, décrire les tâches que nous avons effectuées,
etc.

Pour ma part, je vais détailler seulement deux expériences professionnelles.

Je souhaite pour chacune d’entre elles afficher une photo à gauche qui me
servira de lien et un texte à droite.

Je vais donc utiliser deux éléments  section  entre les éléments  nav  et  footer ,
que je vais ensuite diviser en deux avec deux  div .

Voilà donc le code HTML complet de cette page :

Rien de bien particulier ici. Vous pouvez remarquer qu’on utilise, comme dans
la page précédente, des  div class="sec"  afin de récupérer une partie du code
CSS créé précédemment.

Côté CSS, ça va être également très court. Nous allons réutiliser le design
général de notre page d’index pour cette page.

Ici, on demande donc à notre  div  représentant la partie gauche de la section

d’occuper 45% de l’espace disponible et de flotter, tandis que
le  div  représentant la partie droite occupera 50% (plus la marge de 5%).

Ensuite, on donne une taille en pourcentage à nos images afin que celles-ci se
redimensionnent automatiquement avec la fenêtre, mais on leur demande de
ne jamais excéder 400px de large (ce qui est la taille de base de nos images)
afin que celles-ci ne pixellisent pas.
Le code CSS correspondant au  div class="sec"  est évidemment également
réutilisé puisque nous n’avons qu’une page CSS.

Voilà finalement le résultat :

La page hobbies.html
Pour la page de loisirs, nous allons à nouveau utiliser le même schéma
général.

Nous allons donc utiliser un nouvel élément  section  par loisir, et afficher à
chaque fois une image et un petit texte.

Simplement, cette fois-ci, nous allons alterner la place de l’image et du texte.

Voici donc le code HTML de cette page (sans les parties fixes cette fois-ci) :
On réutilise les  div class="sec" ,  div class="rightexp"  et  div
class="leftexp"  utilisés précédemment.
Dans notre deuxième section, nous inversons simplement l’ordre d’écriture
des  div  rightexp et leftexp afin de changer la position de notre texte et de
l’image.

En CSS, c’est une nouvelle fois très court et très simple, puisqu’on réutilise
évidemment le code écrit précédemment :

Et voilà donc le résultat final pour cette page :

La page contact.html
Il ne nous reste plus qu’à nous occuper de la page de contact.

Comme nous ne connaissons pas le PHP, nous ne pouvons pas encore créer
de formulaires d’envoi de mail.

Nous allons donc simplement nous contenter d’écrire notre mail, en

remplaçant le « @ » par un « [at] » pour éviter que des robots polluent notre
messagerie.

En HTML, nous avons donc tout simplement ceci (sans les parties fixes) :

Et en CSS, nous avons donc ça :

Voilà donc le résultat final pour cette page très épurée.

Conclusion de l’exercice et du
cours

L’importance de la préparation
Nous venons donc de créer un site complet en HTML et en CSS, qui pourra
vous servir de site personnel ou de CV interactif.

Une nouvelle fois, l’objectif n’était pas de faire quelque chose d’extrêmement
compliqué ou perfectionné, mais simplement un site fonctionnel et assez joli.

Comme vous avez pu le constater, le « début » du site a été beaucoup plus

long à créer que la fin. Cela, une nouvelle fois, est dû au fait que nous avons
réutilisé beaucoup de codes déjà créés dans nos dernières pages.

J’espère donc à ce niveau que vous avez bien compris tout l’intérêt et
l’importance d’une bonne préparation en amont ; l’importance de ne se
lancer dans le code immédiatement mais de bien réfléchir à ce que l’on
souhaite auparavant.

Progresser grâce à la pratique

Vous êtes à présent totalement armé au niveau théorique en HTML et en CSS.

Cependant, on ne devient développeur qu’en développant.

Je vous encourage donc tout d’abord à refaire les différents exemples de ce

cours si jamais vous n’êtes pas à l’aise avec certains d’entre eux puis tout
simplement à pratiquer et à pratiquer encore.

En effet, vous devez vous confronter aux difficultés pour progresser, et non
pas les esquiver.

En ce sens, n’hésitez pas à modifier le code du site que l’on vient tout juste
de créer, à l’enrichir et à le perfectionner afin de rendre le site totalement
conforme à vos attentes.

Mettre son site en ligne

Une fois votre site terminé, vous voudrez peut être le mettre en ligne afin que
tout le monde puisse y accéder.

Pour cela, vous devrez acheter un nom de domaine ainsi qu’un espace
serveur.

N’hésitez pas à consulter la section « hébergement » de ce site afin de faire

le bon choix et de bien installer votre site !

Conclusion et remerciements
Merci à tous d’avoir suivi ce cours !

Comme vous avez pu le voir, celui-ci est véritablement complet et vous a été
fourni gratuitement.

N’hésitez donc pas en contrepartie à partager ce site à vos amis ou à me

soutenir (via l’onglet dédié). Toutes ces aides sont très appréciées et me
permettent de continuer à vous proposer des cours de cette qualité.

Encore merci et à bientôt pour un prochain cours !

 Question n°1 :

Le rôle du HTML est de...

1. Mettre en forme du texte

2. Ordonner du contenu

3. Créer des sites e-commerce

Afficher la réponse

Réponse 2. Le HTML est un langage de balisage. Son rôle est de donner du

sens et de structurer du contenu, afin d'indiquer à un navigateur comment
celui-ci doit afficher la page.

Question n°2 :

Pour définir un titre DANS une page HTML, on utilise...

1. L'élément title

2. L'élément head

3. Un élément h1, h2, ... h6

Afficher la réponse

Réponse 3. Pour définir un titre dans une page HTML, on utilise un élément de
type "h". L'élément title est utilisé pour définir le titre DE la page (qui
s'affichera dans la barre haute du navigateur).
Question n°3 :

Pour créer un lien vers la page d'accueil de Wikipédia, on écrira...

1. <a target="http://wikipedia.org">Wikipédia</a>

2. <a href="http://wikipedia.org">

3. <a href="http://wikipedia.org">Wikipédia</a>

Afficher la réponse

Réponse 3. L'élément a est constitué d'une paire de balises (balises ouvrante

et fermante) ainsi que d'un contenu cliquable. Cet élément doit
obligatoirement être accompagné de son attribut href.

Question n°4 :

Lorsque vous utilisez l'élément a, vous devez obligatoirement préciser...

1. Un attribut target

2. Un attribut href

3. Deux attributs href et target

Afficher la réponse

Réponse 2. Seul l'attribut href est nécessaire au bon fonctionnement de

l'élément a.

Question n°5 :

Laquelle de ces syntaxes est correcte pour écrire un commentaire en HTML ?

1. <!--Commentaire-->
 2. <--Commentaire-->

3. <!--Commentaire--!>

Afficher la réponse

Réponse 1. Un commentaire en HTML va s'écrire de cette manière : <!--

Commentaire-->. Rappelez vous qu'on utilise un point d'exclamation
seulement au début de la balise.

Question n°6 :

Pour indiquer qu'un contenu est très important, on utilise l'élément...

1. Strong

2. Em

3. Mark

Afficher la réponse

Réponse 1. Nous allons utiliser l'élément HTML strong pour marquer un

contenu comme étant très important. L'élément em sert à indiquer qu'un
contenu est "plutôt important".

Question n°7 :

Quels éléments sont nécessaires pour créer une liste non-ordonnée ?

1. ul et li

2. ol et li

3. ul et ol

Afficher la réponse

Réponse 1. Pour créer une liste non-ordonnée, on utilise les éléments ul et li.
"ul" est l'abréviation de "unordered list", c'est-à-dire "liste non ordonnée" en
français. "li" signifie "list item", ou "élément de liste".
Question n°8 :

Laquelle de ces syntaxes est correcte ?

1. <img>src="mon-image.jpg" alt="Une image"</img>

2. <img src="mon-image.jpg" alt="Une image">

3. <img href="mon-image.jpg" alt="Une image">

Afficher la réponse

Réponse 2. L'élément img est représenté par une unique balise orpheline et
doit être obligatoirement accompagné de ses deux attributs src et alt.

Question n°9 :

A quoi sert l'attribut alt de l'élément img ?

1. A donner une description de l'image si celle-ci ne peut pas s'afficher

2. A donner un lien alternatif vers l'image si le premier est cassé

3. A afficher une deuxième image si la première ne peut pas s'afficher

Afficher la réponse

Réponse 1. L'attribut alt sert à décrire l'image. Cela est essentiel dans le cas
où l'image ne pourrait pas être affichée ainsi que pour les personnes mal
voyantes ou non voyantes.

Question n°10 :

Pourquoi doit-on toujours essayer d'avoir un code HTML valide ?

1. Pour minimiser le nombre de bugs potentiels

2. Pour optimiser son référencement

3. Pour éviter des problèmes d'affichage futurs

Afficher la réponse

Réponses 1, 2 et 3 !
Question n°1 :

Le rôle du CSS est de...

1. Mettre en forme du texte

2. Ordonner du contenu

3. Créer des sites e-commerce

Afficher la réponse

Réponse 1. Le CSS sert à mettre en forme du contenu, en y ajoutant des

"styles".

Question n°2 :

Quel est l'emplacement recommandé pour le CSS ?

1. Dans un élément HTML style

2. Dans un attribut HTML style

3. Dans un fichier ".css" séparé

Afficher la réponse

Réponse 3. Il est recommandé, pour des raisons de clarté et de maintenabilité

du code, d'écrire le code CSS dans un fichier séparé.

Question n°3 :

Qu'est ce que "color" en CSS ?

 1. Un sélecteur

2. Une propriété

3. Une déclaration

Afficher la réponse

Réponse 2. "color" est ce qu'on appelle une propriété CSS. Une propriété CSS
sert à modifier un style en particulier de nos éléments HTML.

Question n°4 :

Comment sélectionne t-on le div class="div1" en CSS ?

1. Avec le sélecteur "div1"

2. Avec le sélecteur "#div1"

3. Avec le sélecteur ".div1"

Afficher la réponse

Réponse 3. On peut sélectionner un élément possédant un attribut class en

CSS en précisant la valeur de l'attribut précédée d'un point.

Question n°5 :

Laquelle de ces propositions est exacte ?

1. On doit donner une valeur unique à un attribut id mais pas à des

attributs class

2. On doit donner une valeur unique à un attribut class mais pas à des
attributs id

3. On doit donner une valeur unique à chaque attribut class et id dans une
page
Afficher la réponse

Réponse 1. On peut tout à fait attribuer plusieurs attributs class avec la

même valeur à plusieurs éléments HTML. En revanche, c'est interdit avec
l'attribut id.

Question n°6 :

Un élément de type block...

1. Occupe toute la largeur disponible dans la page

2. N'occupe que la largeur nécessaire à son contenu

3. Occupe toute la largeur disponible dans son élément parent

Afficher la réponse

Réponse 3. Un élément de type block va par défaut occuper toute la largeur

qui lui est disponible, c'est à dire la largeur correspondant à son élément
parent.

Question n°7 :

Quelle est la différence majeure entre les éléments div et span ?

1. L'élément span est de type block, l'élément div est de type inline

2. L'élément div est de type block, l'élément span est de type inline

3. L'élément div sert de conteneur, au contraire de l'élément span

Afficher la réponse

Réponse 2. Les éléments div et span peuvent tous les deux servir de
conteneurs pour des contenus différents. Cela est dû a fait que div est un
élément block et span est un élément inline.
Question n°1 :

Pourquoi doit-on préciser plusieurs valeurs pour la propriété font-family ?

1. Pour laisser la possibilité à l'utilisateur de choisir celle qu'il préfère

2. Car certaines polices peuvent ne pas être lues par un navigateur

3. Il n'est pas nécessaire de préciser plusieurs valeurs

Afficher la réponse

Réponse 2. Certaines versions de certains navigateurs peuvent ne pas

supporter des polices spécifiques. Pour cela, nous préciserons toujours
plusieurs noms de police en valeur de font-family.

Question n°2 :

Pourquoi utiliser les Google Fonts ?

1. Car Google favorisera notre site si on utilise une de ses polices

2. Car les polices de Google sont plus jolies

3. Car ces polices vont pouvoir être lues par tous les navigateurs

Afficher la réponse

Réponse 3. En utilisant une police de Google, vous êtes assuré que tous vos
utilisateurs pourront lire votre contenu.
Question n°3 :

A quoi sert la propriété font-weight ?

1. A modifier le poids d'une police

2. A modifier l'inclinaison d'une police

3. A modifier la taille d'une police

Afficher la réponse

Réponse 1. La propriété font-weight, comme son nom l'indique, va nous

permettre de gérer le poids d'une police (mise en gras, etc.).

Question n°4 :

Quelle est la différence entre les valeurs de type RGB et RGBa

1. RGB utilise des notations hexadécimales, ce qui n'est pas le cas de

RGBa

2. RGB gère la transparence à l'inverse de RGBa

3. RGBa gère la transparence à l'inverse de RGB

Afficher la réponse

Réponse 3. Les valeurs RGBa acceptent un paramètre qui nous permet de

définir le niveau d'opacité d'un texte.

Question n°5 :
Que représentent les deux premiers chiffres composant une notation
hexadécimale ?

1. Une intensité de rouge

2. Une intensité de bleu

3. Une intensité de vert

Afficher la réponse

Réponse 1. Les deux premiers chiffres représentent l'intensité de rouge dont

va être composée notre couleur, les deux suivants l'intensité de vert et les
deux derniers l'intensité de bleu.

Question n°6 :

Généralement, on donne une valeur à line-height égale à...

1. La taille de notre texte

2. 1,5 fois la taille de notre texte

3. 2 fois la taille de notre texte

Afficher la réponse

Réponse 2. Il est considéré comme une bonne pratique de régler la valeur du

line-height à 1,5 fois la taille de nos textes.

Question n°7 :

Combien faut il donner de valeurs à text-shadow ?

1. 2 valeurs
 2. 3 valeurs

3. 4 valeurs

Afficher la réponse

Réponse 3. Il faut donner 4 valeurs à text-shadow. Les trois premières valeurs

vont définir l'emplacement et la taille de l'ombre, tandis que la dernière
définit sa couleur.

Question n°8 :

Les trois premières valeurs de text-shadow servent à indiquer, dans l'ordre...

1. La projection horizontale de l'ombre, la projection verticale de l'ombre

et le rayon de propagation de l'ombre

2. La projection verticale de l'ombre, la projection horizontale de l'ombre

et le rayon de propagation de l'ombre

3. La projection horizontale de l'ombre, la projection verticale de l'ombre

et la couleur de l'ombre

Afficher la réponse

Réponse 1. Les quatre valeurs de text-shadow servent à préciser dans l'ordre

la projection horizontale de l'ombre, la projection verticale de l'ombre, le
rayon de propagation de l'ombre et la couleur de l'ombre.
Question n°1 :

Lorsqu'on définit "width:75%" pour un élément en CSS, cela signifie...

1. Que l'élément va occuper une 75% de la largeur totale de la page

2. Que l'élément va occuper une 75% de sa largeur par défaut

3. Que l'élément va occuper une 75% de la largeur de son élément parent

Afficher la réponse

Réponse 3. Lorsqu'on définit des valeurs en pourcentage en CSS, cela est

toujours relativement à la valeur de l'élément conteneur ou parent.

Question n°2 :

Quel va être l'aspect d'une bordure si on la crée en utilisant la valeur

dashed ?

1. Bordure en pointillés

2. Bordure sous forme de tirets

3. Bordure avec un effet 3D

Afficher la réponse

Réponse 2. La valeur dashed de la propriété border sert à créer des bordures

constituées de tirets.
Question n°3 :

Quelle propriété nous permet de créer des bordures arrondies ?

1. Border-style

2. Border-radius

3. Radius

Afficher la réponse

Réponse 2. La propriété border-radius va nous permettre d'arrondir une

bordure déjà définie avec la propriété border.

Question n°4 :

Que représente le padding d'un élément ?

1. La marge intérieure

2. La marge extérieure

3. Le contenu de l'élément

Afficher la réponse

Réponse 1. La padding représente la marge intérieure d'un élément HTML. La

marge extérieure est définie par margin.

Question n°5 :

Si on ne donne que deux valeurs à la propriété padding, la première valeur

représente...
 1. La marge intérieure haute

2. Les marges intérieures droite et gauche

3. Les marges intérieures haute et basse

Afficher la réponse

Réponse 3. Lorsqu'on indique que deux valeurs à padding (ou à margin), la

première valeur représente la taille des marges haute et basse, tandis que la
seconde représente celle des marges droite et gauche.

Question n°6 :

A quoi sert la valeur inset de la propriété box-shadow ?

1. A créer une ombre centrée autour de la boîte

2. A créer une ombre intérieure

3. A déterminer le rayon de projection de notre ombre

Afficher la réponse

Réponse 2. La valeur inset va nous servir à projeter une ombre vers l'intérieur
de notre boîte.

Question n°7 :

Que se passe t-il si j'applique "display:none" à un élément ?

1. L'élément est effacé du code de ma page HTML

2. Le type de display de l'élément n'est pas modifié

3. L'élément ne sera pas affiché dans le navigateur

Afficher la réponse

Réponse 3. Appliquer un display:none à un élément va faire que l'élément ne

s'affichera pas lors de l'affichage de la page dans un navigateur.

Question n°8 :

On ne peut pas utiliser les propriétés top, right, bottom et left sur un élément
quand...

1. Nous n'avons pas utilisé la propriété position sur l'élément

2. L'élément a été positionné avec position:relative

3. L'élément a été positionné avec position:absolute

Afficher la réponse

Réponse 1. Les propriétés top, right, bottom et left ne s'appliqueront pas sur
un élément possédant un positionnement "static". Or, les éléments HTML
possèdent justement ce positionnement par défaut.

Question n°9 :

Appliquer un "clear:left" à un élément est utile pour...

1. Empêcher l'élément de se placer à côté d'un élément possédant un

float:left

2. Empêcher l'élément de se placer à côté d'un élément possédant un

float:right

3. Faire flotter l'élément à gauche

Afficher la réponse
Réponse 1. La propriété clear est utilisée pour empêcher des éléments de
venir se placer aux côtés d'éléments positionnés avec float. clar:left va
neutraliser l'effet d'un float:left.

Question n°1 :

Laquelle de ces propriétés CSS nous permet de changer la couleur de fond

d'un élément ?

1. color

2. background-color

3. background-image

Afficher la réponse

Réponse 2. On va pouvoir changer la couleur de fond d'un élément avec la

propriété CSS background-color.

Question n°2 :

Par défaut, une image de fond se répète...

1. Horizontalement

2. Pas du tout

3. Horizontalement et verticalement

Afficher la réponse

Réponse 3. Par défaut, une image de fond va se répéter jusqu'à remplir le

fond de l'élément auquel elle est appliquée, en largeur comme en hauteur.
Question n°3 :

Comment ajouter plusieurs images de fond pour un même élément ?

1. En réécrivant toutes les déclarations CSS deux fois

2. En n'écrivant qu'une fois les propriétés et en séparant les valeurs pour

chaque image par une virgule

3. Ce n'est pas possible

Afficher la réponse

Réponse 2.On va pouvoir ajouter autant d'images de fond qu'on le souhaite à

un même élément HTML. Il suffit dans ce cas de séparer les différentes
valeurs relatives à chaque image par une virgule pour chaque propriété.

Question n°4 :

A quoi sert un préfixe vendeur ?

1. A vendre plus pour un site e-commerce

2. A forcer la compatibilité d'une propriété CSS pour certaines versions de

certains navigateurs

3. A créer des dégradés pour tous les navigateurs

Afficher la réponse

Réponse 2. Les préfixes vendeurs vont pouvoir être utilisés afin que
d'anciennes versions de certains navigateurs puissent lire certaines
propriétés CSS récentes.
Question n°5 :

Quel est le préfixe vendeur de Mozilla Firefox ?

1. -webkit-

2. -o-

3. -moz-

Afficher la réponse

Réponse 3. -webkit- est la préfixe utilisé pour Chrome et Safari tandis que -o-
est le préfixe pour le navigateur Opéra.

Question n°6 :

Quelle syntaxe allons nous utiliser pour créer un dégradé linéaire

jaune/orange/rouge du coin supérieur gauche vers le coin inférieur droit d'un
élément ?

1. background: -webkit-linear-gradient(top left, yellow,orange,red); 

background: -o-linear-gradient(bottom right, yellow,orange,red); 
background: -moz-linear-gradient(bottom right, yellow,orange,red); 
background: linear-gradient(to bottom right, yellow,orange,red);

2. background: -webkit-linear-gradient(bottom right, yellow,orange,red); 

background: -o-linear-gradient(bottom right, yellow,orange,red); 
background: -moz-linear-gradient(bottom right, yellow,orange,red); 
background: linear-gradient(to bottom right, yellow,orange,red);

3. background: -webkit-linear-gradient(top left, yellow,orange,red); 

background: -o-linear-gradient(bottom right, yellow,orange,red); 
background: -moz-linear-gradient(bottom right, yellow,orange,red); 
background: linear-gradient(bottom right, yellow,orange,red);

Afficher la réponse
Réponse 1. Avec le préfixe -webkit-, il faut bien indiquer le point de départ du
dégradé. La propriété non préfixée nécessite elle l'emploi du mot clef "to".

Question n°7 :

Qu'est-ce qu'un dégradé radial ?

1. Un dégradé qui se fait dans toutes les directions à partir d'un point
central

2. Un dégradé qui part d'un centre dans une certaine direction

3. Un dégradé qui part d'une direction vers une autre

Afficher la réponse

Réponse 1. Un dégradé radial part d'un point central dans toutes les
directions.

Question n°8 :

Un dégradé radial ne peut pas être de forme...

1. Circulaire

2. Elliptique

3. Triangulaire

Afficher la réponse

Réponse 3. On peut définir un dégradé radial afin qu'il soit en forme de cercle
ou d'ellipse uniquement.
Question n°1 :

Lequel de ces éléments sert à créer une nouvelle ligne dans un tableau
HTML ?

1. L'élément table

2. L'élément tr

3. L'élément td

Afficher la réponse

Réponse 2. L'élément table sert à définir le tableau HTML en soi tandis que
l'élément td sert à définir les cellules d'un tableau.

Question n°2 :

Quelle propriété CSS utilise t-on pour "coller" les bordures d'un tableau ?

1. La propriété border

2. La propriété border-radius

3. La propriété border-collapse

Afficher la réponse

Réponse 3. On utilise la propriété CSS border-collapse et sa valeur "collapse"

afin de coller les bordures des cellules de notre tableau entre elles.
Question n°3 :

Quel élément HTML sert à définir une ligne d'en tête pour notre tableau ?

1. L'élément tr

2. L'élément th

3. L'élément thead

Afficher la réponse

Réponse 2. L'élément th sert spécifiquement à définir une ligne d'en tête

dans un tableau. L'élément thead, lui, est utiilsé pour structurer un tableau en
le séparant en différentes parties.

Question n°4 :

Dans quel ordre écrit-on les éléments suivants généralement en HTML ?

1. thead, tfoot puis tbody

2. thead, tbody puis tfoot

3. tbody, thead puis tfoot

Afficher la réponse

Réponse 1. Lorsqu'on structure un tableau en HTML avec les éléments thead,

tbody et tfoot il est considéré comme une bonne pratique d'écrire ces
éléments dans l'ordre suivant : thead, tfoot puis tbody. Pas d'inquiétude, dans
le rendu final, la navigateur saura qu'il faut afficher le contenu du tfoot après
celui du tbody.
Question n°5 :

Comment faire en sorte qu'une cellule occupe l'espace de trois colonnes dans
un tableau HTML ?

1. En utilisant colspan = "3"

2. En utilisant rowspan = "3"

3. En crivant deux cellules vides après cette cellule dans notre tableau

Afficher la réponse

Réponse 1. L'attribut colspan sert à fusionner plusieurs cellules d'une même

ligne entre elles, ou encore à faire qu'une cellule occupe un espace en largeur
de plusieurs colonnes.

Question n°6 :

Lequel de ces éléments HTML sert à ajouter une légende à un tableau HTML ?

1. L'élément legend

2. L'élément figcaption

3. L'élément caption

Afficher la réponse

Réponse 3. Pour ajouter une légende à un tableau, on utilisera un élément

caption qu'on placera juste après la balise ouvrante de l'élément table.
Question n°1 :

Citez trois manières pour faire qu'une image occupe sa propre ligne

Afficher la réponse

On peut encadrer notre image avec un élément de type block, utiliser

"display:block" sur notre image ou encore faire flotter notre image et utiliser
un clear sur l'élément suivant celle-ci.

Question n°2 :

Pourquoi doit-on toujours préciser différents formats audio / vidéo en HTML ?

Afficher la réponse

Tout simplement car il n'existe pas de format audio ou vidéo universellement

supporté par les anciennes versions des navigateurs les plus utilisés. Nous
indiquons donc plusieurs formats afin que le navigateur puisse "choisir" celui
qu'il supporte.

Question n°3 :
Pourquoi n'est-on pas obligé de préciser de valeur pour certains attributs
HTML ?

Afficher la réponse

Certains attributs HTML ne possèdent qu'une valeur (qui correspond alors au

nom de l'attribut lui-même). Dand ce cas, cette valeur est dite implicite et
nous ne sommes pas obligés de la préciser. Cependant, il est considéré
comme une bonne pratique de toujours préciser le couple attribut="valeur"
en HTML. N'oubliez jamais qu'un attribut possède toujours une valeur.

Question n°4 :

Lequel de ces attributs permet de faire se répéter en boucle une piste audio
ou une vidéo ?

1. L'attribut preload

2. L'attribut loop

3. L'attribut autoplay

Afficher la réponse

Réponse 2. L'attribut preload sert à précharger un fichier audio ou vidéo

tandis que autoplay sert à lancer automatiquement un fichier audio ou vidéo
dès que celui-ci est chargé.

Question n°5 :

Quels sont les trois formats audio les plus utilisés et les mieux supportés ?

Afficher la réponse
Ce sont les formats mp3, ogg et wav.

Question n°6 :

Lequel de ces attributs nous permet d'ajouter une image de fond à notre
vidéo (qui s'affichera avant son lancement) ?

1. L'attribut poster

2. L'attribut caption

3. L'attribut controls

Afficher la réponse

Réponse 1. On utilise l'attribut poster pour ajouter une image de fond qui
s'affichera avant le lancement d'un fichier vidéo.

Question n°7 :

Quel est l'intérêt majeur de télécharger vos fichiers sur des sites comme
YouTube, Daylimotion, etc. pour ensuite les intégrer sur votre site ?

Afficher la réponse

Il y a deux grands avantages à procéder comme cela. Tout d'abord, vous

laissez toute la partie encodage à ces sites (et comme vous pouvez vous en
douter, c'est bien fait). Ainsi, vous n'avez plus à vous préoccuper des
problèmes de compatibilité. Ensuite, vous évitez de surcharger votre espace
serveur puisque vos vidéos sont hébergées par ces sites plutôt que sur votre
serveur.
Question n°8 :

A quoi servent les éléments figure et figcaption ?

Afficher la réponse

Ces deux éléments servent avant tout à donner des informations sur nos
médias au navigateur (et au moteur de recherche). En effet, un navigateur ou
un moteur de recherche ne "comprend" pas le contenu d'une image ou d'une
vidéo à priori.
Question n°1 :

Qu'est-ce qu'une notation short hand en CSS ?

Afficher la réponse

Les notations short hand CSS sont des propriétés auxquelles on va pouvoir
attribuer plusieurs valeurs appartenant à d'autres propriétés d'un même
"type". Ainsi, nous allons pouvoir modifier plusieurs styles d'un coup d'un
élément HTML grâce aux notations short hand.

Question n°2 :

Le séléecteur CSS étoile (*) sert à...

1. Appliquer des bordures aux éléments

2. Sélectionner tous les éléments d'une page HTML

3. Sélectionner un élément possédant un attribut en particulier

Afficher la réponse

Réponse 2. Le sélecteur étoile est également appelé "sélecteur CSS universel"

car il sert à cibler tous les éléments HTML d'une page d'un coup.
Question n°3 :

Le sélecteur div + p sert à sélectionner...

1. Le premier élément p enfant d'un div

2. Tous les éléments p enfants dans un div

3. Tous les éléments p suivants un div (et de même niveau)

Afficher la réponse

Réponse 3. Le sélecteur div + p sert à sélectionner tous les éléments p

suivants directement un div dans notre page et étant de même niveau. Pour
sélectionner tous les paragraphes dans nos div, nous utiliserons le sélecteur
div p.

Question n°4 :

A quoi reconnait-on les pseudo classes en CSS ?

1. Elles commencent toutes par ":"

2. Elles commencent toutes par "::"

3. Elles possèdent toutes le mot "class" dans leur nom

Afficher la réponse

Réponse 1. Les pseudo classes CSS commencent toutes par ":", tandis que les
pseudo éléments commencent par "::".

Question n°5 :
A quoi sert la pseudo classe :hover ?

1. A modifier le style d'un élément lors du survol de la souris sur l'élément

2. A modifier le style d'un lien dès qu'il a été cliqué

3. A modifier le style d'un élément avant qu'on l'ait cliqué

Afficher la réponse

Réponse 1. La pseudo classe :hover va nous permettre d'appliquer des styles

spécifiques qui seront donnés à un élément dès qu'il sera survolé par la
souris.

Question n°6 :

A quoi sert le pseudo élément ::selection

1. A appliquer un style à un élément lors du survol de la souris

2. A appliquer un style à la première ligne d'un élément

3. A appliquer un style à la partie d'un élément sélectionnée par

l'utilisateur

Afficher la réponse

Réponse 3. Les styles définis à l'intérieur de ::selection ne seront appliqués à

un élément que lorsque celui-ci sera sélectionné par l'utilisateur (avec un
double clic de souris par exemple).

Question n°7 :

Pourquoi utiliser des sprites d'images ?

 1. Pour diminuer le nombre de requêtes envoyées au serveur

2. Par simplicité pour insérer des images

3. Car cela crée des images plus jolies

Afficher la réponse

Réponse 1. On utilise les sprites d'images afin de diminuer le nombre de

requêtes envoyées au serveur et ainsi d'optimiser la vitesse de nos sites.

Question n°8 :

Quelle est la grande différence entre une transition et une animation en CSS ?

Afficher la réponse

Pour créer une transition dans les valeurs d'une propriété CSS, il faut déjà que
la propriété en question connaisse à un moment donné un changement de
valeur, condition qui n'est pas nécessaire pour créer une animation.

Question n°9 :

Quelle précaution faut il prendre lorsqu'on utilise les transitions ou les

animations ?

Afficher la réponse

Les transitions et les animations sont deux fonctionnalités relativement

récentes du CSS. Ainsi, leur compatiiblité n'est pas optimale avec toutes les
versions des navigateurs les plus utilisés. Il faudra donc utiliser les préfixes
vendeurs avec ces propriétés.
Question n°1 :

Pourquoi touche t-on aux "limites du HTML" avec les formulaires ?

Afficher la réponse

Le HTML va nous permettre de créer notre formulaire en soi, c'est-à-dire les

différents champs permettant aux utilisateurs de nous envoyer des données.
Cependant, nous n'allons pouvoir ni traiter ni enregistrer les données
envoyées en HTML.

Question n°2 :

Quelle précaution doit on prendre lorsqu'on crée un formulaire ?

Afficher la réponse

Il faut toujours se méfier des données qui sont envoyées par les utilisateurs :
vous ne devez jamais vous attendre à recevoir des données conformes. Vous
devez donc sécuriser vos formulaires puis effectuer des tests pour nettoyer et
valider les données reçues en PHP par exemple.
Question n°3 :

Lequel de ces éléments HTML sert à définir un formulaire ?

1. L'élément form

2. L'élément input

3. L'élément label

Afficher la réponse

Réponse 1. L'élément form sert à définir un formulaire en HTML.

Question n°4 :

L'élément form doit obligatoirement être accompagné...

1. D'un attribut method

2. D'un attribut action

3. De deux attributs method et action

Afficher la réponse

Réponse 3. Pour qu'on formulaire fonctionne correctement, vous devez

préciser deux attributs method et action dans la balise ouvrante de votre
élément form.

Question n°5 :

Si je demande un mot de passe dans mon formulaire, j'utiliserai plutôt...

 1. La valeur get de l'attribut method

2. La valeur post de l'attribut method

3. Aucune de ces deux valeurs

Afficher la réponse

Réponse 2. En utilisant la valeur get de l'attribut method, les données

envoyées transiteront via l'URL et de façon visible, ce que nous voulons
absolument éviter lorsqu'on demande des informations sensibles dans un
formulaire.

Question n°6 :

Lequel de ces éléments sert à créer un champ de type "date" dans un

formulaire ?

1. L'élément input

2. L'élément date

3. L'élément select

Afficher la réponse

Réponse 1. Nous utiliserons l'élément input avec son attribut type et sa valeur
date pour créer un champ de type date dans un formulaire.

Question n°7 :

Lequel de ces attributs sert à pré-cocher une case ?

1. L'attribut selected

2. L'attribut autocomplete
 3. L'attribut checked

Afficher la réponse

Réponse 3. L'attribut selected va permettre de pré-sélectionner une option

dans une liste d'options tandis que autocomplete va permettre l'auto-
complétion d'un champ de formulaire.

Question n°8 :

A quoi sert l'attribut placeholder ?

Afficher la réponse

L'attribut placeholder sert à donner des indications sur la nature des

informations attendues en affichant un texte à titre d'exemple à l'intérieur
d'un champ de formulaire (si celui-ci est une zone de saisie évidemment).

Question n°9 :

On va utiliser l'élément fieldset pour...

1. Donner un titre à notre formulaire

2. Donner un titre à une partie de notre formulaire

3. Créer des parties dans notre formulaire

Afficher la réponse

Réponse 3. L'attribut fieldset sert à créer des sections dans un formulaire.

Pour ajouter un titre à chaque section, nous utiliserons l'élément legend.
Question n°1 :

Que signifie "responsive design" ?

Afficher la réponse

Cela signifie "design adaptable". On parle de responsive design pour designer

les techniques permettant à un site de s'adapter à des tailles d'écran
différentes.

Question n°2 :

Pourquoi créer un site responsive ?

Afficher la réponse

Il y a deux raisons majeures à cela. D'une part, de plus en plus de personnes

utilisent des Smartphones pour aller sur Internet. Afin de leur proposer une
expérience agréable de navigation, vous devez retravailler votre site pour
qu'il s'affiche bien sur des petits écrans. D'autre part, l'aspect responsive d'un
site est aujourd'hui pris en compte par Google dans son algorithme de
classement. C'est donc également important pour votre référencement.
Question n°3 :

Lorsqu'on utilise des valeurs en pourcentage pour redimensionner un élément

en CSS, la valeur donnée à un élément dépend...

1. De sa taille de départ

2. De la taille de la fenêtre

3. De la taille de son élément parent

Afficher la réponse

Réponse 3. Lorsqu'on applique une valeur relative à un élément en CSS pour

le redimensionner, le pourcentage donné est toujours un pourcentage de la
taille de son élément parent.

Question n°4 :

Laquelle de ces trois écirtures est correcte

1. @media screen and max-width = 680px

2. @media screen and (max-width: 680px)

3. @media screen and (max-width = 680px)

Afficher la réponse

Réponse 2. On n'utilise jamais le signe égal en CSS pour définir une taille.
Faites bien attention aux parenthèses en utilisant les media queries !
https://www.pierre-giraud.com/html-css/exercices-html-css/centrer-horizontalement-
element.php