Suivez-nous sur X
|
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z,
ALL
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
A propos d'Obligement
|
|
David Brunet
|
|
|
|
En pratique : HTML - Mise en forme des documents (les séparateurs)
(Article écrit par Jean-François Richard - août 2009)
|
|
Nous allons aborder le sujet de la mise en forme des documents, avec notamment les séparateurs, les paragraphes, en encore
la notion de division qui ne sera pleinement exploitable que lors de l'utilisation des CSS.
La mise en forme des documents
Les séparateurs
Nous allons maintenant nous intéresser aux séparateurs de texte, ils sont de plusieurs types :
- Les retours chariots (à la ligne).
- Les paragraphes.
- Les divisions.
- Les règles.
Le retour chariot
Le retour chariot permet de faire un retour en début de ligne suivante pour le texte suivant cette balise orpheline <br>.
Il est à noter l'inexistence d'attributs pour cette balise.
Code source de la page "retour_chariot" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>TD 10 : Retour chariot</title>
</head>
<body>
Voici une ligne tapée de façon tout à fait naturelle.
<br>
Enfin entre chaque mot de cette ligne existe des tabulations.
</body>
</html>
|
Image 3 : Exemple de retour chariot
Cet élément de positionnement dans l'affichage de la page s'obtient par la balise <br>. Elle ne comprend pas de balise de
fermeture car elle se suffit à elle-même comme quelques autres balises que nous verrons bientôt.
Les éléments séparateurs sont : BR, CENTER, NOBR, PRE, SPACER, TABLE et WBR.
| Élément |
Description |
Exemple |
| BR |
Insère une césure de ligne dans le texte le contenant |
Voir exemple ci-dessus |
| CENTER |
Centre le texte encadré. Non recommandé par le W3C, plutôt utiliser les attributs ou feuilles de styles |
|
| NOBR |
Créer une portion de texte insécable |
|
| PRE |
Affichage d'un texte sans formatage, avec une police à largeur fixe |
|
| TABLE |
Définition d'un tableau |
|
| WBR |
Définit un point de césure de ligne |
|
Tableau 2 : les éléments séparateurs
Exercice : gérer la fin de ligne de façon cohérente dans la page Web où vous aviez tapé n'importe quoi au clavier.
Voyons les attributs de ces nouveaux éléments :
| Élément |
Attribut |
Valeur |
Description |
| BR |
class |
nom de classe |
CSS |
| BR |
clear |
left, right, all |
Marge gauche, droite, ou les deux à la fois |
| BR |
style |
valeur |
Style interne |
| BR |
id |
identifiant unique |
CSS |
| BR |
title |
titre |
Titre interne |
| CENTER |
obsolète |
|
|
| NOBR |
aucun |
|
|
| PRE |
align |
center, left, right |
|
| PRE |
class, id, style, title |
|
Voir BR |
| PRE |
dir |
|
Direction d'affichage |
| PRE |
lang |
|
Langue utilisée |
| PRE |
evenements |
|
|
| PRE |
width |
Nombre de caractère par ligne |
Largeur du texte spécifié |
| WBR |
aucun |
|
|
Tableau 3 : les attributs des éléments séparateurs
Les éléments "BR" et "WBR" sont des éléments orphelins.
Maintenant, apprenons à formater du texte de façon plus fine et précise.
Les paragraphes
Les paragraphes sont un élément clé de la mise en place de pages Web harmonieuses, car si le texte est affiché de façon brute,
cela est peu attractif pour l'oeil et donne encore moins envie de poursuivre dans l'étude du contenu de la page en cours de lecture.
Code source de la page "paragraphes" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Les paragraphes</title>
</head>
<body>
Le texte qui suit est un nouveau paragraphe
<p>Ce texte est inclus dans le nouveau paragraphe</p>
Le texte suivant n'est pas dans le paragraphe
<p>Encore un nouveau paragraphe
<!-- les paragraphes ont pour attributs leurs alignements -->
</body>
</html>
|
Image 4 : Paragraphe in and out
A partir du code source de cette page, on remarque deux choses :
Premièrement, les paragraphes organisent le texte, mais cela n'est pas si évident.
Deuxièmement, cela provoque un saut de ligne avant le début (la balise d'ouverture du paragraphe) en insérant une ligne blanche.
Ainsi, le HTML met en évidence le paragraphe dans le corps du texte et rend le texte plus aéré et attractif pour l'internaute.
Remarque : notez aussi qu'il manque une balise de fermeture pour le dernier paragraphe, ce qui prouve encore la grande tolérance
des sources HTML et des navigateurs dans leurs interprétations du langage à balise HTML. Selon les recommandations du W3C et si
l'on veut écrire ses pages avec un code source propre, il est indispensable de bien coder la balise de fermeture.
On peut alors jouer avec les attributs du marqueur <p>, ces derniers sont identiques à ceux de l'élément "BR".
Les attributs des paragraphes
Code source de la page "attributs des paragraphes" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Les attributs des paragraphes
</head>
<body>
Le texte qui suit est un nouveau paragraphe
<p align="center">Ce texte est inclus dans le nouveau paragraphe</p>
<p align="right">Le texte suivant est dans un autre paragraphe</p>
<p align="left">Encore un nouveau paragraphe</p>
</body>
</html>
|
Image 5 : Les attributs des paragraphes en action
Astuce : toujours entourer de guillemets les valeurs des attributs, même si vous remarquez que cela n'a pas d'incidence, votre code
n'en sera que plus rigoureux.
Exercice : faire une page avec trois paragraphes (introduction, discussion, conclusion) comme dans les résumés/discussions
du collège.
Les divisions
Les divisions sont utiles si l'on veut formater un texte sans avoir le problème récurrent des balises de paragraphes effectuant
un saut de ligne obligatoirement.
La balise <div> permet de pallier cela. De plus, elle permet de délimiter une zone.
Elle possède comme la balise de paragraphe et de retour chariot, l'attribut alignement (align).
Voici le code source de la page "les_divisions" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Les divisions</title>
</head>
<body>
Ce texte est au-dessus d'une division alignée au centre de la page.
<div align="center">
Et ce texte est dans la division.
<br>
Une autre ligne dans la division.
</div>
Ce texte est en dehors de la division
</body>
</html>
|
Image 1 : exemple de division dans un texte
(cela ressemble fortement aux paragraphes à première vue)
En résumé : les divisions permettent de structurer le document hypertexte en différentes sections, une par division. Nous
verrons ultérieurement leur utilité dans le cadre des feuilles de style.
Remarque : pour Interet Explorer, l'attribut "nowrap" existe, il permet de supprimer les retours à la ligne automatique, attention
donc lors de son utilisation.
Les règles
Nous allons maintenant assimiler une notion importante dans la présentation du texte et de sa séparation physique et visible à
l'écran par la règle, ligne horizontale de plus ou moins grande taille et possédant plusieurs attributs sur lesquels on peut jouer.
Voici le code source de la page "les_regles" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Les règles</title>
</head>
<body>
Ce texte est au-dessus d'une règle.
<hr>
Et celui-ci est en dessous d'une règle.
<br>
Les règles peuvent avoir différentes tailles
<hr width="25%">
<hr width="50%">
<hr width="75%">
<hr width="100%">
<hr width="75%">
<hr width="50%">
<hr width="25%">
Elles peuvent être exprimées en pourcentage de l'écran de navigation
exemple de 80% de l'écran:
<hr width="80%">
ou en pixels
ici pour un écran de 640 pixels
<hr width="640">
<p>
une règle de 2 pixels (taille par défaut sur le navigateur Internet Explorer).
<hr>
Les trois règles suivantes ont une hauteur de 4, 12 et 72 pixels.
<hr size="4">
<hr size="12">
<hr size="72">
</p>
De plus, les règles peuvent être pleines ou vides
<hr size=12>
<br>
<hr size=12 noshade>
</body>
</html>
|
Il faut préciser que les règles peuvent avoir des attributs spécifiant leur largeur ou leur épaisseur ce qui est très
intéressant au niveau de la présentation de document.
L'attribut nous intéressant est "width" (largeur) et "size" (taille).
On peut spécifier ces attributs dont la valeur est exprimée par des nombres :
- En pixel (ex : width="100") pour une largeur de 100 pixels par rapport à la résolution de l'écran (dans notre exemple, 100
pixels équivaut à 1/12 de l'écran en première approximation, car la largeur de l'écran est de 1280 pixels).
- En pourcentage (ex : size="10%") équivalent à une taille de 10% de l'écran dans le sens de sa hauteur (dans notre exemple,
environ 76 pixels d'épaisseur de la règle, car 10% de la résolution de l'écran de 768 pixels).
Image 2 : des règles en action !
Allons plus loin dans l'étude des règles avec les règles vides et pleines.
Une règle est vide par défaut, il faut ajouter l'attribut "noshade" pour avoir une règle avec une trame.
Image 3 : règle vide ou pleine
En résumé : les règles permettent d'apporter des divisions visibles dans le texte et ainsi de donner des repères visuels
à l'internaute. Il ne faut pas trop de règles, sauf dans le cas de texte très long nécessitant des coupures marquées, comme
dans le cas de chapitre d'un livre.
|
