teCno weB Londres

Código HTML para insertar imágenes

Posteado por: alexjemo en: marzo 10, 2010

en esta página se explica como insertar imagenes a nuestros documentos html, tener muy en cuenta que para los ejemplos descritos hay que realizar ciertos cambios y parametros preestablecidos. estos són:

  • las imagenes siempre deben estar donde se encuentra la plantilla html, si se tienen guardadas las imagenes en una carpeta ejem. mis imagenes, o tener la plantilla ahí mismo o pasar las imagenes a la carpeta donde esta la plantilla.
  • enlace es hacia que página queremos ir cuando le damos clic a la imagen ejem. http://www.google.com
  • la direccióndelaimagen es la imagen como tal ejem. imagen.jpg no olvidar la extensión
  • el texto alternativo es cuando el navegador no encuentra la imagen y por ello te muestra un alternativo frente a la imagen, esto tambien se utiliza mientras se recargan las imagenes o en navegadores básicos como los de celular que no muestra imagenes por ahorro de transferencia
  • en el ejemplo 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.

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>

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>

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>

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).

<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>

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!

Advertisement

Deja un comentario

Fill in your details below or click an icon to log in:

Logo de WordPress.com

You are commenting using your WordPress.com account. Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. Log Out / Cambiar )

Connecting to %s

Seguir

Get every new post delivered to your Inbox.