SELFHTML: HTML/XHTML / Éléments pour structurer le texte / Éléments généraux pour des passages de texte

	Éléments généraux pour des passages de texte
	Élément de bloc commun Élément de bloc plus ancien pour des passages centrés Élément incorporé commun Formater les éléments communs avec les CSS Autres informations

Élément de bloc commun

Vous pouvez inclure dans un passage commun plusieurs éléments très différents comme du texte, des graphiques, des tableaux etc. Cet élément commun ne fait rien d'autre que de commencer dans une nouvelle ligne du flux de texte. Autrement il n'a aucune propriété. Il est conçu pour être formaté à l'aide de feuilles de style .

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<div align="center">
<h1>Tout centré</h1>
<ul>
<li>tout centré</li>
<li>tout?</li>
<li>tout!</li>
</ul>
</div>

<div align="right">
<h1>Tout contre la marge droite</h1>
<ul>
<li>tout contre la marge droite</li>
<li>tout?</li>
<li>tout!</li>
</ul>
</div>

</body>
</html>

Explication:

Avec <div> vous marquez le début d'un passage dans lequel vous pouvez inclure plusieurs éléments de bloc (div = division = passage). Tout ce qui se trouve entre ce repère et le repère de fermeture </div> est interprété comme partie intégrante du passage.

Vous pouvez aligner un tel passage et tous les éléments qu'il contient avec l'attribut align= dans le repère d'ouverture <div>. Avec align="center" vous centrez le passage avec tous ses éléments (align = alignement, center = centré), avec align="right" vous l'alignez à droite (right = à droite). Avec align="justify" Les éléments qui se trouvent dans ce passage comme du texte des paragraphes ou des titres seront justifiés . Avec align="left" vous vous assurez de l'alignement à gauche des éléments (réglage par défaut).

Attention:

L'élément div va continuer à faire partie du standard HTML. L'attribut align= par contre est classé comme en cours d'abandon et doit `à l'avenir n'y plus figurer. À la place, vous devez travailler avec les feuilles de style CSS.

Élément de bloc plus ancien pour des passages centrés

Vous pouvez centrer ensemble plusieurs paragraphes comportant des éléments très différents comme du texte, des graphiques, des tableaux etc. Vous pouvez ensuite aligner ce passage avec tous ses éléments. Cet élément est cependant classé comme en cours d'abandon. Il est entre-temps devenu superflu et ne doit encore être employé qu'exceptionnellement pour des raisons fondées (par exemple compatibilité vers l'amont avec Netscape 1.1).

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<center>
<h1>Texte artistique centré</h1>
<pre>
<big>.*A*:._.:*R*:._.:*T*:._.:._.::*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:*~*:.</big>
</pre>
</center>

</body>
</html>

Explication:

Avec <center> vous introduisez un passage dans lequel tout ce qui suit est centré (center = centré). Cela peut être par exemple des titres, du texte, des graphiques ou des tableaux. Avec le repère de fermeture </center> la commande pour centrer prend fin.

Élément incorporé commun

Il y a un élément qui, de façon analogue à l'élément div qui peut contenir d'autres éléments de bloc, peut contenir du texte et d'autres éléments incorporés sans avoir lui-même la moindre propriété ni le moindre effet. Il est conçu pour être formaté avec les CSS.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1 style="font-size:500%">
<span style="color:blue">A</span>
<span style="color:red">B</span>
<span style="color:green">C</span>
</h1>

</body>
</html>

Explication:

<span> introduit un passage incorporé commun. </span> met fin à ce passage. L'exemple montre un titre N°1, lui-même déjà formaté avec les CSS pour avoir une taille de police de 500%. À l'intérieur du titre sont notées trois lettres ABC. Chacune d'entre elles est incluse dans un élément span, et pour chaque élément span est affectée à l'aide des CSS une autre couleur de police.

Attention:

Dans la variante "Strict" les éléments incorporés ne peuvent être notés qu'à l'intérieur d'éléments de bloc. Dans l'exemple ci-dessus, c'est le cas étant donné que les éléments span sont placés dans un élément titre.

Formater les éléments communs avec les CSS

Les éléments communs pour passages de texte ne prennent vie que par le formatage. Avec les feuilles de style CSS vous pouvez cependant formater de tels éléments comme vous le désirez. Pour employer des feuilles de style CSS, il vous faut d'abord savoir comment définir des formats CSS. Ensuite, vous serez en mesure d'appliquer les propriétés CSS. En relation avec ce qui vient d'être décrit les données de feuilles de style suivantes sont aussi intéressantes:
formatage de la police
alignement et paragraphes
espaces marges extérieures
espace intérieur
cadres
couleurs et images d'arrière plan
positionnement et affichage d'éléments

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<div style="text-align:center; padding:20px; border:thin solid red; margin:25px">
<h1>Tout centré</h1>
<ul>
<li>tout centré</li>
<li>tout?</li>
<li><span style="font-weight:bold; color:red">tout!</span></li>
</ul>
</div>

<div style="text-align:right; padding:20px; border:thin solid blue; margin:25px">
<h1>Tout contre la marge droite</h1>
<ul>
<li>tout contre la marge droite</li>
<li>tout?</li>
<li><span style="font-weight:bold; color:blue">tout!</span></li>
</ul>
</div>

</body>
</html>

Explication:

L'exemple provoque une sortie similaire à celle de l'exemple du paragraphe Élément de bloc commun, pourtant formaté cette fois avec les feuilles de style CSS et de ce fait également conforme à la variante HTML "Strict". Les deux passages div reçoivent une fine bordure continue, la première rouge, la deuxième bleue. Un espace intérieur de 20 pixels fait en sorte que le texte ne colle pas à la bordure, et un marge de 25 pixels garantit qu'il y ait de la place à gauche, à droite, en haut et en bas de la bordure. Le dernier point de la liste est marqué dans chacune d'entre elles avec un élément incorporé vide span et reçoit un formatage en caractères gras et une couleur de police.

Autres informations

Dans le sommaire de référence HTML vous trouverez des données précisant où les éléments conteneurs peuvent être mis, quels autres éléments ils peuvent contenir, quels attributs ils peuvent avoir et ce à quoi il faut veiller pour ces différents attributs:
référence pour les éléments pour l'élément de bloc commun (<div>...</div>)
référence pour les attributs pour l'élément de bloc commun (<div>...</div>)
référence pour les éléments pour l'élément centré de bloc commun (<center>...</center>)
référence pour les attributs pour l'élément centré de bloc commun (<center>...</center>)
référence pour les éléments pour l'élément incorporé commun (<span>...</span>)
référence pour les attributs pour l'élément incorporé commun (<span>...</span>)


	Lignes de séparation
	Marquage physique de texte

SELFHTML/Aides à la navigation

HTML/XHTML

Éléments pour structurer le texte