Texte

Le texte est la matière première de tout document Web. Dans ce chapitre, nous allons passer en revue les éléments HTML principaux qui concernent le texte. Ces éléments sont de deux natures :

Entités HTML

La syntaxe du langage HTML s'appuie sur un certain nombre de caractères appelés caractères réservés. Par exemple, les caractères < et > sont utilisés pour insérer la balise d'un élément HTML.

Afin d'utiliser ces caractères réservés dans le corps de votre document Web et de les voir s'afficher dans la fenêtre du navigateur, il convient de les remplacer par leur entité HTML. Une entité HTML est définie par une suite de lettres ou un nombre, précédée du caractère & et suivie de ;. Certaines de ces entités sont listées dans le tableau ci-dessous.

Affichage Description Nom de l'entité Code de l'entité
  espace insécable &nbsp; &#160;
< plus petit &lt; &#60;
> plus grand &gt; &#62;
& esperluette &amp; &#38;
" guillemet &quot; &#34;
€ euro &euro; &#8364;
© copyright &copy; &#169;

Pour accéder à la liste exhaustive des toutes les entités HTML, vous pouvez consulter le Character Entity Reference Chart du W3C.

Exercice

Créez un document Web emoticons.html à partir du texte ci-dessous en prenant soin de remplacer les caractères réservés (<, >, & et ") par leur entité HTML. 

Emoticons

Emoticons are textual portrayals of a writer's moods or facial
expressions in the form of icons. Originally, these icons
consisted of ASCII art.

Emoticons can generally be divided into two groups: Western (mainly
from America and Europe) or horizontal; Eastern or vertical (mainly
from east Asia).

Western

Western style emoticons are mostly written from left to right as
though the head is rotated counter-clockwise 90 degrees. 

Smiley: :‑) :->
Tongue-tied: :‑&
Broken heart: <\3
Rose: @}->--
Fish: ><(((*>

Eastern

Eastern emoticons generally are not rotated sideways. They first
arose in Japan, where they are referred to as kaomoji. 

Troubled: (>_<)
Sad: ("_")
Cat: (=^·^=)
Headphones: ((d[-_-]b))
Correction 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Emoticons</title>
  </head>
  <body>
    Emoticons

    Emoticons are textual portrayals of a writer's moods or facial
    expressions in the form of icons. Originally, these icons
    consisted of ASCII art.

    Emoticons can generally be divided into two groups: Western (mainly
    from America and Europe) or horizontal; Eastern or vertical (mainly
    from east Asia).

    Western

    Western style emoticons are mostly written from left to right as
    though the head is rotated counter-clockwise 90 degrees. 

    Smiley: :‑) :-&gt;
    Tongue-tied: :‑&amp;
    Broken heart: &lt;\3
    Rose: @}-&gt;--
    Fish: &gt;&lt;(((*&gt;

    Eastern

    Eastern emoticons generally are not rotated sideways. They first
    arose in Japan, where they are referred to as kaomoji. 

    Troubled: (&gt;_&lt;)
    Sad: (&quot;_&quot;)
    Cat: (=^·^=)
    Headphones: ((d[-_-]b))
  </body>
</html>

Info

La mise en page du résultat dans la fenêtre du navigateur n'est pas conforme au code source HTML. En effet, les espaces supplémentaires ainsi que les retours à la ligne sont ignorés par le navigateur. Il convient maintenant de structurer le texte avec des éléments HTML (h1, p, pre, etc) dont la présentation peut-être modifiée avec le langage CSS.

Éléments HTML de structuration

Comme leur nom l'indique, les éléments de structuration permettent d'organiser le contenu texte du document HTML en blocs (titres, paragraphes, etc).

h1

Titre de niveau 1. Il existe jusqu'à 6 niveaux de titres de h1 à h6. L'élément h1 représente un titre principal, h2 un sous-titre, h3 un sous-sous-titre et ainsi de suite. 

<h1>1. Approche intégrale des équations de Lagrange</h1>
<h2>1.1 Définition du Lagrangien</h2>
<h2>1.2 Principe de moindre action</h2>
<h2>1.3 Équations de Lagrange</h2>
<h3>1.3.1 Expression intégrale du Lagrangien</h3>
<h3>1.3.2 Gestion des contraintes holonomes</h3>

1. Approche intégrale des équations de Lagrange

1.1 Définition du Lagrangien

1.2 Principe de moindre action

1.3 Équations de Lagrange

1.3.1 Expression intégrale du Lagrangien

1.3.2 Gestion des contraintes holonomes

p

Paragraphe de texte. 

<p>
  Il était une fois, dans une contrée lointaine...
</p>
<p>
  Ils se marièrent et eurent beaucoup d'enfants.
</p>

Il était une fois, dans une contrée lointaine...

Ils se marièrent et eurent beaucoup d'enfants.

hr

Ligne horizontale de séparation (balise auto-fermante : balise fermante inexistante). 

<p>Au-dessus</p>
<hr>
<p>Au-dessous</p>

Au-dessus

En-dessous

br

Saut de ligne (balise auto-fermante : balise fermante inexistante).

En effet, même si vous utilisez des sauts de ligne au sein de votre code source HTML, ils seront ignorés par le navigateur lors de l'affichage de votre document. Utilisez cet élément avec parcimonie et jamais pour des considérations de présentation : rappelez-vous, c'est le rôle de CSS. 

<p>
  Olivier Nocent<br>
  Tél : +33 (0)3 26 91 84 58<br>
  Fax : +33 (0)3 26 91 30 49
</p>

Olivier Nocent
Tél : +33 (0)3 26 91 84 58
Fax : +33 (0)3 26 91 30 49

pre

Zone de texte préformaté, affiché avec une police à chasse fixe (caractères de largeur identique). Les espaces et les retours à la ligne sont reproduits fidèlement par le navigateur. 

<p>Triangle de Penrose</p>
<pre>
          _____
         /    /\
        /    /  \
       /    /    \
      /    /  /\  \
     /    /  /  \  \
    /    /  /\   \  \
   /    /  /  \   \  \
  /    /__/____\   \  \
 /              \   \  \
/________________\   \  \
\_____________________\ /</pre>

Triangle de Penrose

          _____
         /    /\
        /    /  \
       /    /    \
      /    /  /\  \
     /    /  /  \  \
    /    /  /\   \  \
   /    /  /  \   \  \
  /    /__/____\   \  \
 /              \   \  \
/________________\   \  \
\_____________________\ /

sup

Texte en exposant. 

Théorème de Pythagore :
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
Théorème de Pythagore : a2 + b2 = c2

sub

Texte en indice. 

Formule chimique de l'eau :
2H<sub>2</sub> + O<sub>2</sub> &rarr; 2H<sub>2</sub>O
Formule chimique de l'eau : 2H2 + O2 → 2H2O

Exercice

Structurez le contenu du fichier emoticons.html en prenant soin de hiérarchiser les titres.

Correction 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Emoticons</title>
  </head>
  <body>
    <h1>Emoticons</h1>

    <p>
      Emoticons are textual portrayals of a writer's moods or facial
      expressions in the form of icons. Originally, these icons
      consisted of ASCII art.
    </p>

    <p>
      Emoticons can generally be divided into two groups: Western (mainly
      from America and Europe) or horizontal; Eastern or vertical (mainly
      from east Asia).
    </p>

    <h2>Western</h2>

    <p>
      Western style emoticons are mostly written from left to right as
      though the head is rotated counter-clockwise 90 degrees. 
    </p>

    <p>
      Smiley: :‑) :-&gt;<br>
      Tongue-tied: :‑&amp;<br>
      Broken heart: &lt;\3<br>
      Rose: @}-&gt;--<br>
      Fish: &gt;&lt;(((*&gt;<br>
    </p>

    <h2>Eastern</h2>

    <p>
      Eastern emoticons generally are not rotated sideways. They first
      arose in Japan, where they are referred to as kaomoji. 
    </p>

    <p>
      Troubled: (&gt;_&lt;)<br>
      Sad: (&quot;_&quot;)<br>
      Cat: (=^·^=)<br>
      Headphones: ((d[-_-]b))<br>
    </p>
  </body>
</html>

Éléments HTML d'annotation

Les éléments d'annotation quant à eux permettent de mettre en évidence un mot ou un groupe de mots en fonction de leur signification ou fonction (citation, abbréviation, extrait de code, etc). Ils permettent aussi de guider les robots de moteur de recherche dans l'analyse de vos documents Web et d'améliorer par conséquent leur indexation.

em

Mise en emphase d'un bloc de texte. 

<em>J'adore</em> regarder danser les gens.
J'adore regarder danser les gens.

strong

Délimite un bloc de texte important. 

J'adore, j'adore, <strong>j'adore</strong>.
J'adore, j'adore, j'adore.

code

Fragment de code informatique. 

La fonction JavaScript <code>Math.sqrt()</code>
évalue la racine carrée.
La fonction JavaScript Math.sqrt() évalue la racine carrée.

blockquote

Délimite une citation de plusieurs lignes. L'attribut cite permet de renseigner la source de la citation. 

<p>Tim Berners-Lee a écrit :</p>
<blockquote cite="http://www.w3.org/People/Berners-Lee/Kids.html">
  <p>
    I just had to take the hypertext idea and connect it
    to the TCP and DNS ideas and -- ta-da! -- the World Wide Web
  </p>
</blockquote>

Tim Berners-Lee a écrit :

I just had to take the hypertext idea and connect it to the TCP and DNS ideas and -- ta-da! -- the World Wide Web

q

Délimite une citation courte au sein d'un paragraphe. 

Jacques Tati a dit <q>Trop de couleur distrait le spectateur</q>.
Jacques Tati a dit Trop de couleur distrait le spectateur.

cite

Référence à un document externe (livre, film, site, ...). 

Douglas Adams a écrit <cite>le guide du routard intergalactique</cite>.
Douglas Adams a écrit le guide du routard intergalactique.

abbr

Abréviation ou acronyme. L'attribut title est utilisé pour expliciter la définition complète. 

Bienvenue à l'<abbr title="Université de Reims Champagne-Ardenne">URCA</abbr>
Bienvenue à l'URCA

dfn

Définition d'un nouveau terme. 

Un <dfn>triangle rectangle</dfn> est un triangle avec un angle droit.
Un triangle rectangle est un triangle avec un angle droit.

time logo HTML5

Délimite un bloc de texte correspondant à une date. L'attribut datetime permet de renseigner la date au format ISO 8601 (YYYY-MM-DDTHH:MM+HH:MM) afin d'aider les robots de moteur de recherche à interpréter une date ou une heure sans ambiguïté. 

L'entretien est fixé au
<time datetime="2013-09-20T15:30+02:00">20 septembre à 15h30</time>
L'entretien est fixé au

Exercice

Créez un fichier twitter.html à partir du texte ci-dessous en utilisant des éléments de structuration (h1, p, etc) et d'annotation (em, q, blockquote, time, etc). 

A BRIEF HISTORY OF THE EVER-EXPANDING TWEET
by Arielle Pardes 09.26.17 05:00 PM (NYC)

WIRED.com

For as long as Twitter has existed, it has been a place of brevity,
if not levity. The 140 character limit - originally created so that
tweets could fit into single SMS messages - is as much a part of the
brand as the silhouetted bird. You want to yell about the NFL, hurl
some insults at the president? Fine. Just make it quick.

Starting today, the platform will let a small group of beta testers
experiment with a 280 character limit, doubling what can fit into a
single tweet.

Twitter says it made the move primarily for parity in language.
"Our research shows us that the character limit is a major cause of
frustration for people tweeting in English, but it is not for those
tweeting in Japanese" says Aliza Rosen, a product manager at Twitter.

"This is a small change, but a big move for us. 140 was an arbitrary
choice based on the 160 character SMS limit. Proud of how thoughtful
the team has been in solving a real problem people have when trying
to tweet. And at the same time maintaining our brevity, speed,
and essence!"
Jack Dorsey, Twitter CEO - 11:00 PM - Sep 26, 2017 (San Francisco)

This will be the first time that Twitter directly increases the
charactercount on tweets, but it follows a string of subtle changes
to "maximize" the amount of content users can stuff inside a single
tweet.
Correction 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>WIRED</title>
  </head>
  <body>
    <h1>A BRIEF HISTORY OF THE EVER-EXPANDING TWEET</h1>
    <p>
      by Arielle Pardes
      <time datetime="2017-09-26T17:00-04:00">09.26.17 05:00 PM</time>
      (NYC)
    </p>

    <cite>WIRED.com</cite>

    <p>
      For as long as Twitter has existed, it has been a place of brevity,
      if not levity. The 140 character limit - originally created so that
      tweets could fit into single
      <abbr title="Short Message Service">SMS</abbr>
      messages - is as much a part of the brand as the silhouetted bird.
      You want to yell about the
      <abbr title="National Football League">NFL</abbr>,
      hurl some insults at the president? Fine. Just make it quick.
    </p>

    <p>
      Starting <time datetime="2017-09-26">today</time>, the platform will
      let a small group of beta testers experiment with a 280 character limit,
      doubling what can fit into a single tweet.
    </p>

    <p>
      Twitter says it made the move primarily for parity in language.
      <q>
        Our research shows us that the character limit is a major cause of
        frustration for people tweeting in English, but it is not for those
        tweeting in Japanese
      </q> says Aliza Rosen, a product manager at Twitter.
    </p>

    <blockquote>
      <p>
        This is a small change, but a big move for us. 140 was an arbitrary
        choice based on the 160 character SMS limit. Proud of how thoughtful
        the team has been in solving a real problem people have when trying
        to tweet. And at the same time maintaining our brevity, speed,
        and essence!
      </p>
      <p>
        Jack Dorsey,
        Twitter <abbr title="Chief Executive Officer">CEO</abbr> -
        <time datetime="2017-09-26T11:00-07:00">11:00 AM - Sep 26, 2017</time>
        (San Fancisco)
      </p>
    </blockquote>

    <p>
      This will be the first time that Twitter directly increases the
      charactercount on tweets, but it follows a string of subtle changes
      to <em>maximize</em> the amount of content users can stuff
      inside a single tweet.
    </p>
  </body>
</html>