PCWORLD PRO
 IDG.es

  
Actualidad Storage Seguridad Movilidad Infraestructura Firma invitada Vídeos PYMES Blog


Home > infraestructura

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

Versión impresora Versión impresora Votar este artículo (92 votos)

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.


04/10/2011 PCWORLD PROFESIONAL

| Más
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/
Artículos más votados
Intel Ivy Bridge. Rendimientos (parte II)
  Para poner a prueba la nueva plataforma, Intel nos ha facilitado el procesador Intel Core ...[18/05/2012] - 264 votos

Intel presenta Ivy Bridge para PC y portátiles (parte I)
Se hizo esperar la llegada de los procesadores Intel Ivy Bridge y su novedoso proceso de ...[26/04/2012] - 108 votos

PUBLIRREPORTAJE - HP Officejet Pro: la inyección de tinta profesional llega a la pyme
Con la introducción de su nueva gama de impresoras OfficeJet Pro, HP dice adiós al ...[16/03/2012] - 41 votos


Noticias más votadas
Cuenta atrás para el cambio en la política de privacidad de Google
Si utilizas Gmail, Google Docs o cualquier otro servicio G, estás a punto de entregar mucha ...[29/02/2012] - 74 votos

Más de 90 millones de vehículos dispondrán de smartphone en 2016
La integración del smartphone en los coches será un estándar en los nuevos modelos, según el último ...[14/03/2012] - 70 votos

Cisco enlaza redes Wi-Fi y móviles
Cisco ha desvelado en el Mobile World Congress de Barcelona nuevos productos diseñados para enlazar ...[29/02/2012] - 69 votos


Vídeos más votados
Los Lumia 610 y Lumia 900 llegan a España
Nokia ha anunciado la disponibilidad en nuestro país de sus dos últimos terminales Lumia, los modelos Lumia 610 y Lumia 900. El primero ya está a la venta por 229 euros, mientras que el Lumia 900 llegará en el mes de junio. [25/05/2012 ] - 90 votos
Nokia Lumia 610, el Windows Phone económico
El Nokia Lumia 610 es el más económico de los smartphones de la compañía finlandesa, con un precio de sólo 229 euros, sin dejar de incorporar todas las aplicaciones exclusivas de Nokia. [25/05/2012 ] - 86 votos
HP apuesta por la movilidad
HP ha presentado en la ciudad China de Shangai su nuevo portfolio de productos y servicios, tanto los englobados bajo el mercado de consumo, como las soluciones dirigidas al mercado profesional o de los negocios. Con más de 40 nuevos equipos, HP apuesta claramente por la movilidad y la innovación en el diseño, donde reinan los nuevos portátiles Ultrabook, así como los recién llegados Sleekbook más económicos. [21/05/2012 ] - 85 votos