Apprendre le langage HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre le langage HTML (HyperText Markup Language) Niveau recommandé pour le cours de Apprendre le langage HTML (HyperText Markup Language) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 7: Paragraphes, conteneurs (ou containers) et listes

Toutes les pages

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:
<h1>Les paragraphes</h1>
<p align="left">
   La balise &lt;p&gt; permet de définir un paragraphe au sein d'un code HTML.
   Il engendre un retour à la ligne avant et après.
</p>
L’exécution du code sur le navigateur donne:

Les paragraphes

La balise <p> permet de définir un paragraphe au sein d'un code HTML. Il engendre un retour à la ligne avant et après.

Avez vous remarqué les caractères spéciaux &lt; et &gt; dans le code source? C'est pour afficher les chevrons de la balise <p> sur le navigateur. Si j'avais écrit la balise normalement elle serait exécutée par le navigateur. Or, ce que je veux c'est l'afficher et pas l’exécuter.

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:
<h1>Les conteneurs</h1>
<div align="left">
   La balise &lt;div&gt; permet de définir un conteneur de type block au sein d'un code HTML.
   Il engendre un retour à la ligne avant et après.
</div>
L’exécution du code sur le navigateur donne:

Les conteneurs DIV

La balise <div> permet de définir un conteneur de type block au sein d'un code HTML. Il engendre un retour à la ligne avant et après.
Pour centrer un contenu (texte, image ou autre objet HTML) on peut utiliser la balise <center></center> sans être obligé à le mettre dans un conteneur <div> ou un paragraphe <p>.

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:
HTML est un <span>langage</span> de description de pages Web.
Sur le navigateur cela donne:
HTML est un langage de description de pages Web.
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:
Les noms des balises de bases à déclarer dans un document HTML sont:
<ol type="1">
   <li>HTML</li>
   <li>HEAD</li>
   <li>BODY</li>
</ol>
On obtient sur le navigateur:
Les noms des balises de bases à déclarer dans un document HTML sont:
  1. HTML
  2. HEAD
  3. BODY

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:
Les noms des balises de bases à déclarer dans un document HTML sont:
<ul type="square">
   <li>HTML</li>
   <li>HEAD</li>
   <li>BODY</li>
</ul>
Le résultat obtenu ressemble à ceci:
Les noms des balises de bases à déclarer dans un document HTML sont:
  • HTML
  • HEAD
  • BODY