1

2

SOMMAIRE Introduction Partie I Les Bases en HTML et en CSS Chapitre 1 : Premire Approche Thorique du HTML et du CSS

Chapitre 2 : Les Bases en HTML Chapitre 3 : Les Bases en CSS

Partie II Formater du Texte & Positionner des Elments grce au CSS Chapitre 4 : Les Proprits de Type Font-

Chapitre 5 : Les Proprits de Type Text- Chapitre 6 : Le Modle des Botes

Partie III Fonctionnalits Avances

Chapitre 7 : Gestion du Background (Le Fond) Chapitre 8 : Intgrer des Images, de lAudio et de la

Vido grce au HTML5 Chapitre 9 : Les Tableaux Chapitre 10 : Les Formulaires

Partie IV Aller plus Loin Conclusion

3

INTRODUCTION Prsentation du cours et de ses objectifs Le but premier de ce cours est de vous apprendre pas pas coder en HTML5 et en CSS3. Outre cela, je vais galement mappliquer vous montrer la logique et les mcanismes derrire ces deux langages afin que vous compreniez ce que vous fates et que vous deveniez vite autonomes. Ce cours est divis en trois parties, progressives :

Une premire partie avec un peu de thorie dans laquelle nous poserons les bases pour un apprentissage solide ;

Une deuxime partie dans laquelle nous verrons comment positionner les diffrents lments de notre site et comment personnaliser nos textes ;

Une dernire partie o nous explorerons les fonctionnalits avances du HTML5 et du CSS3 (insertion de vidos, formulaires, responsive design, etc.).

Au fil de ce cours, nous aborderons galement dautres langages comme le XHTML ou le PhP lorsque cela justifi et afin que vous ayez une comprhension globale de ce que vous fates. A qui sadresse ce livre ? Les langages HTML et CSS sont, comme nous allons le voir, la base de tout projet de programmation informatique. Par extension, ce cours sadresse tous, du plus parfait nophyte lexpert ayant besoin dun rafraichissement. Le HTML et le CSS sont des langages plutt simples matriser et comprendre. Jai voulu dans ce livre vous apporter une approche concrte et directe de ces langages. Ce cours offre une difficult graduelle mais, en soi, il ny a jamais rien dinsurmontable.

4

En rsum, ce cours sadresse : Aussi bien au nophyte qu la personne exprimente ; A tous ceux qui veulent apprendre coder en HTML et en CSS

A propos de lauteur Je suis Pierre Giraud, jai 24 ans au jour de publication de ce livre et je suis passionn par lentreprenariat et lunivers de la technologie en gnral. Voici mon parcours en quelques lignes. Aprs un baccalaurat scientifique, je me dirige vers une classe prparatoire conomique option scientifique. A la suite de cette classe prparatoire, jintgre lEDHEC Lille. Ds mon entre lEDHEC, je commence en dehors des cours me familiariser et apprendre diffrents langages informatiques. Je dbute par le HTML, puis le CSS, puis le PhP, le MySQL, le JavaScript Je cre galement trois start-ups, pour tester , durant mes deux premires annes dcole : un e-commerce, un site de services, un commerce dachat/revente. Je connais deux (petits) succs et un chec relatif. Lors de mon anne de csure (anne de stage), je saute dfinitivement le pas et postule chez PrestaShop (distributeur de sa solution e-commerce Open Source). Je suis retenu et finit donc ma formation au sein de dveloppeurs. Je suis aujourdhui diplm dun double Master 2 Entreprenariat et de Gestion et peut me targuer dtre un expert PrestaShop et dans le domaine de le-commerce ainsi quun bon dveloppeur.

5

PARTIE I

LES BASES EN HTML ET EN CSS

6

CHAPITRE 1 : PREMIERE APPROCHE THEORIQUE DU HTML ET DU CSS 1.1 Pourquoi apprendre les langages HTML et CSS ? Si le monde de linformatique vous plat et que vous tes tent dapprendre la programmation informatique, vous serez oblig de passer par lapprentissage du HTML et du CSS et ceci pour deux raisons. Tout dabord, il faut savoir que le HTML et le CSS sont deux vritables standards et nont donc, ce titre, pas de concurrent comme cela peut tre le cas pour le langage PhP par exemple (concurrenc par Ruby on Rails et Django entre autres). Ensuite, les langages HTML et CSS sont vritablement le socle de tout projet de dveloppement web. Que vous vouliez crer un site e-commerce, un blog, une application mobile ou quoique ce soit dautre, vous serez oblig de passer par les langages HTML et CSS. Cela tant, si vous connaissez un petit peu le monde du web, vous pouvez trs bien vous dire que coder en HTML et en CSS est inutile puisque vous pouvez utiliser des solutions toutes fates comme des frameworks (WordPress, PrestaShop), des diteurs WYSIWIG (What You See Is What You Get) ou encore avoir recours aux services dune agence spcialise. Abattons ds maintenant quelques ides reues ! 1. Un framework, cest gnial. En effet, ce sont des centaines dheures de travail conomises pour vous et galement la garantie dun travail bien fait priori. Certes ! Toutefois, le jour o vous voulez intgrer quelque chose comme disons un systme de paiement, comment faites-vous ? Idem si vous voulez modifier un peu lapparence graphique de votre site.

7

Tout a pour vous dire que sil est vrai quinstaller un framework peut tre une bonne solution, ce nest plus suffisant aujourdhui sur le web.

2. Les diteurs WYSIWIG sont des diteurs qui codent votre place . En gros, vous choisissez dinsrer un paragraphe, une image, un carr, etc. et lditeur cre le code correspondant. Un exemple clbre est Adobe Dreamweaver. Si ces diteurs sont de plus en plus puissants et de mieux en mieux fait, il nempche quils font et continueront toujours faire des erreurs. En effet, il nest pas possible pour un programme de penser comme un humain et ainsi votre code ne sera jamais tout fait valide. De plus, certaines limitations demeurent. 3. Une agence spcialise ou un freelance, cela semble tre un must. Encore une fois : attention ! Tout dabord, nombre de freelances et dagences ne se rsument en fait qu un tudiant cherchant gagner un peu dargent. Je vous laisse imaginer dans nombre de cas le rsultat De plus, les grosses agences reconnues ont des prix qui dpassent certainement votre budget priori. Enfin, une fois le travail rendu, ne vous attendez pas ce que votre freelance ou votre agence vienne vous dpanner en cas de problme pendant des annes. Encore une fois, je ne vous dis pas de ne pas travailler avec une agence, je vous dis simplement de prendre des prcautions et de vous organiser avant. Apprendre le HTML et le CSS signifie entrer dans le monde des programmeurs et cest donc commencer les comprendre et parler comme eux. Si vous comprenez le HTML et le CSS avant de faire appel une agence, vous rdigerez alors un cahier des charges plus prcis et de

8

meilleure qualit et conomiserez finalement beaucoup dargent et de soucis. Finalement (on garde le meilleur pour la fin !), apprendre le HTML et le CSS cest surtout et avant tout avoir un socle pour comprendre comment fonctionne son site et ainsi pouvoir le modifier ou corriger des problmes au besoin. Deviendriez-vous plombier sur un coup de tte ? Non, car vous ny connaissez rien en plomberie. Cest exactement pareil sur le web. Vous nimaginez pas le nombre de gens qui se lancent sur le web sans la moindre connaissance de leur environnement et le nombre dchecs associs. Noubliez pas quil est essentiel, pour quun commerce fonctionne (et aujourdhui plus que jamais) davoir une comprhension de son propre business, de son architecture et infrastructure et de son environnement. Si vous fates leffort de comprendre cela, vous avez dores-et-dj battu 95% de vos concurrents. Sans compter que pour optimiser votre rfrencement (donc votre visibilit sur le web), la matrise du HTML et du CSS est indispensable. Convaincu ? Dans ce cas, passons la suite ! Car je parle, je parle, mais nous ne savons toujours pas ce que signifient HTML et CSS ! 1.2 Dfinitions et rles du HTML et du CSS HTML est labrviation de HyperText Markup Language, soit en franais langage hypertexte de balisage . Ce langage a t cr en 1991 et a pour fonction de structurer et de donner du sens du contenu.

9

CSS signifie Cascading StyleSheets, soit feuilles de style en cascade . Il a t cr en 1996 et a pour rle de mettre en forme du contenu en lui appliquant ce quon appelle des styles. Sachez-le : beaucoup de dbutants, et mme des personnes exprimentes, confondons les fonctions respectives du HTML et du CSS et utilisent un langage pour faire le travail de lautre. En loccurrence, cest le HTML qui est souvent utilis mauvais escient, pour mettre en forme du contenu. Je vais vous le rpter et vous le rpter nouveau au fil de ce cours : cest une trs mauvaise pratique ! Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS. Mais encore une fois, ne vous inquitez pas, je vais vous le rpter encore et encore Retenez donc que le HTML est utilis pour baliser un contenu, cest dire pour le structurer et lui donner du sens. Le HTML sert, entre autres choses, indiquer aux navigateurs quel texte doit tre considr comme un paragraphe, quel texte doit tre considr comme un titre, que tel contenu est une image ou une vido. Le CSS, quant--lui, est utilis pour appliquer des styles un contenu, cest--dire le mettre en forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille dun texte, positionner tel contenu tel endroit de notre page web ou ajouter des bordures ou des ombres autour dun contenu. 1.3 Versions actuelles des langages HTML et CSS Les versions actuelles du HTML et du CSS sont HTML5 et CSS3. Il faut savoir que, contrairement aux ides reues, ce sont encore des versions non finalises. Cela signifie que ces versions sont toujours en dveloppement et quelles sont toujours en thorie sujettes changements et bugs.

10

En pratique, toutefois, on peut considrer ces versions comme totalement stables et cest donc sur celles-ci que nous allons travailler. En effet, la version 5 dHTML, tout comme la version 3 de CSS introduisent de nombreuses nouvelles fonctionnalits longtemps attendues par les dveloppeurs et il serait donc dommage de sen priver. Parmi celles-ci, linsertion simplifie de vidos et de contenus audio et de nouvelles balises amliorant la smantique (on va y revenir, pas dinquitude !) pour mieux structurer nos pages en HTML ou encore la possibilit de crer des bordures arrondies en CSS. 1.4 Un mot sur le XHTML Avant de poursuivre plus avant notre dcouverte du HTML et du CSS, je dois vous parler du XHTML. XHTML signifie eXtensible HTML. Cre en 2000, il devait lorigine succder au HTML. En effet, il faut savoir que le HTML base sa syntaxe sur le langage SGML (Standard Generalized Markup Language) tandis que le XHTML se fonde sur le XML (eXtensible Markup Language). Or, lpoque, le XML tait une vritable petite rvolution puisquil permettait de faire davantage de choses que le SGML et quil tait dit plus simple utiliser. Cependant, le HTML a continu se dvelopper en parallle au XHTML et le XHTML est dfinitivement abandonn en 2009 ou plus exactement a t en partie intgr dans ce qui allait devenir le HTML5.

11

Le XHTML reste aujourdhui encore utilis pour raliser certaines pages de code spcifique. Pour commencer, cependant, je vous recommande de vous concentrer sur le HTML5. 1.5 Lditeur de texte Fini la thorie, il est temps de se prparer pour pratiquer ! Et pour coder en HTML et en CSS, cest trs simple : nous navons besoin que dun diteur de texte. Il existe des centaines et des centaines dditeurs de texte et beaucoup se valent. Certains sont gratuits, dautres sont payants. Je ne vais pas vous imposer le choix dun diteur, mais simplement vous donner des recommandations. Tout dabord, je vous conseille de choisir un diteur de texte gratuit. Une raison cela : moins dtre un dveloppeur expert, vous naurez quasiment jamais besoin des options disponibles avec les diteurs payants. Deuxime conseil : essayez-en plusieurs avant de faire votre choix. En effet, comme je lai dit, les bons diteurs possdent quasiment tous les mmes fonctionnalits. La diffrence va donc se faire sur lergonomie et la prise en main. Voici les diteurs que je peux vous conseiller :

NotePad++, si vous tes sous Windows; Komodo, pour Mac ou Linux TextWrangler, pour Linux

Personnellement, jutilise Komodo que je trouve trs intuitif et trs bien fait mais, encore une fois, le meilleur choix est le vtre. Une fois votre diteur de texte choisi, je vous recommande vivement de changer la couleur de fond de celui-ci. En effet, les diteurs utilisent en gnral par dfaut le blanc comme couleur de fond pour

12

les fichiers. Or, ce blanc risque de trs rapidement devenir fatiguant pour vos yeux comme pour votre cerveau. Je vous conseille donc de mettre du gris ou du noir en couleur de fond la place. Pour faire cela, si vous avez un Mac comme moi, vous navez qu cliquer sur le nom de votre diteur en haut gauche de votre fentre, puis Prfrences et vous aurez accs toutes les options de personnalisation. Si vous tes sous Windows ou Linux, je ne peux malheureusement pas vous aider mais cela ne doit pas tre trs compliqu trouver je suppose. A noter que, pour vous entraner, vous pouvez galement utiliser lexcellent site JsBin.com qui vous permet dentrer du code en HTML, en CSS et / ou en JavaScript est davoir un aperu du rsultat visuel en temps rel. Bref, une fois votre diteur de texte choisi et install ou le site JsBin lanc, il est temps de passer la suite et de commencer notre initiation au HTML.

13

CHAPITRE 2 : LES FONDATIONS DU HTML 2.1 Elments, balises et attributs Il y a trois termes dont vous devez absolument comprendre le sens en HTML. Ce sont les termes lment, balise et attribut. Les lments, tout dabord, vont nous servir dfinir des objets dans notre page. Grce aux lments, nous allons pouvoir dfinir un paragraphe (lment p), des titres dimportances diverses (lments h1, h2, h3, h4, h5 et h6) ou un lien (lment a). Les lments sont constitus de balises. Dans la majorit des cas, un lment est constitu dune paire de balises : une balise ouvrante et une balise fermante.

Les balises reprennent le nom de llment et sont entoures de chevrons. La balise fermante possde en plus un slash qui prcde le nom de llment. Cependant, certains lments ne sont constitus que dune balise quon appelle alors balise orpheline. Cest par exemple le cas de llment br qui va nous servir crer un retour la ligne. Lcriture en HTML est alors la suivante : . Notez que, dans le cas des balises orphelines, le slash se situe aprs le nom de llment. Notez galement que ce slash nest pas obligatoire et que certains dveloppeurs lomettent volontairement.

14

Je vous conseille cependant, pour des raisons de propret de code et de comprhension, de mettre le slash dans un premier temps. Les attributs, enfin, vont venir complter les lments en leur donnant des indications ou des instructions supplmentaires. Par exemple, dans le cas dun lien, on va se servir dun attribut pour indiquer la cible du lien, cest dire vers quel site le lien doit mener. Notez que les attributs se placent toujours lintrieur de la balise ouvrante dun lment (ou de la balise orpheline le cas chant).

Dans lexemple ci-dessus, on discerne llment a compos : dune balise ouvrante elle-mme compose dun attribut href ; dune ancre textuelle ; dune balise fermante.

Lattribut href (initiales de Hypertexte Reference ) sert indiquer la cible de notre lien, en loccurrence le site Wikipdia. Lancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer pour se rendre sur Wikipdia et galement lunique partie visible pour eux. Voici ce que les visiteurs de votre site verront :

15

Si vous vous sentez un peu perdu pour le moment, ne vous inquitez pas, cest tout--fait normal ! Continuez le cours, vous allez voir : avec un peu de pratique, tout cela va trs vite se dcanter et vous aurez tout compris avant mme de vous en rendre compte ! 2.2 Structure de base dune page en HTML5 En programmation comme dans beaucoup dautres disciplines, vous laurez compris, il y a des rgles. Ainsi, toute page crite en HTML5 doit comporter une certaine structure, un squelette qui sera toujours le mme. Ce squelette est bien videmment constitu de divers lments. Tout dabord, toute page HTML5 doit commencer par la dclaration de ce quon appelle un doctype . Le doctype, comme son nom lindique, sert indiquer le type du document. Dans notre cas, le type de document est HTML. On crira donc :

Notez bien le point dexclamation, obligatoire, au dbut de cet lment un peu particulier.

16

Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois nouveaux lments : html, head ( en-tte ) et body ( corps de page ). Llment html va contenir toute la page. Llment head contiendra entre autres, le titre de la page, lencodage utilis et des meta-data (des donnes invisibles pour les utilisateurs mais essentielles nous en reparlerons plus tard). Llment body contiendra tout le contenu de notre page (paragraphes, images, tableaux, etc.). Voil o nous en sommes rendus pour le moment :

Mais ce nest pas fini ! Pour que la page soit valide, llment head doit lui mme contenir un lment title, qui correspond au titre de la page et le meta charset qui prendra comme valeur le type dencodage choisi. Pour les langues latines, nous choisirons gnralement la valeur utf-8 . Voici quoi vous devriez arriver en pratique :

17

Et voil, vous venez, sans vous en rendre compte, de crer votre premire page valide en HTML5 ! Retenez bien ce schma, il sera toujours le mme quelque soit la page HTML5 que vous crerez. 2.3 Afficher un document en HTML5 dans mon navigateur Si vous avez utilis JsBin.com dans lexercice prcdent, vous devriez avoir vu le rsultat (la page telle quelle serait apparue dans nimporte quel navigateur) instantanment sur la droite de votre cran. Cependant, si vous avez utilis votre diteur de texte, il se peut que vous soyez un peu perdu. Pas dinquitude, jarrive ! La premire chose faire, une fois un nouveau fichier ouvert dans votre diteur de texte, est den changer le type pour mettre votre document en html . Pour cela, deux solutions : soit vous trouvez longlet o vous pourrez dfinir le type de votre document, soit vous enregistrez-sous votre document en lui donnant un nom du type : document.html. Cela aura pour effet de changer le type de document en un document HTML. Ensuite, pour visualiser votre fichier dans un navigateur, vous avez nouveau deux choix. Soit votre diteur possde une option vous proposant de pr-visualiser votre document dans le navigateur de votre choix (cest le cas de Komodo), soit vous devrez enregistrer votre document (sur votre bureau, par exemple), puis double cliquer

18

dessus, tout simplement, afin que la page souvre dans votre navigateur par dfaut. Simple, non ? Allez-y, essayez ! Ah et, un conseil : pensez bien enregistrer dans votre diteur votre document chaque fois que vous souhaitez louvrir dans votre navigateur et rafrachir la page dans votre navigateur si votre document tait dj ouvert (ctrl+r ou cmd+r) sans quoi vous ne verrez aucun changement. Cela semble vident mais si vous saviez le nombre dheures que nous avons tous perdu en cherchant pourquoi telle ou telle chose ne fonctionnait pas Alors que nous avions simplement oubli denregistrer les changements effectus au pralable ou de rafraichir notre document ! 2.4 Bonnes pratiques, rgles et commentaires Je suis de ceux qui pensent quil nest jamais trop tt pour apprendre les bonnes manires, donc commenons immdiatement, cela vitera de mauvaises habitudes par la suite ! Tout dabord, vous lavez remarqu, le HTML permet dimbriquer des lments les uns lintrieur des autres. Cest mme lune des possibilits qui font toute sa force. Dans lexemple prcdent, par exemple, notre lment title tait lintrieur de notre lment head, lui mme contenu dans un lment html.

19

Toutefois, si le HTML permet dimbriquer des lments les uns dans les autres, vous devrez toujours faire bien attention de refermer les balises dans le bon ordre. Le bon ordre est : , cest dire que le dernier lment ouvert est toujours le premier referm. Vous ne devrez jamais crire . Normalement, si vous refermez bien chaque balise juste aprs lavoir ouverte, plutt que de dire cest bon, jy penserai plus tard , vous ne devriez jamais faire lerreur. Autre bonne pratique maintenant : lindentation. Indenter son code, cest tout simplement larer en ajoutant des espaces au dbut de certaines lignes afin de le rendre plus lisible pour vous comme pour les autres. Il ny a pas de rgle absolue concernant lindentation, certains accentuant plus ou moins le retrait en dbut de ligne. Pour ma part, jutilise une tabulation (la touche gauche du a) chaque fois que jouvre une nouvelle balise lintrieur dun lment. Cela permet de bien hirarchiser son code et de voir immdiatement quel lment est imbriqu dans quel autre. Par exemple, on voit bien dans lexemple ci-dessus que jai ajout de nouveaux espaces lorsque jai ouvert ma balise head et title, mais que je nen ai pas ajout pour le meta charset. Pourquoi ? Tout

20

simplement car la balise meta nest pas contenue dans llment title mais seulement dans llment head. Elle est donc au mme niveau de hirarchie que le title. Lindentation peut peut-tre vous paratre superflue pour le moment, mais je vous garantis que cest une pratique extrmement utile et quune bonne indentation est souvent ce qui fait la diffrence entre un codeur moyen et un bon codeur. Troisime et dernire bonne pratique dont je voulais vous parler : le fait de commenter son code. Commenter son code, cest tout simplement y ajouter des commentaires. Ces commentaires sont spciaux : il ne seront pas visibles par vos visiteurs ( moins que ceux-ci naffichent le code source de la page). Voici comment on crit un commentaire en HTML :

21

Pourquoi commenter son code ? Pour plusieurs raisons. Tout dabord, pour vous. En effet, lorsque vous commencerez vritablement savoir coder, vos pages vont sallonger et se complexifier. Commenter va alors devenir indispensable pour vous reprer dans votre page web et pour vous rappeler pourquoi vous avez fait telle chose de telle faon. Ensuite, pour les personnes qui vous pourriez distribuer votre code. Rappelez vous quil existe autant de manires de coder que desprits humains ou presque et quil est donc essentiel de donner des indications sur votre code afin que les personnes puissent le comprendre plus rapidement et plus facilement.

22

En bref : commenter nest pas un luxe mais souvent ce qui spare un dveloppeur moyen dun bon dveloppeur, tout simplement. Attention ne jamais mettre dinformations sensibles en commentaire, comme des mots de passe par exemple. En effet, rappelez vous que tout le monde peut avoir accs au code source de votre page, et donc votre code HTML. Pour vous en convaincre, nhsitez pas aller sur nimporte quel site (Wikipdia par exemple), puis faire un clic droit sur la page et choisir loption inspecter llment ou afficher le code source selon votre navigateur.

Vous aurez alors accs au code HTML de la page, quelque soit le site.

23

Notez que, selon votre navigateur, vous devrez au pralable activer les extensions pour dveloppeur afin de pouvoir inspecter des lments ou afficher le code source dune page. Pour cela, rendez-vous dans les options avances de votre navigateur !

24

2.5 Les lments Heading, Paragraph et Break Le HTML, je vous lai dit, sert diffrencier dun point de vue smantique les diffrents objets que lon peut rencontrer et dont on peut avoir besoin (titre, paragraphe, espace, image, etc.). Pour faire cela, le HTML va utiliser des lments. Et le moment est arriv pour nous dapprendre crer des paragraphes, des titres, et faire des retours la lignes en HTML. Pour crer des paragraphes, tout dabord, on va utiliser llment p. On peut crer autant de paragraphes que lon souhaite dans une page. Pour chaque nouveau paragraphe, il faut rouvrir une balise . A chaque nouveau paragraphe, un retour la ligne est automatiquement effectu.

25

Si maintenant vous dsirez crer un retour la ligne lintrieur mme dun paragraphe, il faudra utiliser llment br (diminutif de break). Cet lment est constitu dune seule balise orpheline, quon notera donc . Pour crer des titres, on va utiliser les lments h1, h2, h3, h4, h5 et h6. Pourquoi autant dlments diffrents ? Pour pouvoir crer des titres de diverses importances. Ainsi, un titre h1 sera considr comme un titre trs important tandis quun titre h6 sera considr comme trs peu important. En pratique, on nutilisera que trs rarement les titres de niveau h4, h5 et h6. Si vous vous interrogez encore sur lintrt davoir tous ces lments, pensez que cela est trs important pour le rfrencement entre autres. En effet : plus vous serez clair et mieux un moteur de recherche vous comprendra, mieux vous serez rfrenc. Voil ce que a donne en image :

26

Vous avez remarqu ? Oui, les titres apparaissent en gras et ont des tailles diffrentes selon leur degr dimportance. Et cest prcisment l o jen reviens mon premier point : vous ne devez JAMAIS utiliser le langage HTML pour mettre en forme le contenu. Ce que vous voyez nest quune mise en forme automatique fate par votre navigateur, une interprtation visuelle de ce que vous avez donn votre navigateur. Cependant, vous ne devez jamais utiliser un titre de niveau h1 pour mettre un texte en gros et en gras. JA-MAIS. Pour bien vous faire comprendre ce quil se passe, vous pouvez imaginer que votre navigateur est un lve et vous un professeur. Vous fates votre cours, et dun coup vous dtes vos lves attention, ce point l est trs important ( laide dune balise h1). Vos lves vont avoir tendance surligner cette partie du cours.

27

Cest exactement ce que fait votre navigateur. Cependant, en tant que professeur, vous nallez pas dire vos lves ce point l est important juste pour que vos lves surlignent une partie de votre cours, cela serait stupide. Vous leur direz prenez vos surligneurs et surlignez cela . Et cest ce que nous allons faire ave le CSS. Tout cela pour vous dire que la taille et le poids du texte rendu par votre navigateur nest que le rsultat dune interprtation et nest quune mise en forme automatique. Si vous avez compris cela, vous avez tout compris ! Et pas dinquitudes non plus si vous ne voulez pas avoir vos titres en gras, on soccupera de laspect visuel plus tard avec le CSS. Le CSS peut nous permettre de faire rellement tout ce que lon dsire dun point de vue visuel : crer des styles tout comme enlever des styles automatiques. 2.6 Les lments Strong, Emphasis et Mark Continuons apprendre parler en HTML et donc dans la dcouverte de nos lments avec trois nouveaux lments : les lments strong, em (diminutif de emphasis) et mark. Llment strong, tout dabord, est utilis pour indiquer aux moteurs de recherche quun contenu est particulirement important, afin que celui-ci soit trait avec plus dimportance. Le rsultat visuel est une mise en forme automatique en gras. Mais encore une fois, on nutilise pas llment strong pour mettre un texte en gras ! Llment em, pour emphasis ( emphase en franais) est proche de llment strong. Il sert lui aussi signifier quun contenu est important, mais moins important tout de mme quun contenu entre des balises strong. Encore une fois, si vous vous demandez lintrt de ces lments, il est avant tout dans loptimisation du rfrencement de votre site. En effet, normalement, vous devriez avoir cibl des mots clefs et essayer

28

dtre bien rfrenc sur ces mots l. Les balises strong et em vous aident atteindre ce but, entre autres. Enfin, llment mark est utilis pour faire ressortir du contenu. Ce contenu ne sera pas forcment considr comme important, mais cette balise peut servir dans le cas de laffichage de rsultats suite une recherche dun de vos visiteurs par exemple.

Voil donc pour les lments dits de base, il est maintenant tant de sattaquer des lments relativement plus complexes, et nous allons commencer avec les listes. 2.7 Listes ordonnes et non-ordonnes Les listes servent ordonner du contenu, lui donner un ordre cohrent. Visuellement, les listes en HTML correspondent ce que vous crez lorsque vous utilisez des puces dans un document Word ou PowerPoint par exemple, comme ceci :

29

Elment numro 1 Elment numro 2 Elment numro 3

En HTML, les listes vont avoir deux grands intrts pour nous : on va pouvoir les utiliser pour crer des menus ou, dans leur forme brute, pour mieux prsenter du contenu pour un blog par exemple. Il existe trois grands types de listes en HTML : les listes ordonnes, les listes non-ordonnes et un dernier type un peu particulier : les listes de dfinition. Nous allons commencer avec les listes ordonnes et non-ordonnes. La diffrence entre les listes ordonnes et non-ordonnes est que les listes ordonnes possdent un aspect de subordination, dordre logique, de classement tandis que ce nest pas le cas pour les listes non-ordonnes. Pour crer une liste non-ordonne, on va avoir besoin de deux nouveaux lments : llment ul (abrviation de unordered list), qui va contenir toute la liste et llment li (pour list item) que lon va utiliser pour crer chaque lment de la liste. Voyons immdiatement comment cela fonctionne en pratique :

30

Dans lexemple prcdent, les diffrents lments de la liste nont pas de cohrence entre eux et on ne peux donc pas les classer, les ordonner (sans contexte du moins). Cest pourquoi jai utilis une liste non-ordonne. Pour crer une liste ordonne maintenant, nous allons simplement remplacer llment ul par llment ol (pour ordered list).

31

Cette fois-ci, il y a une relation de subordination, un ordre logique et naturel entre les lments de la liste (on met gnralement lintroduction avant la conclusion) ; on utilise donc une liste ordonne. 2.8 Listes de dfinitions Dernier grand type de listes que nous allons voir ensemble, les listes de dfinition son utilises pour dfinir des termes. Pour crer une liste de dfinition, il va nous falloir utiliser llment dl (pour definition list), llment dt (pour definition term) et llment dd pour la dfinition en soi. Il ny a quune rgle respecter lorsque lon cre une liste de dfinitions : vous devez toujours placer llment dt avant llment

32

dd, cest--dire le terme dfinir avant sa dfinition. Cela est assez intuitif et ne devrait donc pas vous poser de problme. En revanche, il est tout fait possible dassocier plusieurs termes une dfinition ou mme plusieurs dfinitions un mme terme. Voici un exemple de liste de dfinitions :

2.9 Listes imbriques Ca commence devenir vraiment intressant ! En effet, le HTML nous offre la possibilit dimbriquer les listes les unes dans les autres trs simplement. Pour imbriquer des listes, il suffit de commencer une liste, puis den ouvrir une seconde lintrieur dun lment de la premire (on peut videmment imbriquer plus de deux listes en rptant le mme processus). Voici une illustration, en imbriquant par exemple une liste non-ordonne lintrieur dune liste ordonne :

33

Comme vous le voyez, si on noublie pas dlment, les listes restent trs simples utiliser et manipuler. Jespre que vous comprenez mieux dsormais limportance de bien indenter son code ! Cest tout pour les listes, nhsitez pas vous entraner afin dtre certain de bien maitriser tout ce que lon a vu jusquici car le prochain chapitre est capital : nous allons apprendre crer des liens.

34

2.10 Liens internes et liens externes Tout dabord, il faut savoir quil existe diffrents types de liens. Pour linstant, nous allons nous concentrer sur les eux types les plus classiques : les liens internes et les liens externes. Quelle diffrence entre ces deux types de liens ? Un lien interne est un lien cr entre deux pages dun mme site web tandis quun lien externe est un lien menant dun site web vers un autre site web. Dans tous les cas, pour crer un lien, nous allons utiliser llment a accompagn de son attribut href (pour Hypertext Reference) qui sert indiquer la cible (cest dire la destination) du lien. Quel que soit le type de liens crs, la seule chose qui va changer va tre ce que lon va indiquer en valeur pour lattribut href. Commenons donc avec les liens internes. Nous avons trois cas distinguer :

1er cas : La page partir de laquelle on fait un lien et celle vers laquelle on fait un lien se trouvent dans le mme dossier. Dans ce premier cas, il suffit de prciser le nom de la page dans lattribut href.

2me cas : La page vers laquelle on souhaite faire un lien se trouve dans un sous-dossier. Dans ce cas, il faudra en tenir compte et inclure le nom du sous-dossier dans la valeur de lattribut href.

3me cas : La page vers laquelle on veut faire un lien se trouve dans un dossier parent. Dans ce cas, nous devrons rajouter ../ dans la valeur de lattribut href.

Voil donc en images comment cela fonctionne :

35

Jai donc cr quatre pages en HTML (jai simplement crit la structure minimale pour chacune dentre elles afin de les rendre valide). Jai plac les pages page1.html et page2.html dans le mme dossier, la page page3.html dans un sous-dossier relativement ma page page1.html et la page page4.html dans un dossier parent par rapport ma page page1.html. Je vais donc maintenant crer des liens de ma page page1.html vers mes pages page2.html, page3.html et page4.html grce llment a et lattribut href :

36

Et voil, cest fini ! Si vous ouvrez votre page page1.html, celle-ci doit maintenant ressembler cela :

Lorsque vous ou vos visiteurs cliquerez sur page 2 , page 3 ou page 4 , vous serez redirigs vers la page en question. Pour crer des liens externes, maintenant, vous allez voir que cest beaucoup plus simple : il suffit dindiquer lURL complte de la page vers laquelle on veut faire un lien en valeur de lattribut href. En pratique, pour faire un lien vers la page daccueil de Wikipdia par exemple, on crira :

37

Et voil, cest tout pour les liens externes. Simple, non ? A noter quil existe pour les liens internes et externes des attributs facultatifs qui peuvent modifier le comportement par dfaut de ces liens. Cest par exemple le cas de lattribut target qui est selon moi indispensable connatre. Lattribut target va vous permettre de choisir si vous voulez que la cible de votre lien souvre dans une nouvelle fentre / nouvel onglet ou pas. Pour que la cible de votre lien souvre dans une nouvelle fentre ou un nouvel onglet, on attribuera la valeur _blank lattribut target. Un exemple immdiatement en image :

38

Attribut retenir donc, car celui-ci peut savrer trs utile dans de nombreux cas (lorsque vous ne voulez pas que vos visiteurs quittent votre site par exemple). Notez en revanche que vous ne pouvez pas choisir si le lien va souvrir dans un nouvel onglet ou dans une nouvelle fentre. 2.11 Les autres types courants de liens Les liens internes et externes sont trs certainement les types de liens les plus courants, mais cest loin dtre les seuls ! En effet, on peut utiliser les liens pour faire bien dautres choses. Dans ce nouveau chapitre, nous allons nous concentrer sur les liens de type ancre , les liens pour envoyer un mail et les liens pour tlcharger un fichier. Commenons avec les liens de type ancre. Les liens de type ancre sont des liens menant un autre endroit dune mme page web. Ils peuvent tre utile dans le cas dune page web trs longue pour donner vos visiteurs un accs rapide une section en particulier par exemple. Vous comprendrez quil va donc tout dabord nous falloir rajouter quelques lignes de textes dans notre page HTML pour pouvoir tester les ancres (sinon, on nen verra pas leffet). Attention, soyez attentif, a se complique un peu partir de l !

39

Pour crer une ancre, on commence par rajouter un attribut id une balise ouvrante HTML lendroit o lon veut envoyer le visiteur. On peut attribuer nimporte quelle valeur cet attribut, le mieux tant de choisir une valeur qui fasse sens. Ensuite, on cre le lien cliquable en soi qui va amener notre id. Pour cela, on utilise toujours notre lment a avec son attribut href (on ne rinvente pas la roue chaque fois), mais cette fois ci on va devoir placer un dise avant dcrire la valeur de lattribut href. La valeur inscrite pour lattribut href doit tre strictement la mme que celle donne notre id. Comme rien ne vaut un bon dessin, voici lillustration en image :

Faites attention bien choisir des valeurs diffrentes pour chaque id sinon votre lien ne saura pas o ramener !

40

Pour envoyez un mail, maintenant, on donne tout simplement une valeur de type mailto : notre attribut href comme ceci :

Enfin, voyons les liens permettant vos visiteurs de tlcharger un fichier. Pour cela, il va tout dabord falloir nous armer dun fichier (au format zip, pdf, xls ou autre) que lon va placer dans le mme dossier que la page web partir de laquelle on cre le lien. Ensuite, il ne reste plus qu crer un lien comme on en a lhabitude en utilisant un chemin relatif. Comme notre fichier et notre page web sont dans le mme dossier, nous navons donc que le nom du fichier renseigner en valeur de lattribut href. Par exemple, si mon fichier est un pdf qui sappelle fichier , on aura :

Notez que si vous cliquez sur le lien, rien ne devrait se passer (tout au moins, sur Mac, rien ne se passe) tout simplement car vous possdez

41

dj le fichier. Cependant, vos visiteurs pourront tout fait tlcharger votre fichier une fois votre page hberge sur serveur. Ca y est, on en a enfin fini (pour le moment tout au moins) avec les liens ! Nhsitez pas prendre une petite pause et revoir cette partie tte repose car cest vraiment trs important et, si vous comprenez la mcanique des liens, vous naurez aucun mal comprendre le reste. Pour les plus vaillants dentre vous, poursuivons ! 2.11 Validation et compatibilit entre navigateurs Je voulais terminer cette premire partie dintroduction au langage HTML sur une note de thorie et avec quelques mises en garde : il nest jamais trop tt pour apprendre les bonnes manires. Tout dabord, vous devez savoir quun mme code interprt par diffrents navigateurs peut produire diffrents rsultats. Autrement dit, il est possible que votre code saffiche diffremment selon le navigateur utilis par vos visiteurs. Pas de panique toutefois : cela est de moins en moins vrai aujourdhui avec les dernires versions des grands navigateurs qui sont toutes standardises. De plus, nous verrons comment contourner ce problme par la suite avec les reset CSS entre autres. Sachez cependant pour votre culture personnelle que ce qui est vrai aujourdhui tait loin de ltre il y a quelques annes tout juste et que ces problmes de compatibilit ont fait sarracher les cheveux plus dun codeur. Le problme viendra trs souvent des anciennes versions dInternet Explorer qui ne reconnat pas ou interprte diffremment certains lments en HTML ou proprits en CSS. Ceci est un vestige du temps o Microsoft tait tout puissant et tenter dimposer sa loi et ses propres proprits non standardises.

42

Prudence donc, mme aujourdhui ! Pensez tester votre code avec diffrents navigateurs et diffrentes versions de chaque navigateur lorsque vous avez un doute : cela ne cote pas grand chose et ne pas le faire peut savrer catastrophique ! Deuxime mise en garde ou plutt bonne pratique, toujours dans cette ide davoir un code propre et qui fonctionne bien : pensez systmatiquement vrifier sa validit. Pour cela, le W3C (World Wide Web Consortium lautorit en matire de codification des langages informatiques) met notre disposition diffrents outils, et notamment des validateurs HTML et CSS. Pour pouvez trouver ces validateurs ici :

Pour le validateur HTML : http://validator.w3.org Pour le validateur CSS : http://jigsaw.w3.org/css-validator

Tout est gratuit, nhsitez pas vous en servir ! Il est temps sur ces mots de clore notre introduction au HTML et de passer la suite : la dcouverte du CSS.

43

CHAPITRE 3 : LES FONDATIONS DU CSS Vous allez enfin pouvoir modifier lapparence de vos textes, rajouter des bordures ou changer la disposition des lments sur votre page. Mais avant tout, il nous faut commencer avec quelques lments de vocabulaire comme on lavait fait pour le HTML. 3.1 Slecteurs, proprits et valeurs Dans ce premier chapitre, nous allons voir ensemble ce que sont les slecteurs, les proprits et les valeurs en CSS. Pour rappel, le CSS sert modifier lapparence de nos pages web en appliquant des styles au contenu en HTML. Un slecteur, tout dabord, va servir dterminer quel(s) lment(s) HTML ou quel type dlments on souhaite appliquer un style particulier. Si lon souhaite appliquer un style particulier tous nos paragraphes, par exemple, on utilisera le slecteur p . Une proprit va nous servir modifier le style dun lment en ciblant un critre bien particulier comme la taille dun texte, sa police ou sa couleur par exemple. Une valeur, enfin, va venir complter une proprit et va en dterminer le comportement. Pour la proprit servant changer la couleur dun texte par exemple, la valeur va tre la nouvelle couleur appliquer. Voici ci-dessous une illustration concrte de ce que lon vient de dire :

44

Dans cet exemple, nous utilisons le slecteur simple p , ce qui signifie que nous souhaitons appliquer un style particulier tous les paragraphes de nos pages. Nous utilisons les proprits color (qui sert modifier la couleur dun texte) et font-size (pour changer la taille dun texte). Cela signifie donc que nous travaillerons sur la couleur et la taille de nos paragraphes. Enfin, nous indiquons que nous voulons que tous nos paragraphes saffichent en bleu grce la valeur blue et que notre texte ait une taille de 16px avec la valeur 16px . Notez dores-et-dj la syntaxe de notre premire dclaration en CSS. On entoure les proprits et les valeurs avec des accolades et on place un point virgule aprs avoir spcifi une valeur pour chacune de nos proprits. Chaque proprit est spare de sa valeur par un deux-points. Fates leffort de bien retenir cette criture, car nous allons sans cesse nous en resservir partir de maintenant. 3.2 O crire le CSS ? Nous avons trois possibilits pour crire notre CSS. Lune delles est prfrable aux deux autres et nous allons immdiatement voir pourquoi. Nous pouvons crire le CSS :

45

A lintrieur de llment head de notre document HTML ; Dans la balise ouvrante des lments de notre fichier HTML ; Dans un fichier portant lextension .css spar.

Pour des raisons de performances de votre code, de clart et dconomie de temps, je vous recommande vivement dutiliser la dernire mthode ds que cela est possible. Voyons ensemble comment cela se passe en pratique pour chacune de ces trois mthodes, puis je vous expliquerai pourquoi la dernire est la meilleure. Commenons avec la premire faon : crire son code CSS dans llment head de notre page HTML. Pour faire cela, il suffit dinsrer un lment style dans notre lment head et de placer nos dclarations CSS lintrieur de cet lment style comme ceci :

Deuxime mthode maintenant : crire du CSS dans la balise ouvrante dun lment HTML. Pour faire cela, nous allons devoir utiliser un attribut style et lui affecter en valeur nos proprits CSS :

46

Vous remarquerez que lon respecte la syntaxe du CSS lintrieur de lattribut style en utilisant les deux-points et les points virgules. Attention cependant : dans notre premier cas, on utilisait llment style tandis que dans le cas prsent, style est un attribut. Troisime et dernire mthode enfin (la mthode recommande) : crire le code CSS dans un fichier spar. Pour faire cela, nous allons dj devoir ouvrir un nouveau fichier dans notre diteur de texte et lenregistrer au format .css . Vous pouvez le nommer style.css . Pensez bien enregistrer ce fichier dans le mme dossier que votre fichier HTML dont vous souhaitez modifier le style, sinon vous risquez davoir des problmes (nous expliquerons plus tard dans ce cours pourquoi). Une fois que vous avez fait cela, retournez sur votre page HTML. Nous allons maintenant devoir lier nos deux fichiers HTML et CSS. On va faire cela laide dun lment link que nous allons placer dans llment head de cette manire :

47

Llment link est reprsent sous forme de balise orpheline et doit tre accompagn de ses deux attributs rel et href . Lattribut rel sert prciser le style du fichier li (dans notre cas cest une feuille de style, donc stylesheet en anglais). Lattribut href, que vous connaissez dj, sert faire le lien en soi. Si notre fichier avait t plac dans un dossier parent ou dans un sous-dossier par rapport notre fichier HTML, il aurait fallu reflter cela dans la valeur de notre attribut href (rappelez vous de la leon sur les liens relatifs !). Finalement, nous navons plus qu crire notre code CSS dans le fichier style.css :

Si vous dsirez voir le rsultat immdiatement et pouvoir travailler avec vos diffrents fichiers sur une mme page, je vous conseille une nouvelle dutiliser JsBin.com (ce que je ferai trs souvent dans la suite de ce cours). Ce site permet en effet dcrire du code en HTML, en CSS et en JavaScript et davoir un aperu du rsultat immdiatement comme ceci :

48

3.3 Les commentaires en CSS Enchanons avec les commentaires en CSS. On a dj vu que lon pouvait commenter en HTML. Cela est galement possible en CSS. Plus quune possibilit, cest mme une obligation selon moi. En effet, les fichiers CSS deviennent rapidement trs long (beaucoup plus que les fichiers HTML par exemple) donc si vous ne commentez pas efficacement vous risquez dtre trs vite perdu. De plus, si vous distribuez votre code, je pense que la personne sera contente davoir quelques lignes de commentaires pour laider trouver ce quelle cherche au milieu de 2000 lignes de code ! En CSS, on crit les commentaires de cette manire :

49

3.4 Slecteurs simples et limitations Retournons maintenant nos slecteurs. Jusqu prsent, nous navons manipul que des slecteurs que lon appelle simple , car ils correspondent des lments HTML seuls et sans attributs (par exemple le slecteur p). Ce type de slecteur doit tre prfr tant que possible pour des raisons doptimisation et de performance du code. En effet, ils requirent moins de code et sont donc moins gourmands en nergie que des slecteurs plus complexes. Votre page mettra ainsi moins de temps charger. Le problme reste quon est quand mme trs limit avec des slecteurs simples : comment faire pour appliquer un style diffrent deux lments de mme type, deux paragraphe par exemple ? Ce nest tout simplement pas possible. Et cest pour cela que lon a cr les attributs class et id. 3.5 Les attributs class et id Class et Id sont deux attributs HTML qui ont t crs pour pouvoir appliquer diffrents styles des lments de mme type. Class permet galement de faire linverse et dappliquer le mme style diffrents lments choisis. Voyons tout de suite comment ils fonctionnent. Premirement on se place dans la balise ouvrante dun lment HTML, on crit le nom de notre attribut (class ou id), et on lui donne une valeur cohrente. Cette valeur ne devrait contenir ni de caractres spciaux (accents et autres) ni despace. Par exemple :

50

Ensuite, on retourne sur notre fichier CSS. On va devoir commencer notre dclaration par un point l o on a utilis un attribut class et par un dise si lon a utilis lattribut id. Aprs le point ou le dise, on crit la valeur de lattribut en question pour former notre slecteur. Enfin, on crit le code CSS voulu. Voil ce que a donne en pratique :

Vous le voyez, nous pouvons maintenant appliquer un style diffrent chaque lment HTML grce aux attributs class et id. Pratique, non ?

51

Pourquoi avoir cr deux attributs pour faire la mme chose ? En fait, il existe une diffrence notable entre class et id : un attribut id avec une valeur prcise ne peut tre utilis quune fois dans une page, au contraire de class. Id sera donc utilis pour des lments uniques dans une page web, comme le logo de votre site par exemple. En revanche, on peut utiliser plusieurs attributs class identiques (cest dire ayant la mme valeur) par page. Cest dailleurs une des mthodes que nous utiliserons pour appliquer un mme style diffrents lments.

Notez que, dans lexemple prcdent, utiliser deux attributs class nest pas la meilleure solution (nous verrons mieux lorsque nous tudierons les slecteurs avancs). Jai crit cela seulement pour vous montrer que a fonctionne. Nous voil dj un peu moins limits. Cependant, nous ne pouvons pour le moment appliquer un style qu un contenu entre balises. Effectivement, on ne pourrait pas appliquer de style particulier au mot attributs de notre titre dans lexemple prcdent. Pour remdier cela, on a invent les deux lments HTML div et span, que nous allons tudier tout de suite.

52

3.6 Les lments div et span Pour commencer, vous devez bien comprendre que les lments div et span ne possdent aucune valeur smantique, ce qui va lencontre mme du rle du HTML. Ainsi, vous ne devez les utiliser que lorsque vous navez pas dautre choix. Les lments div et span vont nous servir de containers. Nous allons nous en servir pour entourer des blocs de code et ainsi pouvoir attribuer des styles particuliers ces blocs. Lutilisation des lments div et span est trs simple : il suffit dentourer le bloc de code voulu avec une paire de balises ouvrante et fermante div ou span comme cela :

Gnralement, on attribuera une class ou un id div et span afin de pouvoir diffrencier nos diffrents div et span dans notre page. Ainsi, on peut dsormais appliquer un style particulier nimporte quel bout de code dans notre page HTML.

53

Tout comme pour class et id, il existe une diffrence entre div et span : div est un lment de type block tandis que span est un lment de type inline. Block ? Inline ? Nous allons voir immdiatement ce que cela signifie. 3.7 Les lments de type block et inline En HTML, tout lment est soit de type block, soit de type inline. Par exemple, div est un lment de type block tandis que span est un lment de type inline. Les lments de type block sont fondamentalement diffrents des lments de type inline en HTML et il est essentiel de bien comprendre les diffrences entre ces deux types si vous voulez un jour crer un site Internet, ne serait-ce que pour des raisons de mise en page. Voyons immdiatement ces diffrences ensemble :

Les lments de type block Les lments de type inline Commencent sur une nouvelle ligne

Sinsrent dans une ligne

54

Occupent toute la largeur disponible

Occupent seulement la largeur ncessaire

Peuvent tre imbriqus les uns dans les autres et contenir des lments de type inline

Peuvent tre imbriqus les uns dans les autres mais ne peuvent pas contenir dlments de type block

Afin que vous compreniez bien la diffrence entre les deux types dlments, voyons ensemble quelques exemples dlments de type inline ou block pour que vous puissiez observer leur comportement.

Elments de type block Elments de type inline p em h1, h2, h3, h4, h5, h6 strong ol, ul,dl mark li a table img Illustrons ce que nous venons de dire en regardant par exemple de plus prs le comportement des lments p et em :

On voit bien dans lexemple ci-dessus les diffrences cites dans cette partie entre les lments de type block et inline. Jai mis des bordures autour des paragraphes afin que vous soyez bien convaincu quun lment de type block occupe toujours toute la largeur disponible.

55

3.8 Les slecteurs avancs Maintenant que nous avons fait un premier tour dhorizons des possibilits offertes par le CSS et que nous savons comment appliquer un style nimporte que bloc de code HTML, je peux vous parler des slecteurs avancs. Les slecteurs avancs sont lune des grandes forces du CSS. En effet, grce eux, nous allons pouvoir cibler du contenu trs prcisment et assez simplement. Il faut savoir quil existe de trs nombreux slecteurs avancs en CSS et que je ne vous prsenterai dans ce cours que les plus utiles selon moi et les plus utiliss. Nhsitez pas vous renseigner davantage si cela vous intresse !

Ce slecteur sert Et il scrit comme cela Slectionner tous les lments (slecteur universel)

*

Slectionner deux lments A et B A, B Slectionner un lment B contenu dans un lment A

A B

Slectionner le premier lment B suivant un lment A

A + B

Slectionner tous les lments A possdant un attribut particulier

A[nom de lattribut]

Slectionner tous les lments A possdant un attribut particulier avec une valeur

A[nom de lattribut* = valeur ]

Slectionner tous les lments A possdant un attribut particulier avec une valeur prcise

A[nom de lattribut = valeur ]

Nhsitez pas faire quelques tests par vous mme et vous entraner un peu pour bien matriser ces quelques slecteurs avancs, cela pourra vous tre trs utile par la suite.

56

3.9 La notion dhritage en CSS Lhritage est une notion centrale et fondamentale du CSS. Lhritage signifie que tout lment HTML va hriter des styles de ses parents (cest le fameux cascading ). En HTML, si un lment A est inclus dans un lment B ; llment A sappellera lenfant et llment B sera le parent de llment A. Ainsi, si lon applique un style llment B, llment A en hritera automatiquement. Voici un exemple de ce que javance ci-dessous :

Ici, llment body est le parent des lments h1 et p, puisque les lments h1 et p sont bien contenus dans llment body. Ainsi, lorsquon applique un style llment body (ici, mettre le texte en rouge), les lments p et h1 hritent automatiquement de ce style. Cela laisse une question en suspens : que se passe-t-il lorsque lon donne deux ordres contradictoires un lment parent et son enfant en CSS (par exemple, donner une couleur rouge au parent et bleue lenfant) ? Le CSS possde ici sa logique et le style appliqu sera celui le plus proche de llment en question. Cela signifie que si on applique un style un lment enfant, cest bien ce style qui lui sera appliqu.

57

Cette notion dhritage est assez simple comprendre mais est trs puissante et est la base du CSS, retenez la donc bien !

58

PARTIE II

FORMATER DU TEXTE ET POSITIONNER DES ELEMENTS

GRACE AU CSS

59

CHAPITRE 4 : LES PROPRIETES CSS DE TYPE FONT- Nous allons, dans les prochains chapitres, tudier de nouvelles proprits CSS et notamment les proprits nous permettant de changer laspect de nos textes ou de crer le design gnral de nos pages web. Nous allons immdiatement commencer avec les proprits de type font- (qui signifie police dcriture en franais). 4.1 La proprit font-size Nous utiliserons la proprit font-size lorsque nous voudrons modifier la taille dun texte. Cette proprit accepte deux types de valeurs : des valeurs de type absolu (en pixel ou en point), ou relatif (en em, ex ou en pourcentage). Les valeurs de type relatives sont appeles de la sorte car elles permettent au texte de sadapter relativement aux prfrences de vos visiteurs. En clair, si vous fixez la taille dun texte 100%, ce texte pourra avoir des tailles diffrentes selon les rglages faits par vos visiteurs sur leurs navigateurs. Ce type de valeur prsente des avantages indniables, et notamment le fait que tous vos visiteurs devraient tre capables de lire vos crits sans difficult. De plus, le texte peut galement sadapter relativement aux autres lments de votre page web. Une valeur de type absolu, en revanche, va fixer la taille dun texte dfinitivement. Le grand avantage de ce type de valeur est que vous pouvez contrler prcisment donc le rendu de votre texte et de votre page web.

60

Voici un exemple dutilisation de la proprit font-size, avec des valeurs relative et absolue. Notez quon utilisera les notations px pour pixel, pt pour point et % pour pourcentage.

4.2 La proprit font-style La proprit font-style permet de fixer linclinaison dun texte. La proprit font-style accepte 4 valeurs diffrentes :

Normal (valeur par dfaut) ; Italic (change le texte en italique) ; Oblique (penche le texte) ; Inherit (hrite des proprits de llment parent).

Nous avons dit plus haut que tout lment enfant hritait par dfaut des styles de ses parents. A quoi sert donc la valeur inherit ? En fait, cette dernire sert annuler un style dans un cas bien particulier. Imaginez par exemple que nous ayons dfini un font-style : italic pour tous les paragraphes de notre page et un font-style : normal un div en particulier. Par dfinition, les paragraphes lintrieur de ce div seront en italique puisque la notion dhritage nous dit dappliquer la rgle la plus

61

proche de llment en question (et pour un lment de type p, on applique donc les rgles portant sur p en premier). Si lon souhaite que les paragraphes hritent du mme style que notre div, lutilisation de la valeur inherit est alors une excellente solution.

Certains dentre vous vont certainement me dire trs bien, mais il tait aussi rapide dans ce cas dindiquer un font-style = normal notre attribut class normal . Cest tout fait vrai. Cependant, imaginez maintenant que vous connaissiez le PhP ou le JavaScript et que vous laissiez la possibilit vos visiteurs de choisir le font-style du div, mais que vous voulez absolument que les paragraphes lintrieur de ce div aient le mme font-style que leur parent. Pour faire cela, le plus simple est dutiliser inherit. Cela doit vous sembler peut-tre un peu tir par les cheveux pour le moment, mais il arrive plus souvent que vous le pensez quon doive faire des choses comme a lorsque lon cre un site ! Concernant les valeurs italic et oblique, vous pourrez constater par vous mmes quelles rendent un rsultat visuellement quasi-identique.

62

Sans vouloir rentrer dans une discussion de puriste, sachez juste que litalique est un tat spcial dune police, et qui nest pas support par toutes les polices tandis que loblique correspond une inclinaison force de la version normale dune police, et peut donc tre appliqu toutes les polices. 4.3 La proprit font-weight La proprit font-weight permet de fixer le poids dun texte. Cette proprit accepte 6 valeurs diffrentes :

Normal (la valeur par dfaut) ; Lighter (version allge de la police) ; Bold (la police est en gras) ; Bolder (la police est encore plus en gras) ; Une centaine compris entre 100 et 900 (du plus lger au plus

gras) ; Inherit (hrite des styles de ses parents).

Voyons immdiatement comment cette proprit sutilise avec un exemple :

A noter que certaines polices et certains navigateurs ne supportent pas les valeurs infrieures normal et suprieures bold . Si votre valeur nest pas supporte, la police saffichera dans la valeur la plus proche supporte (pour bolder, votre police saffichera en bold par exemple).

63

Je vous conseille vivement de nutiliser que des valeurs numriques qui permettent un meilleur talonnage et sont plus souples selon moi. Notez que 400 correspond normal et 700 bold. 4.4 La proprit line-height Comme vous aurez pu le remarquer, cette proprit nest pas une proprit de type font- proprement parler mais concerne galement la mise en forme du texte, donc elle a tout fait sa place dans cette partie. La proprit line-height sert fixer lcartement, cest--dire la distance entre deux lignes de texte. Une pratique communment admise est dindiquer une valeur pour notre line-height quivalent 1,5 fois la taille en pixel de notre texte.

4.5 La proprit font-family La proprit font-family va nous permettre de choisir la police de notre texte. Dans tous les cas, nous dclarerons plusieurs polices (on parle de famille de polices, do le nom de cette proprit) afin de sassurer quau moins une des polices mentionnes soit supporte par vos visiteurs.

64

En effet, il existe toujours des versions de navigateurs et des ordinateurs ne supportant pas certaines polices, do tout lintrt den dclarer plusieurs. La premire police dclare sera le choix par dfaut. Si elle nest pas lue par votre visiteur, alors on utilisera la seconde et etc. Voyons tout de suite comment cette proprit sutilise avec un exemple :

4.6 Les web safe fonts Cela mamne donc tout naturellement parler de ce quon appelle les Web Safe Fonts. Les Web Safe Fonts correspondent un ensemble de polices, un pack qui est prinstall sur toutes les machines permettant daller sur Internet. Ce sont donc des polices lues par tout le monde, do le mot safe qui veut dire en franais sr , hors de danger . En gnral, on mentionnera au moins une police Web Safe comme dernire valeur de la proprit font-family. Parmi les Web Safe Fonts, nous avons les polices Arial, Times New Roman, Courier New, Verdana, Georgia, Lucida, Tahoma, Trebuchet et Garamond entre autres.

65

4.7 La proprit color Nous allons finalement apprendre changer la couleur dun texte en CSS avec la proprit color. Nous ne voyons vritablement cette proprit que maintenant car vous allez voir quil existe plusieurs faons de grer la couleur dun texte, et certaines dentre elles ne sont pas videntes priori. Premire faon de changer la couleur dun texte, la plus simple mais galement de loin la plus limite : en attribuant un nom de couleur (en anglais) en valeur de la proprit color.

Cette mthode reste trs limite car nous ne pouvons choisir que parmi seize noms de couleurs qui sont les suivants :

66

Les valeurs que vous voyez sous le nom des couleurs sont des valeurs quon appelle hexadcimales. Ce type de valeur va correspondre notre deuxime mthode pour fixer la couleur dun texte. Hexadcimal signifie qui fonctionne en base 16 . Pour le dire simplement, un systme hexadcimal est un systme qui utilise 16 symboles pour compter, savoir dans notre cas les nombres de 0 9 et les lettres de A F. La lettre A correspondra ainsi 10, B 11, C 12, D 13, E 14 et F 15. Cela nous fait donc bien 16 symboles en comptant le zro. Ce systme de comptage peut paratre complexe et assez trange pour ceux qui nont pas fait dtudes de mathmatiques, je veux bien le comprendre. Cependant, je vous demande de ne pas en avoir peur et de le voir tel quil est : un systme pour compter de 0 15 en soi trs simple. Mais quel rapport avec nos couleurs donc ? En fait, on va pouvoir donner une valeur hexadcimale en valeur de la proprit color, afin de choisir trs prcisment la couleur voulue. Cette valeur devra commencer par un dise, suivie de 6 symboles choisis entre 0 et F.

67

Les deux premiers symboles vont dfinir lintensit de rouge de notre couleur, les deux suivants lintensit de vert et les deux derniers lintensit de bleu. Vous pouvez imaginer que cela se passe comme lorsque vous mlangez de la peinture afin dobtenir une couleur prcise. Lintrt de ce type de valeur est de pouvoir choisir parmi plus de 16 millions de nuances diffrentes. Si vous avez bien suivi, lchelle dintensit va de 0 255 pour chaque binme de valeurs, 00 tant lintensit la plus faible et FF lintensit la plus forte. Pourquoi de 0 255 ? Cest en fait trs simple ! Considrez que 00 correspond 0 sur notre chelle dintensit. 01 correspond 1, 02 2, 0A 10 et 0F 15. Aprs 0F, on a 10 (lisez un, zro pour comprendre plus clairement) qui correspond 16 ; 11 qui correspond 17 ; 1A qui correspond 26 et etc. jusqu FF qui correspond 255. Cela fonctionne finalement comme pour nos dizaines, part quici on compte en seizaines. Nhsitez pas vous entraner en faisant diffrents essais pour voir comment se comporte la proprit color avec ce type de valeur et tre bien certain de matriser tout cela !

68

Le plus important est encore une fois de retenir que les deux premiers symboles correspondent lintensit de rouge, les deux suivants lintensit de vert et les deux derniers lintensit de bleu. Enfin, le dernier type de valeurs que lon peut utiliser est le type RGB (pour Red Green Blue). Nous allons voir que ce type de valeurs et les valeurs hexadcimales reposent sur la mme base. Cette fois-ci, nous allons devoir indiquer trois nombres compris entre 0 t 255 en valeur. Le premier nombre correspond une nouvelle fois lintensit de rouge, le second lintensit de vert et le troisime lintensit de bleu que lon veut utiliser pour former notre couleur finale.

Vous le voyez, il existe de nombreuses similitudes entre les notations en hexadcimal et en RGB. On peut dailleurs tout fait convertir lhexadcimal en RGB, en partant du principe que 00 en hexa correspond 000 en RGB et que FF en hexa correspond 255 en RGB. Je vous conseille de vraiment vous entrainer avec chaque type de valeurs afin de toutes bien les matriser car, selon les situations, vous utiliserez plutt un type ou un autre dans le futur.

69

4.8 Lopacit dun texte Le CSS nous offre deux mthodes pour fixer le niveau dopacit de nos textes. Si nous avons utilis une valeur de type nom de couleur ou hexadcimale avec la proprit color, nous devrons utiliser la proprit opacity pour fixer lopacit de nos textes. Cette proprit prend une valeur entre 0 (totalement transparent) et 1 (totalement opaque). Attention : noubliez pas quon utilise des points et non pas des virgules pour les nombres virgule tant donn quon utilise le systme dcriture anglo-saxon lorsque lon code. Si nous avons utilis une valeur de type RGB avec la proprit color, nous pouvons galement matriser lopacit de notre texte dune faon plus simple, en utilisant une valeur de type RGBa. Dans ce cas, il suffit de rajouter une valeur pour lopacit de notre texte aprs les trois valeurs de notre proprit RGB. En pratique, la proprit sutilise donc de cette manire :

70

CHAPITRE 5 : LES PROPRIETES CSS DE TYPE TEXT- Les proprits de type text- servent galement fixer lapparence de nos textes. Elles viennent donc complter les proprits de type font- vues au chapitre prcdent. 5.1 Grer lalignement dun texte Pour modifier lalignement dun texte, nous allons utiliser la proprit text-align. Cette proprit peut prendre cinq valeurs diffrentes :

Left : le texte sera align sur la gauche ; valeur par dfaut ; Center : le texte sera centr ; Right : le texte sera align sur la droite ; Justify : le texte sera justifi ; Inherit : hrite des proprits de llment parent.

Il est bon de noter que le centrage ou lalignement se fait toujours par rapport llment parent le plus proche du texte. Dans lexemple suivant, on voit bien que mon paragraphe pdiv est align droite de son lment parent (cest--dire le div qui fait lui-mme 100px de large) et non pas de la page. Le second paragraphe, nayant pour parent que llment body, est donc bien lui centr sur la page.

71

5.2 La proprit text-decoration On va pouvoir modifier la dcoration dun texte grce la proprit text-decoration. On peut choisir parmi six valeurs pour cette proprit :

Underline : le texte sera soulign ; Overline : une ligne apparatra au dessus du texte ; Line-through : le texte sera barr ; Blink : le texte clignotera (attention, ne fonctionne pas sur tous

les navigateurs) ; Inherit ; None : pas de dcoration, comportement par dfaut.

Voyons quelques exemples dutilisation de cette proprit ensemble :

72

5.3 La proprit text-indent La proprit text-indent sert grer lindentation dun texte. Lindentation, pour ceux qui lauraient oubli, est le dcalage dun texte sur la droite gnralement. Cette proprit accepte des valeurs de type absolu (px, pt) et relatif (em, ex, %). Vous pouvez galement lui attribuer des valeurs ngatives afin de dcaler votre texte sur la gauche.

5.4 La proprit text-transform

73

On utilisera la proprit text-transform pour modifier laspect des caractres dun texte (majuscules ou minuscules). Nous pouvons choisir parmi cinq valeurs :

Uppercase : transforme tout le texte en majuscules ; Lowercase : met tout le texte en minuscules ; Capitalize : met uniquement la premire lettre de chaque mot

en majuscule ; None : pas de transformation ; Inherit : hrite des styles de llment parent.

Exemple :

5.5 Les proprits letter-spacing et word-spacing Les proprits letter-spacing et word-spacing permettent respectivement dajuster lespace entre les lettres et entre les mots. Ces proprits se comportent de manire similaire et acceptent des valeurs absolues (px, pt) et relatives (ex, em, %). Exemple :

74

5.6 Les ombres des textes On peut ajouter des effets dombre un texte en utilisant la proprit text-shadow. Cette proprit ncessite au minimum deux valeurs pour fonctionner. Cependant, dans la grande majorit des cas, nous en utiliserons quatre, dans lordre vu ci-dessous. Les trois premires valeurs correspondent des longueurs et la dernire est la couleur de lombre :

1re valeur : dplacement horizontal de lombre ; 2me valeur : dplacement vertical de lombre ; 3me valeur : rayon de propagation (flou gaussien) de lombre ; 4me valeur : couleur de lombre (accepte les mmes valeurs que

la proprit color ). Voyons ensemble comment cette proprit fonctionne :

75

76

CHAPITRE 6 : LE MODELE DES BOITES Le modle des botes est un concept essentiel que vous devez absolument comprendre pour ensuite mettre en page et positionner les diffrents lments de votre page web. Le modle des botes nous dit que tout lment dune page est une bote rectangulaire et peut avoir un padding, une marge et des bordures . Ca mrite dtre rpt : tout lment, quil soit un lment de type block ou de type inline, est une bote rectangulaire. Les proprits permettant dindiquer la longueur, la largeur, la marge, le padding et les bordures dun lment forment ce quon appelle le modle des botes. Le modle des botes illustr :

La premire bote est dfinie par la longueur et la largeur dun lment. La padding, ou marge intrieure, forme ensuite la seconde

77

bote. Puis viennent les bordures qui constituent la troisime bote. Enfin, la marge extrieure vient former la quatrime et dernire bote. 6.1 Hauteur et largeur dun lment Tout lment possde une hauteur et une largeur par dfaut. La hauteur dun lment est dtermine par son contenu. Par exemple, des paragraphes dune ligne ou de deux lignes noccuperont pas la mme hauteur. La largeur par dfaut dun lment est avant tout dtermine par son type (block ou inline) puis par son contenu si llment est de type inline. En effet, rappelez vous que les lments de type block occupent automatiquement toute la largeur disponible. Pour modifier la hauteur dun lment, on utilise la proprit height laquelle on attribue une valeur en px, % ou gale auto dans la grande majorit des cas. En utilisant la valeur auto, on laisse le navigateur de nos visiteurs dcider de la hauteur que doit prendre llment vis. Cela est trs utile dans le cas o lon veut conserver les proportions dune image tout en ladaptant la taille de lcran de nos visiteurs. Pour modifier la largeur dun lment, on utilise cette fois la proprit width. Cette proprit prend les mmes types de valeurs que height. Illustrons tout cela par un exemple. Jai ajout des bordures afin que vous puissiez bien voir la taille de chaque lment. Ne vous souciez pas de la proprit border pour le moment.

78

6.2 Les bordures et les bordures arrondies Tout dabord, vous devez savoir quil existe de nombreuses sortes de bordures dont certaines sont plus ou moins bien supportes par certains navigateurs. Pour crer des bordures et les personnaliser, nous allons avoir besoin de trois proprits :

Border-width, qui va dfinir lpaisseur de la bordure (valeur en px) ;

Border-style, qui va dfinir le style de la bordure ; Border-color, qui va dfinir la couleur de la bordure (accepte les

mmes valeurs que la proprit color ). La proprit border-style peut prendre de nombreuses valeurs diffrentes. Les valeurs les plus utilises sont solid, dotted (pointill) et dashed (tiret). Vous pouvez voir ci-dessous le rsultat pour chaque style de bordure :

79

Et voici un exemple dutilisation des proprits de type border :

Une fonctionnalit longtemps attendue par les webmasters et les dveloppeurs et qui a vu le jour avec le CSS3 est la possibilit de crer des bordures arrondies. Pour faire cela, nous allons utiliser la proprit border-radius. Cette proprit va prendre une valeur : la taille de langle, en px. Notez que lon peut dfinir des angles diffrents pour chaque ct de nos bordures en utilisant les mots clefs top-left, top-right, bottom-left et bottom-right.

80

Notez galement que ces mots clefs sont souvent employs en CSS, ensemble ou sparment (que top, ou que left par exemple). Nhsitez donc pas les tester avec certaines proprits dj vues ou que lon va voir ! 6.3 Les marges intrieures Pour dfinir les marges intrieures dun lment, nous utiliserons la proprit padding. On peut considrer quun lment HTML possde toujours une bordure. Celle-ci peut tre explicite, cest--dire matrialise laide des proprits CSS vues prcdemment ou implicite (invisible). La proprit padding va dfinir lespace entre llment en soi et sa bordure. Cette proprit doit tre utilise uniquement dans ce but, et jamais pour positionner des lments dans une page ou les uns par rapport aux autres. On donnera gnralement une valeur en px padding. Notez que lon peut dfinir des espacements diffrents pour chaque marge intrieure de nos lments en utilisant les proprits padding-right, padding-bottom, padding-left et padding-top.

81

Illustrons immdiatement ce que nous venons de dire :

6.4 Les marges extrieures Pour dfinir la taille des marges extrieures, cest--dire de lespace lextrieur des bordures dun lment, nous allons utiliser la proprit margin. Contrairement la proprit padding, la proprit margin peut tout--fait tre utilise pour positionner des lments dans une page ou les uns par rapport aux autres. Nous attribuerons gnralement des valeurs en px ou en % cette proprit. Tout comme la proprit padding, nous allons pouvoir des marges diffrentes de chaque ct de nos lments avec les proprits margin-right, margin-bottom, margin-left et margin-top. Notez que les valeurs par dfaut des marges intrieures et extrieures peuvent lgrement diffrer dun navigateur un autre. Cela peut impacter le design gnral de votre site pour certains de vos visiteurs.

82

Afin de sassurer que chaque visiteur verra un rsultat conforme nos attentes, nous pouvons utiliser un reset CSS pour notre padding et notre margin. Dans ce cas l, cest trs simple, il suffit par exemple dappliquer un padding et une margin avec des valeurs gales zro notre lment body. Ensuite, on prcisera les diffrentes marges souhaites nos lments enfants. En pratique, voici comment a se passe :

6.5 Les ombres des botes On peut crer des ombres autour des botes, tout comme on lavait fait pour nos textes prcdemment.

83

Nous allons cette fois-ci utiliser la proprit box-shadow. Cette dernire fonctionne exactement comme text-shadow, avec deux valeurs obligatoires et quatre recommandes pour marcher :

1re valeur : dplacement horizontal de lombre ; 2me valeur : dplacement vertical de lombre ; 3me valeur : rayon de propagation (flou gaussien) de lombre ; 4me valeur : couleur de lombre (accepte les mmes valeurs que

la proprit color ). Notez que dans le cas des ombres des botes, il peut tre intressant de rajouter la fin une dernire valeur, linset, si lon souhaite crer une ombre intrieure.

6.6 Faire flotter un lment

84

Pour aligner des lments les uns par rapport aux autres, on peut les faire flotter . Pour faire flotter un lment, nous utiliserons la proprit float avec les valeurs suivantes : left, right, none ou inherit. Un lment flottant va sortir du schma naturel (du flow ) dune page web pour venir se placer contre le bord gauche ou droit de llment qui le contient ou contre le bord de la page. Lorsque lon fait flotter un lment, les lments aprs llment flottant vont venir se positionner ct de celui-ci.

Dans lexemple ci-dessus, on remarque que llment strong, contenu dans llment p2, va venir se placer dans le coin droite de son lment parent (llment p2 donc). Llment p1 va lui se placer gauche dans la page tandis que llment p2 va se placer droite ; ct de llment p1. Gnralement, on utilisera plutt la proprit float sur des lments de type inline comme des images par exemple. En effet, cette

85

proprit peut tre la cause de problme daffichages lorsquelle est mal utilise sur des lments de type block. Si lon veut quun lment suivant un lment flottant vienne se placer sous cet lment flottant, il faudra utiliser la proprit clear. Celle-ci accepte trois valeurs : left, right ou both :

left : un lment va se placer en dessous aprs un float left ; right : un lment va se placer en dessous aprs un float right ; both : un lment va se placer en dessous aprs un float left ou

un float right. Voici ce que a donne en pratique :

6.7 La proprit display La proprit display est une proprit extrmement puissante : elle permet de changer le type dun lment de block inline ou dinline block.

86

Cette proprit supporte quatre valeurs diffrentes qui correspondent aux diffrents types dlments possibles : inline, block, inline-block et none. La nouveaut ici est le type inline-block. Ce nouveau type ne peut tre donn un lment que grce la proprit display. Il va tre un mix des types inline et block. Un lment de type inline-block se comporte de cette faon : llment en soi (contenu et botes) se comporte comme un type block tandis que le contenu seulement se comporte comme un type inline. Pour le dire plus simplement, un lment de type inline-block se comportera comme un lment de type inline except que lon va pouvoir contrler prcisment sa hauteur et sa largeur.

6.8 La proprit position La proprit position est une autre proprit trs puissante nous permettant de dfinir lemplacement dlments HTML dans une page. Cette proprit peut prendre cinq valeurs :

87

Static : valeur par dfaut, ne change pas la position de base dun

lment ; Absolute : permet de positionner un lment nimporte o dans

la page, par rapport son lment parent direct ; Fixed : permet de positionner un lment nimporte o dans la

page. De plus, llment reste visible si vous descendez ou remontez le long dune page ;

Relative : permet de replacer un lment relativement par rapport son positionnement par dfaut ;

Inherit : llment hrite des proprits de son parent. Pour ensuite jouer sur la position de nos lments, nous utiliserons les mots clefs right, bottom, left et top.

Dans cet exemple, notre paragraphe p1 a un positionnement fixed et a t dcal de 80px sur la gauche par rapport au bord de la page.

88

Le paragraphe p2 possde lui une position relative. Il a t dcal de 50px par rapport son positionnement de base (par dfaut, il aurait t plac au dessus de notre p1 cause de son positionnement fixed). Llment strong possde un positionnement absolute. Sans notre left :150px, il aurait t coll sur le bord gauche de son lment parent, llment p2. Notez quun positionnement absolute sur un lment annule la proprit float si on lui en a appliqu une. 6.9 Le z-index Parfois, lorsque lon cre le design de nos pages web, il arrive que deux lments se chevauchent selon certaines circonstances. Il peut alors tre utile de savoir comment indiquer quel lment doit apparatre au dessus de quel autre en cas de chevauchement. Pour cela, nous utiliserons la proprit z-index. Celle-ci fonctionne avec tous les lments positionns et permet dindiquer quel lment doit tre au dessus de quel autre en cas de conflit. Un lment positionn est un lment auquel on a appliqu la proprit position avec une valeur soit absolute, soit relative, soit fixed. Le z-index ne fonctionnera donc pas sur des lments positionns en static (qui est la valeur par dfaut). Un lment avec un z-index possdant une valeur plus leve quun autre sera au dessus de cet autre lment. Cette proprit va donc sutiliser de cette manire :

89

Dans lexemple prcdent, par dfaut, llment p2 devrait tre par dessus llment p1. Or, en appliquant un z-index avec une valeur plus leve p1, on arrive refaire passer p1 par dessus p2 (on peut le voir au niveau des bordures). 6.10 Notations long-hand et short-hand Vous lavez peut-tre remarqu dans les exemples prcdents, il mest parfois arriv dcrire les trois proprits relatives aux bordures sous la forme condense dune seule proprit border. La premire criture, avec les trois proprits de type border, est ce que lon appelle une notation long-hand, tandis que la forme condense est une notation short-hand. Jusqu prsent, je ne vous ai fait crire que des proprits sous leur forme long-hand afin que vous compreniez bien les bases et la logique du CSS et afin de ne pas compliquer inutilement les choses.

90

Dornavant, vous avez tout fait le niveau pour utiliser des notations short-hand et je vous encourage les utiliser ds que possible (celles-ci sont plus rapides crire et donc moins gourmandes en code et en temps dexcution). Voici ci-dessous une liste de quelques proprits acceptant une criture short-hand. Encore une fois, crire une proprit sous sa forme long-hand ou short-hand produira exactement le mme rsultat.

Long Hand Short Hand [font-style] [font-weight] [font-size]/[line-height] [font-family]

font

[border-width] [border-style] [border-color] border [margin-top] [margin-right] [margin-bottom] [margin-left]

margin

[background-color] [background-image] [background-repeat] [background-attachment] [background-position]

background

91

PARTIE III

FONCTIONNALITES

AVANCEES

92

CHAPITRE 7 : GESTION DU BACKGROUND (LE FOND) 7.1 Ajouter de la couleur ou une image pour le fond Commenons par voir comment on peut ajouter une couleur au fond. Pour ajouter une couleur de fond, nous allons utiliser la proprit background-color. Cette proprit accepte les mmes valeurs que la proprit color que nous avons vu prcdemment, savoir des valeurs de type nom de couleur, hexadcimale ou RGB.

On peut galement ajouter une image de fond. Pour ce faire, on va cette fois utiliser la proprit background-image. On lui donne en valeur lurl de limage qui, en loccurrence, prend la forme dun chemin relatif comme nous avions vu pour les liens. Voyons immdiatement comment cette proprit fonctionne ! Tout dabord, il va nous falloir une page HTML et une page CSS que nous allons lier entre elles et enregistrer dans le mme dossier pour plus de simplicit.

93

Ensuite, il va nous falloir une image. On lenregistre galement dans le mme dossier.

Retour finalement sur notre page CSS et utilisons maintenant la proprit background-image sur notre lment body (on peut utiliser cette proprit sur nimporte quel lment mais en gnral ce sera sur llment body).

94

Comme vous pouvez le constater, par dfaut, limage est rpte horizontalement et verticalement pour occuper tout lespace de notre page web puisque nous lavons insre dans notre lment body. Si votre image occupe dorigine plus de place que llment dans laquelle vous linsrez, elle ne sera donc pas rpte mais au contraire rogne. Cest ce quil se passe dans lexemple suivant o nous avons insre notre image en fond de notre lment p auquel nous avons donn des dimensions de 200px * 100px :

95

Notez que pour insrer une image de fond nous pouvons galement utiliser la proprit short-hand background plutt que la proprit background-image. Cette proprit gre galement dautres aspects de la mise en forme du fond que nous allons voir ensuite. 7.2 Position et rptition du fond La proprit background-repeat nous permet de grer la rptition de notre fond. Cette proprit accepte quatre valeurs :

Repeat : le fond se rpte horizontalement et verticalement, cest le comportement par dfaut ;

Repeat-x : le fond ne se rpte quhorizontalement ; Repeat-y : le fond ne se rpte que verticalement ; No-repeat : le fond ne se rpte pas.

Voyons immdiatement un exemple ensemble :

96

Pour contrler la position de notre image de fond, nous allons utiliser la proprit background-position. Cette proprit a besoin de deux valeurs pour fonctionner : une coordonne horizontale et une coordonne verticale. Le fond sera dcal par rapport au bord en haut gauche de son lment parent.

97

Voici immdiatement un exemple pratique :

Dans cet exemple, jai dcal mon image de 100px vers la droite et de 10px vers le bas par rapport au coin en haut gauche de llment

98

body, son parent. Rappelez vous que llment body occupe toute la page. 7.3 Fixer le fond ou le faire dfiler avec la page Pour fixer le fond et ainsi donner un effet intressant, on utilise la proprit background-attachment laquelle on donne une valeur gale fixed. Cette proprit accepte deux valeurs : fixed donc ou scroll, qui est la valeur par dfaut et qui va faire dfiler le fond en mme temps que la page. 7.4 Insrer plusieurs images de fond Il est possible, grce au CSS3, dinsrer plusieurs images de fond. Pour ce faire, on va devoir utiliser la notation short-hand de nos proprits relatives au fond et donc la proprit background. On va ensuite tout simplement sparer les dclarations par une virgule. Voyons immdiatement comment a fonctionne dans les faits! Pour cela, on va prendre deux nouvelles images quon va placer dans un sous-dossier et dans un dossier parent pour changer un peu et voir tous les cas de figure. En pratique, si votre site est bien construit et pas trop compliqu, vous devriez avoir toutes vos images dans un dossier nomm images mais pour le moment on sexerce !

99

Jai donc trois images dans trois dossiers diffrents :

Mon image de colibri qui est dans le mme dossier que mes fichiers HTML et CSS ;

Mon image de pingouin qui est dans un dossier parent ; Mon image de panda qui est dans un sous-dossier.

Cela est un peu tir par les cheveux, jen conviens, mais encore une fois nous nous entranons pour le moment. Il ne nous reste donc plus qu utiliser notre proprit background de la faon suivante :

100

Ici, jai insr mes trois images dans llment body, en leur demandant dtre fixe et de ne pas se rpter. Jai dcal mon image colibri de 300px sur la droite tandis que jai coll mon image pingouin en haut gauche grce top left et mon image panda en haut droite grce top right. Notez que deux images peuvent tout fait se chevaucher. Par dfaut, la premire image dclare sera au dessus. Attention donc lordre de dclaration ! 7.5 Crer un fond en dgrad : les prfixes vendeurs Jespre que tout est clair jusqu prsent, car il est maintenant temps dapprendre comment crer un fond en dgrad et le problme va se complexifier lgrement. Tout dabord, il faut savoir que nous avons deux types de dgrad notre disposition : des dgrads linaire ou radial. Les fonds en dgrad sont considrs comme des images et donc, ce titre, nous allons nouveau utiliser la proprit background-image pour les crer.

101

Mais avant de rentrer dans le vif du sujet, je dois faire un petit apart sur ce quon appelle les prfixes vendeurs . Il y a quelques annes de cela, tous les navigateurs ne reconnaissaient pas les mmes proprits et ne les implmentaient p