Módulo 4.6: Los navegadores web son buenos pero tontos. ¿Por qué?

Los navegadores web son programas muy complejos que deben ser capaces de interpretar y representar las páginas web, que cada vez emplean tecnologías más complejas y avanzadas.

Los navegadores web deben ser "buenos" pues deben manejar cualquier página web, aunque contenga errores (que suele ser lo normal, lo extraño es encontrar una página web que no contenga errores). Pero los navegadores web a veces son "tontos" y no son capaces de interpretar correctamente una página web cuando contiene muchos errores. Cuando esto ocurre la página se puede mostrar de una forma incorrecta.

Para evitar esta situación es muy importante que escribas correctamente el código HTML. En las próximas lecciones vas a aprender a validar el código HTML para localizar y corregir los errores que puedan tener tus páginas web.

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.

Bibliográfía del Módulo 4.

Módulo 2.3: HTML, conceptos básicos

Los comienzos siempre son difíciles... ¿Qué programa necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me equivoco? ¿Puedo romper algo?

Poco a poco, antes de correr hay que aprender a caminar.

En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).

Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.

En el siguiente vídeo se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows. ¿A que nunca hubieses imaginado que con el humilde Bloc de Notas se podían crear páginas web?

 

En el siguiente vídeo se explican las reglas básicas que se deben aplicar en la creación de una página web:

• Etiquetas siempre cerradas.
• Documentos bien formados.
• Etiquetas en minúsculas.
• Valores de los atributos siempre entre comillas.

También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.

 Descargar Notepad++

Errores en la web.

Wikimedia: HTML.

HTML/Training. 

Más información y descriciones sobre HTML.

Bibliografía del módulo 2.

 

Módulo 2.2: El lenguaje HTML

HTML son las siglas de HyperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.

El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:

• Ver código fuente de la página en Google Chrome y Mozilla Firefox.
• Ver código fuente en Internet Explorer y Opera.

El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:

• html
• head
• meta
• title
• link
• style
• script
• body
• p
• a
• strong
• em
• img
• form
• input
• select
• textarea
• table
• tr
• th
• td
• blockquote
• hr
• ul
• ol
• li
• div
• span

En las siguientes lecciones vas a aprender la estructura básica de una página web y el uso de las etiquetas que más se suelen utilizar. Pero antes, te proponemos que aprendas algunas cosas de la historia de HTML.

Historia de HTML

El lenguaje HTML, al igual que los lenguajes o idiomas que hablan las personas, evoluciona con el tiempo.

En el siguiente vídeo se explica la historia del lenguaje HTML durante sus primeros años y su relación con otros lenguajes, como SGML, XML, HTML+ y HTML5. Además, sabrás por qué el W3C abandonó el desarrollo de XHTML y apostó por HTML5.

Sobre HTML5

El 28 de octubre de 2014 el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, lo que supone que HTML5 ya tiene el rango de estándar.

¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.

Si quieres saber algo más sobre la publicación de HTML5 consulta la nota de prensa del W3C HTML5 is a W3C Recommendation.

Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.

 Bibliografía del módulo 2.