HTML Basico (VII): etiqueta MARQUEE

La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.
Esta es una marquesina por defecto.

Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:

<marquee width="50%" height="60" align="bottom">
... texto ...
</marquee>

Esta marquesina ocupa el 50% del ancho, tiene una altura de 60 pixels y está alineada con la parte inferior.

El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML:

Esto se ve con la fuente Impact

<marquee style="...propiedades...">
... texto ...
</marquee>

Para controlar más efectivamente las marquesinas, existen una serie de atributos especiales:

DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:

<marquee direction="right">
 ... texto ...
</marquee>

El texto se desplaza de izquieda a derecha.

El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.
El texto se desplaza de abajo hacia arriba.El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.
El texto se desplaza de arriba hacia abajo.

Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos:

<marquee scrolldelay="300">
 ... texto ...
</marquee>

Velocidad = 100.
Velocidad = 150.
Velocidad = 300.

LOOP indica el número de veces que aparecerá el texto y por defecto, es infinito.

Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:

Desplazamiento = 5.
Desplazamiento = 10.
Desplazamiento = 50.

Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:

• scroll (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
• slide aparece por un lado, se desplaza y se detiene (sólo funciona en Internet Explorer).
• alternate se desplaza alternativamente hacia un lado y el otro.

Behavior = scroll.
Behavior = slide.
Behavior = alternate.

Las marquesinas no sólo pueden contener textos, también pueden contener otros elementos, por ejemplo, imágenes, vínculos o tablas:

Una tabla
Celda A	Celda B
Celda C	Celda C

¿Podemos controlar una marquesina mientras se ejecuta? Aquí hay un ejemplo simple, mediante dos pseudo-botones, logramos cambiarle la dirección:

• Aeromodelismo a full
• Café de por medio
• Cosas sencillas
• Cucoalmeria.net
• El Zulo Corp.
• Fotografías de la vida irreal
• Hora libre
• Nitrox
• ReCoLecTanDo IdEaS
• rEdEsfEr@
• Renton's coming on age
• Sin miedo
• Zona Firefox

Hacia abajo Hacia arriba

<marquee id="ejemplo" direction="up">
  ... contenido ...
</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">
  Hacia abajo
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">
  Hacia arriba
</a>

HTML Básico (VI): mapa de imágenes

          HTML nos permite la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos.
         Las fotos en las que queramos introducir un mapa de imágenes deberán ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos recomendables para todos los navegadores.

         A continuación vamos a explicarte como podemos crear esta etiqueta html y los diferentes atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa tarea.

HTML Básico (VIII): Celdas

Imaginad que tenéis que diseñar la siguiente tabla para la página principal de un sitio web

Con los atributos de la etiqueta <TABLE> que conocemos no podemos hacerla. Utilizaremos dos atributos nuevos. Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

 A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Ejemplo de ROWSPAN:

  <table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><p>Países Europeos</p></td>
<td><p>España</p></td>
<td><p>Madrid</p></td>
</tr>
<tr>
<td><p>Francia</p></td>
<td><p>Paris</p></td>
</tr>
<tr>
<td><p>Reino Unido</p></td>
<td><p>Londres</p></td>
</tr>
<tr>
<td rowspan="3"><p>Países Americanos</p></td>
<td><p>EEUU</p></td>
<td><p>Washington</p></td>
</tr>
<tr>
<td><p>Canada</p></td>
<td><p>Toronto</p></td>
</tr>
<tr>
<td><p>Mexico</p></td>
<td><p>Mexico</p></td>
</tr>
</table>

Países Europeos	España	Madrid
	Francia	Paris
	Reino Unido	Londres
Países Americanos	EEUU	Washington
	Canada	Toronto
	Mexico	Mexico

HTML Básico (V) : Tablas

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente

Escribimos:	Visualizamos
<TABLE >      <TR>           <TD>1 </TD> <TD> 2 </TD>               </TR> <TR>           <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>