Curso de Diseño Web VI - Estándar HTML

noviembre 05, 2009

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas, en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web, en la cuarta sobre publicar nuestro proyecto Web en Internet y en la quinta entrada hablamos de la inclusión de imágenes en nuestras páginas. En esta entrada hablamos de la historia de HTML y del uso de estándares.

La Web es una industria con una historia corta pero intensa. En los últimos veinte años la explosión de contenido ha llevado consigo una evolución tecnológica y de estándares. A continuación repasamos la historia de HTML:

  • 1989 / 1991 HTML 1.0 - 2.0
    Los primeros días de HTML. Se podía guardar todo lo que se necesitaba saber sobre HTML en un cajón. Las páginas no eran bonitas, pero al menos se enlazaban las unas a las otras. Nadie se preocupaba mucho de la presentación y sólo de que todo el mundo tuviera su propia Web.
  • 1995 HTML 3
    El periodo conocido como la guerra de los navegadores. Durante el cual Microsoft y Netscape se peleaban por el control del navegador. Durante la guerra, ambos navegadores mantuvieron una carrera para soportar diferentes elementos y extensiones propias. A veces se tenían que escribir dos páginas Web, una para Netscape y otra para IE. Un mal periodo para los diseñadores.
  • 1998 HTML 4
    El final de las guerras de navegadores y la aparición del W3C (World Wide Web Consortium). Su plan separar el contenido de la presentación en dos lenguajes. Un lenguaje para la estructura (HTML) y un lenguaje para la presentación (CSS). No obstante la parte más complicada era convencer a los fabricantes de navegadores que estaba en su mejor interés adoptar estos estándares.
  • 1999 HTML 4.01
    HTML 4.01 entra en escena en 1999 y es la versión más actual de HTML. Todo el mundo esperaba que HTML 4.0 fuera la versión definitiva, sin embargo se necesitaban algunos arreglos. Estos arreglos llegaron con la versión 4.01. La llegada de HTML 4.01 supuso que escribiendo código estándar, este funcionará prácticamente sin problemas en todos los navegadores.
  • 2000 XHTML 1.0
    Por supuesto, aparecieron nuevas tecnologías. Apareció otro lenguaje de etiquetado conocido como XML (Extensible Hypertext Markup Language). Juntando los conceptos de XML y HTML nació XHTML 1.0. Éste unía la popularidad y funcionamiento en navegadores de HTML a la extensibilidad y reglas estrictas de XML.

¿Cómo decimos al navegador la versión de HTML usada?

Para decir al navegador la versión que estamos usando hay que añadir un definición del tipo de HTML que usamos al comienzo de nuestros archivos HTML. A continuación se muestra la definición de tipo para HTML 4.01 en su variante estricta.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Para comprobar que nuestro código cumple los estándares que queremos, la W3C pone a nuestro disposición diversas herramientas. Por ejemplo, el validador de HTML permite saber si nuestro código es correcto.

Guía para HTML 4.01

  • No olvides el elemento <html>
  • Recuerda usar los elementos <head> y <body> dentro de <html>.
  • Usa siempre <title> dentro de <head>
  • Pon dentro de tu elemento <body> elementos de bloque <h1>,
    • <h2>, ... <h6>, <p>, <blockqoute>
  • No pongas elementos de bloque dentro de elementos en linea. Dentro de los elementos en linea sólo puede ir texto u otros elementos en linea.
  • No poner elementos de bloque dentro de <p>
  • Sólo los elementos <li> están permitidos dentro de los elementos <ul> y <ol>
  • Pon todo lo que quieras dentro de <li>
  • El elemento <blockqoute> requiere uno o más elementos de bloque.
  • Sea cuidadoso anidando elementos en linea dentro de otro elemento en linea. Por ejemplo, no se puede anidar un enlace dentro de otro.

¿Qué son las etiquetas meta en HTML?

Usamos las etiquetas meta dentro de head. Estas etiquetas indican al navegador que le vamos a decir algo sobre la página. Por ejemplo par indicar la codificación de nuestros archivos podemos usar:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

El atributo content es donde especificamos la información sobre el tipo del contenido. Con la parte text/html indicamos que es un archivo HTML. La parte ISO-8859-1 indica al navegador la codificación que estamos usando.

Resumen

  • HTML 4.01 es el estándar HTML más soportado por los navegadores.
  • El W3C (World Wide Web Consortium) es la organización internacional que define que es estándar HTML.
  • Muchos navegadores tienen dos modos de representar HTML: modo "rareza" (quirks en ingles) para HTML antiguo y modo estandarizado para HTML 4.01
  • Si no dices al navegador que versión de HTML estas usando, algunos navegadores usaran el "modo rarezas", que causara inconsistencias en la representación de la misma.
  • El DOCTYPE (Document Type Definition) se usa para decir al navegador en que versión de HTML esta escrita la página.
  • El DOCTYPE estricto se usa si estas escribiendo HTML 4.01 totalmente estándar.
  • La etiqueta <meta> dentro del elemento <head> se usa para proporcionar al navegador información adicional sobre una página Web, como el tipo del contenido y la codificación del texto de la misma.
  • La codificación de texto se usa para decir al navegador que estándar de codificación (UTF-8, ISO 8859-1 ...) se usa.
  • La mayoría de los lenguajes usados en el este de Europa pueden ser pueden ser representados con la codificación ISO-8859-1
  • El validador W3C es un servicio online gratuito que comprueba que la página cumpla los estándares.
  • Use el validador para asegurarse que tu HTML este bien construido y que los atributos cumplan los estándares.
  • Cumplir los estándares, hace nuestras páginas carguen más rápidas y que haya menos diferencias entre navegadores.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: ,

0 comentarios:

Publicar un comentario