XML, HTML y XHTML

En el siguiente vídeo se explican las diferencias entre XML, HTML y XHTML.

HTML: ¿migrar a un nuevo juego de caracteres?

Debes ver el vídeo "HTML: ¿migrar a un nuevo juego de caracteres?" en el que plantean diferentes posibilidades ante el problema de migrar o no migrar un sitio web que ya existe a otro juego de caracteres.

HTML5: ¿Por qué es importante escribir código correcto?

En este vídeo se explican las principales causas por las que una página web no se ve igual en todos los navegadores:

• Fallos de los navegadores.
• Problemas de compatibilidad entre los navegadores.
• Soporte de HTML por los navegadores.
• Errores en el código HTML.

 

 

En este vídeo se muestran algunos ejemplos de errores en el código HTML:

• Etiqueta <b> sin cerrar.
• Etiqueta <span> sin cerrar.
• Comillas del valor de un atributo sin cerrar (2 versiones).
• Valor del atributo size de la etiqueta "input" incorrecto.

 En este vídeo se explica qué es el DOM (Document Object Model) y por qué es la razón por la que los navegadores muestran una página de diferentes formas cuando tiene un error.

HTML5: Ejemplo de formulario

En este vídeo verás un ejemplo de formulario en HTML5. Recuerda que los nuevos controles de formulario de HTML5 es una de sus mejores características.

Los formularios en HTML5

HTML5 incorpora novedades muy interesantes para la creación de formularios. Estas novedades aumentan los tipos de controles (se añade un control para introducir una fecha o un correo electrónico) y las características que se pueden configurar (se puede definir un patrón de entrada o un placeholder) pero hay que llevar cuidado al usarlas, ya que no todos los navegadores las aceptan todas por ahora (pero sí que lo harán en breve).

En las siguientes lecciones se resumen las novedades principales y se muestran algunos ejemplos. Si quieres complementar y contrastar lo que se explica, te recomendamos la lectura de Formularios en HTML5.

En el siguiente vídeo se presentan los nuevos controles de HTML5:

• url.
• tel.
• email.
• number.
• color.
• search.
• range.
• datetime.
• datetime-local.
• date.
• month.
• week.
• time.

Además, se comenta el soporte por parte de los navegadores y se muestra la representación de algunos controles en dispositivos móviles.

En el siguiente vídeo se presentan los nuevos atributos que se pueden emplear en los controles de los formularios:

• autocomplete.
• autofocus.
• min.
• max.
• step.
• pattern.
• placeholder.
• required.

También se explica qué es Modernizr y los polyfills.

HTML5: de HTML4 a HTML5

HTML5 incorpora nuevas etiquetas semánticas que definen la estructura de una página web. En el siguiente vídeo se presentan estas etiquetas y se explica cómo transformar una página web de las versiones antiguas de HTML a la nueva versión HTML5.

Ejemplo de estructura con nuevas etiquetas HTML5