Insertar una imagenPara insertar una imagen, se coloca el siguiente cdigo:

Como se puede ver este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no se pone . Las imgenes nunca tienen etiqueta de cierre. A lo sumo se indica el cierre en la misma lnea colocando una contrabarra al final, as: ..... alt="descripcion de la imagen" />

Veamos con detalles su sintaxis:

Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o est guardada en tu espacio web) o absoluta (siempre que la imagen la ests obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas.

Luego se coloca el ancho y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo vlido es ponerlo junto, as "100px".

En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la pgina fallara, el resto de los elementos como prrafos etc, ocuparan el lugar de esa imagen. Sera como si no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra, el navegador dejar un rectngulo con esas medidas en blanco, respetando la estructura de la web.

Por ltimo vemos un alt="........". No es obligatorio, pero para tener un cdigo vlido es necesario poner ese alt y adems escribir entre las comillas una breve descripcin de la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara poralgn problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las bsquedas de sus usuarios con el contenido de las pginas web, de modo que es bueno adems hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripcin.

BORDER

Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numricos y van expresados en pxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningn borde, pero si la imagen es tambin un enlace automticamentese le asignar un BORDER=1. La sintaxis correcta es:

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en pxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.

HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos mscercanos (texto, imgenes, apliques, etc.).

VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.). La sintaxis correcta es

Estos atributos resultan tiles cuando queremos distanciar la imagen de los objetos ms cercanos.

ALIGN

El atributo ALIGN define la posicin de la imagen respecto al texto colocado inmediatamente antes o despus de la misma. Existen varias opciones para el atributo ALIGN:

ALIGN=top: alinea la primera lnea de texto con la parte superior de la imagen.

INSERTAR IMAGEN DE FONDOara incluir un fondo en una pgina web necesitamos utilizar el atributo background en la etiqueta , al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la pgina web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localizacin.

Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la pgina como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitindose a lo largo de todo el espacio de la pgina.

Fondo en otros elementos

No solo la pgina puede tener un fondo, tambin lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.

Consejos para utilizar fondos

Veamos ahora algunos consejos que se deberan seguir para una correcta utilizacin de los fondos de imagen.

1) Colocar un fondo de color parecido a la imagen Cuando colocamos un fondo en una pgina debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una pgina en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que s que haba texto en la pgina, lo que ocurre es que no se vea porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.

2) Que se puedan leer bien los textos Los fondos estn para hacer ms vistosa la pgina, no para molestar en la lectura de los textos. Es un error muy comn utilizar un fondo que luego molesta al leer los textos. Ya es bastante difcil leeruna web en un monitor como para que encima el texto no contraste bien con el fondo que se est utilizando. En este caso cabe indicar tambin que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.

3) Los fondos de imagen de color homogneo Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de unamisma gama. Si la imagen tiene partes oscuras y claras, de qu color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastar bien con las partes del fondo que tambin son claras. Igual pasar si colocamos el texto con un color oscuro, que no contrastar bien con las partes oscuras del fondo.

4) Tener cuidado con las distintas definiciones de pantalla Es importante saber que un visitante puede acceder a una pgina con un tamao de ventana variable. A veces un fondo se comporta bien con una definicin dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 1024x768. Luego accede una persona con una definicin de 1280x1024, o superior, y ve la pgina incorrectamente porque se realiza un mosaico con el fondo que no haba tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta pgina, que se ver bienen una definicin de 800x600 pero mal si es mayor.

5) Hacer un fondo suficientemente grande Es importante que el tamao del archivo que vamos a utilizar como fondo tenga un cierto tamao. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajar mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco ms grande, para realizar el mosaico hubiera trabajado mucho menos.

En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentacin de la informacin en la pgina de una manera clara.

Si deseamos utilizar un fondo que pudiera dar algn problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la pgina dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.

SONIDO DE FONDO

Aadir una msica de fondo a una pgina tiene pros y contras, si el sonido es apropiado al contenido de la pgina, puede hacerla ms atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualizacin de la pgina y adems muchos usuarios suelen estar escuchando otro tipo de msica cuando navega en Internet, por lo que el escuchar tambin sonido en cada pgina que visita puede resultar algo molesto.

Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta , que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el nmero de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habr que asignarle el valorinfinite o -1.

Por ejemplo, podramos insertar un sonido de fondo escribiendo el siguiente cdigo:

La etiqueta puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fcil de encontrar, por si deseamos hacerle alguna modificacin. Podramos, por ejemplo, incluirla justo debajo de la etiqueta .

VIDEO Y AUDIO

En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo paradescargarse.

Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta es la que se utiliza para insertar archivos de vdeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas y no hay que insertar nada.

A travs del atributo src hay que especificar la ruta y el nombre del archivo de vdeo.

Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la pgina,y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede tomar los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el tamao de la consola de control de vdeo. Estos atributos pueden tomar como valor un nmero, que indica el tamao en pxeles. Si no se especifican estos atributos, la consola de control de vdeo se mostrar con el tamao ms adecuado al tamao del vdeo.

A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de

video. Puedes reproducirlo pulsando sobre los controles. Object1

Para insertar el vdeo anterior, se podra escribir:

Existen algunos navegadores que no reconocen la etiqueta , por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta , que funciona del mismo modo para los archivos de audio y de vdeo.

No hay que olvidar que para los archivos de audio tambin se mostrarn los controles de reproduccin.

Insertar una imagenINSERTAR IMAGEN DE FONDO