outils et langages numériques

1 - Structurer sa page

Pour contenir l'ensemble de votre texte (construction du squelette de la page), vous allez convoquer les balises sectionnantes <section> et <article> :

Résultat dans un navigateur :

La balise sectionnante <section> est utilisée pour regrouper des contenus liés logiquement (qui traitent du même sujet) et créer des sections de page. Elle peut être multipliée dans la page.

L'élément de contenu <article> constitue une section de contenu indépendante. Dans cet élément <article> on peut investir :
- les paragraphes <p> pour organiser le corpus textuel et
- les titres de <h2> à <h6>. Si le titre <h1> n’a pas été utilisé, avant dans le <header> par exemple, alors il peut être convoqué.

2 - Structurer son contenu textuel

Pour respecter la structure initiale d'un texte constitué de paragraphes, vous allez convoquer l'élément HTML p pour chaque paragraphe à créer :

Résultat dans un navigateur :

Les paragraphes sont généralement représentés comme des blocs et séparés par un espace horizontal (saut de ligne).
Préconisation : répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page pour les personnes en situation de handicap visuel. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.

3 - Hiérarchiser les niveaux de titre

Pour matérialiser dans votre texte différentes valeurs de titres, vous allez convoquer les éléments h1 à h6. Ils représentent six niveaux de titres dans un document, h1 est le plus important et h6 est le moins important. Un élément de titre a une valeur sémantique (relative au sens) et décrit brièvement le sujet de la section qu'il introduit :

Résultat dans un navigateur :

Les paragraphes sont généralement représentés comme des blocs et séparés par un espace horizontal (saut de ligne).
Préconisation : répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page pour les personnes en situation de handicap visuel. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.

Vous trouverez ici un tableau indiquant les valeurs en px, en em et accessoirement en pt pour ces six niveaux de titre.

4 - Mettre en valeur en gras

L'élément HTML b permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras, cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS font-weight qu'il faut utiliser. L'exemple ci-dessous embarque un style CSS inline pour le côté pratique de la démonstration mais il peut être déporté dans une feuille de styles externe. La valeur bold équivaut à une valeur numérique de 700.

Résultat dans un navigateur :

L'élément HTML strong indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent (tels que des messages d'avertissement par exemple). Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques.

Si l'élément est d'une importance particulière, on utilisera l'élément HTML strong.

Résultat dans un navigateur :

Pour les puristes
strong représente une logique, apporte une différence sémantique. Alors que b ne représente qu'une mise en forme, l'apparence. Séparer la forme de la sémantique est important et permet éventuellement de représenter cette même sémantique d'une certaine manière, que ce soit en gras, en rouge, souligné ou encore avec une autre taille de police. Changer le style, la présentation de strong est pertinent, contrairement à b.

5 - Mettre en valeur en italique

L'élément HTML i représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.

Résultat dans un navigateur :

L'élément HTML em (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister.

Résultat dans un navigateur :

Pour les puristes
em représente l'accentuation de son contenu, tandis que l'élément i représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique.

Particularisme : le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture, doit utiliser l'élément HTML cite.

6 - Gérer les espaces

Dans les documents imprimés, et avec l’aide du logiciel Adobe Indesign, on peut insérer une espace fine sécable ou une espace fine insécable.

Dans les documents HTML, la syntaxe pour insérer et matérialiser l’espace insécable est l’entité :   (pour Non Breakable SPace). Celle-ci a les mêmes caractéristiques visuelles que l’espace régulière, avec l’avantage de garder sur une même ligne les caractères étant de chaque côté.

Résultat dans un navigateur :

Par ailleurs, pour marquer une espace fine insécable, l’entité à convoquer est :   et si toutefois vous désirez convoquer une espace fine, saisissez :  .

Le tableau, ci-après, fait le point sur l'usage des différents types d'espace (ou non) à convoquer avant et après les signes de la ponctuation française. L'espace justifiante correspond à la saisie d'une espace en sollicitant la barre espace (cette espace justifiante présente une largeur variable selon la justification choisie - exemple du texte justifié) :

7 - Marquer un retour à la ligne

Pour réaliser un saut de ligne dans un texte, lorsqu'il a une importance (par exemple lorsqu'on écrit une adresse ou un poème), vous allez convoquer l'élément br :

Résultat dans un navigateur :

Attention, br ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété CSS <margin> sur l'élément HTML p.

8 - Créer une liste

Pour réaliser une liste d'éléments textuels vous avez le choix entre deux types de liste différents : la liste ordonnée ol ou la liste non ordonnée ul. Ils se complètent de l'élément HTML li qui est utilisé pour représenter un élément dans une liste.

8^.1 - L'élément HTML ol représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La modification de cette numérotation s'opère avec une feuille de style CSS associée en convoquant la propriété list-style-type. ^{voir exemple}

Résultat dans un navigateur :

Première variante : l'élément ol s'enrichit d'un attribut de caractère type="I" qui aura pour effet de modifier les nombres en chiffres romains en capitales :

Résultat dans un navigateur :

Seconde variante : l'élément ol s'enrichit d'un attribut de caractère type="A" qui aura pour effet de modifier les nombres en lettres capitales :

Résultat dans un navigateur :

8^.2 - L'élément HTML ul représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces. La mise en forme d'un indice permettant le classement s'opère avec une feuille de style CSS associée en convoquant la propriété list-style-type. ^{voir exemple}

Résultat dans un navigateur :

8^.3 - L'élément HTML li est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée (ol), une liste non ordonnée (ul) ou un menu (menu). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre. Exemple :

9 - Surligner un mot

Pour mettre en évidence un mot de votre texte vous pouvez convoquer élément HTML mark qui a pour effet de le marquer, de le surligner. La mise en forme du surlignage n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété background-color.

Résultat dans un navigateur :

Sur cet exemple la couleur du surlignage (jaune fluo par défaut) a été changée dans la feuille de style pour un cyan :

10 - Créer un lien hypertexte

L'élément HTML a (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers une page web, un fichier, une adresse e-mail, un emplacement se trouvant dans la même page. Le contenu de chaque élément a doit indiquer la destination, relative ou absolue, du lien.

Cet élément peut inclure un attribut target dont la fonction est précisée en fin de cet article.

10a - Exemple pour renvoyer vers une page web : ^{url absolue}

Résultat dans un navigateur :

10b - Exemple pour ouvrir ou télécharger un fichier : ^{url relative}

Résultat dans un navigateur :

10c - Exemple pour renvoyer vers une adresse mail :

Résultat dans un navigateur :

10d - Exemple pour renvoyer vers une autre partie de la même page (ancre) :

Résultat dans un navigateur :

Par défaut, lorsque l’utilisateur clique sur un lien, la redirection se produit sur la page courante du navigateur. En ajoutant un attribut au lien href, vous pouvez indiquer au navigateur d’ouvrir la page de redirection dans l’onglet courant ou dans un nouvel onglet.

L'attribut convoqué est target et les deux valeurs les plus convoquées sont :
- _self : est la valeur par défaut et implique que le lien s’ouvre dans le même onglet ou sur la même page.
- _blank : le lien hypertexte s’ouvre dans un nouvel onglet ou une autre fenêtre.

Résultat dans un navigateur :

Sans convocation de l'attribut target dans votre lien href, votre redirection se fait dans la page à partir de laquelle vous avez cliqué.