Ladies-learning-code-FRANCAIS-draft.rtf

{\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510
{\fonttbl\f0\froman\fcharset0 Times-Roman;\f1\fnil\fcharset0 LucidaGrande;\f2\fmodern\fcharset0 Courier;
\f3\fmodern\fcharset0 Courier-Bold;\f4\froman\fcharset0 TimesNewRomanPSMT;\f5\fswiss\fcharset0 ArialMT;
\f6\fnil\fcharset0 Verdana;\f7\fnil\fcharset0 Georgia;}
{\colortbl;\red255\green255\blue255;\red0\green37\blue229;\red94\green25\blue109;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}
{\list\listtemplateid2\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid101\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listname ;}\listid2}
{\list\listtemplateid3\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid201\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid3}
{\list\listtemplateid4\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{hyphen\}}{\leveltext\leveltemplateid301\'01\uc0\u8259 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{hyphen\}}{\leveltext\leveltemplateid302\'01\uc0\u8259 ;}{\levelnumbers;}\fi-360\li1440\lin1440 }{\listname ;}\listid4}
{\list\listtemplateid5\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid401\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid5}
{\list\listtemplateid6\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid501\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid6}
{\list\listtemplateid7\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid601\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listname ;}\listid7}
{\list\listtemplateid8\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid701\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid8}
{\list\listtemplateid9\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid801\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid9}
{\list\listtemplateid10\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid901\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid10}
{\list\listtemplateid11\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1001\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid11}
{\list\listtemplateid12\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1101\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid12}
{\list\listtemplateid13\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1201\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid13}
{\list\listtemplateid14\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1301\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid14}
{\list\listtemplateid15\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1401\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid15}
{\list\listtemplateid16\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1501\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid16}
{\list\listtemplateid17\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1601\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid17}
{\list\listtemplateid18\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1701\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid18}
{\list\listtemplateid19\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1801\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid19}
{\list\listtemplateid20\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1901\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid20}
{\list\listtemplateid21\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid2001\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid21}
{\list\listtemplateid22\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid2101\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid22}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}{\listoverride\listid2\listoverridecount0\ls2}{\listoverride\listid3\listoverridecount0\ls3}{\listoverride\listid4\listoverridecount0\ls4}{\listoverride\listid5\listoverridecount0\ls5}{\listoverride\listid6\listoverridecount0\ls6}{\listoverride\listid7\listoverridecount0\ls7}{\listoverride\listid8\listoverridecount0\ls8}{\listoverride\listid9\listoverridecount0\ls9}{\listoverride\listid10\listoverridecount0\ls10}{\listoverride\listid11\listoverridecount0\ls11}{\listoverride\listid12\listoverridecount0\ls12}{\listoverride\listid13\listoverridecount0\ls13}{\listoverride\listid14\listoverridecount0\ls14}{\listoverride\listid15\listoverridecount0\ls15}{\listoverride\listid16\listoverridecount0\ls16}{\listoverride\listid17\listoverridecount0\ls17}{\listoverride\listid18\listoverridecount0\ls18}{\listoverride\listid19\listoverridecount0\ls19}{\listoverride\listid20\listoverridecount0\ls20}{\listoverride\listid21\listoverridecount0\ls21}{\listoverride\listid22\listoverridecount0\ls22}}
\margl1440\margr1440\vieww10220\viewh7760\viewkind0
\deftab720
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Bienvenue \'e0 l'introduction au HTML et au CSS de Ladies Learning Code\
\
Voici le projet que vous aurez \'e0 r\'e9aliser aujourd'hui.\

\fs24 cliquez ici pour voir le r\'e9sultat final
\fs36 \
\
Plan \

\fs28 Avant-midi\
\pard\tx220\tx720\pardeftab720\li720\fi-720\sa280
\ls1\ilvl0
\fs24 \cf0 {\listtext	\'95	}Introduction au langage HTML\
\pard\tx220\tx720\pardeftab720\li720\fi-720\sa280
\cf0 	\'95	\'c9crire le code HTML de votre projet\
	\'95	Introduction au langage CSS
\fs28 \
\pard\pardeftab720\sa280
\cf0 Apr\'e8s-midi\
\pard\tx220\tx720\pardeftab720\li720\fi-720\sa280

\fs24 \cf0 	\'95	Plus de CSS\
	\'95	Peaufinons\
	\'95	Fin! Et autres \'e9tapes\'85\
\pard\pardeftab720\sa280

\fs36 \cf0 Pr\'e9parations \
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Vous devriez d\'e9j\'e0 avoir t\'e9l\'e9charg\'e9 les items suivants\'a0:\
\pard\tx220\tx720\pardeftab720\li720\fi-720\sa280

\b \cf0 	\'95	Sublime Text (lien) \'97
\b0  un \'e9diteur de texte tr\'e8s populaire pour ses multiples fonctionnalit\'e9s.\

\b 	\'95	Google Chrome (lien) 
\b0 \'97 Choisir un navigateur web moderne qui poss\'e8de de bons outils de d\'e9veloppement  pour vous aider \'e0 construire des pages web plus facilement. Firefox est aussi une option gagnante! Un de ces navigateurs doit devenir le v\'f4tre par d\'e9faut. \ul Voici la marche \'e0 suivre.\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\b \cf0 \ulnone 	\'95	La pr\'e9sentation et les fichiers n\'e9cessaires aujourd'hui
\b0  ({\field{\*\fldinst{HYPERLINK "https://github.com/tessa-lt/LLC-HTML-CSS"}}{\fldrslt \cf2 \ul \ulc2 l}}\cf2 \ul \ulc2 ien\cf0 \ulnone ).  Cliquez sur le bouton en bas \'e0 droite de la page pour acc\'e9der au dossier compress\'e9 en .zip. Pour l'ouvrir, il faut le d\'e9compresser le dossier (sur Windows, faites un clique droit et s\'e9lectionner \'ab\'a0Extraire Tous\'a0\'bb). Faites un clique droit sur \'ab\'a0index.html\'a0\'bb ou \'ab\'a0index\'a0\'bb et \'ab\'a0Ouvrir avec Chrome\'a0\'bb.\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Ouvrir un fichier HTML dans un navigateur\
Qu'est-ce qu'un navigateur?\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 \uldb \ulc0 La fonction principale d'un navigateur est de pr\'e9senter la \'ab\'a0ressource web\'a0\'bb de votre choix dans la fen\'eatre de navigation lorsque vous sollicitez un serveur web. La \'ab\'a0ressource web\'a0\'bb est g\'e9n\'e9ralement un document HTML, mais il peut s'agir d'un PDF, d'une image ou d'un autre type de document.\ulnone \
 
\b\fs36 Qu'est-ce qu'un document HTML?
\b0\fs24 \
\pard\tx220\tx220\pardeftab720
\cf0 Nous aborderons ce sujet bient\'f4t. Pour l'instant, veuillez jeter un oeil \'e0 notre exemple. Allez sur  {\field{\*\fldinst{HYPERLINK "http://ladieslearningcode.com/"}}{\fldrslt \cf2 \ul \ulc2 http://ladieslearningcode.com}}. Faites un clique droit et s\'e9lectionnez \'ab\'a0Afficher le code source de la page\'a0\'bb. Ce que vous verrez est du HTLM.\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\cf0 \
\pard\tx220\tx720\pardeftab720
\cf0 Nous apprendrons aujourd'hui comment \'e9crire notre propre HTML. Pour l'instant, nous apprendrons comment ouvrir un document HTML (comme ceux que nous cr\'e9erons plus tard) dans notre navigateur.\
\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls2\ilvl0\cf0 {\listtext	1.	}Ouvrez Sublime Text et allez dans \'ab\'a0Fichier-> Ouvrir\'a0\'bb /"File -> Open".\
{\listtext	2.	}Naviguez jusqu'au dossier appel\'e9 \'ab\'a0Projet\'a0\'bb dans le dossier de pr\'e9paration que vous aviez pr\'e9alablement t\'e9l\'e9charg\'e9 pour aujourd'hui.\
{\listtext	3.	}S\'e9lectionnez tous les fichiers du dossier et cliquez \'ab\'a0Ouvrir\'a0\'bb/"Open"\
{\listtext	4.	}Maintenant que le dossier est ouvert dans Sublime, cliquez sur \'ab\'a0blank.html\'a0\'bb pour qu'il remplisse l'\'e9cran. Ensuite, faites un clique droit et s\'e9lectionnez \'ab\'a0Ouvrir dans le navigateur\'a0\'bb/" Open in Browser". (Si votre navigateur par d\'e9faut n'est pas Chromse, voici la marche \'e0 suivre).\
\
\pard\tx220\tx720\pardeftab720
\ls2\ilvl0
\b\fs36 \cf0 Prenez note\'a0: ne craignez pas de mal faire ou de briser quoi que ce soit. Ce que nous ferons aujourd'hui, les ordinateurs sont faits pour cela. Sentez-vous bien \'e0 l'aise de vous amuser, de prendre des risques et de faire des erreurs, c'est la meilleure fa\'e7on d'apprendre!
\b0\fs24 \
\pard\tx220\tx720\pardeftab720
\cf0 \
\pard\tx220\tx720\pardeftab720

\b\fs36 \cf0 HTML, CSS : que sont-ils? \
\
D\'e9butons avec le HTML\'85\
\pard\tx220\tx720\pardeftab720

\b0\fs24 \cf0 \
C'est le contenu de votre page\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\cf0 \
\pard\tx220\tx720\pardeftab720\li720\fi-720
\cf0 \ul \
\pard\pardeftab720\sa280

\b\fs36 \cf0 \ulnone Les pages web sont faites de HTML (HyperText Markup Language) 
\b0\fs24 \
\pard\pardeftab720\sa240
\cf0 Nous utilisons le HTML pour d\'e9crire chaque partie de la page web au navigateur pour que notre contenu soit pr\'e9sent\'e9 comme nous le souhaitons. Nous aidons le navigateur \'e0 comprendre comment nous voulons que le contenu soit pr\'e9sent\'e9 en utilisant des balises/ des tags. Voici quelques exemples de balises que vous avez s\'fbrement d\'e9j\'e0 vus auparavant\'a0:\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls3\ilvl0\cf0 {\listtext	\'95	}<h1> et </h1>\
{\listtext	\'95	}<p> et </p>\
{\listtext	\'95	}<strong> et </strong>\
\pard\pardeftab720\sa240
\cf0 Pour cr\'e9er un fichier HTML ce dernier doit \'eatre compos\'e9 de la l'extension .hmtl ( comme un fichier PDF poss\'e8de l'extension .pdf \'e0 la fin du document).\

\b\fs36 Petit exercice rapide\'a0: Enregistrons un nouveau fichier HTML\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\b0\fs24 \cf0 	1.	Dans Sublime Text, cliquez sur \'ab\'a0Fichier -> Nouveau fichier\'a0\'bb/  "File -> New File"\
	2.	Par d\'e9faut, le type de fichier sera \'ab\'a0Plain Text\'a0\'bb pas HTML\
	3.	Vous avez 2 choix pour sauver vos fichiers\'a0: \
\pard\tx940\tx1440\pardeftab720\li1440\fi-1440
\ls4\ilvl1\cf0 {\listtext	
\f1 \uc0\u8259 
\f0 	}Dans le coin en bas \'e0 droite, vous devriez voir l'inscription \'ab\'a0Plain Text\'a0\'bb. Cliquez sur ces mots et s\'e9lectionnez HTML dans la liste des options. Sauvegardez le fichier gr\'e2ce \'e0 CMD + S ou CONTROL + S. Donnez-lui n'importe quel nom, sauvez-le n'importe o\'f9, nous ne l'utiliserons pas. \
{\listtext	
\f1 \uc0\u8259 
\f0 	}Cliquez sur \'ab\'a0Fichier -> Enregistrez sous\'a0\'bb/"File -> Save As". Donnez-lui un nom et ajoutez .html \'e0 la fin (par exemple\'a0: \'ab\'a0projet.html\'a0\'bb ). Donnez-lui n'importe quel nom, sauvez-le n'importe o\'f9, nous ne l'utiliserons pas. \
\pard\tx566\tx1133\pardeftab720

\b\fs36 \cf0 Les rouages du HTML\
\

\b0\fs24 Quand nous \'e9crivons du HTML, nous cr\'e9ons des \'e9l\'e9ments HTML en mettant notre contenu entre des balises (\'ab\'a0tags\'a0\'bb en anglais). Ces balises d\'e9crivent la disposition du contenu, pas leur apparence ni leur style. Nous utilisons diff\'e9rentes balises pour cr\'e9er de multiples \'e9l\'e9ments et ensemble deviennent notre document HTML. \
\
Il est important de saisir que le HTML est important pour la structure du document et qu'il a tr\'e8s peu avoir avec le visuel du r\'e9sultat final. Les \'e9l\'e9ments de style, c'est avec le CSS que nous les cr\'e9erons.\
\

\b\fs36 Les balises proscrites!\

\b0\fs24 Il est important de cr\'e9er un code HTML clair et coh\'e9rent dans sa s\'e9mantique et sa structure avant d'entreprendre quoi que ce soit d'autre. Quand on \'e9crit du HTML on structure le projet et on y incorpore le contenu, nous n'en sommes pas \'e0 l'\'e9tape du design ni du style (cela sera le r\'f4le du CSS).\
\
Voici donc quelques balises que vous ne devriez JAMAIS utiliser\'a0:\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls5\ilvl0\cf0 {\listtext	\'95	}<b>Je suis du texte en caract\'e8re gras !</b>\
{\listtext	\'95	}<i>Je suis du texte en italique</i>\
{\listtext	\'95	}<u>Je suis du texte soulign\'e9</u>\
{\listtext	\'95	}<marquee>Quelqu'un se souvient de la balise marquee ?</marquee>\
{\listtext	\'95	}<font size="large">JE SUIS DU TEXTE IMMENSE !</font>\
{\listtext	\'95	}<center>Je suis un texte centr\'e9 !</center> \
\pard\tx566\pardeftab720

\b\fs36 \cf0 \
\pard\pardeftab720\sa280

\fs28 \cf0 S.V.P n'utilisez plus jamais ces balises!\
\pard\pardeftab720\sa280

\fs36 \cf0 En parlant du CSS\'85
\fs28 \

\b0\fs24 C'est ce qui rendra votre site joli.\

\b\fs36 Qu'est-ce que le CSS?\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 CSS (Cascading Style Sheets) est ce qui rendra votre site agr\'e9able \'e0 regarder.\
Pendant que le HTML d\'e9finit la structure des diff\'e9rentes pages de votre site, le CSS indique l'emplacement et le look des diff\'e9rents \'e9l\'e9ments qui le constituent.\
Par exemple, p signifie paragraphe en HTML. Si nous voulons que tous nos paragraphes soient rouge et soulign\'e9s, nous devrons \'e9crire ceci\'a0: \
\pard\pardeftab720

\f2 \cf0 p \{\
  color: red;\
  text-decoration: underline;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajoutons ceci \'e0 notre document HTML \
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Pour indiquer que nous ajoutons du CSS \'e0 notre fichier blank.html nous devons trouver les balises 
\f2 <style> 
\f0 ouvrantes et fermantes entre les balises 
\f2 <head>
\f0  ouvrantes et fermantes. \
\pard\pardeftab720

\f2 \cf0  <!doctype html>\
    <head>\
      <title>Ladies Learning Code HTML et CSS</title>\
      <style>\
        p \{\
        color: red;\
        text-decoration: underline;\
        \}\
      </style>\
    </head>\
    <body>\
      <p>Ceci est un paragraphe</p>\
    </body>\
  </html>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ta-da!\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Vous venez de r\'e9aliser votre premi\'e8re page web!\
HTML + CSS = page web\
\pard\pardeftab720\sa280

\b\fs36 \cf0 \'c0 propos du HTML et du CSS...\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Le HTML et le CSS sont comme des langues et tout comme le Fran\'e7ais ou l'Italien, ces langues ont leurs propres r\'e8gles. Bien s\'fbr il faut du temps pour bien ma\'eetriser ces langues. Ne vous en faites pas si vous ne comprenez pas tout du premier coup! \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Site web sans CSS...\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ceci\'a0:\
\pard\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Site web sans CSS...\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Deviens cela\'a0:\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Pourquoi est-ce ainsi?\
Parce que le HTML d\'e9finit le contenu et que le CSS d\'e9finit l'apparence et la disposition (ce qui rend le web joli). \
D'abord, concentrons-nous sur le HTML\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Il est temps d'\'e9crire un peu de HTML (ce que nous appelons le \'ab\'a0markup\'a0\'bb).\
Vous pouvez enlever ce que nous avons \'e9crit entre les balises <style et </style>. Gardez <style. et </style> ici!\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Les balises HTML\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 La structure d'une page web est d\'e9finie par des balises HTML. Des chevrons simples d\'e9finissent les balises, comme ceci\'a0:\
\pard\pardeftab720\sa720

\f2\fs72 \cf0 <balise>\
\pard\pardeftab720\sa240

\f0\fs24 \cf0 \ul Imaginez que les balises HTML sont comme les poutres structurales d'une maison. C'est ce qui construit et structure la page web.\ulnone \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Les balises HTML\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Les balises HTML viennent g\'e9n\'e9ralement par paires -- donc une balises ouvrante et une balise fermante avec une barre oblique. \
\pard\pardeftab720\sa720

\f2\fs72 \cf0 <balise></balise>\
\pard\pardeftab720\sa240

\f0\fs24 \cf0 Un exemple que vous avez d\'e9j\'e0 vu\'a0: 
\f2 \
\pard\pardeftab720
\cf0 <!DOCTYPE html>\
<html>\
  <head>\
    <title> </title>\
  </head>\
  <body>\
  </body>\
</html> 
\f0\fs72 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Les balises HTML\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Les balises peuvent \'eatre imbriqu\'e9es les unes dans les autres, comme ici : \
\pard\pardeftab720\sa600

\f2\fs60 \cf0 <balise>
\fs78 \cf3 <balise></balise>
\fs60 \cf0 </balise>\
\pard\pardeftab720\sa240

\f0\fs24 \cf0 (On r\'e9f\'e8re souvent \'e0 ce genre de situation en terme\ul  \ulnone d'\'e9l\'e9ment parent et d'\'e9l\'e9ment enfant/ "parent" node and "child" nodes.\ul )\
\ulnone Dans l'exemple ci-dessous\'a0: \
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls6\ilvl0
\f2 \cf0 {\listtext	\'95	}<title>
\f0  est imbriqu\'e9 entre les balises 
\f2 <head>
\f0  ouvrantes et fermantes. Ainsi on peut dire que la balise 
\f2 <head>
\f0  est un \'e9l\'e9ment parent et que la balise 
\f2 <title>
\f0  est un \'e9l\'e9ment enfant.\
{\listtext	\'95	}Plus sp\'e9cifiquement, la balise 
\f2 <head>
\f0  est aussi en m\'eame temps un \'e9l\'e9ment enfant de la balise 
\f2 <html>
\f0 .\
{\listtext	\'95	}Pendant que la balise 
\f2 <html>
\f0  est toujours l'\'e9l\'e9ment racine, il ne poss\'e8de pas d'\'e9l\'e9ment parent. \
{\listtext	\'95	}Remarquez aussi que la balise 
\f2 <head>
\f0  et la balise 
\f2 <body>
\f0  sont au m\'eame niveau. Ils sont tous les deux des \'e9l\'e9ments enfant de la balise 
\f2 <html>
\f0 . Elle sont comme des soeurs!\
\pard\tx566\pardeftab720
\cf0 \
\pard\pardeftab720

\f2 \cf0 <!DOCTYPE html>\
<html>\
  <head>\
    
\f3\b <title>
\f2\b0  
\f3\b </title>
\f2\b0 \
  </head>\
  <body>\
  </body>\
</html>\
<!DOCTYPE html>\
<html>\
  
\f3\b <head>
\f2\b0 \
    <title> </title>\
  
\f3\b </head>
\f2\b0 \
  <body>\
  </body>\
</html>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Quels \'e9l\'e9ments vont dans le 
\f3 <head>
\f0   et dans le 
\f3 <body>?
\f0 \
\pard\pardeftab720\sa240

\b0\fs24 \cf0 La principale diff\'e9rence est que les \'e9l\'e9ments que vous placerez dans le 
\f2 <body>
\f0  appara\'eetrons sur votre page web. Les \'e9l\'e9ments que vous mettrez dans le 
\f2 <head> 
\f0 ne seront jamais visible sur votre page web. Vous pouvez imaginer que ce que vous \'e9crirez dans le 
\f2 <head> 
\f0 est une fa\'e7on de communiquer secr\'e8tement avec le navigateur. Par exemple, la feuille de style de votre page web s'inscrit \'e0 cet endroit puisque nous ne voulons pas que le code du style apparaisse sur la page, mais nous souhaitons que le navigateur l'interpr\'e8te et l'applique ad\'e9quatement. \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Exercice\'a0: Ouvrir le fichier \'ab\'a0blank.html\'a0\'bb avec Sublime Text\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls7\ilvl0
\b0\fs24 \cf0 {\listtext	1.	}Changez le contenu entre les balises 
\f2 <title>
\f0  et observez les changements dans votre navigateur.\
{\listtext	2.	}Ajoutez un paragraphe.\
{\listtext	3.	}Ajoutez quelques titres \'e0 votre page; au-dessus de chaque paragraphe. Un conseil\'a0: vous aurez besoin de ces balises\'a0: 
\f2 <h1>
\f0  et 
\f2 </h1>
\f0 , 
\f2 <h2>
\f0  et 
\f2 </h2> 
\f0 et vous pouvez m\'eame exp\'e9rimenter avec h3, h4, h5 et h6 si vous le souhaitez.\
{\listtext	4.	}Ajoutez 3 hyperliens. Le code pour cr\'e9er un hyperlien ressemble \'e0 celui-ci\'a0:\uc0\u8232 
\f2 <a href="http://link.com">Cliquez ici !</a>
\f0 \
\pard\pardeftab720\sa240
\cf0 Ne vous en faites pas trop avec l'ordre de votre code pour l'instant. L'important est de coder!\
N'oubliez pas de sauvegarder votre fichier et de rafra\'eechir souvent la page affich\'e9e dans votre navigateur pour votre code en action!\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Un mot au sujet des attributs \
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Les attributs sont une autre partie tr\'e8s importante du code HTML.\
Un attribut HTML modifie un \'e9l\'e9ment HMTL. Il est compos\'e9 d'un nom et d'une valeur s\'e9par\'e9e par un = et \'e9crit \'e0 l'int\'e9rieur des chevrons de la balise ouvrante, apr\'e8s le nom de la balise.\
\pard\pardeftab720\sa240

\f2 \cf0 <balise attribut="valeur"> (contenu modifi\'e9 par la valeur) </balise>
\f0  Ici, \'ab\'a0balise\'a0\'bb repr\'e9sente l'\'e9l\'e9ment HTML et \'ab\'a0attribut\'a0\'bb repr\'e9sente le nom de l'attribut.\
Voici un exemple d'un attribut que nous avons d\'e9j\'e0 vu aujourd'hui\'a0:\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\f2 \cf0 <a href="http://link.com">Cliquez ici !</a>\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\f0 \cf0 Dans ce cas, \'ab\'a0a\'a0\'bb est la balise d'hyperlien, \'ab\'a0href\'a0\'bb est l'attribut et \'ab\'a0http://link.com\'a0\'bb est la valeur.\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Exercice\'a0: \'c9crivons le \'ab\'a0markup\'a0\'bb pour notre projet final\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\b0\fs24 \cf0 Le r\'e9sultat final/ l'\'ab\'a0output\'a0\'bb (ce que vous verrez dans votre navigateur) pour cet exercice est sur la prochaine diapo. \'c9crivez le HTML\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 \'c9crivez le HTML pour obtenir ce r\'e9sultat
\f2\b0\fs24 \

\f0 Un conseil\'a0: vous devriez utiliser <h1> et </h1> qu'une seule fois,  
\f2 <h2>
\f0  et 
\f2 </h2>
\f0  trois fois, 
\f2 <h3>
\f0  et 
\f2 </h3>
\f0  qu'une seule fois.\
\pard\pardeftab720\sa240
\cf0 Vous pouvez g\'e9n\'e9rer votre propre faux texte ici:  {\field{\*\fldinst{HYPERLINK "http://www.lipsum.com/"}}{\fldrslt \cf2 \ul \ulc2 http://www.lipsum.com}}. Ou encore, essayer {\field{\*\fldinst{HYPERLINK "http://cupcakeipsum.com/"}}{\fldrslt \cf2 \ul \ulc2 Cupcake Ipsum}} ou {\field{\*\fldinst{HYPERLINK "http://baconipsum.com/"}}{\fldrslt \cf2 \ul \ulc2 Bacon Ipsum}}, pour faire diff\'e9rent.\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Ajouter des images\

\b0\fs24 Apprenons comment ajouter des images \'e0 notre page web. Vous remarquerez que les balises d'image sont particuli\'e8res dans la mesure o\'f9 elles sont autofermantes/ \'ab\'a0self-closing\'a0\'bb. La balise d'image ne poss\'e8de pas de balise fermante. \
D\'e9butons en ajoutant une image d\'e9j\'e0 en ligne. Voici le code\'a0:\
\pard\pardeftab720

\f2 \cf0 <img src="http://placekitten.com/g/200/200">\
\
\pard\pardeftab720

\f0 \cf0 Essayez de copier/coller cette ligne de code dans votre projet juste sous la balise ouvrante 
\f2 <body>.\
\

\f0 Ensuite, essayez de trouver diff\'e9rentes images sur internet et remplacez celle du chaton.\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Ajouter des images, seconde partie\
\pard\pardeftab720

\b0\fs24 \cf0 Il existe une autre fa\'e7on d'ajouter des images si vos images ne sont pas d\'e9j\'e0 en ligne et qu'elles sont dans un fichier dans votre ordinateur.\
\
Dans votre dossier de projet, au m\'eame niveau que votre fichier \'ab\'a0blank.html\'a0\'bb vous trouverez une image appel\'e9e \'ab\'a0logo.png\'a0\'bb. Pour ajouter cette image sur votre page web vous devrez inscrire ce code\'a0: \
\pard\pardeftab720

\f2 \cf0 <img src="logo.png">\
\pard\pardeftab720

\f0 \cf0 Copiez/collez cette ligne de code dans votre projet, juste sous la balise ouvrante 
\f2 <body>.\

\f0 \
Ensuite, remplacez cette image avec une des images du dossier \'ab\'a0Images\'a0\'bb dans le dossier du projet. Un conseil\'a0: la solution est semblable, mais vous devrez ajouter \'ab\'a0images/\'a0\'bb devant le nom de l'image. ( Puisqu'\'ab\'a0Images\'a0\'bb est le nom du dossier, on doit avertir le navigateur pour qu'il sache o\'f9 trouver le fichier). \
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Exercice\'a0: Ajouter un logo et un avatar \'e0 votre projet\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\b0\fs24 \cf0 Le r\'e9sultat final/ l'\'ab\'a0output\'a0\'bb (ce que vous verrez dans votre navigateur) pour cet exercice est sur la prochaine diapo. \'c9crivez le HTML.\
\
\pard\tx220\tx720\pardeftab720

\b \cf0 Un conseil\'a0: le image du logo s'appelle \'ab\'a0logo.png\'a0\'bb et l'exemple d'avatar s'appelle \'ab\'a0profile.jpg\'a0\'bb. Vous les trouverez tous les deux dans le dossier \'ab\'a0images\'a0\'bb.\
\
\pard\pardeftab720\sa280

\fs36 \cf0 \'c9crivez le HTML pour obtenir ce r\'e9sultat\'a0: \
Rapide pr\'e9cision sur les types d'images\'a0: \
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Il y a 3 principaux types d'images\'a0: jpg, png et gif. Voici comment on les utilise\'a0:  \
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls8\ilvl0\cf0 {\listtext	\'95	}Pour une tr\'e8s grande image ou une photo\'a0: choisissez jpg\
{\listtext	\'95	}Pour les ic\'f4nes, les logos, du texte ou tout ce qui requi\'e8re un fond en transparence\'a0: choisissez png.\
{\listtext	\'95	}Pour des animations, particuli\'e8rement si elle contient des chats\'a0: choisissez gif (pour les chats, c'est une blague!)\
\pard\tx566\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Exercice\'a0: ajouter quelques images
\b0\fs24 \
\pard\tx220\tx720\pardeftab720\li720\fi-720
\cf0 Le r\'e9sultat final/ l'\'ab\'a0output\'a0\'bb (ce que vous verrez dans votre navigateur) pour cet exercice est sur la prochaine diapo.\
\
	\'95	Ajoutez l'image de quelque chose que vous aimez (jetez un oeil \'e0 ce lien et faites d\'e9rouler pour comprendre). \'c9vitez de prendre de grosses images pour l'instant, vous apprendrez comment redimensionner les images avec du CSS plus tard).\
	\'95	Ajouter les ic\'f4nes de Twitter, Facebook et Linkedin aux liens \'97 vous devrez utiliser des balises imbriqu\'e9es pour ceci afin que les images soient cliquables! Vous trouverez les logos que vous pouvez utiliser dans le dossier Projet/Images.\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 \'c9crivez le HTML pour obtenir ce r\'e9sultat\'a0: \
Et voil\'e0!\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\b0\fs24 \cf0  Vous avez \'e9crit tout le HTML n\'e9cessaire au projet d'aujourd'hui! Votre \'ab\'a0markup\'a0\'bb devrait ressembler \'e0 ceci\'a0:\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 \'c0 propos de l'organisation\
\pard\tx220\tx720\pardeftab720\li720\fi-720

\b0\fs24 \cf0 Avez-vous remarqu\'e9 comment le \'ab\'a0markup\'a0\'bb de la diapo pr\'e9c\'e9dente \'e9tait vraiment clair et facile \'e0 lire? Tout \'e0 \'e9t\'e9 pens\'e9 en cons\'e9quence!\
\
\pard\tx220\tx720\pardeftab720
\cf0 Prenez un moment pour mettre de l'ordre dans votre code pour qu'il soit identique \'e0 celui pr\'e9sent\'e9 en exemple. Quand nous aurons d\'e9but\'e9 le CSS, vous en serez heureux.\
\
\pard\pardeftab720\sa240

\b \cf0 D\'e9butons enfin le CSS!
\b0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 CSS\'a0: la base\
Le CSS va de pair avec le HTML\
Le CSS ne fait rien par lui m\'eame, c'est la couche de pr\'e9sentation par dessus celle du contenu. \
Si le HTML est la structure de la maison, le CSS est l'am\'e9nagement et la d\'e9coration. \
La syntaxe du CSS\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Le CSS est fait de r\'e8gles en symbiose avec les \'e9l\'e9ments du HTML (les balises comme 
\f2 <p>
\f0  et 
\f2 <ul>) 
\f0 pour d\'e9finir leur style, leur apparence. \
Une r\'e8gle CSS est compos\'e9e d'un
\b  s\'e9lecteur
\b0  et d'une ou plusieurs 
\b d\'e9clarations. \

\b0 Un
\b  s\'e9lecteur 
\b0 aide le navigateur \'e0 d\'e9terminer quel \'e9l\'e9ment sera modifi\'e9.\
\'c7a ressemble \'e0 ceci\'a0:\
\pard\pardeftab720

\f2 \cf0 h2 \{\}
\f0 \
\
\pard\pardeftab720\sa240
\cf0 Le s\'e9lecteur si dessus s\'e9lectionne tous les \'e9l\'e9ments de type 
\f2 <h2> 
\f0 et y applique un ou des styles. Les styles doivent \'eatre mentionn\'e9s entre les 2 accolades. \
\pard\pardeftab720\sa280

\b\fs36 \cf0 La syntaxe du CSS\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Une 
\b d\'e9claration 
\b0 dicte au navigateur quel style nous voulons donner \'e0 nos \'e9l\'e9ments.\
Une d\'e9claration est toujours compos\'e9e de 2 parties\'a0: une 
\b propri\'e9t\'e9 
\b0 et une 
\b valeur
\b0 .\
Une 
\b propri\'e9t\'e9 
\b0 dicte au navigateur qu'est-ce que nous allons modifier (par exemple\'a0: la police de caract\'e8re, une couleur, une taille, etc.)\
La 
\b valeur 
\b0 dicte au navigateur quelle sera la modification (par exemple\'a0: Arial, vert, petit, etc.)\
Une 
\b d\'e9claration
\b0  ressemble \'e0 ceci\'a0:\
\pard\pardeftab720

\f2 \cf0 background-color\'a0: green;\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 La syntaxe du CSS
\f2\b0\fs24 \
\pard\pardeftab720
\cf0 background-color\'a0: green;\
\pard\pardeftab720

\f0 \cf0 La 
\b valeur 
\b0 (la partie apr\'e8s les deux-points) est sp\'e9cifique au type de propri\'e9t\'e9.\
\
Par exemple\'a0: les propri\'e9t\'e9s reli\'e9es \'e0 une taille sont g\'e9n\'e9ralement exprim\'e9es en 
\f2 px
\f0   (nombre de pixels) alors que les propri\'e9t\'e9s reli\'e9es \'e0 une couleur seront sp\'e9cifi\'e9es avec le nom de la couleur ou son code ______.\
\
Il est primordial de respecter la syntaxe du code que vous \'e9crivez : un deux point apr\'e8s le nom de la propri\'e9t\'e9 et un point-virgule apr\'e8s la valeur.\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Ajouter du CSS au HTML\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Vous devez r\'e9diger votre CSS entre 2 balises 
\f2 <style></style>
\f0  .\
Vous devez ajouter ces balises dans le 
\f2 <head>
\f0  de votre document HTML, comme ceci\'a0:
\f2 \
\pard\pardeftab720
\cf0 <html>\
  <head>\
    <style>\
      h2 \{\
        background-color\'a0: green;\
      \}\
    </style>\
  </head>\
  <body>\
    \
  </body>\
</html>\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 La syntaxe du CSS
\f2\b0\fs24 \
\pard\pardeftab720

\f0 \cf0 Lorsque que nous rassemblons le s\'e9lecteur et les d\'e9clarations, cela nous donne une r\'e8gle CSS, comme ceci: \
\pard\pardeftab720\sa240
\cf0 When we put selectors and declarations together, they make a CSS rule, which looks like this:
\f2 \
\pard\pardeftab720
\cf0 h2 \{\
  background-color: green;\
\}\
\pard\pardeftab720\sa240

\f0 \cf0 Cette r\'e8gle s\'e9lectionnera tous les \'e9l\'e9ments de type 
\f2 <h2>
\f0  pour modifier leur arri\'e8re-plan afin qu'il soit vert. \
Essayer de copier/coller ce code entre les balises 
\f2 <style> 
\f0 de votre projet et rafra\'eechissez la page dans votre navigateur.\
\pard\pardeftab720\sa280

\b\fs36 \cf0 La syntaxe du CSS (slide 50)\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Il est possible d'ajouter plusieurs d\'e9clarations\ul  (propri\'e9t\'e9s: valeurs; sets)\ulnone  \'e0 un des s\'e9lecteurs pour modifier plusieurs propri\'e9t\'e9s: 
\f2 \
\pard\pardeftab720
\cf0   h2 \{\
    background-color: green;\
    font-size: 28px;\
  \}
\f0 \
\
Soyez certains que vous terminez chaque d\'e9claration par un point-virgule!\
\
Essayez de remplacer la r\'e8gle pr\'e9c\'e9dente pour le 
\f2 <h2>
\f0  avec celle-ci et rafra\'eechissez la page dans votre navigateur.\
\
Ensuite, enlevez tous le code que vous avez ajout\'e9 entre les balises 
\f2 <style>
\f0  . Nous en ajouterons d'autres bient\'f4t!\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Exercice: First CSS Rule\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls9\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Trouvez les balises 
\f2 <style>
\f0  entre les balises 
\f2 <head>
\f0  de votre fichier 
\b blank.html
\b0 \
{\listtext	\'95	}Entre les deux balises, \'e9crivez un s\'e9lecteur pour la balise 
\f2 <body>
\f0  du document\
{\listtext	\'95	}Puis, ajoutez une  propri\'e9t\'e9 de couleur/ 
\f2 color: 
\f0 avec une la valeur bleue/ 
\f2 blue;\
{\listtext	\'95	}body \{\
{\listtext	\'95	}  color: blue;\
{\listtext	\'95	}\}\
\ls9\ilvl0
\f0 {\listtext	\'95	}\
\pard\pardeftab720\sa240
\cf0 Tout le texte de la page est maintenant bleu puisque la balise 
\f2 <body>
\f0  est la plus haute dans la hi\'e9rarchie que l'on peut observer sur notre page et que la propri\'e9t\'e9 de couleur	/
\f2 color
\f0  s'applique sur le 
\f2 <body> 
\f0 ET tous ses \'e9l\'e9ments enfants incluant tous les titres, les paragraphes et les listes.\
\pard\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Utiliser les codes Hex\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Changeons le texte pour une co\ul uleur plus facile \'e0 lire. (Plus pr\'e9cise?)\ulnone \
Nous devrons utiliser un
\b  code hex 
\b0 qui est un code \'e0 6 caract\'e8res qui d\'e9crit une couleur.\
Il n'est pas n\'e9cessaire de savoir comment ce code se compose, souvenez-vous simplement qu'il doit toujours d\'e9buter par un signe #. Il peut \'eatre pratique de vous souvenir que quelques codes hex pour certaines couleurs de bases:\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls10\ilvl0\cf0 {\listtext	\'95	}Blanc: 
\f2 #FFFFFF
\f0 \
{\listtext	\'95	}Noir: 
\f2 #000000
\f0 \
{\listtext	\'95	}Rouge: 
\f2 #FF0000
\f0 \
{\listtext	\'95	}Vert: 
\f2 #00FF00
\f0 \
{\listtext	\'95	}Bleu: 
\f2 #0000FF
\f0 \
\pard\pardeftab720\sa240
\cf0 Le code pour un joli gris fonc\'e9 est le 
\f2 #444444
\f0 . Ajoutons-le!
\f2 \
\pard\pardeftab720
\cf0 body \{\
  color: #444444;\
\}\
\pard\pardeftab720\sa240

\f0 \cf0 Jetez un oeil \'e0 t{\field{\*\fldinst{HYPERLINK "http://www.colorpicker.com/"}}{\fldrslt \cf2 \ul \ulc2 http://colorpicker.com}} pour d'autres couleurs!\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Enjolivez vos caract\'e8res avec le CSS\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Il existe plusieurs propri\'e9t\'e9s CSS qui nous permettent de modifier l'apparence de notre texte en HTML\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls11\ilvl0
\f2 \cf0 {\listtext	\'95	}
\f0 taille de la police/
\f2 font-size
\f0 \
\ls11\ilvl0
\f2 {\listtext	\'95	}
\f4 \'e9paisseur de la police(normal, gras, tr\'e8s gras)/
\f2 font-weight
\f0 \
\ls11\ilvl0
\f2 {\listtext	\'95	}
\f0 style de la police/
\f2 font-style
\f0 \
\ls11\ilvl0
\f2 {\listtext	\'95	}
\f0 nom de la police/
\f2 font-family
\f0 \
\ls11\ilvl0
\f2 {\listtext	\'95	}
\f0 couleur/
\f2 color
\f0 \
\ls11\ilvl0
\f2 {\listtext	\'95	}
\f0 hauteur de la ligne/
\f2 line-height
\f0\b\fs36 \
\pard\pardeftab720\sa280
\cf0 Enjolivez vos caract\'e8res avec le CSS,  2e partie\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Modifions notre police de caract\'e8re pour Helvetica sans-s\'e9rif:\
\pard\pardeftab720

\f2 \cf0  body \{\
    color: #444444;\
    font-family: Helvetica, Arial, sans-serif;    \
  \}\
\pard\pardeftab720\sa240

\f0 \cf0 La propri\'e9t\'e9 \'abfont-family\'bb (famille de police) accepte une liste de type de polices: le premier est votre premier choix de police, les autres para\'eetrons seulement si le premier choix (dans l'ordre) n'est pas disponible. Toutes les polices ne sont pas disponibles, autant que possible choisissez-en une qui sera \'abweb-safe\'bb.\
Comme:\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls12\ilvl0
\f5 \cf0 {\listtext	\'95	}Arial\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls12\ilvl0
\f6 \cf0 {\listtext	\'95	}Verdana\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls12\ilvl0
\f4 \cf0 {\listtext	\'95	}Times New Roman\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls12\ilvl0
\f7 \cf0 {\listtext	\'95	}Georgia\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls12\ilvl0
\f2 \cf0 {\listtext	\'95	}Courier\
\pard\tx566\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Modifier une taille de police\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Si nous voulions que nos balises 
\f2 <h1>
\f0  et 
\f2 <h2>
\f0  soient plus grosses, nous \'e9crierions:\
\pard\pardeftab720

\f2 \cf0 h1 \{\
  font-size: 48px;\
\}\
h2 \{\
  font-size: 32px;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Changer la hauteur de ligne\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous pouvons modifier le \'abline height (or leading)\'bb (la hauteur de ligne) avec la propri\'e9t\'e9 
\f2 line-height
\f0 .\
\pard\pardeftab720\sa240

\f2 \cf0 line-height
\f0  sp\'e9cifie une hauteur \'e9quivalente au multiple de la taille de la police choisie.  Donc, une valeur de 
\f2 1.4
\f0  signifierait que les lignes seraient 1.4x plus hautes que le texte.\

\f2 p \{\
\pard\pardeftab720
\cf0   line-height: 1.4;\
\} \
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Modifier des images\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajoutons des bordures autour de votre image d'avatar
\f2 <img>
\f0 .
\f2 \
\pard\pardeftab720
\cf0 img \{\}\
\pard\pardeftab720\sa240

\f0 \cf0 The 
\f2 border
\f0  property has 3 parts: the width, the style, and the colour. So, if we want a 1px wide, solid, grey border, we use:
\f2 \
\pard\pardeftab720
\cf0 img \{\
  border: 1px solid grey;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Plus pr\'e9cis\'e9ment\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nos bordures sont maintenant appliqu\'e9es sur 
\b toutes 
\b0 les images de notre page, incluant notre logo. Ce n'est pas ce que nous voulons, nous voudrons donc trouver une fa\'e7on de s\'e9lectionner seulement la photo de profil. \
Le HTML nous permet d'ajouter des identificateurs \'e0 nos balises pour que nous puissions ensuite les s\'e9lectionner. Nous les appelons des \'ab classes\'bb. \
\pard\pardeftab720

\f2 \cf0 <p class="classname"></p>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Cibler un \'e9l\'e9ment avec une \'abClass\'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous pouvons \'e9crire un s\'e9lecteur dans notre CSS pour cibler l'\'e9l\'e9ment auquel nous avons ajout\'e9 une classe en utilisant: \
\pard\pardeftab720\sa240

\f2 \cf0 p.classname \{\}\
\pard\pardeftab720\sa240

\f0 \cf0 Et ajouter le style d\'e9sir\'e9 uniquement \'e0 l'item choisi avec la classe:\
\pard\pardeftab720

\f2 \cf0 p.classname \{\
  color: red;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Exercice: Styler votre avatar\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls13\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Styler votre avatar!\
{\listtext	\'95	}Ajouter une classe 
\f2 profile
\f0  \'e0 la balise correspondante \'e0 votre image de profil\
{\listtext	\'95	}Cibler cette classe dans votre CSS avec le s\'e9lecteur 
\f2 img.profile
\f0 \
{\listtext	\'95	}Ajoutez-y une bordure de la couleur de votre choix\
{\listtext	\'95	}Si votre image est trop grande, vous pouvez la redimensionner avec les propri\'e9t\'e9s 
\f2 width
\f0  et 
\f2 height
\f0  (largeur et hauteur), qui doivent \'eatre en 
\f2 px
\f0  (pixels). Essayez 200 x 200 px. Voici un exemple de comment utiliser le 
\f2 width
\f0  et le 
\f2 height
\f0  ci-dessous:
\f2 \
{\listtext	\'95	}img \{\
{\listtext	\'95	}  width: 200px;\
{\listtext	\'95	}  height: 200px;\
{\listtext	\'95	}\}\
{\listtext	\'95	}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 R\'e9sultat : Styler votre avatar\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Votre  HTML devrait ressemble \'e0 ceci: \
\pard\pardeftab720

\f2 \cf0 <img class="profile" src="images/profile.jpg"> \
\
\pard\pardeftab720\sa240

\f0 \cf0 Et votre  HTML devrait ressemble \'e0 cela:\
\pard\pardeftab720

\f2 \cf0 img.profile \{\
  border: 1px solid grey;\
  width: 200px;\
  height:200px;  \
\} \
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajouter plus de classes\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous pouvons faire la m\'eame chose pour styler nos images d'\'abobjets favoris\'bb.\
Comme nous voudrons probablement obtenir le m\'eame style pour nos 4 images, nous devrons leur ajouter le m\'eame nom de classe.\
Ajoutez la classe \'abfavoris\'bb \'e0 chaque image.\
\pard\pardeftab720

\f2 \cf0 <img class="favouris" src="images/kitten.jpg" >\
\pard\pardeftab720\sa240

\f0 \cf0 Ajouter du style \'e0 vos images, faites varier leurs 
\f2 width
\f0 , 
\f2 height
\f0  et 
\f2 border
\f0 .\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Faites-en plus!\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls14\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Essayez des choses amusantes comme un 
\f2 border-radius: 50%;
\f0 \
{\listtext	\'95	}Ou 
\f2 border: 3px dotted pink;
\f0 \
{\listtext	\'95	}Ou encore 
\f2 box-shadow: 0 0 4px grey;
\f0 \
{\listtext	\'95	}Votre CSS devrait ressembler \'e0 ceci:
\f2 \
{\listtext	\'95	}img.favourite \{\
{\listtext	\'95	}  border: 1px solid grey;\
{\listtext	\'95	}  width: 200px;\
{\listtext	\'95	}  height: 200px;\
{\listtext	\'95	}  border-radius: 50%;\
{\listtext	\'95	}\}\
\pard\tx566\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ne vous inqui\'e9tez pas d'avoir \'e0 retenir toutes ces propri\'e9t\'e9s CSS. Comme il y en a beaucoup, m\'eame les pros doivent consulter des r\'e9f\'e9rences de temps \'e0 autre :) \
Le \'ab Box Model \'bb\
\pard\pardeftab720\sa280

\fs28 \cf0 Voici une partie plus complexe du CSS, ne vous en faites pas si elle vous rend confuse \'e0 premi\'e8re vue.\
\pard\pardeftab720\sa280

\b0\fs24 \cf0 Le \'ab Box Model \'bb d\'e9crit la fa\'e7on dont le CSS style les dimensions et l'espacement entre les \'e9l\'e9ments HTML.\
Pour comprendre le \'abBox Model\'bb, nous devons comprendre comment les navigateurs \'abvoient\'bb ces \'e9l\'e9ments HTML.\
Pour le navigateur, tous les \'e9l\'e9ments HTML sont des bo\'eetes rectangulaires.\
Si nous montrions les contours de chaque \'e9l\'e9ment d'un document HTML, cela ressemblerait un peu \'e0 la prochaine diapo:\

\b\fs36 Le \'ab Box Model \'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 En CSS il existe 5 propri\'e9t\'e9s pour d\'e9terminer les dimensions et l'espacement entre ces bo\'eetes:\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls15\ilvl0
\f2 \cf0 {\listtext	\'95	}Margin
\f0 , 
\f2 padding
\f0 , 
\f2 border
\f0 , 
\f2 width
\f0 , et 
\f2 height (marges, marge int\'e9rieure ou rembourrage, largeur et hauteur) 
\f0 \
{\listtext	\'95	}Ces 5 propri\'e9t\'e9s sont les fondements du  \'ab 
\b Box Model \'bb\
\pard\tx566\pardeftab720

\f2\b0 \cf0 \
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Marge et rembourrage\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls16\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Disons   que nous avons 3 \'e9l\'e9ments  dans notre document HTML:  un 
\f2 <p>
\f0 , un
\f2 <h2>
\f0 , et un autre  
\f2 <p>
\f0 \
{\listtext	\'95	}Ajoutons une bordure rouge autour d'un 
\f2 <h2>
\f0  et ajouter un arri\'e8re-plan rose:
\f2 \
{\listtext	\'95	}h2 \{\
{\listtext	\'95	}  border: 1px solid red;\
{\listtext	\'95	}  background: pink;\
{\listtext	\'95	}\}\
\ls16\ilvl0
\f0 {\listtext	\'95	}\
{\listtext	\'95	}Jusqu'\'e0 pr\'e9sent, le r\'e9sultat n'est pas joli. Tous les \'e9l\'e9ments sont trop rapproch\'e9s!\
\pard\tx566\pardeftab720

\f2 \cf0 \
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 \'ab Margins \'bb\

\b0\fs24 Il y a 2 propri\'e9t\'e9s CSS pour ajouter des espaces autour des \'e9l\'e9ments: 
\f2 margin
\f0  et 
\f2 padding. (marges, marge int\'e9rieure ou rembourrage)\
\pard\pardeftab720\sa240

\f0 \cf0 La propri\'e9t\'e9 
\f2 margin
\f0  ajout de l'espace 
\i autour 
\i0 de l'\'e9l\'e9ment, en dehors de la bordure.
\f2 \
\pard\pardeftab720
\cf0 h2 \{\
  margin: 40px;\
\}  \
\pard\pardeftab720\sa240

\f0 \cf0 Ce code ajoute 40px d'espace de chaque c\'f4t\'e9 de l'\'e9l\'e9ment.\
\pard\pardeftab720\sa280

\b\fs36 \cf0 \'ab Padding \'bb\

\b0\fs24 Si nous voulons ajouter de l'espace \'e0 
\i l'int\'e9rieur
\i0  de la bordure, nous utiliserons la propri\'e9t\'e9 
\f2 padding.\
\pard\pardeftab720
\cf0 h2 \{\
  margin: 40px;\
  padding: 40px;\
\}\
\pard\pardeftab720\sa240

\f0 \cf0 Ce code ajoute 40px d'espace de chaque c\'f4t\'e9 de l'\'e9l\'e9ment, mais \'e0 l'int\'e9rieur de la bordure. \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Margin vs. Padding\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajouter du  
\f2 padding
\f0  sur un \'e9l\'e9ment, le rendra 
\b plus gros, 
\b0 alors qu'ajouter de la marge (
\f2 margin)
\f0  ajoutera de l'espace autour de l'\'e9l\'e9ment. \
Si vous cr\'e9ez un \'e9l\'e9ment large de 100px et ajoutez 40px de padding, l'\'e9l\'e9ment aura, au final, 180px de largeur. \
Si vous ajouter 40px de 
\f2 margin 
\f0 \'e0 un \'e9l\'e9ment large de 100px, il demeurera large de 100px au final.\
Si vous ajoutez une bordure large d'1px \'e0 un \'e9l\'e9ment large de 100px, il deviendra large de 102px.\
Si votre \'e9l\'e9ment n'a pas de bordure ou d'arri\'e8re-plan, vous ne serez peut-\'eatre pas capable de percevoir la diff\'e9rence entre les 
\f2 margin 
\f0 et le 
\f2 padding.\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Plus sur les \'ab Margins \'bb et \'ab Padding \'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Vous pouvez sp\'e9cifier de quel c\'f4t\'e9 vous voulez ajouter votre margin ou padding avec les propri\'e9t\'e9s: 
\f2 margin-top, margin-right, margin-bottom,
\f0  et 
\f2 margin-left
\f0  :
\f2 \
\pard\pardeftab720
\cf0 h2 \{\
  margin-top: 40px;\
  margin-bottom: 40px;\
\}\
\pard\pardeftab720\sa240

\f0 \cf0 Il en va de m\'eame pour le 
\f2 padding
\f0  et le 
\f2 border
\f0 :
\f2 \
\pard\pardeftab720
\cf0 h2 \{\
  padding-bottom: 40px;\
  border-left: 1px solid red;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Exercice: \'ab Box Model \'bb\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls17\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Ajouter du 
\f2 padding
\f0  \'e0 votre avatar. Ceci devrait ajouter de l'espace entre l'image et la bordure . Essayer avec 5px.\
{\listtext	\'95	}Ajouter du 
\f2 padding
\f0  et du 
\f2 margin
\f0  \'e0 vos images 'favourite'. Essayez avec 5px pour le 
\f2 padding
\f0  et 10px pour les marges (
\f2 margin).
\f0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Solution: Box Model\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Votre code devrait ressemble \'e0 ceci:
\f2 \
\pard\pardeftab720
\cf0 img.profile \{\
  padding: 5px;\
\}\
img.favourite \{\
  padding: 5px;\
  margin: 10px;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Centrer le logo
\f2\b0\fs24 \

\f0 Vous voudrez s\'fbrement que le logo se trouve au centre de votre page. Pour centrer un \'e9l\'e9ment en CSS, nous d\'e9clarerons les marges de c\'f4t\'e9 \'e0 
\f2 auto
\f0 , qui indiquera au navigateur de calculer automatiquement la marge n\'e9cessaire \'e0 ajouter pour que l'\'e9l\'e9ment soit centr\'e9 horizontalement. \
Au lieu de sp\'e9cifier les marges de gauches et les marges de droite (
\f2 margin-left
\f0  & 
\f2 margin-right)
\f0  appropri\'e9es, nous pouvons utiliser ce raccourci.\
\pard\pardeftab720

\f2 \cf0 img \{\
  margin: 0 auto;\
\}\
\pard\pardeftab720

\f0 \cf0 Le 0 indique la mesure de la marge du haut et du bas (
\f2 margin-top
\f0  & 
\f2 margin-bottom),
\f0 tandis qu\'92
\f2 auto
\f0  indique autant la marge de gauche que celle de droite (
\f2 margin-left
\f0  & 
\f2 margin-right)
\f0  . \
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Centrer le logo\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous avons besoin de cibler notre \'e9l\'e9ment logo pour ne pas centrer toutes les images.\
Ajoutons la classe 
\f2 logo
\f0   \'e0 votre balise 
\f2 <img>
\f0  :\
\pard\pardeftab720

\f2 \cf0 <img class="logo" src="images/logo.png">\
\pard\pardeftab720\sa240

\f0 \cf0 Puis, \'e9crivez un s\'e9lecteur dans votre CSS et appliquez la propri\'e9t\'e9 
\f2 margin
\f0  :
\f2 \
\pard\pardeftab720
\cf0 img.logo \{\
  margin: 0 auto;\
\}
\f0\b\fs36 \
Il ne s'est rien pass\'e9!\
\pard\pardeftab720

\b0\fs24 \cf0 Revenons de quelques \'e9tapes:\
\
Vous vous souvenez des bo\'eetes aux bordures rouges ?\
\
Aviez-vous remarqu\'e9 que les bordures rouges autour des images ne s'\'e9tiraient pas d'un bout \'e0 l'autre de l'\'e9cran comme les autres bo\'eetes? \
\
\pard\pardeftab720

\b\fs36 \cf0 Il ne s'est rien pass\'e9, prise 2!\
\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ce r\'e9sultat est d\'fb au fait que les balises <img> sont des \'e9l\'e9ments \'ab
\i inline
\i0 \'bb. Les \'e9l\'e9ments 
\i inline 
\i0 ne prennent pas la pleine largeur de la page, ils prennent seulement l'espace requis par leur contenant.\
La plupart des \'e9l\'e9ments, comme  les 
\f2 <h2>, <p>,
\f0  ou 
\f2 <ul> 
\f0 prennent la pleine largeur de la page, ces \'e9l\'e9ments sont de type \'ab
\i block
\i0 \'bb.\
Parce que votre \'e9l\'e9ment logo est aussi large que l'image, nous ne pouvons pas le centrer dans la page. Heureusement, il est facile de rem\'e9dier \'e0 cette situation:  dites \'e0 la balise <img> de se comporter comme un \'e9l\'e9ment 
\i block
\i0  en utilisant la propri\'e9t\'e9 
\f2 display
\f0 .
\b\fs36 \
\pard\pardeftab720

\f2\b0\fs24 \cf0 img.logo \{\
  margin: 0 auto;\
  display: block;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 D'autres \'e9l\'e9ments \'ab inline \'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 D'autres \'e9l\'e9ments communs sont de type 
\i inline
\i0  comme le 
\f2 <a>, <strong>,
\f0  et 
\f2 <em>
\f0 .\
Les \'e9l\'e9ments 
\i inline
\i0  ne cr\'e9ent pas de saut de ligne, ainsi vous les retrouverez souvent \'e0 l'int\'e9rieur d'un paragraphe ou dans le milieu d'une phrase.\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Canevas: Section par Section\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Notre site a beaucoup plus d'allure maintenant, il donc  temps de styler les diff\'e9rentes sections.\
Nous aurons besoin d'une fa\'e7on de cibler chaque section individuellement, regroupant les \'e9l\'e9ments \'e0 l'int\'e9rieur d'une m\'eame section pour cr\'e9er un canevas. \
Heureusement, le HTML poss\'e8de une balise 
\f2 <section>
\f0  . Nous engloberons chaque section avec une balise 
\f2 <section>
\f0   et ajouter une classe \'e0 chacune d'entre elles, ainsi nous pourrons les styliser individuellement avec le CSS.\

\b\fs36  Section  \'ab banner \'bb\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls18\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Ajoutez une balise ouvrante 
\f2 <section>
\f0  avant le logo.\
{\listtext	\'95	}Ajoutez une balise fermante 
\f2 </section>
\f0  juste apr\'e8s le paragraphe de slogan. \
{\listtext	\'95	}Ajoutez une classe appel\'e9e \'abbanner\'bb \'e0 la balise 
\f2 <section>
\f0 .
\f2 \
{\listtext	\'95	}<section class="banner">\
{\listtext	\'95	}  <img>\
{\listtext	\'95	}  <h1>...</h1>\
{\listtext	\'95	}  <p>...</p>\
{\listtext	\'95	}</section> 
\f0 \
\pard\tx566\pardeftab720

\b\fs36 \cf0 \
\pard\pardeftab720\sa280
\cf0 CSS de la section \'ab banner \'bb\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls19\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Ciblez la balise 
\f2 <section>
\f0  avec un s\'e9lecteur dans votre CSS
\f2 \
{\listtext	\'95	}section.banner \{\}  \
\ls19\ilvl0
\f0 {\listtext	\'95	}\
{\listtext	\'95	}Ajoutez un peu de padding dans le haut et le bas de la section pour donner \'e0 notre logo et notre texte un peu d'espacement.
\f2 \
{\listtext	\'95	}section.banner \{\
{\listtext	\'95	}  padding-top: 110px;\
{\listtext	\'95	}  padding-bottom: 110px;\
{\listtext	\'95	}\}\
\pard\tx566\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Exercice: Ajoutez une image d'arri\'e8re-plan \'97\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls20\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}Trouvez une grande image dans votre ordinateur ou sur Internet et ajoutez-la au dossier image de votre projet;\
{\listtext	\'95	}Ajoutez-la en  
\f2 background-image
\f0  de votre nouvelle banni\'e8re 
\f2 <section>
\f0  que nous venons de cr\'e9er;\
{\listtext	\'95	}Ajustez la propri\'e9t\'e9 
\f2 color
\f0  de la section avec une couleur qui contraste celle de votre image d'arri\'e8re-plan. \
{\listtext	\'95	}Ajustez la propri\'e9t\'e9 
\f2 text-align
\f0  et la valeur 
\f2 center 
\f0 pour centrer le texe.
\b\fs36 \
\pard\pardeftab720\sa240

\b0\fs24 \cf0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Solution: Ajoutez une image d'arri\'e8re-plan 
\b0\fs24 \
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls21\ilvl0\cf0  	\'95	Votre CSS devrait ressembler \'e0 ceci:
\f2 \
{\listtext	\'95	}section.banner \{\
{\listtext	\'95	}  background: url('images/background.jpg');\
{\listtext	\'95	}  color: #ffffff;\
{\listtext	\'95	}  text-align: center;\
{\listtext	\'95	}\}\
\ls21\ilvl0
\f0 	\'95\
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Le style par d\'e9faut des navigateurs\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous avons une affreuse marge blanche tout autour de notre image d'arri\'e8re-plan!\
Cela est caus\'e9 par le navigateur (Chrome) qui ajoute un tas de style par d\'e9faut, incluant des marges, aux \'e9l\'e9ments HTML. \
Nous pouvons ais\'e9ment nous d\'e9barrasser de ces ind\'e9sirables styles en ajoutant un  \'absnippet\'bb (un peu de code d\'e9j\'e0 existant ) appel\'e9 
\b normalize.css
\b0 .\
Ouvrez le fichier 
\b normalize.css 
\b0 et copiez son contenu dans le haut de votre document CSS.\
\pard\pardeftab720\sa280

\b\fs36 \cf0 CSS Child Selectors \'97 Le s\'e9lecteur enfant\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajustez le texte dans la section \'abBanner\'bb. \
Nous voudrons probablement rendre le teste du paragraphe plus gros, et r\'e9duire la marge du bas du 
\f2 <h1>.\

\f0 Nous aurons besoin d'une fa\'e7on de s\'e9lectionner la balise de paragraphe \'e0 l'int\'e9rieur de la  section \'abbanner\'bb et seulement elle. \
Nous pourrions y ajouter une classe comme nous avons fait pour l'image, mais il y existe une autre fa\'e7on, plus facile. \
Nous pouvons utiliser la classe que nous avons ajout\'e9e \'e0 l'\'e9l\'e9ment 
\f2 <section> 
\f0 pour cibler les \'e9l\'e9ments qui sont \'e0 l'int\'e9rieur.\
\pard\pardeftab720\sa280

\b\fs36 \cf0 CSS Child Selectors \'97 Le s\'e9lecteur enfant\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Vous pouvez \'e9crire un \'ab
\b child selector
\b0 \'bb un s\'e9lecteur enfant pour s\'e9lectionner les balises qui sont des enfants nich\'e9s dans les autres balises.\
Nous ajoutons un espace entre le s\'e9lecteur parent et le s\'e9lecteur enfant pour sp\'e9cifier:\
\pard\pardeftab720

\f2 \cf0 section img \{\}  \
\pard\pardeftab720\sa240

\f0 \cf0 Le s\'e9lecteur ci-dessus s\'e9lectionnera seulement les balises 
\f2 <img>
\f0  qui sont nich\'e9es dans la balise 
\f2 <section>
\f0 .\
\pard\pardeftab720\sa280

\b\fs36 \cf0 CSS Child Selectors \'97Les s\'e9lecteurs d'\'e9l\'e9ment enfant\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Pour cibler la balise 
\f2 <p>
\f0  dans la \'abbanner\'bb 
\f2 <section>
\f0 , nous utiliserons:
\f2 \
\pard\pardeftab720
\cf0 section.banner p \{\}  \
\pard\pardeftab720\sa240

\f0 \cf0 Essayez d'augmenter la propri\'e9t\'e9 (taille de la police) 
\f2 font-size
\f0   de la balise 
\f2 <p>
\f0 .\
S\'e9lectionnez la balise 
\f2 <h1>
\f0  dans la section \'abbanner\'bb  de la m\'eame fa\'e7on, puis utiliser la propri\'e9t\'e9 
\f2 text-transform: uppercase 
\f0 pour mettre le texte en lettre majuscule. Votre CSS devrait ressembler \'e0 ceci: 
\f2 \
\pard\pardeftab720
\cf0 section.banner p \{\
  font-size: 18px;\
\}\
section.banner h1 \{\
  text-transform: uppercase;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 La section \'ab \'e0 propos \'bb \'97 The "About" Section\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 R\'e9p\'e9tons la proc\'e9dure pour la section \'ab about \'bb\
Nous engloberons la section entre des balises 
\f2 <section>
\f0  et nous ajouterons une classe "about":
\f2 \
\pard\pardeftab720
\cf0 <section class="about">\
  <h2>...</h2>\
  <img>\
  <p>...</p>\
</section>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 The "About" Section \'97 La section \'ab \'e0 propos \'bb\
The "About" Section\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajoutons une image d'arri\'e8re-plan en mosa\'efque pour cette section. \
Utilisez une image de votre dossier <strong>images</strong>, ou prenez l\'e0 en ligne. Essayez <a href="http://subtlepatterns.com/">http://subtlepatterns.com</a>. T\'e9l\'e9chargez une image et ajoutez l\'e0 \'e0 votre dossier images. Ajoutez l'image en arri\'e8re-plan de votre section \'ababout\'bb.
\f2 \
\pard\pardeftab720
\cf0 section.about \{\
  background: url('images/pattern.png');\
\}
\f0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Alignez au centre votre ent\'eate \'97 Centre-aligning the header\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous voulons que l'ent\'eate de cette section soit align\'e9 au centre. \
S\'e9lectionnons-le avec un \'ab child selector \'bb\
\pard\pardeftab720\sa240

\f2 \cf0 section.about h2 \{\}\
\pard\pardeftab720\sa240

\f0 \cf0 Alignez-le au centre avec la propri\'e9t\'e9 
\f2 text-align: center
\f0 :
\f2 \
\pard\pardeftab720
\cf0 section.about h2 \{\
  text-align: center;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Le Flux CSS \'97 CSS  \'ab Floats \'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous voulons aligner notre avatar \'e0 gauche et permettre au texte de se placer autour, de l'envelopper. Nous r\'e9ussirons cela avec 
\b CSS Floats.\

\b0 Souvenez-vous comment tous les \'e9l\'e9ments HTML se positionnaient en \'e9l\'e9ments rectangulaires, les uns au-dessus des autres?\
Nous devons briser cet \'e9talage en utilisant la propri\'e9t\'e9 
\b float 
\b0 sur les images pour les positionner sur les c\'f4t\'e9s. Ce qui aura pour r\'e9sultat de tasser le texte \'e0 c\'f4t\'e9 de l'image, parce que nous aurons modifi\'e9 le flux des bo\'eetes rectangulaires. \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Le Flux CSS \'97 CSS  \'ab Floats \'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous avons \'e9crit le s\'e9lecteur pour notre  
\f2 <img> 
\f0 de profil alors, ajoutons-lui la d\'e9claration 
\f2 float: left;
\f0  to \
\pard\pardeftab720\sa240

\f2 \cf0 img.profile \{\
\pard\pardeftab720
\cf0   float: left;\
\}\
\pard\pardeftab720\sa240

\f0 \cf0 Ceci a \'abfloat\'e9\'bb notre image vers la gauche, mais il y a un probl\'e8me\'85 pouvez-vous le trouver? \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Le Flux CSS \'97 CSS  \'ab Floats \'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous avons bris\'e9 le flux des bo\'eetes rectangulaires en ajoutant 
\f2 float: left; 
\f0 \'e0 notre image. \
Nous devons restaurer le flux r\'e9gulier des bo\'eetes apr\'e8s cette section. \
Nous corrigerons cette situation en ajoutant 
\f2 overflow: hidden;
\f0  \'e0 l'\'e9l\'e9ment parent 
\f2 <section class="about">
\f0 ).\
\pard\pardeftab720
\cf0 La propri\'e9t\'e9 
\f2 overflow: hidden;
\f0  force les \'e9l\'e9ments \'e0 contenir tous les \'e9l\'e9ments enfants \'abfloat\'e9s\'bb, pour ne pas qu'ils d\'e9rangent le flux des \'e9l\'e9ments apr\'e8s eux. \
\pard\pardeftab720

\f2 \cf0 \
section.about \{\
  overflow: hidden;\
\}\
\pard\pardeftab720

\f0 \cf0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Prochaine Section: la \'abFavourites\'bb\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Il n'y a pas beaucoup \'e0 faire ici, mais centrons les \'e9l\'e9ments de cette section.\
Premi\'e8rement, nous devons ajouter une balise englobante 
\f2 <section> 
\f0 autour du contenu \'ab favourite\'bb.\
Ajoutez une balise ouvrante 
\f2 <section>
\f0  avant l'ent\'eate 
\i  favourites
\i0  , et une balise fermante 
\f2 </section>
\f0  apr\'e8s la derni\'e8re image:\
\pard\pardeftab720

\f2 \cf0 <section class="favourites">\
  <h2>...</h2>\
  <h3>...</h3>\
  <img class="favourite" src="images/kitten.jpg">\
  <img class="favourite" src="images/kitten.jpg">\
  <img class="favourite" src="images/kitten.jpg">\
  <img class="favourite" src="images/kitten.jpg">\
</section>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Aligner horizontalement\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 \'c9crivons un s\'e9lecteur pour la section que nous venons de cr\'e9er: 
\f2 \
\pard\pardeftab720
\cf0 section.favourites \{\}  \
\pard\pardeftab720\sa240

\f0 \cf0 Et alignez-le au centre:
\f2 \
\pard\pardeftab720
\cf0 section.favourites \{\
  text-align: center;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Exercice:  Section "Contact"\
\pard\tx220\tx720\pardeftab720\li720\fi-720
\ls22\ilvl0
\b0\fs24 \cf0 {\listtext	\'95	}R\'e9p\'e9ter le processus. Ajoutez une balise englobante 
\f2 <section>
\f0  \'e0 la section "Contact" et alignez le tout au centre avec le CSS.\
{\listtext	\'95	}Ajoutez une image d'arri\'e8re-plan \'e0 la section contact.\
{\listtext	\'95	}Ajoutez des 
\f2 margin
\f0 s autour des images de la section contact.\
\pard\tx566\pardeftab720
\cf0 \
\pard\pardeftab720\sa280

\b\fs36 \cf0 R\'e9sultat: Section "Contact"\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Votre HTML vous devait ressembler \'e0 ceci: 
\f2 \
\pard\pardeftab720
\cf0 <section class="contact">\
  <h2>Contact Me</h2>\
  <a href="https://">...</a>\
  <a href="https://">...</a>\
  <a href="https://">...</a>\
</section>\
\pard\pardeftab720\sa240

\f0 \cf0 Et votre CSS, \'e0 cela :
\f2 \
\pard\pardeftab720
\cf0 section.contact \{\
  text-align: center;\
  background: url('images/tile2.png');\
\}\
section.contact img \{\
  margin: 20px;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Styliser plusieurs sections \'e0 la fois\

\b0\fs24 Toutes nos sections seraient plus jolies si elles \'e9taient plus espac\'e9es, elles sont un peu tass\'e9es les unes contre les autres.\
Ajoutons un peu de 
\f2 padding 
\f0 \'e0 nos sections.  Comme nous voulons ajouter la m\'eame quantit\'e9 de 
\f2 padding
\f0  \'e0 chaque section, nous pouvons \'e9viter de nous r\'e9p\'e9ter en ajoutant un nom de classe \'e0 chaque section. Enfin, nous pourrons cibler cette classe dans notre CSS.\
\pard\pardeftab720\sa240
\cf0 Ajoutez une classe \'abbox\'bb (bo\'eetes) \'e0 chaque contenant 
\f2 <section> (
\f0 Sauf la section \'abbanner\'bb).
\b\fs36 \
\pard\pardeftab720

\f2\b0\fs24 \cf0 <section class="about box"></section>\
<section class="favourites box"></section>\
<section class="contact box"></section>
\f0 \
\
\pard\pardeftab720\sa280

\b\fs36 \cf0 Styler plusieurs sections \'e0 la fois\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 \'c9crivons un s\'e9lecteur pour nos nouvelles classes:
\f2 \
\pard\pardeftab720
\cf0 section.box \{\}\
\pard\pardeftab720\sa240

\f0 \cf0 Et ajouter un peu de padding \'e0 toutes nos sections:
\f2 \
\pard\pardeftab720
\cf0 section.box \{\
  padding: 50px 100px;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Styler plusieurs sections \'e0 la fois, la suite\

\b0\fs24 Nous pouvons aussi utiliser nos classes 
\f2 box
\f0  pour cibler nos ent\'eates dans chacune des sections.\
Ensuite, nous ciblerons nos balises 
\f2 <h2>
\f0  et 
\f2 <h3>
\f0 , nous \'e9crirons un s\'e9lecteur pour les deux, en les s\'e9parant avec une virgule. \
\pard\pardeftab720

\f2 \cf0 section.box h2, section.box h3 \{\}\
\pard\pardeftab720\sa240

\f0 \cf0 Et changeons la couleur de nos ent\'eates:
\f2 \
\pard\pardeftab720
\cf0 section.box h2, section.box h3 \{\
  color: #A8258D;\
\}
\f0\b\fs36 \
\pard\pardeftab720\sa280
\cf0 Maintenant, nous avons un tr\'e8s joli site web dont tous les \'e9l\'e9ments sont parfaitement styl\'e9s!\
Mais, il reste quelque chose \'e0 ajouter pour rendre le tout extraordinaire\'85\
Les arri\'e8re-plans fixes\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Pour arriver \'e0 ce joli effet o\'f9 l'arri\'e8re-plan reste en place lorsque vous faites d\'e9rouler la page, vous n'avez qu'\'e0 ajuster la propri\'e9t\'e9 
\f2 background-attachment
\f0 !\
\pard\pardeftab720

\f2 \cf0 section.banner \{\
  background-attachment: fixed;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajouter une police de caract\'e8re\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Des services comme {\field{\*\fldinst{HYPERLINK "http://www.google.com/fonts/"}}{\fldrslt \cf2 \ul \ulc2 Google Fonts}} rendent facile l'utilisation de plusieurs polices de caract\'e8res qui ne sont pas normalement support\'e9es par les ordinateurs.\
Allez sur {\field{\*\fldinst{HYPERLINK "http://www.google.com/fonts/"}}{\fldrslt \cf2 \ul \ulc2 Google Fonts}} et recherchez une police qui vous pla\'eet.\
Cliquez sur "add to collection" quand vous aurez trouv\'e9, puis cliquez sur le bouton "use" .\
Trouvez le code  \'e0 l'\'e9tape\'a03 des instructions et copiez-les dans le 
\f2 <head>
\f0  de votre document HTML. (Vous vous souvenez comment la section 
\f2 <head> 
\f0 envoie des informations \'abinvisibles\'bb au navigateur ?)
\f2 \
\pard\pardeftab720
\cf0 <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajouter une police de caract\'e8re, partie\'a02\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Copiez le code de l'\'e9tape\'a04 des instructions, dans votre document CSS.\
Ajouter la ligne de code n'importe o\'f9 vous souhaitez utiliser votre police de caract\'e8re sp\'e9ciale.\
Ajoutons-la d'abord \'e0 notre nos balises d'ent\'eate.
\f2 \
\pard\pardeftab720
\cf0 h1, h2, h3 \{\
  font-family: 'Oswald', sans-serif;\
\}\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajouter un Menu\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajoutons un menu au d\'e9but de notre document pour que nos usagers puissent naviguer sur le site.\
Les menus sont commun\'e9ment b\'e2tis sous forme de liste avec des liens \'e0 l'int\'e9rieur de chaque \'e9l\'e9ment list\'e9. \
Il existe 2 types de liste en HTML, les listes ordonn\'e9es et d\'e9sordonn\'e9es (num\'e9rot\'e9s et \'e0 puce).\
Et comme nous n'avons pas besoin de num\'e9ros, nous utiliserons une liste \'e0 puce, une liste d\'e9sordonn\'e9e avec des balises 
\f2 <ul></ul> 
\f0 pour indiquer o\'f9 la liste commence et se termine.\
Chaque puce ou \'e9l\'e9ment de liste est indiqu\'e9 par des balises 
\f2 <li></li>
\f0 qui doivent \'eatre nich\'e9es entre des balises 
\f2 <ul>
\f0  .
\f2 \
\pard\pardeftab720
\cf0 <ul>\
  <li>One list item</li>\
  <li>Another list item</li>\
</ul>\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajouter un Menu, suite\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajoutez une liste 
\f2 <ul> 
\f0 avec une classe \'abmenu\'bb  au d\'e9but de votre document HTML, juste apr\'e8s la balise
\f2 <body>
\f0  et ajoutez chaque ent\'eate de 
\f2 <section>
\f0  comme item de liste. Remarquez que nous avons transform\'e9 chaque item de liste en lien (plus \'e0 ce sujet dans un instant).Attention: n'oubliez jamais de fermer vos balises de liste!
\f2 \
\pard\pardeftab720
\cf0 <ul class="menu">\
  <li><a href="#about">About</a></li>\
  <li><a href="#favourites">Favourites</a></li>\
  <li><a href="#contact">Contact</a></li>\
</ul>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Ajouter un Menu, suite\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Ajoutons un peu de style \'e0 ces \'e9l\'e9ments de liste, comme une bordure et un arri\'e8re-plan et enlevons donc les puces de la liste.\
\pard\pardeftab720

\f2 \cf0 .menu \{\
  list-style: none;\
  padding: 0;\
  margin: 0;\
  text-align: center;\
  border-bottom: 1px solid #434A5C;\
  background: #ffffff;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Styliser le Menu\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous avons besoin d'aligner notre menu. \
Vous vous souvenez comment nous avions utilis\'e9 les propri\'e9t\'e9s 
\f2 display: block;
\f0  et 
\f2 display:inline; 
\f0 ?
\f2 \

\f0 Aucune d'elles ne nous donnera le r\'e9sultat que nous d\'e9sirons, car la propri\'e9t\'e9 
\f2 block
\f0  cr\'e9era une nouvelle ligne pour chaque \'e9l\'e9ment et la propri\'e9t\'e9 
\f2 inline
\f0  ne nous laissera pas ajouter de padding entre les \'e9l\'e9ments de notre liste.\
Heureusmenet, il existe une 3e option qui nous donnera le meilleur des modes: 
\f2 display: inline-block;
\f0 \
\'c9crivez un s\'e9lecteur et appliquez la propri\'e9t\'e9 
\f2 display: inline-block;
\f0  ainsi qu'un peu de padding autours de ces \'e9l\'e9ments (haut, bas et c\'f4t\'e9s).
\f2 \
\pard\pardeftab720
\cf0 .menu li \{\
  display: inline-block;\
  padding: 20px 35px;\
\}
\f0  \
\pard\pardeftab720\sa280

\b\fs36 \cf0 Styliser les liens d'un Menu\

\b0\fs24 Ajoutez un peu de style aux liens de votre menu. Enlevez le soulignement par d\'e9faut avec la propri\'e9t\'e9 
\f2 text-decoration: none
\f0\b\fs36 \
\pard\pardeftab720

\f2\b0\fs24 \cf0 .menu a \{\
  text-decoration: none;\
  color: #333333;\
  font-weight: bold;\
  text-transform: uppercase;\
  font-family: 'Oswald', sans-serif;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Rendre le menu "sticky"\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous pouvons faire en sorte que notre menu se retrouve toujours en haut de notre page m\'eame lorsque le site d\'e9file vers le bas, gr\'e2ce \'e0 la valeur
\f2 : fixed;
\f0  \
La propri\'e9t\'e9
\f2  position: fixed;
\f0  requiert que nous d\'e9finitions les propri\'e9t\'e9s 
\f2 top
\f0  et 
\f2 left
\f0  pour indiquer au navigateur o\'f9 fixer le menu.\
De cette fa\'e7on, la bo\'eete rectangulaire autour de notre menu se retrouve d\'e9truite, nous devons donc r\'e9tablir sa largeur en la d\'e9finissant avec la propri\'e9t\'e9 
\f2 width
\f0  et la valeur
\f2  100%:\
\pard\pardeftab720
\cf0 .menu \{\
  position: fixed;\
  top: 0;\
  left: 0;\
  width: 100%;\
\}\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Faire fonctionner les liens\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 Nous devons faire en sorte que les liens dans notre menu correspondent aux bonnes sections.\
Nous y arriverons en ajoutant un attribut 
\f2 id 
\f0 \'e0 chaque section afin de qu'elles correspondent aux liens 
\f2 href 
\f0 (sans le #).
\f2 \
\pard\pardeftab720
\cf0 <section id="about" class="about box"></section>\
<section id="favourites" class="favourites box"></section>\
<section id="contact" class="contact box"></section>\
\
\pard\pardeftab720\sa280

\f0\b\fs36 \cf0 Prochain exercice: soyez cr\'e9atives !\
Prochaines \'e9tapes: L'h\'e9bergement\
Pr\'e9sentement, votre site web ne vit que sur votre ordinateur, mais si vous souhaitez l'h\'e9berger gratuitement sur le web {\field{\*\fldinst{HYPERLINK "http://thephuse.com/development/hosting-static-sites-on-github-for-beginners/"}}{\fldrslt \cf2 \ul \ulc2 voici un tutoriel sur l'h\'e9bergement (en anglais)avec Github}}. Si vous avez d\'e9j\'e0 achet\'e9 de l'h\'e9bergement web et que vous souhaitez y t\'e9l\'e9verser/uploader votre projet , {\field{\*\fldinst{HYPERLINK "http://webdesign.com/wordpress-tips/ftp-for-beginners-how-to-upload-your-files/"}}{\fldrslt \cf2 \ul \ulc2 apprenez-en davantage sur l'\'abupload\'bb avec FTP.}}\
Prochaine \'e9tape: la version mobile!\
Votre site peut \'eatre pr\'e9sentable sur votre ordinateur, mais il peut s'afficher bien diff\'e9remment sur votre mobile. Heureusement, il sera facile de rem\'e9dier \'e0 cette situation lorsque vous en aurez appris davantage sur le design et le d\'e9veloppement destin\'e9s aux appareils mobiles.\
Ladies learning code offre aussi l'atelier "Introduction au web mobile", peut-\'eatre nous nous y retrouverons!\
\pard\pardeftab720\sa280
{\field{\*\fldinst{HYPERLINK "http://ladieslearningcode.com/events"}}{\fldrslt \cf2 \ul \ulc2 Jetez un oeil \'e0 nos \'e9v\'e9nements \'e0 venir, \'e0 travers le Canada.}}\
Merci beaucoup!\
\pard\pardeftab720\sa240

\b0\fs24 \cf0 \
\pard\pardeftab720
\cf0 (Utilisez les fl\'e8ches de gauche et de droite de votre clavier pour naviguer.)}