HTML y CSS para principiantes

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.

Todos los vídeos del tutorial HTML y CSS para principiantes

El Hypertext Markup Language (lenguaje de marcado de hipertexto) es la casa y el lenguaje de corte de la WWW. La primera versión de este lenguaje se publicó en 1992. Desde entonces, HTML ha sufrido numerosas modificaciones y ya ha alcanzado la versión 5. (Aunque la versión 5 aún no se ha adoptado oficialmente como estándar, ya está bastante bien soportada en los navegadores actuales).

HTML es un lenguaje de marcado que sirve para estructurar contenidos. Las hojas de estilo se encargan de dar formato al contenido. Más información sobre ellas a continuación.

El Consorcio World Wide Web (abreviado W3C) es responsable del desarrollo de HTML.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.

Para estar al día de los últimos avances en el sector web, le recomendamos que visite regularmente el sitio web del W3C.

Cuando se trata de HTML, hay una pregunta crucial: ¿qué versión debo utilizar? Como puede imaginar, un lenguaje como HTML se actualiza constantemente. Se añaden nuevos elementos, se eliminan los antiguos.

He aquí las versiones del lenguaje y los hitos más importantes de HTML:

- HTML (noviembre de 1992): Esta fue la primera versión. Se centraba exclusivamente en documentos de texto.

- HTML 2.0 (noviembre de 1995): Ahora también hay elementos para imágenes y formularios.

- HTML 4.0 (diciembre de 1997): se introducen hojas de estilo, marcos y scripts.

- XHTML 1.0 (enero de 2000): Reformulación de HTML 4.0 mediante XML.

- HTML5 (abril de 2009): Aún es un borrador de trabajo, por lo que todavía no es un estándar adoptado.

Los siguientes tutoriales se centrarán en HTML5. Esto se debe a que HTML5 está a punto de revolucionar el mundo del HTML. Y, de hecho, la nueva especificación ofrece numerosas innovaciones interesantes. Entre ellas, por ejemplo, formularios mucho más cómodos, indicadores de progreso, elementos de carácter y una estructura de documento mejorada. La nueva norma también permite incrustar vídeos en los sitios web sin necesidad de plug-ins y cuenta con una interfaz de arrastrar y soltar.

La primera propuesta de HTML5 fue publicada en 2004 por el Grupo de Trabajo sobre Tecnología de Aplicaciones de Hipertexto en la Web (WHATWG) con el nombre de Aplicaciones Web 1. 0.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.



Aunque HTML5 aún no se ha publicado como norma oficial, los fabricantes de navegadores ya han incorporado numerosas funciones HTML5 a sus productos. No es de extrañar, ya que el WHATWG es una alianza de fabricantes de navegadores, entre ellos Apple, Mozilla y Opera. El WHATWG se fundó como reacción directa al lento desarrollo de los estándares web por parte del Consorcio World Wide Web (W3C).

Llegados a este punto, cabe preguntarse qué motivó a los fabricantes de navegadores a desarrollar su propio estándar HTML. Al fin y al cabo, el desarrollo de HTML estaba en manos del W3C. Desde el punto de vista de los fabricantes de navegadores, los problemas empezaron cuando el W3C convirtió HTML 4.01 en XHTML 1 sin hacer correcciones particulares en el contenido. Originalmente, el W3C quería establecer XHTML 1 como primer paso hacia una web basada en XML. XHTML 2 debía ser la etapa final del desarrollo. Precisamente el hecho de que el W3C se centrara en XML molestó a los fabricantes de navegadores. En su opinión, el enfoque XML es poco práctico y no refleja los deseos reales de los usuarios. (Algo que, por supuesto, el W3C no ve así).

Desde 2007, el W3C y el WHATWG desarrollan o trabajan conjuntamente en una especificación HTML5. Los últimos avances en materia de HTML5 pueden consultarse en http://www.w3.org/TR/html5/.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.



Los próximos tutoriales se centrarán en HTML5.

CSS para dar formato

Probablemente ya hayas trabajado con plantillas de documentos en Word u otros programas de tratamiento de textos. Por ejemplo, cuando seleccionas una línea, puedes elegir una hoja de estilo.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.



A continuación, la línea se muestra en función del formato seleccionado en la plantilla de documento para esta hoja de estilo. Al cambiar la plantilla de documento, también cambia el aspecto del encabezado.

¿Qué tiene que ver Word con HTML? También existen hojas de estilo para documentos HTML. Estas plantillas pueden definirse mediante CSS (Cascading Stylesheets). Gracias a CSS puedes, por ejemplo, especificar que los encabezados principales (h1) tengan un tamaño de 22 píxeles y se muestren con fuente Arial verde.

Las hojas de estilo permiten separar estrictamente estructura y maquetación. Para estructurar los documentos se utiliza HTML. Sin embargo, el aspecto final de los elementos se determina con CSS.

Lo que necesitas

En los siguientes tutoriales conocerás HTML y CSS paso a paso. Por cierto, no necesitas ningún programa complejo para crear tú mismo sitios web basados en HTML y CSS. En el caso más sencillo -si trabajas con Windows- puedes utilizar el editor estándar.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.

No es especialmente cómodo, pero es suficiente para empezar. Sin embargo, si prefieres algo más cómodo, deberías buscar un editor HTML "de verdad". Uno de los clásicos aquí es, por supuesto, Dreamweaver.

Sin embargo, este editor no es gratuito.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.

En cambio, phase5(http://www.phase5.info/) es gratuito para usuarios privados. Así que si quieres utilizar el editor para fines privados, esta es una herramienta buena y gratuita.

HTML y CSS para principiantes (Parte 01): Un primer vistazo a HTML, CSS & Co.



Además de un editor, también deberías tener instalados los navegadores más importantes para probar el sitio web. De hecho, los navegadores a veces interpretan el HTML y el CSS de forma bastante diferente. Teniendo esto en cuenta, es imprescindible realizar pruebas exhaustivas de las páginas en distintos navegadores. Debe tener instalados al menos Internet Explorer, Google Chrome y Mozilla Firefox. Lo ideal sería probar también el sitio en el navegador Opera y en una tableta/smartphone.