SELFHTML

Lignes de séparation

Page d'information: vue d'ensemble

vers le bas Définir des lignes de séparation
vers le bas Mettre les lignes de séparation en forme avec HTML
vers le bas Mettre les lignes de séparation en forme avec les CSS
vers le bas Autres informations

 vers le bas 

HTML 2.0XHTML 1.0MSIE 2.0Netscape 1.0 Définir des lignes de séparation

Les lignes de séparation servent à séparer optiquement des passages de texte contigus ou pour aérer en général. Une ligne de séparation crée un paragraphe distinct.

Exemple:

Démonstration - nouvelle fenêtre 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>

<p>Ici se termine une partie.</p>
<hr>
<p>Et ici commence quelque chose de nouveau.</p>

</body>
</html>

Explication:

<hr> insère une ligne de séparation (hr = horizontal rule = ligne horizontale). Le repère peut se situer en fin de ligne du paragraphe précédent ou seul sur une ligne distincte (comme dans l'exemple) ou au début du paragraphe suivant.

Attention:

Quand vous travaillez conformément à XHTML vous devez marquer le repère hr comme étant vide. Pour ce faire, notez le repère autonome sous la forme <hr />.
De plus amples informations à ce sujet dans le chapitre Chapitre: vue d'ensemble XHTML et HTML.

 vers le hautvers le bas 

HTML 3.2en cours d'abandonXHTML 1.0Netscape1.1MS IE3.0 Mettre les lignes de séparation en forme avec HTML

À l'aide de divers attributs HTML dans le repère <hr> vous pouvez mettre une ligne de séparation en forme pour qu'elle accroche l'œil. Ces attributs sont en fait tous classés en cours d'abandon et doivent à l'avenir disparaître du standard HTML. Il est recommandé de mettre les signes de séparation en forme à l'aide des CSS.

Exemple:

Démonstration - nouvelle fenêtre 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>

<p>Ici se termine une partie.</p>
<hr noshade width="300" size="3" align="left">
<p>Ici commence quelque chose de nouveau.</p>

</body>
</html>

Explication:

Avec l'attribut noshade vous faites en sorte que le navigateur représente la ligne en plein et d'un seul trait, c'est à dire sans ombrage (noshade = sans ombre). Quand vous travaillez conformément à XHTML vous devez noter l'attribut noshade="noshade" étant donné que les langages basé sur XML n'acceptent pas d'attributs sans qu'une valeur leur soit affectée.
De plus amples informations à ce sujet dans le chapitre Chapitre: vue d'ensemble XHTML et HTML.

Par l'attribut width= (width = largeur) vous obtenez que le navigateur affiche la ligne de séparation, telle qu'il est mentionné. Vous pouvez mentionner un nombre ou un pourcentage. Avec un nombre, par exemple 300, vous imposez que la ligne de séparation soit représentée avec autant de pixels qu'il est mentionné. Avec un pourcentage, vous obtenez que la ligne de séparation n'occupe en largeur dans la fenêtre d'affichage au maximum que ce qui est mentionné. Pour une mention en pourcentage, notez simplement derrière le nombre, le signe pourcentage (%).

Avec l'attribut size= (size = taille) vous pouvez fixer la hauteur (épaisseur) d'une ligne de séparation. La valeur par défaut est de 2 points. Avec une valeur de 1 vous obtenez une ligne particulièrement fine, avec des valeurs supérieures à 2, vous pouvez obtenir des lignes de séparation plus épaisses que la normale.

Avec l'attribut align="left" vous obtenez que la ligne de séparation soit alignée à gauche (align = alignement, left = gauche). Avec align="right" la ligne de séparation sera alignée à droite (right = à droite) et avec align="center" centrée (réglage par défaut). L'alignement des lignes de séparation n'a un sens que quand il est combiné avec la mention width= (largeur réduite), étant donné qu'autrement, la ligne de séparation occupe toute la largeur de l'écran.

L'Explorer Internet MS interprète également l'affichage de lignes de séparation de couleur avec l'attribut color= qui accepte une Autre page d'information mention de couleur. Cet attribut n'a cependant jamais fait partie du standard HTML.

 vers le hautvers le bas 

HTML 4.0XHTML 1.0MS IE5.0 Mettre les lignes de séparation en forme avec les CSS

Le repère <hr> peut également être mis en forme avec les CSS. C'est conforme à la variante "strict" de HTML et vous avez beaucoup plus de possibilités de mise en forme qu'avec les attributs HTML. Malheureusement cependant, le navigateur Netscape n'interprète pas encore les propriétés CSS en relation avec les lignes de séparation (constaté sur la version 6.1), et même l'Explorer Internet ne le fait pas depuis si longtemps. Savourez-en donc l'utilisation avec modération.
Pour employer des feuilles de style CSS, il vous faut d'abord savoir comment Chapitre: vue d'ensemble 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:
Autre page d'information alignement et paragraphes
Autre page d'information espaces marges extérieures
Autre page d'information cadres
Autre page d'information positionnement et affichage d'éléments

Exemple:

Démonstration - nouvelle fenêtre 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>

<p>Ici se termine une partie.</p>
<hr noshade style="width:300px; color:yellow; height:5px; text-align:left; border:1px solid blue;">
<p>Ici commence quelque chose de nouveau.</p>

</body>
</html>

Explication:

Le repère hr reçoit dans l'exemple une largeur de 300 pixels, une hauteur de 5 pixels, est aligné à gauche et est représenté en jaune et reçoit en plus une fine bordure bleue qui l'entoure.

 vers le hautvers le bas 

Autres informations

Dans le Chapitre: vue d'ensemble sommaire de référence HTML vous trouverez des données précisant où les lignes de séparation peuvent être mises quels autres éléments elles peuvent contenir, quels attributs elles peuvent avoir et ce à quoi il faut veiller pour ces différents attributs:
Autre page d'information référence pour les éléments pour les lignes de séparation
Autre page d'information référence pour les attributs pour les lignes de séparation

 vers le haut
page suivante Autre page d'information Éléments plus anciens pour le formatage de l'écriture
page précédente Autre page d'information Éléments généraux pour des passages de texte
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@selfhtml.com.fr