Balises pour structurer le texte

Enrichissement du texte

Code Effet Visuel
<i>texte italique</i>
texte italique
<b>texte gras</b>
texte gras
<u>texte soulign&eacute;</u>
texte souligné
<s>texte barr&eacute;</s>
texte barré
texte en <sub>indice</sub>
texte en indice
texte en <sup>exposant</sup>
texte en exposant
<big>texte en plus gros</big>
texte en plus gros
<small>texte en plus petit</small>
texte en plus petit

voici un texte, en gras à partir d'ici, souligné par ce mot, italique ensuite.
Escalier.

En 7 c'est gros; avec 2 de moins, c'est plus raisonnable; et ici retour en 7.
en 3,c'est la taille normale, enfin je croi…

 

Niveaux de titre

Le langage html définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte :

Balise Effet Visuel
h1 Test
h2 Test
h3 Test
h4 Test
h5 Test
h6 Test

 

Les attributs

Les attributs suivants peuvent être placés dans les balises de structure afin de permettre une disposition plus précise des éléments html :

Attribut Valeur Effet Visuel
align left
right
center
justify
Texte aligné à gauche
Texte aligné à droite
Texte centré
Texte justifié, mais le texte doit être plus long pour voir l'effet, enfin cela ne fonctionne pas sur tous les navigateur
nowrap   Interdit au navigateur d'effectuer un saut de ligne.
id   Attribue un identifiant à la balise. Cet attribut est notamment utile pour la programmation en JavaScript
lang   Spécifie un langage différent
class   Assigne une classe au contenu (pour les feuilles de style).
clear   Utilisé dans le cas d'un texte entourant une image. Il permet de descendre dans la page aussi loin qu'il est nécessaire pour atteindre une marge libre

Voici un exemple d'en-tête :
Code
<h1 align=justify> Texte justifié </h1>
Effet Visuel

Texte justifié


vers le haut

Paragraphes

Le langage html considère les paragraphes comme des blocs de texte. Les navigateurs répartissent au mieux leur contenu dans la fenêtre à moins qu'=un attribut nowrap ou noBR soit spécifié explicitement.
A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace.

La mise en page par blocs de texte est réalisée par l'intermédiaire de la paire de balises <p> et </p>. Cette balise accepte n'importe lequel des attributs vus précédemment. Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise <br> On peut aussi insérer une ligne horizontale grâce à la balise <hr>.

Balise Attribut Effet Visuel
<br>   retour à la ligne
<p> et </p>   paragraphe
<hr size=5 width=20% align=left> size
width
align

vers le haut

Blocs d'éléments

Il existe des balises servant à indenter le texte : ce sont des conteneurs. Par exemple:

Conteneur Effet Visuel
<blockquote> et </blockquote>
Texte indenté
<address> et </address>
Pour écrire une adresse
<note> et </note> Pour écrire une note
<fn> et </fn> Permet d'avoir une note de fin de page
<banner> et </banner> Fixe un bloc de texte par rapport à la page
<pre> et </pre> 
Permet d'écrire un texte PREFORMATTE
		en conservant entre autres     les espaces
vers le haut

Les listes

Une liste est un paragraphe structuré contenant une suite d'articles. Il en existe trois types:

Voici leur syntaxe:

Conteneur type de liste Effet Visuel
<ol>
<li> Ligne 1 </li>
<li> Ligne 2 </li>
<li> Ligne 3 </li>
</ol>
 Ordonnée
  1. Ligne 1
  2. Ligne 2
  3. Ligne 3
<ol type="A">
<li> Ligne 1 </li>
<li> Ligne 2 </li>
<li> Ligne 3 </li>
</ol>
 Ordonnée
  1. Ligne A
  2. Ligne B
  3. Ligne C
<ul>
<li> Ligne 1 </li>
<li> Ligne 2 </li>
<li> Ligne 3 </li>
</ul>
 non ordonnée
  • Ligne 1
  • Ligne 2
  • Ligne 3
<dl>
<dt>Terme</dt>
<dd>Définition</dd>
</dl>
 De définition
article 1
définition 1
article 2
définition 2
<ul>
<li>petit rond </li>
<li>petit rond
<ul>
<li>petit cercle </li>
<li>petit crecle
<ul>
<li>Attila </li>
<li>Mathilde </li>
<ul>
<li>quatre </li>
<li>cinq </li>
</ul>
<ul type="circle">
<li>cercle </li>
<li>cercle </li>
<li>cercle </li>
</ul>
</ul>
</li>
<li>petit cercle </li>
</ul>
</li>
<li>petit rond </li>
<li>p'tit rond </li>
</ul>		  
  • petit rond
  • petit rond
    • petit cercle
    • petit crecle
      • Attila
      • Mathilde
        • quatre
        • cinq
        • cercle
        • cercle
        • cercle
    • petit cercle
  • petit rond
  • p'tit rond

Il existe des attributs spécifiques aux listes:

Attribut Valeur Effet Visuel
compact   resserre l'interligne
plain   supprime les puces
seqnum   définit le premier numéro
start   définit le premier numéro
continue   repart du numéro où il s'était arrété
à la liste précédente
type
(pour les listes
ordonnées)		 1
A
a
I
i		 numérotation chiffrée (par défaut)
numérotation en capitales (A, B, C, D…)
numérotation en bas de casse (a, b, c, d…)
numérotation en chiffres romains (I, II, III, IV...)
numérotation en chiffres romains en bas de casse (i, ii, iii, iv…)
type
(pour les listes
non-ordonnées)

circle

square

disc
  • puce circulaire
  • puce carrée
  • puce en disque


vers le haut

Liste ordonnée


Conteneur type de liste Effet Visuel
<ol>
<li> Ligne 1 </li>
<li> Ligne 2 </li>
<li> Ligne 3 </li>
</ol>
 Liste ordonnée
  1. Ligne 1
  2. Ligne 2
  3. Ligne 3

vers le haut

Liste non ordonnée


Conteneur type de liste Effet Visuel
<ul>
<li> Ligne 1 </li>
<li> Ligne 2 </li>
<li> Ligne 3 </li>
</ul>
 non ordonnée
  • Ligne 1
  • Ligne 2
  • Ligne 3

vers le haut