Open Code - Innovation Manager

Revenir à la Home
Fr | Eng


Jour 2 - La feuille de style

Bon allé j'avoue tout: je triche!
Il parait qu'après le Jour 1 vous êtes censés arriver à coder une page exactement similaire à celle d'Open-code... Ben en fait pas vraiment, mais à pas grands choses près! En vrai!
C'est pas grave, c'est même normal: c'est juste moi qui triche un peu pour la mise en page! J'ai rajouté un truc que je vais vous apprendre aujourd'hui pour que ca soit un peu plus joli!

La feuille de style: style.css
Pour faire simple, il s'agit d'une page dans laquelle vous mettrez TOUS les paramètres relatifs à la mise en page de votre site internet. C'est un peu comme un concours de tunning: vous commencez par choisir un modèle de base, et ensuite vous le pimpez un peu en ajoutant des trucs complètement fous!
Avec des images c'est quand même plus parlant:
Avec CSS: avec du CSS
Sans CSS: sans CSS

C'est un peu blasant: d'un coté, on a deux magnifiques cadres avec un fond et une mise en forme sur la police; et de l'autre, du texte brut...


La déclaration de la feuille de style
Pour commencer, il va falloir déclarer notre feuille de style dans notre page index.html. Ainsi, quand le navigateur internet ouvrira et lira la page il saura où aller chercher les éléments de mise en page de votre site web.

Pour cela, on ouvre index.html avec Notepad ou Smultron, et on ajoute une petite ligne de code dans notre balise <head>:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Ce qui donne un page index.html vierge:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open Code - Innovation Manager</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

C'est ici que l'on rédige le corps de son site!

</body>
</html>


Par défaut, votre feuille de style (stylesheet en rosbif) s'appellera style.css

Une fois déclaré, il n'y a plus qu'à la créer!
Dans votre dossier de code où vous rangez bien précieusement votre page index.html ainsi que les photos que vous intégrez à votre site, vous créez un nouveau document appellé style.css à l'aide de Smultron ou Notepad. Et vous l'ouvrez avec votre éditeur histoire de comencer à travailler dessus.

Super! C'est créé, et maintenant? Les ennuis commencent!
Alors attention à vous, le css est un langage assez capricieux: qui ne fonctionne pas du tout si on oublie une seule virgule! Il va donc falloir votre plus grande attention!
Le code présent sur votre feuille de style est totalement brut et donne un truc du genre:


html, body, table, td {
 height : 100%;
 width : 100%;
 margin : 0;
 padding : 0;
 }

#main {
 margin: 0 auto;
 padding:0;
 width: 80%;
 margin-left:10%;
 text-align: justify;
 }


Comme pour le code html, vous pouvez consulter le code source css de n'importe quel site internet avec la manip' "Clic droit => Afficher la source" Il vous suffira juste d'aller cliquer au début du code source sur le lien bleu: style.css.

Le retour de l'Id
Je sais, désolé, je me fait mes blagues un peu tout seul...
Dans le jour précédent, vous avez appris que certaines balises avaient la possibilité de posséder un "Id" que vous pouviez vous-même nommer comme bon vous semble. C'est maintenant que cela va nous être très utile.
En gros, sur votre page style.css, vous allez mettre en forme chacun de vos Id, afin qu'il en sorte un rendu magnifique à l'écran.
Je prendrai comme exemple les petites boites présentes sur la Homepage d'Open-code avec la présentation de chacun des jours.
Le but est de comprendre comment on passe de l'un à l'autre:

transformation

2. Le code html des boites de titre:
Dans le body de ma page index.html, j'ai inséré une rangée de boites qui contiennent chacunes le titre d'un jour défini, afin de faciliter la navigation et l'organisation des leçons. Il y a une petite logique à suivre, mais qui une fois comprise est enfantine!
Voici donc le code html de ces petites boites, rien de difficile, vous savez faire!



/****** Ceci est un extrait de ma page! ******/

<div id="content">

<div id="jours">
<h3><a href="jour-1.html">Jour 1
<br />Les Bases</a></h3>
</div>

<div id="jours-pending">
<h3><a href="jour-2.html">Jour 2
<br />La feuille de style</a></h3>
</div>

</div>


Explication du code:
Je vous recommande de copier/coller ce code dans le body de votre document index.html afin de travailler dessus. Mais avant toutes choses, regardons un peu plus en détail! Un fois compris, vous verrez c'est easy mode!

- Il faut commencer à la fois par la première et la dernière ligne de cet extrait de code! La balise ouvrante <div id="content"> et la balise fermante </div>: C'est tout simplement une balise DIV, un bloc qui va contenir vos deux boites! J'ai choisi de l'appeller "content" pour contenu.

- Il y a ensuite une seconde balise <div id="jours"> qui s'appelle "jours", elle est contenue dans la div "content": une boite dans une boite, pour le moment rien de compliqué! Là encore, vous retrouvez la balise fermante </div>.

- On a ensuite deux lignes de code contenues dans cette div: une balise <h3> ouvrante et fermante </h3> que vous connaissez, c'est un niveau 3 de titre, que vous pouvez mettre en forme. Il y a également une balise de lien <a href="nom-de-la-page"> qui redirige vers la page "jour-1.html" et dont le titre est "Jour 1 </br> Les Bases" qui contient une balise </br> pour sauter une ligne!

Voila! On a notre première boite qui redirige vers la page du Jour 1!
La seconde balise <div> est un copié-collé de la première boite!
Si vous avez bien suivi, vous savez donc comment ajouter des boites facilement: ctrl+C puis ctrl+V :)

Dans l'état actuel des choses, le code que je viens de vous expliquer va vous donner le visuel suivant:
image sans CSS

3. Le code CSS de ces boites de titres:
Nous avons donc le contenant, il faut maintenant le mettre en forme!
Voici le code CSS correspondant à ma mise en forme, explications:


#content {
 background-color: transparent;
 border: solid 0px #AA3939;
 height: 20%;
 width: 50%;
 margin-left: 25%;
 }

#jours, #jours-pending {
 float: left;
 text-align: center;
 margin-left: 1%;
 width: 48%;
 height: 90%;
 border: solid black 3px;
 color: grey;
 background: transparent;
 transition-property: background;
 transition-duration: 1s;
 }

#jours-pending {
 background: url("waiting.gif") no-repeat center;
 }

#jours:hover, #jours-pending:hover {
 background: black;
 color: #765339; 
 }


C'est un tout autre type de code je vous l'accorde! Mais pas de panique: je vous explique tout ligne par ligne.
Tout d'abord on regarde! Il y a quatre paragraphes qui commencent par un #id et sont suivi par un {
Regardez attentivement, et dites: "OUI!" Ok! Il faut savoir que ce sont des petits paragraphes de mise en forme de chacun de vos éléments!

On commence par le premier:
#content {: On met un signe dièse suivi de l'ID "content" de votre première DIV ... Remember? Pas d'espace entre le dièse et le content! Puis, un espace, et un crochet ouvert! Et la balise est OUVERTE! Vous constaterez d'ailleurs que la balise se ferme avec un crochet fermant } !!

On souffle un coup... Et on reste concentré!

La balise css: "#content" contient 5 lignes de paramètres. Remarquez le POINT VIRGULE à la fin de CHACUNES des lignes! Hyper important! Sinon RIEN ne fonctionne! Il ne faut SURTOUT pas l'oublier!

- Première ligne "background-color: transparent;" C'est bien évidement la couleur du fond de votre DIV "content" on fait comme on veut, ici elle est "transparent" mais on aurait pu la mettre "green" "red" "navy" comme on veut! Ou même encore on peut appeller une couleur hexadécimale avec un code couleur type: #OOBO5O (voir la palette de couleur "Paletton.com").

- Seconde ligne "border: solid 0px #AA3939;" il s'agit de la bordure de votre contenant DIV. En Anglais, le mot "Bordure" s'écrit "border"! Puis suivent trois petits paramètres: le fait que votre "border" soit "solid" cela veut dire qu'elle est continue. Car elle peut aussi être "dotted" (pointillés avec des points), "dashed" (pointillés avec des tirets), et pleins d'autres formes (cf: http://www.w3schools.com/cssref/pr_border-style.asp).
La taille en pixel de cette fameuse bordure: ici c'est 0px, on ne la voit donc pas, mais elle existe quand même!
Et la couleur de votre "border" en hexadécimal comme vu un peu plus haut!

- Troisième ligne "height: 20%;" c'est la hauteur de votre DIV! Ici elle fait 20% de la hauteur de votre navigateur. La hauteur peut aussi etre exprimée en pixels, centimètres, ou unités de mesure. Mais l'inconvénient des autres unités c'est que cette taille est fixe! Un pourcentage s'adaptera en fonction de la taille de votre navigateur: on y reviendra! ;)

- Quatrième ligne "width: 50%;" c'est la largeur de la DIV! Même explication qu'au dessus! :)

- Cinquième ligne "margin-left: 25%;" il s'agit tout simplement d'une "Marge à Gauche" de 25%. Ainsi, notre DIV id="content" sera toujours à 25% du bord gauche de votre navigateur!
DONC! Au final votre div id="content" a une "width" de 50% de la largeur du navigateur, mais aussi une "margin-left" de 25% de la largeur du navigateur. On en déduit que automatiquement sa "margin-right" est de ?? .... 25%!!! Donc votre div id="content" est centrée sur votre page!
CHAMPAGNE!!

Deuxième paragraphe:
- Première ligne: #jours, #jours-pending { Sur cette ouverture de balise j'ai deux #id! Ce qui veut dire que les paramètres qui vont suivre s'appliqueront aux deux id tout simplement! Je commence donc par appeller ma première id: #jours puis je mets une petite virgule "," et j'appelle ensuite ma deuxième id: #jours-pending. Et biensur, on ouvre le crochet {

- Deuxième ligne: "float:left;" Cette propriété indique que mes deux div vont s'aligner à gauche sur leur ligne, l'une à coté de l'autre. On peut indiquer un "float:right;" pour un alignement à droite.

- Troisième ligne: "text-align: center;" Le texte à l'intérieur de ma div est centré au milieu de la boite. Vous pouvez également aligner le "text" en "left" ou en "right".

- Lignes 4, 5, 6, et 7: Vous connaissez déjà! Les explications sont au paragraphe précédent: ce sont globalement les mesures de mes div, leur bordures, et la marge à gauche.

- Ligne 8: "color: grey;" Il s'agit de la couleur de la olice contenue dans ma div. Par défaut, celle-ci est noire, je choisis du gris, vous pouvez y mettre un code héxadécimal également!

- Ligne 9: Le Background de mes div est transparent, déja expliqué plus haut ;)

- Ligne 10: "transition-property: background;" Alors! Cette ligne et la suivante sont un peu spéciales, il s'agit des propriétés de transition de mes div. Quand je passe ma souris sur la div, vous aurez pu constater qu'une transition s'oppère! Il y a un changement de: ... Background!! :) En effet, c'est la couleur du fond de ma div qui va changer, c'est içi que je l'indique!

- Ligne 11: "transition-duration: 1s;" La fameuse transition de la ligne 10 se fera en 1 seconde! Elle peut etre plus longue ou plus courte (0.5 seconde par exemple).

- Ligne 12: On ferme le paragraphe qui met en forme les div id: #jours et #jours-pending }

Troisième paragraphe:
- Cette fois-ci, il s'agit de mettre en forme la div #jours-pending. alors vous allez me dire: "Mais on l'a déja fait?" Oui, c'est pas faux, on a déja mis en forme certains paramètres de la div, mais en commun avec la div #jours. Mais cette div a le droit de ne pas etre exactement comme l'autre! On lui rajoute donc la propriété qui fait la différence: on va lui changer son background.

- La ligne de paramètre est donc le "background: url("waiting.gif") no-repeat center;" qui aura une image en fond qui s'appelle "waiting.gif" cette image ne se répètera pas, et sera centrée au centre de la div.
- Puis on ferme le paragraphe }

Quatrième paragraphe:
- Il s'agit de la mise en forme des id #jours et #jours-pending, en leur applicant une propriété "hover". Le hover, c'est quand on passe sa souris sur la div! On ouvre donc le paragraphe {

- La encore, vous connaissez déja ces deux lignes: la couleur du background, et la couleur de la police. En fait il faut préciser ici la couleur des changements à opérer pour la "transition" du paragraphe 3, Remember??
- Bref, on ferme le paragraphe }


Et Voi-la! On a terminé la mise en page de nos deux blocs!
Du coup: on sauvegarde et on regarde l'effet produit dans son navigateur web!
Ce que je vous conseille quand même c'est de faire du pas à pas: commencer par la couleur du background, puis voir si votre modif fonctionne; puis s'attaquer à la couleur de la police, et vérifier que ca fonctionne, bla bla bla...
Il vaut mieux faire petit à petit que tout d'un coup et que l'ensemble ne fonctionne pas!

Bon et bien c'est bon? :)
Bravo! :)
C'est fait! Vous avez réussi à créer une première page de site internet, et la mettre en forme!
Alors c'est vraiment dur? Moi je ne crois pas, il s'agit simplement de s'y mettre!

C'est donc fait: en deux "Jours" vous savez comment créer votre site internet! Ca peut paraitre très étonnant, mais vous avez là toutes les bases du codage html et css! :)

Du coup, la suite des "Jours" portera plutôt sur des briques de codes péchées sur le web! Et grace aux jours 1 et 2, vous saurez comment vous y prendre!
Bravo d'avoir suivi jusqu'içi!
Si vous avez des questions, ou points bloquants, envoyez moi un mail: piemgchaperon@gmail.com
A très vite,
Piem

Revenir à la Home ? ou Enchainer sur le Jour 3 ?