¡BUSCA MÁS CONTENIDO AQUÍ!



PALABRA DE VIDA

"Porque de tal manera amó Dios al mundo, que ha dado a su Hijo unigénito, para que todo aquel que en él cree, no se pierda, mas tenga vida eterna".

JUAN C.3 V.16





Cuando diseñamos y/o creamos un sitio web, debemos ser conscientes de que el contenido de esta siempre llevará texto, sea poco o mucho, siempre lo llevará.
Ahora, dicho texto muchas veces dependiendo del lenguaje o idioma usado, conllevará a la necesidad de hacer uso de acentos y caracteres especiales.

Como veíamos en un capítulo anterior donde explicábamos la creación de la estructura básica de una página web HTML5, usando NetBeans IDE. Si a la página de ejemplo que tenemos le procedemos a cambiar el título "Portal Web" por "Página Web", y además de ello entre las etiquetas del cuerpo (<body></body>) colocamos letras con acentos y varios caracteres especiales, ejemplo: áéíóúñü-°!"#$%&/()=?¡@-ÁÉÍÓÚÑÜ

Si procedemos a dar clic en el botón "Ejecutar Project" de NetBeans IDE, para visualizar nuestra web en el navegador, nos daremos cuenta en el título de nuestra página y en el contenido de la misma, de que no todo se visualizará correctamente, mayormente las letras acentuadas:
Botón "Ejecutar Project".
"Botón Ejecutar Project"

Visualización errónea de caracteres y acentos en una página web.
"Error de visualización de caracteres y acentos"

Para corregir y/o solventar esta situación, solamente es necesario llevar a cabo un paso:

1.Entre las etiquetas de la cabecera (<head></head>) y preferiblemente a continuación de la etiqueta de apertura (<head>), haremos uso de la etiqueta "meta" la cual nos permite añadir información sobre la página, dentro de esta etiqueta estableceremos el atributo "charset" con el fin de establecer y/o especificar la codificación de caracteres utilizada en el documento ".html". El tipo de codificación a usar será "UTF-8"; en otras palabras, la línea de código a emplear quedaría de la siguiente forma:

<meta charset="UTF-8">

Implementando dicha línea en nuestro documento ".html", la estructura se verá así:

Código HTML5 que conforma la estructura de una página web.
"Estructura de la página web"

Con esa sencilla línea de código ya podrás usar acentos y caracteres especiales en tu sitio web.

2.Si volvemos a dar clic en el botón "Ejecutar Project" de NetBeans IDE, nos daremos cuenta que el título y contenido de nuestra web, se visualizarán de forma correcta:

Visualización correcta de caracteres y acentos en el navegador web.
"Visualización correcta de caracteres y acentos"

Ahora, posiblemente por una u otra razón se puede dar el caso de que se te presente algún inconveniente con la visualización de algún acento y/o carácter, o en su defecto, ya sea que necesites emplear un símbolo o carácter especial que no encuentras en tu teclado o no sabes la combinación de teclas para poder implementarlo, sea cual sea tu caso; a continuación, encontrarás una tabla de los códigos necesarios que podrás usar en tu documento ".html" para que puedas hacer uso de ciertos símbolos y/o caracteres especiales en tu web:
 
NOTA: Para implementar un acento, símbolo y/o carácter especial; puedes hacer uso del código que está en la columna "ASCII", o en su defecto, el de la columna "HTML" de la tabla.

"Tabla de códigos ASCII/HTML para acentos y caracteres especiales"

Acentos
ASCII
HTML
Carácter
Descripción
&#192;
&Agrave;
À
letra mayúscula latina A con acento grave
&#193;
&Aacute;
Á
letra mayúscula latina A con acento agudo
&#194;
&Acirc;
Â
letra mayúscula latina A con acento circunflejo
&#195;
&Atilde;
Ã
letra mayúscula latina A con tilde
&#196;
&Auml;
Ä
letra mayúscula latina A con diéresis
&#200;
&Egrave;
È
letra mayúscula latina E con acento grave
&#201;
&Eacute;
É
letra mayúscula latina E con acento agudo
&#202;
&Ecirc;
Ê
letra mayúscula latina E con acento circunflejo
&#203;
&Euml;
Ë
letra mayúscula latina E con diéresis
&#204;
&Igrave;
Ì
letra mayúscula latina I con acento grave
&#205;
&Iacute;
Í
letra mayúscula latina I con acento agudo
&#206;
&Icirc;
Î
letra mayúscula latina I con acento circunflejo
&#207;
&Iuml;
Ï
letra mayúscula latina I con diéresis
&#210;
&Ograve;
Ò
letra mayúscula latina O con acento grave
&#211;
&Oacute;
Ó
letra mayúscula latina O con acento agudo
&#212;
&Ocirc;
Ô
letra mayúscula latina O con acento circunflejo
&#213;
&Otilde;
Õ
letra mayúscula latina O con tilde
&#214;
&Ouml;
Ö
letra mayúscula latina O con diéresis
&#217;
&Ugrave;
Ù
letra mayúscula latina U con acento grave
&#218;
&Uacute;
Ú
letra mayúscula latina U con acento agudo
&#219;
&Ucirc;
Û
letra mayúscula latina U con acento circunflejo
&#220;
&Uuml;
Ü
letra mayúscula latina U con diéresis
&#352;
&Scaron;
Š
letra mayúscula latina S con anti circunflejo
&#221;
&Yacute;
Ý
letra mayúscula latina Y con acento agudo
&#376;
&Yuml;
Ÿ
letra mayúscula latina Y con diéresis
&#224;
&agrave;
à
letra minúscula latina a con acento grave
&#225;
&aacute;
á
letra minúscula latina a con acento agudo
&#226;
&acirc;
â
letra minúscula latina a con acento circunflejo
&#227;
&atilde;
ã
letra minúscula latina a con tilde
&#228;
&auml;
ä
letra minúscula latina a con diéresis
&#232;
&egrave;
è
letra minúscula latina e con acento grave
&#233;
&eacute;
é
letra minúscula latina e con acento agudo
&#234;
&ecirc;
ê
letra minúscula latina e con acento circunflejo
&#235;
&euml;
ë
letra minúscula latina e con diéresis
&#236;
&igrave;
ì
letra minúscula latina i con acento grave
&#237;
&iacute;
í
letra minúscula latina i con acento agudo
&#238;
&icirc;
î
letra minúscula latina i con acento circunflejo
&#239;
&iuml;
ï
letra minúscula latina i con diéresis
&#242;
&ograve;
ò
letra minúscula latina o con acento grave
&#243;
&oacute;
ó
letra minúscula latina o con acento agudo
&#244;
&ocirc;
ô
letra minúscula latina o con acento circunflejo
&#245;
&otilde;
õ
letra minúscula latina o con tilde
&#246;
&ouml;
ö
letra minúscula latina o con diéresis
&#249;
&ugrave;
ù
letra minúscula latina u con acento grave
&#250;
&uacute;
ú
letra minúscula latina u con acento agudo
&#251;
&ucirc;
û
letra minúscula latina u con acento circunflejo
&#252;
&uuml;
ü
letra minúscula latina u con diéresis
&#353;
&scaron;
š
letra minúscula latina S con anti circunflejo
&#253;
&yacute;
ý
letra minúscula latina y con acento agudo
&#255;
&yuml;
ÿ
letra minúscula latina y con diéresis
Símbolos generales y Símbolos matemáticos
ASCII
HTML
Carácter
Descripción
&#160;
&nbsp;

espacio en blanco de no separación (sin retorno)
&#33;
-
!
signo de exclamación
&#161;
&iexcl;
¡
signo de exclamación invertido
&#63;
-
?
signo de interrogación
&#191;
&iquest;
¿
signo de interrogación invertido
&#40;
-
(
paréntesis de apertura
&#41;
-
)
paréntesis de cierre
&#91;
-
[
corchete de apertura
&#93;
-
]
corchete de cierre
&#123;
-
{
llave de apertura
&#125;
-
}
llave de cierre
&#9001;
&lang;
corchete angular hacia la izquierda
&#9002;
&rang;
corchete angular hacia la derecha
&#60;
&lt;
signo menor que
&#62;
&gt;
signo mayor que
&#171;
&laquo;
«
comillas dobles angulares abiertas
&#187;
&raquo;
»
comillas dobles angulares cerradas
&#8249;
&lsaquo;
comilla simple angular abierta
&#8250;
&rsaquo;
comilla simple angular cerrada
&#34;
&quot;
"
comillas rectas dobles
&#39;
-
'
comilla recta simple
&#8216;
&lsquo;
comilla simple abierta
&#8217;
&rsquo;
comilla simple cerrada
&#8220;
&ldquo;
comillas dobles abiertas
&#8221;
&rdquo;
comillas dobles cerradas
&#92;
-
\
barra invertida = backslash
&#47;
-
/
barra inclinada = slash
&#124;
-
|
pleca
&#166;
&brvbar;
¦
pleca partida = barra vertical partida
&#64;
-
@
arroba
&#38;
&amp;
&
ampersand
&#35;
-
#
numeral
&#42;
-
*
asterisco
&#126;
-
~
tilde de la eñe = virgulilla de la eñe
&#164;
&curren;
¤
signo de moneda
&#167;
&sect;
§
signo de sección
&#182;
&para;
signo de párrafo
&#162;
&cent;
¢
signo de centavo
&#163;
&pound;
£
signo de libra
&#165;
&yen;
¥
signo de yen
&#8364;
&euro;
símbolo del euro
&#402;
&fnof;
ƒ
f minúscula latina con gancho = función = florín
&#37;
-
%
porcentaje
&#8240;
&permil;
por mil
&#169;
&copy;
©
signo de copyright
&#174;
&reg;
®
signo de registrado = signo de marca comercial registrada
&#8482;
&trade;
signo de marca comercial
&#44;
-
,
coma
&#46;
-
.
punto
&#58;
-
:
dos puntos
&#59;
-
;
punto y coma
&#183;
&middot;
·
punto medio = coma georgiana
&#184;
&cedil;
¸
cedilla
&#8218;
&sbquo;
comilla simple inferior
&#8222;
&bdquo;
comillas dobles inferiores
&#8226;
&bull;
marcador = viñeta = círculo negro pequeño
&#8230;
&hellip;
elipsis horizontal = puntos suspensivos
&#45;
-
-
guión medio
&#95;
-
_
guión bajo = raya al piso
&#8211;
&ndash;
guión corto = en dash
&#8212;
&mdash;
guión largo = em dash
&#172;
&not;
¬
signo de negación
&#180;
&acute;
´
acento agudo
&#710;
&circ;
ˆ
acento circunflejo
&#732;
&tilde;
˜
tilde pequeña
&#94;
-
^
intercalación
&#96;
-
`
acento grave
&#168;
&uml;
¨
diéresis
&#175;
&macr;
¯
macrón (marca larga) = superguión = guión alto
&#186;
&ordm;
º
indicador ordinal masculino
&#170;
&ordf;
ª
indicador ordinal femenino
&#176;
&deg;
°
signo de grados
&#43;
-
+
signo de adición = suma
&#215;
&times;
×
signo de multiplicación
&#247;
&divide;
÷
signo de división
&#177;
&plusmn;
±
signo más menos = signo más o menos
&#185;
&sup1;
¹
uno superíndice
&#178;
&sup2;
²
dos superíndice = al cuadrado
&#179;
&sup3;
³
tres superíndice = al cubo
&#188;
&frac14;
¼
fracción común un cuarto = fracción de un cuarto
&#189;
&frac12;
½
fracción común un medio = fracción de un medio
&#190;
&frac34;
¾
fracción común tres cuartos = fracción de tres cuartos
&#61;
-
=
signo igual
&#8704;
&forall;
para todo
&#8706;
&part;
diferencial parcial
&#8707;
&exist;
existe
&#8709;
&empty;
conjunto vacío = diámetro
&#8711;
&nabla;
nabla
&#8712;
&isin;
pertenece a
&#8713;
&notin;
no pertenece a
&#8715;
&ni;
contiene a
&#8719;
&prod;
producto de n elementos = signo de productorio
&#8721;
&sum;
sumatorio
&#8722;
&minus;
signo menos
&#8727;
&lowast;
operador asterisco
&#8730;
&radic;
raíz cuadrada = signo radical
&#8733;
&prop;
proporcional a
&#8734;
&infin;
infinito
&#8736;
&ang;
ángulo
&#8743;
&and;
y lógico
&#8744;
&or;
o lógico
&#8745;
&cap;
intersección
&#8746;
&cup;
unión
&#8747;
&int;
integral
&#8756;
&there4;
de aquí
&#8764;
&sim;
operador tilde = varía con = similar a
&#8773;
&cong;
aproximadamente igual a
&#8776;
&asymp;
casi igual que = asintótico a
&#8800;
&ne;
distinto de
&#8801;
&equiv;
idéntico a
&#8804;
&le;
menor o igual que
&#8805;
&ge;
mayor o igual que
&#8834;
&sub;
subconjunto de
&#8835;
&sup;
superconjunto de
&#8836;
&nsub;
no es subconjunto de
&#8838;
&sube;
subconjunto de o igual que
&#8839;
&supe;
superconjunto de o igual que
&#8853;
&oplus;
círculo más = suma directa
&#8855;
&otimes;
círculo por = producto vectorial
&#8869;
&perp;
ortogonal a = perpendicular
&#8901;
&sdot;
operador punto
&#8242;
&prime;
prima = minutos = pies
&#8243;
&Prime;
doble prima = segundos = pulgadas
&#8472;
&weierp;
P mayúscula cursiva = conjunto potencia = p de Weierstrass
&#8465;
&image;
I negra mayúscula = parte imaginaria
&#8476;
&real;
R negra mayúscula = símbolo de parte real
&#8501;
&alefsym;
símbolo alef = primer cardinal transfinito
Flechas
ASCII
HTML
Carácter
Descripción
&#8592;
&larr;
flecha hacia la izquierda
&#8593;
&uarr;
flecha hacia arriba
&#8594;
&rarr;
flecha hacia la derecha
&#8595;
&darr;
flecha hacia abajo
&#8596;
&harr;
flecha izquierda derecha
&#8629;
&crarr;
flecha doblada hacia abajo = retorno de carro
&#8656;
&lArr;
flecha doble hacia la izquierda
&#8657;
&uArr;
flecha doble hacia arriba
&#8658;
&rArr;
flecha doble hacia la derecha
&#8659;
&dArr;
flecha doble hacia abajo
&#8660;
&hArr;
flecha doble izquierda derecha

¿Aprendiste a emplear acentos y caracteres especiales en tu página web HTML5? ¿Conoces más códigos ASCII/HTML de otros caracteres usados? ¡Compártelos!

Si te fue de gran ayuda esta información, no olvides compartirla con tus amigos y en tus redes sociales.
Si tienes dudas o sugerencias al respecto; abajo puedes dejarnos tus comentarios.
Bendiciones...

Comparte este artículo:





Sobre El Autor

Eduardo Bastidas UH

Cristiano y Colombiano. Analista de Sistemas & Blogger.
Me motiva mucho el poder compartir día tras día lo que he aprendido y voy aprendiendo en el área de las Tecnologías de la Información y las Comunicaciones.

0 comentarios:

Publicar un comentario