Introducció

Les entitats HTML són una manera de representar caràcters especials en el codi HTML que, d'una altra manera, podrien ser interpretats com a part del llenguatge HTML. Això és especialment útil per mostrar caràcters que tenen un significat especial en HTML, com ara <, >, &, i ".

Conceptes Clau

  1. Què són les entitats HTML?

    • Les entitats HTML són seqüències de caràcters que comencen amb & i acaben amb ;.
    • S'utilitzen per representar caràcters especials que no es poden incloure directament en el codi HTML.
  2. Per què utilitzar entitats HTML?

    • Per evitar conflictes amb el codi HTML.
    • Per assegurar que els caràcters especials es mostrin correctament en tots els navegadors.

Llista d'Entitats Comunes

Entitat Caràcter Descripció
&lt; < Menor que
&gt; > Major que
&amp; & Ampersand
&quot; " Cometes dobles
&apos; ' Cometes simples
&nbsp; Espai en blanc no trencable

Exemples Pràctics

Exemple 1: Mostrant Etiquetes HTML

Si vols mostrar una etiqueta HTML en una pàgina web sense que el navegador la interpreti com a codi HTML, utilitza entitats HTML.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Entitats HTML</title>
</head>
<body>
    <p>Per crear un enllaç, utilitza l'etiqueta &lt;a&gt;.</p>
</body>
</html>

Explicació:

  • En aquest exemple, l'etiqueta <a> es mostra com a text gràcies a l'ús de les entitats &lt; i &gt;.

Exemple 2: Mostrant Caràcters Especials

Si vols mostrar caràcters especials com l'ampersand (&), utilitza l'entitat corresponent.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Entitats HTML</title>
</head>
<body>
    <p>Els caràcters especials com &amp; i &quot; necessiten entitats HTML.</p>
</body>
</html>

Explicació:

  • En aquest exemple, els caràcters & i " es mostren correctament gràcies a l'ús de les entitats &amp; i &quot;.

Exercicis Pràctics

Exercici 1: Convertir Caràcters Especials

Converteix els següents caràcters especials en les seves entitats HTML corresponents:

  1. <
  2. >
  3. &
  4. "

Solució:

  1. &lt;
  2. &gt;
  3. &amp;
  4. &quot;

Exercici 2: Crear una Pàgina amb Entitats HTML

Crea una pàgina HTML que mostri el següent text exactament com es veu aquí:

Per crear un paràgraf, utilitza l'etiqueta <p>. Per crear un enllaç, utilitza l'etiqueta <a>.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici d'Entitats HTML</title>
</head>
<body>
    <p>Per crear un paràgraf, utilitza l'etiqueta &lt;p&gt;. Per crear un enllaç, utilitza l'etiqueta &lt;a&gt;.</p>
</body>
</html>

Errors Comuns

  1. Oblidar el punt i coma (;) al final de l'entitat:

    • Incorrecte: &lt
    • Correcte: &lt;
  2. Utilitzar entitats HTML incorrectes:

    • Assegura't d'utilitzar les entitats correctes per als caràcters que vols mostrar.

Resum

En aquesta secció, hem après què són les entitats HTML, per què són importants i com utilitzar-les per mostrar caràcters especials en el codi HTML. Hem vist exemples pràctics i hem practicat amb exercicis per reforçar els conceptes apresos. Ara estàs preparat per utilitzar entitats HTML en els teus projectes web!

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

© Copyright 2024. Tots els drets reservats