MOVILIDAD | Artículos | 04 OCT 2011

Curso de programación Web con HTML 5 (capítulo 1)

PCWORLD PROFESIONAL

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 curso programacion web html5extensió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 ejemplo:

<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 curso programacion web html5idioma 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.


Compartir

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

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/