Cuando mediante el editor de Blogger, insertamos una imagen en una entrada, el código en HTML correspondiente tiene para Internet Explorer la forma
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSUUDF6uLz6MQAslKDlSKDFTNgN_6_8yAkgymEiQFTwuTBNwQpaHQZusHQY1NKVFtgoQMUn833ymzzBjxaYMS-uobzM2Azrh4hvz2-r9blSHelnmH3JhTLA-RrOuKktIKAmZ1HfKkvqVcl/s1600-r/edificios.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCmQVXl5TcEsYb-AdEkBATwJKUFt8l3I2BSWQ5739LP2mu3VAkdMzIGOf-Tg9JZWIbi0uaB2DzfxWaEB9uU45N9heggv-RQq3LkzVyLIxgBe3MJp66YW8UXru1vzXUTx0CFegA8FIXNVr/s320/edificios.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5139434504243661986" /></a>
Vamos a intentar explicar la utilidad de cada uno de los elementos y atributos que se ven en el código.Si tenemos en cuenta que las direcciones de las imágenes Blogger son bastante farragosas, podemos simplificar todo este mogollón de letras de la siguiente manera:
<a href="URLImagenOriginal"><img style="ConfiguraciónImagen" src="URLImagenTamañoMedio" alt="" id="ClaveInternaBlogger" border="0" /></a>
Ahora es mucho más fácil ver la estructura del enlace, que no es ni más ni menos que
<a href="URLDelEnlace">Lo que se verá</a>
Esta parte sirve para generar un enlace a otra dirección web. Lo que haya entre las dos etiquetas <a href...> y </a>, es lo que verán los usuarios de la web dónde se ponga. En este ejemplo, lo que hay en medio es el código correspondiente para mostrar una imagen.
Este código para la imagen es
<img src="URLDeLaImagen"></img> y en concreto el más utilizado
<img src="URLDeLaImagen"/>
Esta instrucción permite mostrar una imagen alojada en una dirección URL.
Como hemos visto, tenemos un código incrustado (anidado) dentro de otro. Para sólo mostrar una imagen, se puede quitar perfectamente la parte del enlace <a href="URLDelEnlace"> ... </a>, pero suele convenir enlazar la imagen con la de su original, que es lo que hace Blogger por defecto. También es frecuente enlazar en la imagen con otra dirección relacionada con la propia imagen o el texto que la acompaña.
La etiqueta <img> tiene, como es natural, una serie de atributos. En el ejemplo se pueden ver los siguientes:
style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;"
Para configurar la ubicación de la imagen, sus márgenes y la apariencia del cursor al pasar por encima de la imagen, mediante comandos de CSS. Aquí se podría incorporar configuración del borde de la imagen, según se explico en la entrada Borde imágenes.
border="0"
Código HTML que define el tamaño en pixels del cuadro que rodea la imagen. En este caso 0, sin borde.
id="BLOGGER_PHOTO_ID_5139434504243661986"
Esta es una identificación interna que utiliza Blogger para las imágenes que
alt=""
Dentro de las comillas de este atributo se coloca una breve descripción de la imagen. En este caso en concreto, no se ha definido ningún texto.
Tiene además otras utilidades, como puede ser el que esta descripcion es la que se mostrará mientras no se termina la carga de la imagen. Algunas aplicaciones para discapacitados también la utilizan.
Por último e imprescindible en el caso de que la imagen sirva de enlace, el texto aquí escrito es el que se mostrará al pasar el puntero por encima de la imagen. En Firefox, esta utilidad es soportada por title="", complementaria de alt.
Además de las nombradas, existen otras más como:
HEIGHT y WIDTH: Definen la altura y anchura respectivamente de la imagen en pixels.
VSPACE y HSPACE: Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.
LOWSRC: Indicamos un archivo de la imagen de baja resolución. Primero se descarga ést y posteriormente la de resolución normal, que se supone tardará más en cargar. Este atributo está en desuso.
Como reza el subtítulo de este blog, pretendemos ser una pequeña guía de Blogger Para Torpes. Hay muchas cosas de CSS y HTML que desconocemos cuando empezamos a dar nuestros pasos por este mundillo de los blogs y para que otr@s no sufran tanto como lo hemos hecho nosotros buscanco soluciones, aquí estamos.
<a href="URLDelEnlace">Lo que se verá</a>
Esta parte sirve para generar un enlace a otra dirección web. Lo que haya entre las dos etiquetas <a href...> y </a>, es lo que verán los usuarios de la web dónde se ponga. En este ejemplo, lo que hay en medio es el código correspondiente para mostrar una imagen.
Este código para la imagen es
<img src="URLDeLaImagen"></img> y en concreto el más utilizado
<img src="URLDeLaImagen"/>
Esta instrucción permite mostrar una imagen alojada en una dirección URL.
Como hemos visto, tenemos un código incrustado (anidado) dentro de otro. Para sólo mostrar una imagen, se puede quitar perfectamente la parte del enlace <a href="URLDelEnlace"> ... </a>, pero suele convenir enlazar la imagen con la de su original, que es lo que hace Blogger por defecto. También es frecuente enlazar en la imagen con otra dirección relacionada con la propia imagen o el texto que la acompaña.
La etiqueta <img> tiene, como es natural, una serie de atributos. En el ejemplo se pueden ver los siguientes:
style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;"
Para configurar la ubicación de la imagen, sus márgenes y la apariencia del cursor al pasar por encima de la imagen, mediante comandos de CSS. Aquí se podría incorporar configuración del borde de la imagen, según se explico en la entrada Borde imágenes.
border="0"
Código HTML que define el tamaño en pixels del cuadro que rodea la imagen. En este caso 0, sin borde.
id="BLOGGER_PHOTO_ID_5139434504243661986"
Esta es una identificación interna que utiliza Blogger para las imágenes que
alt=""
Dentro de las comillas de este atributo se coloca una breve descripción de la imagen. En este caso en concreto, no se ha definido ningún texto.
Tiene además otras utilidades, como puede ser el que esta descripcion es la que se mostrará mientras no se termina la carga de la imagen. Algunas aplicaciones para discapacitados también la utilizan.
Por último e imprescindible en el caso de que la imagen sirva de enlace, el texto aquí escrito es el que se mostrará al pasar el puntero por encima de la imagen. En Firefox, esta utilidad es soportada por title="", complementaria de alt.
Además de las nombradas, existen otras más como:
HEIGHT y WIDTH: Definen la altura y anchura respectivamente de la imagen en pixels.
VSPACE y HSPACE: Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.
LOWSRC: Indicamos un archivo de la imagen de baja resolución. Primero se descarga ést y posteriormente la de resolución normal, que se supone tardará más en cargar. Este atributo está en desuso.
Como reza el subtítulo de este blog, pretendemos ser una pequeña guía de Blogger Para Torpes. Hay muchas cosas de CSS y HTML que desconocemos cuando empezamos a dar nuestros pasos por este mundillo de los blogs y para que otr@s no sufran tanto como lo hemos hecho nosotros buscanco soluciones, aquí estamos.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Estas echo un as
ResponderEliminarComo haces para que cuando apoyes el puntero en "algo" aparezca el cuadro amarillo?
ResponderEliminarComo este: http://1.bp.blogspot.com/_m9myEUCycrI/TJS8-HV-iUI/AAAAAAAAAcI/2IBRh_yuzCA/s1600/cuadroama.png
Facundo, con un comentario es suficiente. He visto los tres y ya te contesté en el primero... :)
ResponderEliminar