Cómo insertar una imagen con HMTL

Si estás creando tu propia página web o blog personal,es normal que desees personalizarlo con aquellas imágenes que sirvan para definir tu site o para ilustrar lo que explicas. De este modo tienes que saber cómo insertar una imagen con HTML, algo que es bastante sencillo si sigues la guía de pasos que te explicamos a continuación.

El lenguaje HTML es aquel lenguaje que utilizamos a la hora de crear nuestra propia página web. Podemos entrar en nuestro editor y a partir del punto en el que queramos insertar la imagen, tendremos que echar mano de los códigos o ruta necesaria para que la foto pueda verse cuando entremos en la web o en el blog. Para ello, guíate tal y como te contamos ahora.

Pasos para insertar una imagen con HTML

1. Lo mejor para que sepáis insertar una imagen con HTML es que tengamos un ejemplo. Para ello coge una foto que quieras insertar y la guardas en tu ordenador. Nosotros hemos cogido la de un perrito y la hemos llamado de este modo «perro-divertido.jpg».
2. Esa imagen la tenemos que insertar en el HTML con el siguiente código: <img src=”perro-divertido.jpg” />
3. Este es el código para crear un elemento de imagen. A continuación, las letras «src» se usan como un atributo y representan la»fuente». Básicamente, lo que estaremos haciendo será proporcionar al navegador web un valor para la fuente de la imagen. Naturalmente, el valor para el atributo fuente es «perro-divertido.jpg». Este ejemplo asume que tu archivo de imagen está ubicado en el mismo directorio que tu archivo HTML.
4. Si, por ejemplo, tuvieras tu archivo de imagen dentro de una carpeta llamada «imágenes», el código cambiaría y se vería como: <img src=”images/perro-divertido.jpg” />
5. Como se puede ver, en ambos ejemplos de código hasta el momento no hemos incluido una etiqueta de final </ img>, debido a que el código de la imagen es un elemento de “cierre automático”. Esto se debe a que, a diferencia de un párrafo, no tendremos una gran cantidad de contenido dentro de nuestro elemento , sino una sola imagen. De hecho, HTML5 no nos obliga a nunca «cerrar» nuestros elementos, pero por razones de organización siempre es recomendable el intentar incluir etiquetas de cierre tradicionales para la mayoría de los elementos.
6. Por último existe un elemento adicional de código que debemos agregar antes de que terminemos de subir la imagen en HTML. Consiste en asignar un atributo y valor «alt» a nuestra imagen. El atributo «alt» significa «alternativa» y se utiliza para proporcionar una alternativa basada en una descripción de la imagen en texto para los espectadores en caso de que la imagen no se cargue, o si tienen una discapacidad visual. Así es cómo se verá nuestro código finalmente: <img src=»images/perro-divertido.jpg” alt=”perro divertido sentado en la hierba» />