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 :
- Éléments HTML de structuration
- Éléments HTML d'annotation
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 | |
  |
|
| < | plus petit | < |
< |
| > | plus grand | > |
> |
| & | esperluette | & |
& |
| " | guillemet | " |
" |
| € | euro | € |
€ |
| © | copyright | © |
© |
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))
<!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: :‑) :->
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))
</body>
</html>É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>sub
Texte en indice.
Formule chimique de l'eau :
2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>OExercice
Structurez le contenu du fichier emoticons.html en prenant soin
de hiérarchiser les titres.
<!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: :‑) :-><br>
Tongue-tied: :‑&<br>
Broken heart: <\3<br>
Rose: @}->--<br>
Fish: ><(((*><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: (>_<)<br>
Sad: ("_")<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.strong
Délimite un bloc de texte important.
J'adore, j'adore, <strong>j'adore</strong>.code
Fragment de code informatique.
La fonction JavaScript <code>Math.sqrt()</code>
évalue la racine carrée.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>.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>.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>dfn
Définition d'un nouveau terme.
Un <dfn>triangle rectangle</dfn> est un triangle avec un angle droit.time 
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>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.
<!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>