PCWORLD PRO
 IDG.es

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


Home

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

Versión impresora Versión impresora Votar este artículo (268 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
Acer Aspire S7: Diseño minimalista
Un portátil Ultrabook de lo más ligero, con espectacular diseño, y ...[21/03/2013] - 80 votos


Noticias más votadas
IBM redobla sus esfuerzos móviles con MobileFirst
El gigante azul hace un nuevo esfuerzo estratégico hacia el floreciente mundo móvil y asegura que ...[26/02/2013] - 439 votos

Mobile World Congress: iParquing presentará la primera plataforma que permite a comercios bonificar el aparcamiento
En el marco de la celebración del Mobile World Congress, entre el 25 y el 28 de febrero, iParquing ...[19/02/2013] - 302 votos

Facebook amplía el alcance de los desarrolladores móviles
La red social está planeando una serie de tres eventos para, en primer lugar, ofrecer a los ...[14/03/2013] - 287 votos


Vídeos más votados
El papel de Intel en el mundo tablet
Intel ha mostrado su amplia variedad de chips y plataformas que tiene en el mercado de los tablet. Intel destacan la necesidad de apostar por equipos seguros tanto en el mercado de consumo como en el profesional. Además, deben mantener la esencia de la conectividad y compatibilidad entre dispositivos y plataformas, para lo que el sistema operativo Windows 8 es una de las mejores apuestas. [27/02/2013 ] - 71 votos
Samsung Galaxy S 4, con reconocimiento ocular y cámara dual
Samsung presentó en Nueva York su nuevo buque insignia: el Galaxy S4, un smartphone Android con cámara de 13 megapíxeles, pantalla de 5 pulgadas Full HD Super AMOLED, y capacidades como el reconocimiento ocular y gestual. [15/03/2013 ] - 71 votos
MWC13: Qualcomm apuesta por la interconectividad de los dispositivos móviles
Qualcomm ha acudido a su cita con el Mobile World Congress con una amplia oferta tecnológica, en la que destaca la recientemente presentada generación de procesadores SnapDragon 800, los avances en su ecosistema AllJoyn y en el Internet en todas las cosas, así como nuevas capacidades de conectividad para dispositivos móviles. [04/03/2013 ] - 58 votos