Imágenes en HTML – I: El origen

Aprender es como colocar piezas en un puzzle. Al principio no son más que elementos aislados que, con un poco de suerte, podemos intuir pertenecen a alguna zona determinada de la figura. Poco a poco las piezas se van uniendo formando pequeñas islas que después se hacen continentes.

En el camino hacia la habilidad de saber hacer páginas web con HTML, vamos a colocar hoy una pieza pequeña pero importante: aprenderemos a insertar imágenes en nuestras páginas.

¿Sabías que al principio la web estaba basada en texto? No fue hasta la aparición del navegador Mosaic cuando se popularizó la WWW con imágenes. Mis primeros pinitos en la nueva web los hice con Mosaic (llevo ya unos cuantos años en esto) y recuerdo con cariño la indescriptible emoción que me asistía cuando navegaba. Era pura magia. Hoy día esto se da por sentado, pero por entonces era apasionante.

Vamos a aprender hoy lo más básico que hay que saber para insertar un gráfico en una página web. En las sucesivas entregas iremos profundizando en el tema.

Para añadir un gráfico disponemos del elemento <img>.

A veces me referiré a elemento o etiqueta indistintamente. Debes saber que un elemento está compuesto por la etiqueta de inicio, el contenido y la etiqueta de cierre.

<img> pertenece al tipo particular de elementos que no requieren una etiqueta de cierre, pues no hay nada entre medias que contener. Todo lo necesario para la inserción de la imagen se especifica en la etiqueta de apertura a través de sus atributos.

Para poder insertar una imagen necesitamos indicar dónde se encuentra. Para eso disponemos del atributo src, al que le facilitaremos la URL de origen.

Por ejemplo:

<img src="http://dl.dropbox.com/u/4631191/blog/knoppix-logo.gif" />

En este caso la imagen se halla en un sitio diferente al que reside la página en sí.

Normalmente las imágenes residirán en la misma máquina, por lo que bastará con indicar el camino relativo desde donde estamos para llegar a la imagen.

Por ejemplo:

<img src="expertahtml.jpg" />

Con esta línea, el navegador tratará de descargar la imagen expertahtml.jpg que esperará encontrar en el mismo directorio que el de la página actual.

Otros ejemplos de especificación de un camino relativo:

<img src="../expertahtml.jpg" />

En este caso buscará la imagen en el directorio padre del directorio actual (los dos puntos simbolizan al directorio padre).

<img src="img/expertahtml.jpg" />

Aquí el fichero se halla en la carpeta img existente en el directorio actual.

También podemos especificar un camino absoluto. En este caso hay que preceder la ruta con el esquema file:, como en el siguiente ejemplo:

<img src="file://c:\imagenes\expertahtml.jpg" />

Observa cómo hemos cerrado la etiqueta. Al tratarse de elementos sin etiqueta de cierre, las normas de XHTML nos fuerzan a terminar de esa forma la única etiqueta que hay. En HTML5 las normas no son tan estrictas y podemos elegir qué modo de cierre preferimos, por lo que también sería válido lo siguiente:

<img src="file://c:\imagenes\expertahtml.jpg">

Hay diversidad de opiniones sobre qué es lo más conveniente…

Vamos a ver ahora como los navegadores nos presentan las imágenes. Comencemos por el caso más simple en el que hay una imagen sin texto alguno. He aquí el cuerpo de la página:

<body>
<img src="expertahtml.jpg"/>
</body>

Observa su efecto en este enlace. Fíjate como la imagen aparece situada en la esquina superior izquierda.

Añadamos ahora algo de texto:

<body>
Esta es la oveja experta en HTML.<img src="expertahtml.jpg" />
Hay ovejas expertas en cada área de conocimiento.
</body>

Observa qué sucede. En el punto donde termina la escritura de la primera frase inserta la imagen. Y lo hace situando ahí su esquina inferior izquierda. Para ello, hace el hueco necesario en la parte superior, desplazando el texto todo el espacio que haga falta. La siguiente frase continúa a partir de la esquina inferior derecha.

Finalmente, consideremos el siguiente código:

<body>
Esta es la oveja experta en HTML.
<br />
<img src="expertahtml.jpg" />Hay ovejas expertas en cada área de conocimiento.
</body>

Esta vez hay un salto de línea, además de la imagen, entre ambas frases. Mira cómo se visualiza el conjunto. Tal como es de esperar, la imagen se inserta en el punto donde debería empezar la escritura, dejando el espacio vertical necesario. Una vez hecho esto el texto continúa a partir de la esquina inferior derecha.

Nada más por hoy. Quédate con esta pieza; por los colores no te costará ubicarla dentro del marco del puzzle…

Javier Montero Gabarró


http://elclubdelautodidacta.es/wp/2012/03/imagenes-en-html-i-el-origen/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies