HTML - Mise en forme

Lucas D. -

Mise en forme du texte

Texte en gras

En HTML, vous pouvez mettre du texte en gras en utilisant soit la balise <b>, soit la balise <strong>. La balise <b> est utilisée pour attirer l'attention sur le texte sans lui donner une importance supplémentaire, tandis que la balise <strong> indique que le texte est important ou urgent.

Conseil: Texte en gras

<p>Ceci est du <b>texte en gras</b> utilisant la balise b.</p>
<p>Ceci est du <strong>texte en gras</strong> utilisant la balise strong.</p>

Texte en italique

Pour mettre du texte en italique, vous pouvez utiliser soit la balise <i>, soit la balise <em>. La balise <i> est utilisée pour indiquer une tonalité ou une qualité différente du texte, comme un terme technique ou une phrase dans une autre langue. La balise <em> est utilisée pour accentuer ou mettre l'accent sur le texte.

Conseil: Texte en italique

<p>Ceci est du <i>texte en italique</i> utilisant la balise i.</p>
<p>Ceci est du <em>texte en italique</em> utilisant la balise em.</p>

Texte souligné

Pour souligner du texte, utilisez la balise <u>.

Conseil: Texte souligné

<p>Ceci est du <u>texte souligné</u> utilisant la balise u.</p>

Texte barré

Pour créer du texte barré, vous pouvez utiliser soit la balise <s>, soit la balise <del>. La balise <s> indique un texte qui n'est plus correct ou pertinent, tandis que la balise <del> représente un texte qui a été supprimé.

Conseil: Texte barré

<p>Ceci est du <s>texte barré</s> utilisant la balise s.</p>
<p>Ceci est du <del>texte barré</del> utilisant la balise del.</p>

Indice et exposant

Pour le texte en indice, utilisez la balise <sub>. Pour le texte en exposant, utilisez la balise <sup>.

Conseil: Indice et exposant

<p>Ceci est du <sub>texte en indice</sub> utilisant la balise sub.</p>
<p>Ceci est du <sup>texte en exposant</sup> utilisant la balise sup.</p>

Texte surligné

Pour surligner du texte, utilisez la balise <mark>. Cela est utile pour marquer des mots-clés ou des phrases importantes.

Conseil: Texte surligné

<p>Ceci est du <mark>texte surligné</mark> utilisant la balise mark.</p>

Petit texte

Pour rendre le texte plus petit, utilisez la balise <small>. Cette balise est utilisée pour les commentaires en marge, les petits caractères ou les avertissements.

Conseil: Petit texte

<p>Ceci est du <small>petit texte</small> utilisant la balise small.</p>

Alignement du texte

En HTML, vous pouvez aligner le texte en utilisant l'attribut align. Cet attribut peut être ajouté à diverses balises, telles que <p>, <h1> à <h6>, <div>, et d'autres. L'attribut align accepte trois valeurs : "left", "center", et "right".

Pour aligner le texte à gauche, utilisez align="left". C'est l'alignement par défaut pour la plupart des éléments.

Conseil: Texte aligné à gauche

<p align="left">Ce texte est aligné à gauche.</p>

Pour centrer le texte, utilisez align="center". Cela affichera le texte au milieu de l'élément contenant.

Conseil: Titre centré

<h2 align="center">Ce titre est centré.</h2>

Pour aligner le texte à droite, utilisez align="right". Cela affichera le texte sur le côté droit de l'élément contenant.

Conseil: Texte aligné à droite

<div align="right">Ce texte est aligné à droite.</div>

Il est important de noter que bien que l'attribut align soit toujours pris en charge en HTML5, il est recommandé d'utiliser CSS pour l'alignement du texte et d'autres fins de style. CSS offre plus de flexibilité et de contrôle sur la mise en page et l'apparence de votre page web.

Formatage des polices

Taille de la police

En HTML, vous pouvez modifier la taille de la police en utilisant l'attribut size dans la balise <font>. L'attribut size accepte des valeurs de 1 à 7, 1 étant la plus petite et 7 la plus grande. La taille par défaut est 3.

Conseil: Code HTML pour la taille de la police

<p>Ceci est un texte de <font size="1">taille 1</font>.</p>
<p>Ceci est un texte de <font size="3">taille 3</font>.</p>
<p>Ceci est un texte de <font size="7">taille 7</font>.</p>

Cependant, il est important de noter que la balise <font> est obsolète en HTML5 et devrait être évitée. Utilisez plutôt CSS pour contrôler les tailles de police pour plus de flexibilité et de meilleures pratiques de conception.

Conseil: Styles CSS pour la taille de la police

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

Couleur de la police

Pour changer la couleur du texte en HTML, vous pouvez utiliser l'attribut color dans la balise <font>. L'attribut color accepte les noms de couleurs, les valeurs hexadécimales ou les valeurs RGB.

Conseil: Code HTML pour la couleur de la police

<p>Ceci est un texte <font color="red">rouge</font>.</p>
<p>Ceci est un texte <font color="#0000FF">bleu</font>.</p>
<p>Ceci est un texte <font color="rgb(0, 128, 0)">vert</font>.</p>

Comme pour la taille de la police, la balise <font> est obsolète, et il est recommandé d'utiliser CSS pour contrôler les couleurs de police.

Conseil: Styles CSS pour la couleur de la police

<p style="color: red;">Ce texte est rouge.</p>
<p style="color: #0000FF;">Ce texte est bleu.</p>
<p style="color: rgb(0, 128, 0);">Ce texte est vert.</p>

Police de caractères

Pour spécifier la police ou la famille de polices en HTML, vous pouvez utiliser l'attribut face dans la balise <font>. L'attribut face accepte le nom de la police que vous souhaitez utiliser.

Conseil: Code HTML pour la police de caractères

<p>Ceci est un texte en <font face="Arial">Arial</font>.</p>
<p>Ceci est un texte en <font face="Verdana">Verdana</font>.</p>
<p>Ceci est un texte en <font face="Courier New">Courier New</font>.</p>

Encore une fois, la balise <font> est obsolète, et il est préférable d'utiliser CSS pour définir les polices de caractères.

Conseil: Styles CSS pour la police de caractères

<p style="font-family: Arial;">Ce texte utilise la police Arial.</p>
<p style="font-family: Verdana;">Ce texte utilise la police Verdana.</p>
<p style="font-family: 'Courier New';">Ce texte utilise la police Courier New.</p>

Lorsque vous utilisez CSS, vous pouvez spécifier plusieurs polices dans la propriété font-family, séparées par des virgules. Cela permet au navigateur d'utiliser la première police disponible dans la liste.

Texte préformaté

En HTML, vous pouvez afficher du texte préformaté à l'aide de la balise <pre>. La balise <pre> conserve les espaces, les sauts de ligne et autres formatages dans son contenu. Cela est utile lorsque vous souhaitez afficher du texte exactement tel qu'il est écrit, comme des extraits de code, de l'art ASCII ou de la poésie.

Conseil: Utilisation de la balise <pre>

<pre>
  Ceci est un exemple
    de texte préformaté.
  Il conserve     les espaces,
         les sauts de ligne,
    et autres formatages.
</pre>

Dans l'exemple ci-dessus, le texte à l'intérieur de la balise <pre> sera affiché avec son formatage d'origine, y compris les espaces multiples et les sauts de ligne.

Par défaut, le texte à l'intérieur de la balise <pre> est affiché en utilisant une police à espacement fixe, ce qui lui donne un aspect similaire à du code ou du texte brut. Le texte a également une largeur fixe, ce qui signifie qu'il ne s'adapte pas à la taille de la fenêtre du navigateur.

Il est important de noter que comme la balise <pre> conserve le formatage, toutes les balises HTML à l'intérieur de son contenu seront affichées comme du texte brut plutôt que d'être interprétées comme du HTML. Si vous souhaitez inclure des balises HTML dans du texte préformaté, vous devez utiliser des entités HTML pour représenter les caractères spéciaux, comme &lt; pour < et &gt; pour >.

Conseil: Entités HTML dans du texte préformaté

<pre>
  &lt;p&gt;Ceci est un exemple de texte préformaté avec des entités HTML.&lt;/p&gt;
</pre>

Dans l'exemple ci-dessus, les balises HTML <p> et </p> sont affichées comme du texte brut en utilisant leurs entités HTML correspondantes.

L'utilisation de la balise <pre> est un moyen simple d'afficher du texte préformaté tout en conservant son formatage d'origine, ce qui en fait un outil utile pour présenter des extraits de code, de l'art ASCII ou tout autre contenu qui repose sur des espacements et des sauts de ligne spécifiques.

Formatage du code

En HTML, vous pouvez formater le code en utilisant la balise <code> pour le code en ligne et une combinaison des balises <pre> et <code> pour les blocs de code.

Pour afficher du code en ligne, entourez le fragment de code avec la balise <code>. Cette balise est utilisée pour représenter une partie de code informatique dans une phrase ou un paragraphe.

Conseil: Exemple de code en ligne

Pour créer un nouveau paragraphe en HTML, utilisez la balise <p>.

Dans l'exemple ci-dessus, la balise <p> est entourée de balises <code> pour l'afficher comme du code en ligne. Notez que les caractères < et > sont remplacés par leurs entités HTML (&lt; et &gt;) pour éviter qu'ils ne soient interprétés comme du HTML.

Pour les blocs de code ou plusieurs lignes de code, utilisez la balise <pre> avec la balise <code>. La balise <pre> conserve le formatage, tandis que la balise <code> à l'intérieur indique que le contenu est du code.

Conseil: Exemple de bloc de code

<pre><code>
  function greet(name) {
    console.log("Hello, " + name + "!");
  }

  greet("John");
</code></pre>

L'utilisation de la balise <code> pour le code en ligne et des balises <pre> et <code> ensemble pour les blocs de code aide à séparer le code du texte normal, rendant votre document HTML plus facile à lire. Cela vous permet également de styliser le code différemment en utilisant CSS si vous le souhaitez.

Lorsque vous affichez du code en HTML, il est important d'utiliser des entités HTML pour les caractères spéciaux comme <, >, et & pour éviter qu'ils ne soient interprétés comme du HTML. Vous pouvez également envisager d'utiliser une bibliothèque ou un surligneur de syntaxe pour formater et styliser automatiquement vos blocs de code pour une meilleure présentation.

Citations

En HTML, vous pouvez créer des citations en utilisant la balise <blockquote>. Les citations sont utilisées pour indiquer que le texte inclus est une citation étendue provenant d'une autre source. Les navigateurs affichent généralement les citations avec des marges indentées des deux côtés pour les distinguer du contenu environnant.

Conseil: Créer une citation

<blockquote>
  "La seule façon de faire un excellent travail est d'aimer ce que vous faites." - Steve Jobs
</blockquote>

Dans l'exemple ci-dessus, le texte cité est inclus dans la balise <blockquote>, ce qui le rendra avec des marges indentées.

Vous pouvez également inclure la source de la citation en utilisant l'attribut cite dans la balise <blockquote>. L'attribut cite doit contenir une URL pointant vers la source de la citation.

Conseil: Citation avec l'attribut cite

<blockquote cite="https://www.example.com/quotes">
  "L'innovation distingue un leader d'un suiveur." - Steve Jobs
</blockquote>

Pour styliser davantage les citations, vous pouvez utiliser CSS. Quelques options de style courantes incluent la modification du style de police, de la taille ou de la couleur, l'ajustement de l'indentation, ou l'ajout d'une couleur de fond ou d'une bordure.

Conseil: Styliser les citations avec CSS

<style>
  blockquote {
    font-style: italic;
    font-size: 1.2em;
    color: #333;
    margin-left: 30px;
    padding: 10px;
    border-left: 5px solid #ccc;
    background-color: #f9f9f9;
  }
</style>

<blockquote>
  "Le design n'est pas seulement l'apparence et la sensation. Le design, c'est comment ça fonctionne." - Steve Jobs
</blockquote>

L'utilisation de citations avec un formatage et un style appropriés peut vous aider à présenter des citations de manière claire et attrayante dans vos documents HTML. Elles offrent un moyen d'indiquer des citations étendues et peuvent être personnalisées pour correspondre au design de votre site web.