Lignes et paragraphes

Cette section décrit le code HTML associé aux lignes et aux paragraphes. Nous commençons par les et <P>.

L’élément < DIV >

<DIV>, a élément de niveau bloc, définit simplement un bloc de contenu dans la page. Au-delà de la définition d’un bloc, <DIV> ne fait rien. Par exemple, le code suivant crée un élément <DIV> avec deux paragraphes à l’intérieur. Notez que vous pouvez mettre des éléments <P> dans un <DIV>.

Ce qui nous donne:

L’attribut ALIGN

ALIGN définit l’alignement du contenu de l’élément <DIV>. Les quatre valeurs, LEFT, CENTER, RIGHT et JUSTIFY, sont tous bien pris en charge. LEFT est la valeur par défaut.
Ce code affiche la valeur par défaut:

Ce qui nous donne:

L’élément Paragraph

<P> indique le début d’un nouveau paragraphe. Ceci est généralement rendu avec deux retours chariot, produisant une seule ligne vide entre les deux paragraphes:

Ce qui produit ceci:

L’attribut ALIGN

ALIGN indique l’alignement du paragraphe.

Ce qui produit ceci:

L’attribut CLEAR

CLEAR est reconnu par certains navigateurs et fonctionne de manière très similaire à <BR>. Cependant, ce n’est pas du HTML standard et n’est toujours pas pris en charge, alors utilisez plutôt <BR>.

Le P Endtag est-il obligatoire?

Le Le W3C dit à propos de </P>: « La balise de fin est facultative car elle peut toujours être déduite par l’analyseur. » Cela signifie qu’un nouveau <P> implique la fin du <P> précédent (et de tout alignement défini par le ).

Tout autre élément de niveau bloc, tel que <HR> ou <BLOCKQUOTE> doit également se terminer le paragraphe. Cependant, cela ne fonctionne pas toujours de cette façon. Certains navigateurs, par exemple, alignent le texte à droite même après un tableau. Dans l’exemple suivant, MSIE affiche la partie « après le tableau » comme alignée à droite, tandis que Netscape le rend comme aligné à gauche:

Rendu de MSIE	Rendu de Netscape

Si vous définissez l’alignement ou une autre propriété de style pour un élément de paragraphe, il est préférable d’utiliser </P>. Si vous n’utilisez jamais définir de styles, vous pouvez généralement ignorer </P>.

Voir les spécifications du W3C pour les paragraphes pour plus d’informations sur ce sujet.

Alignement du texte

Vous pouvez définir l’alignement de n’importe quel élément HTML à l’aide de la règle de style text-align. text-align peut être utilisé pour définir l’alignement d’un paragraphe, d’une section du document ou même de l’ensemble du document. text-align peut être utilisé pour définir l’alignement à gauche, à droite, au centre ou justifié.

Par exemple, supposons que nous voulions centrer un paragraphe.Tout d’abord, nous allons créer une classe de styles appelée centeralign en mettant le code suivant dans la section « du document:

Nous pouvons maintenant définir n’importe quel paragraphe sur la classe centeralign comme ceci:

Ce qui nous donne ceci:

Nous pouvons appliquer la même classe à un élément <DIV> pour centrer une section du page:

Ce qui nous donne:

Justification

Par défaut , la plupart des navigateurs affichent le texte avec un bord droit irrégulier.

Si vous voulez que tout le texte soit rendu comme dans un livre avec un bord droit égal, vous pouvez utiliser une seule règle de style. Pour définir tout le texte comme justifié, copiez ce qui suit code i dans la section « de votre document.

Le problème avec la justification est que de nombreux navigateurs ne savent pas où se trouve la dernière ligne de texte (ce qui ne devrait pas être justifiée). Par exemple, MSIE 4.x est confus lorsqu’un bloc de texte est immédiatement suivi d’un tableau. Notez dans cette image que la dernière ligne de texte étire les mots « un de nos agents » sur une ligne complète:

Pour remédier à cette situation, entourez tous les blocs de texte de <P> et </P>:

Maintenant, notre MSIE errant rend les choses plus sanely:

Indentation

Il existe plusieurs façons d’indenter des paragraphes et des sections entières de votre page Web . Les sections suivantes décrivent les quatre principales techniques d’indentation:

• Indentation d’un paragraphe
• Indentation d’une section de la page
• Indentation de la page entière
• Indentation de la première ligne de chaque paragraphe

Avant de commencer, cependant, il vaut la peine de dire quelques mots sur <BLOCKQUOTE> . Il existe une idée fausse répandue selon laquelle <BLOCKQUOTE> devrait être utilisé pour indenter des sections de la page. Cette croyance vient du fait que la plupart des navigateurs Web visuels affichent le texte cité comme en retrait. N’oubliez pas, cependant, que HTML n’est pas un langage de formatage et donne des résultats imprévisibles lorsque vous essayez de l’utiliser comme tel. Utilisez <BLOCKQUOTE> si vous avez un bloc de texte entre guillemets, sinon utilisez les techniques décrites dans les prochains paragraphes.

Indentation d’un paragraphe

Vous pouvez mettre en retrait un seul paragraphe à l’aide de styles. Par exemple, supposons que nous voulions indenter un paragraphe de 50 points. Tout d’abord, nous créons une classe appelée indentée avec les règles de style suivantes. Mettez ce code dans la section « de votre document.

Nous définissons maintenant la classe du paragraphe sur indentée en ajoutant un attribut CLASS au <P> tag:

Ce qui nous donne ce paragraphe en retrait:

Indentation d’une section d’une page

Pour indenter plusieurs par agraph, nous utiliserons le même style que celui défini dans l’exemple précédent. Mettez ce code dans la section « de votre page:

Ensuite, nous utiliserons la classe indentée dans un <DIV> element:

Ce qui nous donne une section en retrait comme celle-ci:

Mise en retrait de la page entière

Si vous voulez que la page entière soit mise en retrait, définissez une règle de style qui définit le remplissage à droite et à gauche de l’élément « . Par exemple, ce style définit le remplissage droit et gauche sur 100 pixels:

Cette technique est populaire lorsqu’elle est utilisée en combinaison avec une image d’arrière-plan. Par exemple, supposons que nous souhaitons que cette image se trouve sur le côté gauche de la page.

Cette image mesure 56 pixels de large, définissons donc le remplissage sur 60.Le style suivant définit l’image d’arrière-plan, définit la répétition sur repeat-y (répétez uniquement verticalement sur le côté gauche de la page) et définit le remplissage gauche sur 60 (nous ne définirons pas le remplissage droit).

Voici à quoi cela pourrait ressembler:

Indentation de la première ligne de chaque paragraphe

Pour indenter la première ligne de chaque ensemble de paragraphes une règle de style utilisant le retrait de texte. Par exemple, le code suivant indente la première ligne de chaque paragraphe de 30 points. Copiez ce code dans la section « de votre page:

Ce code indente la première ligne de chaque <P> élément, mais vous rencontrerez probablement un problème ennuyeux. Si vous êtes comme la plupart des concepteurs, vous ne mettez probablement pas de P avant le premier paragraphe ou entre un en-tête comme <H1> et le texte qui le suit. Malheureusement, c’est exactement ce que vous devrez faire si vous voulez que le paragraphe soit mis en retrait. Le texte dans ces situations fait partie de quelque chose appelé « blocs anonymes » et ne peut pas être référencé directement. Pour l’indenter, vous devez mettre le texte dans un élément <P>.

Ainsi, par exemple, le code suivant n’a pas de <P> entre l’en-tête et le texte, donc le texte n’est pas indenté:

Ce qui nous donne:

Ce code a un <P> entre l’en-tête et le texte, donc le texte est en retrait:

Le < BR > Élément

<BR> insère un seul retour chariot . Alors que <P> indique le début d’un nouveau paragraphe, <BR> n’implique qu’un retour chariot dans le même paragraphe. <BR> est généralement rendu avec un seul retour chariot.

Par exemple, ce code:

Ce qui produit ceci:

Parce que <BR> ne commence pas un nouveau paragraphe, tous les attributs de paragraphe actuels restent les mêmes:

Ce qui produit ceci:

L’attribut CLEAR

CLEAR dit qu’en plus d’insérer un saut de ligne, s’il y a une image ou un autre objet à droite ou à gauche, dépassez-le aussi. Par exemple, ce code indique que l’image doit être alignée sur le côté gauche de la page. Ensuite, il y a du texte, puis LEFT. Le texte qui suit est passé devant l’image:

Ce qui produit ceci:

Venez à la fête d’Halloween! Passez un bon moment.
20h00 à minuit. Portez un costume ou devenez vous-même effrayant!

BOTH équivaut à ALL, mais ce n’est pas le cas pris en charge sur autant de navigateurs, utilisez donc ALL à la place.

L’élément CENTER

Recommandation d’utilisation: utilisez <DIV> à la place.

Ce qui nous donne:

Ce qui revient à:

Ce qui nous donne:

L’élément < HR >

<HR> trace une ligne horizontale (une « règle horizontale ») sur la page. C’est tout. Pour un concept aussi simple, les règles horizontales sont étonnamment populaires. Commençons par les bases. <HR> n’a pas de balise de fin et ne nécessite aucun attribut:

Ce qui crée cette règle:

<HR> indique généralement une division dans la page. Les éléments avant la règle sont dans une «section» différente de ceux qui suivent. Pour cette raison, de nombreux concepteurs considèrent <HR> une balise logique, pas une balise de mise en page.

L’attribut NOSHADE

NOSHADE indique que la règle doit être présentée comme plate au lieu de trois dimensions.Comparez cette règle horizontale régulière:

Avec une règle NOSHADE:

Ce qui nous donne:

NOSHADE est souvent utilisé en conjonction avec SIZE:

Produit cette règle:

NOSHADE est populaire car les navigateurs ne rendent généralement pas très bien les règles tridimensionnelles. En effet, dans de nombreux cas, la règle est présentée dans la même couleur que l’arrière-plan, la rendant presque invisible.

L’attribut SIZE

SIZE indique la hauteur de la règle. (Je suppose que l’appeler « HEIGHT » aurait été trop facile.) Pour la largeur horizontale, voir WIDTH. Comparez certaines de ces tailles:

Ce qui nous donne ces règles:

Les navigateurs ne rendront généralement pas un <HR> supérieur à 100 .

L’attribut WIDTH

WIDTH définit la largeur horizontale de la règle. Vous pouvez exprimer la taille en pixels ou en pourcentage.

Ces <HR> sont définis avec des largeurs de pixels:

Ce qui nous donne ces règles:

WIDTH est généralement exprimée en pourcentage. Si vous utilisez une largeur en pourcentage, veillez à insérer la valeur entre guillemets.

Produit ces règles:

La valeur par défaut est 100%. Par défaut, la règle est centré. Pour définir un alignement différent, utilisez ALIGN.

Les largeurs en pourcentage utilisent le pourcentage o f la largeur disponible, pas la largeur totale de la page. Par exemple, si la règle est dans un tableau, la largeur est un pourcentage de la largeur de la cellule du tableau.

Ce qui produit ce tableau:

L’attribut ALIGN

ALIGN définit l’alignement du régner. ALIGN n’est utile que si vous utilisez également WIDTH.

Donnez-nous ceci:

L’élément < PRE >

<PRE> est l’une des balises les plus pratiques de la boîte à outils HTML. <PRE> marque le texte comme « préformaté » – tous les espaces et retours chariot sont rendus exactement comme vous les saisissez.

Ce qui produit ceci:

<PRE> le texte est rendu dans une police de largeur fixe, ce qui signifie que tous les caractères et espaces sont même largeur. La largeur fixe facilite la mise en page du texte comme vous le souhaitez. <PRE> est donc idéal pour créer des tableaux « rapides et sales » comme celui ci-dessus.

<PRE> ne fait PAS ignorer les balises par le navigateur. Vous pouvez toujours créer des liens et autres goodies:

Produit ceci:

Lorsque vous commencez à ajouter du balisage , il devient plus difficile de voir comment le texte se révèle (espacer vos balises uniformément comme le tableau ci-dessus aide). <PRE> est souvent utilisé pour citer de gros blocs de texte que vous ne voulez pas « HTMLize », mais un « pourrait gâcher le texte. Pour une table de plus de quelques lignes, il est généralement plus facile à long terme d’utiliser le code de table.

L ‘ »Élément

 » empêche un retour chariot de se produire. Par exemple, le code suivant produit un poème absurde d’une longue ligne:

Ce qui produit ceci:

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:

Ce qui produit ceci:

L’élément « Element

is for the situation where you have used pour éviter les sauts de ligne dans une section de texte, et ensuite vous voulez dire « mais vous pouvez casser ICI si vous voulez ». »ne force pas un saut de ligne, il en autorise simplement un:

Produit:

Ayant inventé , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, comme ceci:

Ce qui nous donne ce paragraphe:

Adam est un rédacteur technique spécialisé dans la documentation et les didacticiels pour les développeurs.