Cómo insertar una imagen en HTML

Anterior
Avanzar

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.

Cómo insertar Imágenes en HTML

Insertar una imagen en HTML es muy simple, simplemente debemos indicar que el elemento es una imagen y cuál es el archivo o donde esta ubicado para que sea mostrado en el navegador, veamos.

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, 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:

Te recomendamos leer:  Atributos en HTML - qué son, para qué sirven y cuáles son
Insertar imágenes desde carpeta en HTML
Imagen insertada desde carpeta local HTML

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"/>
Insertar imágenes desde URL en html
Imagen insertada desde URL externa en HTML

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.

Te recomendamos leer:  Elementos Inline y Block en HTML

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"/>
Poner borde a imágenes en HTML
Insertar imágenes con borde en HTML

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.

lecciones HTML
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML