Inicialmente, los sitios web eran texto y esa realidad resultó bastante aburrida para los usuarios. Pero no transcurrió tantísimo tiempo para que nuevas actualizaciones permitieran insertar imágenes en las páginas web. Existen distintos elementos multimedia que deben considerarse, pero comenzaremos con el elemento más básico <img>. En este artículo veremos a detalle cómo insertar una imagen en HTML, con todos los conceptos requeridos para ello.

Añadir imágenes a tu perfil o sitio web resulta ser una excelente opción al momento de mejorar tu página. Con el uso del código HTML este proceso se convierte en algo sencillo y, generalmente, insertar imágenes es uno de los primeros aprendizajes de quienes recién comienzan a utilizar este código.

¿Cómo insertar una imagen en HTML?

1. Inserta la imagen

Selecciona y sube la imagen; puedes hacer uso de servicios de alojamiento de imágenes gratuitos, como lo son Flickr, Picasa Web Albums, entre otros. Asegúrate de leer cuidadosamente todos los términos y recuerda que algunos de estos servicios pueden disminuir la calidad de tu imagen.

2. Abre tu archivo HTML

Abre el documento HTML destinado a la página web o blog donde la imagen se mostrará. Si intentas añadir una imagen en un foro, podrás escribir de manera directa en la entrada. La mayoría de foros utiliza un sistema personalizado en vez del código HTML.

3. Comienza con la etiqueta de la imagen

Ubica un lugar en el cuerpo de tu HTML donde desearías insertar una imagen y procede a escribir la etiqueta <img>. Esto es una etiqueta vacía, es decir, no cuenta con una etiqueta de cierre. Todo lo que necesitarás para mostrar tu imagen debe ir dentro de los paréntesis angulares.

¿Quieres recibir nuestro contenido de agencia cada semana?

4. Encuentra la URL de tu imagen

Para ello dirígete a la página web donde se encuentra alojada tu imagen. Da clic derecho y selecciona la opción Copiar locación de la imagen. Otra alternativa es presionar en Ver imagen para que esta se muestre sola en la página y posteriormente copiar la URL de la imagen en tu barra de direcciones.

5. Coloca la URL en un atributo src

Como debes conocer, los atributos HTML deben encontrarse dentro de una etiqueta para poder realizar modificaciones. El atributo src (source) le da instrucciones al navegador en relación a dónde debe buscar para localizar la imagen. Escribe src=”” y luego pega la URL de la imagen entre las comillas. Por ejemplo:

<img src=”http://www.mysiteweb.com/my-cute-cat.jpg”>

6. Añade un atributo alt

Básicamente, tu HTML cuenta con todos los requisitos necesarios para mostrar la imagen, pero también resulta útil añadirle un atributo alt. Esta característica le indicará al navegador el texto que debe mostrar cuando la imagen falle en cargar. De la misma manera, este atributo le facilita a los motores de búsqueda la tarea de conocer de qué trata tu imagen. Permitiéndoles a los lectores de pantalla efectuar una descripción de tu imagen a los usuarios con problemas visuales. Por ejemplo:

<img src=”http://www.mysiteweb.com/my-cute-cat.jpg” alt=”mi gato comiendo gatarina”>

7. Guarda los cambios

Asegúrate de guardar tu archivo HTML en el sitio web correspondiente. Puedes visitar la página que recién modificaste o actualizarla para observar los cambios realizados.

[serptrade]