Le W3C (Initiation au HTML – Annexe III)

Le Word Wild Web Consortium est un regroupement de personnes et d’organisation qui, ensemble, mettent au point les normes pour le développement web : les standards du web.


Initiation au HTML – Plan de l’article complet

Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)

Ouverture / fermeture

Une page HTML contient nécessairement certains éléments :

  • les balises qui indiquent que l’on va « parler » en HTML

<html>

</html>

Elles encapsulent la totalité du HTML.

  • la section qui contient les informations non affichées mais nécessaires au navigateur

<head>

</head>

Elles encapsulent des informations telles que le titre de la page, la description de la page, les mots-clé, l’encodage utilisé, la langue, la favicon, etc.

On y trouve aussi certains appels aux autres « couches » de la page : feuille de style, script Javascript, etc.

  • la section visible par le navigateur

<body>

</body>

C’est dans cette section que ce trouve tout ce qui peut être vu/lu par l’internaute ; tout ce qui s’adresse à lui.

Le doctype

Le doctype fait partie des éléments obligatoires sur une page HTML. Il indique quelle est la « grammaire » utilisée : la version de (X)HTML et le lien vers la grammaire en question, sur le site du W3C. Il se situe donc juste avant la balise qui indique le début de HTML.

Par exemple, de Doctype pour indiquer qu’on utilise du XHTML 1.0 Strict est :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Initiation au HTML – Plan de l’article complet

Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)

XHTML a été créé pour permettre d’utiliser HTML en conformité avec un autre langage : le XML.
Les différences de syntaxe ou de structure entre XHTML et HTML sont minimes et concernent uniquement l’intégrateur.
D’un point de vue utilisateur, c’est totalement transparent.


Initiation au HTML – Plan de l’article complet

Le langage HTML (Initiation au HTML 3/5)

HTML et les autres éléments d’une page

La séparation des différents éléments

Une page web est un ensemble de « couches » d’éléments qui, combinés ensemble, font la totalité de la page : texte, design, fonctionnalités, interactivité, etc.
Chacun de ses aspects est traité indépendamment les uns des autres par différents langages.

La structure de l’information est gérée par le HTML.

La mise en forme (couleurs, typographies, emplacements des éléments, etc.) est traitée par les feuilles de style (CSS).

Certains comportements destinés à amener une « couche de confort » (ouverture dans une nouvelle fenêtre, apparition/disparition de texte, etc) sont traiter par le Javascript.

Enfin, dans le cas de traitement de données importantes (simulation en ligne, formulaire de demande, etc.), on utilise un langage de développement ; le PHP par exemple.

Le rôle du HTML : structurer le contenu

Le langage HTML est un langage de structuration : cela veut dire qu’il indique pour chaque information donnée dans la page, le type d’information dont il s’agit : paragraphe, lien, image, citation, adresse, etc.

A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).
A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).

Le code

Les outils

Les outils du développeur sont :

  • un éditeur. Cela peut être un simple éditeur de texte ou un logiciel type « WYSIWYG » : What You See Is What You Get.
  • dans l’idéal, des plateformes de test. Pour pouvoir tester ses pages dans différentes configuration
  • dans la plupart des cas, un logiciel FTP. Pour envoyer les fichiers créés à disposition sur le serveur, pour les mettre « en ligne ».

Un langage de balises

Le HTML est composé avec des balises. Les balises sont des éléments encadrant le contenu. Elles indiquent le type d’information donnée (titre, paragraphe, image, liste, etc). Elles permettent de structurer la page et d’indiquer le type d’information.

Ex :
&lt;p&gt;Cette balise indique un paragraphe.&lt/p&gt;

Ce qui donne, dans la page :
Cette balise indique un paragraphe.

Une balise HTML est un élément de la grammaire HTML (de la « langue » HTML). La balise marche par paire : une balise ouvrante, une balise fermante. Entre les deux balises, se place le contenu.

Aperçu du code de la même section de page
Aperçu du code de la même section de page

Les attributs

Une balise HTML indique donc le type d’information qu’elle délivre. La balise peut ensuite être « paramétrée » par des éléments supplémentaires : les attributs.

Par exemple, pour indiquer un lien, on utilise la balise <a>. Mais signaler que le texte qui est encapsuler dans la balise <a> est un lien ne suffit pas. D’autres renseignements sont nécéssaires, comme par exemple la cible du lien. On utilise alors les attributs de la balises : « href » pour la destination du lien, « title » pour le titre du lien (info-bulle).

Ex :

&lt;a href=”http://www.nissone.com/” title=”Conception de sites web”&gt;Nissone.com&lt;/a&gt;

Ce qui donne dans la page :

Nissone.com


Initiation au HTML – Plan de l’article complet

Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)

Les pages statiques sont des pages qui sont créées « en dur ». La page est créée telle qu’elle apparaît à l’écran. Le HTML est un langage statique.

Les pages dynamiques sont des pages qui se fabriquent en fonction d’un élément extérieur (une demande, l’heure, le nombre de visiteurs, etc). Le PHP, par exemple, est un langage dynamique qui permet de créer dynamiquement du code HTML.

Imaginons, par exemple, le site d’un éditeur. Une page permet de voir la liste des auteurs en fonction de la première lettre de leur nom.
Si le développeur utilise un langage statique, il doit créer 26 pages, pour les 26 lettres de l’alphabet.
Si le langage utilisé est dynamique, le développeur crée une seule page. Cette page se construit alors dynamiquement en adoptant le comportement suivant :
Si la lettre demandée est « A », rechercher le premier auteur dont le nom commence par « A » dans une liste indiquée (une base de données, par exemple) et l’afficher ; puis, rechercher le second auteur dont le nom commence par « A » et l’afficher. Et ainsi de suite jusqu’à ce qu’il n’y en ait plus.


Initiation au HTML – Plan de l’article complet

HTML et Internet (Initiation au HTML 2/5)

Historique

Internet a initialement été créé par les militaires américains dans les années 60 afin de partager des informations sur un réseau. Internet est ensuite passé dans le domaine universitaire avant de s’ouvrir tel qu’on l’on connaît actuellement : un réseau international accessible à tous.
Il s’agit en fait d’un réseau d’ordinateurs qui hébergent les pages web (les serveurs) qui sont connectés les uns aux autres.

HTML est l’acronyme de Hyper Text Markup Language, soit un langage de marquage hypertexte.
Ce langage a été crée afin de structurer les informations mise à disposition sur Internet.
Sa particularité est certainement le lien hypertexte qui permet de passer d’une page à l’autre en cliquant sur des mots-clé.

L’environnement

L’environnement utilisateur

Le lecteur d’un site Internet a besoin de plusieurs outils pour accéder à une page :

  • un modem. Il peut être bas-débit (jusqu’à 28k) ou haut-débit (ADSL) et jusqu’à très haut-débit (20 M, par exemple).
  • un agent utilisateur. C’est-à-dire, le logiciel qui reçoit les pages et est capable de les interpréter et les afficher. Internet Explorer ou Safari, par exemple.
  • un système d’exploitation, dans lequel est installé l’agent utilisateur
  • une machine : ordinateur, PDA, mobile…
Exemples d’environnement client
Exemples d’environnement client

L’environnement du client auquel on s’adresse peut donc se présenter sous différentes combinaisons : bas-débit / Internet Exploreur / PDA, haut-débit / Safari / ordinateur, etc.

Il faut rajouter à cela le nombre de couleurs que l’écran affiche, la résolution, l’activation ou non du son. Sans compter les particularités de l’internaute : mauvaise vue, daltonisme, problèmes moteurs… Il est donc impossible de savoir à l’avance dans quelles conditions le site que l’on conçoit va être vu.

Pourcentage de navigateurs utilisés en France en Avril 2006 (statistiques de fréquentation du site Linternaute.com, 4,5 millions de visiteurs uniques par mois en mars 2006)
Pourcentage de navigateurs utilisés en France en Avril 2006 (statistiques de fréquentation du site Linternaute.com, 4,5 millions de visiteurs uniques par mois en mars 2006)

Les échanges client / serveur

Le poste du visiteur est appelé client. Lorsque l’internaute demande une URL, une adresse à son navigateur (ou autre agent utilisateur) ou qu’il clique sur un lien, le navigateur envoie, via le modem, une requête.

Pour trouver le serveur à qui la requête est adressée, il interroge une machine ayant la liste des noms de domaines et l’adresse IP qui leur correspond. Comme le nom de domaine est indiqué dans l’adresse, il retrouve l’IP qui lui permet de se diriger vers le serveur concerné.

Il interroge le serveur. Celui-ci lui répond et lui envoie une copie de la page demandée. La page est rapatriée sur le poste client et le navigateur peut l’afficher.

Les échanges client / serveur
Les échanges client / serveur

Initiation au HTML – Plan de l’article complet

Initiation au HTML (1/5)

Cette série d’articles est une introduction au HTML prévue pour un public non-technique.

Le but de ce document est de donner quelques clés de compréhension aux différents profil qui gravitent autour de la création de site mais qui ne sont pas intégrateurs. Il s’agit d’élargir son autonomie face à la lecture d’une page web.

Une première partie rappelle les bases : HTML et Internet. Le Langage HTML est ensuite concrètement abordé. Les premiers pas de la création d’une page HTML sont détaillés dans une troisième partie. Enfin, quelques pistes sont données pour permettre d’Exploiter le code HTML.

Chaque partie, ainsi que les annexes, feront l’objet d’un article posté ici-même dans les semaines à venir.

J’espère vivement pouvoir rendre service ainsi aux curieux qui s’intéressent à la création techniques de pages web sans avoir de compétences techniques. Si cela peut les aider à se sentir plus à l’aise dans des conversations avec les intégrateurs, mon pari sera gagné ! 😉

(PS : Merci à Jep pour sa relecture.)


Initiation au HTML – Plan de l’article complet

La spécificité en CSS

Introduction

Entre les deux déclarations ci-dessous, à votre avis, laquelle sera appliquée sur l’élément de liste <li> ?

.page .menu li {color: red;}
body div.menu ul li {color: blue;}

Si les deux déclarations désignent bien le même élément, l’une est prioritaire sur l’autre et du style de la première déclaration dont va hériter l’élément de liste. La couleur bleue de la deuxième déclaration ne sera pas appliquée.
Si la première déclaration (.page .menu li) prend le pas sur la deuxième (body div.menu ul li) c’est que le calcul de spécificité lui donne plus d’importance.

La spécificité

La spécificité d’une déclaration est un calcul qui indique le “poids” d’une déclaration.
Ce “poids” est alors utilisé pour comparer les différentes déclarations entre-elles et savoir laquelle est prioritaire sur l’autre, laquelle a le plus de “poids”.

Le calcul de la spécificité

Le calcul se fait :

  • en fonction de 3 types d’éléments qui composent une déclaration (ID, class, élément balise)
  • sur 3 chiffres concaténés

Pour connaitre le premier des trois chiffres concaténés, il faut compter le nombre d’ID dans la déclaration (a).
Pour le deuxième chiffre, il faut compter le nombre de class (b).
Enfin, le troisième chiffre est donné par le nombre d’élément balise (c).

Le poids d’une déclaration est le nombre donné par ces trois résultats mis côte à côte (abc).

Dans notre exemple :

  • .page .menu li {color: red;}
    • Nombre d’ID : 0 (donc a=0)
    • Nombre de class : 2 (donc b=2)
    • Nombre d’élément : 1 (donc C=1)

    Le poids de cette déclaration est donc de 21 (021).

  • body div.menu ul li {color: blue;}
    • Nombre d’ID : 0 (donc a=0)
    • Nombre de class : 1 (donc b=1)
    • Nombre d’élément : 4 (donc C=4)

    Le poids de cette déclaration est donc de 14 (014).

La première déclaration est donc bien prioritaire sur la deuxième.

Quelques exemples :

  • #contenu #contenu-principal La spécificité est de 200 (a=2 ; b=0 ; c=0)
  • div.informations #mentions p.important span La spécificité est de 123 (a=1 ; b=2 ; c=3)

Et comme une image (ludique) vaut toujours mieux qu’un long discours : Specificity Wars

Conclusion

Cela nous permet de comprendre pourquoi, dans certains cas “inexplicable” notre déclaration ne s’applique pas alors qu’elle ne contient aucune erreur. L’élément cible hérite en fait d’une déclaration ayant une spécificité plus forte.
Parfois, ces problèmes peuvent simplement se régler en “surchargeant” la déclaration afin de lui donner plus de poids. Attention néanmoins à ne pas avoir le réflexe de trop charger ses déclarations (pour éviter ce type de désagrément) au point d’avoir des déclarations très fortes et peu souples.

Evaluer la qualité du référencement naturel d’un site web

Plan de l’article :

  • Les principes de base
  • Les mots-clé
  • Les liens
  • Le code
  • La concurrence
  • Conclusion

Les principes de base

La première chose à prendre en compte est le contenu. En effet, évaluer la qualité du référencement naturel d’un site n’ayant pas un contenu susceptible d’intéresser les internautes serait une perte de temps. Il faut également veiller à ce que chacune des pages du site soit autonome et soit analysée en elle-même. C’est d’abord un très bon moyen pour optimiser le référencement d’un site en entier, mais en plus, on ne sait jamais, avec les moteurs de recherche et les liens externes, par quelle page un internaute arrive sur le site.

Enfin, il ne faut pas oublier que l’intérêt des internautes est un facteur important du référencement naturel : ce sont eux qui vous feront des liens, ce sont eux qui parleront de vous sur un forum, ce sont eux qui conseillerons votre site aux amis …Ce sont eux qui font vivre votre site.

Les mots-clé

Il y a deux listes de mots-clé à avoir en tête :

  • les mots pertinents par rapport au sujet de la page ;
  • les mots pertinents par rapport aux recherches des internautes.

Pour la première liste, notez tous les mots appartenant au champ lexical du sujet de la page (y compris synonymes, anglicismes…)
Normalement, les mots les plus importants devraient déjà être présent dans le contenu de la page. S’il est bon qu’un ou deux mots essentiels soient répétés, il ne faut surtout pas hésiter à exploiter tous le champ lexical.
C’est plus agréable pour l’internaute et cela enrichie la page aux yeux des moteurs de recherche.

Pour la seconde liste, il faut trouver quelles sont les requêtes régulièrement recherchées par les internautes.
En effet, si le mot le plus important de votre page n’est pas ou peu recherché, il faudra peut-être lui préférer un synonyme. Il ne faut pas oublier non plus que les internautes font parfois des fautes d’orthographe, peuvent omettre les accents, utilisent plutôt un mot dans une expression mais son synonyme dans une autre…

Outil pour tester la pertinence d’une recherche :

Analysez dans votre page la présence de ces mots, voyez quels sont les mots manquants, les mots en trop.

La balise meta “keywords” :

Elle perd de son importance. Beaucoup d’abus ont été fait qui ont entraîné les moteurs à ne plus (ou presque plus) la prendre en compte. Vous pouvez quand même y insérer les mots que vous n’employez pas dans la page : fautes d’orthographe courantes, anglicismes, abréviations, pluriels (s’il y a plusieurs lettres de différences avec le singulier).

La densité :

Beaucoup de choses sont dites sur la densité et beaucoup de chiffres sont avancés. Mais aucun pourcentage n’est officiel et on ne peut avancer que des estimations.

Pour approfondir :

Outil pour analyser la densité des mots-clé d’une page :

Les liens

Ne pas oublier que la tactique de liens d’un site n’a pas pour but uniquement de séduire les moteurs mais bien de s’intégrer au sein d’une communauté, d’augmenter sa visibilité, d’apporter, encore et toujours, une richesse de contenu.

Trois types de liens sont à analyser et ont leur importance : les liens internes, les liens sortants et les liens entrants.

Analysez la qualité des liens internes.
Il faut, bien-sûr, que chacune des pages du site ait au moins un lien qui pointe vers elle. Mais un lien ne suffit pas et un réseau de liens internes est bien utile.
C’est -aussi- à ça que servent le footer, le plan du site (v. Concevoir un plan de site), le menu sur toutes les pages (en dehors d’autres considérations ergonomiques bien importantes).

Des liens reliant plusieurs rubriques connexes, intégrés dans le texte, sont aussi les bienvenus.

Dans tous les cas, deux critères sont importants : le libellé puis le “title”.
Le libellé du lien doit pouvoir être lu seul (pour les lecteurs vocaux, pour les internautes qui lisent “en diagonale”, pour être plus pertinents). Il est bon qu’ils contiennent des mots-clés de la page vers laquelle ils pointent.
Le title, selon les règles d’accessiblité, doit contenir autant d’informations que le libellé plus des informations complémentaires. Cela peut, dans certains cas, être l’occasion de donner des précisions sur cette page de destination et d’enrichir ainsi la couverture du champ lexical.

Si les liens sortants sont importants, c’est parce qu’ils jouent un rôle dans votre crédibilité. Ils sont un indice du sérieux de votre contenu en fonction du sérieux des sites que vous recommandez.
Les webmasters des pages citées pourraient aussi être tenté de faire un lien vers un site s’ils voient que les deux sites ont une thématique commune, un enrichissement l’un par rapport à l’autre.

Les liens entrants sont une catégorie très importante à ne pas négliger.
Listez, dans un premier temps, les liens pointant sur votre site.
Pour cela, utilisez les commandes suivantes :

  • “link:” + URL sur Google (attention, Google ne remontent pas tous les liens)
  • “linkdomain:” + URL sur Yahoo!
  • “link:” + URL sur MSN Search

Vous pouvez aussi exploiter les fonctionnalités de logiciels tels que Backlink Analyszer.

Visitez chacun des sites que vous avez trouvé et notez pour chacun d’eux la qualité du lien.

Elle dépend :

  • des critères vus ci-dessus : libellé et “title”
  • de la page du site vers laquelle le lien pointe : la page d’accueil ou une page en profondeur
  • de la qualité de la page qui vous fait le lien : sérieux du contenu, popularité de la page, sujet connexe
  • du nombre de liens présents dans la page : si la page fait 50 liens ou si elle en fait 2, ça n’a pas le même impact

Après avoir listé les liens pointant vers le site analysé, il reste encore à trouver les liens qui n’existent pas mais qu’il serait intéressant d’avoir.
Pour cela, il faut se constituer une liste des sites aux sujets connexes ou ceux auquel une des pages du site peut apporter quelque chose (outil, références, approfondissement)

Ces sites peuvent aussi être des annuaires, et, encore mieux, des annuaires spécialisés.

Outils pour trouver des annuaires spécialisés :

Deux très bons annuaires d’annuaires avec recherche multicritères

Cette liste de sites intéressant pourra être, par la suite, une base de travail pour optimiser le référencement naturel du site. Elle vous permet aussi de voir les écueils du référencement actuel.

Pour approfondir :

Le code

Le code est un élément essentiel puisqu’il est lu et décrypté par les robots d’indexation afin de fournir aux moteurs les informations nécessaires pour le référencement d’une page. Un site dont le code est “propre” augmente considérablement ses chances d’être compris et bien intégré par un moteur de recherche. Il faut donc s’assurer que le code des pages est valide et qu’il respecte bien la sémantique des balises HTML.

Pour se faire une idée de comment les moteurs de recherche voient le code (et donc sur quoi ils se basent pour évaluer une page), on peut consulter la version texte du cache de Google. Pour cela, faire une recherche. Pour un résultat, au bout de la ligne d’adresse (verte), cliquer sur “Cached”. Dans le petit paragraphe en haut de la page, cliquer sur “cached text”. On voit alors ce que “voit” le moteur.

Outils pour vérifier la validité d’un code :

Pour vérifier l’utilisation des balises HTML, il n’y a pas d’autre solution que d’avoir un bon intégrateur ou de consulter la spécification (HTML 4.01 ; XHTML).

Si la balise meta “keywords” devient désuète, la balise meta “description” garde, elle son importance. Pas beaucoup au niveau de l’évaluation des pages par le moteur, mais plutôt pour la lecture que les internautes peuvent en faire au moment de leur recherche. En effet, c’est souvent cette description qui est affichée dans la liste des résultats de recherche. C’est donc elle qui incitera -ou non- un internaute à poursuivre sa recherche sur un site. Elle participe donc à la visibilité.

Les derniers éléments à vérifier dans le code sont tous les contenus auxquels les moteurs de recheche n’ont pas accès : images, vidéos, javascript… Pour tous les contenus visuels, il suffit de vérifier la présence d’un contenu alternatif (attribut “alt” ou “longdesc”). Pour le javascript (et même si les moteurs arrivent de plus en plus souvent à y avoir accès), il faut s’assurer qu’il existe bien une version pour le cas où le javascript est désactivé. Les robots d’indexation auront ainsi bien accès à tout le contenu.

Enfin, ne pas prendre en compte pour l’analyse toutes les pages qui resteront définitivement fermées aux robots :

  • celles qui sont protégées par un mot de passe
  • celles pour lesquelles il est demandé aux moteurs de ne pas les référencer – Vérifier pour cela la présence d’un robots.txt à la racine du site. L’inscription “no-index” indique que la page ne sera pas indéxée par les moteurs de recherche respectueux du robots.txt

La concurrence

Le dernier point à appliquer pour analyser la qualité du référencement naturel d’un site c’est … d’analyser la qualité du référencement naturel de ses concurrents !

Il faut tout abord les identifier. Pour cela, rien de tel qu’une recherche sur les principaux moteurs en utilisant les requêtes principales sur lesquelles le site audité souhaite se référencer. Il ne reste plus qu’à reprendre chacun des points ci-dessus et de les appliquer aux sites concurrents !

Cette analyse permettra aussi de situer le site audité par rapport à un contexte réel et, soit de conserver une avance sur les autres, soit de rattraper un retard et, pourquoi pas, dépasser tout le monde.

Ne pas oublier qu’ils peuvent eux-mêmes être une source de renseignements, d’inspiration : trouver sur quels mots-clé ils resortent, pourquoi, leur densité et leur emplacement…

Outils pour analyser les sites concurrents&nbps;:

Evaluation de la visibilité d’un site :

Conclusion

La qualité du référencement naturel se compose donc de nombreux éléments, ayant chacun leur importance. Si son évaluation prend du temps, elle peut être un très bon indicateur des points forts et des points faibles d’un site. Elle permet donc de savoir quels sont les points à améliorer et dans quelle direction. Faites à intervales réguliers, une évaluation de la qualité du référencement naturel permet aussi de voir les progrès, quelles les modifications qui ont eu un impact positif, neutre ou négatif…
Bref, elle permet d’affiner la connaissance de son propre site, de la façon dont les moteurs peuvent réagir par rapport à lui … Elle permet d’affiner ses propres connaissances en référencement naturel.

Il ne me reste plus qu’à remercier Seg pour ses conseils avisés.

Astuces pour une feuille de style pour l’impression

L’appel à la feuille de style

De la même manière que vous appelez votre ou vos feuilles de style habituellement, vous pouvez ajouter des appels à d’autres feuilles en spécifiant bien le média auquel elles se destinent.

Exemple :

La typographie

Certaines polices de caractères sont plus agréables à l’écran que d’autres. De la même manière, une police de caractère peut être désagréable ou moins “jolie” une fois imprimée. On peut donc utiliser la feuille de style d’impression pour changer de typo.

Les typo à empâtement, par exemple, sont très fréquentes sur support papier alors qu’elles le sont moins sur écran.
Il faut aussi penser à adapter la taille des caractères.

Exemple :

body { font: 10pt Times New Roman, serif; }

Les liens

Les liens de navigation interne n’ont plus d’intérêt sur une feuille imprimée. On peut donc, dès le début, prévoir une classe spécifique à appliquer sur tous ces liens. Ainsi, on peut faire disparaître, par exemple, le sousligné sur les liens type “…que vous trouverez sur la page Recherche”.

Les liens externes, eux, sont certainement des liens qui continuent à avoir un sens hors du site.

CSS2 permet d’afficher l’adresse d’un lien après celui-ci. C’est très intéressant pour une feuille de style d’impression puisque, sur papier, impossible de cliquer. Sans cette possibilité, l’information principale du lien (l’adresse) est perdue.
Ne soyez pas déçus, néanmoins, si vous imprimez avec Internet Explorer : cette fonction n’est pas encore implémentée. Cela ne générera pas d’erreur … mais cela n’affichera pas l’adresse internet non plus !

Exemple :

a.navigationInterne { text-decoration: none; } a:after { content: " (" attr(href) ") "; font-size: 0.9em; } a.navigationInterne :after { content: ""; }

Les couleurs et les images de fond

Les couleurs de fond peuvent avoir de gros inconvénients, une fois sur papier.
Elles peuvent, dans certains cas, gêner la lisibilité (plus que sur écran où le contraste n’est pas le même).

C’est encore plus vrai pour les images de fond qui peuvent être jolies et sans effet gênant sur un écran mais poser des problèmes de contraste à la lecture sur papier.

Couleurs de fond et images de fond peuvent aussi utiliser beaucoup d’encre pour un effet graphique mineur. L’internaute apprécierait qu’un site ait pensé à lui éviter le problème.
Cette fonctionnalité est d’ailleurs déjà implémentée par défaut dans certains navigateurs.

Attention, en enlevant les couleurs de fond, à ne pas se retrouver avec un texte illisible. Si un texte jaune, par exemple, était très lisible sur son fond noir, une fois la couleur de fond enlevée, le jaune sur le blanc de la feuille sera très difficile à lire. Il convient d’adapter la couleur du texte à tout changement de couleur de fond.

Exemple :

p { background: none; color: #000; }

Les marges, les espacements

L’aération d’une page imprimée n’est pas la même que pour une page web.
Il sera alors peut-être nécéssaire de revoir les marges, notamment horizontale, sur votre feuille d’impression.
Pensez que l’internaute sera déçu s’il doit imprimer sur 2 pages avec une marge de 4 cm un texte qui tiendrait sur 1 en utilisant simplement toute la largeur de la feuille.

Adaptez les espacements entre les éléments au média. Les titres n’ont pas forcément besoin d’être autant espacés de leur texte sur une version papier qu’à l’écran.

Les sauts de page

Rien de plus désagréable pour un internaute qu’une page sur laquelle n’a été imprimée qu’une seule ligne, qu’un paragraphe dont les derniers mots sont sur la page suivante, qu’un titre qui n’est pas immédiatement suivi par, au moins, la première ligne de son paragraphe, ou qu’une image dont la légende a été imprimée sur la page suivante, etc.
Les styles d’impression permettent de gérer tout ça. Analysez bien vos pages pour voir quels sont les coupures à éviter. Attention à ne pas tomber dans l’excès inverse et de faire des coupures partout : l’internaute n’appréciera pas non plus de devoir imprimer trop de pages.

Les propriétés à utiliser :

  • page-break-before (gestion du saut de page avant l’élément)
  • page-break-after (gestion du saut de page après l’élément)
  • orphans (gestion des lignes seules en bas de page)
  • widows (gestion des lignes seules en haut de page)

Exemple :

h1, h2, h3, h4, h5, h6 { page-break-after:avoid; } p { orphans: 2; } Dans cet exemple, aucun saut de page ne sera fait après un titre hn et aucun début de paragraphe ne sera imprimé avec moins de deux lignes en bas de page.

Zones inutiles

Certaines zones très courantes sur un site web sont néanmoins inutiles sur une version imprimée.
C’est le cas par exemple du menu. L’internaute qui imprime une page n’a plus besoin, quand il voudra relire sa page, d’avoir dans sa lecture tous les items du menu imprimés.

Un formulaire n’a également plus de sens sur une feuille imprimée (sauf, bien-sûr, les formulaires fait pour l’impression).
Il n’est pas forcément utile que le formulaire soit encore visible sur une page contact, par exemple, qui aurait été imprimée pour garder une trace du numéro de téléphone, de l’adresse, etc.

Les liens tels que “Retour à l’accueil” peuvent aussi être évité sur une feuille d’impression. Il faut identifier ces liens et leur assigner une classe particulière pour pouvoir les retirer lors de l’impression.

Exemple :

#menu, #piedDePage, form, #retourHautPage { display: none; } .lienNonImprime { display: none; }

Les informations perdues

En supprimant le menu, en ayant pas la barre d’adresse imprimée, certaines informations se retrouvent “hors de la page web”.
L’internaute retrouve souvent ce type d’information imprimée en en-tête et pied-de-page (avec la date, parfois le titre…) en fonction de son navigateur et de sa configuration.v Mais le webmaster n’a pas la main sur ces informations.

Pour palier à cela, on peut concevoir, sur chacune des pages, une zone qui ne sera pas visible pour les écrans mais qui le sera à l’impression.
Cette zone reprendrait des informations telles que le titre du site, son URL, des informations importantes qui pourrait manquer au lecteur de la page imprimée (l’email du webmaster, par exemple).

Exemple :
Sur la feuille de style pour écran :

#infosImpression { display: none; } Sur la feuille de style pour imprimante :

#infosImpression { display: block; }