Cómo Empezar

Parrafos

Colores

Imágenes

Lista de Definiciones

Tablas

Anclas

Insertar Elementos Multimedia

Formularios

Frames

Iframes

HTML

Imágenes

Una de las utilidades principales del HTML es la posibilidad de incluir imágenes en un documento, una imagen puede incluirse en cualquier punto del documento, y alinearse de muchas formas sobre el texto o imágenes circundantes.

En un documento HTML se puede incluir imágenes en formato GIF, JPG o PNG.

La instrucción básica para incluir imágenes en un documento es:

<IMG SRC="URL de la Imagen">

La etiqueta IMG (image =imagen) es una de las pocas que no necesita ser ser cerrada con una etiqueta de cierre. En la URL indicaremos la dirección en la que se encuentra el fichero de la imagen, se podrá expresar de forma relativa o absoluta. Hay que tener cuidado de que la URL sea el nombre exacto de la imagen, respetando si las letras son mayúsculas o minúsculas, tanto en el nombre de la imagen como en la extensión. Se pueden usar imágenes sin extensión, pues es el navegador quien se encarga de interpretarlas.

La etiqueta IMG Puede presentar los siguientes atributos:

<IMG SRC="URL de la Imagen" ALT="Texto alternativo" ALIGN="Alineación de la imagen" BORDER="Tamaño del borde" HEIGHT="Altura" WIDTH="Ancho" HSPACE="Margen horizontal" VSPACE="Margen vertical" >

ALT - Muestra un texto alternativo si la imagen no pudo mostrarse. Se usaba antiguamente en los navegadores que no podían cargar imágenes. En la actualidad se utiliza para generar un bocadillo de texto cuando uno coloca el cursor sobre la imágen. Este bocadillo es muy útil cuando la imágen se usa como vínculo, de manera de mostra un texto que describa a qué nos conecta la imágen.

ALIGN=" TOP ó MIDDLE ó BOTTOM" - Indica como se alinea la próxima frase del texto con respecto a la imagen, con TOP indicamos la parte alta de la imagen, MIDDLE el punto medio y BOTTOM la última línea de la imagen. Solo se alinea la primera frase, el resto se mostrará debajo de la imagen.

ALIGN=" LEFT ó RIGHT" - Indica que la imagen se inserta dentro del texto a la izquierda, LEFT, o a la derecha, RIGHT.

WIDTH=n ó n% - HEIGHT=n ó n% - Indica el tamaño de la imagen, tanto el alto, HEIGHT, como el ancho, WIDTH. Se pueden especificar en valor en pixels como en porcentaje con respecto al tamaño de la ventana. Si se especifica sólo uno de estos atributo (WIDTH o HEIGHT) en navegador calcula la dimensión que no se ha especificado para hacer que la imagen mantenga las proporciones del original. Especificando ambos podemos jugar y deformar la imagen.

BORDER=n - Indica el tamaño del borde cuando la imagen se usa como hipervínculo. Si se indica BORDER=0 no se mostrará este borde.

HSPACE=n ó n% - VSPACE=n ó n% - Indica por separado la separación horizontal - HSPACE - y vertical - VSPACE - que presenta la imagen respecto al texto o imágenes que las circundan.

Imagen de Fondo en un Documento

Para hacer que una imágen se vea cómo fondo de un documento Web, especificamos la imagen de fondo en la etiqueta BODY usando el atributo background (fondo) de la siguiente manera:

<body background="URL de la Imagen">

Si la imagen es pequeña el navegador la repetirá como mosaico llenado todo el fondo del documento.

En el caso de que el contenido desborde la pantalla y se activen las barras de dezpalzamiento de la ventana (scroll), el fondo se movera junto con todo el contenido del documento. Si queremos evitar esto y hacer que el fondo quede fijo podemos especificar el atributo BGPROPRETIES con el valor FIXED:

<body background="URL de la Imagen" bgproperties="fixed">

Así conseguiremos que el fondo quede fijo cuando desplacemos el contenido del documento con las barras de scroll, dándo un "aire" tridimensional al nuestro documento web.

jueves 15 de noviembre de 2018