Lección 5: Incluir imágenes, resaltes y sonidos

Aprende a incluir imágenes, resaltes y sonidos


Cómo incluir imágenes y resaltes:

Punto 22.- Para incluir una imagen (que es un archivo) en una página se usan los siguientes comandos de apertura y cierre:

< IMG SRC="nombre.ext" >

siendo las extensiones del archivo de imagen, más corrientes: .GIF o .JPG,...

Nota: En el ejemplo anterior, se supone que el archivo de la imagen está en el mismo directorio o carpeta que el archivo de la página-web.

Siempre habrá que tener en cuenta que para que en una página-web se pueda ver en Internet dicha imagen, tendrá que estar también subido el correspondiente archivo de imagen al servidor de Internet. Y que se sitúe en el mismo directorio o carpeta de donde tenemos ubicado el archivo de la página-web.

La imagen se ha centrado en esta ocasión con los comando externos de centrado de información:

< CENTER > < IMG SRC="payaso.gif" > < /CENTER >

Pero también se puede situar la imagen con un atributo interno a la orden IMG SRC que es alineamiento: ALIGN
Pongamos un ejemplo de situar el archivo de imagen en la
zona derecha:

< IMG SRC="payaso.jpg" ALIGN=RIGHT > 

Nota 1: Recordad que si se desea enviar archivos de imágenes para situarlos en un servidor de Internet habrá que hacerlo como ficheros binarios.

Nota 2: Para poner una imagen en la zona izquierda se usaría la orden:

< IMG SRC="payaso.jpg" ALIGN=LEFT >


Punto 23.- Los archivos gráficos de formato .GIF pueden tener hasta un máximo de 256 colores. Este formato permite hacer imágenes con fondos transparentes y permite generar pequeñas animaciones GIF, pero no permite una comprensión significativa del tamaño del archivo.


Punto 24.- Los archivos gráficos de formato .JPG pueden tener hasta un máximo de 16 millones de colores. El usuario puede aplicar un nivel de compresión del tamaño del archivo, pero a mayor compresión mayor pérdida de calidad. Este formato no permite hacer imágenes con fondos transparentes ni pequeñas animaciones en el propio archivo, a cambio son los más indicados en caso de tener que mostrar una imagen con un color más real. Existen otros formatos de imágenes o gráficos.


Punto 25.- Para poner una barra horizontal de separación (como las que estás viendo entre cada apartado de este Minicurso), activar sólo una vez el comando < HR > 

Punto 26.- Para poner un texto parpadeando o intermitente (esta opción sólo funciona con el navegador Mozilla Firefox ®) se activa con el comando
< BLINK > y se desactiva con < /BLINK >

Por ejemplo: < BLINK > HOLA, sólo parpadea con Mozilla Firefox < /BLINK >

HOLA, sólo parpadea con Mozilla Firefox


Punto 27.- Para incluir un texto en movimiento (conocido como "marquesina") como los que aparecen en todas estas páginas se pone el texto deseado anteponiendo y postponiendo los comandos:

Por ejemplo: < MARQUEE > Aprende a incluir textos en movimiento < /MARQUEE >

Aprende a incluir textos en movimiento


Punto 28.- Si se quiere incluir un contador a fin de ir comprobando qué número de visitas tienen nuestras páginas-web, hay que contactar con un servidor que tenga servicio de contadores para poder contratarlo. Habrá que dar: un nombre de contador, una clave y la dirección de Internet de nuestra página-web que identifique el contador. Esto permitirá recibir la información del número de visitas y estadísticas que tiene nuestra página-web.

Generalizando se puede decir que más o menos la orden que habrá que incluir en nuestra página-web es una similar a ésta:

< IMG SRC = "http://www.servidor.com/contador/contador.cgi?df=Usuario">

Nota: Puedes conseguir tu contador gratuito en estas direcciones:


Punto 29.- Para incluir sonido o una pequeña canción en una página-web hay que incluir la siguiente orden:

< EMBED SRC = "cancion.wav" >
si queremos que al acceder a la página-web aparezca de forma inmediata la ventana de reproducción de sonidos y se reproduzca el sonido o la canción.

Nota: No se debe olvidar que el archivo de sonido debe ser subido al servidor de Internet siempre junto al archivo de la página-web, al igual que los archivos de imágenes que se incluyan. En el ejemplo se supone que el archivo de sonido está en el mismo directorio o carpeta que el archivo de la página-web.

Los posibles formatos de archivos de sonido son variopintos, pero muchos de ellos necesitan pequeños programas que unidos al programa navegador nos permitan escuchar dicho archivo de sonido especial. Si deseamos que todo el mundo escuche el sonido existen dos formatos que lo permiten (siempre claro que el ordenador disponga de tarjeta de sonido): .MID y .WAV

El formato .MID o Midi es para sonido de melodías, tiene la ventaja de ocupar muy poco espacio de archivo. El formato .WAV permite un sonido de mayor fidelidad incluyendo voces y música (por ejemplo, una canción), pero en cambio ocupa mucho espacio de archivo.

El sonido se puede reproducir de dos formas: De forma automática cuando el usuario acceda a la página; o sólo cuando el usuario pulse sobre un "enlace" que se ponga a propósito. Para ello usaremos el atributo autostart:

  • < EMBED SRC = "cancion.wav" autostart=false > Aparecerá una ventana de reproductor de sonidos y no se reproducirá el sonido al acceder a la página, hasta que el usuario pulse el icono de poner en marcha (Play) [ > ].
  • < EMBED SRC = "cancion.wav" autostart=true > así conseguimos que al acceder a la página-web se active de forma automática la canción.

Abajo se muestra el icono para que el usuario reproduzca el ejemplo antes mostrado, sólo cuando desee oír el sonido de la melodia en formato .WAV y autostart=false

Cliquea en la imagen para oír la Melodia:

 


Punto 30.- La inclusión en las páginas-web de vídeos es un elemento muy atractivo que debe tenerse en cuenta.
Actualmente es bastante fácil la inserción de estos recursos, dado que existen potentes servidores que nos permiten emitir los archivos de vídeo añadiendo una serie de comandos que simplemente se copian en nuestra página-web.
Os recuerdo que como dijimos en la Lección 4 es imprescindible el uso de tablas sin borde para la maquetación adecuada de las páginas-web que contengan imágenes, vídeos y otros recursos.
Veamos una serie de ejemplos de los códigos que se deben incluir de un par de servidores de vídeo. Por tanto, si quisiéramos incluir en nuestra página-web un vídeo nuestro, antes deberíamos de crearnos un usuario en uno de estos servidores, después subir el archivo de vídeo y por último copiar la serie de códigos que nos lo indica dicho servidor, necesarios para insertar en nuestra página-web.

Leyendo adecuadamente los códigos podemos manipularlos y disminuir el tamaño de la ventana del vídeo o cambiar otras características. En estos ejemplos se ha cambiado el tamaño del vídeo a mostrar en ambos casos:

<object width="350" height="280"><param name="movie" value="http://www.youtube.com/v/Gps9CLuPrsE&hl=es_ES&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Gps9CLuPrsE&hl=es_ES&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="350" height="280"></embed></object>

   
<object width="350" height="264"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1474641&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=1474641&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="350" height="264"></embed>


Ricardo Fdez. Viana © desde 1997
Licencias
Licencia de uso
Se pueden realizar impresiones en papel siempre que conste el nombre del autor. © Ricardo Fernández Viana rifervia@yahoo.com

Visitas desde 10-mayo-2010: