-
On a vu comment créer
une première page Web
-
avec plusieurs balises pour
le texte et les images.
-
Mais il manque quelque chose :
les styles, la mise en forme.
-
Ma page Web ressemble à celle
que vous avez créée.
-
Texte en noir, fond blanc, même
police de caractères,
-
chaque partie s'affichant du haut en bas.
-
En regardant sur le Web, vous avez vu
des pages qui sont très différentes.
-
Regardez sur la Khan Academy,
-
avec des couleurs, des tailles et des
polices de caractères différentes.
-
C'est le moment de faire ça, maintenant.
-
Mettez en pause cet exposé et
regardez plusieurs sites Web.
-
Quelles sont les différences
dans leur mise en forme, leur style ?
-
Qu'est-ce que vous aimez
ou n'aimez pas dans leur style ?
-
Je vous attends... Allez-y.
-
C'est important de voir comment
sont faits plusieurs site Web,
-
car bientôt, vous allez voir comment
modifier l'apparence de votre page Web
-
et vous voudrez le faire à votre manière,
d'une façon qui vous ressemble,
-
de façon à vous faire plaisir, mais aussi
à faire plaisir à ceux qui vont l'utiliser.
-
Pour faire ça sur notre page Web,
-
on a besoin d'apprendre
un autre langage : CSS.
-
Cela signifie : Feuilles de style en cascade
("Cascading Style Sheets" en anglais).
-
C'est un moyen de définir des styles qu'on
applique aux différentes éléments de la page.
-
On ajoute le code CSS dans le HTML
mais ce n'est pas du HTML.
-
C'est bien un nouveau langage à apprendre,
-
et il ne faut pas confondre les deux : HTML et CSS.
-
On verra plusieurs utilisations des CSS,
comme les polices, tailles et présentations,
-
mais on va commencer par quelque chose
de sympa : les couleurs.
-
Et si on voulait changer la couleur de
nos titres, en "vert gazon" ?
-
Pour commencer, on a besoin
d'ajouter une balise "style",
-
dans la partie "head" de notre page.
-
Quand le navigateur voit ça,
il se dit :
-
"OK, tout ce qui se trouve à
l'intérieur... ici... c'est du CSS".
-
Il va utiliser son analyseur de CSS
pour le comprendre...
-
au lieu d'utiliser son analyseur de HTML.
-
A l'intérieur... ici... on va ajouter une
règle de style CSS.
-
La règle de style est composée...
-
d'un sélecteur qui indique quelle partie
de la page est mise en forme,
-
et de déclarations qui indique comment
mettre en forme cette partie.
-
Si on veut mettre en forme tous
les titre "h2" de notre page,
-
on va indiquer le sélecteur "h2".
-
Ensuite, on ajoute des accolades.
-
C'est bien des accolades, pas des crochets !
Sinon, ça ne marchera pas.
-
A l'intérieur, on ajoute nos déclarations
avec des propriétés et des valeurs.
-
Pour changer la couleur du texte,
on utilise la propriété "color".
-
Puis, on ajoute un deux-points ":"
et on indique sa valeur.
-
On a besoin d'indiquer ici la couleur
qu'on veut utiliser.
-
On peut juste indiquer "green"
(c'est "vert" en anglais)
-
Il va comprendre ça, car c'est
une couleur de base.
-
Mais ce n'est pas le vert que je veux.
-
Je veux un "vert gazon" !
-
Si j’écris "grassy green" ("vert gazon"),
Oh, oh !
-
Le navigateur ne comprend pas. Du coup,
il remet la couleur par défaut,
-
en noir, car il ne sait pas à quoi
correspond ce "vert gazon".
-
Si on veut pouvoir choisir n'importe
quelle couleur,
-
on a besoin d'utiliser le code RVB
de la couleur.
-
Vous le connaissez peut être.
En anglais, cela s’appelle le code "RGB"
-
Vous n'avez pas besoin de connaître
ces codes par cœur,
-
car on a, ici, un outil pour choisir
la couleur que l'on souhaite.
-
Pour l'utiliser, on a juste besoin
d'indiquer la fonction : rgb().
-
et l'outil de choix de couleur s'affiche.
-
Avec votre souris, choisissez celle
qui vous convient.
-
Vous voyez en direct ce que cela
donne dans votre page.
-
Quand c'est ok, cliquez simplement.
-
Connaissez-vous ces 3 nombres
qui sont apparus dans les parenthèses ?
-
Ce sont les composantes Rouge, Vert et Bleu
qui, mélangées, forme cette couleur.
-
Le truc sympa de ce sélecteur CSS ("h2"),
-
est qu'il applique le style à TOUS les
"h2" de la page.
-
D'un coup, on a modifié la mise en forme
de tous nos titre "h2" en vert gazon,
-
et on garde une cohérence sur l'ensemble
de notre page Web.
-
Grâce aux CSS, vous verrez qu'on peut
les utiliser de plusieurs manières.
-
Par exemple, c'est possible d'appliquer
un style que pour certains des "h2" de la page.
-
On peut vraiment faire plein de chose
grâce à ces sélecteurs CSS.
-
Allez, créons une autre règle CSS.
-
On veut définir la couleur de fond
en bleu ciel.
-
Comment indiquer la couleur de fond
de la page Web ?
-
En fait, quelle balise représente
l'ensemble de la page Web ?
-
Ce n'est pas le "h1",
ce n'est pas le "p", ni l'image.
-
C'est la balise "body".
-
Souvenez-vous que tout ce qui est
dans la balise "body" sera visible.
-
Donc si on veut mettre en forme
toute la page Web,
-
on devra utiliser un sélecteur qui
correspond à cette balise.
-
Donc, on écrit "body"
et les accolades.
-
Et au lieu d'utiliser
la propriété "color",
-
on va utiliser "backgroud-color"
(couleur de fond), puis, rgb().
-
On retrouve l'outil pour choisir la couleur,
et on prend un bleu...
-
qui me fait penser à un beau ciel bleu.
-
Da, Da !
-
Regardez ma page mise en forme !
-
Il existe des centaines de propriétés CSS
en plus des couleurs et couleurs de fond.
-
Ces deux là sont sympa à utiliser au début.
-
A la fin de cet exposé, jouez avec
les couleurs,
-
choisissez-en d'autres
qui vous ressemble plus.
-
OK ? Allez, c'est à vous de jouer.
