Cómo insertar una imagen en HTML

Es momento de aprender a insertar imágenes en HTML, conozcamos cuál es la etiqueta que le corresponde y cuáles son los atributos que podemos emplear para definir sus características y adecuarla en una página HTML, además aprenderemos a insertar desde una URL y también desde una carpeta, donde se encuentra el documento HTML. De esta manera agregaremos imágenes en nuestras páginas.

Cómo insertar Imágenes en HTML

Poner o Insertar una imagen en HTML es muy sencillo, simplemente debemos indicar que el elemento es una imagen mediante la etiqueta <img/> y cuál es el archivo o dónde esta ubicado, para que sea mostrado en el navegador, veamos cómo ponerlas.

Etiqueta <img/>

Utilizaremos la etiqueta <img/> para insertar imágenes, a diferencia de otras etiquetas, <img/> no tiene una etiqueta de cierre, pero si atributos.

Atributo src

Para indicar la ubicación o dirección de la imagen, utilizaremos el atributo src, la imagen puede estar almacenada en la misma carpeta que el documento HTML o también podemos agregar la imagen desde una dirección URL, el código se vería de la siguiente manera:

<img src="URL o nombre del archivo"/>

Insertar imagen en HTML desde una carpeta

Para insertar una imagen que esté almacenada en la misma carpeta que nuestro documento HTML, solo colocaremos su nombre y extensión en el valor del atributo src de la siguiente manera:

Ejemplo para insertar desde carpeta:

<img src="koala.jpg"/>

Resultado:

Insertar imagen HTML desde URL

En el caso de que la imagen está ubicada en una dirección URL externa, entonces el valor de src será la URL de la imagen.

Ejemplo de código para insertar imagen desde URL:

<img src="https://cdn.pixabay.com/photo/2015/02/09/20/03/koala-630117__340.jpg"/>

Atributo alt

El atributo alt contiene el texto alternativo, este texto se mostrará si por alguna razón no carga la imagen, por lo tanto tiene que ser un texto que describa a dicha imagen.

Ejemplo de código:

<img src="gatito.jpg" alt="foto de gatito"/>

Tamaño de imagen       

Para definir el tamaño de una imagen podemos utilizar los atributos width (ancho) y height (alto) y su valor estará expresado en px o % (pixeles o porcentajes)

Ejemplo de código para dimensionar imagen en HTML:

<img src="koala.jpg" height="50px" width="150px"/>
<img src="koala.jpg" height="50%" width="150%"/>

Atributo border

El atributo border crea un borde para la imagen el valor de este atributo se puede expresa en píxeles o en otra unidad de medida compatible. Solo por mencionar, con CSS podemos personalizar las imágenes con mayor libertad, ahora lo que nos importa es conocer su estructura.

Ejemplo de borde:

<img border="2px" src="koala.jpg" />

Atributo vspce

Este atributo coloca un espacio en la parte superior e inferior de la imagen y su valor se puede expresar en píxeles u otra unidad como em, %, pt, etc.

Cómo poner enlaces en imágenes HTML

Poner un enlace a una imagen es tan sencillo como colocar la etiqueta <img/> dentro de una etiqueta <a> de la siguiente manera.

<a hrf="URL"> <img src="imagen.jpg"/> </a>

Recordemos que la etiqueta <a> sirve para crear enlaces o hipervínculos, por tanto, los elementos dentro de ella, pueden apuntar a una dirección URL.

Práctica y ejercicios de imágenes en HTML

Con todo lo que aprendimos en esta lección realizaremos varios ejercicios sobre imágenes en HTML, aplicando los atributos de varias formas, de tal manera que vayas practicando y desarrollando tu habilidad.

Cómo poner bordes a imágenes en HTML

Ya mencionamos que para ello se emplea el atributo border, veamos varios ejemplos en el que además veremos como poner color al borde y hasta un estilo, aunque todo ello corresponde ya a un curso de CSS.

En el siguiente ejemplo colocaremos la imagen de koala con altura de 250px y ancho de 400px, además un borde de 10px para que sea notorio.

<img src="koala.jpg" border="10px" height="250px" width="400px"/>

Nota importante.- Las imágenes deben estar almacenadas en la misma carpeta que el documento html para que funcione correctamente.

Si quieres probar cualquiera de los códigos para insertar figuras, fotos o imágenes en general, puedes copiarlos y pegarlos en tu bloc de notas, guardar como un archivo HTML y abrirlo con tu navegador preferido.

[popup_anything id=»4350″]