Los objetivos de este módulo son:
- Aprender a crear páginas web con tablas e imágenes.
- Aprender a válidar el código HTML para crear páginas web correctas.
- Aprender las principales novedades de HTML5.
En las semanas anteriores has aprendido los conceptos básicos sobre la creación de páginas web. Algunas cosas importantes, como el juego de caracteres o la validación del código HTML no las hemos explicado para facilitarte el aprendizaje. Pero esta semana ya toca, tienes que aprender a realizar páginas web correctas.
Además, esta semana vas a aprender a incluir elementos nuevos en una página web.
Vas a aprender a crear tablas para mostrar datos tabulados.
Y vas a aprender a insertar imágenes.
En las próximas semanas aprenderás a insertar otros elementos multimedia, como por ejemplo los vídeos.
Por último, también vas a aprender las principales novedades que incorpora HTML5, la última versión de HTML.
HTML: juego de caracteres
El juego de caracteres, también llamado codificación de caracteres, es la pesadilla de la mayoría de los informáticos porque es una fuente de problemas inagotable.
En el siguiente vídeo se muestran ejemplos reales de problemas con el juego de caracteres y se proporcionan los consejos más importantes para trabajar con el juego de caracteres:
Utiliza siempre el mismo juego de caracteres.
Utiliza UTF-8 sin BOM.
Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
Cómo se indica el juego de caracteres en HTML (etiqueta meta).
Diferencias entre HTML4, XHTML1 y HTML5.
¿Alguna vez el nombre de un fichero o su contenido no lo has podido ver bien al moverlo de un sistema operativo a otro?
¿Alguna vez has instalado un programa y no se visualizaban correctamente algunos caracteres?
¿Alguna vez te han dado un justificante, un extracto bancario o un recibo en el que no se mostraban correctamente algunos caracteres?
¿Alguna vez has entrado en una página web y te aparecían caracteres chinos cuando la página no estaba en chino?
Si alguna vez has sufrido un problema parecido y te has sentido solo porque pensabas que eras el único al que le pasaba, no te preocupes, porque no estabas solo, mucha gente como tú, sufre estos problemas todos los días.
Sin duda alguna, en el campo de la informática, el juego de caracteres es de las cosas más simples que más problemas ocasiona.
Mapa de caracteres, ASCII, ISO-8859-1, Latin-1, ANSI, UTF-8, UTF-8 sin BOM, Unicode, Cotejamiento.
¡Menudo lío! ¿Qué significa todo esa sopa de términos?
A muchos experimentados informáticos, las palabras “juego de caracteres” les produce horribles pesadillas. Para que a ti tampoco te produjese pesadillas y entendieses correctamente qué es el juego de caracteres, tendría que empezar por el principio, por la primera descripción conocida de un sistema de numeración binario que se debe a un matemático hindú del siglo tercero antes de nuestra era.
Después te tendría que explicar que el sistema binario moderno fue documentado en su totalidad por el gran matemático Leibniz, en el siglo XVII. Leibniz utilizó el 0 y el 1, al igual que el sistema de numeración binario actual.
La regla más importante es muy fácil de recordar: utiliza siempre el mismo juego de caracteres en todo lo que hagas. ¿Qué significa esto en una aplicación web?
Significa que todos los ficheros que compongan tu sitio web, deben estar almacenados en el mismo juego de caracteres: tus ficheros HTML, CSS, JavaScript, de texto, etc.
Pero también tus páginas PHP. Y cualquier fichero de texto que leas desde PHP. Y también los datos que estén almacenados en tu base de datos. Y también la conexión que establezcas con tu base de datos. Y si invocas a un servicio web que te devuelve datos en formato XML o JSON, pues lo mismo, los datos que te devuelva también tienen que estar en el mismo juego de caracteres.
Sencillo, ¿verdad? Pues no es tan sencillo, porque esto muchas veces es imposible de lograr, no porque no se pueda, sino porque no depende de nosotros. Lo normal es que en un escenario real nos encontremos con algo parecido a esto,
En ese momento es cuando te toca llamar al informático para que te solucione el problema, pero no a un informático que se dedica a instalar el Windows o a cambiar tarjetas gráficas, no, a un informático de verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo, UTF-8 sin BOM, es la solución a todos los problemas, y te permite mezclar en un mismo documento textos en cualquier idioma, es decir, te permite mezclar caracteres de cualquier alfabeto, pero absolutamente sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón, entonces te recomiendo ISO-8859-1, también llamado Latin1. Después de UTF-8, es el mejor juego de caracteres para los idiomas de Europa occidental, incluido el español.
Pero si necesitas escribir el símbolo del euro, entonces debes utilizar ISO-8859-15, también llamado Latin9.
Latin1 y Latin9 se diferencian únicamente en 8 caracteres que han cambiado, y el único realmente importante para el español es la sustitución de un carácter que seguramente nunca has usado por el símbolo del euro.
¿Cómo indico el juego de caracteres en HTML?
Se realiza mediante una etiqueta <meta>, que se escribe en el <head> de la página web, pero depende de la versión de HTML que estés utilizando.
Si estás utilizando HTML4, debes utilizar esta sintaxis
Si estás utilizando XHTML 1, debes utilizar alguna de estas dos sintaxis. Además, si empleas un juego de caracteres diferente a UTF-8, también tendrás que indicar el juego de caracteres mediante la declaración de documento XML al principio de la página web
UTF-8 sin BOM / con BOM
En el siguiente vídeo se explica qué es UTF-8 sin BOM (Byte Order Mark) y con BOM y se muestran los habituales problemas con los editores de texto
