Ahora vamos a empezar a colocar imágenes en la página. Usaremos ésta. Una vez más, haz clic con el botón derecho del ratón para copiarla de esta página y guardarla en la tuya.

Chef

Se inserta una imagen con la sentencia <IMG> (IMAGEN) .

<BODY>
<IMG>
</BODY>

También debemos especificar el archivo y el tamaño.

<BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101> (ANCHURA y ALTURA)
</BODY>


 

PREGUNTA: ¿Cómo puedo saber la ALTURA y la ANCHURA de una imagen?
R: Bueno, hay un par de formas diferentes. Una es cargar la imagen en un programa de gráficos. En Propiedades aparece la altura y la anchura. Uno muy bueno (y gratis) es Irfan View. Un editor de gráficos muy popular es Paint Shop Pro. Es shareware con caducidad, pero es un buen editor. Hay una versión más antigua que RECOMIENDO a los principiantes, y ésta no caduca. Está (o estaba) disponible aquí.

Otro método es utilizar un editor de texto o de html que importa el tamaño cuando se inserta la imagen. Puedes hacerlo con NoteTab, y la sentencia de imagen se construye automáticamente cuando se arrastra el archivo de imagen al documento actual. Se puede insertar una imagen en 6 décimas de segundo. :-)

Ahora déjame hacer hincapié en que no sólo hay que especificar qué imagen, sino que también hay que especificar dónde está la imagen. La entrada anterior, "chef.gif", le dice al navegador que busque la imagen llamada chef.gif en la misma carpeta (o directorio) en que se encuentra el documento html. Abajo hay unos pocos diagramas.

SRC="chef.gif" quiere decir que la imagen está en la misma carpeta que contiene el documento html.
SRC="images/chef.gif" quiere decir que la imagen está en un subdirectorio de la carpeta que contiene el documento. Puede haber tantos subdirectorios como sea necesario.
SRC="../chef.gif" quiere decir que la imagen está en el directorio superior a aquel en que se encuentra el documento html.
SRC="../../chef.gif" quiere decir que la imagen está dos directorios por encima de aquel en que se encuentra el documento html.
SRC="../images/chef.gif" quiere decir que la imagen está en un subdirectorio del directorio superior. Es decir, el directorio superior contiene dos subdirectorios, uno con la imagen y otro con el documento html.
SRC="../../../other/images/chef.gif" Bueno, esto no voy a intentar explicarlo. Espero que captes la idea.

Hay otra forma de hacer todo esto. Todas las referencias a imágenes pueden incluir su URL completa. La URL es la dirección completa de un archivo cualquiera en la red, y cada una de ellas es única. Por ejemplo: http://www.servidor.net/usuario/mipagina/varios/imagenes/chef.gif

¿Por qué, te preguntarás, utilizamos entonces las referencias URL relativas (parciales) en contraposición a las referencias URL absolutas (completas)? Pues porque normalmente construirás tu sitio web localmente (leáse en tu propio disco duro) y todos los enlaces funcionarán perfectamente. Cuando las páginas estén terminadas, solo tienes que subir al servidor todo el montón de archivos y todo funcionará tal y como tenías previsto. Adicionalmente, es más fácil para el navegador conseguir localizar la imagen y las páginas cargan más rápido. Entonces, ¿hay aún alguna razón para usar una URL? Por supuesto que sí, si la imagen está un servidor completamente diferente.

 

PREGUNTA: En cuanto subo mis páginas a la Red, todos mis enlaces a las imágenes se estropean, aunque en mi disco duro funcionan perfectamente. Uso URLs relativas y estoy completamente seguro de que he subido y actualizado las imágenes, porque puedo verlas en mi programa FTP. ¿Qué sucede?
R: Suena a problema de mayúsculas/minúsculas. Para un sistema basado en Windows, Chef.gif es lo mismo que CHEF.GIF y lo mismo que chef.gif. Para un servidor de tipo UNIX (de los que hay muchos) son tres imágenes completamente diferentes. Si le estás diciendo al servidor que busque Chef.gif, pero lo que el servidor encuentra es CHEF.GIF, la imagen no aparecerá.
¿La solución? Utiliza siempre letras minúsculas para los nombres de archivo. Haz de esto un hábito y nunca más tendrás este tipo de problemas.
Otro hábito realmente bueno es evitar los espacios en tus nombres de archivo. Cambia los espacios por subrayados. Cambia Mi Mamita.gif por mi_mamita.gif.