Voil une page web qui prend forme !

Oui, mais moi je veux centrer mon titre, l'crire en rouge et le souligner !
Je veux que mes titres importants soient centrs, rouges et souligns
!our le moment, en "#$%, nous ne faisons que structurer notre page
&ous rdigeons le contenu avant de nous amuser le mettre en forme
'u sein de vos paragrap(es, certains mots sont parfois plus importants que d'autres et vous
aimerie) les faire ressortir
"#$% vous propose diffrents mo*ens de mettre en valeur le texte de votre page
+on utilisation est tr,s simple - encadre) les mots mettre en valeur avec ces balises et c'est
bon !
Je reprends un peu l'exemple de tout l'(eure et j'* mets quelques mots en vidence
.omme vous pouve) le voir, utiliser la balise /em0 a pour consquence de mettre le texte en
italique
On lui dit que les mots sont asse) importants et, pour faire ressortir cette information, il
c(ange l'apparence du texte en utilisant l'italique
!our mettre un texte bien en valeur, on utilise la balise /strong0 qui signifie 1 fort 2, ou 1
important 2 si vous prfre)
3lle s'utilise exactement de la m4me mani,re que /em0
Vous vo*e) s5rement le texte s'affic(er en gras
%e navigateur a c(oisi d'affic(er en gras les mots importants pour les faire ressortir
davantage
On pourra dcider plus tard, en .++, d'affic(er les mots 1 importants 2 d'une autre fa6on que
le gras si on le sou(aite
%a balise /mar70 permet de faire ressortir visuellement une portion de texte
%'extrait n'est pas forcment considr comme important mais on veut qu'il se distingue bien
du reste du texte
!ar dfaut, /mar70 a pour effet de surligner le texte
Je vais peut84tre vous sembler un peu lourd mais il est tr,s important qu'on se comprenne
bien car les dbutants font souvent la m4me grosse erreur ce stade
3t pourtant9 ce n'est pas cela que servent ces balises !
%a plupart des navigateurs affic(ent les textes importants en gras, mais rien ne les * oblige
: quoi cela sert8il que l'ordinateur sac(e qu'un texte est important ;
<trompe)8vous !
<e nombreux programmes anal*sent le code source des pages web, commencer par les
robots de moteurs de rec(erc(e
%es mots8cls 1 importants 2 ont tendance avoir plus de valeur leurs *eux, donc si
quelqu'un fait une rec(erc(e sur ces mots, il a plus de c(ances de tomber sur votre site
=l ne faut pas croire qu'utiliser la balise /strong0 tout8va amliorera votre rfrencement
&ous verrons le .++ plus loin, pour l'instant nous nous concentrons sur le "#$% et ses
balises, qui ont c(acune un sens particulier
%es listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations
>ne liste non ordonne ressemble ceci
.'est un s*st,me qui nous permet de crer une liste d'lments sans notion d'ordre
Vous alle) comprendre de suite avec cet exemple
%e rsultat se trouve la figure suivante
Vous pouve) mettre autant d'lments que vous voule) dans la liste puces, vous n'4tes pas
limits trois lments
!as si dur une fois qu'on a compris comment imbriquer les balises
On utilise toujours des balises /li0/?li0 pour dlimiter les lments
.omme c'est particuli,rement intuitif, je vous laisse admirer la simplicit de cet exemple
!our information, il existe un troisi,me t*pe de liste, beaucoup plus rare
=l s'agit d'un texte sur lequel on peut cliquer pour se rendre sur une autre page
=l est facile de reconna@tre les liens sur une page - ils sont crits d'une fa6on diffrente et un
curseur en forme de main appara@t lorsqu'on pointe dessus
=l faut cependant lui ajouter un attribut, (ref, pour indiquer vers quelle page le lien doit
conduire
!ar exemple, le code ci8dessous est un lien qui am,ne vers le +ite du Aro
+i vous ave) dj ouvert la page, le lien s'affic(e en violet
%es c(oses se corsent un petit peu si les pages sont situes dans des dossiers diffrents
+i votre fic(ier cible est plac dans un dossier qui se trouve 1 plus (aut 2 dans l'arborescence,
il faut crire deux points comme ceci
Bvite) cependant de crer des id avec des espaces ou des caract,res spciaux, utilise)
simplement, dans la mesure du possible, des lettres et c(iffres pour que la valeur soit
reconnue par tous les navigateurs
%a bulle d'aide peut 4tre utile pour informer le visiteur avant m4me qu'il n'ait cliqu sur le
lien
&otre but ici est de faire le tour des diffrents formats utiliss sur le Ceb pour que vous les
connaissie) et sac(ie) c(oisir celui qui convient le mieux votre image
.e format est con6u pour rduire le poids des p(otos Dc'est88dire la taille du fic(ier associE,
qui peuvent comporter plus de FG millions de couleurs diffrentes
&ote) que le J!3H dtriore un peu la qualit de l'image, d'une fa6on gnralement
imperceptible
%e !&H a deux gros avantages - il peut 4tre rendu transparent et il n'alt,re pas la qualit de
l'image
.e navigateur tend 4tre de moins en moins utilis, mais garde) quand m4me cette
information en t4te
Je le rp,te - vite) tout prix les accents, majuscules et espaces dans vos noms de fic(iers et
de dossiers
!arfois, certains navigateurs c(oisissent d'affic(er un cadre bleu Dou violetE pas tr,s
est(tique autour de votre image cliquable
'pr,s avoir pass toute une premi,re partie du cours ne travailler que sur le "#$%, nous
allons maintenant dcouvrir le .++ que j'avais volontairement mis l'cart
=l vient le complter pour vous aider mettre en forme votre page web
.es aspects t(oriques ne sont pas bien compliqus mais vous deve) obligatoirement les
conna@tre car c'est la base du .++
.'est d'ailleurs la seule c(ose que je vous demanderai de retenir par cIur en .++, vous
pourre) retrouver le reste dans le mmo en annexe
'lle), ne tra@nons pas, je vois que vous br5le) d'impatience !
Je vous avais avertis d,s le dbut de ce cours - nous allons apprendre deux langages
&ous avons dj bien entam notre dcouverte du "#$%, m4me s'il reste encore de
nombreuses c(oses apprendre Dnous * reviendrons dans quelques c(apitresE
3n revanc(e, il est temps maintenant de nous intresser au .++
Vous vous souvene) de son rJle ; Hrer la mise en forme de votre site
3t aussi, c'est lui qui permet de faire la mise en page de votre site
je veux que mon menu soit gauc(e et occupe telle largeur, que l'en8t4te de mon site soit cal
en (aut et qu'il soit toujours visible, etc
+ouvene)8vous de ce petit comparatif que nous avions vu d,s le premier c(apitre Dfigure
suivanteE
HrKce au "#$%, nous avons pu rdiger le contenu de notre site mais il est brut de dcoffrage
=l fallait se dfaire de certaines mauvaises (abitudes et cela a pris du temps
3ncore aujourd'(ui, on peut trouver des sites web avec des balises "#$% de mise en forme,
anciennes et obsol,tes, comme /font0 !
.ependant, elle est bien avance et aujourd'(ui dj bien prise en c(arge par de nombreux
navigateurs, ce qui fait qu'on peut dj s'en servir
=l serait dommage de passer cJt car .++ L apporte de nombreuses fonctionnalits .++
'u dbut des annes MNNN, =nternet 3xplorer tait le navigateur le plus rpandu mais sa
gestion du .++ est longtemps reste asse) mdiocre Dpour ne pas dire carrment mauvaiseE
"eureusement, cette proportion tend diminuer
<epuis, de nombreux navigateurs sont arrivs et ont c(a(ut =nternet 3xplorer
Oon, ton cours d'(istoire, c'est bien joli mais en quoi cela me concerne8t8il aujourd'(ui ;
Pue faut8il retenir de tout cela ;
!lus le navigateur est vieux, moins il conna@t de fonctionnalits .++
'u pire, si le navigateur ne conna@t pas une proprit .++, il l'ignore et ne met pas en forme,
mais cela ne fait pas planter votre page - celle8ci sera donc toujours lisible
Je vais vous prsenter ces trois mt(odes mais sac(e) d'ores et dj que la premi,re9 est la
meilleure
c'est elle qui indique que ce fic(ier "#$% est associ un fic(ier appel st*lecss et c(arg
de la mise en forme
!our activer la coloration du code dans &otepadQQ, passe) par les menus %angage 0 . 0
.++
<ans &otepadQQ, vous devrie) observer quelque c(ose de similaire la figure suivante
<ans votre explorateur de fic(iers, vous devrie) les voir appara@tre cJte cJte <'un cJt le
(tml, de l'autre le css, comme la figure suivante
<erni,re mt(ode, manipuler avec prcaution - vous pouve) ajouter un attribut st*le
n'importe quelle balise
Je vous recommande fortement de prendre l'(abitude de travailler avec la premi,re mt(ode
parce que c'est celle utilise par la majorit des webmasters
On ouvre des accolades pour, l'intrieur, mettre les proprits et valeurs que l'on sou(aite
On peut mettre autant de proprits que l'on veut l'intrieur des accolades
.(aque proprit est suivie du s*mbole 1 deux8points 2 D - E puis de la valeur correspondante
3nfin, c(aque ligne se termine par un point8virgule D R E
!our le moment, dans les exemples, on va juste c(anger la couleur pour s'entra@ner
$aintenant, ouvre) nouveau votre page "#$%, vous devrie) voir son titre s'affic(er en
bleu Dfigure suivanteE !
=l suffit de combiner la dclaration en sparant les noms des balises par une virgule
.e que je vous ai montr jusqu'ici a quand m4me un dfaut
Pue les c(oses soient claires d,s le dbut - les attributs class et id sont quasiment identiques
=l * a seulement une petite diffrence que je vous dvoilerai plus bas
.'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que
paragrap(e, image, etc
%ui, il fonctionne exactement de la m4me mani,re que class, un dtail pr,s - il ne peut 4tre
utilis qu'une fois dans le code
+i vous utilise) des id, il faudra faire prcder le nom de l'id par un di,se DSE
+i vous vous emm4le) les pinceaux entre class et id retene) que deux balises peuvent avoir le
m4me nom avec l'attribut class
=l arrivera parfois que vous a*e) besoin d'appliquer une class Dou un idE certains mots qui,
l'origine, ne sont pas entours par des balises
!ar c(ance, on a invent9 la balise8qui8ne8sert88rien
=l * a une diffrence minime Dmais significative !E entre ces deux balises -
3n .++, le plus difficile est de savoir cibler le texte dont on veut c(anger la forme
.es slecteurs, que nous avons vus prcdemment, sont de loin les plus couramment utiliss
=l faut les conna@tre par cIur
.ommen6ons par la base de la base -
=l faut 4tre vigilant sur la compatibilit des navigateurs avec certaines fonctionnalits rcentes
de .++L
.ela signifie simplement que l'on va modifier l'apparence du texte Don dit qu'on le 1 met en
forme 2E
.e c(apitre va 4tre l'occasion de dcouvrir de nombreuses proprits .++
&on, le 1 formatage du texte 2 n'a rien voir avec la destruction de toutes les donnes
prsentes sur votre disque dur !
$ais comment indiquer la taille du texte ; .'est l que les c(oses se corsent car plusieurs
tec(niques vous sont proposes -
il est conseill de ne l'utiliser que si c'est absolument ncessaire
cette tec(nique a l'avantage d'4tre plus souple
3lle s'adapte plus facilement aux prfrences de taille des visiteurs
!our avoir un texte de FG pixels de (auteur, vous deve) donc crire -
Voici un exemple d'utilisation
3t le rsultat est visible la figure suivante
.'est la mt(ode recommande car le texte s'adapte alors plus facilement aux prfrences de
tous les visiteurs
Oon, cette tec(nique a un dfaut - il n'* a que sept tailles disponibles
$a tec(nique prfre consiste indiquer la taille en 1 em 2
On touc(e un point sensible
son navigateur prendra une police par dfaut qui n'aura peut84tre rien voir avec ce quoi
vous vous attendie)
%a bonne nouvelle, c'est que depuis .++ L, il est possible de faire tlc(arger
automatiquement une police au navigateur
Je vous expliquerai dans un second temps comment faire cela
3n gnral, on indique en tout dernier serif, ce qui correspond une police par dfaut
%a figure suivante vous montre quoi ressemblent ces polices
cela signifie - 1 $ets la police =mpact ou, si elle n'* est pas, 'rial Olac7, ou sinon 'rial, ou
sinon Verdana, ou si rien n'a marc(, mets une police standard Dsans8serifE 2
3n gnral, il est bien d'indiquer un c(oix de trois ou quatre polices DQ serif ou sans8serifE
afin de s'assurer qu'au moins l'une d'entre elles aura t trouve sur l'ordinateur du visiteur
+i le nom de la police comporte des espaces, je conseille de l'entourer de guillemets, comme
je l'ai fait pour 1 'rial Olac7 2
Je trouve le c(oix des polices trop limit
/em0, mette)8vous bien cela dans la t4te, est faite pour insister sur des mots
la veut dire que les mots qu'elle entoure sont asse) importants
!our reprsenter cette importance, la plupart des navigateurs c(oisissent d'affic(er le texte en
italique, mais ce n'est pas une obligation
Tien ne vous emp4c(e, par exemple, de dcider que tous vos titres seront en italique
3t si nous passions la mise en gras ;
%a proprit .++ pour mettre en gras est font8weig(t et prend les valeurs suivantes -
J'imagine que, maintenant, la question qui vous br5le les l,vres est - 1 $ais quelle est donc la
proprit magique qui fait flotter ; 2
Puand vous mette) en place un flottant, le texte autour l'(abille
%es accesseurs sont du m4me t*pe que la variable qu'ils doivent retourner
Vous vo*e) bien que les constructeurs ont fonctionn, que les accesseurs tournent merveille
Oien s5r que si, mais il vaut mieux bien distinguer les diffrents t*pes de mt(odes dans un
objet -
!ense) ajouter le traitement aux bons endroits R
Voici tout d'abord le code de notre classe Ville en entier, c'est88dire comportant les mt(odes
dont on vient de parler -
.ependant, vu qu'il va falloir qu'on travaille depuis l'intrieur de notre objet, vous alle)
encore avoir un mot cl retenir
!our simplifier, t(is fait rfrence l'objet courant !
!our expliciter le fonctionnement du mot cl t(is, prenons l'exemple de la mt(ode
comparerDVille VFE
<e cette mani,re, la catgorie est automatiquement mise jour, sans qu'on ait besoin de faire
appel la mt(ode
3t si nous faisions un petit test ;
Je viens d'avoir une ide - et si nous essa*ions de savoir combien de villes nous avons
cres ;
%a particularit de ce t*pe de variable, c'est qu'elles seront communes toutes les instances
de la classe !
.rons sans plus attendre notre compteur d'instances
.ontinuons notre tour d'(ori)on des proprits .++ existantes
&ous allons nous intresser ici aux proprits lies de pr,s ou de loin la couleur
%e .++ n'a pas fini de nous tonner !
!assons maintenant au vaste sujet de la couleur
%a mt(ode la plus simple et la plus pratique pour c(oisir une couleur consiste taper son
nom
Vous pouve) les apprendre par cIur si cela vous c(ante, en plus cela vous fera rviser votre
anglais
!our passer tous les titres en marron, on peut donc crire -
On doit toujours commencer par crire un di,se DSE, suivi de six lettres ou c(iffres allant de N
U et de ' V
.es lettres ou c(iffres fonctionnent deux par deux
3n anglais, Touge8Vert8Oleu s'crit Ted8Hreen8Olue, ce qui s'abr,ge en 1 THO 2
3ncore cette (istoire tordue de quantits de rouge8vert8bleu ;
<ans la )one qui appara@t droite, faites bouger les curseurs pour slectionner la couleur qui
vous intresse
+upposons que vous so*e) pris d'une envie folle d'crire vos titres /(F0 en rose bonbon
Dsupposons seulementE
Televe) les quantits de Touge8Vert8Oleu correspondantes, indiques en bas droite de la
fen4tre Dici MWN8UG8MNWE
!our information, ces quantits sont toujours comprises entre N et MXX
Voici le rendu de ce code en figure suivante
3( mais tu as demand ce que le texte de la balise /bod*0 soit crit en blanc, et tous les
paragrap(es /p0 et titres /(F0 ont pris cette couleur
.'est d'ailleurs de l que vient le nom 1 .++ 2, qui signifie 1 .ascading +t*le +(eets 2, c'est8
8dire 1 Veuilles de st*le en cascade 2
%es proprits .++ sont (rites en cascade - si vous donne) un st*le un lment, tous les
sous8lments auront le m4me st*le
On a tendance croire qu'on ne peut modifier que la couleur de fond de la page
<ans ce cas, ils appara@tront surligns Dcomme si on avait mis un coup de marqueur dessusE
+ur le texte de la balise /mar70, c'est la couleur de fond rouge qui s'applique
%e m4me principe vaut pour toutes les balises "#$% et toutes les proprits .++ !
<ans les exemples qui suivent, je vais modifier l'image de fond de la page
.ette proprit n'est intressante que si elle est combine avec bac7ground8repeat- no8repeatR
%'ordre des valeurs n'a pas d'importance
Vous pouve) combiner les valeurs dans n'importe quel ordre
>ne derni,re c(ose avant d'en terminer avec les images de fond -
+i vous ave) un peu de go5t Dcontrairement moi !E vous arrivere) certainement donner une
tr,s belle allure votre page web
.ette notation est connue de tous les navigateurs rcents, * compris =nternet 3xplorer D partir
de =3UE
&ous pourrons crer autant de classes drives, par rapport notre classe de base, que nous le
sou(aitons
Vous vous rendre) vite compte que les objets .apitale auront tous les attributs et toutes les
mt(odes associs aux objets Ville !
!our vous le prouver, essa*e) ce morceau de code dans votre main -
ous devrie) avoir la figure suivante en guise de rendu
%es objets (rits peuvent accder toutes les mt(odes public de leur classe m,re, dont la
mt(ode decris#oiDE dans le cas qui nous occupe
Vous alle) avoir une belle erreur de compilation !
.'est ici que le nouveau mot cl protected fait son entre
%e compilateur rejette votre demande lorsque vous tente) d'accder des ressources prives
d'une classe m,re !
: prsent, continuons la construction de notre objet (rit - nous allons agrmenter notre
classe .apitale
.omme je vous l'avais dit, ce qui diffrenciera nos objets .apitale de nos objets Ville sera la
prsence d'un nouveau c(amp - le nom d'un monument
'vant de foncer t4te baisse, il faut que vous sac(ie) que nous pouvons faire appel aux
variables de la classe m,re dans nos constructeurs grKce au mot cl super
.ependant, la mt(ode decris#oiDE ne prend pas en compte le nom d'un monument
#este) le code ci8dessous, il aura pour rsultat la figure suivante
vous vene) de faire de la mt(ode decris#oiDE une mt(ode pol*morp(e, ce qui nous conduit
sans dtour ce qui suit
.e concept compl,te parfaitement celui de l'(ritage
Vous alle) voir que le pol*morp(isme est plus simple qu'il n'* para@t
!our faire court, nous pouvons le dfinir en disant qu'il permet de manipuler des objets sans
vraiment conna@tre leur t*pe
On pourrait construire un tableau d'objets et appeler decris#oiDE sans se soucier de son
contenu - villes, capitales, ou les deux
Vous vo*e) que la mt(ode pol*morp(e decris#oiDE fait bien son travail !
.ette mt(ode se trouve dans une autre classe et donc, par extension, dans une autre instance
de cette autre classe
=ci, nous allons nous intresser aux bordures et aux effets d'ombrage que l'on peut appliquer,
aussi bien sur le texte que sur les blocs qui constituent notre page
!r4ts vous en mettre une nouvelle fois plein la vue ;
%e .++ vous offre un large c(oix de bordures pour dcorer votre page
!our aller l'essentiel, je vous propose ici d'utiliser directement la super8proprit border qui
regroupe l'ensemble de ces proprits
.ela fonctionne sur le m4me principe - on va pouvoir combiner plusieurs valeurs
!our border on peut utiliser jusqu' trois valeurs pour modifier l'apparence de la bordure -
%es ombres font partie des nouveauts rcentes proposes par .++L
On peut aussi rajouter une cinqui,me valeur facultative - inset
%e rsultat est illustr la figure suivante
=l faut indiquer la largeur de la bordure, sa couleur et son t*pe Dtrait continu, pointills9E
On peut arrondir les bordures avec border-radius
On doit indiquer le dcalage vertical et (ori)ontal de l'ombre, son niveau d'adoucissement et
sa couleur
&ous allons faire appel une fonctionnalit puissante du .++ - les pseudo8formats
Vous alle) voir que le langage .++ n'a pas fini de nous tonner !
%aisse) libre cours votre imagination, il n'* a pas de limite
: partir de l, c'est vous de dfinir l'apparence que doivent avoir les liens lorsqu'on pointe
dessus
Vous pouve) interagir encore plus finement en .++
%e c(angement intervient lorsque le bouton de la souris est enfonc
+ous Hoogle .(rome et +afari, l'effet ne se voit que si l'on appuie sur la touc(e Tab
3n pratique, sur les liens consults, on ne peut pas c(anger beaucoup de c(oses part la
couleur Dfigure suivanteE
&ous approc(ons de plus en plus du but
+i nos pages web ne ressemblent pas encore tout fait aux sites web que nous connaissons,
c'est qu'il nous manque les connaissances ncessaires pour faire la mise en page
3n gnral, une page web est constitue d'un en8t4te Dtout en (autE, de menus de navigation
Den (aut ou sur les cJtsE, de diffrentes sections au centre9 et d'un pied de page Dtout en
basE
<ans ce c(apitre, nous allons nous intresser aux nouvelles balises "#$% ddies la
structuration du site
!our le moment, nous n'allons pas encore faire de mise en page
: l'inverse de l'en8t4te, le pied de page se trouve en gnral tout en bas du document
%a figure suivante vous montre quoi ressemble le pied de page du +ite du Aro
Ouf, cela fait beaucoup de nouvelles balises retenir
&e vous * trompe) pas - ce sc(ma propose un exemple d'organisation de la page
.e code peut vous aider comprendre comment les balises doivent 4tre agences
%es liens sont volontairement factices Dd'oY la prsence d'un simple #E, ils n'am,nent donc
nulle part De(, c'est juste une page de dmoE !
Je ne comprends pas l'intr4t de ces balises
3lles n'indiquent pas, contrairement ce qu'on pourrait penser, oY doit 4tre plac le contenu
.'est le rJle du .++, comme nous le verrons dans peu de temps maintenant
: l'(eure actuelle, pour tout vous dire, ces balises ont encore asse) peu d'utilit
.ela peut (eureusement se rgler asse) facilement l'aide d'un script Java+cript
%es scripts sont des petits morceaux de code qui permettent de manipuler la page web et
d'effectuer certaines actions
=l faut savoir que ce t*pe de script est appel depuis les pages "#$% d'une fa6on asse)
similaire l'appel des fic(iers .++
+ans rentrer dans le dtail, sac(e) que <!--[if lt IE 9]> est un commentaire
conditionnel
=l permet de faire en sorte que le script s'excute uniquement sur les versions d'=nternet
3xplorer infrieures =3U
.es balises peuvent 4tre imbriques les unes dans les autres
.es balises ne s'occupent pas de la mise en page
3lles servent seulement indiquer l'ordinateur le sens du texte qu'elles contiennent
%e code Java+cript HTML5shiv permet de faire en sorte que ces balises soient reconnues pour
les versions d'=nternet 3xplorer antrieures =3U
>ne page web peut 4tre vue comme une succession et un empilement de bo@tes, qu'on appelle
1 blocs 2
&ous allons leur donner des dimensions, les agencer en jouant sur leurs marges, mais aussi
apprendre grer leur contenu9 pour viter que le texte ne dpasse de ces blocs !
.e sont des notions fondamentales dont nous allons avoir besoin pour mettre en page notre
site web9 +o*e) attentifs !
3n "#$%, la plupart des balises peuvent se ranger dans l'une ou l'autre de deux catgories
$ais comment je reconnais une balise inline d'une balise bloc7 ;
Votre page web sera en fait constitue d'une srie de blocs les uns la suite des autres
!our bien visualiser le concept, voici en figure suivante un petit sc(ma que je vous ai
concoct
%a balise inline <a><a>, elle, se trouve l'intrieur d'une balise bloc7 et le texte vient
s'insrer sur la m4me ligne
On peut aussi les imbriquer les uns l'intrieur des autres
'fin de mieux vous aider assimiler quelles balises sont inline et quelles balises sont bloc7,
voici un petit tableau dressant la liste de quelques balises courantes
=l existe deux balises gnriques et, comme par (asard, la seule diffrence entre les deux est
que l'une d'elle est inline et l'autre est bloc7
%es balises universelles sont 1 pratiques 2 dans certains cas, certes, mais attention ne pas en
abuser
Je tiens vous avertir de suite - beaucoup de webmasters mettent des <div> et des <s!an>
trop souvent et oublient que d'autres balises plus adaptes existent
!our commencer, intressons8nous la taille des blocs
%e rsultat est visible la figure suivante
#outefois, il se peut que vous a*e) besoin de crer des blocs a*ant une dimension prcise en
pixels -
On peut demander ce qu'un bloc ait des dimensions minimales et maximales
Vous alle) voir que, si celle8ci est trop petite, le paragrap(e se force occuper au moins WNN
pixels de largeur
+ur ce bloc, j'ai mis une bordure pour qu'on rep,re mieux ses fronti,res
.omme vous pouve) le constater, il n'* a par dfaut pas de marge intrieure D!addin"E
+upposons que je veuille rajouter une marge intrieure de FM px aux paragrap(es Dfigure
suivanteE -
%'idal serait que vous retenie) les termes suivants en anglais -
Je vais quand m4me vous faire la liste des proprits pour #ar"in et !addin", (istoire que
vous so*e) s5rs que vous ave) compris le principe
+eul le centrage (ori)ontal est permis
%orsqu'on commence dfinir des dimensions prcises pour nos blocs, comme on vient de le
faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contiennent
%es proprits .++ que nous allons voir ici ont justement t cres pour contrJler les
dpassements9 et dcider quoi faire si jamais cela devait arriver
+upposons que vous a*e) un long paragrap(e et que vous voulie) Dpour une raison qui ne
regarde que vousE qu'il fasse MXN px de large et FFN px de (aut
'joutons8lui une bordure et remplissons8le de texte9 ras8bord
"orreur ! %e texte dpasse des limites du paragrap(e !
$ais9 le texte ne tient pas l'intrieur d'un si petit bloc
+auf que cette fois, le navigateur mettra en place des barres de dfilement pour qu'on puisse
lire l'ensemble du texte
3ur47a ! <es barres de dfilement nous permettent maintenant de consulter le contenu qui
n'tait pas visible
.ette proprit permet de forcer la csure des tr,s longs mots Dgnralement des adresses un
peu longuesE
=l ne sait pas faire la csure
'vec le code suivant, la csure sera force d,s que le texte risque de dpasser
Je conseille d'utiliser cette fonctionnalit d,s qu'un bloc est susceptible de contenir du texte
saisi par des utilisateurs Dpar exemple sur les forums de votre futur siteE
+ans cette astuce, on peut 1 casser 2 facilement le design d'un site Den crivant par exemple
une longue suite de 1 aaaaaaaaaaa 2E
<ans ce cas, il peut 4tre judicieux de rajouter des barres de dfilement avec la proprit
overflo$ ou de forcer la csure avec $ord-$ra!
Voici venu le moment tant attendu - nous allons apprendre modifier la position des lments
sur notre page
%a t(orie que nous allons voir ici nous sera indispensable au proc(ain c(apitre, dans lequel
nous raliserons ensemble, pas pas, le design de notre premier site !
Vous alle) voir, il existe plusieurs tec(niques permettant d'effectuer la mise en page de son
site
.(acune a ses avantages et ses dfauts, ce sera vous de slectionner celle qui vous semble
la meilleure selon votre cas
>ne meilleure tec(nique, le positionnement inline-blo%&, sera prsente un peu plus loin -
je vous encourage l'utiliser autant que possible
=l se trouve que cette proprit est aujourd'(ui utilise par la majorit des sites web pour9
faire la mise en page !
3n effet, si on veut placer son menu gauc(e et le contenu de sa page droite, c'est a priori
un bon mo*en
Je dis bien a priori car, la base, cette proprit n'a pas t con6ue pour faire la mise en page
et nous allons voir qu'elle a quelques petits dfauts
=l * a deux dfauts Dmis part le fait que c'est encore bien moc(eE -
Voil, le contenu de la page est maintenant correctement align
Je vais vous apprendre ici modifier les lois du .++ Dbrrr9E 'ccroc(e)8vous !
=l existe en .++ une proprit tr,s puissante - dis!la'
'vec cette proprit magique, je peux par exemple imposer mes liens Doriginellement de
t*pe inlineE d'appara@tre sous forme de blocs -
!our faire appara@tre ces lments par la suite, vous devre) faire appel Java+cript
.ertains sites web utilisent cette tec(nique pour, par dfaut, masquer les sous8menus qui ne
s'affic(ent que lorsqu'on parcourt les menus
%es manipulations que demande le positionnement flottant se rv,lent parfois un peu
dlicates sur des sites complexes
=ls se positionnent les uns cJt des autres
=l ne nous reste plus qu' aligner nos lments en (aut Dlignes G et FLE, et le tour est jou !
3t voil ! !as besoin de s'emb4ter avec les marges, aucun risque que le texte passe sous le
menu
Puoi ; !ardon, on me signale dans l'oreillette qu'un certain navigateur vient jouer les trouble8
f4te9
On peut (eureusement rgler ce probl,me avec une petite 1 bidouille 2
$aintenant, vous ne pouve) plus vous contenter de lire mes c(apitres moiti endormis,
vous alle) devoir mettre la main la pKte en m4me temps que moi
Oon, par quelle ligne de code on commence ;
Je sais, par exprience, que la plupart d'entre vous 1 c(erc(e juste apprendre 2 pour le
moment
Vous n'ave) donc peut84tre pas encore d'ide prcise en t4te
3n ce qui me concerne, dans ce #!, je vais raliser le site web de notre mascotte Ao)or, le
cl,bre Kne du +ite du Aro Dfigure suivanteE
Ao)or a dcid de partir en vo*age travers le monde et sa premi,re tape sera9 +an
Vrancisco !
=l veut donc crer un site web pour qu'on le connaisse et pour qu'on suive son priple
travers le monde
%'Kne Ao)or, la mascote du +ite du Aro
%a premi,re tape consiste maquetter le design, pour avoir un objectif du site web raliser
=l ne nous reste plus qu' raliser ce site web !
%a premi,re c(ose faire est de distinguer les principaux blocs sur la maquette
.es blocs vont constituer le squelette de notre page
<e prfrence, utilise) une balise qui a du sens Dcomme les balises structurantes <header>,
<se%tion>, <nav>E mais, si aucune balise ne vous semble mieux convenir, opte) pour la
balise gnrique <div>
On peut imaginer d'autres fa6ons de faire le dcoupage, retene) bien que ma proposition n'est
pas forcment la seule et unique solution !
3n plus de cela, il faut bien entendu mettre disposition les fic(iers des polices
On peut maintenant s'attaquer dfinir quelques st*les globaux pour tout le design de notre
page
%, en gnral, il arrive qu'on prenne tr,s peur
Tout problme a une solution Drpte) cela autant de fois que ncessaireE
$a page web n'est pas valide, je ne vais pas m'en sortir, je suis cern par les erreurs, faites
quelque c(ose aide)8mmmoiiiiii !
#out le monde fait des erreurs, alors ne panique) pas
.orrige) pas pas votre page web jusqu' ce que le validateur vous affic(e un beau rsultat
en vert
.e qui fait le succ,s du Ceb aujourd'(ui, c'est la fois sa simplicit et sa facilit d'acc,s
>n internaute lambda n'a pas besoin de savoir 1 comment a fonctionne derrire 2
3n revanc(e, un apprenti webmaster tel que vous doit, avant toute c(ose, conna@tre les bases
du fonctionnement d'un site web
#ous les lecteurs seront la fin rassurs de savoir qu'ils commencent au m4me niveau !
%e seul prrequis pour apprendre crer ce t*pe de sites est de dj savoir raliser des sites
statiques en "#$% et .++
%'objectif de ce cours est de vous rendre capables de raliser des sites web d*namiques
enti,rement par vous8m4mes, pas pas
Voici quelques lments que vous sere) en mesure de raliser -
un espace membres - vos visiteurs peuvent s'inscrire sur votre site et avoir acc,s des
sections qui leur sont rserves R
un forum - il est courant aujourd'(ui de voir les sites web proposer un forum de discussion
pour s'entraider ou simplement passer le temps R
un compteur de visiteurs - vous pouve) facilement compter le nombre de visiteurs qui se
sont connects dans la journe sur votre site, ou m4me conna@tre le nombre de visiteurs en
train d'* naviguer !
une newsletter - vous pouve) envo*er un e8mail tous vos membres rguli,rement pour leur
prsenter les nouveauts et les inciter ainsi revenir sur votre site
$ais9 ne nous emportons pas
$ais ne vous 4tes8vous jamais demand comment faisait la page web pour arriver jusqu'
vous ;
!ourtant, les serveurs sont indispensables au bon fonctionnement du Ceb
%a plupart du temps, le serveur est dpourvu d'cran - il reste allum et travaille tout seul sans
intervention (umaine, MW (?MW, Z j?Z >n vrai for6at du travail
On rsume - votre ordinateur est appel le client, tandis que l'ordinateur qui dtient le site
web est appel le serveur
.'est justement l que se fait la diffrence entre un site statique et un site d*namique
.ela se passe en deux temps, ainsi que vous le sc(matise la figure suivante -
%e serveur lui rpond en lui envo*ant la page rclame
+ur un site statique, il ne se passe rien d'autre
%a page web est gnre c(aque fois qu'un client la rclame
.'est prcisment ce qui rend les sites d*namiques vivants - le contenu d'une m4me page peut
c(anger d'un instant l'autre
.'est comme cela que certains sites parviennent affic(er par exemple votre pseudon*me sur
toutes les pages
%orsqu'on cre un site web, on est amen manipuler non pas un mais plusieurs langages
3n tant que webmaster, il faut imprativement les conna@tre
.ertains programmes, appels C[+=C[H DC(at [ou +ee =s C(at [ou HetE, permettent
d'aider les plus novices crer un site web statique sans conna@tre les langages informatiques
qui se cac(ent derri,re9
$ais pour raliser un site d*namique comme nous le sou(aitons, nous devrons absolument
mettre les mains dans le cambouis
HTML - c'est le langage la base des sites web
CSS - c'est le langage de mise en forme des sites web
!our ces derniers, il est ncessaire de manipuler d'autres langages en plus de "#$% et .++
.es langages ne sont pas bien difficiles, ils sont la porte de tous
+ac(e) qu'apprendre ces langages n'est l'affaire que de quelques petites semaines, voire moins
si vous ave) suffisamment de temps libre
Puel que soit le site web que l'on sou(aite crer, "#$% et .++ sont donc indispensables
PHP - c'est un langage que seuls les serveurs comprennent et qui permet de rendre votre site
d*namique
=l peut fonctionner seul, mais il ne prend vraiment de l'intr4t que s'il est combin un outil
tel que $*+P%
!our faire simple, son rJle est d'enregistrer des donnes de mani,re organise afin de vous
aider les retrouver facilement plus tard
3ntre autres c(oses, cela vous donne des garanties de prennit -
.ela signifie une c(ose essentielle - vous n'aure) pas dbourser un centime pour construire
votre site web !
"#$% et .++ n'ont pas de concurrents car ce sont des standards
#out le monde est cens les conna@tre et les utiliser sur tous les sites web
.e langage peut 4tre intressant si vous ave) l'(abitude de dvelopper en .S &3# et que
vous ne voule) pas 4tre dpa*ss
%equel c(oisir dans le lot ; %equel est le meilleur ;
+i vous ave) dj manipul le Java, vous sere) plus rapidement l'aise avec les J+!
Puant !"!, il se dmarque de ses concurrents par une importante communaut qui peut
vous aider rapidement sur =nternet si vous ave) des probl,mes
Oref, il n'* a pas de meilleur c(oix Je vous recommande le langage pour lequel vous sere)
certains d'avoir quelqu'un pour vous aider !"! en ce sens est souvent un tr,s bon c(oix
!arfois compar Oracle, il lui reste cependant du c(emin parcourir
3n fin de compte, si vos mo*ens sont limits, vous n'ave) pas beaucoup de c(oix pour le
+HO< $*+P% est le plus indiqu car il est libre, gratuit, performant et utilis par de
nombreuses personnes qui sont susceptibles de vous aider
+ac(e) que vous pouve) a priori combiner ces outils comme bon vous semble
.e n'est pas par (asard si ce cours traite de ces deux outils qui ont fait leurs preuves
=ls demandent au serveur qui (berge le site de leur transmettre les pages web
$*+P% est un s*st,me de gestion de bases de donnes =l se c(arge du stoc7age des
informations Dliste des messages, des membres9E
.omment diable alle)8vous pouvoir crer un site d*namique si !"! ne fonctionne pas c(e)
vous ;
Pu' cela ne tienne - nous allons temporairement transformer votre ordinateur en serveur pour
que vous puissie) excuter du !"! et travailler sur votre site d*namique
Vous sere) fin pr4ts programmer apr,s avoir lu ce c(apitre !
Vous pouve) utiliser par exemple $o)illa Virefox, =nternet 3xplorer, Hoogle .(rome, Opera,
+afari, ou tout autre navigateur auquel vous 4tes (abitus pour aller sur le web
!our que votre ordinateur puisse lire du !"!, il faut qu'il se comporte comme un serveur
3n clair, en combinant 'pac(e et !"!, notre ordinateur sera capable de lire des pages web en
!"!
&ous n'en aurons pas besoin immdiatement, mais autant l'installer de suite
<ans la suite de ce c(apitre, nous allons voir comment installer le 1 pac7 2 qui convient en
fonction de votre s*st,me d'exploitation
%es deux programmes ne peuvent pas tourner en parall,le Dils utilisent les m4mes ports de
communication sur votre mac(ineE
!ar dfaut, C'$! est en anglais Vous pouve) facilement le passer en fran6ais en faisant un
clic droit sur l'icJne de C'$! dans la barre des tKc(es, puis en allant dans le menu
Language / french Dfig suivanteE
.onsidre) que c(aque site web que vous entreprene) de faire est un nouveau projet
le mieux reste d'utiliser un logiciel spcialis qui colore votre code Dtr,s pratiqueE et qui
numrote vos lignes Dtr,s pratique aussiE
Voici le code source "#$% que nous allons utiliser pour commencer en terrain connu
=l n'* a pas de !"! pour l'instant afin de commencer en douceur &ous allons simplement
essa*er d'enregistrer un fic(ier "#$% avec ce code pour nous c(auffer
Vous deve) au pralable enregistrer le fic(ier
=l est conseill d'utiliser un diteur de texte qui colore le code source comme &otepadQQ pour
programmer convenablement en !"!
<ans le premier c(apitre, nous avons dcouvert le principe de fonctionnement du !"!
=ci, nous allons passer au concret et raliser notre toute premi,re page web en !"!
&e vous attende) pas un rsultat extraordinaire, mais cela va nous permettre de prendre nos
marques
<epuis quelques annes, les sites web ont gagn en fonctionnalits et sont devenus dans le
m4me temps de plus en plus complexes
On s'attend ce qu'un site soit rguli,rement mis jour -
%e langage PHP a justement t con6u pour crer des sites \vivants\ Don parle de sites
d*namiquesE
!eut8on placer une balise !"! n'importe oY dans le code ;
.omment 6a fonctionne ; : quoi 6a peut servir ;
=l faut se rappeler que !"! gn,re du code "#$%
=l est indispensable de bien comprendre cela, so*e) donc attentifs !
%es guillemets permettent de dlimiter le dbut et la fin du texte, ce qui aide l'ordinateur se
reprer
%a solution consiste faire prcder le guillemet d'un antislas( ] -
%'essentiel, quel que soit votre s*st,me d'exploitation, est que le fic(ier soit enregistr dans le
dossier $$$ Dou un de ses sous8dossiersE sinon le fic(ier !"! ne pourra pas s'excuter !
!our tester votre page !"!, cela dpend de votre s*st,me d'exploitation mais la manoeuvre
est dans les grandes lignes la m4me
Oon, mine de rien je viens de vous apprendre pas mal de c(oses d'un coup, 6a doit vous faire
un c(oc
<'accord ce n'tait pas extraordinaire, mais vous n'alle) pas tarder comprendre toute la
subtilit de la c(ose
Vous pouve) crire tout et n'importe quoi, le tout est de s'en servir bon escient
+i vous commente) une ligne prcise, mieux vaut mettre le commentaire la fin de cette
ligne
Vous est8il dj arriv de vouloir modifier le menu de votre site et de devoir pour cela
corriger le code "#$% de c(acune de vos pages web ;
.ela va grandement vous faciliter la tKc(e en vous vitant d'avoir copier le m4me code
"#$% plusieurs fois
Jusqu'ici, vous tie) condamns copier sur c(aque page l'identique -
.ette instruction ordonne l'ordinateur - 1 Insre ici le contenu de la page #enus(!h! 2
<ornavant vous verre) souvent des parent(,ses
!our le moment nous dbutons, donc nous nous contenterons de faire comme cela sans trop
rentrer dans les dtails pour ne pas nous br5ler les ailes
%e nombre d'in%lude par page n'est pas limit, par consquent vous pouve) dcouper votre
code en autant de sous8parties que vous le sou(aite) !
%, prpare)8vous subir une avalanc(e de nouvelles balises
!our commencer en douceur, voici deux nouvelles balises tr,s importantes -
On a une balise de ligne D<tr>E qui englobe un groupe de cellules D<td>E
%e rsultat est un peu dprimant Dfigure suivanteE
%e texte s'est crit la suite et il n'* a m4me pas de bordures !
$aintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en8t4te du tableau
%e titre permet de renseigner rapidement le visiteur sur le contenu du tableau
.ette balise se place tout au dbut du tableau, juste avant l'en8t4te
.es petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous a*e) besoin de
raliser des tableaux plus9 complexes
!our certains tableaux, il se peut que vous a*e) besoin de fusionner des cellules entre elles
+i votre tableau est asse) gros, vous aure) tout intr4t le dcouper en plusieurs parties
Pue mettre dans le pied de tableau ; Hnralement, si c'est un long tableau, vous * recopie)
les cellules d'en8t4te
.ela permet de voir, m4me en bas du tableau, quoi se rapporte c(acune des colonnes
+c(matiquement, un tableau en trois parties se dcoupe donc comme illustr la figure
suivante
.'est un peu droutant mais il est conseill d'crire les balises dans l'ordre suivant -
Tegarde) le tableau la figure suivante, qui dresse une liste de films et indique qui ils
s'adressent
!our le dernier film, vous vo*e) que les cellules ont t fusionnes - elles ne font plus qu'une
.'est exactement l'effet qu'on c(erc(e obtenir
#oute page "#$% peut 4tre enric(ie de formulaires interactifs, qui invitent vos visiteurs
renseigner des informations - saisir du texte, slectionner des options, valider avec un
bouton9 tout est possible !
%orsqu'il vous prend subitement l'envie d'insrer un formulaire dans votre page "#$%, vous
deve) pour commencer crire une balise <for#> <for#>
Problme n! - comment envo*er le texte saisi par le visiteur ; !ar quel mo*en ;
Problme n" - une fois que les donnes ont t envo*es, comment les traiter ;
+ou(aite)8vous recevoir le message automatiquement par mail ou prfre)8vous qu'un
programme se c(arge de l'enregistrer quelque part, puis de l'affic(er sur une page visible par
tout le monde ;
Je vous demande de me faire confiance et d'imaginer que cette page existe et fonctionne
&otre priorit, pour le moment, est de dcouvrir en "#$%?.++ comment faire pour insrer
des )ones de texte, des boutons et des cases coc(er dans votre page web
Oien, retour au concret
&ous allons passer en revue les diffrentes balises "#$% permettant de saisir du texte dans
un formulaire
$ais cela ne suffit pas =l faut lier le label la )one de texte
>n na#e et un id sur le c(amp ; .ela ne va8t8il pas faire double emploi ;
!our lier le label au c(amp, il faut lui donner un attribut for qui a la m4me valeur que l'id du
c(amp9
le c(amp fait LN caract,res de long mais on ne peut crire que FN caract,res maximum
l'intrieur -
#este) la )one de mot de passe - vous verre) que les caract,res ne s'affic(ent pas l'cran
Vaisons un petit tour d'(ori)on !
'u mieux, vos visiteurs profiteront des nouvelles fonctionnalits, au pire, ils ne verront aucun
probl,me
3n pratique, il reste asse) peu mis en Iuvre par les navigateurs l'(eure actuelle
"#$% vous offre une ribambelle d'lments d'options utiliser dans votre formulaire
.rer une case coc(er ;
&ous * sommes presque
=l ne nous reste plus qu' agrmenter notre formulaire de quelques derni,res fonctionnalits
Dcomme la validationE, puis nous pourrons ajouter le bouton d'envoi du formulaire
.(aque <fieldset> peut contenir une lgende avec la balise <le"end>
=l ne nous reste plus qu' crer le bouton d'envoi
% encore, la balise <in!ut > vient notre secours
%e visiteur sera conduit la page indique dans l'attribut a%tion du formulaire
%orsque vous clique) sur le bouton 1 3nvo*er 2, le formulaire vous am,ne alors la page
indique dans l'attribut a%tion
=l est ncessaire d'apprendre un nouveau langage, comme le !"!, pour pouvoir 1 rcuprer 2
les informations saisies et dcider quoi en faire
=l faut dire que l'arrive du (aut dbit a aid dmocratiser les vidos sur le Ceb
=l fallait la place utiliser un plugin, comme Vlas(
3ncore aujourd'(ui, Vlas( reste de loin le mo*en le plus utilis pour regarder des vidos sur
[outube, <ail*motion, Vimeo et ailleurs
%orsque je vous ai prsent les images et la balise <i#" >, j'ai commenc par un petit tour
d'(ori)on des diffrents formats d'images DJ!3H, !&H, H=V, etcE
3n fait, le fonctionnement des vidos est m4me tellement complexe qu'on pourrait faire un
cours entier ce sujet !
%a plupart d'entre eux sont compresss Dcomme le sont les images J!3H, !&H et H=VE ce qui
permet de rduire leur poids -
MP# - vous ne pouve) pas ne pas en avoir entendu parler !
$$C - utilis majoritairement par 'pple sur i#unes, c'est un format de bonne qualit
%$& Dformat non compressE - vite) autant que possible de l'utiliser car le fic(ier est tr,s
volumineux avec ce format
'ucun navigateur ne g,re tous ces formats la fois
On reconna@t en gnral le t*pe de conteneur l'extension du fic(ier - 'V=, $!W, $^V9
3n fait, on peut l'utiliser gratuitement dans certains cas Dcomme la diffusion de vidos sur un
site web personnelE, mais il * a un flou juridique qui fait qu'il est risqu de l'utiliser tout va
% encore, vous alle) voir que c'est un jo*eux ba)ar -
% encore, aucun format ne sort du lot
% encore, vite) d'en abuser, c'est en gnral irritant d'arriver sur un site qui lance quelque
c(ose tout seul !
+ave)8vous quelle est la premi,re proccupation des webmasters qui mettent en place le
design de leur site ;
.omment votre site doit8il s'affic(er en fonction des diffrentes rsolutions d'cran ;
.'est l que les media queries entrent en jeu
.e sont des r,gles appliquer pour c(anger le design d'un site en fonction des
caractristiques de l'cran !
HrKce cette tec(nique, nous pourrons crer un design qui s'adapte automatiquement
l'cran de c(aque visiteur !
+i la rsolution de l'cran du visiteur est infrieure tant, alors applique les proprits .++
suivantes
Oon, c(anger la couleur du texte, c'est bien joli mais cela n'apporte pas grand8c(ose
%a page prendra alors tout l'espace disponible dans la fen4tre
.ela vite l'apparition de barres de dfilement (ori)ontales sur les petites rsolutions
Tegarde) par vous8m4mes le rsultat, la figure suivante parle d'elle8m4me !
'lors que ce cours touc(e sa fin, la tentation est grande de penser que l'on a tout vu
.e c(apitre a pour but de vous donner quelques directions pour complter votre
apprentissage
Voici quelques exemples de ce quoi peut servir Java+cript -
>n exemple cl,bre - Hoogle <ocs, la suite bureautique de Hoogle, disponible sur le Ceb
Dfigure suivanteE
Puelle diffrence cela fait8il que le programme tourne sur la mac(ine du visiteur ou sur le
serveur ;
$ais le Java+cript reste irrempla6able car il * a certaines actions que vous ne pouve) faire
que du cJt 1 visiteur 2
%es langages 1 cJt serveur 2 sont nombreux .itons8en quelques8uns -
'u dbut, il est un peu plus complexe prendre en main que !"!
<e cette mani,re, vous faites d'une pierre deux coups, vu que vous aure) de toute fa6on
besoin de l'(bergement et du nom de domaine
c'est de loin la solution la plus simple et la moins co5teuse pour vous
>n serveur ne poss,de pas d'cran car, la plupart du temps, il tourne tout seul sans qu'il * ait
besoin de faire quoi que ce soit dessus
.ela permet de les empiler dans des baies, c'est88dire une sorte d'armoire climatise pour
serveurs Dfigure suivanteE
.'est suffisant car on ne branc(e l'cran sur un serveur que si celui8ci rencontre un probl,me
%a plupart du temps, (eureusement, le serveur travaille sans bronc(er
%'(bergeur est une entreprise qui se c(arge de grer des baies de serveurs 3lle s'assure du
bon fonctionnement des serveurs MW(?MW, Zj?Z
%es datacenters sont donc en quelque sorte des 1 entrepJts serveurs 2 et leur acc,s est tr,s
protg
Oref, grer un serveur soi8m4me est complexe et, la plupart du temps, les particuliers et les
entreprises font appel un (bergeur dont c'est le mtier
Vous n'aure) que l'embarras du c(oix
+i vous le sou(aite), vous pouve) bien entendu recourir un autre (bergeur de votre c(oix
!our que nous so*ons sur la m4me longueur d'onde, je vais vous proposer celui que j'utilise,
qui est gratuit et en fran6ais - 'ile(illa Dfigure suivanteE
.e logiciel n'a rien avoir avec $o)illa, si ce n'est qu'il se termine lui aussi par 1 )illa 2
Puoiqu'il en soit, je vais vous montrer quelle est la marc(e suivre avec VileAilla
Puel que soit l'(bergeur que vous ave) c(oisi, cela fonctionne toujours de la m4me mani,re
$aintenant que nous sommes en possession de ces informations, nous allons les donner
VileAilla, qui en a besoin pour se connecter au serveur
>n de ces lments est incorrect, veille) les redemander votre (bergeur car s'ils sont
bons cela doit marc(er
Voil le scnario - vous travaille) d'arrac(e8pied sur le design de votre site web
3n effet, les navigateurs n'ont pas exactement le m4me rendu, m4me s'ils s'efforcent de suivre
les m4mes r,gles "#$% et .++
!lutJt que de cder la panique, ce c(apitre vous propose quelques mt(odes pour apprendre
grer ces diffrences entre navigateurs9 et obtenir le meilleur rsultat possible quel que
soit le navigateur
'vant d'entrer directement dans le vif du sujet, ce c(apitre va vous apprendre ce qu'est le
Javascript
=l est tr,s complet et facile utiliser, il va bien plus loin qu'un simple diteur de texte
classique !
.'est un outil tout8en8un qui g,re -
.ontrairement ce qu'on pourrait croire, Ceb$atrix g,re tr,s bien des tec(nologies Open
source comme PHP et M)S*L et il permet de dvelopper avec des .$+ Open source tels
que %ordpress, +oomla, ,rupal
Pu'est8ce qu'on peut faire avec ;
&ous allons l'installer et faire un tour d'(ori)on du logiciel, puis crer un premier projet web
Ceb$atrix est un outil tout8en8un destin aux dveloppeurs de sites web qui programment en
"#$%, .++, !"!, '+! &3#, etc
=l a t cr pour prendre en compte la plupart des besoins courants des dveloppeurs web-
=l n'est pas ncessaire de jongler entre plusieurs logiciels
Ceb$atrix unifie plusieurs outils dj existants, d'accord, mais qu'apporte8t8il part 6a ;
=nstaller Ceb$atrix est tout ce qu'il * a de plus simple
Tende)8vous sur le site de Ceb$atrix et clique) sur \#lc(arger\
Ceb$atrix est vraiment tr,s simple prendre en main, vous alle) voir !
&ous allons ici faire un petit tour du logiciel pour que vous a*e) un aper6u de l'ensemble de
ses fonctionnalits, puis nous crerons un premier projet pour clore ce c(apitre de
prsentation
Utilisez-le si vous avez besoin de crer un site dot de nombreuses fonctionnalits
rapidement.
Pue d'informations sur cette fen4tre !
Pue faut8il retenir ;
%a )one centrale contient de nombreux liens qui am,nent diffrentes parties du logiciel,
mais vous pouve) * accder aussi en passant par les menus
+i vous clique) sur \<emandes\, vous vo*e) s'affic(er dans Ceb$atrix un rsum des
derni,res demandes re6ues par le serveur web -
!our comprendre comment crer un projet Ceb$atrix de ' A, le mieux est encore de faire
6a ensemble avec un exemple !
$ais par oY faut8il commencer ;
)*+,--
wordpressFMW
)*+./0,--
wordpressuserFMW
)*+12-
_bwvx;fbo_VV
=l semble * avoir premi,re vue beaucoup d'informations, ne vous laisse) pas surprendre
<ans le cas contraire, nous vous conseillons l'indmodable &otepadQQ pour Cindows,
l`ternel Vim pour %inux et le performant #extCrangler pour $ac
&e drogeons pas la r,gle traditionnelle qui veut que tous les tutoriels de programmation
commencent par affic(er le texte 1 "ello Corld! 2 D1 Oonjour le monde ! 2 en fran6aisE
l'utilisateur
<ans le code "#$% donn prcdemment, on remarque quelques nouveauts
#out d'abord, un lment <s%ri!t> est prsent - c'est lui qui contient le code Javascript que
voici -
%es langages de programmation sont constitus d'une suite d'instructions qui, mises bout
bout, permettent d'obtenir un programme ou un script complet
&e vous en faites pas pour le vocabulaire .ette notion de fonction sera vue en dtail par la
suite
$ais attention ! &e pas mettre les points8virgules est considr comme une mauvaise
pratique
.ela veut dire que vous pouve) aligner des instructions comme vous le voule), sans que cela
ne g4ne en rien l'excution du script
=l n'* a pas de r,gles prdfinies comme pour l'criture des lettres, donc il faudra vous
arranger pour organiser votre code de fa6on claire
Harde) l'esprit que votre code doit 4tre propre, m4me si vous 4tes le seul * touc(er -
vous pouve) laisser le code de cJt quelques temps et le reprendre par la suite, et l, bonne
c(ance pour vous * retrouver
%es commentaires sont des annotations faites par le dveloppeur pour expliquer le
fonctionnement d'un script, d'une instruction ou m4me d'un groupe d'instructions
%e texte plac dans un commentaire est ignor lors de l'excution du script, ce qui veut dire
que vous pouve) mettre ce que bon vous semble en commentaire, m4me une instruction
.e t*pe de commentaires permet les retours la ligne
>ne fonction se compose de deux c(oses - son nom, suivi d'un couple de parent(,ses Dune
ouvrante et une fermanteE -
=l vaut mieux privilgier un fic(ier externe plutJt que d'inclure le code Javascript directement
dans la page
!our pallier ce probl,me, il est conseill de placer les lments <s%ri!t> juste avant la
fermeture de l`lment <bod'>
=l est noter que certains navigateurs modernes c(argent automatiquement les fic(iers
Javascript en dernier, mais ce n'est pas toujours le cas
.'est pour cela qu'il vaut mieux s'en tenir cette mt(ode
!endant la lecture de ce cours, il se peut que vous a*e) besoin de plus de renseignements sur
diverses c(oses abordes R
!ar moment vous aure) besoin d'crire des c(oses de ce genre -
.e n'est pas spcialement long ou compliqu faire, mais cela peut devenir tr,s vite
rbarbatif
>ne concatnation consiste ajouter une c(a@ne de caract,res la fin d'une autre
%a concatnation est le bon moment pour introduire votre toute premi,re interaction avec
l'utilisateur grKce la fonction !ro#!t34
: noter que dans notre cas de figure actuel, nous concatnons des c(a@nes de caract,res entre
elles, mais sac(e) que vous pouve) tr,s bien concatner une c(a@ne de caract,res et un
nombre de la m4me mani,re -
<u coup, si vous utilise) l'oprateur Q, vous ne fere) pas une addition mais une concatnation
!
.'est l que la conversion des t*pes intervient
=l existe une solution un peu moins arc(aaque que de rajouter une c(a@ne vide mais vous la
dcouvrire) plus tard
#out d'abord, de quoi sont constitues les conditions ;
.omme leur nom l'indique, ces oprateurs vont permettre de comparer diverses valeurs entre
elles
3n tout, ils sont au nombre de (uit, les voici -
%orsqu'une condition renvoie true on dit qu'elle est vrifie
Voil tout pour les oprateurs de comparaison, vous ave) tous les outils dont vous ave)
besoin pour faire quelques exprimentations
!assons maintenant la suite
!ourquoi ces oprateurs sont8ils nomms comme tant 1 logiques 2 ;
.ar ils fonctionnent sur le m4me principe qu'une table de vrit en lectronique
'vant de dcrire leur fonctionnement, il nous faut d'abord les lister, ils sont au nombre de
trois -
.et oprateur se diffrencie des deux autres car il ne prend qu'une seule valeur la fois
+'il se nomme 1 &O& 2 c'est parce que sa fonction est d'inverser la valeur qui lui est passe,
ainsi true deviendra false et inversement
#outefois, avant de passer la suite, il faudrait s'assurer que vous a*e) bien compris que tous
les oprateurs que nous venons de dcouvrir peuvent se combiner entre eux
=l est bien entendu possible de raccourcir le code en combinant tout 6a sur une seule ligne,
dornavant toutes les conditions seront sur une seule ligne dans ce tutoriel -
Voil tout pour les boolens et les oprateurs conditionnels, nous allons enfin pouvoir
commencer utiliser les conditions comme il se doit
$aintenant, il serait bien que ce rsultat puisse influer sur l'excution de votre code
&ous allons tout de suite entrer dans le vif du sujet avec un exemple tr,s simple -
#out d'abord, vo*ons de quoi est constitu une condition -
3n clair - dans le premier cas la fonction renvoie true et dans le deuxi,me cas elle renvoie
false
'pr,s ce petit interm,de nous pouvons revenir nos conditions
%e plus gros probl,me est de devoir rcrire c(aque fois la condition R
Oref, les ternaires c'est bon, mange)8en ! $ais pas jusqu' l'indigestion !
Vous deve) fournir un commentaire sur quatre tranc(es d'Kge diffrentes qui sont les
suivantes -
%es programmeurs sont rputs pour 4tre des gens fainants, ce qui n'est pas totalement faux
puisque le but de la programmation est de faire excuter des c(oses un ordinateur, pour ne
pas les faire nous8m4mes
.e c(apitre va mettre en lumi,re ce comportement intressant - nous allons en effet voir
comment rpter des actions, pour ne pas crire plusieurs fois les m4mes instructions
$ais avant 6a, nous allons aborder le sujet de l'incrmentation
%'incrmentation permet d'ajouter une unit un nombre au mo*en d'une s*ntaxe courte
: l'inverse, la dcrmentation permet de soustraire une unit
=l existe deux mani,res d'utiliser l'incrmentation en fonction de la position de l'oprateur QQ
Dou 88E
Puelle est donc la diffrence entre les deux procds ;
%a diffrence rside en fait dans la priorit de l'opration, et 6a a de l'importance si vous
voule) rcuprer le rsultat de l'incrmentation
%a rptition se fait jusqu' ce qu'on dise la boucle de s'arr4ter
: c(aque fois que la boucle se rp,te on parle d'itration Dqui est en fait un s*non*me de
rptitionE
#ant que celle8ci est vraie DtrueE, la boucle se rp,te <,s que la condition est fausse DfalseE,
la boucle s'arr4te
%a boucle $hile se rp,te tant que la condition est valide
.ela veut donc dire qu'il faut s'arranger, un moment, pour que la condition ne soit plus
vraie, sinon la boucle se rpterait l'infini, ce qui serait fKc(eux
3n guise d'exemple, on va incrmenter un nombre, qui vaut F, jusqu' ce qu'il vaille FN -
+eulement, comment savoir l'avance le nombre de fr,res et sIurs ;
%a boucle for ressemble dans son fonctionnement la boucle $hile, mais son arc(itecture
para@t complique au premier abord
>ne fois que cette boucle est ma@trise, il * a fort parier que c'est celle8ci que vous utilisere)
le plus souvent
.es trois blocs sont spars par un point8virgule R c'est un peu comme si les parent(,ses
contenaient trois instructions distinctes
Voici un c(apitre tr,s important, tant par sa longueur que par les connaissances qu'il permet
d'acqurir !
3n les utilisant, vous ave) pu constater que c(acune de ces fonctions avait pour but de mener
bien une action prcise, reconnaissable par un nom explicite Den anglais 6a l'est en tous les
casE
!our faire simple, si l'on devait associer une fonction un objet de la vie de tous les jours, ce
serait le moteur d'une voiture -
vous tourne) juste la cl pour dmarrer le moteur et celui8ci fait dplacer tout son mcanisme
pour renvo*er sa force motrice vers les roues
.ela rduit considrablement votre code et le simplifie d'autant plus !
On ne va pas * aller par quatre c(emins, voici comment crire une fonction -
<cortiquons un peu tout 6a et anal*sons un peu ce que nous pouvons lire dans ce code -
%e mot8cl fun%tion est prsent c(aque dclaration de fonction
Vient ensuite le nom de votre fonction, ici #'5un%tion R
+'ensuit un couple de parent(,ses contenant ce que l'on appelle des arguments
3t vient enfin un couple d'accolades contenant le code que votre fonction devra excuter
.omme nous le disions plus (aut, l'intr4t d'une fonction rside notamment dans le fait de ne
pas avoir rcrire plusieurs fois le m4me code
&ous allons ici tudier un cas intressant oY l'utilisation d'une fonction va se rvler utile -
Voil l'utilit basique des fonctions - viter la rptition d'un code $ais leur utilisation peut
4tre largement plus pousse, continuons donc sur notre lance !
<erri,re ce titre se cac(e un concept asse) simple comprendre mais pas forcment simple
mettre en pratique car il est facile d'4tre induit en erreur si on ne fait pas attention
#out d'abord, nous allons commencer par faire un constat asse) flagrant l'aide de deux
exemples -
=l s'est produit ce que l'on appelle une erreur - en clair, le code s'est arr4t car il n'est pas
capable d'excuter ce que vous lui ave) demand
.omme je vous le disais, une erreur s'est dclenc(e, mais comment avons8nous pu le
savoir ;
.rer des scripts para@t facile au premier abord, mais on finit toujours par tomber sur le m4me
probl,me - notre code ne fonctionne pas !
On peut alors dire qu'il * a un bug, en clair il * a une erreur dans le code qui fait qu'il
s'excute mal ou ne s'excute tout simplement pas
: l'inverse des variables locales, celles dclares en8de(ors d'une fonction sont nommes les
variables globales car elles sont accessibles partout dans votre code, * compris l'intrieur
de vos fonctions
: ce propos, qu'est8ce qui se produirait si je crais une variable globale nomme #essa"e et
une variable locale du m4me nom ;
.omme vous pouve) le constater, quand on excute la fonction, la variable locale prend le
dessus sur la variable globale de m4me nom pendant tout le temps de l'excution de la
fonction
$ais une fois la fonction termine Det donc, la variable locale dtruiteE c'est la variable
globale qui reprend ses droits
$aintenant que vous save) faire la diffrence entre les variables globales et locales, il vous
faut savoir quand est8ce qu'il est bon d'utiliser l'une ou l'autre
!ar principe, cette fa6on de faire est stupide - vu que ces variables ne servent qu' la fonction
%al%ulate34, autant les dclarer dans la fonction de la mani,re suivante -
Juste un petit avertissement - beaucoup de personnes rKlent sous prtexte que certains codes
contiennent des variables globales
=l suffit juste de savoir s'en servir bon escient
3t pour que vous arrivie) vous en servir correctement, il vous faut pratiquer
.ela peut vous para@tre simple au premier abord mais il est facile de se faire piger
=ls permettent de faire communiquer vos fonctions avec le reste de votre code
.eci est parfaitement normal, faisons un rcapitulatif de l'ordre d'excution de ce code -
+i nous avons tudi dans la partie prcdente la porte des variables ce n'est pas pour rien -
cette porte s'applique aussi aux arguments
.e fonctionnement est exactement le m4me que lorsque vous cre) vous8m4mes une variable
dans la fonction -
elle ne sera accessible que dans cette fonction et nulle part ailleurs
%es arguments sont propres leur fonction, ils ne serviront aucune autre fonction
&ous vous conseillons de modifier la prsentation quand le besoin s'en fait ressentir
!our notre part, nous aurions plutJt tendance crire cette ligne de cette mani,re -
$ais, dans le fond, quoi peut bien servir un argument facultatif ;
3t c'est l que l'argument facultatif entre en sc,ne !
>n argument facultatif est videmment facultatif De( oui !E mais doit gnralement possder
une valeur par dfaut dans le cas oY l'argument n'a pas t rempli, dans notre cas ce sera
false
!etit pi,ge viter - inversons le positionnement des arguments de notre fonction %e second
argument passe en premier et vice8versa
'lors quelle solution existe8t8il donc pour rsoudre ce probl,me ;
'ucune ! Vous deve) imprativement mettre les arguments facultatifs de votre fonction en
derni,re position, vous n'ave) pas le c(oix
=l est possible de contourner lg,rement le probl,me en renvo*ant un tableau ou un objet,
mais vous tudiere) le fonctionnement de ces deux lments dans les c(apitres suivants, nous
n'allons pas nous * attarder dans l'immdiat
.ela s'explique par la prsence du return - cette instruction met fin la fonction, puis
retourne la valeur
.e fonctionnement explique d'ailleurs pourquoi on ne peut pas faire plusieurs renvois de
valeurs pour une m4me fonction -
Je vous conseille de vous entra@ner vous en servir car elles sont tr,s utiles !
#oujours est8il qu'il vaut mieux commencer apprendre vous en servir tout de suite
.ependant, dans l'tat actuel de vos connaissances, nous devons nous limiter une seule
solution - assigner notre fonction une variable
&ous verrons les autres solutions au fil des c(apitres suivants Dnous vous avions bien dit que
vous ne saurie) pas encore exploiter tout le potentiel de ces fonctionsE
'insi, il ne nous reste plus qu' appeler notre fonction par le biais du nom de la variable
laquelle nous l'avons affecte -
3n ralit, ce n'est pas le cas, nous devrions plutJt parler de rfrence, mais nous nous
penc(erons sur ce concept plus tard
.e principe peut s'apparenter au s*st,me de sandbox mais en beaucoup moins pouss
<couvrons tout cela au travers de quelques exemples !
=l est vrai que ce code peut drouter un petit peu au premier abord, nous allons donc vous
expliquer 6a pas pas
: titre d'information, sac(e) que ces fonctions immdiatement excutes se nomment des
mmediatel! "xecuted #unctions, abrges =3V &ous utiliserons cette abrviation
dornavant
3t pense) bien vous exercer entre temps !
=l s'agit ici du dernier gros c(apitre de la premi,re partie de ce cours, accroc(e)8vous !