| Artículos | 01 JUL 2011

Curso de programación Web con HTML 5

Tags: Histórico
Desde lo básico hasta programación de vídeo
Jaime Peña.
Con este artículo comenzamos una serie de programación para la Web. A lo largo del curso repasaremos desde los conceptos más elementales, como la edición y visionado de textos en sus diversos posibles formateos, hasta la programación de vídeo, audio, formularios y demás, basándonos en las recomendaciones más recientes de los lenguajes HTML 5 y CSS 3.

La esencia de todo lo que se muestra en la Web son los documentos HTML, de HiperText Makup Language (Lenguaje de marcas de hipertexto). Por ello, comenzaremos por la programación de dichos documentos y posteriormente avanzaremos en el formateo con hojas de estilo, y el uso de formularios, imágenes, animaciones y demás.

Estructura de un documento HTML genérico
Para crear un documento HTML mínimo, tal como el que se muestra seguidamente, sólo hace falta un editor de texto simple, que no inserte ningún tipo de formateo adicional (texto plano). Por ejemplo, utilizaremos el Bloc de notas para escribir algo similar a:

<html>
<body>
Nuestro primer documento HTML
</body>
</html>

El modo de escribirse debe buscar claridad y elegancia, también valdría:

<html><body>Nuestro primer documento HTML</body></html>

Pero conforme se hagan los documentos un poco complejos serán imposibles de seguir, corregir y mantener. En principio, las etiquetas pueden ser escritas con cualquier combinación de mayúsculas y minúsculas, pero con el fin de prepararnos para recomendaciones más actuales, ya desde ahora procuraremos escribirlas siempre en minúsculas.
Como se observa, la simplicidad es enorme, bastará con indicar un par de etiquetas de apertura, en las que advertimos que se trata de un documento HTML y de que comienza el cuerpo del documento, escribir el texto deseado y cerrar las etiquetas en el orden inverso a su apertura, con la sintaxis que fácilmente se observa </etiqueta>. Sólo hay que guardar el archivo con la extensión html o htm (no con la extensión txt por defecto) y abrirlo en cualquier navegador de Internet. Con un doble clic sobre él en un explorador de archivos será suficiente.
A este primer documento HTML, sin embargo, le faltarían algunos elementos que son considerados estándar para la buena identificación y presentación de páginas más complejas. Todo ello es recogido por el denominado World Wide Web Consortium, abreviadamente y de ahora en adelante, el W3C.
El cómo se estructura correctamente un documento HTML se define mediante las denominadas recomendaciones, que trataremos con más detalle algo más adelante. Por el momento nos vamos a fijar en la denominada cabecera (<head>…</head>). Por ejemplo, fijémonos en este otro caso:

<html>
<head>
<meta content=”text/html; charset=ISO-8859-1” http-equiv=”content-type”>
<title>001</title>
</head>
<body>
Nuestro primer documento HTML
</body>
</html>

Nos interesa fijarnos fundamentalmente en los metadatos, etiqueta <meta …>, que son datos acerca de datos, un pequeño trabalenguas que trataremos de aclarar ya. Uno de ellos es content, un metadato que indica que el contenido del documento es texto HTML; otro de especial interés es charset, que fija el set de caracteres que se debe utilizar para mostrar el contenido. Eso fijará, por ejemplo, que los caracteres especiales como la eñe y los acentos serán procesados correctamente. Otros tipos de set de caracteres atañen a juegos de tipos orientales, nórdicos, etc. Cuando trabajamos con un editor de documentos HTML, estos metadatos suelen ser insertados automáticamente, de conformidad con las propiedades fijadas en el entorno de desarrollo.

Las recomendaciones W3C actuales
Las recomendaciones más actuales del W3C se refieren al HTML 4.01 o HTML 4, simplemente. Así, cuando se crea un documento HTML nuevo, se lee el código fuente de uno existente, que haya sido creado con un editor de documentos conforme a las especificaciones del W3C, al comienzo de todo, antes de cualquiera de sus etiquetas podrá leerse algo similar a:

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

Se trata de una declaración que identifica formalmente que el archivo es un documento HTML (o XHTML, como veremos más adelante) y de sus características técnicas. En este ejemplo, que es conforme a las recomendaciones W3C HTML 4.01, el idioma base es el inglés y su referencia de especificación técnica (DTD, tipo de declaración de documento) se encuentra en la dirección Web indicada. Todo ello va entre <!…> que es como se muestran los comentarios en los documentos HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1” http-equiv=”content-type”>
<title>001</title>
</head>
<body>
Nuestro primer documento HTML
</body>
</html>

La etiqueta <title>…</title> contiene el texto que aparecerá como identificador del documento en la barra de título del explorador.
En este curso nos atendremos a las recomendaciones del W3C correspondientes al lenguaje HTML 4.01, XHML 1.1 y CSS 2; trataremos además las propuestas HTML 5 y CSS 3, actualmente en estado de desarrollo avanzado pero que aún no son plenamente soportadas por los exploradores de Internet. En la tabla adjunta se recogen las direcciones oficiales de los sitios Web de las respectivas recomendaciones y borradores o propuestas.

Recomendación
HTML 4 (4.01) http://www.w3.org/TR/html401/
XHTML 1.1 http://www.w3.org/TR/xhtml11/
CSS 2 (2.1) http://www.w3.org/TR/CSS2/
Propuesta/Borrador
HTML 5 http://dev.w3.org/html5/spec/Overview.html
CSS 3 http://www.w3.org/TR/2011/WD-css3-text-20110215/


Editores HTML
Para la creación de documentos HTML (o XHTML, como veremos más adelante) no se precisa de ningún editor o procesador especial, bastará con un editor de texto ASCII simple. En nuestro caso utilizaremos inicialmente el Bloc de notas de Windows y posteriormente mostraremos también algunos ejemplos creados por ejemplo con Kompozer (un derivado del conocido NVU) o HTML-Kit y con BlueGriffon para desarrollos con HTML 5. Todos ellos gratuitos y que pueden se obtenidos en las direcciones de Internet que se recogen en la tabla adjunta, junto con algunos otros similares.
Naturalmente, se pueden utilizar procesadores más avanzados como Adobe Dreamweaver, Microsoft WebMatrix y muchos otros, pero a nuestro parecer tienen algunos inconvenientes de cara al aprendizaje, dado que crean estructuras de documentos ya muy elaboradas, normalmente con códigos propietarios innecesariamente complejos para pequeños desarrollos.

Editor HTML Dirección URL
Amaya http://www.w3.org/Amaya/
Aptana http://www.aptana.com/
Arachnophilia http://www.arachnoid.com/arachnophilia/
BlueGriffon http://www.bluegriffon.org/pages/Download
HAPedit http://hapedit.free.fr/
HTML-Kit http://www.htmlkit.com/download/
Kompozer http://www.kompozer.net/download.php
Notepad++ http://notepad-plus-plus.org
NVU http://net2.com/nvu/download.html


Las bases del lenguaje HTML 5
En el borrador del lenguaje HTML 5 se nos presentan algunas novedades verdaderamente apasionantes, algo muy necesario y que sería de esperar que sucediera desde 1999, el año de aprobación del HTML 4. Entre ellas cabe destacar las siguientes:
Mayor simplicidad de diseño de las páginas
Mejor separación de contenido y diseño
Nuevas etiquetas para contenidos específicos
Mejor soporte de vídeo y audio con menor dependencia de los correspondientes plug-ins
Nuevos elementos para formularios, como calendarios, entradas formateadas de fecha, tiempo, url, e-mail, …
Etiqueta <canvas> para dibujo de formas libres y geométricas

Soporte mejorado para almacenamiento local
Así como comentábamos un documento mínimo HTML genérico, también podemos hablar de un HTML 5 mínimo, que en principio puede sorprendernos:

<!DOCTYPE html>
<meta charset=utf-8>
<title>Documento HTML 5 Base</title>
Nuestro primer documento HTML 5

Es perfectamente validado como un documento HTML 5 por el sistema de validación del W3C, algo de lo que hablaremos en otro artículo. Obsérvese que no se necesitan las etiquetas <html>, <head>, <body> y sus correspondientes de cierre.

Sin embargo, es más funcional utilizar una maqueta de documento algo más tradicional, tanto desde la perspectiva de la orientación para el programador, como desde la perspectiva funcional, dado que permite incluir información importante en las etiquetas de <html>, como es el idioma, como en las de <body>. Así podría quedarnos algo como:

<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf-8>
<title>Documento HTML 5 Base</title>
</head>
<body>
Nuestro primer documento HTML 5
</body>
</html>

Etiquetas y atributos
Anteriormente hemos comentado la estructura de un documento HTML, de ahora en adelante nos detendremos mayormente en comentar cuál es la base del contenido del documento, aquello que encontraremos entre las etiquetas de apertura y cierre <body>…</body>.
El lenguaje HTML 5 (HTML y XHTML en general) se basa en la presencia de elementos o etiquetas y atributos. Una etiqueta, como hemos visto, es la encargada de contener la información de un documento HTML en general; bien sea visual, como textos, imágenes, hiperenlaces y demás, o de formateo de la información, como saltos de línea, párrafos o tipos de fuentes o su presentación (itálica, negrilla, súper o subíndice, mayor o menor tamaño…). Algunos elementos constan de etiquetas de apertura y cierre, como el citado <body>…</body>; otros simplemente de una sola etiqueta que contiene o no parámetros, como <br> o <hr> -también podemos ponerlas al estilo XHTML <br /> y <hr />-. Como referencias generales, se puede acudir al sitio del consorcio W3C que se ha citado más arriba:

Índice de elementos o etiquetas y atributos de la propuesta HTML 5
http://dev.w3.org/html5/spec/Overview.html

Las etiquetas, en numerosos casos, pueden tener además atributos, algo así como parámetros que proporcionan información adicional, tal puede ser el caso de color para textos, nombre el atributo con el que será distinguida la etiqueta, tipo de fuente de caracteres y muchas otras. Los atributos se especifican siempre con el formato:
Nombre del atributo = “valor del atributo”
Y van en la parte de apertura, por ejemplo:
<a href=”http://www.pcworld.es”>PC World España</a>
Sería una etiqueta de hiperenlace a PC World España, con el atributo correspondiente que fija la dirección de Internet. Obsérvese en la forma de las comillas neutras, no en las que genera en el formateo de textos un procesador, con doble comilla de apertura y cierre (caso de, por ejemplo, Microsoft Word).

Algunos de los atributos más comunes, que están disponibles en la mayoría de las etiquetas, son los mostrados en la tabla adjunta.

Por ejemplo, si probamos el siguiente documento HTML:

<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf-8>
<title>Documento HTML 5 Base</title>
</head>
<body>
<p title=”Documento HTML”>
Éste es un párrafo acotado con etiquetas p y con un atributo title.
</p>
</body>
</html>
Al pasar el puntero del ratón sobre el texto del párrafo se mostrará un tool tip con el texto Documento HTML. Más adelante hablamos de etiquetas concretas y formato de textos y párrafos.
Respecto a la sintaxis general de las etiquetas, hemos de tener presente algunas reglas, fundamentalmente para estar acordes con las recomendaciones presentes y futuras del W3C, ya que la mayor parte de los exploradores actuales son bastante laxos al respecto.
En primer lugar, las etiquetas anidadas son permitidas y en realidad la anidación forma parte de la propia sintaxis del lenguaje HTML en general, pero la anidación ha de ser tal que el orden de apertura y cierre debe ser justo en el orden inverso:
<p>…<h1>…</h1></p>,
Malas costumbres del tipo:
<p>…<h1>…</p></h1>
O en la forma
<p>… sin cierre
Serán correctamente interpretados en casi todos los navegadores, pero no son soportadas por los estándares más recientes y no se garantiza que sean bien interpretadas en el futuro.
Las etiquetas al presente pueden ser escritas tanto en mayúsculas como en minúsculas, e incluso mezclando sin orden el formato, al estilo:
<P>…<h1>…</p></H1>,
Pero las recomendaciones actuales nos indican que es preferible que tanto las etiquetas como los atributos se escriban en minúsculas, como hemos estado haciendo en nuestros ejemplos hasta el presente.

Nombre Valor
Class classname Especifica un classname único para un elemento
Id id Especifica un id único para un elemento
Style style_definition Fija un estilo inline para un elemento
Title tooltip_text  Da información textual extra de un elemento (que se mostrará
como un tool tip al pasar el ratón sobre él)

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información