Agrega Imágenes [Jan. 8, 2012, 3:10 p.m.]
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, toda persona tiene los siguientes atributos: 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 les 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 la imagen en nuestro documento 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" />
Y mi página quedaría de esta manera.
En ese caso estaría utilizando una dirección absoluta, ya que estoy definiendo la dirección completa hacia la imagen.
Pero, ¿cómo podría insertar una imagen a mi archivo HTML si la imagen aún no está en Internet?
Ahí es donde entran en juego las direcciones relativas.