Código HTML para insertar imágenes en weblogs

por María Luisa Santos
alternativa weblog

 

IMAGEN CENTRADA Y SEPARADA DEL TEXTO

<p align="center"><a href="http://www.enlace.com"><img src="http://direccióndelaimagen.jpg" border="0" alt="textoalternativo"></a></p>

 

Sustituir http://www.enlace.com por la dirección de la página web a la que queremos que la imagen dé enlace.

Sustituir http://direccióndelaimagen.jpg por la URL de la imagen, que siempre empezará por http:// y terminará por la extensión de archivo propia de la imagen (.gif .jpg .png).

Sustituir textoalternativo por el texto que aparecerá al pasar el cursor por encima de la imagen (al hacer rollover).

 

Ejemplo

En primer lugar me gustaría destacar el trabajo de XXX, quien publica casi diariamente una fotografía desde enero de 2003. De su trabajo fotográfico, lo que más me interesa es la simplicidad formal de sus imágenes.

alternativa

Cada fotografía consigue transmitir con claridad una idea, una sensación o reflexión de su autor. La sencillez se logra acercándose mucho a los objetos y personas fotografíados y proyectando en ellos una gran sensibilidad. ¡Excelente!

IMAGEN A LA IZQUIERDA Y RODEADA POR EL TEXTO

<p><a href="http://www.enlace.com"><img src="http://direccióndelaimagen.jpg" border="0" alt="textoalternativo" align="left" vspace="5" hspace="5"></a>

 

Sustituir http://www.enlace.com por la dirección de la página web a la que queremos que la imagen dé enlace.

Sustituir http://direccióndelaimagen.jpg por la URL de la imagen, que siempre empezará por http:// y terminará por la extensión de archivo propia de la imagen (.gif .jpg .png).

Sustituir textoalternativo por el texto que aparecerá al pasar el cursor por encima de la imagen (al hacer rollover). (No funciona a veces en Mozilla o Netscape).

vspace="5" y hspace="5" se refieren al espacio vertical (vspace) y al espacio horizontal (hspace) que quedará entre la imagen y el texto. Se mide en pixels. En este ejemplo se indican 5 pixels de espaciado tanto horizontal como vertical, pero esa cifra puede modificarse.

 

Ejemplo

Lula, el perro bloggerEn primer lugar me gustaría destacar el trabajo de XXX, quien publica casi diariamente una fotografía desde enero de 2003. De su trabajo fotográfico, lo que más me interesa es la simplicidad formal de sus imágenes. Cada fotografía consigue transmitir con claridad una idea, una sensación o reflexión de su autor.

IMAGEN A LA DERECHA Y RODEADA POR EL TEXTO
(alineado a la derecha)

<p align="right"><a href="http://www.enlace.com"><img src="http://direccióndelaimagen.jpg" border="0" alt="textoalternativo" align="right" vspace="5" hspace="5"></a>

 

Sustituir http://www.enlace.com por la dirección de la página web a la que queremos que la imagen dé enlace.

Sustituir http://direccióndelaimagen.jpg por la URL de la imagen, que siempre empezará por http:// y terminará por la extensión de archivo propia de la imagen (.gif .jpg .png).

Sustituir textoalternativo por el texto que aparecerá al pasar el cursor por encima de la imagen (al hacer rollover).

vspace="5" y hspace="5" se refieren al espacio vertical (vspace) y al espacio horizontal (hspace) que quedará entre la imagen y el texto. Se mide en pixels. En este ejemplo se indican 5 pixels de espaciado tanto horizontal como vertical, pero esa cifra puede modificarse.

 

Ejemplo

Lula, el perro bloggerEn primer lugar me gustaría destacar el trabajo de XXX, quien publica casi diariamente una fotografía desde enero de 2003. De su trabajo fotográfico (que no es el único), lo que más me interesa es la simplicidad formal de sus imágenes. Cada fotografía consigue transmitir con claridad una idea, una sensación o reflexión de su autor.

TAMAÑO DE LAS IMAGENES

Si deseas que la imagen se muestre con un tamaño distinto al que tiene en su ubicación original, puedes añadir en el código los comandos referidos a la anchura (width) y altura (height).

El código que se añade es:

width="nºpixels" height="nºpixels"

y se coloca exactamente delante del código border="0"

Como ejemplo, puedes ver cómo quedaría en el caso de una imagen centrada y separada del texto:

<p align="center"><a href="http://www.enlace.com"><img src="http://direccióndelaimagen.jpg" width="132" height="27" border="0" alt="textoalternativo"></a></p>

Ejemplo

En primer lugar me gustaría destacar el trabajo de XXX, quien publica casi diariamente una fotografía desde enero de 2003. De su trabajo fotográfico, lo que más me interesa es la simplicidad formal de sus imágenes.

alternativa

Cada fotografía consigue transmitir con claridad una idea, una sensación o reflexión de su autor. La sencillez se logra acercándose mucho a los objetos y personas fotografíados y proyectando en ellos una gran sensibilidad. ¡Excelente!

Creative Commons License
This work is licensed under a Creative Commons License.
Recursos en Internet para Comunicación
alternativa weblog