Menú

• HTML Básico
• Fondos de Pantalla

Enlaces

• Futbol Online

3.6. Imágenes (Image)

Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo gráfico mediante el atributo src (source).
Va dentro de la etiqueta:

3.6.1. Atributos para imágenes

Va dentro de la etiqueta:

3.6.1.1. alt

Dentro de las comillas de este atributo colocaremos una brevísima descripción de la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades. Se muestra al poner el cursor encima de la imagen. También se muestra en el recuadro que ocupa una imagen cuando no se carga.

3.6.1.2. height y width

Definen la altura y la anchura de la imagen. Es conveniente poner las dimensiones de la imagen para una carga cómoda. También que no se amplíe y disminuya dicho tamaño del real.

3.6.1.3. border

Definen el tamaño en píxeles del cuadro que rodea la imagen.

3.6.1.4. vspace y hspace

Sirven para indicar el espacio libre, en píxeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.

3.6.1.5. lowsrc

Para descargar primero una imagen de poco peso y mala resolución. Primero el navegador mira el lowsrc y la descarga, después ya carga la imagen del src que es la buena. Esto es útil para una primera carga rápida de la página.

3.6.1.6. align

3.6.1.6.1. Alinear imagen

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>.

Va dentro de las etiquetas:

3.6.1.6.2. Alinear y justificar imagen para texto

El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en el caso de darle los valores left o right, justificar la imagen del lado que deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma embebemos nuestras imágenes dentro del texto de una manera sencilla.

Va dentro de la etiqueta:

3.6.1.6.3. clear

Si en algún momento deseásemos dejar de rellenar ese espacio lateral, podemos pasar a una zona libre introduciendo un salto de línea <br> dentro del cual añadiremos el atributo clear.
Va dentro de la etiqueta:

Resultado 1:

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Ejemplo 2:

<img src="image/castillo.jpg" align="left"><img src="image/cervantes.png" align="right">En un lugar de la Mancha, <br clear="right">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

<img src="image/cervantes.png" align="left"><img src="image/castillo.jpg" align="right">En un lugar de la Mancha, <br clear="right">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado 2:

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Ejemplo 3:

<img src="image/castillo.jpg" align="left"><img src="image/cervantes.png" align="right">En un lugar de la Mancha, <br clear="all">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

<img src="image/cervantes.png" align="left"><img src="image/castillo.jpg" align="right">En un lugar de la Mancha, <br clear="all">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado 3:

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

3.6.1.6.4. top

Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una imagen más alta, ambas imágenes presentaran el borde superior a la misma altura.

Va dentro de la etiqueta:

<img>

Ejemplo:

<img src="image/cervantes.png" align="top">En un lugar de la Mancha, <img src="image/eu.gif" align="top">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

3.6.1.6.5. bottom

Ajusta el bajo de la imagen al texto.

Va dentro de la etiqueta:

<img>

Ejemplo:

<img src="image/cervantes.png" align="bottom">En un lugar de la Mancha, <img src="image/eu.gif" align="bottom">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

3.6.1.6.6. absbottom

Colocará el borde inferior de la imagen a nivel del elemento más bajo de la línea.

Va dentro de la etiqueta:

<img>

Ejemplo:

<img src="image/cervantes.png" align="Absbottom">En un lugar de la Mancha, <img src="image/eu.gif" align="Absbottom">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

3.6.1.6.7. middle

Hace coincidir la base de la línea de texto con el medio vertical de la imagen.

Va dentro de la etiqueta:

<img>

Ejemplo:

<img src="image/cervantes.png" align="middle">En un lugar de la Mancha, <img src="image/eu.gif" align="middle">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

3.6.1.6.8. absmiddle

Ajusta la imagen al medio absoluto de la línea.

Va dentro de la etiqueta:

<img>

Ejemplo:

<img src="image/cervantes.png" align="absmiddle">En un lugar de la Mancha, <img src="image/eu.gif" align="absmiddle">de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Resultado:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

3.6.2. Utilizar imágenes como enlaces

Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista la estructura de los enlaces podemos muy fácilmente adivinar el tipo de código necesario:

<a href="archivo.html"><img src="imagen.jpg"></a>

Está delimitado por las etiquetas:

<a href=""><img src=""></a>

Ejemplo:

<a href="http://ec.europa.eu/index_es.htm"><img src="image/eu.gif" border="0"></a>

Resultado:

« 3.5. Enlaces

3.7. Tablas »