Cours IT Bases HTML 011_Texte

HTML fournit une grande quantité de balises de texte que nous pouvons utiliser lors de la création de pages web. Ces balises peuvent nous aider à mieux organiser et formater notre contenu textuel. Voici quelques balises de texte HTML couramment utilisées.

Titres

Les éléments de titre sont utilisés pour définir les titres ou sous-titres d’un document HTML. Ils représentent généralement la hiérarchie de la structure du document. Il existe six niveaux de titre, de h1 à h6, et plus le niveau est élevé, plus le titre est important.

Exemple :

1
<h1>Ceci est un titre h1</h1>
2
<h2>Ceci est un titre h2</h2>
3
...
4
<h6>Ceci est un titre h6</h6>

Effet :

[!Résumé]

• Veuillez vous assurer que les éléments de titre ne sont utilisés que pour les titres et ne doivent pas être utilisés uniquement pour le gras ou les grandes tailles de police.
• Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de votre page web.
• L’utilisation correcte des éléments de titre peut rendre la page plus lisible et accessible, tout en étant bénéfique pour le référencement.
• Vous devriez utiliser h1 comme unique titre principal (le plus important), suivi de h2 (deuxième en importance), puis h3, et ainsi de suite.

Paragraphes

Les éléments de paragraphe sont utilisés pour définir la structure de paragraphe du texte, rendant le texte plus organisé et lisible. Il ajoute un saut de ligne avant et après le contenu, regroupant le texte en sections indépendantes, de sorte que les paragraphes soient clairement séparés. L’élément de paragraphe consiste principalement en la balise <p>, qui représente un paragraphe.

Exemple :

1
<p>Ceci est un paragraphe.</p>
2
<p>Ceci est un autre paragraphe.</p>

Effet :

[!Résumé]

• Un document HTML peut contenir plusieurs paragraphes
• Le navigateur ajoute automatiquement des lignes vides avant et après les paragraphes
• N’oubliez pas la balise de fermeture (même si vous l’oubliez, la plupart des navigateurs l’afficheront correctement)
• Si vous n’aimez pas les lignes vides ajoutées par l’élément de paragraphe et souhaitez réduire l’espacement des lignes, utilisez la balise <br>
• Par défaut, le nombre de caractères affichés dans une ligne de code dans l’élément de paragraphe est déterminé par la largeur de l’écran

Hyperliens

L’élément <a> est utilisé pour définir des hyperliens, permettant aux utilisateurs de cliquer sur des liens et de naviguer vers d’autres pages ou ressources. La balise <a> contient généralement du texte ou des images, qui deviendront la partie cliquable du lien. En même temps, nous spécifions l’adresse de destination du lien via l’attribut href de la balise <a>. Les hyperliens sont une fonctionnalité de base en HTML et peuvent créer des liens vers d’autres parties de la page web, vers d’autres pages web ou même vers d’autres sites web.

Exemple :

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Effet :

Attributs d’hyperlien

• href : Spécifie l’URL de la destination du lien, c’est l’attribut le plus important du lien. Il peut s’agir de l’URL d’une autre page web, de l’URL d’un fichier ou de l’URL d’une autre ressource.
• target (facultatif) : Spécifie comment le lien s’ouvre dans le navigateur. Les valeurs courantes incluent _blank (ouvre le lien dans un nouvel onglet ou fenêtre) et _self (ouvre le lien dans l’onglet ou la fenêtre actuelle, état par défaut).
• title (facultatif) : Fournit des informations textuelles sur le lien, généralement affichées lorsque la souris survole le lien.
• rel (facultatif) : Spécifie la relation avec la destination du lien, comme nofollow (ne pas suivre), noopener (ne pas ouvrir de nouveau contexte), noreferrer (ne pas transmettre d’informations de référence), etc.
• class : Spécifie la classe CSS du lien.
• id : Spécifie l’ID CSS du lien.

Liens d’ancrage

Sur une longue page web, nous pouvons souhaiter créer des liens vers certaines parties à l’intérieur de la page. Cela peut être réalisé grâce aux liens d’ancrage. Tout d’abord, nous devons utiliser l’attribut name ou id de la balise <a> pour marquer la position cible, puis dans l’attribut href du lien, utiliser # plus la valeur name ou id de la cible pour créer le lien.

Exemple :

1
<a href="#a1">Aller à a1</a>
2
<!-- Ici, du contenu suffisant pour faire défiler ou <br> est omis -->
3
<a name="a1">Un certain contenu</a>

Effet :

Après avoir cliqué sur l’hyperlien “Aller à a1”, la page se déplacera vers la section “contenu a1”.

Liens e-mail

En plus de créer des liens vers d’autres pages web, la balise <a> peut également créer des liens vers des adresses e-mail. En ajoutant mailto: avant la valeur de l’attribut href, il est possible de créer un lien qui, lorsqu’on clique dessus, lancera le client de messagerie par défaut de l’utilisateur et créera un nouvel e-mail.

Exemple :

1
<a href="mailto:757118@qq.com">Envoyer un e-mail à 757118@qq.com</a>

Effet :

En cliquant sur cet hyperlien, le système lancera le client de messagerie par défaut et créera un nouvel e-mail destiné à 757118@qq.com.

[!Résumé]

• Lorsque vous déplacez le pointeur de la souris sur un lien dans une page web, la flèche se transforme en une petite main.
• Les hyperliens ne doivent pas nécessairement être du texte, les images ou autres éléments HTML peuvent également devenir des liens.
• Par défaut, les liens apparaîtront dans le navigateur sous les formes suivantes : Un lien non visité s’affiche en police bleue avec soulignement. Un lien visité s’affiche en violet avec soulignement. Lorsque vous cliquez sur un lien, le lien s’affiche en rouge avec soulignement.

Saut de ligne

L’élément de saut de ligne <br> est utilisé pour insérer un caractère de saut de ligne dans le texte, forçant le texte à passer à une nouvelle ligne.

Exemple :

1
Ceci est une ligne de texte.<br>Ceci est une autre ligne de texte.

Effet :

[!Résumé]

• La barre oblique / dans la balise <br> est facultative. En HTML 4, la balise <br /> doit contenir une barre oblique ; En HTML 5, la barre oblique est facultative.

Gras

L’élément <b> est une balise de style de texte basique utilisée pour définir le texte en gras, mais sans emphase sémantique sur le texte. L’élément <strong> est une balise sémantique utilisée pour exprimer l’emphase du texte, généralement les navigateurs l’afficheront en gras.

Exemple :

1
Ceci est du texte normal
2
<b>Ceci est du texte en gras</b>
3
<strong>Ceci est du texte en gras avec emphase sémantique</strong>

Effet :

Italique

L’élément <i> est utilisé pour représenter un effet de texte en italique, mais sans emphase sémantique sur le texte. L’élément <em> est utilisé pour représenter du texte en italique, généralement utilisé pour souligner l’importance du texte ou créer des effets visuels.

Exemple :

1
Ceci est du texte normal
2
<i>Ceci est un texte en italique</i>
3
<em>Ceci est un texte en italique avec emphase sémantique</em>

Effet :

Soulignement

L’élément de soulignement <u> est utilisé pour représenter du texte souligné.

Exemple :

1
Ceci est un texte avec <u>soulignement</u>

Effet :

[!Résumé]

• En HTML 5, l’élément de soulignement <u> a été déprécié. Cela signifie qu’il reste un élément HTML valide, mais son utilisation n’est pas recommandée.

Barré

L’élément barré <del> est utilisé pour afficher du texte qui a été supprimé ou est obsolète. Les navigateurs ajoutent généralement une ligne horizontale à travers ce texte.

Exemple :

1
Ceci est un texte <del>barré</del>

Effet :

[!Résumé]

• En HTML5, l’élément barré <del> a été déprécié. Cela signifie qu’il reste un élément HTML valide, mais son utilisation n’est pas recommandée.

Surligné

L’élément <mark> est utilisé pour marquer une partie du texte afin de mettre en évidence ou de marquer cette partie du texte. Généralement, le texte marqué par l’élément <mark> sera mis en évidence avec un fond jaune pour le rendre plus visible dans le document.

Exemple :

1
Ceci est un texte <mark>surligné</mark>

Effet :

Indice et exposant

L’élément <sub> représente du texte en indice (subscript), l’élément <sup> représente du texte en exposant (superscript). Les éléments d’indice et d’exposant sont généralement utilisés dans des scénarios de mathématiques, de formules chimiques, de dates, de températures, etc.

Exemple :

1
H<sub>2</sub>O est la formule moléculaire de l'eau.
2
2<sup>10</sup> est égal à 1024.

Effet :