Le contenu des pages web

1. Les en-têtes

Les premières pages web contenaient principalement du texte et c’est encore souvent le cas aujourd’hui. Le texte des pages web doit être bien structuré, bien organisé afin de faciliter la lecture des visiteurs. Pour cela, vous devez utiliser des en-têtes, des titres. Avec le langage HTML 6 niveaux d’en-tête sont à votre disposition. Ces en-têtes s’utilisent avec les éléments HTML nommés h1 à h6 (h pour heading).

Tous les mots des en-têtes sont en gras. C’est la taille des caractères qui change selon le niveau d’en-tête. Par défaut, les caractères des en-têtes de niveau 1, h1, s’affichent avec une taille de caractères proche de 32 pixels, les caractères des en-têtes de niveau 3, h3, s’affichent avec une taille de caractères proche de 19 pixels et les h6 en 11 pixels.

Voici un exemple des tailles de caractères d’en-tête :

Pour les bonnes pratiques de conception des sites web, veillez à ce que chaque page possède bien un en-tête de niveau 1, h1, avant d’ajouter des niveaux inférieurs, h2, puis h3... Il est recommandé d’avoir un seul en-tête de niveau 1, par contre vous pouvez avoir plusieurs en-têtes de niveau inférieur.

Nous y reviendrons plus tard dans le chapitre...

1. Mettre en gras

Vous devrez certainement mettre en évidence certains mots importants de votre texte par une très classique mise en gras. Pour appliquer du gras, deux solutions existent.

Vous pouvez utiliser l’élément HTML b (b pour bold). Dans ce cas, le texte s’affiche bien gras à l’écran, mais c’est tout. Cela n’indique en aucune manière que ce texte est important. L’élément b n’a pas d’implication sémantique, n’a pas de sens linguistique.

Pour avoir un contenu sémantique, il faut utiliser l’élément HTML strong. Le texte va naturellement s’afficher en gras.

2. Mettre en italique

Sur exactement le même principe, vous pouvez mettre en italique du texte. Vous pouvez utiliser l’élément HTML i, mais vous n’aurez pas de contenu sémantique. Utilisez plutôt l’élément em, qui est sémantique.

Exemple de mots mis en évidence avec un strong et un em :

3. Mettre en souligné et en barré

Vous avez accès à deux autres mises en forme classiques : le souligné et le barré (plutôt bien répandu dans les pays anglo-saxons, mais moins dans les pays latins). Ce sont les éléments HTML u et s.

Exemple de mots soulignés et barrés :

4. Les indices et exposants...

1. La problématique

Comme dans un document rédigé dans un traitement de texte et imprimé, vous souhaiteriez utiliser de nombreuses polices de caractères. Mais vous êtes sur le Web ! Et le texte va s’afficher avec les polices de caractères qui sont présentes sur l’ordinateur des visiteurs. Cela implique que vous ne pouvez pas utiliser n’importe quelle police de caractères, vous ne pouvez pas utiliser une police qui se trouve uniquement sur votre ordinateur.

Mais avec le HTML5 des techniques permettent d’utiliser de très nombreuses polices de caractères différentes, pour avoir une mise en forme variée et élaborée.

2. Les polices génériques

Pour pallier cette problématique, la seule préconisation qui vaille est d’utiliser des groupes de polices dites génériques, qui se trouvent par défaut sur (presque) tous les ordinateurs du monde. Vous allez ainsi vous assurer que vos pages web seront affichées avec des polices de caractères très proches quel que soit le navigateur utilisé, quel que soit le type de système d’exploitation utilisé (Mac OS, Windows ou Linux).

Il existe trois groupes de polices de caractères utilisables pour vos pages web. Chaque groupe est constitué de trois polices présentes...

1. La problématique

Pour mettre en forme votre texte, vous pouvez modifier la taille de caractères. Là encore, il faut faire bien attention. La mise en forme va se faire avec les feuilles de style, les CSS, avec lesquelles vous pourrez choisir l’unité voulue pour modifier la taille des caractères. Le principe est simple, vous ne devez pas utiliser une unité qui empêche l’augmentation de la taille du texte dans votre navigateur. Par défaut, tous les navigateurs permettent d’augmenter la taille du texte, afin d’avoir un meilleur confort visuel des pages affichées, que ce soit pour les personnes handicapées ou celles ayant un problème ophtalmologique.

2. Les unités relatives

Pour que les utilisateurs des navigateurs puissent augmenter la taille du texte des pages web sans difficulté, vous devez utiliser une unité relative (qui se redimensionne bien à l’écran) et non une taille fixe (qui ne se redimensionne pas correctement à l’écran).

Les unités fixes à proscrire sont : le point (noté pt), le centimètre (noté cm), le millimètre (noté mm), le pouce (noté in) et le pica (noté pc).

Les deux unités relatives à utiliser sont : le pourcentage (noté %), le cadratin (noté em) et le cadratin relatif à...

1. Utiliser des liens

Les liens hypertextes sont l’essence même des sites web et du langage HTML. Ils permettent de lier les pages des sites web entre elles.

2. Les différents types de liens

Vous pouvez utiliser de nombreux types de liens hypertextes selon le contexte de votre page web, selon la place disponible, selon l’expérience des visiteurs.

Le lien le plus courant et le plus utilisé est le lien textuel. C’est sur un ou plusieurs mots que le visiteur de votre site va cliquer pour accéder à la page voulue. Par défaut, le texte des liens est écrit en couleur bleue et est souligné.

Voici l’exemple de liens textuels soulignés sur le site du W3C :

Mais le soulignement des liens est de moins en moins utilisé actuellement, les designers personnalisent les liens avec des règles CSS. Les liens sont plutôt affichés avec une autre couleur que celle du texte et avec parfois un style un peu plus épais. Dans d’autres sites, le lien souligné n’apparaît qu’au survol de celui-ci.

Voici un exemple sur le site lemonde.fr :

Le lien inactif :

Le lien est souligné à son survol :

Les barres de navigation permettent de regrouper dans un même espace une multitude de liens qui rappellent l’utilisation des logiciels.

Lorsqu’il y a beaucoup de lien à afficher dans une barre...

1. Des images optimisées pour le Web

Pour illustrer vos propos, vous allez certainement utiliser des images. Vous ne pouvez pas placer n’importe quelle image dans vos sites web. Il faut que les images ne soient pas trop grandes, pour éviter un temps de chargement trop long qui fera fuir les visiteurs, et les optimiser dans un format d’image qui soit reconnu par les navigateurs web.

L’objectif de cette optimisation est de réduire le poids de l’image pour avoir un temps de chargement moindre. Cette optimisation se fait par une compression de l’image. Mais qui dit compression dit réduction de la quantité d’information, donc dégradation de la qualité visuelle de l’image. Il faudra donc toujours trouver l’équilibre entre un poids pas trop élevé et une qualité visuelle acceptable. 

2. La taille des images

Il ne faut pas que vos images soient trop grandes . Plus la taille est grande, plus le poids du fichier est important et plus le temps de chargement sera long. L’unité de mesure est le pixel. Un pixel est un point lumineux de votre écran, sachant qu’en fonction de la technologie et de la qualité de votre écran, la taille des pixels peut varier.

3. Les formats pour le Web

Les navigateurs web ne reconnaissent que trois formats d’image : le GIF, le JPEG et le PNG. Ces trois formats ont trois objectifs...

1. L’utilité des formulaires

Les formulaires sont un élément important dans l’interaction avec les visiteurs. Les formulaires vont permettre aux internautes de saisir des informations afin d’obtenir un résultat attendu. Cela peut être un choix de produit, une demande de documentation, une réservation pour une prestation, une inscription, une demande de contact...

2. Les éléments des formulaires

L’élément de formulaire le plus « classique » est le champ de saisie, dans lequel vous pouvez effectuer une saisie. Selon les besoins du responsable du site, le nombre de caractères saisis peut être limité.

Vous pouvez aussi avoir un champ de saisie sur plusieurs lignes, pour pouvoir saisir une quantité de texte plus importante.

Certains champs de saisie peuvent masquer la saisie dans le cas d’une utilisation d’un mot de passe par exemple.

Exemples de champs de saisie :

Lorsque vous souhaitez proposer un choix unique, vous pouvez utiliser les boutons radio.

Pour les choix multiples, utilisez des cases à cocher.

Pour les nombreux choix uniques, vous pouvez utiliser une liste déroulante.

Les listes peuvent aussi être apparentes et proposer des choix multiples.

Vous pouvez aussi demander aux visiteurs de vous fournir un fichier : une photo, un document bureautique...

Enfin, les formulaires devront...

1. Les sites statiques

Un site dit « statique » est un site web dont toutes les informations affichées à l’écran ont été saisies dans les pages HTML. C’est un site qui se suffit à lui-même, qui n’a pas besoin d’aller chercher des informations à l’extérieur de ses propres pages HTML.

La mise en forme de ce type de site se fait bien sûr en CSS et le développeur peut ajouter des interactions avec du JavaScript.

Actuellement, ce type de site est de plus en plus rare car il est peu courant que toutes les informations à afficher proviennent uniquement de données stockées dans les pages HTML. La plupart des sites actuels affichent des informations qui proviennent de base de données stockées sur des serveurs spécialisés.

2. Les sites dynamiques

Un site dit « dynamique » est un site web dont une partie ou la totalité des informations affichées à l’écran sont stockées dans une base de données. Cela permet de gérer de grandes quantités d’informations, saisies par des contributeurs dans une interface simplifiée.

Actuellement la très grande majorité (si ce n’est la totalité) des sites pour le grand public est conçue de cette manière.

Pour mettre en place...