July 01, 2008

Imagenes, parte 1





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

No comments: