Les paragraphes

Nous avons vu l’intérêt de la balise <br> qui sert à sauter de ligne à n'importe quel endroit au milieu d'un contenu HTML. Déjà avec cette balise on peut dire que l'on arrive à séparer les paragraphes entre eux. Mais il existe une balise plus adaptée à cet usage. Il s'agit de <p>.

Balise de paragraphe <p>

La balise <p> est une balise de type block, c'est à dire qu'elle crée un bloc et engendre automatiquement un retour à la ligne. Elle sert à définir un paragraphe. On peut la doter de l'attribut align qui permet d'aligner, à sa guise, le contenu du paragraphe. Les différentes valeurs de l'attribut align sont:

• left: C'est la valeur par défaut. Elle permet d'aligner le contenu du paragraphe à gauche de la page (ou à gaude du conteneur qui renferme la balise <p>).
• right: Elle permet d'aligner le contenu du paragraphe à droite de la page (ou à droite du conteneur qui renferme la balise).
• center: Elle permet de centrer le paragraphe.
• justify: Elle permet de justifier le contenu du paragraphe (prolonge le texte pour qu'il occupe toute la ligne).

Exemple:
L’exécution du code sur le navigateur donne:

Les conteneurs (ou containers)

On entend par conteneur (ou container) des balises qui peuvent renfermer d'autres éléments comme du textes ou des images. Les conteneurs les plus célèbres sont les balises <div> et <span>.

Balise <div>

La balise <div> est une balise de type block. Elle permet de définir un conteneur ou un bloc qui contient d'autres éléments. Il sert généralement à mieux diviser la page Web pour placer le bon contenu au bon endroit. Cependant, la balise <div> nécessite des styles CSS pour qu'elle soit dotée de toute sa force.

En HTML cette balise ne sert pas à grand chose si ce n'était que pour aligner du texte ou définir un paragraphe (Elle se comporte à peut près comme la balise <p>). Les attributs dont on peut la doter sont les même que ceux de la balise <p>.

Exemple:
L’exécution du code sur le navigateur donne:

Balise <span>

La balise <span> est aussi un container, mais de type inline (elle occupe juste assez d'espace pour afficher ce qu'elle contient et pas toute la ligne comme la balise <div>). Par conséquent elle n'engendre pas de retour à la ligne.

Exemple:
Sur le navigateur cela donne:
Vous voyez que la balise <span> n'apporte aucun effet qu contenu qu'elle entoure. Elle n'engendre même pas de retour à la ligne puisqu'elle s'agit d'une balise de type inline. Comme pour la balise <div>, elle sera utile quand on la dotera de styles CSS.

Les listes HTML

Pour afficher plusieurs entrées, l'une en dessous de l'autres, il n'y a pas mieux que les listes. Il y'en a deux types: des listes ordonnées et des listes non ordonnées.

Listes ordonnées: Balise <ol>

La balise <ol> permet d'avoir des listes ordonnées (ou numérotées). Elle doit être fermée (par </ol>) et elle contient une autre balise qui est <li>. La balise <li> permet de définir une entrée de la liste (Il y 'a donc autant de balises <li> que d'entrées).

La balise <ol> peut avoir des attributs dont les plus importants sont:

• type: sert à définir le type de marqueur de la liste. Les différentes valeur de l'attribut sont: 1 pour les chiffres classiques (il s'agit d'ailleurs de la valeur par défaut), A pour l'alphabet majuscule, a pour l'alphabet minuscule, I pour les chiffres romains majuscules et i pour les chiffres romains minuscule.
• start: indique la valeur du marqueur du début. Par défaut la liste commence par 1 (si elle est ordonnée). Si vous mettez start="5" alors la première entrée sera marquée par 5 et non par 1, la deuxième par 6...

Exemple:
On obtient sur le navigateur:

Liste non ordonnées: Balise <ul>

La balise <ul> permet de créer des listes non ordonnées. Elle contient aussi la balise <li> qui permet de définir les éléments de la liste.

Tout comme la balise <ol>, la balise <ul> possède des attributs qui permettent de personnaliser la liste. Le plus important d'entre eux est l'attribut type qui défini le type de marquer et qui peut avoir une des valeurs suivantes:

• disc: le marqueur est un cercle plein. Il s'agit de la valeur par défaut.
• circle: le marqueur est un cercle creux.
• square: le marqueur est un carré plein.

On reprend l'exemple précédent avec la balise <ul> cette fois:
Le résultat obtenu ressemble à ceci: