Imágenes HTML

Hola a todos, hoy os explicare como insertar imágenes en un documento HTML.

Las imágenes son una parte muy importante de una pagina web, ya que dará al documento mas estilo y personalidad.

Para insertar imagenes en un documento HTML, usamos la etiqueta <img>, es una etiqueta autocontenida, es decir, que al final de la etiqueta de apertura la cerramos con />.

Esta etiqueta tiene varios atributos, todos los valores deberan ir entre comillas:

  • src: indica la URL de la imagen. Sin este atributo no se podrá mostrar la imagen, esta URL se puede usar con una ruta relativa o absoluta.
  • alt: descripción corta de la imagen. Es útil para el SEO (Search Engine Optimization). El texto que se ponga se vera al pasar el ratón por la imagen.
  • name: nombre del elemento imagen. Se puede usar para Javascript.
  • height: indica la altura con la que se debe mostrar la imagen. Podemos usar cualquier unidad medida.
  • width: indica la anchura con la que se debe mostrar la imagen. Podemos usar cualquier unidad medida.

Veamos un ejemplo simple, una imagen con una descripción corta:

<img src=”http://www.discoduroderoer.es/wp-content/uploads/2013/01/logo-discoduroderoer.jpg” alt=”logo de discoduroderoer” />

Así quedaría:

logo discoduroderoer

La ruta, en este caso, es absoluta de esta web, recuerda que se puede usar otras rutas.

Veamos el mismo ejemplo, pero con una anchura y altura que nosotros deseemos.

<img src=”http://www.discoduroderoer.es/wp-content/uploads/2013/01/logo-discoduroderoer.jpg” alt=”logo de discoduroderoer” height=”500″ width=”300″ />

Así es como quedaría:

logo discoduroderoer

Si os dais cuenta, en los atributos height y width no hemos puesto la unidad de medida, si no ponemos nada se supone que la unidad de medida es el pixel.

Si ponemos solo height, el navegador calcula la anchura necesaria para que se mantenga la proporción de la imagen. De igual forma pasa si solo ponemos width.

Espero que os sea de ayuda.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *