Agrega Imágenes
Nuestro archivo HTML se está pareciendo cada vez más al documento original, pero aún nos hace falta agregarle la imagen de la arroba. Veamos cómo podemos hacer esto.
El elemento <img>
En HTML se utiliza el elemento <img> para insertar imágenes. El elemento <img> solo utiliza una etiqueta, la cual tiene este formato:
<img src="/ubicacion/de/la/imagen" alt="texto alterno" />
Atributos
Un atributo es una propiedad que nos ayuda a describir a alguna persona o cosa. Por ejemplo, las personas tienen atributos como: nombre, edad, altura, peso, etc. En cambio, los carros tienen atributos como: color, marca, modelo, etc.
Cada elemento en HTML tiene sus propios atributos que podemos modificar. Algunos atributos (como src y alt) son obligatorios y siempre debemos definirlos, mientras que otros atributos (como width y height) son opcionales, y depende de nosotros si queremos o no colocarlos.
Para aprender cómo utilizar los atributos de <img>, te recomendamos visitar este link.
Direcciones Relativas vs Absolutas
Imaginemos que estamos en Nueva York y alguien nos dice: "Disculpe, ¿me podría decir dónde queda el Empire State Building?"
Hay dos maneras en las que podríamos responder:
-
Con una dirección absoluta
En la intersección de la Quinta Avenida y West 34th Street, en la ciudad de Nueva York, Estados Unidos.
-
Con una dirección relativa
Camine dos cuadras en esa dirección, luego gire a mano derecha.
La diferencia es bastante obvia, la dirección relativa depende de dónde nos encontremos en ese momento, mientras que la dirección absoluta siempre será igual.
En HTML las direcciones funcionan de la misma manera. Para colocar una imagen en nuestro archivo HTML podríamos escribir una dirección absoluta como esta:
<img src="C:\Documents and Settings\All Users\Mis Documentos\arroba.jpg" alt="arroba" />
O podríamos utilizar una dirección relativa al archivo HTML:
- Si la imagen está en la misma carpeta que el archivo HTML, simplemente escribimos el nombre de la imagen:
<img src="arroba.jpg" alt="arroba" />
- En cambio, si la imagen está en una subcarpeta llamada "images", escribiríamos algo como esto:
<img src="images/arroba.jpg" alt="arroba" />
Descarga la imagen de la arroba y añádela al archivo HTML que hemos estado trabajando. Al terminar, tu página debe quedar de esta manera. Trata de probar cambiando entre direcciones absolutas y relativas, y mira qué sucede si mueves el archivo HTML a una carpeta diferente.
Finalmente, revisa el documento que elegiste en la primera tarea y agrega cualquier imagen a tu archivo HTML. Cuando termines, pasa a la siguiente tarea.