Imágenes

En HTML, las imágenes se definen con la etiqueta <img> que está vacía, contiene sólo atributos y no tiene una etiqueta de cierre. El atributo src especifica la URL (dirección web) de la imagen: <img src="url" alt="some_text" style="width:ancho; height:largo;">. Y las clases de ingles se las dejo gratis!

En el siguiente ejemplo declaro un elemento de tipo img <img> en nuestro documento HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="es">
        <head>
                <title> Imagenes </title>
        </head>
        <body>
                <h1> Imagen </h1>
                <img src="img/el_universo.png">
        </body>
</html>

Resultado:

../_images/imagenEx1.png

Directorios

<body>
        <h1> Imagen </h1>
        <img src="img/el_universo.png">
</body>

Danger

Y que significa el url o img/el_universo.png

Esto se llaman directorios, es como un nombre elegante para folders. Mi foto el_universo.png se encuentra en el folder img. Mira

  • Da click derecho en tu archivo de Brackets asi y dale click a Show in Explorer que traduce Ver en explorador.

Como pueden ver en el ejemplo, la imagen es demasiado grande. Vamos a hacerla más chica.Intentalo, declara un atributo en el elemento <img> de tipo width y dale 200 de valor. Lanzamos la página. Y obtenemos este resultado:

../_images/imagenEx3.png ../_images/imagenEx2.png