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 la balise sectionnante <section> :

Résultat dans un navigateur :

Cette balise sectionnante est utilisée pour regrouper des contenus liés logiquement et créer des sections de page. Elle peut être multipliée dans la page et attribuée à chaque partie du texte. (Cette balise peut être suivie par l'élément article)

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 :  . Cette espace étroite est insécable et peut être utilisée à la perfection comme espace fine insécable dans tout document HTML.

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 mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.

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. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.

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é.

11 - Indiquer un commentaire, les droits d'auteur

L' élément HTML small permet de mettre en forme les commentaires annexes, les droits d'auteur et les textes juridiques en petits caractères :

Résultat dans un navigateur :

12 - Mettre en valeur avec l'indice ou l'exposant

12a - L' élément HTML sub est utilisé, pour des raisons typographiques, afin d'afficher du texte en indice (sous la ligne de base et généralement plus petit) par rapport au bloc de texte environnant :

Résultat dans un navigateur :

12b - L' élément HTML sup est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant :

Résultat dans un navigateur :

13 - Les nombreuses propriétés et leurs valeurs pour agir sur le texte

Ces propriétés et leurs valeurs sont à noter dans votre feuille de style CSS liée à votre document HTML. Quatorze des plus essentielles sont listées ci-après : font-family, font-size, font-weight, text-transform, text-decoration, color, text-align, line-height, letter-spacing, word-spacing, font-variant, text-indent et text-shadow.

13a - La propriété font-family et ses valeurs :

Cette propriété permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé. Sa déclaration s'écrit ainsi :

Les nombreuses valeurs sont séparées par des virgules, indiquant chacune une police alternative.
Le navigateur choisira la première valeur family-name pour laquelle la police correspondante est installée sur l'ordinateur ou le serveur distant. Une famille de police générique generic-name doit être incluse dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée. Cette famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin. Les valeurs les plus couremment convoquées sont serif et sans-serif.

13b - La propriété font-size, ses valeurs et unités :

Cette propriété permet de définir la taille du corps typographique utilisé pour les éléments textuels. Sa déclaration s'écrit ainsi :

La valeur convoque une unité qui peut s'exprimer de trois façons différentes :

- L'unité px : l'utilisation de cette unité est plutôt simple et permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Mais cependant, cette méthode est déconseillée car elle n'est pas accessible. Exemple :

Avec l'usage de cette unité, la notion de parent ou d'héritage n'existe pas. Si tourefois vous venez à indiquer une valeur à un parent comme body ou div, les valeurs de h1 et de p ne subiront aucune modification. (voir l'exemple à manipuler…)

- L'unité em : cette unité est relative par rapport à l'unité du parent, elle est qualifiée de dynamique. Exemple :

Dans cet exemple, le parent est body qui a comme mesure 20px. Le h1 aura une taille relative à la taille body. Ici, il mesurera 150% du font-size de body et sera donc plus grand de 50%. Pour p ce sera 90% et il sera donc 10% plus petit.
Si l'on change la taille de body, les tailles de h1 et de p vont augmenter ou diminuer automatiquement par rapport à body. (voir l'exemple à manipuler…)

- L'unité rem : cette unité signifiant root em propose un résultat identique à l'unité em mais la taille sera relative non pas au parent le plus proche, mais à la taille racine du document, c'est-à-dire l'élément <html>. Son usage permet de définir une valeur constante, tout le long du document, égale à la taille de la police de l’élément racine <html>. (voir l'exemple à manipuler)

Supports pédagogiques supplémentaires : l'exemple qui confronte em / rem et l'outil nekoCalc, outil de conversion px / em et inversement.

13c - La propriété font-weight et ses valeurs :

Cette propriété permet de définir la graisse utilisée pour les éléments textuels. Les niveaux de graisse disponibles dépendent de la police engagée dans la mise en page HTML. Certaines fontes n'existent qu'avec les niveaux de graisses normal et bold. D'autres convoquent une valeur numérique 100 à 950.
Voir les exemples des valeurs présentées ci-dessous…

13d - La propriété text-transform et ses valeurs :

Cette propriété permet de définir la façon d'utiliser les lettres capitales pour les éléments textuels. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale.
Voir les exemples des valeurs présentées ci-dessous…

13e - La propriété text-decoration et ses valeurs :

Cette propriété est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte.
C'est une propriété raccourcie qui permet de paramétrer simultanément les propriétés suivantes : text-decoration-line, text-decoration-style, text-decoration-color et text-decoration-thickness. Attention, cette propriété raccourcie peut ne pas fonctionner à la consultation sur smartphone !
Voir les exemples des valeurs présentées ci-dessous…

13f - La propriété color et ses valeurs :

Cette propriété applique une couleur de premier plan à une police de texte et à ses éventuelles décorations (ci-dessus). Sa valeur peut s'exprimer de quatre manières différentes : par un mot-clé pour une couleur nommée, par l'hexadécimal, par la fonction rgb() déclinée en rgba() avec l'alpha pour la transparence :

Pour plus d'informations sur la gestion de la couleur en HTML et CSS, référez-vous à la page dédiée.

13g - La propriété text-align et ses valeurs :

Cette propriété définit l'alignement du texte dans un élément. Quatre valeurs principales sont couramment convoquées :

13h - La propriété line-height et ses valeurs :

Cette propriété précise la hauteur d'une ligne de texte. Quatre valeurs sont couramment convoquées :

13i - La propriété letter-spacing et ses valeurs :

Cette propriété précise l'interlettrage entre chaque lettre du texte. Une valeur négative est autorisée. Deux valeurs sont couramment requises :

13j - La propriété word-spacing et ses valeurs :

Cette propriété précise l'espace intermot entre chaque mot du texte. Une valeur négative est autorisée.

13k - La propriété font-variant et ses valeurs :

Cette propriété permet de définir toutes les variations typographiques pour une police de caractères. Pour la démonstration, nous retiendrons que les petites capitales et les ligatures 
Voir les exemples des deux valeurs présentées ci-dessous…

Point de vigilance : dans le cas d'usage des ligatures, il est impératif de convoquer une typographie qui comporte dans ses glyphes ces particularismes. Google Fonts propose la police de caractères Fira sans.

13l - La propriété text-indent et ses valeurs :

Cette propriété détermine la valeur de l'alinéa, retrait de la première ligne de texte. Une valeur négative est autorisée.
Voir les exemples des valeurs présentées ci-dessous…

13m - La propriété text-shadow et ses valeurs :

Cette propriété permet de créer une ombre portée sous le texte. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.
Voir les exemples des valeurs présentées ci-dessous…

Ombre simple :

Ombres multiples, les différentes ombres sont séparées par une virgule :