Home

      Comment post English
x

Select your language

EnglishEspañol

Curso de HTML - Cuarta parte

Quick Facts:

36 people like this


<< VIENE DE CURSO DE HTML - TERCERA PARTE

Múltiples hipervínculos en una imagen

En la primera parte del tutorial de HTML aprendimos a cómo agregar hipervínculos a imágenes, o en otras palabras como utilizar imágenes como hipervínculos, simplemente rodeando la etiqueta <img>  con las etiquetas de hipervínculo de apertura y cierre. Por ejemplo:

<a href="http://www.youbioit.com"><img src="nombredeimagen.jpg" alt="Imagen de ejemplo" /></a>

Pero HTML nos da la posibilidad de agregar múltiples hipervínculos en una sola imagen; simplemente definiendo áreas de la imagen para distintos links. Supongamos que tenemos una imagen con cuatro rectángulos, y queremos que cada rectángulo de la imagen al ser presionado con el botón izquierdo del mouse nos envíe a una página distinta; lo único que deberíamos hacer para que esto ocurra es agregar áreas para cada rectángulo indicando las coordenadas superior izquierda e inferior derecha de cada uno e indicar la dirección URL a la que nor dirigirá dicho hipervínculo al ser presionado.

Las etiquetas que nos permiten definir áreas de hipervínculos para imágenes son <map> y <area>. La etiqueta <map> se utiliza para indicar cuál es la imagen que será utilizada para hipervínculos múltiples, mientras que <area> sirve para definir cada área y agregarle un hipervínculo a cada una.

Para utilizar una imagen para hipervínculos múltiples hay que agregar en la imagen a usar el atributo usemap, dentro del cual agregamos cualquier nombre que querramos, precedido por un signo numeral; de la siguiente forma:

<img src="nombredeimagen.jpg" alt="Imagen de ejemplo" usemap="#hipervinculosmultiples" />

Luego colocamos debajo de la imagen la etiqueta <map>, con un atributo name (nombre), donde agregamos el mismo nombre que declaramos en el atributo usemap de la imagen. De esta manera las áreas a definir quedarán vinculadas a la imagen en cuestión; siguiendo el ejemplo anterior sería:

<map name="hipervinculosmultiples">

Entre las etiquetas de apertura y cierre <map> se deben colocar las etiquetas <area> que representan cada una de las áreas a utilizar como hipervínculos.

Las áreas pueden tener distintas formas; rectangulares, circulares y en forma de polígono. Para indicar la forma que utilizaremos en un área debemos indicar en el atributo shape (forma) de la etiqueta <area>, el tipo de forma que queremos que tenga. Los posibles valores de shape son "rect" (rectangular), "circle" (circular) o "poly" (poligonal).

Una vez elegida la forma, debemos indicar las coordenadas de los vértices de cada área; así en el caso de la forma rectangular debemos poner los valores de las coordenadas superior izquierda e inferior derecha del rectángulo que define el área. En el caso del área circular se deben indicar las coordenadas del centro del círculo que definirá el área y la longitud del radio del mismo. Finalmente para el área poligonal se deben agregar las coordenadas de cada uno de los vértices que definen el polígono; si por ejemplo se tiene un pentágono se deben agregar las coordenadas de cada uno de los cinco vértices.

Los valores de las coordenadas se deben agregar en el atributo coords de la etiqueta <area> y se miden en pixeles, así por ejemplo si tenemos una imagen de 500x500 pixeles y en la misma hay un rectángulo cuyo vértice superior izquierdo se encuentra en el pixel con coordenadas (x,y) 50,50 y el vértice inferior derecho se encuentra en el pixel con coordenadas 200,200; en coords debemos agregar los valores 50,50,200,200.

Si queremos definir un área circular debemos indicar las coordenadas (x,y) del centro del círculo y la longitud del radio en pixeles. Entonces si por ejemplo tenemos un círculo con centro en el pixel con coordenadas 100,300 y el mismo tiene un radio de 50 pixeles; en coords debemos agregar los valores 100,300,50,50.

Para definir el hipervínculo de cada área de la imagen hay que agregar el atributo href en cada etiqueta <area>, con la URL a la que nos enviará el hipervínculo.

También al igual que en la etiqueta <a> podemos utilizar el atributo target en <area> para hacer que los hipervínculos se abran en pestañas nuevas.

También se puede incluir un atributo alt en cada etiqueta <area> con un nombre cualquiera, el cual aparecerá en un rótulo o leyenda cada vez que posemos el puntero sobre dicha área. Es bueno aclarar que esto no funciona en todos los exploradores, ya que en algunos no dará resultados; por ejemplo uno de ellos es Firefox; sin embargo en Internet Explorer sí funciona.

Veamos un ejemplo. (Para probar dicho código simplemente debemos guardar en la carpeta que utilizamos para almacenar las páginas creadas durante el tutorial la siguiente imagen). En el ejemplo la imagen está en la misma carpeta del archivo .html.

Imagen de hipervinculos multiples
 

A continuación sigue el código:

<html>
<head>

<title>Ejemplo de imagen con hipervinculos multiples</title>
</head>


<body>

<img src="areas.jpg" alt="Imagen de ejemplo" usemap="#multi" />

<map name="multi">
<area shape="rect" coords="50,50,200,200" alt="Rectangulo" target="_blank" href="http://www.youbioit.com" />
<area shape="circle" coords="100,300,50,50" alt="Circulo" target="_blank" href="http://www.youtube.com" />
</map>

</body>
</html>

 

Caracteres especiales HTML

Cuando escribimos algún texto en HTML existen ciertos caracteres especiales que por distintos motivos no pueden ser representados simplemente como una letra o número común. Por ejemplo si queremos representar un símbolo > no podemos agregarlo simplemente en el texto y listo; ya que eso causaría un conflicto con la etiqueta precedente; rompiendo la estructura del código fuente y derivando en resultados indeseados en el diseño de la página Web en la que estamos trabajando.

Veamos un ejemplo de lo que no hay que hacer:

<p>La etiqueta <img> sirve para agregar imágenes en la página HTML.</p>

El ejemplo anterior dará resultados indeseados, ya que nosotros queremos que aparezca la etiqueta <img> en el texto, pero el explorador se confunde creyendo que queremos mostrar una imagen; dando como resultado un cuadrado vacío de imagen no cargada.

Para solucionar esto se deben utilizar códigos de escape, también conocidos como secuencias de escape, los cuales nos permiten agregar símbolos especiales mediante el uso de códigos especiales. Cada símbolo tiene su propio código; el cual puede ser el código ASCII que le corresponde o un código especial de HTML; cualquiera de los dos da el mismo resultado esperado.

Los códigos especiales HTML deben ir siempre precedidos por un símbolo & y sucedidos por un ; . Así, siguiendo con el ejemplo anterior:

Para representar el símbolo < debemos escribir: &lt;
Para representar el símbolo > debemos escribir: &gt;

Si en lugar de utilizar los códigos HTML se prefieren los códigos  ASCII; podemos hacerlo agregando el número correspondiente a cada símbolo. El mismo debe estar precedido por la combinación de símbolos &# y sucedido por ; (punto y coma).

Volviendo al ejemplo anterior; para obtener los resultados esperados del código fuente en el que queríamos representar <img> debemos poner:

<p>La etiqueta &lt;img&gt; sirve para agregar imágenes en la página HTML.</p>

Las secuencias o códigos de escape también son muy importantes para asegurar la compatibilidad del texto en todas las computadoras. Cada idioma tiene su juego de caracteres y códigos; así mientras que el inglés no tiene la letra ñ o no usa acentos, el idioma castellano sí. Por lo tanto si una computadora tiene su sistema operativo en un idioma distinto al que está escrito la página; puede que algunos símbolos, caracteres o signos de acentuación u ortografía en general no se visualicen correctamente o sean reemplazados por otros signos que en aquel idioma si existan, perdiendo el texto así su claridad.

Por eso cada vez que se escriba una palabra con acento, o tilde (como la ñ); estas letras no deben ser escritas directamente como van a ser representadas pero con el código o secuencia de escape que les corresponde. Por ejemplo.

Para representar á: &aacute;
Para representar é: &eacute;
Para representar í: &iacute;
Para representar ó: &oacute;
Para representar ú: &uacute;
Para representar Á: &Aacute;
Para representar É: &eacute;
Para representar Í: &Iacute;
Para representar Ó: &Oacute;
Para representar Ú: &Uacute;
Para representar ñ: &ntile;
Para representar Ñ: &Ntilde;
Para representar ä: &auml;
Para representar ë: &euml;
Para representar ï: &iuml;
Para representar ö: &ouml;
Para representar ü: &uuml;
Para representar Ä: &Auml;
Para representar Ë: &Euml;
Para representar Ï: &Iuml;
Para representar Ö: &Ouml;
Para representar Ü: &Uuml;
 

Al final del tutorial de HTML, debajo de todo, hay una lista con muchos más códigos o secuencias de escape para símbolos.


Marcos HTML

Un elemento de diseño Web que estaba muy de moda en los primeros años del siglo 21 eran los marcos de página (frames en inglés); pero a partir de mediados de la década comenzaron a caer en desuso. Con los marcos se puede dividir una página Web en varias subpáginas separadas por marcos. Por ejemplo se pueden tener dos columnas, cada una mostrando una página; o se puede dividir la página en dos franjas horizontales cada una mostrando el contenido de un documento .html o .htm distinto. Cuando estaban de moda, por lo general se solían dividir las páginas en cuatro marcos; uno superior horizontal ocupando todo el ancho de la pantalla donde se solía colocar un logo o título; uno vertical en la izquierda para la botonera; un marco central que mostraba una subpágina con el contenido del documento y un marco horizontal inferior.

Uno de los inconvenientes de los marcos, es que se debe crear una página para cada marco más la página que contiene a los marcos. Así por ejemplo si se tiene una página con 4 marcos se deben crear 5 páginas Web, y unirlas en una principal.

El conjunto de etiquetas que se utilizan para armar una página con marcos son <frameset> (conjunto de marcos) y <frame> (marco).

Supongamos que queremos dividir una página en 4 marcos horizontales. Lo primero que debemos hacer es crear las cuatro páginas que ocuparán los marcos. Luego tenemos que crear la quinta página que contendrá los distintos marcos con las páginas.

<html>
<head>

<title>Ejemplo de Marcos</title>
</head>

<frameset rows="25%, 25%, 25%, 25%">


<frame src="pagina1.html" />

<frame src="pagina2.html" />
<frame src="pagina3.html" />
<frame src="pagina4.html" />

</frameset>
</html>

El código fuente anterior daría un resultado como el siguiente:

Como agregar frames en HTML
Cliquear para ampliar la imagen


Como se puede ver en el código fuente anterior, al crear una página con marcos no se utiliza <body>, ya que el contenido de la página está en el conjunto de marcos incluidos, por lo tanto en su lugar se utiliza la etiqueta <frameset>, entre cuyas etiquetas de apertura y cierre se colocan cada una de las etiquetas <frame> que representan los marcos con subpáginas.

En el atributo rows de <frameset> se define la cantidad de marcos horizontales que tendrá la página, especificando el tamaño de cada uno. Los valores pueden ser en pixeles o porcentaje del alto de la página. En los atributos src de cada <frame> se indican las ubicaciones de las páginas que ocuparán cada marco del conjunto. Los nombres de las páginas .html del ejemplo pueden ser reemplazados por los nombres de las páginas Web que querramos o incluso por URLs de páginas de otros sitios.

También se pueden crear páginas con marcos verticales, los cuales se dividen en columnas cuyas dimensiones se indican en el atributo cols.

<html>
<head>

<title>Ejemplo de Marcos</title>
</head>

<frameset cols="20%, 20%, 10%, *">


<frame src="pagina1.html" />

<frame src="pagina2.html" />
<frame src="pagina3.html" />
<frame src="pagina4.html" />

</frameset>
</html>

El código fuente anterior mostraría lo siguiente en los navegadores Web:

Como agregar frames en HTML
Cliquear para ver en grande

En el ejemplo anterior dividimos la página en cuatro marcos verticales. Un detalle que llama la atención es el asterisco * de la cuarta posición del atributo cols de <frameset>. El asterisco se utiliza cuando no sabemos el tamaño que resta en una página y representa "lo sobrante de la página". En el ejemplo anterior definimos una primera columna a la izquierda que ocupa el 20% del ancho de la página, otra del 20%, otra del 10% y finalmente a la derecha una que ocupa el espacio sobrante, que en este ejemplo equivale al 50% del ancho de la página. Por lo general el asterisco se utiliza cuando trabajamos en pixeles, ya que podemos definir tamaños específicos para algunas columnas pero desconocemos el espacio sobrante que habrá en las pantallas de los distintos usuarios. Supongamos que creamos una página con dos columnas, una izquierda para la botonera con 400 pixeles de ancho y una segunda que ocupa el espacio sobrante, el cual variará de pantalla en pantalla según la resolución horizontal de cada una. El asterisco se puede utilizar para cualquiera de las columnas.

Como se puede ver en los ejemplos anteriores, la posición de cada <frame> coincide con la posición de cada valor de los atributos cols y rows. Así el primer <frame> tendrá el alto o el ancho indicado en el primer valor de rows o cols respectivamente; y así ocurre con cada uno de los marcos restantes. Por ejemplo una modificación en el cuarto valor de cols, modificará al cuarto <frame>.

Si se quiere quitar el borde de los marcos hay que agregar el atributo frameborder en cada uno de los <frame>, indicando un valor "0" que representa "sin borde". Si se quieren bordes en los marcos se debe pone un valor de "1" en cada <frame>. El valor por omisión de frameborder es "1"; ya que por default los marcos tienen bordes, entonces si no se indica nada, tendrán bordes.

Por omisión los marcos pueden ser redimensionados con el mouse, sin embargo si no se quiere este efecto y se buscan marcos estáticos se debe agregar en la etiqueta <frame> que queremos mantener en su tamaño original, el atributo noresize (no redimensionar) cuyo valor también debe ser "noresize". Este atributo puede llegar a ser útil si se quiere hacer un marco conteniendo una botonera de dimensiones fijas o un marco que contiene el logo del sitio; para evitar modificar el aspecto visual del mismo.

Otro atributo de <frame> que puede llegar a ser útil en el diseño de una página con marcos, es scrolling, mediante el cual se puede especificar si se quiere incluir una barra de scroll o deslizamiento en dicho marco. Los valores posibles de este atributo son "yes" (que siempre haya barra de deslizamiento), "no" (que nunca haya barra de deslizamiento) y "auto" (que solamente aparezca la barra de deslizamiento si es necesario); el último es el valor por omisión, que equivale a no usar el atributo.

A cada marco también se le pueden agregar márgenes horizontales y verticales; lo cual se logra con los atributos de <frame> marginheight (alto de margen) y marginwidth (ancho de margen). Los valores de los mismos deben ser especificados en pixeles.

Finalmente el atributo de <frame> name (nombre), sirve para denominar a cada marco con un nombre que permite que cada uno pueda ser identificado por otros elementos HTML. Dicho atributo es principalmente útil si se quiere diseñar una página con marco de botonera y marco de contenido. Así cada vez que se pulsa un hipervínculo de la botonera del marco de la izquierda, la página a la cual dicho hipervínculo nos envía, se abrirá en el marco de contenido principal. Para lograr eso, cada etiqueta de hipervínculo <a> ubicada en la página que aparecerá en el marco de la izquierda, deberá contener el atributo target (objetivo), del que ya hemos hablado en la primera parte
del tutorial cuando aprendimos a crear hipervínculos. En target debemos colocar como valor el nombre del marco en el cual queremos que las páginas se abran.

A continuación veremos un ejemplo, de una página de marcos dividida en dos columnas, una izquierda para la botonera de tres hipervínculos y una principal a la derecha para el contenido. Para realizarla se deberá crear una página de botonera, tres de contenido y una que contenga el conjunto de marcos (frameset). Primero se mostrará el código fuente de la página de la botonera, luego las tres páginas de contenido, y finalmente en el último recuadro, el código fuente de la página de marcos. En total tendremos cinco recuadros de código fuente para el siguiente ejemplo de página con marcos.

1-Página de botonera (botonera.html):

<html>
<head>

<title>Ejemplo de marcos</title>
</head>

<body>

<p><a href="pagina1.html" target="marcoprincipal">BOTON 1</a></p>
<p><a href="pagina2.html" target="marcoprincipal">BOTON 2</a></p>
<p><a href="pagina3.html" target="marcoprincipal">BOTON 3</a></p>

</body>
</html>


2- Página de contenido 1 (pagina1.html):

<html>
<head>

<title>Ejemplo de marcos - Pag. 1</title>
</head>

<body>
<p>Secci&oacute;n 1 de la p&aacute;gina de marcos</p>

</body>
</html>


3- Página de contenido 2 (pagina2.html):

<html>
<head>

<title>Ejemplo de marcos - Pag. 2</title>
</head>

<body>
<p>Secci&oacute;n 2 de la p&aacute;gina de marcos</p>

</body>
</html>


4- Página de contenido 3 (pagina3.html):

<html>
<head>

<title>Ejemplo de marcos - Pag. 3</title>
</head>

<body>
<p>Secci&oacute;n 3 de la p&aacute;gina de marcos</p>

</body>
</html>

5- Página del conjunto de marcos (marcos.html):

<html>
<head>

<title>Ejemplo de Marcos</title>
</head>

<frameset cols="200, *">


<frame src="botonera.html" noresize="noresize" scrolling="no" frameborder="0" marginheight="10" marginwidth="10" />

<frame src="pagina1.html" noresize="noresize" scrolling="auto" frameborder="0" marginheight="10" marginwidth="10" name="marcoprincipal" />

</frameset>
</html>

Resultado del ejemplo anterior:

Como agregar frames en HTML
Cliquear para ampliar imagen

En este ejemplo hemos creado tres páginas de contenido, una para la botonera con tres hipervínculos y finalmente una para el conjunto de marcos.

En la página del conjunto de marcos (marcos.html); definimos en la etiqueta <frameset> dos columnas, una a la izquierda con 200 pixeles de ancho (para la página de botonera) y otra a la derecha (para las páginas de contenido) con un ancho que ocupa lo sobrante de la pantalla. En cada <frame> indicamos que queremos bordes de 1 pixel, que los marcos deben ser fijos y que cada uno debe tener un margen a los cuatro lados de 10 pixeles. En cuanto a la barra de deslizamiento se especifica que el marco de la izquierda no tendrá barra, mientras que la de la derecha solamente si es necesario.

En el segundo <frame> agregamos un atributo name para que dicho marco pueda ser identificado por los hipervínculos de la página de la botonera que tienen como marco objetivo (target) para abrir las páginas, el del contenido. Así cada vez que se pulse uno de los botones, la página se abrirá en el marco denominado "marcoprincipal". También hay que aclarar que como en el atributo src del <frame> de contenido se indica la "pagina1.html", cada vez que se abra por primera vez el archivo marcos.html; por omisión será cargado con dicha página 1. Luego al pulsar los otros botones se cargarán las otras.

Ya hemos aprendido a crear marcos de página, sin embargo es muy importante dejar claro que se han vuelto casi obsoletos, al menos para el diseño de sitios Web. Quizá se sigan utilizando en manuales, libros o tutoriales de productos diseñados en formato HTML; pero se desaconseja su utilización para el diseño sitios Web; ya que son complicados de armar; no siempre se visualizan bien en todos los exploradores Web, dando resultados variados y no son muy amigables a los buscadores; lo que significa que les cuesta indexar en su base de datos, sitios Web desarrollados con marcos.

Además resultan estéticamente desagradables para muchos usuarios, ya que dan un aspecto de sitio viejo o desactualizado.

En lugar de los marcos de página se recomienda utilizar los marcos incorporados <iframe> de los cuales hablamos en la tercera parte del tutorial, ya que resultan más fáciles de diseñar, más amigables a los buscadores y además más atractivos visualmente. Por ejemplo se los suele utilizar para incorporar páginas de otros sitios dentro de la página que diseñamos, sin la necesidad de que los usuarios tuvieran que abrirlas tras pulsar un hipervínculo. Los usos de los marcos incorporados son variados.
 

Versiones de HTML

Desde la creación de la World Wide Web (Red informática mundial) HTML estuvo presente, ya que se trata del lenguaje en el que los documentos Web están escritos. Al principio las páginas Web solamente podían mostrar texto, pero con el tiempo se fueron agregando nuevos elementos, como las imágenes. Pero ninguna de las primeras versiones llegó a considerarse un estándar.

Luego se creó el consorcio de la World Wide Web, llamado W3C (de WWW Consortium); que se encarga de dar recomendaciones para la estandarización de comandos y elementos de diseño y desarrollo Web. Se supone que los creadores de exploradores Web deben adherir a estos estándares; no incluyendo la reproducción de etiquetas viejas o de versiones anteriores de HTML, ya desaprobadas; y siguiendo normas de diseño Web. La primera versión de HTML que fue organizada por el consorcio W3C fue HTML 3.0. Entre algunas de las nuevas capacidades más destacables de HTML 3.0, se incluían facilidades para la creación de tablas, la posibilidad de hacer fluir el texto alrededor de imágenes, o la capacidad de agregar elementos matemáticos para la representación de fórmulas matemáticas de todo tipo. Sin embargo dadas las complejidades tecnológicas que requerían esos elementos, esta versión no fue apoyada por los desarrolladores de exploradores Web de la época; expirando el estándar al poco tiempo. Más tarde se organizó la versión HTML 3.1 pero no llegó a ser oficializada. Pero la siguiente versión HTML 3.2 fue adoptada; ya que retiraba muchas de las funcionalidades de la versión HTML 3.0, para adaptarse a las tecnologías de la época; una de las capacidades abandonadas era la de representación de fórmulas matemáticas; las cuales pasaron a formar un lenguaje separado llamado MathML. Además incorporaba varios elementos desarrollados por Mosaic y Netscape, que eran los exploradores Web más populares.

Ya para 1997 la W3C creó un nuevo estándar, la versión HTML 4.0; la cual adoptaba elementos usados por los exploradores Web populares, pero también comenzó a limpiar el lenguaje, dando cierto orden y organización al mismo; desaprobando la utilización de algunas etiquetas antiguas o formas de diseño, a favor de otras más prácticas desde el punto de vista de diseño.

 
En el año 1999 se publicó una revisión de la versión HTML 4.0; denominada HTML 4.01, la cual incluía ciertas modificaciones sobre la anterior.

A pesar de la existencia del estándar, al cual los variados exploradores Web utilizados hoy día adhieren; muchas etiquetas viejas HTML desaprobadas por el W3C siguen funcionando en la mayoría de los exploradores Web; pero esto no significa que en futuras versiones sigan funcionando; por lo tanto por motivos de compatibilidad con futuros exploradores Web se sugiere respetar las normas del W3C y no utilizar antiguas etiquetas. Es importante aclarar que para un correcto aprendizaje del lenguaje HTML, en este tutorial no se utilizan etiquetas desaprobadas por el W3C y todo lo aprendido cumple con las normas del estándar establecido en las versiones HTML 4.01 y XHTML de la cual hablaremos a continuación.

El lenguaje HTML está basado en el sistema de definición y organización de etiquetas llamado SGML (Standard Generalized Markup Language - en inglés Estándar de Lenguaje de Marcado Generalizado). SGML no es un lenguaje en sí, sino que se trata de un sistema de etiquetado de documentos, o sea que a través de la aplicación de un sistema de etiquetas se puedan definir los distintos elementos que forman parte de un documento. El lenguaje HTML, se creó a partir de la sintaxis de este sistema de estructuración o creación de documentos. Por otro lado, posteriormente se creó una versión más perfeccionada y simplificada de SGML, para la definición o creación de lenguajes de estructuración de documentos llamada XML (EXtensible Markup Language - que en inglés significa Lenguaje de Marcado Extensible). En base a XML se creó XHTML.

El XHTML no es otra cosa que HTML pero basado en XML, siendo por lo tanto casi idénticos. XHTML es soportado por la mayoría de los exploradores Web populares de hoy día. XHTML presenta leves diferencias con el HTML simple; las cuales se describirán aquí.

  • Las etiquetas y los atributos en XHTML deben estar escritos en letras minúsculas; de lo contrario no se obtendrán los resultados deseados.
  • En HTML a pesar que es un error no cerrar los elementos con etiquetas de cierre, pueden ser reproducidos por muchos exploradores Web. Sin embargo en XHTML es obligatorio que todos los elementos estén correctamente cerrados; incluso los elementos vacíos como <img> que no llevan etiquetas de cierre, siendo cerrados al final de los mismos. Algunos ejemplos incluyen <br />, <hr /> entre tantos otros. Por lo tanto es importante ser cuidadoso y cerrar todos los elementos.
  • Todos los valores de los atributos de etiquetas deben estar entre comillas.
  • Los elementos en XHTML deben estar correctamente anidados. En HTML simple puede que algunos exploradores Web reproduzcan elementos que fueron incorrectamente anidados como por ejemplo: <p><b><em>Hola</b></p></em>, pero en XHTML esto no funcionaría así que habría que corregirlo anidando bien las etiquetas así: <p><b><em>Hola</em></b></p>.

Como se puede observar en la lista anterior las diferencias entre HTML simple y XHTML son mínimas, tratándose nada más de una versión más estricta en cuanto al respeto de la sintaxis de codificación se trata. De hecho es recomendable adherir a las normas de XHTML, ya que respetar las normas de sintaxis al pie de la letra es una buena costumbre para todo diseñador Web. De hecho todos los ejemplos de este tutorial adhieren a las normas de XHTML; ya que tanto las etiquetas como los atributos están escritos con letras minúsculas, todos los elementos están cerrados así como correctamente anidados.

Entonces surge la pregunta, de cuál es la ventaja de XHTML por sobre el HTML simple. En realidad si se trata de un documento Web que incluye además de los elementos del lenguaje HTML, elementos de otros lenguajes de marcado como MathML (elementos para la representación de fórmulas matemáticas como el símbolo de raiz cuadrada, integrales, etc) o SVG (Scalable Vector Graphics, en inglés Gráficos Vectoriales Escalables; para la representación de valores vectoriales bidimensionales), entre otros; se recomienda trabajar en XHTML; de lo contrario si se trata de una página Web convencional se puede trabajar en la versión HTML 4.01. Sin embargo, dada la ventaja anteriormente mencionada de XHTML, así como la falta de diferencias estructurales en lo que al lenguaje HTML respecta entre HTML 4.01 y XHTML a veces es mejor trabajar en este último. Además en XHTML estamos obligados a escribir el código fuente con la sintaxis correcta.

Actualmente se encuentra en etapa de experimentación la versión de sintaxis HTML 5 y paralelamente XHTML 5; incorporando algunos elementos nuevos como las etiquetas <audio> y <video>, de las cuales hablaremos más adelante. Sin embargo hay que aclarar que muchos elementos de HTML 5 todavía no pueden ser representados por todos los exploradores Web, incluso en sus versiones más nuevas; haciendo que mientras puedan funcionar en algunos no lo harán en otros. Por eso si se necesita utilizar algún elemento de HTML 5, es recomendable chequear que funcione en varios exploradores Web.
 

Cómo declarar la versión de HTML del documento Web

Cuando estamos diseñando una página Web es muy importante declarar en qué versión de HTML está codificada para que el explorador Web la pueda reproducir acorde a los elementos que contiene. Hay etiquetas que ya no se utilizan en la versión de HTML 4.01 y que fueron desaprobadas por el W3C; sin embargo cuando se declara la versión en la que está escrita la página Web, se puede especificar que a pesar de todo se permitirán elementos desaprobados por el consorcio W3C; o también lo contrario, declarando que se trata de un código fuente estricto que no permite reproducir elementos viejos desaprobados.

La declaración de la versión HTML en el que está escrita la página Web, siempre debe estar ubicada en la primera línea o renglón del código fuente antes de <html>. La declaración de la versión de HTML se realiza con la instrucción <!DOCTYPE>. No está de más reiterar que siempre debe ser incluida en el código fuente y que debe estar ubicada en la primera línea o renglón del código fuente.

A continuación se muestran las distintas declaraciones <!DOCTYPE> utilizadas para indicar en qué versión está escrita una página.

Versión HTML 4.01 Transicional: A pesar de estar en versión 4.01, permite la reproducción de etiquetas viejas o desaprobadas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Versión HTML 4.01 Estricta: Está escrita en versión HTML 4.01; pero prohibe estrictamente la reproducción de elementos viejos. 

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

Versión XHTML 1.0 Transicional: A pesar de estar en versión XHTML 1.0, permite la reproducción de etiquetas viejas o desaprobadas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Versión XHTML 1.0 Estricta: Está escrita en versión XHTML 1.0; pero prohibe estrictamente la reproducción de elementos viejos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Versión HTML 5: En la versión HTML 5 no hay declaraciones en estado transicional que permite el uso de elementos viejos o desaprobados; ya que esta versión es estricta en cuanto al uso de las etiquetas viejas desaprobadas; así que hay sólo una versión.

<!DOCTYPE html>

Para describir brevemente esta instrucción; DOCTYPE proviene de Document Type (en inglés Tipo de Documento); PUBLIC indica que es de tipo público accesible a todos los usuarios de la Web; W3C que respeta las normas del estándar de dicho consorcio; DTD proviene de Document Type Definition (Definición de Tipo de Documento) luego de lo cual se define la versión de HTML en la que está escrito el documento. La dirección del archivo de formato dtd que figura al final de la instrucción DOCTYPE de cada versión (salvo la de HTML 5); indica la ubicación del archivo donde se definen todos los comandos y elementos que componen una versión de HTML. Para cada versión hay un archivo dtd diferente.

Las declaraciones de versión de HTML siempre se escriben exactamente como se ha indicado en los párrafos anteriores; así, cada vez que se necesiten; acorde a la versión seleccionada; podemos venir a esta página del tutorial y copiar la instrucción de declaración requerida; o también podemos crear un archivo de texto donde podemos copiarlas para tenerlas a mano.

Una cosa más que hay que hay que aclarar es que cuando una página Web está en versión XHTML, hay que agregar un atributo en la etiqueta <html> de nombre xmlns (XML Namespace - Espacio de nombres XML) cuyo valor es la dirección donde se encuentra el espacio o conjunto de nombres de elementos que componen la versión XHTML. La dirección siempre es "http://www.w3.org/1999/xhtml". Atención, el atributo xmlns de <html> solamente debe ser utilizado en la versión XHTML.

Veamos un ejemplo de declaración de versión HTML en el código fuente de uno de los ejemplos que utilizamos anteriormente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Ejemplo de formulario</title>
</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Seleccione una marca de autos</p>
<select name="marcas">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<p><input type="submit" value="Enviar" /> </p>

</form
>

</body>
</html>

En el ejemplo anterior se declaró un código fuente XHTML 1.0 Transicional, el cual si llega a contener alguna etiqueta vieja ya desaprobada de versiones anteriores, igualmente podrá ser visualizada por los exploradores Web sin ningún inconveniente.

No está de más reiterar que todos los ejemplos de este tutorial respetan las normas del W3C al pie de la letra y en ningún momento se han enseñado etiquetas viejas de versiones anteriores a HTML 4.01, ya desaprobadas; todas son etiquetas vigentes.

Tampoco está de más reiterar que es importante siempre declarar la versión del código fuente de la página. Así que a declarar siempre la version!
 
 

CSS en HTML

En los primeros años de la World Wide Web (Red Informática Mundial) el lenguaje HTML se utilizaba para definir tanto la parte estructural de las páginas Web (inclusión de distintos elementos) así como la estética (colores, posiciones, diseño y trazado).

Pero con el paso del tiempo y la suma de más elementos que componían las páginas Web, cada vez más complejas y estéticamente ricas, se requirió la creación de un lenguaje aparte, dedicado exclusivamente al diseño estético de las páginas Web, llamado CSS.

El nombre CSS proviene de las siglas Cascading Style Sheets (Hojas de Estilo en Cascada); un lenguaje dedicado exclusivamente a la presentación estética de la página. De esta manera la definición de la parte estructural de las páginas Web, o sea la incorporación de elementos (texto, imágenes, hipervínculos, tablas, formularios, etc) se realiza con HTML, mientras que la definición de la parte estética (colores de texto, posiciones de elementos, distribución o trazado del diseño de la página Web, etc) se realiza con CSS. Una analogía arquitectónica válida sería comparar a HTML con la parte estructural de un edificio (cimientos, vigas, paredes, techos) y a CSS con la parte de diseño del mismo (pintura, empapelado, decoración interior y exterior). Así, el trabajo combinado de HTML y CSS da como resultado páginas visualmente ricas.

Antes, las páginas Web no tenían tanta riqueza visual como ahora; y toda la parte estética del diseño dependía de HTML. Claro que la variedad de elementos estéticos de las páginas Web en aquellos tiempos era inferior a los que se pueden encontrar hoy día.

Por aquel entonces se podía cambiar el color, el tamaño y el tipo de fuente del texto; cambiar el color de fondo de la página así como incluir una imagen de fondo; alinear los elementos de la página (texto, imágenes, tablas, etc) a la izquierda, centro o derecha; y para distribuir los elementos en posiciones específicas se utilizaban tablas con bordes invisibles de tamaño "0".

La mayoría de las etiquetas y atributos HTML que se utilizaban para mejorar estéticamente las páginas, quedaron desaprobados (deprecated en inglés) en la versión HTML 4.01; sin embargo hasta el día de hoy la mayoría de ellos todavía pueden ser visualizados en los exploradores Web si se especifica en el <!Doctype> del código fuente una versión de HTML transicional (no estricta). A pesar que funcionen no se recomienda incluir estos elementos y atributos; ya que mientras algunos pueden funcionar en ciertos exploradores Web puede que no lo hicieran en otros; sin mencionar que es probable que en un futuro todos los browsers dejen de visualizarlos, convirtiendo a la página en incompatible con exploradores Web futuros. Además es importante destacar que los beneficios visuales ofrecidos por estas etiquetas y atributos de HTML son limitados en comparación con la capacidad de diseño estético con que cuenta CSS, el cual brinda un sin fin de combinaciones visuales que permiten el desarrollo de páginas Web mucho más bonitas que las de antes.

Algunas de las etiquetas desaprobadas:

<center>: Centra todo tipo de elementos como texto, imágenes, tablas, etc.
<font>: Utilizada para indicar el color, tamaño y tipo de fuente de un texto.
<basefont>: Servía para indicar el color, tamaño y tipo de fuente de todo el texto de la página. Esta etiqueta se colocaba  fuera de <body> en <head>.

Algunos atributos ya desaprobados por el W3C:

Atributos de <body>:

link: Define el color de los hipervínculos de la página.
vlink: Define el color de los hipervínculos ya visitados.
alink: Define el color de los hipervínculos activos.
bgcolor: Define el color de fondo de la página.
background: Define una imagen de fondo para la página.

Atributos de <p>:

align: Indica el alineamiento de un texto en la página.

Atributos de <table> y <td>:

bgcolor: Color de fondo de una tabla o celda.

Hoy día en lugar de utilizar etiquetas y atributos HTML para agregar belleza estética a las página se utiliza CSS; el cual facilita mucho el diseño ya que cuenta con una gran variedad de aditivos estilísticos específicos para cada elemento HTML.

Los comandos o elementos de estilo CSS pueden incorporarse dentro del código fuente HTML de la página, así como también pueden estar en un archivo separado de formato .css el cual se vincula o importa en la página mediante la etiqueta <link> (vincular), la cual debe ir ubicada en la sección de cabecera del código fuente, fuera de <body>, entre las etiquetas de apertura y cierre <head>.

Si en lugar de crear un archivo separado de tipo .css se prefiere incorporar el código CSS dentro del código HTML, se debe utilizar la etiqueta <style> (estilo), entre cuyas etiquetas de apertura y cierre se coloca el código en lenguaje CSS. <style> al igual que <link> debe colocarse fuera de <body>, en la sección de cabecera entre las etiquetas de apertura y cierre de <head>.

Una de las ventajas de utilizar archivos CSS separados del código fuente de las páginas, es que si se quiere un diseño homogéneo y general para todas las páginas que componen un sitio Web; el mismo puede ser especificado en dicho archivo CSS; donde el estilo visual de cada elemento HTML de las páginas es definido. Por ejemplo, si se quiere que todas las páginas del sitio tengan un cierto color de fondo, en lugar de especificarlo en cada una de ellas; simplemente hay que hacerlo una vez en el archivo CSS, ya que los comandos estilísticos de aquel archivo se aplican a todas las páginas que componen el sitio Web. Si luego se quiere cambiar el color de fondo de cada página, en lugar de tener que modificar el código fuente de cada página, simplemente se modifica el color de fondo desde el archivo CSS; ahorrando así tiempo y trabajo.

Si se prefiere tener los comandos de estilo dentro del código fuente de la página Web, los cambios realizados entre las etiquetas de apertura y cierre <style> se aplicarán a toda la página; pero no afectarán al resto de los documentos del sitio Web.

Si por otro lado, si sólo se requiere aplicar los cambios de estilo en un elemento HTML específico, se puede agregar el atributo style en cualquiera de las etiquetas que forman parte del código fuente de la página Web. Los cambios sólo se aplicarán en dicho elemento.

El potencial de diseño estético que tiene CSS es muy grande, ofreciendo una infinidad de combinaciones estilísticas que pueden ser aplicadas en las páginas Web. Por eso al terminar de aprender HTML es indispensable estudiar CSS para complementar los conocimientos de desarrollo Web adquiridos. Hay que tener claro que si no se sabe CSS, no se pueden diseñar páginas y por ende sitios Web que cubran las expectativas visuales de los usuarios de hoy día. Sería como construir casas y dejarlas en su estado estructural; sin ventanas ni puertas, pisos y techos descubiertos de cemento; sin pintar, etc.

El lenguaje HTML sirve para definir los elementos que forman parte de la página, mientras que con CSS se organiza la distribución de los elementos de la página, colocándolos en posiciones precisas elegidas por el diseñador; se da estilo a dichos elementos (colores de fondo, formato de texto, colores de hipevínculos, efectos especiales, etc). Por lo tanto HTML sin CSS es incompleto.

En este tutorial nos dedicamos solamente a HTML, por lo tanto es recomendable que al finalizarlo busquemos un buen tutorial de CSS para completar el curso de diseño Web. Obviamente que para convertirnos en buenos diseñadores y desarrolladores Web, también se necesita saber utilizar algunas aplicaciones como Flash; editores de imágenes como Paint Shop Pro o Photoshop; así como otros lenguajes entre los que se cuentan Javascript, PHP, ActionScript y el manejo de bases de datos como MySQL. Con todos esos conocimientos más el uso de otras pequeñas herramientas útiles de administración de archivos como los FTP (que sirven para subir al servidor los archivos que forman parte de un sitio); se pueden crear sitios Web de gran calibre; con lo cual podremos incluso dedicarnos profesionalmente al diseño y desarrollo Web.

Aunque este tutorial está dedicado exclusivamente al aprendizaje completo de HTML y no de CSS u otros lenguajes, veremos un ejemplo de CSS para darnos una idea de qué se trata y cómo se utiliza. En el siguiente ejemplo daremos estilo al texto.

<html>
<head>

<title>Ejemplo de estilo CSS</title>

<style type="text/css">
h1 {color: red; font-family: arial;}
h2 {color: blue; font-family: verdana;}
p {color: fuchsia; font-family: courier; font-size: 4em;}

</style>

</head>

<body>

<h1>
T&iacute;tulo en color rojo y fuente arial</h1>
<h2>T&iacute;tulo en color azul y fuente verdana</h2>
<p>Texto fucsia, courier, tama&ntilde;o 4</p>

</body>

</html>

El código fuente anterior mostraría lo siguiente en los navegadores Web:

Dar estilo a texto con CSS
Cliquear para ampliar imagen

 
Javascript en HTML

El lenguaje HTML sirve para diseñar la estructura de una página, sin embargo los elementos que se agregan mediante este lenguaje son estáticos. Para darle dinamismo a la página; por ejemplo botones dinámicos con efectos especiales, imágenes animadas y en general cambios dinámicos del contenido; se requiere otro lenguaje de programación llamado Javascript. Una de las ventajas de Javascript es que el código fuente puede ser agregado entre medio del código fuente de la página HTML; siento estos dos lenguajes completamente compatibles. Sin embargo hay que tener en cuenta que la sintaxis de estos lenguajes es muy distinta una de la otra; ya que HTML es un lenguaje de diseño estructural de páginas Web y Javascript es un lenguaje de programación lógico que le da dinamismo a los elementos de la página Web.

Para agregar código fuente Javascript entre medio del código HTML se debe utilizar la etiqueta <script>. El código fuente deberá ser codificado entre medio de las etiquetas de apertura y cierre <script>. A partir de la etiqueta de apertura, todo lo que haya dentro de aquel espacio será código fuente Javascript hasta la etiqueta de cierre, tras la cual se retorna a HTML.

La etiqueta <script> sirve para agregar elementos dinámicos a las páginas Web programados en distintos tipos de lenguajes compatibles a HTML, por eso mismo se debe indicar en el atributo type de la misma, el nombre del lenguaje de programación; a pesar de esto, el lenguaje de programación compatible con HTML más utilizado es Javascript, sin embargo es importante aclarar en type el nombre del lenguaje.

En este tutorial no se explicarán los comando de Javascript, ya que se trata de otro lenguaje; sin embargo a continuación, a modo de ejemplo, dentro del espacio de <script> se muestra una línea que contiene un comando Javascript.

<html>
<head>

<title>Ejemplo de Javascript</title>
</head>

<body>
<script type="text/javascript">


document.write("Hola, esto es simplemente un ejemplo");

</script>
</body>

</html>


El ejemplo anterior simplemente sirve para demostrar cómo se utiliza la etiqueta HTML <script> para agregar código fuente Javascript.

Maquetación de páginas Web

Uno de los puntos más importantes que hay que tener en cuenta al diseñar un sitio Web, es el de la distribución visual de las páginas Web que lo componen; dónde estarán ubicadas la opciones o botones de hipervínculos, el contenido principal, etc.

Por lo general lo más recomendable, así como también lo más acostumbrado, es situar los botones de hipervínculos en la parte superior o en la parte izquierda de la página Web, mientras que en el área central se sitúa el contenido principal de la página.

Uno de los motivos principales de ese tipo de organización o distribución de los elementos de la página se debe a que en la mente humana las cosas por lo general se perciben en un cierto orden que obedece a mecanismos psicológicos que hacen que observemos o analicemos nuestro alrededor siguiendo un patrón específico. Por lo tanto el usuario se dirige inmediatamente hacia lugares específicos de la página para realizar ciertas actividades; si los elementos que busca no se encuentran en las posiciones donde habitualmente se localizan en la mayoría de los sitios Web, se pierde eficiencia.

Es muy importante también mantener suavidad y uniformidad en los colores de la página para hacer que el usuario tenga una sensación de tranquilidad y pueda concentrarse en el contenido. Los colores muy llamativos pueden distraer la atención del usuario.

Hay dos maneras de organizar y distribuir los elementos de una página, el método viejo mediante la utilización de tablas y el método actualmente más utilizado que depende de CSS. Las tablas son elementos HTML que fueron específicamente creados para tabular información y no como herramientas de diseño; sin embargo en los primeros tiempos cuando no se utilizaba CSS para el diseño visual, se debía recurrir plenamente a HTML para lograr páginas lo más atractivas posible.

Dado que no existen etiquetas especiales o atributos en HTML para ubicar los distintos elementos que forman parte de una página, mediante la utilización de tablas de borde invisible o valor "0" se pueden situar dichos elementos en las distintas celdas de dimensiones determinadas para lograr un efecto de posicionamiento libre en cualquier punto de la página.

Por ejemplo con una tabla de borde "0" o invisible, de 2 columnas y 2 filas; se puede diseñar una página con una barra horizontal en la parte superior para colocar el logo, una columna a la izquierda para la botonera y un espacio para el contenido principal. Se podría utilizar la celda superior izquierda para el logo, la inferior izquierda para la columna de botones y la inferior derecha para el contenido central. Dentro de la celda del contenido pueden insertarse tablas anidadas para organizar los elementos del contenido en posiciones específicas mediante el ajuste de los tamaños de las celdas.

Tabla de distribucion de pagina Web
Tabla de 4 celdas (2 columnas x 2 filas) y borde 0. En la celda superior izquierda se encuentra el logo, en la celda inferior izquierda la botonera de hipervínculos y en la celda inferior derecha el contenido central de la página.

A pesar de obtenerse los resultados buscados, utilizar tablas para organizar y distribuir elementos de HTML no es correcto. Lo que se debe hacer es utilizar CSS, dadas las mayores capacidades de diseño que ofrece. Mediante CSS se pueden organizar y distribuir los elementos de las páginas con mayor facilidad y flexibilidad que con las tablas. Otra desventaja de utilizar tablas para la distribución de páginas Web en lugar de CSS, es que dados los mecanismos utilizados por los motores de búsqueda, se les complica indexar las páginas cuyos elementos están distribuidos en tablas, resultando en puestos más bajos en búsquedas. Por lo tanto no sólo por motivos de diseño sino también de posicionamiento en buscadores, es más conveniente utilizar CSS en lugar de tablas para la distribución de las páginas Web.

Las etiquetas que permiten aprovechar atributos CSS en la distribución de páginas son <div> y <span>. Dichas etiquetas definen áreas individuales dentro de una página. De por sí solas <div> y <span> no dan resultados visuales, ya que lo único que hacen es definir zonas o áreas dentro de la página; pero si se les agregan modificadores de estilo CSS para definir las posiciones y estilos de diseño de dichas áreas, se puede apreciar el gran potencial que tienen estas dos etiquetas.

A continuación se van a dar dos ejemplos de la misma distribución de una página Web realizados con una tabla en el primer ejemplo y con la combinación de <div> y CSS en el segundo. Hay que aclarar que en el primer ejemplo que utiliza una tabla para la distribución, se utiliza un poco de CSS dentro de algunas etiquetas pero solamente para definir los colores de fondo de cada celda, los cuales facilitan la diferenciación visual de cada una; en ese ejemplo no se utiliza CSS en absoluto para la distribución.

Ejemplo 1 (tablas):

<html>
<head>

<title>Ejemplo de distribuci&oacute;n de p&aacute;gina</title>
</head>

<body>

<table width="100%" style="height: 100%;" border="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:magenta;">
<h1>Logo de la p&aacute;gina Web</h1>
</td>
</tr>

<tr valign="top">
<td width="20%" valign="top" style="background-color:grey;">
<b>Botonera</b><br />
Bot&oacute;n 1<br />
Bot&oacute;n 2<br />
Bot&oacute;n 3<br />
Bot&oacute;n 4
</td>
<td valign="top" style="background-color:white;">Contenido principal de la p&aacute;gina.</td>
</tr>

<tr>
<td colspan="2" align="center" style="background-color:darkgrey;">Copyright © 2012 P&aacute;gina de Ejemplo</td>
</tr>
</table>
</body>

</html>

El ejemplo de maquetación anterior mostraría lo siguiente:

Maquetar paginas web
Cliquear para ampliar imagen

Ejemplo 2 (<div> y CSS):

<html>
<head>

<title>Ejemplo de distribuci&oacute;n de p&aacute;gina</title>
</head>

<body style="margin: 0px;">

<div style="width:100%; height:100%; position: absolute; margin-left: 0px; margin-top: 0px; padding: 0px; top: 0px;">

<div id="header" style="background-color:magenta; height: 100px; position: relative; margin-top: 0px; top: 0px;">

<h1 style="margin-bottom:0;">Logo de la p&aacute;gina Web</h1></div>

<div id="menu" style="background-color:grey;height:100%; width:20%;float:left;">
<b>Botonera</b><br />
Bot&oacute;n 1<br />
Bot&oacute;n 2<br />
Bot&oacute;n 3<br />
Bot&oacute;n 4</div>

<div id="content" style="background-color:white;height:100%; width:80%; float:left;">
Contenido principal de la p&aacute;gina.</div>

<div style="background-color:darkgrey; clear:both; text-align:center; height: 40px;">
Copyright © 2012 P&aacute;gina de Ejemplo</div>

</div>

</body>

</html>

El ejemplo de maquetación anterior mostraría lo siguiente:

Maquetacion de paginas Web
Cliquear para ver en grande

No es objetivo del actual curso de HTML explicar los modificadores de estilo CSS que se incluyen en las etiquetas <div> del ejemplo anterior; la idea es simplemente comparar los dos métodos. Pero lo que sí se debe aclarar es que el segundo método es el más recomendado para organizar la distribución de una página Web. Por lo tanto es un requerimiento estudiar CSS luego de haber aprendido HTML, para poder lograr el diseño de sitios Web de calidad profesional.

Por lo tanto, las tablas son importantes pero para lo que fueron proyectadas, tabular datos y no para fines de diseño estilístico.

Multimedia en HTML

Los archivos multimedia vienen en muchos formatos. Multimedia es cualquier cosa que se puede oír o ver como texto, sonido, música, grabaciones, videos, películas, etc. Hoy en día ya es muy usual encontrar elementos de multimedia en páginas Web.

Los distintos exploradores Web soportan un cierto número de formatos multimedia, pudiendo así reproducir videos, música, etc. Los primeros exploradores Web solamente soportaban texto y no sólo eso sino que contaban únicamente con un tipo de fuente. Más adelante comenzaron a soportar colores, distintas fuentes y estilos de letras; y ya luego imágenes.

El soporte de audio, video y animaciones es manejado de distintas formas en cada tipo de explorador Web. Mientras que algunos elementos multimedia pueden ser reproducidos directamente por los componentes básicos del explorador, otros, para poder funcionar, requieren el uso de ciertos programas especiales que se añaden complementariamente, llamados plug-ins.

Hay distintos tipos de formatos multimedia, y cada uno realiza distintas tareas. A continuación se listan algunos de los más utilizados. 

  • Archivos AVI: Tienen extensión de formato .avi (Audio Video Interleave - En inglés Audio Video Intercalado); este formato fue desarrollado por Microsoft, siendo por lo tanto compatible en todas las computadoras con sistema operativo Windows. Además es soportado por la mayoría de los exploradores Web o browsers. En otros sistemas operativos a veces no funciona.
  • Archivos WMV: Tienen extensión de formato .wmv (Windows Media); y como el anterior también ha sido desarrollado por Microsoft, siendo compatible con todos los sitemas operativos Windows. Sin embargo para poder ser reproducidos en otros sistemas operativos requieren la instalación de un programa o componente especial el cual es gratutio.
  • Archivos MPEG: Tienen extensión de formato .mpg o .mpeg (Moving Pictures Expert Group - En inglés Grupo de Expertos de Imágenes en Movimiento). Este formato de video es el más popular en Internet y es soportado por todos los sistemas operativos y exploradores Web; por lo tanto es uno de los más recomendables a la hora de agregar videos.
  • Archivos Quicktime: Tienen extensión de formato .mov . Este formato ha sido desarrollado por Apple; por lo tanto es soportado por las computadoras de aquella empresa como las Mac; mientras que para poder ser ejecutados en sistemas operativos Windows, requieren que se instale un plug-in o aplicación componente adicional gratuito.
  • Archivos Flash o Shockwave: Tienen extensión de formato .swf y .flv . El formato Flash ha sido desarrollado por Macromedia. Este formato es utilizado para poder reproducir películas Flash (usadas para representar animaciones, interfaces dinámicas, juegos online, etc.). Hoy día son muy populares en Internet, dados los resultados estéticos positivos que posee. Por otro lado el formato.flv es muy utilizado en sitios de videos como Youtube.

Insertar objetos en HTML

Una de las capacidades de los exploradores Web es la de poder ejecutar algunos tipos de aplicaciones externas dentro de los mismos; dichas aplicaciones son conocidas como programas ayudantes o plug-ins (enchufados o conectados). Los plug-ins enriquecen a las páginas Web tanto estéticamente como funcionalmente, ya que permiten la ejecución de efectos especiales o tareas que no podrían funcionar en documentos Web si no fuera por ellas; por ejemplo los reproductores de películas o juegos online. Algunas de las aplicaciones incrustadas o enchufadas en documentos Web incluyen reproductores de archivos de Flash (.swf y .flv), reproductores Quicktime, etc. Una de las aplicaciones más utilizadas hoy día en páginas Web son los reproductores Flash. Desde interfaces visualmente ricas y con efectos especiales hasta reproductores de películas (como los de Youtube) y juegos online son en realidad aplicaciones o programas independientes enchufados en las páginas Web. La etiqueta que nos permites incluir estos objetos externos es <object>.

La etiqueta <object> va acompañada de otra etiqueta llamada <param>. Mientras la primera sirve para enchufar los programas ayudantes o plug-ins, la segunda es para ajustar los parámetros de funcionamiento específicos del programa introducido.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de programa insertado</title>
</head>

<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="708" height="137">


<param name="movie" value="http://www.lookpink.com/games/swfs/0.11.swf" />
<param name="quality" value="high" />

<param name="allowScriptAccess" value="sameDomain" />

</object>
</body>

</html>


Con el código fuente anterior se inserta una aplicación Flash de formato .swf. En el mismo se pueden ver diversos atributos en la etiqueta <object>.

Comencemos con los más fáciles; width y height que se utilizan para especificar el ancho y el alto que ocupará la aplicación dentro de la página.

En cuanto al extraño atributo classid el cual contiene un aún más extraño valor, se trata de una herramienta que sirve únicamente en Internet Explorer (IE). Ese valor le indica a IE qué tipo de programa se quiere ejecutar, por ejemplo el valor "d27cdb6e-ae6d-11cf-96b8-444553540000" declara que se quiere utilizar una aplicación Shockwave-Flash, requiriendo por lo tanto un reproductor de archivos de tipo .swf. A continuación vemos el atributo codebase en el cual se indica la ubicación del código fuente que permite la ejecución del objeto insertado; en el ejemplo anterior al tratarse de un archivo de tipo Flash, el código o aplicación que permite la ejecución del objeto se encuentra en la dirección "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"; por lo tanto si en IE no tenemos instalado el plug-in que permite ejecutar programas Flash, mediante este atributo IE nos sugerirá bajarlo e instalarlo desde la dirección indicada.

El motivo de la existencia de classid es que en IE existe la posibilidad de insertar aplicaciones especiales de Microsoft o programadas para ejecutarse en sistemas operativos Microsoft Windows; dichas aplicaciones se denominan componentes ActiveX y pueden ser insertadas en todo tipo de herramientas de Microsoft como el Word, Excel o Visual Studio entre otros. El Internet Explorer, no se encuentra excento de dicha capacidad. Los componentes ActiveX son programas que se instalan y pueden ser controlados desde otras aplicaciones; por eso mismo pueden ser insertados en páginas Web como objetos externos. En classid lo que se indica mediante un código es el tipo de aplicación que se quiere enchufar. Cada tipo de aplicación tiene un código de identificación, por lo tanto no será el mismo para el reproductor Media Player que para el reproductor de películas Flash. Hay que aclarar que Flash no es un producto de Microsoft, pero igual por temas de compatibilidad cuenta su propio código de identificación para poder funcionar en Internet Explorer.

Con las etiquetas <param> se ajustan parámetros específicos del objeto insertado; dichos parámetros varían según el programa; no siendo los mismos en aplicaciones Flash, que en aplicaciones Quicktime o de otro tipo. El nombre del parámetro se indica en el atributo de <param> name, mientras que el valor de dicho parámetro de declara en el atributo value.

En aplicaciones o películas Flash se utiliza el parámetro movie (película) para indicar la dirección URL o ubicación de dicha película. También se ve el atributo quality (calidad) en el que indicamos un valor de "high" (alta). El parámetro allowScriptAccess permite a la película Flash tener acceso al código fuente de la página HTML e interactuar con la misma; los valores posibles son "sameDomain" (mismo dominio) y "always" (siempre); el primer valor indicando que solamente puede ser accedido el código fuente de la página si el archivo .swf se encuentra en el mismo dominio del documento Web; mientras que el segundo valor especifica que puede ser accedido por archivos .swf ubicados en otros servidores; el valor por omisión es "sameDomain". Hay que aclarar que los parámetros recién mencionados son específicos de Flash.

Sin embargo es muy posible que algunos exploradores Web como Firefox el código fuente anterior no funcione. Eso se debe a que el atributo classid necesario para que Internet Explorer pueda insertar la película Flash, confunde a Firefox resultando en un espacio vacío donde debería estar el objeto. La solución a este problema nos lleva al concepto de condiciones de IE.

Las condiciones de Internet Explorer funcionan únicamente en aquel explorador Web, pero pueden llegar a ser útiles para solucionar conflictos como el que tenemos aquí. Se trata de un tipo de comando específico de IE cuya sintaxis se encuentra incluida dentro comentarios. Primero veremos cómo quedaría el código fuente anterior y luego lo analizaremos con cuidado.

<html>
<head>

<title>Ejemplo de programa insertado</title>
</head>

<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="708" height="137">

<!--[if !IE]><!-->
<object
type="application/x-shockwave-flash" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="708" height="137" data="http://www.lookpink.com/games/swfs/0.11.swf">
<!--<![endif]-->

<param name="movie" value="http://www.lookpink.com/games/swfs/0.11.swf" />
<param name="quality" value="high" />

<param name="allowScriptAccess" value="sameDomain" />

</object>
</body>

</html>


En el código fuente se puede observar la etiqueta <object> sin ninguna modificación respecto al código fuente anterior, y además una segunda versión de la misma etiqueta con algunas modificaciones, ubicada entre unos extraños comandos. La primera versión es para que el IE pueda insertar el objeto, mientras que la segunda versión es para que lo hagan otros exploradores Web como Firefox. Primero analizaremos la sintaxis de los comandos condicionales de IE y a continuación los atributos.

Estos comandos no son parte de HTML y tampoco son validados por el consorcio W3C; por lo tanto son incluidos como comentarios, ya que solamente pueden ser interpretados por IE y los otros exploradores Web pueden dar resultados no deseados.

La estructura de las condiciones son una parte esencial de la programación y de la informática en general, en otras palabras, sin comandos de condiciones, la computación como la conocemos hoy día no existiría. Sin embargo son elementos pertenecientes a lenguajes de programación lógicos como Javascript, PHP, Visual Basic, C/C++, etc; los cuales son más avanzados que HTML, un lenguaje de marcado estático que se utiliza para definir estructuras de documentos Web; siendo así, los comandos de condiciones escapan al objetivo del presente tutorial dedicado exclusivamente a HTML. No obstante, dada la necesidad de aplicarlos para hacer funcionar objetos insertados en exploradores Web como Firefox, se dará una breve descripción del funcionamiento o mecanismo que hay detrás de las condiciones.

En el código fuente hay una etiqueta <object> (la primera) con atributos que pueden ser interpretados por IE pero no por Firefox; a continuación le sigue una condición la cual ordena al explorador Web que si no es IE ejecute la segunda etiqueta <object> con atributos interpretados por otros exploradores Web que no son IE. El truco detrás de dicha movida es que si tenemos un explorador Web IE el mismo interpretará y ejecutará la primera etiqueta <object>, mientras que al leer la condición de "si no es IE ejecute la segunda etiqueta <object>", como se trata efectivamente de IE el resultado de dicha condición será falso, o sea que se salteará la segunda etiqueta <object> y no la ejecutará. Por el contrario, Firefox no podrá interpretar la primera etiqueta <object> y tampoco interpretará los comandos condicionales de IE, ya que los tomará como simple texto; pero sí podrá entender la segunda etiqueta <object>, logrando insertar así finalmente la película Flash. A continuación analizaremos la sintaxis de los comandos condicionales de IE.

El condicional [if !IE]> se puede descomponer de la siguiente manera: La palabra if significa "si" en inglés; el símbolo ! significa "no es"; mientras que IE, como ya sabemos, son las siglas de Internet Explorer; de esta manera se arma la condición "si no es IE". El comando [endif], simplemente señala el fin del condicional "si" ("end" significa final), por lo tanto significa "finalizar si".

En el medio, entre el principio de la condición y el final se coloca la etiqueta a ejecutar por otros exploradores Web y a ignorar por IE.

Un detalle al que hay que prestarle atención es que los comandos condicionales deben estar dentro de comentarios, ya que los exploradores Web como Firefox, al no interpretarlos los considerarán como simple texto. Por lo tanto el código de los comandos condicionales de IE quedaría así: <!--[if !IE]><!--> y <!--<![endif]-->. Al figurar como comentarios, Firefox se lo salteará leyendo directamente la segunda etiqueta <object> que podrá interpretar dadas unas modificaciones en los atributos.

Ahora pasemos a analizar los atributos de <object> que permiten visualizar el objeto insertado en otros exploradores Web que no sean IE. Una de las razones por las que no se puede insertar correctamente el objeto en otros browsers como Firefox, es por el atributo classid que es incompatible con estos últimos. Por lo tanto debemos reemplazar a classid con el atributo type (tipo), en el que se indica el tipo de aplicación que se quiere insertar; siendo en el ejemplo nuestro "application/x-shockwave-flash" (aplicación Shockwave Flash). Otro atributo que debemos agregar es data, en donde se debe declarar la URL donde se encuentra el objeto a insertar. No importa que en el atributo value de <param> haya sido también declarado, se trata de una redundancia necesaria. Con las modificaciones recién descritas finalmente se podrá reproducir la película Flash en todos los exploradores Web. Sin embargo no todo es tan simple, hay unos puntos que hay que aclarar antes.

Microsoft ha anunciado que a partir de Internet Explorer 10, los condicionales IE no funcionan más en páginas Web diseñadas en versión HTML 5; por lo tanto la implementación de dichos condicionales no garantiza su funcionamiento en futuras versiones de IE.

Otra manera de hacer que el objeto insertado pueda ser visualizado en todos los exploradores Web es con la etiqueta <embed>; no obstante hay que aclarar que dicha etiqueta se había desaprobado en versiones HTML 4 y XHTML 1.0; pero volvió a ser aprobada en HTML 5. Para utilizarla en versiones HTML 4 y XHTML hay que declarar en <!DOCTYPE> que se trata de una versión de tipo transicional; en HTML 5 la etiqueta <embed> funcionará sin ningún problema.

Veamos el código fuente:

<html>
<head>

<title>Ejemplo de programa insertado</title>
</head>

<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="708" height="137">


<param name="movie" value="http://www.lookpink.com/games/swfs/0.11.swf" />
<param name="quality" value="high" />

<param name="allowScriptAccess" value="sameDomain" />

<embed src="" quality="high" width="708" height="137" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" />

</object>
</body>

</html>

En el código fuente anterior se puede ver que <embed> se coloca entre las etiquetas <object> de apertura y cierre, reemplazando los comandos condicionales de IE y la etiqueta <object> para browsers como Firefox. Los parámetros del objeto en vez de ser definidos en etiquetas separadas <param>, son definidos en atributos dentro de la etiqueta <embed>.

Los atributos utilizados son: src, donde se declara la dirección del objeto a insertar; allowScriptAccess que cumple la misma función que en su versión de valor en la etiqueta <param>, type para indicar el tipo de aplicación que se inserta y pluginspage (página del plug-in) para indicar la dirección de descarga del plug-in que permite ejecutar el objeto si aún no está instalado en el browser.

El tipo de solución a aplicar depende de nosotros y del tipo de finalidad que tendrá el sitio Web. Es interesante mencionar que cuando se crean películas o archivos .swf, el editor de Flash crea además automáticamente un archivo HTML con un código fuente que aplica el último método de inserción de objetos que vimos, combinando las etiquetas <object> y <embed>. Dicho código fuente puede ser copiado y pegado en la página Web que estamos diseñando, así como también se pueden modificar los valores de algunos parámetros y atributos ajustándolos a los requerimientos nuestros.

Cada tipo de objeto utiliza una serie de parámetros propios del mismo, por lo tanto pueden variar de un tipo de aplicación a otra.

Agregar audio en HTML

Agregar audio a una página Web no es tan simple, ya que se requieren algunos trucos para lograr que todos los exploradores Web y los distintos sistemas operativos puedan reproducir sin problemas los archivos de audio de la página.

La forma más fácil de agregar archivos de audio en una página es utilizando el reproductor gratuito de Yahoo. Lo único que hay que hacer es agregar en la página un corto código de Javascript, que se encuentra en el servidor de Yahoo mediante la etiqueta <script>. Se debe apuntar hacia la dirección URL donde está ubicado el reproductor para que pueda ser añadido en la página. Luego se agregan unos simples enlaces, con la etiqueta <a> que apuntan hacia los archivos de audio que queremos agregar en la página. Al tocar cualquiera de los enlaces, el reproductor comenzará a reproducir el audio.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Audio</title>
</head>

<body>

<p><a href="cancion1.mp3">Canci&oacute;n 1</a></p>
<p><a href="cancion2.mp3">Canci&oacute;n 2</a></p>
<p><a href="cancion3.mp3">Canci&oacute;n 3</a></p>
<p><a href="cancion4.mp3">Canci&oacute;n 4</a></p>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

</body>

</html>


Como se ve en el código fuente anterior, la etiqueta <script> agrega el reproductor de Yahoo, ya que en el atributo src se declaró la dirección donde se encuentra el código fuente del reproductor; haciendo que de esta manera el mismo sea incrustado en la página. De esta manera si en la misma página hay hipervínculos hacia archivos de audio, estos se abrirán y serán ejecutados automáticamente por el reproductor añadido de Yahoo. Los nombres de archivo del ejemplo anterior deben ser reemplazados por nombres de archivos de audio reales, ya que esos son solamente para ejemplificar.

Otra manera de agregar audio en una página Web es mediante la etiqueta <audio>, entre cuyas etiquetas de apertura y cierre se pone la etiqueta <source>. La etiqueta <audio> se utiliza para introducir el reproductor del explorador Web en la página; para ello hay que incluir el atributo controls cuyo valor también es "controls". Pero eso solamente coloca el reproductor en la página; para agregar un archivo de audio se debe incluir entre las etiquetas de apertura y cierre de <audio> la etiqueta <source>, en cuyo atributo src se debe indicar la dirección de la ubicación del archivo de audio, mientras que en el atributo type se indica de qué tipo de archivo o formato se trata. Estos dos atributos son necesarios y siempre deben utilizarse.

Por temas de compatibilidad en distintos browsers o exploradores Web es recomendable que los archivos de audio se suban en formato .mp3 y .ogg, ya que si un formato no puede ser reproducido por un cierto browser otro formato sí podrá.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Audio</title>
</head>

<body>

<audio controls="controls">
<source src="cancion.mp3" type="audio/mpeg" />
<source src="cancion.ogg" type="audio/ogg" />
</audio>

</body>

</html>


Hay que aclarar que la etiqueta <audio> solamente está validada en la versión de HTML 5; por lo tanto solamente funcionará en exploradores Web nuevos. Tampoco funcionará en códigos fuente que han sido declarados en <!DOCTYPE> como escritos en versiones XHTML o HTML 4. Así, al utilizar esta etiqueta hay que aclarar que se trabaja en la versión HTML5.

Otro reproductor similar al de Yahoo es el reproductor de Google; pero a diferencia del anterior que está basado en un código Javascript, el reproductor de Google se incrusta en la página con la etiqueta <embed>; en cuyo atributo type (tipo) se debe indicar que se trata de una aplicación shockwave-flash mediante el siguiente valor "application/x-shockwave-flash"; mientras que en el atributo src se debe indicar la dirección del reproductor en el servidor de Google así como la dirección del archivo de audio a reproducir de la siguiente manera: "http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=cancion4.mp3", donde "http://www.google.com/reader/ui/3523697345-audio-player.swf" es la ubicación del reproductor de Google y "cancion4.mp3" es la dirección URL del archivo de audio a reproducir. También se pueden agregar los atributos width y height para indicar el ancho y el alto que ocupará el reproductor.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Audio</title>
</head>

<body>

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=cancion4.mp3" height="200" width="200"></embed>

</body>

</html>


Como se ve en el código fuente anterior, no se pone nada entre las etiquetas de apertura y cierre de <embed>. Además en src se indican los valores de la ubicación del reproductor y luego de la parte que dice "audioUrl" se indica la dirección del audio. En este caso se agregó un archivo de sonido llamado cancion4.mp3 el cual se encuentra en el mismo directorio en que se encuentra la página html que estamos diseñando, por eso solamente se indica el nombre del archivo; por lo tanto este nombre de archivo puede ser reemplazado por cualquier otra dirección Web.


Agregar video en HTML

Así como con el audio, agregar videos en una página Web no es tan simple por motivos de compatibilidad. Los comando existentes pueden funcionar en algunos browsers mientras que en otros no; así como hay formatos de video que no pueden ser reproducidos en ciertos sistemas operativos. También hay que tener en cuenta que hay etiquetas no compatibles en versiones anteriores de HTML, haciendo que los browsers más viejos no puedan reproducir los videos agregados.

El primer método que veremos para agregar videos es el que utiliza la etiqueta <video>. Esta etiqueta es nueva y está validada únicamente a partir de HTML 5; por lo tanto los usuarios de exploradores Web más viejos que no soportan HTML 5 no podrán ver estos videos, por suerte sin embargo la mayoría de los usuarios hoy día utilizan browsers actualizados. También si en <!DOCTYPE> se indica que el código fuente está escrito en versión XHTML, tampoco funcionará.

Al igual que <audio>, la etiqueta <video> agrega el reproductor en la página, mientras que la etiqueta acompañante <source>, que debe ir colocada entre las etiquetas de apertura y cierre <video>, es la que indica la dirección del video a reproducir.

Los atributos de <video> width y height definen el ancho y el alto del reproductor respectivamente; mientras que el atributo controls incluye los controles del reproductor, el valor de este atributo debe ser también "controls"; este atributo es muy recomendable incluso se puede decir que es obligatorio, ya que sin controles ede reproductor el video no podrá ser reproducido.

Con la etiqueta <source> se indica la fuente del video a reproducir mediante el atributo src; así como el tipo y formato del mismo en el atributo type. Es recomendable convertir el video a varios formatos con una aplicación especial, para que pueda ser reproducido en browsers o sistemas operativos que no soportan ciertos formatos; por lo tanto entre las etiquetas de apertura y cierre <video> se tend
rán que agregar varias etiquetas <source> con los archivos del video en distintos formatos.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Video</title>
</head>

<body>

<video width="200" height="200" controls="controls">
<source src="videodeejemplo.ogg" type="video/ogg" />
<source src="videodeejemplo.mp4" type="video/mp4" />
<source src="videodeejemplo.webm" type="video/webm" />
Su browser no soporta la etiqueta video
</video>

</body>

</html>


En el ejemplo anterior se agregaron varios formatos del mismo video por las dudas si no es compatible con algún browser o sistema operativo. Además se puede ver un texto antes de la etiqueta de cierre </video> que aparecerá si el reproductor no funciona; por distintos motivos como tener una página escrita en versión HTML 4.01 o XHTML estricta; o por ser un browser viejo.

Para agregar videos también se puede utilizar la etiqueta <embed> en cuyo atributo src se indica la dirección del video y en los atributos width y height el ancho y el alto respectivamente. Pero es importante aclarar que no se incluyen controles de reproductor y el video se reroducirá automáticamente. Este método es más conveniente para reproducir videos Flash en formato swf que videos en otros formatos. Uno de los inconvenientes de la etiqueta <embed> es que no está validado en la versión HTML 4, por lo tanto solamente funcionará en códigos fuente declarados como HTML 5 o HTML 4 no estricto y por lo tanto en nuevos exploradores Web. Otra cosa a tener en cuenta es que los videos Flash no pueden ser reproducidos en iPad y iPhone.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Video</title>
</head>

<body>

<embed src="pelicula.swf" width="200" height="200" />

</body>

</html>


Otra etiqueta similar a <embed> para agregar videos es <object>; la cual también es más utilizada para agregar videos Flash de formato swf. En el atributo data se debe indicar la dirección del video; mientras que con los atributos widthheight se establecen el ancho y el alto del video respectivamente. La etiqueta <object> funciona tanto en versiones HTML 4, como XHTML y HTML 5. Tambien hay que tener en cuenta que los videos Flash no pueden ser reproducidos en iPad y iPhone.

Veamos un ejemplo:
 

<html>
<head>

<title>Ejemplo de Video</title>
</head>

<body>

<object data="pelicula.swf" width="200" height="200" />

</body>

</html>


Agregar videos de Youtube en HTML

Hoy día está muy de moda agregar videos de Youtube en páginas Web, esto se logra usando un marco incorporado con la etiqueta <iframe>, en cuyo atributo src se indica la dirección de la página Youtube del video. Sin embargo no se trata de solamente copiar y pegar la URL, ya hay que hacer una pequeña modificación en la dirección. Por ejemplo en un video de Youtube ubicado en la página "http://www.youtube.com/watch?v=K0c2HG2sBjs" hay que hacer una pequeña modificación que deja la dirección con el siguiente formato: "http://www.youtube.com/v/K0c2HG2sBjs". En los atributos width y height se indican el ancho y el alto respectivamente con el que el video Youtube aparecerá en la página que diseñamos.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Video Youtube</title>
</head>

<body>

<iframe src="http://www.youtube.com/v/K0c2HG2sBjs" width="50%" height="500" scrolling="no" frameborder="1"></iframe>

</body>

</html>


También se puede utilizar la etiqueta <embed> para agregar videos de Youtube en una página Web, en cuyo atributo src, al igual que con <iframe>, hay que indicar la dirección de la página Youtube donde se encuentra el video a incluir; también con el formato de la dirección modificado, como se hace con <iframe>. Además hay que incluir un atributo type (tipo), cuyo valor debe indicar el tipo de aplicación que se agrega; que sería "application/x-shockwave-flash" (aplicación Shockwave-Flash).

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de Video Youtube</title>
</head>

<body>

<embed src="http://www.youtube.com/v/K0c2HG2sBjs" width="500" height="500" type="application/x-shockwave-flash"></embed>

</body>

</html>


Recordemos que la etiqueta <embed> quedó desaprobada en HTML 4.01 y luego volvió a ser aprobada por la W3C en la versión de HTML 5. Por lo tanto si se quiere utilizar <embed> hay que declarar en <!DOCTYPE> un código fuente transicional o de HTML 5.

Etiquetas de cabecera en HTML

Hasta ahora hemos trabajado con elementos HTML visibles, o sea que son visualizados en el explorador Web, dado que han sido declarados dentro de la sección <body> (cuerpo) del código fuente, que es donde se insertan los elementos estructurales de la página.

Pero todavía nos falta estudiar la sección de la cabecera del código fuente <head>, donde se ubican las etiquetas de elementos no visibles, o sea que no son visualizado en la página y solamente cumplen funciones informativas acerca del documento Web.

La información que brindan las etiquetas de la sección de la cabecera a pesar de no ser directamente perceptible por los usuarios es de gran importancia, puesto que es interpretada por los exploradores Web, motores de búsqueda y otros servicios de Internet.

De las etiquetas de la cabecera solamente aprendimos a utilizar una, <title>, de hecho fue una de las primeras que vimos en el curso de HTML, que sirve para definir el título de la página que aparecerá en la barra de título o en la pestaña. En realidad se trata de la única etiqueta de cabecera que brinda resultados visibles a los usuarios, aunque se encuentren fuera del cuerpo del contenido de la página, se pueden ver. El resto de las etiquetas brindan únicamente información.

Comenzaremos con la etiqueta <base>, la cual brinda información a los exploradores Web. Se utiliza para indicar la URL base de todas las URL relativas de los hipervínculos, imágenes y otros elementos que hay en la página. Por ejemplo si la URL base que se indica en <base> es "http://www.ejemplo.com/paginas/" y en el atributo src de una etiqueta <img> de imagen indicamos la dirección "imagen1.jpg", el explorador Web cargará la imagen ubicada en "http://www.ejemplo.com/paginas/imagen1.jpg". También se utiliza para definir el target (objetivo) de todos los hipervínculos.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de URL y target base</title>
<base href="http://www.ejemplo.com/paginas/" target="_blank" />
</head>

<body>

<img src="imagen1.jpg" width="200" height="200" alt="imagen1" />

<a href="inicio.html">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="productos.html">Productos</a>
<a href="ayuda.html">Ayuda</a>
</body>

</html>


En el ejemplo anterior la URL base es "http://www.ejemplo.com/paginas/", por lo tanto la imagen de la etiqueta <img> deberá estar en "http://www.ejemplo.com/paginas/imagen1.jpg" para poder ser visualizada; mientras que los hipervínculos abrirán las páginas que se encuentran en "http://www.ejemplo.com/paginas/inicio.html", "http://www.ejemplo.com/paginas/servicios.html", "http://www.ejemplo.com/paginas/productos.html" y "http://www.ejemplo.com/paginas/ayuda.html". Todos los hipervínculos se abrirán en ventanas o pestañas nuevas según lo indicado en <base>.

Los valores posibles del atributo target de <base> son los mismos que los de la etiqueta <a>; "_blank" para abrir las páginas en ventanas o pestañas nuevas; "_top" abre la página en la misma ventana de la página abierta (es el valor por omisión); "_self" abre la página en el mismo marco del hipervínculo (muy poco utilizado, solamente sirve si se trabaja con "frames"; y finalmente se puede declarar el nombre del marco (frame) donde se quiere abrir la página del hipervínculo.

En realidad la función de <base> no es estructuralmente muy importante, simplemente ofrece comodidad al diseñador, para evitar tener que indicar la URL absoluta de cada imagen e hipervínculo; o el target de cada hipervínculo. Por ejemplo si primero declaramos target "_blank" y después nos arrepentimos queriendo que los hipervínculos se abran en la misma ventana o pestaña, solamente tenemos que cambiar el target de <base> en lugar de tener que modificar el target de cada <a>.

ELEMENTO DE CABECERA LINK

La etiqueta <link> de la sección de cabecera sirve para vincular un recurso externo a una página Web. Su utilización más común es para vincular archivos de hojas de estilo CSS externos con la página Web. Como ya hablamos antes, los modificadores de estilo CSS pueden insertarse individualmente dentro de las etiquetas HTML con el atributo style; pueden declararse dentro de la sección <head> mediante la utilización de la etiqueta <style> de la cual hablaremos más tarde; y también pueden declararse en un archivo CSS externo el cual es insertado o importado en la página Web con la etiqueta <link>.

Para graficarlo de otra manera cuando el explorador Web carga el código fuente de la página HTML, además le adjunta el código fuente del archivo de hojas de estilo CSS externo dentro de la sección de cabecera, resultando un sólo código fuente.

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de archivo CSS insertado</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>

<p>P&aacute;gina Web con archivo de estilo insertado.</p>

</body>

</html>


El código fuente anterior no genera ninguna diferencia visual, ya que para eso se necesitan tener algunos conocimientos de CSS que van más allá del objetivo del actual curso de HTML. El ejemplo anterior simplemente muestra cómo vincular un archivo o recurso externo con el documento HTML utilizando la etiqueta <link>. A continuación analizaremos cada atributo.

Primero tenemos el atributo rel (por relationship que en inglés significa relación), en donde se indica qué tipo de relación tiene la página con el archivo o recurso con el que se vincula; en otras palabras, se indica para qué se quiere vincular el recurso con el documento HTML. En el ejemplo la relación indicada es "stylesheet" (hoja de estilo CSS); lo que significa que se trata de un archivo CSS con estilos que serán insertados en el código fuente HTML en el momento que se cargue la página.

En type se indica el tipo o formato de archivo a insertar; en el ejemplo se declara el valor "text/css", significando que se trata de un archivo en formato texto y de tipo css. Finalmente en el atributo href se indica la dirección del archivo o recurso a insertar.

Aunque se pueden vincular muchos tipos de archivos, la etiqueta <link> es más frecuentemente utilizada para vincular hojas de estilo CSS.

En la sección de cabecera se pueden incluir múltiples etiquetas <link>, vinculando al documento HTML con varios archivos de recurso. Así por ejemplo se pueden tener varios archivos de hoja de estilo CSS vinculados o insertados en la página HTML.

ELEMENTO DE CABECERA STYLE

Como ya se mencionó antes, se pueden incluir los modificadores de estilo CSS dentro de la sección de cabecera del archivo HTML, en lugar de insertar un archivo CSS conteniendo a los mismos. Dichos modificadores de estilo serán aplicados en los elementos HTML de la página. Para lograr eso se requiere la utilización de la etiqueta <style>, dentro de la cual (entre la etiqueta de apertura y cierre) se debe escribir el código fuente en CSS. Los modificadores de estilo incluidos se aplicarán a los elementos HTML de la sección de contenido visible o cuerpo <body>. El atributo que se utiliza en <style> es type, y sirve para indicar el tipo de estilo que se incluye; siendo el valor siempre "text/css" (tipo de texto css).

Veamos un ejemplo:

<html>
<head>

<title>Ejemplo de estilo CSS</title>

<style type="text/css">

h1 {color: red;}
h2 {color: green;}
p {color: blue;}
</style>

</head>

<body>

<h1>T&iacute;tulo 1 de color rojo.</h1>
<h2>T&iacute;tulo 2 de color verde.</h2>
<p>P&aacute;rrafo de color azul.</p>

</body>

</html>


En el ejemplo anterior se puede ver el código fuente CSS entre las etiquetas de apertura y cierre <style>, con modificadores de estilo que definen los colores de los elementos <h1>, <h2> y <p> del cuerpo <body> de la página Web.

ELEMENTOS META HTML

Uno de los tipos de elementos de cabecera más utilizados son los <meta>, los cuales proveen datos o información acerca del documento o página Web para los browsers, motores de búsqueda y otros servicios Web. Veamos como funcionan.

Los recursos o archivos que se transmiten entre los servidores y los exploradores Web, lo hacen cumpliendo ciertas normas o protocolos llamados HTTP (Hypertext Transfer Protocol - que en inglés significa Protocolo de Transferencia de Hipertexto). Por eso mismo en las URL de las direcciones Web se antepone el tipo de protocolo al que responde el documento a descargar por el browser "http://". Los tipos de recursos que se descargan son documentos HTML, imágenes, videos, etc. Cuando se abre una página Web ocurren una serie de actividades que el usuario no ve entre el explorador Web (denominado cliente en el protocolo HTTP) y el servidor; los cuales intercambian un cierto número de mensajes.

Antes de descargar los recursos que forman parte de una página Web, el browser (cliente) envía un mensaje de petición al servidor para descargar la página Web y los recursos que la componen; como respuesta el servidor le envía otro mensaje y a continuación los recursos de la página. El mensaje de petición del browser tiene la siguiente primera línea o renglón:

GET /archivo.html HTTP/1.1

El mensaje anterior significa "dame el archivo del directorio raiz llamado archivo.html, soy compatible con la versión de protocolo HTTP 1.1".

El mensaje de respuesta del servidor tiene en la primera línea o renglón (status line - línea de estado en inglés) lo siguiente:

HTTP/1.1  200  OK

El mensaje anterior significa "los recursos han sido enviados satisfactoriamente respetando el protocolo HTTP 1.1". El número 200 es un código que significa que lo pedido se ha enviado exitosamente. Existen distintos códigos de mensaje de respuesta, por ejemplo el código significa 401 "no autorizado", 402 "se requiere pago", 403 "prohibido", 404 "no se encuentra", etc.

Además de la primera línea o línea de estado, el mensaje de respuesta puede contener más líneas con información para el browser acerca de la página. Dichas líneas pueden ser agregadas por nosotros mediante la utilización de la etiqueta <meta>.

La estructura de las etiquetas <meta> y sus atributos para proveer información a los browsers acerca de la página es la siguiente:

<meta http-equiv="tipo-de-información" content="valor-información" />

Como se puede ver hay dos atributos, uno es http-equiv, cuyo valor es el tipo de información que se va a pasar, y content en el cual se indica el valor del tipo de información declarado en http-equiv. A continuación veremos distintos tipos de información meta que se pueden especificar en la cabecera del código fuente de la página Web que estamos diseñando.

Mensaje meta content-type

El tipo de información meta "content-type" se utiliza para que en el mensaje de respuesta del servidor, cuando se descarga una página, se especifique el tipo de juego de caracteres que utiliza la página. En la gran mayoría de los sitios Web se utiliza el juego de caracteres UTF-8, que responde al estándar de codificación de caracteres Unicode, con el cual cada carácter y símbolo tiene un código numérico que lo representa. Se recomienda que siempre se agregue este mensaje meta.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

En http-equiv se indica el nombre de la información meta "content-type" (tipo de contenido) y en el atributo content (contenido) se indica que es texto de html que obedece al juego de caracteres UTF-8 "text/html; charset=UTF-8". Se recomienda agregar la información meta "content-type" en todas las páginas que diseñemos como se mostró recién en el ejemplo.

Mensaje meta date

La información meta "date" se utiliza para especificar a los exploradores Web la fecha y la hora en que la página fue creada:

<meta http-equiv="date" content="Wed, 20 Apr 2011 22:00:00" />

Mensaje meta last-modified

El mensaje meta "last modified" indica a los exploradores Web y buscadores cuándo fue modificada por última vez la página Web:

<meta http-equiv="last-modified" content="Mon, 20 Dec 2011 20:20:00" />

Mensaje meta cache-control

Los exploradores Web tienen la capacidad de almacenar las páginas que son visitadas frecuentemente, para no tener que descargar del servidor, los recursos que la componen (imágenes, videos, página HTML, archivo de estilo CSS, etc) cada vez que se visita. En lugar de descargarla del servidor, la descarga de una carpeta de archivos temporales dentro del disco duro de nuestra computadora, pudiendo así acceder a ella y visualizarla mucho más rápido. Dicho mecanismo se llama cache, y las ventajas que ofrece es que se puede acceder más rápido a páginas que visitamos frecuentemente; sin embargo una de las desventajas es que si la página se actualiza frecuentemente, es posible que los usuarios que la tienen guardada en cache, no vean las modificaciones inmediatamente. Por ejemplo en portales de diarios o periódicos no se recomienda permitir el cache, ya que dichos sitios Web se actualizan frecuentemente y no se verían las modificaciones.

Existen dos tipos de chache, los privados y los públicos. Los caches privados son los provistos por el explorador Web como vimos recién. Los caches públicos por otro lado, pertenecen a los proveedores de servicios de Internet ISP (Internet Service Provider), o sea la empresa que nos permite conectarnos a Internet. Ese tipo de cache se denomina "cache de proxy". Como es utilizado por mucha gente, y el cache del proveedor de Internet es compartido por todos ellos, cuando una página es muy vista por algunos usuarios, la misma es cacheada y puede ser descargada por otros usuarios más rápidamente desde el servidor del ISP. El proxy del ISP se puede habilitar desde la sección de configuración de proxy del browser. A continuación veremos los distintos tipos de información meta "cache-control" que podeos utilizar.

<meta http-equiv="cache-control" content="no-cache" />

Por ejemplo en la línea anterior se indica que la página no debe ser cacheada por los exploradores Web y tiene que ser descargada. Sin embargo hay que aclarar que en muchos browsers lo que hace es guardarla y cada vez que se quiere ver la página, primero chequea en el servidor si hay alguna modificación o actualización de la misma y si no la hay la abre directamente de la carpeta de archivos temporales de Internet. Para que directamente no se guarde la página hay que escribir:

<meta http-equiv="cache-control" content="no-store" />

La línea anterior indica que no debe cachear la página ni almacenarla; por lo tanto cada vez que se quiere abrir la página, la debe descargar del servidor. Sin embargo la mejor opción para no cachear una página es utilizar los dos valores:

<meta http-equiv="cache-control" content="no-cache, no-store" />

Por el contrario si lo que queremos es que la página sea cacheada, tenemos las siguientes opciones que se dan a continuación:

<meta http-equiv="cache-control" content="private" />

En la línea anterior se indica que la página puede ser cacheada en los browsers de los usuarios. Si se quiere que sea cacheada tanto por los browsers como por los proxys de los ISP de manera pública, hay que escribir la siguiente línea meta:

<meta http-equiv="cache-control" content="public" />

Mensaje meta pragma

En versiones más viejas de browsers, se utilizaba para indicar que la página no debía ser cacheada el mensaje meta "pragma".

<meta http-equiv="pragma" content="no-cache" />

Sin embargo en nuevas versiones de browsers ya no es tan utilizada y se la pasa por alto, siendo más útil "cache-control". También como otra opción se pueden utilizar de manera combinada tanto el meta "pragma" así como "cache-control".

Mensaje meta refresh

Con el mensaje meta "refresh" se puede hacer que la página se actualice cada cierta cantidad de segundos automáticamente, o sea que se recarga sola sin necesidad de que el usuario presione F5 o el botón del browser de "actualizar". Además se puede hacer que después de pasados los segundos indicados en lugar de recargarse la misma página se abra una página en otra dirección. Por lo general dicha modalidad es utilizada por administradores de sitios que se han mudado de dirección, para que los usuarios que entran a la dirección vieja sean redireccionados despúes de pasados unos segundos. Pero hay que tener en cuenta que a los buscadores no les gustan mucho las páginas que se actualizan o recargan automáticamente, resultando en puestos más bajos de búsqueda, por lo tanto hay que tratar de evitar "refresh".

<meta http-equiv="refresh" content="40" />
En la línea anterior se indica que la página debe ser refrescada (refresh) o recargada cada 40 segundos. La cifra siempre debe indicarse en segundos. Por el contrario si se quiere redireccionar al usuario después de pasados unos segundos:

<meta http-equiv="refresh" content="40; URL=http://www.youbioit.com" />
En la línea anterior se indica que después de pasados 40 segundos se debe redireccionar al browser a la dirección indicada.

Otra cosa por la que se desaconseja la utilización de "refresh" es porque a muchos les molesta que la página se recargue sola.

Hasta ahora hemos visto mensajes meta definidos con el atributo http-equiv, ahora veremos meta definidos con el atributo name.

Mensaje meta expires

El mensaje meta "expires" (expira) se utiliza para indicar en que fecha expira o caduca la página Web. Eso es para que los buscadores dejen de indexar la página y por lo tanto desaparezca de los resultados de las búsquedas que hagan los usuarios. En realidad no se recomienda utilizar el mensaje meta "expires" ya que tanto los buscadores como los exporadores Web de hoy día no le prestan atención. Para que los buscadores no indexen la página, se recomienda utilizar "cache-control".

<meta name="expires" content="Fri, 30 Dec 2011 20:00" />

Mensaje meta "robots"

El mensaje meta "robots" se utiliza para indicarles a los buscadores que acciones pueden tomar en la página. Entre las acciones se incluyen permitir indexar la página, permitir entrar a otras direcciones a través de los hipervínculos incluidos en la página, prohibir indexar la página, prohibir entrar a los hipervínculos de la página. Veamos los distintos mensajes meta "robots".

Permitido hacer todo (opción default):

<meta name="robots" content="all" />

Permitido indexar:

<meta name="robots" content="index" />

Permitido seguir hipervínculos:

<meta name="robots" content="follow" />

Prohibido indexar:

<meta name="robots" content="noindex" />

Prohibido indexar y seguir links:

<meta name="robots" content="noindex, nofollow" />

Como se puede ver en la última línea, también se pueden combinar las distintas opciones. El meta "robots" es muy útil si por ejemplo tenemos alguna página del sitio que no queremos que se vea en buscadores ya que puede pertenecer a una sección privada del sitio, como por ejemplo la página privada de perfil de usuario en una red social. De lo contrario es conveniente permitir a los buscadores tanto indexar las páginas como también permitir que entren a los links para que puedan indexar otras páginas del sitio, resultando en mejores posiciones de búsqueda, lo cual permite más visitas al sitio.

Mensaje meta googlebot

Google tiene su propio mensaje meta, similar a "robots", con el cual se puede indicar a Google qué se le permite hacer en la página.

<meta name="googlebot" content="index, follow" />
La línea anterior indica a Google que la página puede ser indexada y sus links pueden ser visitados por el buscador para indexar también las páginas hacia las que apuntan dichos hipervínculos. Así podrán estar en resultados de búsquedas de Google. Igualmente es bueno mencionar que dado que por omisión Google puede indexar la página así como seguir los links de la misma, indicarle que puede hacer dichas acciones es redundante, agregando una línea innecesaria al código.

En la siguiente línea le indicamos a Google que no puede indexar la página ni tampoco seguir los hipervínculos de la misma.

<meta name="googlebot" content="noindex, nofollow" />

Cada vez que el buscador de Google, también conocido como la araña de Google, visita un sitio; en lo posible pasa por todas las páginas que forman parte del mismo, utilizando los hipervínculos presentes en cada una. Además de indexar las páginas, en el momento de cada visita toma una copia de la página, para que en caso de no estar disponible en algún momento por problemas técnicos o de servidor entre otros, el usuario podrá ver igualmente la página como se encontraba en el momento en que Google hizo una copia cache de la misma. Obviamente un mensaje indica en la parte de arriba, que se trata de una versión cache y no de la página actual. Si no queremos que Google tome una copia de la página cada vez que la visita, podemos indicarle que no lo haga mediante el siguiente mensaje meta de "googlebot" con valor "noarchive".

<meta name="googlebot" content="noarchive" />

Cada vez que realizamos una búsqueda, Google muestra en los resultados un fragmento del texto de la página que contiene las palabras incluidas en nuestra búsqueda, marcadas en negrita. Si no queremos que Google muestre en los resultados de búsquedas un fragmento del texto de la página hay que incluir el "googlebot" con valor "nosnippet" (no fragmento).

<meta name="googlebot" content="nosnippet" />

Como sucede con el meta "robots", en "googlebot" también se pueden combinar varios valores con indicaciones al buscador.

<meta name="googlebot" content="nofollow, nosnippet" />

Por ejemplo en la línea anterior se indica a Google que no puede seguir los links de la página ni tampoco dar fragmentos de texto en los resultados de búsqueda. Las combinaciones pueden ser variadas dependiendo de las necesidades del administrador.

Mensaje meta "keywords"

Quizá uno de los mensajes meta más utilizados por los desarrolladores Web es "keywords" (palabras clave). Con "keywords" se pueden agregar distintas palabras o frases que tengan relación con la temática del texto incluido en la página, las cuales pueden ser utilizadas o tomadas en cuenta por los distintos buscadores para promover la página a mejores posiciones de resultados de búsqueda. Así, si un usuario hace una búsqueda que coincida con la frase incluida en "keywords", es posible que nuestra página aparezca en una mejor posición de resultado de búsqueda, dado que dicha frase fue indexada por el motor de búsqueda. Por ejemplo si en una página se habla de electrónica podemos escribir:

<meta name="keywords" content="cursos de electronica, tutorial de electronica, transistores, capacitores, fabricación de circuitos integrados" />

En el ejemplo anterior se incluyen palabras y frases que pueden ser utilizadas por usuarios en búsquedas y que posiblemente por coincidencia hagan que nuestra página pueda ser incluida en posiciones de resultado de búsqueda más altas, siendo la primera página de resultados la más favorable, resultando en mayor cantidad de visitas. Las palabras y frases siempre tienen que estar relacionadas a la temática de la página, y preferentemente que sean exactamente iguales a palabras que aparecen en el texto de la página Web. Las palabras clave deben estar separadas por coma.

Mensaje meta "description"

Otro meta muy utilizado, es "description" el cual sirve para darles una descripción acerca de la página Web a los buscadores; para que dicha descripción aparezca en los resultados de búsquedas, como texto descriptivo sintético de la página.

<meta name="description" content="Página de datos acerca de componentes y dispositivos electrónicos; desde transistores hasta circuitos integrados." />

En el mensaje meta anterior se dio una descripción ficticia acerca de una supuesta página de electrónica. Se supone que en los resultados de búsqueda de algunos buscadores debería aparecer el texto del meta "description" debajo del título.

Mensaje meta "revisit-after"

Con "revisit-after" (revisitar después de) se le indica a los buscadores cada cuánto tienen que volver a visitar la página para indexar las actualizaciones. El período se marca en días, por lo tanto si se indican 20 días, los buscadores visitarán, revisarán e indexarán la página cada 20 días (days). Obviamente se trata de una sugerencia a los buscadores, lo que no significa que visitarán la página exactamente con la frecuencia que se indica en "revisit-after", algunos lo harán más seguido, otros lo harán con menor frecuencia y también habrán buscadores que sí respetarán el período indicado por nosotros.

<meta name="revisit-after" content="20 days" />

Mensaje meta "author"

Con "author" simplemente se especifica quién es el autor de la página Web, se trata de una especie de crédito al desarrollador.

<meta name="author" content="Mi nombre" />

Mensaje meta "generator"

Con "generator" se indica qué programa o herramienta se utilizó para generar la página. Si la diseñamos a mano sin la ayuda de algún diseñador visual, como Dreamweaver, no hace falta especificar nada, si por el contrario utilizamos un editor de páginas Web, automáticamente se agregará una línea con el meta "generator" con el nombre del programa utilizado.

<meta name="generator" content="Dreamweaver" />

Mensaje meta "copyright"

Con "copyright" se especifican los derechos de autor y protección contra copias. Hay que tener en cuenta que es importante siempre mostrar los derechos de autor en la parte visible de la página, sin embargo no está de más incluir el meta "copyright".

<meta name="copyright" content="© 2012 - El nombre de nuestra empresa" />

Mensaje meta "owner"

Con "owner" se indica el nombre del propietario del sitio Web y por ende de la página que se visita, a veces es el mismo que el autor.

<meta name="owner" content="Mi nombre" />

Veamos un ejemplo tomado de uno de los códigos fuente vistos anteriormente en el que agregamos algunos mensajes meta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>
Automotores - El Cuervo de Boedo</title>
<meta name="description" content="Venta de automotores nuevos y usados. Somos la concesionaria de automóviles más grande de la ciudad." />
<meta name="keywords" content="marcas de autos, automoviles, vehiculos automotores, ford, chrysler" />
<meta http-equiv="cache-control" content="no-cache, no-store" />
<meta name="revisit-after" content="20 days" />
<meta name="owner" content="Automotores - El Cuervo de Boedo" />

</head>

<body>
<form action="www.ejemplo.com/formulario-de-contacto.php" method="POST">
<p>Seleccione una marca de autos</p>
<select name="marcas">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
</select>

<p><input type="submit" value="Enviar" /> </p>

</form
>

</body>
</html>


Ya hemos estudiado todo HTML y analizamos todos los elementos y etiquetas del lenguaje. Pero como ya se comentó anteriormente, para complementar los conocimientos de diseño y desarrollo Web adquiridos en el actual curso es necesario continuar aprendiendo otros lenguajes, comenzando con CSS y continuar con Javascript y aplicaciones como Flash, Photoshop y Paint Shop Pro. Después de aprender bien esos lenguajes y herramientas; si estamos convencidos de querer dedicarnos profesionalmente al desarrollo Web, podríamos continuar estudiando un lenguaje para la creación de sitios más complejos; como redes sociales, sitios de ventas online, buscadores, etc. El lenguaje más popular para la creación de sitios de ese tipo es PHP el cual debe ir acompañado de algún tipo de base de datos que debemos aprender a administrar. Sabiendo todo lo anteriormente mencionado podemos dedicarnos profesionalmente al desarrollo Web.
 

 

ANEXO - CARACTERES ESPECIALES
CODIGOS O SECUENCIAS DE ESCAPE HTML

 

Símbolo Número de Secuencia de Escape Secuencia de escape Nombre
" &#34; &quot; Comillas
' &#39; &apos; Apóstrofe
& &#38; &amp; Ampersand
< &#60; &lt; Menor a
> &#62; &gt; Mayor a
  &#160; &nbsp; Espacio
¡ &#161; &iexcl; Signo de exclamación invertido
¢ &#162; &cent; Centavo
£ &#163; &pound; Pound
¤ &#164; &curren; Moneda, signo monetario genérico
¥ &#165; &yen; Yen
¦ &#166; &brvbar; Barra vertical separada
§ &#167; &sect; Sección
¨ &#168; &uml; Diéresis
© &#169; &copy; Copyright - Derechos de autor
ª &#170; &ordf; Indicador de género femenino
« &#171; &laquo; Comillas bajas angulares (izq)
¬ &#172; &not; Negación
® &#174; &reg; Marca registrada
¯ &#175; &macr; Guión alto
° &#176; &deg; Grados
± &#177; &plusmn; Signo mas menos
² &#178; &sup2; Superíndice 2 (al cuadrado)
³ &#179; &sup3; Superíndice 3 (al cubo)
´ &#180; &acute; Acento agudo
µ &#181; &micro; micro
&#182; &para; Párrafo
· &#183; &middot; Punto medio
¸ &#184; &cedil; Cedilla
¹ &#185; &sup1; Superíndice 1
º &#186; &ordm; Indicador de género masculino
» &#187; &raquo; Comillas bajas angulares (derecha)
¼ &#188; &frac14; Fracción 1/4
½ &#189; &frac12; Fracción 1/2
¾ &#190; &frac34; Fracción 3/4
¿ &#191; &iquest; Signo de interrogación invertido
× &#215; &times; Multiplicación
÷ &#247; &divide; División
À &#192; &Agrave; A mayúscula, acento grave
Á &#193; &Aacute; A mayúscula, acento agudo
 &#194; &Acirc; A mayúscula, acento circunflejo
à &#195; &Atilde; A mayúscula, con tilde
Ä &#196; &Auml; A mayúscula, con diéresis
Å &#197; &Aring; A mayúscula, con anillo
Æ &#198; &AElig; Diptongo ae en mayúscula
Ç &#199; &Ccedil; C mayúscula, con cedilla
È &#200; &Egrave; E mayúscula, acento grave
É &#201; &Eacute; E mayúscula, acento agudo
Ê &#202; &Ecirc; E mayúscula, acento circunflejo
Ë &#203; &Euml; E mayúscula, con diéresis
Ì &#204; &Igrave; I mayúscula, acento grave
Í &#205; &Iacute; I mayúscula, acento agudo
Î &#206; &Icirc; I mayúscula, acento circunflejo
Ï &#207; &Iuml; I mayúscula, con diperesis
Ð &#208; &ETH; Letra eth mayúscula
Ñ &#209; &Ntilde; Letra Ñ mayúscula
Ò &#210; &Ograve; O mayúscula, acento grave
Ó &#211; &Oacute; O mayúscula, acento agudo
Ô &#212; &Ocirc; O mayúscula, acento circunflejo
Õ &#213; &Otilde; O mayúscula, con tilde
Ö &#214; &Ouml; O mayúscula, con diéresis
Ø &#216; &Oslash; O mayúscula, con barra inclinada
Ù &#217; &Ugrave; U mayúscula, acento grave
Ú &#218; &Uacute; U mayúscula, acento agudo
Û &#219; &Ucirc; U mayúscula, acento circunflejo
Ü &#220; &Uuml; U mayúscula, con diéresis
Ý &#221; &Yacute; Y mayúscula, acento agudo
Þ &#222; &THORN; Letra Thorn mayúscula
ß &#223; &szlig; Letra eszett
à &#224; &agrave; Letra a, acento grave
á &#225; &aacute; Letra a, acento agudo
â &#226; &acirc; Letra a, acento circunflejo
ã &#227; &atilde; Letra a, con tilde
ä &#228; &auml; Letra a, con diéresis
å &#229; &aring; Letra a, con anillo
æ &#230; &aelig; Diptongo ae
ç &#231; &ccedil; Letra c, con cedilla
è &#232; &egrave; Letra e, acento grave
é &#233; &eacute; Letra e, acento agudo
ê &#234; &ecirc; Letra e, acento circunflejo
ë &#235; &euml; Letra e, con diéresis
ì &#236; &igrave; Letra i, acento grave
í &#237; &iacute; Letra i, acento agudo
î &#238; &icirc; Letra i, acento circunflejo
ï &#239; &iuml; Letra i, con diéresis
ð &#240; &eth; Letra eth
ñ &#241; &ntilde; Letra ñ
ò &#242; &ograve; Letra o, acento grave
ó &#243; &oacute; Letra o, acento agudo
ô &#244; &ocirc; Letra o, acento circunflejo
õ &#245; &otilde; Letra o, con tilde
ö &#246; &ouml; Letra o, con diéresis
ø &#248; &oslash; Letra o, con barra inclinada
ù &#249; &ugrave; Letra u, acento grave
ú &#250; &uacute; Letra u, acento agudo
û &#251; &ucirc; Letra u, acento circunflejo
ü &#252; &uuml; Letra u, con diéresis
ý &#253; &yacute; Letra y, acento agudo
þ &#254; &thorn; Letra thorn
ÿ &#255; &yuml; Letra y, con diéresis

 


36 people like this

Share
Related Articles

Photo Gallery
Photoalbum: 

Curso de HTML


Suggested posts
Follow Youbioit






Comments

Muchas gracias, no sabes

Muchas gracias, no sabes cuánto me ha servido. 

Muchas gracias, tu curso ha

Muchas gracias, tu curso ha estado al pelo... Estare a la espera de tu curso de CSS.

 

muy,.. pero que muy, muy...

muy,.. pero que muy, muy... bueno.

gracias

 muchas gracias por dedicar

 muchas gracias por dedicar parte de su tiempo y conocimiento en ayudar a personas que como yo veian muy dificil poder entrar y manejar el mundo del internet!!!!!!!

Post new comment

The content of this field is kept private and will not be shown publicly.