Como todos sabemos que para incluir una imagen se utiliza la etiqueta <img>.
Ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<img src="Url-de-tu-imagen" alt="Texto" border="3" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Pero si observaron el ejemplo, la etiqueta cuenta con distintos parámetros:
src="Url-de-tu-imagen" |indica la dirección de la imagen
alt="Texto" |muestra el texto al pasar el cursor sobre la imagen
border="2" |establece un borde alrededor de la imagen
align="left" |especifica la alineación de la imagen
Estos son algunos valores:
left: alinea la imagen hacia la izquierda con texto hacia la derecha
right: alinea la imagen hacia la derecha con texto hacia la izquierda
top: alinea texto hacia arriba respecto de la imagen
bottom: alinea texto hacia abajo respecto de la imagen
absbottom: alinea texto hacia abajo mas junto respecto de la imagen
middle: alinea texto en el medio de la imagen
absmiddle: alinea texto aun mas en el medio de la imagen
height="200" |establece la altura de la imagen
width="400" |establece la anchura de la imagen
hspace="5" |indica el espacio horizontal entre la imagen y el texto
vspace="5" |indica el espacio vertical entre la imagen y el texto
Ahora si le incluimos un poco de CSS:
Veremos una imagen con un borde distinto:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<img style="border:3px inset #FF8000;" src="Url-de-tu-imagen" alt="Texto" border="0" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Saliéndonos un poco de la <img> y colocando una imagen dentro de un <div>, veremos un texto sobre una imagen:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
O que tal una imagen sobre otra y otra:
<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:100px; width:300px; margin:45px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:50px; width:250px; margin:20px;"></div></div></div>
Y como vez, también le podrás poner enlaces como tu quieras:
<a href="Url-de-tu-sitio">Abrir aqui mismo</a>
<a href="Url-de-tu-sitio" target="_blank">Abrir en una ventana nueva</a>
La imagen que se muestra en los ejemplos pertenece a Sareni
