Imagenes (parte 2) e hípervinculos

Read more!

Otro de los atributos que pueden asociarse a las imagenes en nuestras entradas es la de servir como hípervinculos, no sólo al servidor donde se encuentra hospedada la imagen, sino a cualquier sitio o archivo, relacionado o no a la propia imagen

Recordemos entonces la etiqueta html para crear un hípervinculo:

<a href=""></a>

entre los parentesis colocaremos el hípervinculo a la página o archivo que deseeamos destacar en nuestra entrada

<a href="dirección de la página o archivo">Texto con el que deseamos destacar el hípervinculo</a>

Para que el hípervinculo aparezca asociado a una imagén, sólo debemos de colocar la etiqueta de imagen entre la etiqueta de hípervinculo en vez de colocar texto,por lo que nuestra etiqueta html será la siguiente:

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

La imagen en este caso se dirige a un sitio o página cualquiera en Internet:

<a href="http://www.warhol.org/"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg"></a>



Aún cuando ciertos servicios de blogging nos permiten elegir la forma en que los vinculos aparecen en nuetras entradas, en caso que nuestra plantilla o servicio enmarque nuestra imagen con un borde de color azul (o el color especificado para cualquier hípervinculo).

Podemos eliminar dicho borde, o cambiar su tamaño alterando la etiqueta de la imagen de la siguiente forma:

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

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

En el caso de nuestro blog, los bordes no aparecen aún cuando se indique,debido a la plantilla utilizada, pero se puede ver el resultado de las etiquetas en esta página.

Una imagen como hípervinculo, tambíén puede presentar una etiqueta que permita abrir la dirección o el archivo destino, en una nueva ventana del navegador (o en otra pestaña, dependiendo de la versión de nuestro navegador).

Simplemente debemos agregar a nuestra etiqueta de hípervinculo, el atributo target="_blank", despues de la dirección o archivo destino:

<a href="" target="_blank"><img src="" border=0></a>

<a href="http://www.warhol.org/" target="_blank"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg"></a>



Por último, podemos agregar una leyenda descriptiva, la cual sólo aparece al colocar el cursor sobre la imagen, en la etiqueta de imagen, agregamos el atributo alt="", y el texto descriptivo puede ser el nombre que otorgemos a la imagen, el título del sitio o el archivo destino del hípervinculo, etc.

<a href="" target="_blank"><img src="" border=0 alt="Warhol Museum"></a>

<a href="http://www.warhol.org/" target="_blank"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg" alt="Warhol Museum"></a>



por Elliot Ibáñez

Imagenes, parte 1

Read more!

Varias plataformas de blogs presentan un problema común para el usuario, la forma en que las imagenes aparecen respecto al texto que estamos por publicar. En el caso de blogger.com, las opciones que se presentan al cargar imagenes dentro de nuestra cuenta son a los lados o alrededor del texto a publicar.

Pero si insertamos imagenes que se encuentra ya sea en algún sitio de internet (aunque este caso debe de evitarse ya que va en contra de la etiqueta en internet utilizar el trafico ajeno), o en algun servicio gratuito de hospedaje de archivos o imagenes,como photobucket, flickr, imageshack, etc. Podemos colocar la imagen independiente del texto, además de localizarla al centro, derecha o izuierda de nuestra página.

Otro aspecto positivo de tener nuestras imagenes en un servidor externo al de blogger es que estas van a aparecer en el tamaño real que estas tienen, y no van a cambiar su apariencia de acuerdo a los tres tamaños que blogger identifica al cargar una imagen en sus servidores, deformandola y cambiando su apariencia.

Primero debemos de conocer la etiqueta para publicar una imagen a partir del código HTML, el cual construye la mayoria de las páginas en Internet:

<img src="">

Entre las comillas vamos a colocar la dirección que nuestro navegador muestra al ver la imagen, esta siempre debe de comenzar con el texto: http://

<img src="dirección donde nuestra imagen esta hospedada">

si nuestra imagen esta por ejemplo en nuestra cuenta de photobucket, al colocar la dirección: http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg, en nuestra etiqueta,

<img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg">

aparecera de esta forma en nuestra entrada:



Por "default", las imagenes se publican alineandolas a la izquierda de la página, como en el caso anterior, pero agregando un nuevo atributo a nuestra etiqueta podemos cargar la imagen a la derecha o alcentro de la página.

Para colocar la imagen a la derecha:

<p align="right"><img src=""></p>

<p align="right"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg"></p>

Para colocar la imagen al centro de la página debemos encerrar la etiqueta de la imagen en una etiqueta que centre el contenido:

<p align="center"><img src=""></p>

<p align="center"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg"></p>

Utilizamos el atributo <p align=""> para evitar conflictos con el texto, y además porque la etiqueta de imagen no acepta el atributo original para centrar escribiendo al final de la etiqueta:

<img src="" align="center">

por Elliot Ibáñez