Inserting Images es-419 Explainer

Explicador de Inserción de imágenes

Objetivo de este acertijo: Agregar una imagen a una página web.

Tutorial de la solución: En este acertijo, agregarás otra imagen a la página web.

La etiqueta <img> agrega una imagen a una página web. No necesita una etiqueta de cierre como otros elementos, pero debe tener un atributo src que señale de donde vamos a agarrar la imagen. Por ejemplo, el código debajo agrega la imagen filename.jpeg a una página web:

<img src='filename.jpg'> 

Una etiqueta de imagen también puede tener un atributo alt. El atributo alt es opcional y proporciona una descripción del texto que es útil cuando la imagen no se puede mostrar o ver. Por ejemplo:

<img src=’flowers.jpg' alt=’picture of a sunflower’> 

Para completar el acertijo, dentro de HTML, agrega una nueva etiqueta <img> tag debajo de la <img> existente. Luego, define su atributo src como ../../static/images/cat.jpg. Por último, dale un atributo alt y define su valor como ’picture of Edgar’.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

HTML

<html>
    <body>
        <img src='../../static/images/catInBag.jpg' alt='picture of Moo'>
        <img src='../../static/images/cat.jpg' alt='picture of Edgar'>
    </body>
</html>

Conceptos de HTML: <html>, <body>,<img>, elemento HTML, atributo de HTML