8
Maîtrise des CSS
C’est.dans.cet.état.de.marasme.complet.que.sont.arrivées.les.feuilles.de.styles.CSS..Elles.
offraient.aux.utilisateurs.la.possibilité.de.contrôler.l’apparence.des.pages.avec.des.feuilles.
de.styles.externes.et.donc.de.séparer.le.contenu.de.la.présentation..Des.changements.portant.
sur.tout.le.site.pouvaient.ainsi.s’effectuer.à.un.seul.et.unique.endroit.et.se.trouver.propagés.
dans.tout.le.système..Les.balises.de.présentation.comme.les.balises.de.police.furent.abandonnées.et.la.mise.en.page.fut.contrôlée.avec.des.CSS.et.non.des.tableaux..Le.balisage.put.
alors. retrouver. sa. simplicité. d’origine. et. l’on. commença. à. retrouver. de. l’intérêt. au. code.
sous-jacent.
La.signification.des.éléments.a.pu.naturellement.retrouver.sa.place.au.sein.des.documents..
Les.styles.par.défaut.des.navigateurs.pouvant.être.redéfinis,.il.était.possible.de.baliser.un.
élément.afin.d’indiquer.qu’il.s’agissait.d’un.titre,.sans.nécessairement.avoir.à.le.rendre.gros,.
gras.et.très.moche..On.put.créer.des.listes.sans.se.retrouver.avec.des.puces.et.des.balises.
de.citation.et.être.instantanément.punis.par.leur.habituel.effet.de.mise.en.forme..Les.développeurs.commencèrent.alors.à.utiliser.les.éléments.HTML.pour.ce.qu’ils.signifiaient.et.non.
pour.l’apparence.qu’ils.permettaient.d’obtenir.(voir.Figure 1.3)..
Figure 1.3
Le balisage de l’article à
la une sur abcnews.
com tel qu’on pouvait
le voir cette année est
bien structuré et facile à
comprendre. S’il contient
encore quelques
balises de présentation,
l’amélioration est
considérable par rapport
au code de la Figure 1.1.
Importance de la signification
tants..Les.pages.dites."sémantiques".sont.plus.faciles.à.gérer.que.les.simples.pages.de.présentation..Supposons.ainsi.que.vous.deviez.modifier.une.citation.dans.une.page..Si.cette.
citation.est.correctement.balisée,.vous.pouvez.aisément.parcourir.le.code.jusqu’au.premier.
élément.blockquote..Si.la.citation.est.un.élément.de.paragraphe.comme.les.autres,.elle.est.
en.revanche.bien.plus.difficile.à.trouver..Considérons.un.exemple.plus.complexe,.mais.pas.
moins.réaliste :.vous.devez.ajouter.une.colonne.à.votre.page.d’accueil..Avec.les.CSS,.vous.
n’aurez.qu’à.déposer.le.contenu.au.bon.endroit.puis.à.mettre.à.jour.les.largeurs.des.colonnes.
dans.le.fichier.CSS..Pour.obtenir.le.même.résultat.dans.une.maquette.tabulaire,.il.faut.ajouter.une.colonne.au.tableau,.modifier.les.valeurs.colspan.des.précédentes.colonnes,.altérer.
les.largeurs.de.toutes.les.cellules.et.modifier.les.largeurs.de.toutes.les.images.GIF.d’espacement..Toute.la.structure.de.la.page.doit.être.modifiée.pour.s’adapter.à.ce.simple.changement..
En.plus.d’être.simple.à.comprendre.par.les.hommes,.le.balisage.sémantique.peut.être.compris.
par.les.programmes.ou.d’autres.machines..Les.moteurs.de.recherche,.par.exemple,.peuvent.
Maîtrise des CSS
C’est.dans.cet.état.de.marasme.complet.que.sont.arrivées.les.feuilles.de.styles.CSS..Elles.
offraient.aux.utilisateurs.la.possibilité.de.contrôler.l’apparence.des.pages.avec.des.feuilles.
de.styles.externes.et.donc.de.séparer.le.contenu.de.la.présentation..Des.changements.portant.
sur.tout.le.site.pouvaient.ainsi.s’effectuer.à.un.seul.et.unique.endroit.et.se.trouver.propagés.
dans.tout.le.système..Les.balises.de.présentation.comme.les.balises.de.police.furent.abandonnées.et.la.mise.en.page.fut.contrôlée.avec.des.CSS.et.non.des.tableaux..Le.balisage.put.
alors. retrouver. sa. simplicité. d’origine. et. l’on. commença. à. retrouver. de. l’intérêt. au. code.
sous-jacent.
La.signification.des.éléments.a.pu.naturellement.retrouver.sa.place.au.sein.des.documents..
Les.styles.par.défaut.des.navigateurs.pouvant.être.redéfinis,.il.était.possible.de.baliser.un.
élément.afin.d’indiquer.qu’il.s’agissait.d’un.titre,.sans.nécessairement.avoir.à.le.rendre.gros,.
gras.et.très.moche..On.put.créer.des.listes.sans.se.retrouver.avec.des.puces.et.des.balises.
de.citation.et.être.instantanément.punis.par.leur.habituel.effet.de.mise.en.forme..Les.développeurs.commencèrent.alors.à.utiliser.les.éléments.HTML.pour.ce.qu’ils.signifiaient.et.non.
pour.l’apparence.qu’ils.permettaient.d’obtenir.(voir.Figure 1.3)..
Figure 1.3
Le balisage de l’article à
la une sur abcnews.
com tel qu’on pouvait
le voir cette année est
bien structuré et facile à
comprendre. S’il contient
encore quelques
balises de présentation,
l’amélioration est
considérable par rapport
au code de la Figure 1.1.
Importance de la signification
tants..Les.pages.dites."sémantiques".sont.plus.faciles.à.gérer.que.les.simples.pages.de.présentation..Supposons.ainsi.que.vous.deviez.modifier.une.citation.dans.une.page..Si.cette.
citation.est.correctement.balisée,.vous.pouvez.aisément.parcourir.le.code.jusqu’au.premier.
élément.blockquote..Si.la.citation.est.un.élément.de.paragraphe.comme.les.autres,.elle.est.
en.revanche.bien.plus.difficile.à.trouver..Considérons.un.exemple.plus.complexe,.mais.pas.
moins.réaliste :.vous.devez.ajouter.une.colonne.à.votre.page.d’accueil..Avec.les.CSS,.vous.
n’aurez.qu’à.déposer.le.contenu.au.bon.endroit.puis.à.mettre.à.jour.les.largeurs.des.colonnes.
dans.le.fichier.CSS..Pour.obtenir.le.même.résultat.dans.une.maquette.tabulaire,.il.faut.ajouter.une.colonne.au.tableau,.modifier.les.valeurs.colspan.des.précédentes.colonnes,.altérer.
les.largeurs.de.toutes.les.cellules.et.modifier.les.largeurs.de.toutes.les.images.GIF.d’espacement..Toute.la.structure.de.la.page.doit.être.modifiée.pour.s’adapter.à.ce.simple.changement..
En.plus.d’être.simple.à.comprendre.par.les.hommes,.le.balisage.sémantique.peut.être.compris.
par.les.programmes.ou.d’autres.machines..Les.moteurs.de.recherche,.par.exemple,.peuvent.