informaticaPC

Tutorial de HTML

Imágenes

Insertar imágenes

Para insertar una imagen en la página web usaremos la etiqueta <img>:


<img
    align: alineación horizontal de la imagen (bottom | left | middle | right | top).

    alt: muestra un texto descriptivo en lugar de la imagen si ésta no ha sido encontrada, o bien en caso de
    navegadores web en modo de sólo texto.

    border: ancho del borde de la imagen (en píxels).

    height: indica el alto de la imagen (en píxels). Si no se indica width, se estirará proporcionalmente a
    lo ancho.

    hspace: espacio horizontal en píxels entre la imagen y el texto que la rodea.

    longdesc: descripción larga de la imagen. Utilizada como complemento del atributo alt.

    src: ruta y/o nombre y extensión, o bien URL de la imagen a mostrar.

    usemap: indica que la imagen será usada en un mapa de imagen definido con la etiqueta <map>.

    vspace: espacio vertical en píxels entre la imagen y el texto que la rodea.

    width: indica  el  ancho  de  la  imagen  (en  píxels).  Si  no  se  indica  height,  ésta se estirará
    proporcionalmente a lo alto.
/>

Ejemplo:

<html>
    <head>
        <title>Mi primera página WEB</title>
    </head>
    <body>
        <img src="email.jpg" alt="Enviar correo electrónico"/>
        <img src="imagenes/email.jpg" alt="Enviar correo electrónico"/>
        <img src="http://dominio.com/images/email.jpg" alt="Enviar correo electrónico"/>
    </body>
</html>

Según el ejemplo, en la primera imagen se indica que el archivo 'email.jpg' se encuentra en el mismo directorio que la página web, en la segunda que se halla en el subdirectorio 'images', y en la tercera en otro servidor (aunque también puede usarse este método si se encuentra en el propio servidor).

Usando el atributo alt se establece un texto alternativo que será mostrado en lugar de la imagen, si ésta no es encontrada.

Otros atributos disponibles:

<html>
    <head>
        <title>Mi primera página WEB: Imágenes</title>
    </head>
    <body>
        <img src="email.jpg" width="400" height="300" border="3"/>
    </body>
</html>

Descargar ejemplo

Con los atributos width y height indicamos el tamaño en píxels de la imagen. Ten en cuenta que si las dimensiones indicadas son mayores a las de la imagen, la imagen perderá calidad, así como que puede quedar desproporcionada.

En el atributo border se indica el ancho en píxels del borde la imagen (según el ejemplo no tendrá borde alguno).

Información

El atributo border se encuentra desactualizado en HTML 4: se recomienda usar Hojas de Estilos CSS en su lugar.

Crear un mapa de imagen

Los mapas de imagen se usan para definir áreas de una imagen, de forma que al hacer clic en ellas se realice una determinada acción (normalmente abrir una página web).

Para crear mapas de imagen se usa la etiqueta <map>, entre cuya apertura y cierre escribiremos tantas etiquetas <area> como áreas de la imagen queramos definir. Sus atributos más importantes son:


<map
    name: nombre del mapa de imagen, que deberá indicarse en el atributo usemap de <img>.
>
</map>


<area
    alt: muestra un texto descriptivo en lugar de la imagen si ésta no ha sido encontrada, o bien en caso de
    navegadores web en modo de sólo texto.

    coords: coordenadas de la imagen en las que se encuentra limitada el área.

    href: URL que se cargará al hacer clic en el área definida. Si no se cargará ninguna debe usarse el
    atributo nohref.

    nohref: indica que no se cargará ninguna URL al hacer clic en el área especificada.

    shape: tipo de área que se desea definir: rect, circle, poly o default.

    tabindex: define un orden de tabulación para el área de la imagen.

    target: especifica dónde se cargará la URL: _blank (en una pestaña o ventana nueva), _parent (en el frame o marco que contiene al actual),  _self (en el frame actual) o _top (en la ventana principal del navegador web).
>
</area>

Ejemplo:

<html>
    <head>
        <title>Mi primera página WEB: Mapa de imagen</title>
    </head>
    <body>
        <map id="mapaSuscripcion" name="mapaSuscripcion">
            <area shape="rect" coords="44,63,111,129"  href="http://www.facebook.com/pages/Aprenderinformatica/124212020947403" alt="Facebook"  />
            <area shape="rect" coords="125,63,191,130" href="http://feeds.feedburner.com/informaticapc-com" alt="RSS"  />
            <area shape="rect" coords="207,62,273,130" href="http://twitter.com/ApInf" alt="Twitter"  />
            <area shape="rect" coords="288,65,353,129" href="http://www.youtube.com/user/AprInformatica/" alt="Youtube"  />
        </map>

        <img id="img1" name="img1" src="imagen.jpg" alt="Síguenos en..." border="0" usemap="#mapaSuscripcion" />
    </body>
</html>

Descargar ejemplo

A continuación puedes ver una muestra de su funcionamiento:

Facebook RSS Twitter Youtube

Mapa de imagen

Información

Dado que es laborioso el establecer las coordenadas de un mapa de imagen, es recomendable usar algún programa gratis que genere el código HTML necesario, como por ejemplo X-Map (en inglés pero muy sencillo de usar).

Primera página Anterior Anterior Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso