HTML - Entités

Salut à toi, futurs développeurs web ! En tant qu'enseignant en informatique de votre quartier, je suis excité de vous emmener dans un voyage à travers le monde fascinant des entités HTML. Ne vous inquiétez pas si vous êtes nouveaux en programmation – nous allons commencer par les bases et progresser pas à pas. À la fin de ce tutoriel, vous serez un expert des entités HTML !

Quelles sont les entités HTML ?

Avant de plonger dedans, comprensons ce qu'elles sont. Pensez-y comme des codes spéciaux qui représentent des caractères qui pourraient être difficiles à afficher en HTML. C'est comme avoir un langage secret pour vos pages web !

Pourquoi avons-nous besoin d'entités HTML ?

Imaginez que vous souhaitez afficher le symbole inférieur (<?) dans votre HTML. Si vous le tapez directement, votre navigateur pourrait penser que c'est le début d'une nouvelle balise HTML ! C'est là que les entités entrent en jeu. Elles nous permettent d'afficher ces caractères spéciaux sans confondre le navigateur.

Entités HTML : Nom et Code

Commençons par quelques-unes des entités HTML les plus courantes. Nous allons regarder à la fois leur nom et leur code numérique.

Caractère	Nom Entité	Code Numérique
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'

Voyons ces entités en action :

<p>J'aime utiliser les balises &lt;strong&gt; pour rendre le texte <strong>gras</strong> !</p>
<p>Le symbole et (&amp;) est utilisé pour les entités HTML.</p>

Dans cet exemple, nous utilisons < et > pour afficher les balises réelles, et & pour montrer l'ampersand. Essayez de supprimer ces entités et voyez ce qui se passe !

Espaces insécables : Nom et Code

Maintenant, parlons d'une entité spéciale qui est incroyablement utile : l'espace insécable.

Caractère	Nom Entité	Code Numérique
(espace)

L'espace insécable est comme un super-héros de l'espace – il empêche les sauts de ligne là où vous ne les voulez pas. Par exemple :

<p>J'aime les entités HTML&nbsp;!</p>

Cela garantit que "HTML" et "entités" restent toujours sur la même ligne.

Exemple d'entités HTML

Mettons nos connaissances à l'épreuve avec un exemple amusant :

<p>J'apprends HTML &amp; c'est &lt;em&gt;incroyable&lt;/em&gt; !</p>
<p>Droits d'auteur &copy; 2023 par John&nbsp;Doe</p>

Dans cet exemple, nous utilisons & pour l'ampersand, < et > pour afficher les balises <em>, © pour le symbole de copyright, et   pour maintenir "John" et "Doe" ensemble.

Entités Symboles ISO 8859-1 Nom et Code

HTML fournit également des entités pour divers symboles. Voici quelques-uns des plus courants :

Symbole	Nom Entité	Code Numérique
©	©	©
®	®	®
™	™	™
€	€	€
£	£	£

Utilisons ces symboles dans un exemple pratique :

<pNotre entreprise, Web Wizards&trade;, accepte les paiements en &euro; et en &pound;.</p>
<p>Tous les contenus sont &copy; 2023 Web Wizards&reg;.</p>

Entités Caractères ISO 8859-1 Nom et Code

Parfois, vous pourriez avoir besoin d'afficher des caractères avec des accents ou d'autres signes diacritiques. Les entités HTML viennent à la rescousse encore une fois :

Caractère	Nom Entité	Code Numérique
à	à	à
é	é	é
ñ	ñ	ñ
ü	ü	ü

Voici comment vous pourriez les utiliser :

<p>En espagnol, "salut" est "hola" et "au revoir" est "adi&oacute;s".</p>
<p-Le mot français pour "plage" est "plage" (prononcé "pl&acirc;zh").</p>

Autres entités supportées par les navigateurs

Les navigateurs modernes supportent un large éventail d'entités, y compris des symboles mathématiques, des flèches, et même des emojis ! Voici quelques-uns amusants :

Symbole	Nom Entité	Code Numérique
∞	∞	∞
♥	♥	♥
→	→	→
☺	⌣	☺

Utilisons ces symboles pour créer un message amusant :

<p>J'ai &infin; d'amour pour HTML ! &hearts;</p>
<p>Avançons &rarr; et continuons à apprendre ! &smile;</p>

Souvenez-vous, bien que ces entités soient amusantes, il est important de les utiliser avec modération. L'utilisation excessive d'entités peut rendre votre HTML plus difficile à lire et à entretenir.

Conclusion

Félicitations ! Vous venez de faire un plongeon dans le monde des entités HTML. De l'affichage de caractères spéciaux à l'ajout de symboles amusants, vous avez maintenant un outil puissant dans votre boîte à outils de développement web.

Pour conclure, voici une petite histoire de mon expérience d'enseignement : J'ai eu un étudiant qui était frustré parce que ses ampersands disparaissaient de sa page web. Quand je lui ai montré les entités HTML, son visage s'est illuminé comme s'il avait découvert un trésor caché. C'est la magie de l'apprentissage – il y a toujours une solution en attente d'être découverte !

N'oubliez pas, la pratique rend parfait. Essayez d'intégrer ces entités dans vos projets HTML, et bientôt elles deviendront second nature. Bon codage, et puissent vos pages web être remplies de caractères et de symboles parfaitement rendus !

Credits: Image by storyset