Para insertar una imagen en una página web se utiliza la etiqueta <img> con el siguiente formato:
<imgsrc="imagen">
src
Aquí ponemos el nombre del archivo de imagen. Los formatos permitidos son GIF, JPG y PNG
Atributos opcionales
alt="texto"
Texto alternativo. Se ve cuando no se carga la imagen y cuando pasamos el cursor por encima de ella. Es muy recomendable utilizarlo para facilitar la navegación con navegadores que sólo soporten texto.
width="número" height="número"
Indican las dimensiones de la imagen. Puede omitirse y saldrá a su tamaño original, aunque es recomendable ponerlos para que el navegador reserve el espacio de la imagen antes de cargarla y de este modo evitar que el texto salte a medida que se cargan las imágenes.
tamaño original 90x60 pixels
width="70" height="70"
longdesc="página"
Indica la dirección de una página donde podemos encontrar más información sobre la imagen. Resulta muy útil por ejemplo cuando usamos mapas de imágenes. La forma de acceder a esta página depende del navegador, pero si no permite ir directamente sólo podremos ver de qué página se trata visualizando el código fuente.
usemap="#nombre"
Con esta etiqueta podemos hacer que la imagen se comporte como un mapa donde cada zona es un vínculo a una página distinta. Se utiliza siempre junto a la etiqueta <map> en la que se definen estas zonas. La explicación de esta etiqueta se verá en la lección 7. Crear vínculos
En las versiones anteriores de Html existían otros atributos como align y border con los que podíamos modificar la posición respecto del texto o añadir un borde a la imagen. Esto lo conseguiremos ahora con el atributo style y las propiedades de CSS2.
Veamos un ejemplo de imagen centrada verticalmente con respecto al texto y con doble borde de 4 píxels:
Otra propiedad interesante para utilizar con las imágenes es float que permite que el texto se distribuya alrededor de la imagen como puede verse en este ejemplo. Los posibles valores son left y right para colocar a la izquierda o a la derecha del texto respectivamente. El código de este ejemplo sería:
<imgsrc="imagen" style="float: right;">
Actividad 6.1
Crea en tu disquette una imagen de una gota de agua con el Paint del Windows de tamaño máximo 100x100 y guárdala en tu carpeta como agua.gif.
Abre el archivo agua.htm e inserta la imagen que acabas de crear antes de la palabra agua al principio de la página.
Haz que el texto quede centrado verticalmete respecto a la gota de agua y asígnale el texto alternativo Agua.
Insértala de nuevo delante de agua bendita de manera que el texto se distribuya alrededor.
Vuelve a insertarla antes del último renglón, centrada en la página, a un tamaño de 200px de ancho por 50px de alto y con borde.
Guarda el archivo y ábrelo en el navegador para ver el resultado.
En versiones anteriores de Html cada tipo de objetos tenía su propia etiqueta para ser insertados en un documento, incluso aparecieron etiquetas propias de los distintos navegadores para permitir la inserción de determinados tipos, etiquetas que no funcionaban en los otros navegadores. Además, continuamente aparecen nuevos tipos de objetos, como nuevos formatos de vídeo, sonido, animaciones, etc., y por tanto era necesaria una etiqueta que permitiese la inserción de cualquier objeto actual y cualquiera que pueda aparecer en un futuro. Esta es la etiqueta <object> que desplaza a todas las demás, incluso a la que acabamos de ver, <img> aunque aún se permita su uso.
El uso de esta etiqueta es el siguiente:
<objectdata="objeto" type="tipo de contenido">...</object> Ejemplo: <objectdata="java.gif" type="image/gif">...</object> Observa que necesita etiqueta de cierre, al contrario que <img>.
data="objeto"
Aquí ponemos el nombre del archivo que queremos insertar.
type="tipo de contenido"
Aquí ponemos el tipo de contenido del archivo, es decir, si se trata de una imagen, un sonido, un video, etc. Algunos de los tipos válidos más conocidos son: image/gif, audio/mpeg, video/quicktime, text/html, etc.
Si quieres saber el tipo de contenido de un archivo puedes encontrarlo en el explorador de Windows, seleccionando Ver - Opciones de carpeta - Tipos de archivo.
Atributos opcionales
declare
Declara el objeto pero no lo crea, de modo que puede, por ejemplo, ser llamado con un vínculo mediante el nombre asignado con el atributo id.
width="número" height="número"
Indican las dimensiones del objeto.
classid="objeto"
Indica el objeto que queremos insertar. Dependiendo del tipo de objeto se utiliza este atributo o data. classid se utiliza por ejemplo para insertar subprogramas en java u otros lenguajes, data lo utilizaremos para objetos de imagen, sonido o vídeo.
codetype="tipo de contenido"
Aquí ponemos el tipo de contenido del archivo cuando se utiliza classid. Por ejemplo, para insertar una aplicación en Java el tipo es application/java-archive.
codebase="dirección web"
A menudo un objeto insertado utiliza otros archivos externos, con este atributo se indica la carpeta donde residen estos objetos, en caso de omitirlo los buscará en la carpeta donde se encuentra la página actual.
archive="lista de archivos"
En el caso anterior podemos especificar aquí esos archivos externos para que se descarguen acelerando la presentación del objeto.
standby="texto"
Podemos escribir aquí el texto que se mostrará mientras se carga el objeto, es el típico mensaje Por favor, espere....
usemap="#nombre"
Con esta etiqueta podemos hacer que la imagen se comporte como un mapa donde cada zona es un vínculo a una página distinta como vimos con la etiqueta <img>
En este tutorial no entraremos en el tema de la inserción de aplicaciones complejas, controles ActiveX, Flash, etc. Su inserción se realiza con la etiqueta que acabamos de ver, pero requiere un nivel bastante más elevado. No obstante al crear aplicaciones, por ejemplo en Flash, el mismo programa genera el código Html necesario para su inserción en nuestra página web.
Veamos un ejemplo sencillo de como insertar un sonido. Este mismo ejemplo serviría para insertar un vídeo.
La presentación de los archivos de sonido y vídeo depende del navegador y del programa asociado a cada tipo de archivos, según esta configuración pueden salir unos controles en la misma página con los que detener o ejecutar el sonido o el vídeo o podría ejecutarse un programa externo.
La etiqueta <embed> no pertenece al standard de Html, pero funciona en los navegadores más comunes sin dificultad y su uso es más sencillo que el de <object>, y por este motivo lo explicaremos aquí
<embedsrc="sonido">
src
Aquí ponemos el nombre del archivo de sonido. Los formatos permitidos son los mismos que admite el reproductor de windows: secuencias MIDI (MID, RMI), archivos de audio (WAV, AU, MP3, etc), video (AVI, MOV, MP2, etc)
Atributos opcionales
autostart="false/true"
Indica si el sonido se reproducirá automáticamente cuando se carga la página o no. Si se omite el sonido se reproducirá automáticamente.
width="número" height="número"
Indican las dimensiones de los controles y con ello los controles que estarán disponibles. Si se omite, el usuario no podrá controlar el sonido o el video.
<embedsrc="simpsons.mid" width="46" height="26">
<embedsrc="simpsons.mid" width="70" height="46">
loop="True/False"
Indica si el sonido o video se repetirá indefinidamente
hspace="número" vspace="número"
Indica la distancia horizontal y vertical respectivamente a ambos lados de los controles
Veamos un ejemplo sencillo de como insertar un sonido. Este mismo ejemplo serviría para insertar un vídeo.
Guarda el archivo watermark.mid en tu carpeta de trabajo pulsando sobre él con el botón de la derecha y seleccionando Guardar destino como....
Abre el archivo agua.htm e inserta el archivo watermark.mid al principio sin especificar tamaño.
Guarda el archivo y ábrelo en el navegador para ver el resultado. Debe oirse el sonido de fondo sin que cambie la presentación de la página.
Vuelve a abrir el archivo agua.htm y especifica un tamaño de 80x50 píxels para el objeto.
Guarda el archivo y ábrelo en el navegador para ver el resultado. Ahora aparecerá un cuadro al principio de la página, con controles o sin ellos en función de tu configuración.
Hojas de estilo