HTML - Imágenes

  »   HTML  »   Tutorial HTML - Imágenes

Las imágenes son muy importantes en una página web. Por lo tanto es conveniente utilizarlas de manera correcta. Inserta imágenes usando la etiqueta <img/>.

html<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg"  />

Demo

imagen html de ejemplo

"src" es el acceso directo para "source". Este atributo es usado para indicar la ubicación de la foto. Como se explicó en el Tutorial de links puedes usar cualquier URL para indicar el archivo.

Enlace localDescripción
src="image.jpg"la imagen está ubicada al mismo nivel del archivo .html
src="../image.jpg"la imagen está ubicada en un nivel previo al archivo .html
src="../img/image.jpg"la imagen está ubicada en la carpeta "img" en un nivel previo al archivo .html

Tambien puedes usar la URL completa. Por ejemplo:

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

El modelo URL no es recomendable porque en caso de que cambies de dominio también tendrás que cambiar las direcciones de todas las fotos. O si la imagen está guardada en otro dominio usa scr="http://www.domain.com/image.jpg".

El hecho de almacenar la imagen en un servidor alternativo, representa una gran ventaja si el espacio proveído para tu dominio es limitado.

HTML - atributo "alternative" para imágenes

El atributo "alt" es usado para visualizar un texto en vez de una imagen en caso de que tu navegador, por alguna razón, no puede mostrar la imagen o cuando un usuario ha desactivado la opción "Show Image".

html<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg"  />

Demo

imagen html de ejemplo

HTML - la altura y el ancho de una imagen

Para determinar la altura y el ancho de una imagen se usan los atributos height y width. Lógico, cierto!

html<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

imagen html de ejemplo

Tambien puedes definir el tamaño de una imagen usando CSS.

HTML - alineación horizontal y vertical de una imagen

Para esto utilizaremos los atributos align y valign. Las opciones ofrecidas por estos atributos son:

Align (horizontal)

  • right (derecha)
  • left (izquierda)
  • center (centro)

Valigh (vertical)

  • top (arriba)
  • bottom (abajo)
  • center (centro)
html<img alt="imagen html de ejemplo" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

imagen html de ejemplo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - Usar imágenes como links

Esto es sólo una introducción, hablaremos mas sobre esto en el siguiente tutorial. Las imágenes son bastante útiles como links y pueden ser construidas como a continuación.

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

imagen html de ejemplo

La imagen de arriba enviará a la página de inicio. Puedes cambiarla hacia tu página de inicio y así tendrás una imagen con un link hacia tu página de inicio. HTML - Thumbnails (Miniaturas)

Los Thumbnails son versiones miniatura (menos kilobytes) de imágenes que tienen una calidad superior. Para crear una miniatura, guarda la imagen en una calidad mas baja a la original. Entonces vincula esta pequeña imagen a la imagen original de alta calidad.

html<a href="/assets_tutorials/img/image.jpg"  title="Html Enlaces - imagen html de ejemplo">
	<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo

imagen html de ejemplo