Ingresar Sonidos en HTML

La presencia de archivos sonoros en forma de MIDI o WAV puede servir como agradable banda sonora mientras se navega por el web, pero también puede ser un pesado fardo que sirve sólo para hacer más lento el cargado y poner nervioso al visitante. Como repetiremos a menudo en esta guía, no podemos olvidar que aunque, sin lugar a dudas, una atractiva impostación gráfica y musical de las páginas web es importante, es fundamental que la navegación no llegue a ser lenta o incluso, en última instancia, imposible si nos preocupa mínimamente nuestra cuenta de teléfono. Nuestro consejo es, por tanto, evitar archivos MIDI grandes (60Kb de archivos MIDI, por ejemplo, resultan exagerados) y enormes WAVE (que podemos sustituir con otros archivos más ligeros, como veremos a continuación).

Tomemos un archivo MIDI; imaginemos que se llama "imagine.mid"; y consideremos que queramos insertarlo como fondo de la página web nada más abrirse ésta, automáticamente por tanto.
Antes de nada, debemos pensar que Navigator y MSIE utilizan marcas diversas para llamar automáticamente un archivo MIDI de fondo.

Por ejemplo, la marca <BGSOUND> funciona sólo con MSIE pero no con Navigator (LOOP indica el número de veces que debe repetirse el midi):

<BGSOUND SRC="imagine.mid" LOOP=INFINITE> 

Además de los archivos MIDI, con la marca <BGSOUND> es posible insertar archivos .WAV y .AU

Para permitir la apertura automática de un archivo audio también con Netscape, hay que usar la marca <EMBED>:

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0"> 

También en este comando además de los archivos MIDI es posible insertar archivos .WAV y .AU

Una de las rémoras para la inserción de archivos midi en las propias páginas, obedece al hecho de que, cada vez que se cambia página, el archivo musical se interrumpe bruscamente. El problema no subsiste en los sitios divididos en marcos (frames), ya que el archivo musical se carga en el marco fijo y, por tanto, no cambia cuando se pasa página en los otros marcos. ¿Y por lo que respecta a los sitios sin marco? Una pequeña estratagema que toma piede los marcos puede ser la de construir una página con un marco "invisible".
Para ello, se crea una página con el siguiente código:

<FRAMESET rows="0,*" border=0 frameborder="0" framespacing="0"><frame me name="alto" src="top.htm" noresize><frame me name="centrale" src="central.htm" noresize></FRAMESET> 

donde en el marco "alto" insertaremos el código que invoca el archivo audio:

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0">

Otra "estratagema" para escuchar un archivo audio (SÓLO CON NETSCAPE) de manera continua incluso cuando se cambia página, es el de cargar dicho archivo en una ventana alternativa del navegador.
Para hacer esto, es necesario utilizar un pequeño pero importantísimo TARGET.
Los TARGET se usan sobre todo en los marcos pero pueden usarse también en otros casos. Así, por ejemplo, si queremos que una página asociada a un enlace se cargue en una ventana distinta del navegador, tendremos que insertar el TARGET="_new".

TABLE Gestionar tablas

La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página:

<TABLE WIDTH=500>

</TABLE>

En este ejemplo de código, la anchura de la tabla está expresada en píxel (500). Si se elige esta opción, sea cual sea la resolución con la que venga vista la página, la medida de la tabla no sufrirá variaciones, es decir, en nuestro caso será siempre de 500 píxel.

No sucederá lo mismo, sin embargo, si decidimos expresar el tamaño mediante un porcentaje:

<TABLE WIDTH=50%>

</TABLE>

En este caso, la anchura de la tabla será distinta según sea la resolución del vídeo del usuario.

Así, por ejemplo, quien tenga un vídeo con resolución 640x480 verá una tabla de unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de la página), mientras quien tenga un vídeo con resolución 800x600 verá una tabla de 400 píxel.

En nuestra opinión, es preferible mantener el control absoluto sobre la dimensión de la tabla utilizando, por tanto, la medición en píxel y no en tanto por ciento.

Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para ello utilizaremos algunas imágenes:

Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla.

He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha: 

<TABLE BORDER=1 WIDTH=300>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

</TABLE

prueba

prueba

prueba

En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:

Como podemos observar, hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha: 

<TABLE BORDER=1 WIDTH=300><TR> 

<TD WIDTH=100></TD> 

<TD WIDTH=100></TD> 

<TD WIDTH=100></TD> 

</TR> 

<TR><TD WIDTH=100></TD> 

<TD WIDTH=100></TD> 

<TD WIDTH=100></TD> 

</TR> 

</TABLE>

prueba	prueba	prueba
prueba	prueba	prueba

 El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en píxel):

<TABLE CELLPADDING=10 CELLSPACING=10></TABLE> 

La colocación del texto y de las imágenes dentro de los distintos campos <TD> de la tabla puede ser modificada de varias maneras:

<TABLE WIDTH=300 HEIGHT=200> <TD width=100VALIGN=TOP> prueba </TD> <TD WIDTH=100VALIGN=BOTTOM> prueba </TD> <TD WIDTH=100VALIGN=MIDDLE> prueba </TD> </TABLE>

prueba prueba prueba

 

<TABLE WIDTH=300 HEIGHT=200> <TD width=100 ALIGN=RIGHT> prueba </TD> <TD WIDTH=100 ALIGN=CENTER> prueba </TD> <TD WIDTH=100 ALIGN=LEFT> prueba </TD> </TABLE>

prueba prueba prueba

 Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo como los de las páginas web normales (los fondos pueden ser sustituidos con GIF animadas):

<TABLE WIDTH=300 HEIGHT=200> <TD width=100 BGCOLOR="red"> prueba </TD> <TD WIDTH=100BGCOLOR="yellow"> prueba </TD> <TD WIDTH=100BGCOLOR="gray"> prueba </TD> </TABLE>

prueba prueba prueba

<TABLE WIDTH=300 HEIGHT=230> <TD width=100 BACKGROUND="sfondo15.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo26.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo61.jpg"> prueba </TD> </TABLE>

prueba prueba prueba

Propiedades de IMG, MAP Y AREA

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 este tag 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.

El tag map

Cómo ya podemos suponer, <map> es el tag necesario para poder crear un mapa de imágenes en html. Por supuesto, posee un cierre: </map>.

Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map name= “ejemplo1”>

Atributo area

El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos al destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos que indicar al navegador para que la interprete.

La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de dicha área. También podemos escribirle un texto alternativo, un “alt”, al área.

Existen tres tipos de áreas. Vamos a explicártelas a continuación.

Atributo shape

Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas características diferentes. Vamos a profundizar un poco más en ellas.

shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para definir la zona que incluirá ese mapa deberemos definir la esquina superior izquierda del área y la esquina inferior derecha.

shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros sólo debemos indicarle el centro de la circunferencia y el radio del mismo.

shape=“poly” : Este tipo de área es la más versátil de todas, la que más posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para crearla debemos indicarle los diferentes puntos del polígono que hagamos y de una forma ordenada, siguiendo el camino que nosotros hemos trazado para hacerlo.

Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo.

Atributo coords

El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por comas.

Y el dónde nos dirigirá esa área nos lo indicará el atributo “href”

Atributo href

Aquí deberemos indicar el destino del área.

usemap

Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace gracias al atributo usemap.

Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del mapa de imágenes que queramos utilizar.

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo. Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un área circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de este tutorial. También hemos hecho un área poligonal en la bola negra del fondo que te llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen, que te redigirá al inicio del tutorial de php.

El código nos ha quedado de la siguiente manera:

<img src="http://html.hazunaweb.com/html/imagenes/prueba-mapa.jpg" alt="Prueba de mapa de imágenes" width="300" height="214" border="0" usemap="#billar"> <map name="billar"><area alt="Si clícas aquí irás a la página de inicio del tutorial de html" shape="circle" coords="148,154,44" href="http://www.hazunaweb.com"><area alt="Si clías aquí irás a la página de inicio del tutorial de css" shape="poly" coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,36,177,39,168,46,162,52,160,61" href="http://css.hazunaweb.com/"><area alt="Si clías aquí irás a la página de inicio del tutorial de php" shape="rect" coords="11,77,288,105" href="http://php.hazunaweb.com/"></map>

Y el resultado lo verás si clícas en las zonas adecuadas: