Taille du Texte en HTML - Tutoriel

Introduction

L'ajustement de la taille du texte est crucial pour améliorer la lisibilité de votre contenu. Ce tutoriel explore comment utiliser la propriété CSS 'font-size' pour définir la taille du texte dans vos pages HTML.

Exemples

Exemple 1 : Définir la Taille du Texte pour un Paragraphe

Utilisation de la propriété CSS 'font-size' pour définir la taille du texte d'un paragraphe :

       <p style="font-size: 16px;">Ce texte a une taille de police de 16 pixels.</p>

Exemple 2 : Tailles de Police Différentes pour un Titre

Définition de tailles de police différentes pour un titre en utilisant 'font-size' :

       <h2 style="font-size: 24px;">Titre avec une taille de 24 pixels</h2>

Exercices avec Corrections

Exercice 1 : Taille de Texte pour une Liste

Appliquez une taille de texte de 18 pixels à une liste ordonnée :

       <ol style="font-size: 18px;">
            <li>Élément 1</li>
            <li>Élément 2</li>
            <li>Élément 3</li>
        </ol>

Questions à Choix Multiple (QCM)

Quelle propriété CSS est utilisée pour définir la taille du texte d'un élément?
- A. font-style
- B. text-size
- C. font-size
Réponse correcte : C

Questions & Réponses

Question : Peut-on spécifier la taille du texte en pourcentage?

Réponse : Oui, vous pouvez spécifier la taille du texte en pourcentage. Par exemple :

       <p style="font-size: 120%;">Texte avec une taille de 120%</p>

Études de Cas

Cas d'utilisation : Augmentation de la Taille du Texte

Utilisez 'font-size' pour augmenter la taille du texte d'un paragraphe :

       <p style="font-size: 20px;">Ce texte a une taille de police augmentée à 20 pixels.</p>

Éléments à Retenir

La propriété CSS 'font-size' est utilisée pour définir la taille du texte d'un élément HTML.
Vous pouvez spécifier la taille du texte en pixels, en pourcentage, en em, ou d'autres unités de mesure.
L'ajustement de la taille du texte est important pour la lisibilité de votre contenu.

Proposition d'un Examen avec Correction

Quelle propriété CSS est utilisée pour définir la taille du texte d'un élément?
- A. font-style
- B. text-size
- C. font-size
Correction : C

Taille du Texte en HTML

La taille du texte est une propriété importante du texte sur une page Web. Elle peut être utilisée pour améliorer la lisibilité du texte, pour mettre en évidence des informations importantes ou pour créer un effet visuel.

En HTML, il existe deux façons de définir la taille du texte :

En utilisant la balise 
En utilisant la propriété CSS font-size

Utilisation de la balise 

La balise  est obsolète, mais elle est encore supportée par la plupart des navigateurs. Pour définir la taille du texte avec la balise , vous utilisez l'attribut size. La valeur de l'attribut size est un nombre de 1 à 7, qui correspond à une taille de police prédéfinie.

Voici un exemple d'utilisation de la balise  pour définir la taille du texte :

<h1><font size="7">Titre principal</font></h1>
<p><font size="5">Paragraphe</font></p>

Dans cet exemple, le titre principal aura une taille de police de 24 pixels, tandis que le paragraphe aura une taille de police de 16 pixels.

Utilisation de la propriété CSS font-size

La propriété CSS font-size est la méthode recommandée pour définir la taille du texte. Elle est plus flexible que la balise , car elle permet d'utiliser des valeurs de taille personnalisées et des unités de mesure différentes.

La valeur de la propriété font-size peut être exprimée en pixels (px), en points (pt), en pourcentage (%) ou en em.

Pixels (px) : la taille du texte est exprimée en pixels. C'est l'unité de mesure la plus précise, mais elle peut ne pas être compatible avec tous les navigateurs.
Points (pt) : la taille du texte est exprimée en points. C'est une unité de mesure couramment utilisée en imprimerie.
Pourcentage (%) : la taille du texte est exprimée en pourcentage de la taille de police par défaut.
Em : la taille du texte est exprimée en multiples de la taille de police du parent.

Voici quelques exemples d'utilisation de la propriété CSS font-size pour définir la taille du texte :

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

/* Taille en points */

h1 {
  font-size: 16pt;
}

p {
  font-size: 12pt;
}

/* Taille en pourcentage */

h1 {
  font-size: 150%;
}

p {
  font-size: 125%;
}

/* Taille en em */

h1 {
  font-size: 2em;
}

p {
  font-size: 1.5em;
}

Dans ces exemples, le titre principal aura une taille de police de 24 pixels, tandis que le paragraphe aura une taille de police de 16 pixels.

Recommandations

Il est recommandé d'utiliser la propriété CSS font-size pour définir la taille du texte. Cette propriété est plus flexible que la balise  et elle est plus compatible avec les navigateurs modernes.

Lorsque vous choisissez la taille du texte, il est important de tenir compte de la lisibilité du texte. La taille du texte doit être suffisamment grande pour être lue facilement, mais elle ne doit pas être trop grande pour que le texte ne soit pas surchargé.

Vous pouvez également utiliser des tailles de texte différentes pour mettre en évidence des informations importantes ou pour créer un effet visuel. Par exemple, vous pouvez utiliser une taille de texte plus grande pour les titres ou pour les éléments importants d'un formulaire.