Les paragraphes.

Pour insérer un paragraphe il faut utiliser la balise et elle est de loin celle que vous utiliserez le plus et doit être obligatoirement fermée par . Ce qui sera inséré entre et sera un paragraphe.

Comme nous l'avons vu précédemment, ce sont les paramètres CSS combinés de body et de corps qui déterminent la couleur de la police, sa taille son alignement, etc.

Vous pouvez modifier les paramètres d'un ou de plusieurs paragraphes qui auront dans ce cas, la même classe.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).

1
2


<p class="important">Ce texte est important et est mis en évidence graçe au CSS. (Ce texte
est juste un exemple).</p>

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).


.important{
color:#f00;
text-align:center;
font-variant:small-caps
}

Chaque fois que vous utiliserez cette classe sur une page, les mêmes paramètres CSS s'y appliqueront.

Utiliser une balise en ligne

Vous pouvez mettre certaine partie du texte en évidence directement sur votre page HTML grâce aux balises de type en ligne (in line ang.) comme , , .

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


<p> Ceci est un mot <strong>important</strong>.</p>

<p> Ceci est un mot en caractère <b>gras</b>.</p>

<p> Ceci est un mot en <em>italique</em>.</p>

<p> Ceux ci sont des mots en <em><b>gras et italique</b></em>.</p>

Conseille Lorsque deux balises sont insérées côte à côte, les balises de fermeture doivent être fermées dans l'ordre inverse. Par exemple, se ferme et non .

La balise span.

La balise span (fusion fr.) est utilisée souvent pour souligner l'importance d'un mot ou d'un ensemble de mots. Elle sera accompagnée d'un id (identifient unique) mais le plus souvent par une classe (class). Utilises la balise span plutôt que les balises en lignes que nous avons vu précédemment.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


<p> Ce texte est <span class="surligner">surligner</span>.</p>

<p> Ce texte est <span class="rouge">rouge</span>.</p>

<p> Ce texte est en <span class="capital">capital</span>.</p>

Attention: surligner, rouge et capital sont les noms d'une classe et n'auront aucun effet s'il n'y a pas de paramèttre CSS associé à ces classes.

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).


.surligne{
background-color:#ef2
}
.rouge{color:#e01
}
.capital{font-variant:small-caps; text-decoration:underline
}

La balise blockquote et .

« Quote » en anglais veut dire « citer ». La balise blockquote doit donc être utilisée pour mettre en relief un « bloc » de citation. Elle ne doit pas être utilisée pour mettre un paragraphe en retrait. La balise est simplement un saut de ligne dans un paragraphe.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


<blockquote>
 <p>
  «Le monde ne sera pas détruit par ceux qui font le mal,<br />
  mais par ceux qui les regardent sans rien faire.»<br />
  <br />
  Albert Einstein.
 </p>
</blockquote>

Pour mettre un paragraphe en retrait, utiliser plutôt cette méthode :

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


1
2
3


<p class="retrait">
Étant donné que nous attribuons une classe à la balise <p>, nous pouvons choisir de mettre en
retrait le nombre de paragraphes que nous voulons sur la même page. (Ceci est juste un exemple de paragraphe). </p>

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).


1
2
3


.retrait{
padding:0 5%
}

Les colonnes.

Vous pouvez insérer votre texte à l'intérieur de colonnes à l'aide le la balise <div>. La procédure est somme toute assez simple.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).


<div class="colonne">
  <div class="gauche;>
    <p>
    Vous pouvez écrire votre texte comme vous le feriez normalement dans votre éditeur de texte, sans tenir compte
    des sauts de lignes. Les éditeurs comme Notepad++ ne sont pas des traitements de texte tels que Word par exemple.
    Les paramètres des colonnes seront déterminées par le CSS et non par la disposition du texte dans l'éditeur. </p>

    <p>
    Si vous désirez insérer une image, assurez-vous que ses dimensions soient adaptées à l'espace ou plus petites
    que la colonne à laquelle vous la destinez. </p>
  </div>

  <div class="droite">
    <p>
    Les colonnes peuvent se voir attribuer une couleur en arrière plan différente que celle que vous utilisez
    dans le reste de la page. Vous pouvez en changer l'alignement, la couleur du texte, la police par défaut
    ou tous autres paramètres que vous jugerez utiles. </p>

    <p>
    La largeur des colonnes dépend de l'espace que vous avez dans le corps. Pour ce faire nous n'appliquerons la
    largeur des colonnes qu'une fois votre texte écrit. Vous pourrez agencer la disposition des colonnes grâce à
    margin et padding. </p>
  </div>
</div>

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).


.colonne {
width:650px;
height:300px;
border:1px solid #000
}

.gauche {
float:left;
width:300px;
padding:5px;
background-color:#ccc

}

.droite {
float:right;
width:300px;
padding:5px;
background-color:#ccc
}

Dans la portion HTML nous avons le conteneur principal, colonne puis deux conteneurs secondaires, gauche et droite. Le conteneur principal détermine l'espace réservé aux colonnes et pour les besoins de la cause, est entouré d'une bordure. C'est float:left et float:right qui déterminent le positionnement des colonnes.