Logo

Otras propiedades de la imagen en HTML

Veamos otros atributos de la imagen como su alineación. Aquí veremos como alinear una imagen dentro de la página web: centrada, colocarla a la derecha o la izquierda, etc.

Como hemos visto anteriormente el atributo align nos permitía alinear el texto a la derecha, a la izquierda o centrado. Lo mismo le podemos aplicar a las imágenes, este atributo no es exclusivo del texto ni de las etiquetas <p> o <div>, sino que puede ser empleado en la <img> también.

Así si quisiéramos que una imagen apareciera centrada en la página web, tendríamos que usar el siguiente código:

<div align=”center”><img src=”logo.gif”></div>

Pero acabamos de decir que la etiqueta <img> también acepta el atributo align. En este caso el resultado es diferente, lo que conseguimos con el empleo de el atributo align en la etiqueta <img>, es el poder alinear la imagen a la izquierda o derecha y rellenar con texto el lado contrario a esta. Con ello acoplamos la imagen dentro de un texto, dándole así un aspecto más atractivo al texto que la rodea.

El código que debemos utilizar para ello sería:

<p>

<img src=”imagen.gif” align=”right”>Texto que rodeara la imagen a la izquierda de esta.</p>

Y lo mismo si quisiéramos alinear la imagen a la izquierda y rellenar con texto la derecha, cambiando en la etiqueta <img> el atributo align de right a left.

Otro efecto que podemos conseguir es que salte verticalmente el texto hasta encontrar el lateral izquierdo libre, el código sería:

<br clear=”left”>

Saltara hasta que encuentre el lateral derecho libre, sería:

<br clear=”right”> y hasta que encuentre ambos laterales libres:

<br clear=”all”>

Otros valores que puede tomar el atributo align son:

El valor top nos ajusta la imagen a la parte más alta de la línea, de forma que si existe otra imagen más alta, ambas presentarán el borde superior a la misma altura.

El valor botton ajunta el bajo de la imagen al texto.

El valor absbotton coloca el borde inferior de la imagen a nivel del elemento más bajo de la línea.

El valor middle hace que coincidan la línea de texto con el la mitad vertical de la imagen.

El valor absmiddle ajusta la imagen al medio absoluto de la línea.

Todos esto que es complicado de explicar ser verá muchísimo mejor con un poco más de práctica.

 

Siguiente Tema: Tipos de formatos de imagen en las páginas web

PÁGINA PRINCIPAL DEL CURSO CREACIÓN DE PÁGINAS WEB EN HTML