La codificación de las páginas web (charset) es un problema recurrente para los diseñadores de web, que hace que nuestra web no aparezca bien los acentos y las eñes. Esto puede deberse a muchas razones: en la forma de editar y guardar nuestro texto con la codificación que estamos guardando el documento en el editor que usamos, en la forma que codificamos el html para mostrar, o incluso en la forma que está codificada para mostrar el servidor, o incluso si nuestro texto se guarda en una base de datos es depende a la codificación de la tabla y del campo de la base de datos.
El estándar HTML está preparado para colocar todos los símbolos y acentos que nos sean necesarios, codificándolos. Así, para los acentos y eñes, deberíamos colocar el siguiente código:
á -> á
por ejemplo para colocar página deberíamos escribirlo de esta forma: página.
Vamos a ver el listado de todas las letras acentuadas:
á -> á
é -> é
í -> í
ó -> ó
ú -> ú
ü -> ü
Para las mayúsculas:
Á -> Á
É -> É
Í -> í
Ó -> ó
Ú -> Ú
Ü -> Ü
Y para la eñe lo hacemos de esta forma:
ñ -> ñ
Ñ -> Ñ
Variantes valenciano-catalán-balear para acentos abiertos:
à -> à
è -> è
ò -> ò
De este modo, veremos todos los caracteres correctamente, independientemente del charset (codificación).
Sin embargo, puede ser tedioso para ciertos contenidos tener que ir traduciendo nosotros manualmente los caracteres. Es en estos casos donde vale la pena perder un poco de tiempo para ajustar las distintas configuraciones.
Para ello podemos configurar nuestro html utilizando las etiquetas META. Y sería de esta forma:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
o bien
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Este código se deberá colocar entre las etiquetas <head> del documento y es para indicar que tipo de configuración queremos darle. para codificar la web en: UTF-8 lo haremos de esta forma:
<html>
<head>
<title>
web en UTF-8
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
</html>
Si seguimos con el problema y ninguna de las 2 codificaciones anteriores funciona, el caso es mas complejo y no nos quedará otra que codificar cada letra en código html.
Para caracteres especiales tienen otras codificaciones, pero eso lo aprenderemos en otras clases.
Hasta aquí tenemos bastante que practicar, intentando codificar todos los acentos posibles de un texto que elijas en codificación html para que se vea bien.
¡Hasta la próxima clase!
No hay comentarios:
Publicar un comentario