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
-
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.
- Les entitats HTML són seqüències de caràcters que comencen amb
-
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ó |
---|---|---|
< |
< |
Menor que |
> |
> |
Major que |
& |
& |
Ampersand |
" |
" |
Cometes dobles |
' |
' |
Cometes simples |
|
|
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 <a>.</p> </body> </html>
Explicació:
- En aquest exemple, l'etiqueta
<a>
es mostra com a text gràcies a l'ús de les entitats<
i>
.
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 & i " 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&
i"
.
Exercicis Pràctics
Exercici 1: Convertir Caràcters Especials
Converteix els següents caràcters especials en les seves entitats HTML corresponents:
<
>
&
"
Solució:
<
>
&
"
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í:
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 <p>. Per crear un enllaç, utilitza l'etiqueta <a>.</p> </body> </html>
Errors Comuns
-
Oblidar el punt i coma (
;
) al final de l'entitat:- Incorrecte:
<
- Correcte:
<
- Incorrecte:
-
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
- Què és l'HTML?
- Configuració del teu entorn
- Estructura bàsica de l'HTML
- Etiquetes i elements HTML
- Creant la teva primera pàgina HTML
Mòdul 2: Formatació de text en HTML
- Encapçalaments i paràgrafs
- Etiquetes de formatació de text
- Llistes: Ordenades i desordenades
- Cites i text preformatat
Mòdul 3: Enllaços i mitjans en HTML
Mòdul 4: Taules en HTML
- Estructura bàsica de taules
- Encapçalaments i peus de taula
- Fusionant cel·les: Colspan i Rowspan
- Estilitzant taules
Mòdul 5: Formularis en HTML
- Creant un formulari bàsic
- Elements de formulari: Input, Textarea, i Select
- Atributs i validació de formularis
- Enviant formularis
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
- Enllaçant CSS a HTML
- CSS en línia, intern i extern
- Selectors bàsics de CSS
- Estilitzant elements HTML
Mòdul 9: Disseny web responsiu
- Introducció al disseny responsiu
- Etiqueta Meta del Viewport
- Media Queries
- Imatges i vídeos responsius
Mòdul 10: Millors pràctiques i accessibilitat
- Millors pràctiques d'HTML
- Conceptes bàsics d'accessibilitat web
- Utilitzant rols ARIA
- Proves d'accessibilitat