Chapitre 5 | Afficher du texte avec HTML [ p / h ]

Afficher du texte avec HTML

Avec HTML, vous allez apprendre à structurer et afficher du contenu textuel sur une page web.

Qu’est-ce que HTML ?

HTML (HyperText Markup Language) est un langage de balisage qui sert à créer la structure et le contenu d’une page web. Chaque élément HTML est défini par des balises.

Les balises essentielles :

Titres : utilisez les balises suivantes pour hiérarchiser vos titres.

<h1>Titre principal</h1> <h2>Sous-titre</h2> <h3>Sous sous-titre</h3>

etc. (h4 h5 h6)

Paragraphes : pour ajouter du texte.

<p>Ceci est un paragraphe.</p>

Texte en gras et en italique : pour mettre en valeur certaines parties du texte.

<strong>Texte en gras</strong> <em>Texte en italique</em>

Exercice :

Créez une page HTML avec :

Un titre principal (h1).
Un sous-titre (h2).
Un paragraphe contenant un mot en gras et un autre en italique.

Exemple de code :

<h1>Bienvenue dans le cours HTML</h1>
<h2>Commençons par afficher du texte</h2>
<p>Voici un exemple de texte avec un mot <strong>important</strong> et un mot <em>italique</em>.</p>

Testez ce code dans CodePen et observez le résultat.

https://codepen.io/pen/

2. Styliser un texte avec CSS

Le CSS permet de modifier l’apparence de vos éléments HTML pour les rendre plus attrayants.

Qu’est-ce que CSS ?

CSS (Cascading Style Sheets) est un langage qui permet de contrôler le style des pages web, comme les couleurs, les polices ou l’alignement.

Syntaxe de base :

Chaque règle CSS comprend :

Un sélecteur (l’élément HTML à styliser).
Une propriété (ce que vous voulez modifier).
Une valeur (comment vous voulez le modifier).

Exemple :

CSS

p {
    color: red; /* Change la couleur du texte */
    font-size: 16px; /* Change la taille du texte */
}

Propriétés de base pour le texte :

Couleur : color: blue;
Taille de la police : font-size: 20px;
Police de caractères : font-family: Arial, sans-serif;
Alignement :text-align: center;

Exemple :

Sur un PEN

https://codepen.io/pen/

ajouter ce HTML :

<h1>Bienvenue</h1>
<p>Ceci est un paragraphe stylisé.</p>

Ajoutez ce CSS :

h1 {
    color: blue;
    font-size: 36px;
    text-align: center;
}

p {
    color: gray;
    font-size: 18px;
    font-family: 'Times New Roman', serif;
}

Observez le résultat.