6
Maîtrise des CSS
ce.que.vous.allez.apprendre.ne.peut.se.faire.(ou.alors.très.difficilement).sans.que.vous.ayez.
un.document.HTML.valide.et.bien.structuré..
À.cette.section,.vous.allez.voir.pourquoi.le.HTML.clair.et.bien.structuré.est.essentiel.pour.
le. développement. de. sites. compatibles. avec. les. standards.. Vous. verrez. également. comment. intégrer. d’autres. informations. à. vos. documents. et,. ce. faisant,. comment. faciliter. le.
développement..
Historique rapide du balisage
À.ses.débuts,.le.Web.n’était.guère.plus.qu’un.amas.de.documents.de.recherche,.reliés.les.uns.
aux.autres.par.du.code.HTML.servant.à.les.mettre.en.forme.et.à.les.structurer.simplement..
Cependant,.quand.sa.popularité.s’est.accrue,.il.a.été.utilisé.par.les.développeurs.à.des.fins.de.
présentation..Au.lieu.de.se.servir.des.éléments.de.titre.pour.les.titres.des.pages,.ils.ont.voulu.
recourir. à. des. combinaisons. de. balises. de. police. et. de. style. pour. créer. différentes. sortes.
d’effets.visuels..Les.tableaux,.d’abord.employés.pour.l’affichage.des.données,.sont.rapidement.devenus.des.outils.de.mise.en.page.tandis.que.les.instructions.blockquote.ont.servi.
à.insérer.des.espaces.blancs.au.lieu.de.signaler.la.présence.de.citations..Très.vite,.le.Web.a.
perdu.tout.son.sens.et.s’est.transformé.en.un.véritable.salmigondis.de.balises.de.polices.et.
de.tableaux..Les.concepteurs.web.ont.même.forgé.une.expression.pour.désigner.ce.type.de.
balisage :.la."soupe.à.balises".(voir.Figure 1.1)..
Figure 1.1
Le balisage de l’article
à la une d’abcnews.
com, le 14 août 2000,
utilise des tableaux
pour la mise en forme
et du texte en gras et
très grand pour les
titres. Le code manque
de structure et est
difficile à comprendre.
À.force.d’être.orienté.sur.la.présentation,.le.code.des.pages.web.est.devenu.de.plus.en.plus.
difficile.à.comprendre.et.à.gérer..Les.éditeurs.WYSIWYG.(What You See Is What You Get,.
littéralement :."Ce.que.vous.voyez,.c’est.ce.que.vous.obtenez").offrirent.aux.auteurs.une.
échappatoire.en.mettant.à.leur.disposition.des.outils.de.mise.en.page.visuels..Mais.au.lieu.
de.simplifier.les.choses,.ces.outils.ont.contribué.à.les.compliquer.encore,.en.produisant.leur.
propre.tambouille.de.balises..Les.éditeurs.comme.FrontPage.ou.Dreamweaver.permirent.de.
créer.des.tableaux.de.mise.en.page.complexes.en.un.clic,.mais.en.truffant.le.code.de.tableaux.
imbriqués.et.de.GIF.d’espacement.(voir.Figure 1.2)..Ces.mises.en.page.étaient.extrêmement.
fragiles.et.menaçaient.de.dysfonctionner.au.moindre.mouvement..Comme.le.balisage.était.
bourré. de. code. insensé,. on. se. retrouvait. fréquemment. à. effacer. des. balises. par. inadvertance..À la.manière.d’un.mur.dont.on.retirerait.la.brique.du.bas,.c’est.alors.toute.la.mise.en.
page.qui.s’effondrait..En.outre,.avec.un.code.aussi.complexe,.la.recherche.des.bogues.était.
presque.impossible..Il.était.souvent.plus.simple.de.reprogrammer.complètement.la.page.que.
Maîtrise des CSS
ce.que.vous.allez.apprendre.ne.peut.se.faire.(ou.alors.très.difficilement).sans.que.vous.ayez.
un.document.HTML.valide.et.bien.structuré..
À.cette.section,.vous.allez.voir.pourquoi.le.HTML.clair.et.bien.structuré.est.essentiel.pour.
le. développement. de. sites. compatibles. avec. les. standards.. Vous. verrez. également. comment. intégrer. d’autres. informations. à. vos. documents. et,. ce. faisant,. comment. faciliter. le.
développement..
Historique rapide du balisage
À.ses.débuts,.le.Web.n’était.guère.plus.qu’un.amas.de.documents.de.recherche,.reliés.les.uns.
aux.autres.par.du.code.HTML.servant.à.les.mettre.en.forme.et.à.les.structurer.simplement..
Cependant,.quand.sa.popularité.s’est.accrue,.il.a.été.utilisé.par.les.développeurs.à.des.fins.de.
présentation..Au.lieu.de.se.servir.des.éléments.de.titre.pour.les.titres.des.pages,.ils.ont.voulu.
recourir. à. des. combinaisons. de. balises. de. police. et. de. style. pour. créer. différentes. sortes.
d’effets.visuels..Les.tableaux,.d’abord.employés.pour.l’affichage.des.données,.sont.rapidement.devenus.des.outils.de.mise.en.page.tandis.que.les.instructions.blockquote.ont.servi.
à.insérer.des.espaces.blancs.au.lieu.de.signaler.la.présence.de.citations..Très.vite,.le.Web.a.
perdu.tout.son.sens.et.s’est.transformé.en.un.véritable.salmigondis.de.balises.de.polices.et.
de.tableaux..Les.concepteurs.web.ont.même.forgé.une.expression.pour.désigner.ce.type.de.
balisage :.la."soupe.à.balises".(voir.Figure 1.1)..
Figure 1.1
Le balisage de l’article
à la une d’abcnews.
com, le 14 août 2000,
utilise des tableaux
pour la mise en forme
et du texte en gras et
très grand pour les
titres. Le code manque
de structure et est
difficile à comprendre.
À.force.d’être.orienté.sur.la.présentation,.le.code.des.pages.web.est.devenu.de.plus.en.plus.
difficile.à.comprendre.et.à.gérer..Les.éditeurs.WYSIWYG.(What You See Is What You Get,.
littéralement :."Ce.que.vous.voyez,.c’est.ce.que.vous.obtenez").offrirent.aux.auteurs.une.
échappatoire.en.mettant.à.leur.disposition.des.outils.de.mise.en.page.visuels..Mais.au.lieu.
de.simplifier.les.choses,.ces.outils.ont.contribué.à.les.compliquer.encore,.en.produisant.leur.
propre.tambouille.de.balises..Les.éditeurs.comme.FrontPage.ou.Dreamweaver.permirent.de.
créer.des.tableaux.de.mise.en.page.complexes.en.un.clic,.mais.en.truffant.le.code.de.tableaux.
imbriqués.et.de.GIF.d’espacement.(voir.Figure 1.2)..Ces.mises.en.page.étaient.extrêmement.
fragiles.et.menaçaient.de.dysfonctionner.au.moindre.mouvement..Comme.le.balisage.était.
bourré. de. code. insensé,. on. se. retrouvait. fréquemment. à. effacer. des. balises. par. inadvertance..À la.manière.d’un.mur.dont.on.retirerait.la.brique.du.bas,.c’est.alors.toute.la.mise.en.
page.qui.s’effondrait..En.outre,.avec.un.code.aussi.complexe,.la.recherche.des.bogues.était.
presque.impossible..Il.était.souvent.plus.simple.de.reprogrammer.complètement.la.page.que.