Insertar imágenes con el código HTML

Posteado por: danigorma en: 03 noviembre, 2008 - Lunes

En: HTML | Imágenes
¡Comentar!

Todos sabemos que una inmensa mayoría de páginas webs utilizan el código HTMl, ya hora el XHTML para ser creadas.
En éste blog espero poner poco a poco diferentes formas de utilizr el código, de momento muestro como introducir imágenes y cambiar algunos parámetros en ellas:

Insertar imágenes

Para empezar, el propio programa que utilizas suele darte la opción de incluir imágenes desde un botón del estilo: ”” o mediante un botón con las letras “img”, como ocurre en WordPress.
En algunos prográmas o webs, una vez pulsado este botón podrás seleccionar si añades imágenes desde el equipo donde estés trabajando o desde una página web de internet, en cuyo caso tendrás que copiar la URL de dicha imagen e insertarla en el cuadro de la dirección que te pide Blogger.

Aunque también puedes hacerlo de una forma manual, en cuyo caso tendrías que insertar el siguiente código: [IMG SRC="URL DE LA IMAGEN"].

Donde tendrías que cambiar los códigos [ y ] por <y> respectivamente.

Aquí dejamos la demostración, vamos a incluir la siguiente URL sacada de internet en una imagen: http://fabian.atomixblogs.vg/files/2007/07/concierto.jpg

Cambiar la alineación

Uno de los parámetros que podemos cambiar al insertar las imágenes es la alineación.

Para ello tendrémos que incluir el parámetro Align=”lugar”, que permite controlar la alineación de una imagen con respecto a una línea de texto. Los tres valores posibles son left, right, y middle.

left = izquierda ; right = derecha ; middle = centro.

Este valor se incluye detrás de las comillas que contienen la URL de la imagen:

[IMG SRC="URL DE LA IMAGEN" Align="left"]

Como en el caso anterior, se cambiarían los símbolos de los corchetes por los de “mayor qué” y “menor qué”, y después, cambiaríamos left por el parámetro que deseemos.

Aquí dejamos la demostración, vamos a incluir la siguiente URL sacada de internet en una imagen: http://haciendofotos.com/wp-content/uploads/concurso_foto_1.jpg

Alineación izquierda

Alineación derecha

Alineación centrada

Explicación con texto de la imagen

Esta es otra de las posibilidades que ofrece el código html, habría que incluir el parámetro Alt=”Texto”; entre comillas podremos escribir un texto que suplantará a esta imagen si no se carga, mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

Este valor se incluye detrás de las comillas que contienen la URL de la imagen: [IMG SRC="URL DE LA IMAGEN" Alt="Texto a mostrar"]
Como en los casos anteriores, se cambiarían los símbolos de los corchetes por los de “mayor qué” y “menor qué”, y después, ente comillas, pondríamos el texto que queramos que muestre la imagen.

Aquí dejamos la demostración, vamos a incluir la siguiente URL sacada de internet en una imagen: http://4.bp.blogspot.com/_ZeeLp9OkVRA/RoLElGAf1aI/AAAAAAAABLY/HJwbAUqf2A4/s1600/20051126125207-mono-pensador.jpg con el texto “Un mono pensador“

Mono pensador

Ancho y alto

Uno de los parámetros más importantes que podemos modificar en las imágenes es el alto y el ancho:

El ancho lo cambiamos con la etiqueta WIDTH=”cifra”; este atributo cambia el ancho de la imagen que queremos representar.
La altura la cambiamos con la etiqueta HEIGHT=”cifra”; este atributo cambia el ancho de la imagen que queremos representar.

Estas cifras que delimitan el ancho y el alto de la altura equivalen a los píxeles que ocupará la imagen.

¡ATENCIÓN! Hay que tener en cuenta, a la hora de modificar la altura y anchura que se mantenga la proporción alto-ancho.

Este valor se incluye detrás de las comillas que contienen la URL de la imagen: [IMG SRC="URL DE LA IMAGEN" Height="x" width="y"].

Como en los casos anteriores, se cambiarían los símbolos de los corchetes por los correspondientes, y después, pondríamos la modificación de la anchura o altura.

Aquí dejamos la demostración, vamos a incluir la siguiente URL sacada de internet en una imagen: http://www.lacoctelera.com/myfiles/lucas0123/Ghost.JPG primero modificando la anchura en 100 pixeles y después la altura en 100 píxeles.

Imágenes que enlazan a otras web

Podemos hacer que una imagen nos enlace a otra web poniendo un enlance normal, y dentro del campo del texto que habría que pinchar, poner la etiqueta de incrustar la imagen.

La etiqueta sería la siguiente: [a href="URL DE LA WEB A LA QUE ENLAZAMOS" target="blanmk"][IMG SRC="URL DE LA IMAGEN" ][/a]

Aquí dejamos la demostración, vamos a incluir la siguiente URL sacada de internet en una imagen: http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Mona_Lisa.jpg/250px-Mona_Lisa.jpg para enlazar con la siguiente web: http://es.wikipedia.org/wiki/Arte

Todos los parámetros en una iamgen

Si quisiesemos modificar todos los datos de una imagen, para ajustarla a la web, tendrías que incluir todas las etiquetas seguidas tras la URL de diha imagen.

[IMG SRC="URL DE LA IMAGEN" Align="middle" Alt="texto" WIDTH="valor" Height="valor"]

Como en los casos anteriores, se cambiarían los símbolos de los corchetes por los que corresponda, y después, pondríamos los valores deseados.

Aquí dejamos la demostración, vamos a incluir la siguiente URL sacada de internet en una imagen: http://www.colludo.de/images/Playmobil/Playmobil_Ritter.jpg.
Pondremos los siguientes parámetros:
Alineción centrada – Texto: Playmobil – Ancho: 200 – Alto: 200
Y la imagen nos va a dirigir a la siguiente página: http://www.playmobil.de/on/demandware.store/Sites-ES-Site