Alignement et espacement des paragraphes
Pour prétendre à un site agréable, il faut avoir un minimum de présentation.
Cette présentation passe par l'alignement et l'espacement des textes.
On peut avoir des paragraphes alignés à gauche, à droite, centrés ou justifiés.
De plus on peut avoir un retrait de la première ligne, jouer sur l'espacement des caractères et/ou des paragraphes.
On va préciser toutes ces valeurs à l'aide de la balise <P>
Paragraphe aligné a gauche:
<P align="LEFT">
Paragraphe aligné a droite:
<P align="RIGHT">
Paragraphe centré:
<P align="CENTER">
Paragraphe justifié:
<P align="JUSTIFY">
Ensuite comme vous avez pu vous en rendre compte, dès qu'on fait un nouveau paragraphe l'espacement avec la ligne supérieur est plus important.
Pour régler cette espacement on va utiliser les valeurs <P style="">.
Marge droite du paragraphe
<p style="margin-right: 10">
Marge gauche du paragraphe
<p style="margin-left: 10">
Marge supérieure du paragraphe<p style="margin-top: 10">
Marge inférieure du paragraphe
<p style="margin-bottom: 10">
Espacement des mots
<p style="wordspacing: 10">
Espacement entre les lignes
<p style="line-height: 200%">
Retrait de la premiere ligne
<p style="text-indent:20">
pour associer les différentes valeurs dans le style, il faut ajouter un point virgule entre chaque.
| Code |
|
<html>
<head>
<title>Alignement et espacement dans les paragraphes</title>
</head>
<body>
<p>Bonjour à tous</p>
<p>je vais vous présenter les différentes valeurs applicables aux paragraphes</p>
<p align="left">Gauche</p>
<p align="right">Droite</p>
<p align="center">Centrer</p>
<p>justifier</p>
<p>Exemple de texte long sans jusitification.</p>
<p>la mise en forme ne se voit que si on à des textes assez long qui s'affiche sur plusieurs lignes sans avoir de saut de lignes forcés. Cette variable a pour effet d'aligner le texte sur les bords de votre paragraphes afin d'avoir des lignes de longueurs identiques et sans trous à la fin. Et pour ce faire, il règle automatiquement l'espacement des caractères.</p>
<p align="justify">Exemple de texte long avec justification</p>
<p align="justify">la mise en forme ne se voit que si on à des textes assez long qui s'affiche sur plusieurs lignes sans avoir de saut de lignes forcés. Cette variable a pour effet d'aligner le texte sur les bords de votre paragraphes afin d'avoir des lignes de longueurs identiques et sans trous à la fin. Et pour ce faire, il règle automatiquement l'espacement des caractères.</p>
Marge supérieur de 5px
<p align="left" style="margin-top: 5">la mise en forme ne se voit que si on à des textes assez long qui s'affiche sur plusieurs lignes sans avoir de saut de lignes forcés. Cette variable a pour effet d'aligner le texte sur les bords de votre paragraphes afin d'avoir des lignes de longueurs identiques et sans trous à la fin. Et pour ce faire, il règle automatiquement l'espacement des caractères.</p>
<p align="left" style="margin-top: 5">Espacement entre les mots</p>
<p align="left" style="word-spacing: 10; margin-top: 5">Texte avec un espacements des mots importants</p>
<p align="justify">Espacement entre les lignes</p>
<p align="justify" style="line-height: 200%">la mise en forme ne se voit que si on à des textes assez long qui s'affiche sur plusieurs lignes sans avoir de saut de lignes forcés. Cette variable a pour effet d'aligner le texte sur les bords de votre paragraphes afin d'avoir des lignes de longueurs identiques et sans trous à la fin. Et pour ce faire, il règle automatiquement l'espacement des caractères.</p>
<p align="left" style="line-height: 100%; text-indent: 0; word-spacing: 0; margin: 0">Un paragrpahe aligné à gauche, avec un espacement normal des mots et des lignes. Sans espacement des paragraphes pour avoir l'impression que tout le texte se suit comme si vous lisiez un livre</p>
<p align="left" style="line-height: 100%; text-indent: 20; word-spacing: 0; margin: 0">Un paragraphe aligné à gauche, avec un espacement normal des mots et des lignes. Sans espacement des paragraphes pour avoir l'impression que tout le texte se suit comme si vous lisiez un livre. La même chose avec un retrait de la première ligne.</p>
</body>
</html>
|
|
