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 :
<p>Cette balise indique un paragraphe.&lt/p>

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

Interview d’un intégrateur/webdesigner

Cette entrée en matière, est en fait un mail que j’ai reçu. Voici l’interview qui en est sortie.

Bachelière en 1995 du Bac L, titulaire de 2 licences (histoire des arts et arts plastique), comment en êtes-vous arrivé au multimédia ?

Depuis le début de mes études, mon objectif a toujours tourné autour de la communication par l’image (publicité, sémiologie…). Lorsque je me suis acheté mon premier ordinateur, je me suis naturellement tournée vers Photoshop. Comme, parallèlement, je découvrais un nouveau média, Internet, je me suis immédiatement intéressée au webdesign.
Et voilà comment j’ai « basculé » vers le monde du web 😉

D’après votre CV, en 2000, vous étiez embauchée chez Axicom Multimédia, comment avez-vous été recrutée ?

Afin de professionnaliser mon projet Internet, je me suis inscrite dans une école, l’Ecole Multimédia, pour y suivre un cursus « Réalisateur multimédia ». Cette formation incluait principalement un stage en entreprise, sur toute l’année.
J’ai donc dû démarcher des sociétés, des « web agency », pour en trouver une prête à m’offrir une place de webdesigner-intégrateur débutant.
Axciom Multimédia faisait partie de ces sociétés. Leur démarche, à mon embauche, m’a parut intelligente. Il ne se sont pas basé sur les quelques réalisations multimédia que j’avais faite -puisque j’étais là pour apprendre à en faire, justement- mais sur mes capacité graphiques. Je leur ai donc présenter mon book d’arts plastiques et c’est sur la base de celui-ci qu’ils ont pû juger s’ils croyaient à un potentiel créatif chez moi.

En tant que professionnelle, diriez-vous que le marché du travail dans la région parisienne est ouvert à de jeunes diplômés ?

Je le crois.
Si nous nous restreignons au domaine de l’intégration web -dont je peux plus facilement parler- les compétences professionnelles sont difficiles à trouver. Ce que je veux dire, c’est que l’intégration est un métier complexe. Un bon intégrateur maîtrise les standards du HTML, les CSS dans ce qu’elles ont de simples mais aussi dans leurs subtilités, a de fortes notions en matière d’accessibilité, de référencement naturel et, en plus, d’ergonomie. Car le métier de l’interface touche à tout ça !
Une équipe qui recrute est sensible à l’ouverture que peut avoir un intégrateur par rapport à tous ces domaines.

Parallèlement, l’intégration est un métier encore jeune. Les personnes arrivés très tôt sur le web on dû se remettre en permanence en question pour se maintenir au niveau professionnel, les choses évoluant sans cesse. Le senior qui n’a pas su le faire aura un profil moins intéressant, campé sur ses positions, que le profil débutant mais en phase avec le web actuel. …Le tout étant de le rester !

Vos attentes et motivations premières du métier sont-elles en adéquation avec la réalité ?

Le métier est encore bien jeune et je n’avais pas une idée précise de ce qu’il était quand je me suis lancée. En fait, le métier est encore assez jeune pour qu’une même dénomination (« intégrateur », « webdesigner », « développeur ») ne veuille pas dire la même chose d’une entreprise à l’autre, d’une personne à l’autre.
Je crois donc que j’ai aussi eu la chance de faire mon métier à mon image et pas l’inverse.

Quelles sont selon vous les qualités essentielles d’un intégrateur/webdesigner ?

C’est un métier dans lequel on est bon que si on est prêt à toujours apprendre et ré-apprendre ce que l’on sait déjà faire.
C’est vrai pour tous les métiers du web, car Internet bouge très vite, les technologies se multiplient, sortent du lot ou tendent à disparaître, les internautes progressent dans la maîtrise du média pendant que des nouveaux débutants arrivent… C’est un métier où il faut être en perpétuelle écoute des changements, des nouveautés, des usages.

Je dirais ensuite qu’il faut être rigoureux. Si le métier peut sembler, de l’extérieur, facile (mettre un joli titre, une jolie image et voilà), il demande en fait une grande conscience de ce qu’est Internet.
Et faire des interfaces pour un média dont le rendu peut-être très différent selon le support de l’internaute (les différents navigateur, le mobile, les lecteurs d’écran, etc.) demande une discipline et une maîtrise du code qui ne sont absolument pas visible pour un regard extérieur, non professionnel.

Quelles sont les compétences requises pour ce métier ?

Connaître simplement le HTML/XHTML et les CSS, en effet, ne suffit pas à un bon intégrateur/webdesigner. Il faut déjà qu’il maîtrise ses développements au travers des standards du W3C. Ensuite, il doit être au fait de l’accessibilité pour avoir des sites de qualité. Des notions d’ergonomie sont un plus important pour aider ses clients dans leur choix et éviter les erreurs. Des connaissances en référencement naturel lui permette de créer des pages déjà optimisées. Enfin, juste quelques notions de développement (PHP, ASP…) lui permettent de mieux comprendre la logique des développeurs avec lesquels ils travaillent et de prendre en compte leurs besoins, dès l’intégration.

Quels conseils me donneriez-vous pour perçer dans ce métier ?

Pour ma part, ce qui m’a réussi, à été de m’intéresser aux standards et aux bonnes pratiques.
Ce que je résume ici en une phrase est en fait tout une manière d’aborder le métier. C’est aussi ce qui a donné à mon profil, par la suite, une qualité d’expertisation.
A une époque où on entendait encore peu parler des standards, à une époque où beaucoup de mises en page se faisait en tableaux, j’ai eu la chance de fréquenter, via le forum Webmaster Hub, par exemple, des gens qui m’ont fait aborder le web d’une autre manière, plus professionnelle, plus tourner vers la prise de conscience des difficultés et particularité de ce média.
Donc le conseil à donner, à mon avis, est d’être en veille permanente pour 1/ saisir les changements et 2/ toujours se professionnaliser.

Etre bon ne suffit pas, encore faut-il que les recruteurs vous trouvent. Le réseau, comme souvent (partout ?), est ce qu’il a de plus efficace. Il ne s’agit pas de se faire connaître en laissant son nom partout et de manière totalement artificielle ! Un réseau se crée naturellement en fréquentant les forums, les événements « IRL », en s’intéressant, tout simplement, ça finit par se voir.

En tant que femme, avez-vous senti une différence de traitement vis-à-vis de vos pairs ?

Non.

Vous avez également exercer votre métier en freelance. Quels ont été les avantages et les inconvénients de ce type d’exercice ?

Mon expérience en tant que freelance est assez courte.
L’inconvénient principal, selon moi, est toute la partie commerciale : trouver ses clients. Mais là encore le réseau et le bouche-à-oreille fait toute la différence et pendant que certains passe un mois à chercher un client, d’autres reçoivent plus de demandes qu’ils ne peuvent en traiter.
Et le plus gros avantage que j’y vois est l’ouverture : à être freelance, on travaille sur des projets différents, pour des clients différents, avec des équipes différentes … La découverte est bien plus grande, on apprend à travailler selon les différentes méthodes des uns et des autres, on s’enrichit plus rapidement qu’autrement et on gagne en souplesse, etc.

Quels a été pour vous le projet le plus enrichissant et satisfaisant ? Pourquoi ?

Difficile de répondre… Certains petits projets anodins ce sont révélés très intéressants parce qu’ils soulevaient une problématique encore jamais rencontrée ; et j’ai aussi eu, à l’inverse, à travailler sur des projets très lourds, stratégiques mais qui du point de vue de l’interface n’était qu’une longue redite.

Je me tourne beaucoup, ces derniers temps, vers des projets qui sont moins « dans la pratique ». Dans cette catégorie là, le projet qui m’a le plus apporter est la rédaction d’un Cahier des charges techniques.
C’est un exercice passionnant parce que très exigent ! Cela oblige à rationaliser son propre travail, à mettre des mots sur des habitudes que l’on a et à trouver pourquoi c’est bien -au besoin, on remet donc en question ces propres façons de faire. Il faut penser à bien tout spécifier… C’est un exercice qui oblige à formaliser le travail de toute une équipe (en fonction des contraintes d’hébergement, de sécurité, des exigences de base) depuis les premières évidences jusqu’aux détails spécifiques.

Vous êtes actuellement embauchée chez Cetelem e-Business. Quels sont vos tâches au sein de cette entreprise ?

J’y suis en tant qu’intégratrice, plus rarement webdesigner ; j’y apporte mes connaissances en référencement naturel et en accessibilité.
Mes tâches comprennent l’intégration de pages, l’accompagnement dans la gestion de projet, le conseil (référencement, interface, ergonomie) sur la conception, la formation interne, la méthodologie de travail (cahier des charges, bonnes pratiques…)

Etes-vous nombreux dans l’équipe ? Quelle est la hiérarchie ?

Nous sommes une petite équipe : deux intégrateurs/webdesigners ; deux développeurs et notre manager. L’équipe est complétée par deux développeurs prestataires depuis déjà plusieurs mois.
Nous travaillons en étroite collaboration avec l’équipe marketing, nos « clients », mais sans rapport de hiérarchie entre-nous.

Quelles sont vos responsabilités ?

Dans notre équipe, chacun est responsable de ses projets. C’est à dire que c’est à nous de gérer leur avancement, de signaler les points d’alerte (difficulté technique, retard, amélioration à proposer), de maintenir informer les personnes concernées par le projet et bien sûr de veiller à leur qualité (qualité du code, maintenabilité, réponse aux attentes). Si notre responsabilité a un cadre limité, elle est par contre très stratégique.

Pourriez-vous me décrire une journée type de travail ?

Il n’y a pas vraiment de journée type de travail …et c’est tant mieux !
Je peux passer des journées, la tête dans mon écran, à finir une intégration importante, comme je peux avoir une succession de petites tâches toutes différentes les unes des autres, alternant intégration, réunion, discussion avec l’équipe marketing, réflexion et méthodologie…
Je dirais tout de même qu’une journée idéale de travail comprend un petit temps pour la veille, qu’elle soit personnelle ou en discutant avec des collègues.

Quels sont les perspectives d’évolution dans ce métier ?

Les voies peuvent être très différentes pour chaque cas : en fonction du profil (plutôt technique, plutôt design), des aptitudes (management, gestion de projet) et des sociétés (grosse SSII, petite webagency, équipe intégrée au sein d’une société dont le métier n’a rien à voir avec le web). A partir de là, je crois que cela dépend beaucoup de la façon dont on va gérer sa propre carrière… Manager d’une équipe de développement, chef de projet/chargé de clientèle au sein d’une webagency, responsable du site au sein d’une entreprise « non-web », spécialiste très pointu dépêché par sa SSII pour des entreprises, expert en interface au sein d’une équipe de conception, etc. Les perspectives sont larges car le métier est riche et demandé dans des circonstances diverses.

Qu’est ce que vous aimez dans votre métier ?

C’est une bonne question. Je me demande souvent ce qui peut bien me faire frémir quand je me retrouve face à mon écran blanc, prête à commencer une nouvelle page.
Une des choses que j’aime dans mon métier, c’est qu’on en a jamais fini d’apprendre. Que le média est encore jeune et que nous sommes, je crois, encore en période de découverte de ce qu’il va devenir.
J’aime aussi que la rigueur à laquelle un tel métier fait appel. Le support est complexe et developper pour Internet signifie avoir bien à l’esprit que l’on a pas la main sur le rendu, la configuration de l’internaute, etc. Pourtant, le résultat final, tel que pour les acrobates, semble simple (c’est même l’un des buts à atteindre, la simplicité de l’interface) et facile.

Qu’est ce que vous n’aimez pas ?

La seule chose que je n’aime pas est de ne pas renouveler mes projets : les projets qui se répètent ou qui se ressemblent ne m’apporte rien. Varier les projets, les demandes, faire face à de nouvelles difficultés, au contraire, est très enthousiasmant.

Et avez-vous des commissions sur certains projets ou certains avantages peut-être ?

Je travaille dans un cadre très déterminé où je suis salariée de mon entreprise. Nous développons donc pour l’équipe, pour la société mais nous n’avons aucune commissions sur les projets. Notre but est de créer des sites, des pages utiles à notre entreprise et c’est pas cet intermédiaire que nous sommes récompensés.

Quiz pour geeks !

Petits quiz sur mingle (devenu OnePlusYou). Je me suis bien amusée, même si je ne cache pas que je suis un peu déçue par mes scores… Bon, bien sûr, je n’étais pas tout à fait prête, j’étais fatiguée, il y avait du bruit, la pièce était sombre, la chaise n’était pas confortable… Tout ça, quoi !

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.

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; }

La favicon

Qu’est-ce qu’une favicon ?

La favicon est la petite icone qui apparaît dans la barre d’adresse devant l’URL des sites. Elle apparaît également dans le menu des favoris / marques-pages. Enfin, pour les utilisateurs d’onglets, elle apparaît sur chaque onglets.

Exemple d'une favicon devant l'URL d'un site, dans la barre d'adresseLa favicon dans la barre d’adresse – Elle participe ainsi à l’identité visuel du site et contribue donc à sa mémorisation et son identification
Exemple d'une favicon dans la liste des favorisLa favicon dans la liste des favoris
Exemple de favicon sur les onglets de navigationLa favicon dans les onglets – La favicon est un repère particulièrement agréable dans l’utilisation des onglets. Elle permet de rapidement retrouver le site que l’on recherche (visuelement identique aux autres autrement)

Pourquoi avoir une favicon sur son site ?

La favicon est un élément supplémentaire qui va participer à l’identité du site. Elle est un facteur supplémentaire qui fait qu’on identifie et mémorise le site ; un peu comme un mini-logo.

Ce petit élément visuel permet également de plus rapidement repérer le site qu’on recherche dans une liste (les favoris, ou les onglets notamment).

Enfin, d’un point de vue purement pratique, avoir une favicon permet de limiter les logs d’erreur : en effet, certains navigateurs la recherche automatiquement à la visite d’un site ; c’est autant d’erreurs 404 créées.

Comment fabriquer une favicon ?

Afin de pouvoir s’adapter, une favicon doit être créée au moins au format 32 x32 pixels, d’après la Bonne Pratique Opquast n°30. Mais c’est au format 16×16 pixels qu’elle s’affiche la pluspart du temps. Il faut donc prévoir que l’icône soit toujours « lisible » et que l’image soit propre dans ces deux tailles. Une favicon peut également être prévue en 48 x 48 pixels.

Une favicon peut être une image de différents formats : jpg, gif, png, bmp, mng, xbm et ico. Parmis ces formats, seul le .ico n’est pas reconnu par les standards. Néanmoins, il reste nécéssaire car … c’est le seul compris par Internet Explorer ! Les navigateurs standards comprennent l’ensemble des formats.

Il est à noter que certains de ces formats permettent une animation (voir sont un format vidéo !). L’icône peut donc ne pas être figée. Il faut pourtant en user avec parcimonie : en effet, les animations en boucles peuvent être désagréables et perturber la lecture d’un site ; elles peuvent agacer.

Pour créer l’image de chacun de ces formats, vous pouvez utiliser votre éditeur graphique habituel. Néanmoins, pour le .ico, il existe des outils en ligne très pratiques, comme le très bon FavIcon from Pics. Il suffit de préparer une image au format gif, jpg, png, ico ou bmp (en 32 x 32 pixels) et l’outil génère une icône multi-format (32 x 32 et 16 x 16 pixels).

Le code pour insérer une favicon

Pour insérer votre favicon, vous devez :

  • placer l’image à la racine de votre site ;
  • placer le code d’appel à l’image sur votre page index.

Là encore, il y a le code standard compris par les navigateurs standard … et le code pour Internet Explorer. Ainsi, si vous voulez insérer les deux cas, utilisez le code ci-dessous :

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><!-- pour IE -->
<link rel="icon" type="image/png" href="/favicon.png" /><!-- pour les navigateurs standards -->
Internet Explorer lit la première déclaration et l’applique. Il ne tient pas compte de la deuxième qu’il ne comprend pas. Les navigateurs standards vont lire et comprendre la première déclaration, puis la deuxième. Ils appliqueront celle qui arrive en dernier.

A lire :

Concevoir un plan de site

L’utilité du plan de site.

Le plan du site comme aide à la navigation

La toute première fonction d’un plan du site est d’aider le visiteur dans sa navigation.
Cela peut, par exemple, être un visiteur qui recherche un type d’information précis et n’arrive pas à le trouver dans le menu, ni dans les pages. Si le site n’a pas de module de recherche, ou si l’internaute ne souhaite pas y faire appel, il peut alors utiliser le plan du site.

Mais l’internaute peut tout aussi bien avoir consulter le plan du site sans avoir fait une seule recherche dans les rubriques du menu ou en navigant. Il se peut très bien que le plan soit le premier lien auquel il ait recours. Soit qu’il recherche une information pointue et estime qu’il la trouvera plus facilement en ayant accès aux sous-rubriques et autres niveaux directement. Soit, tout simplement, pour se donner une idée de la prestation d’un site et des domaines couverts.

Des mot-clés et des liens pertinents

Le plan du site, par sa fonction même, va reprendre les mots importants du site : le titre des pages.

Mais la plus grande force encore du plan du site vient du fait que c’est un véritable réseau de liens sur le site.
D’abord, en listant la totalité des pages du site (ou des pages principales), on s’assure que le robot des moteurs de recherche trouvera chacune d’entre-elles. C’est donc une page que le spider doit facilement trouver.

Comment faire ?

Emplacement

On a vu que le réseau de lien que représente le plan du site est un avantage pour le référencement. Cet avantage est réellement efficace si de nombreuses pages pointent vers le plan du site. Mais de toute façon, d’un point de vue ergonomique, la présence d’un lien vers le plan du site sur chaque page est indispensable. En effet, on ne peut savoir d’avance à quel moment un visiteur va en avoir besoin. Et comme c’est un outil d’aide à la navigation… il doit facilement être trouvable !

Par habitude, on s’attend à trouver un lien vers le plan du site au moins en bas de page.

Présentation

Un plan de site peut-avoir un aspect très différent selon que le site est composé de quelques pages ou de plusieurs centaines ! Il n’y a pas une façon de faire un plan mais il faut savoir s’adapter à la situation.

Dans le cas d’un site à beaucoup de pages, vous n’allez pas lister dans votre plan la totalité (ou en utilisant une solution faisant apparaître des sections, par exemple). Vous pouvez très bien, également, faire un plan sur plusieurs pages. Gardez d’ailleurs à l’esprit que Google déconseille d’avoir plus de 100 liens dans une page et que les règles d’accessibilité préconisent 40 liens maximum.

Au contraire, pour le plan d’un site ayant peu de pages, vous pouvez vous permettre un plus grand niveau de détails. Vous pouvez même aller jusqu’à une description succincte de la page derrière chaque lien, pour mieux aiguiller l’internaute (et glisser quelques mot-clés !)

Pour que votre plan soit vraiment utile à l’internaute, pensez à bien l’organiser. Hiérarchisez les rubriques, les pages.
Les marges, les couleurs peuvent vous aider à créer des zones. N’oubliez pas que si votre plan est agréable à consulter, cela pourrait insciter l’internaute à le regarder dans le détail et, peut-être, à voir des pages qu’il n’aurait pas pensé à chercher autrement.

Code

Un plan, ce n’est rien d’autre que la liste des pages du site. Il faut donc utiliser les balises <ul> <li> (dans certains cas <ol> <li>). Vous aurez certainement à imbriquer ces listes.

La syntaxe est la suivante :

<ul>
        <li>Rubrique 1
                <ul>
                        <li>Sous-rubrique 1</li>
                        <li>Sous-rubrique 2</li>
                </ul>
        </li>
        <li>Rubrique 2</li>
</ul>

Pour que votre référencement soit vraiment optimisé, n’oubliez pas d’utiliser l’attribut title sur vos liens.

La page 404

Votre site devrait contenir une page 404 personnalisée. Si un internaute arrive dessus, c’est soit qu’il y a une erreur dans l’URL qu’il a tapée.

Soit il identifie et corrige son erreur immédiatement, soit la page n’existe plus ou tout autre situation. Il faut alors aider votre visiteur et quoi de mieux que le plan du site ?!

Il est donc utile de prévoir, si on le peut, le plan du site dans un include qui serait appelé depuis la page plan du site et depuis la page 404.

Des exemples

Un exemple sur www.service-public.fr www.service-public.fr/aide/plan.htmlPour ce site aux nombreuses pages, en plus des rubriques déjà présentes, le plan a été découpé en trois espaces thématiques.
Un exemple sur http://pourpre.com http://pourpre.com/pied/plan.phpPour ce site très riche autour d’un thème unique, la courte description a côté des rubriques et des sous-rubrique apporte une aide en plus.