SELFHTML / Barra  HTML  Imágenes en HTML

¡Escuche radio!

	Ligar imágenes
	Referenciar imágenes (en general)  Referenciar imágenes en otros directorios  Referenciar imágenes en otros servidores WWW  Texto alternativo  Marcos de imágenes  Nombres para las imágenes  Dirección URL con descripciones para imágenes  Otras posibilidades

Referenciar imágenes (en general)

Ejemplo visual

Para ligar imágenes en un archivo HTML, debe referenciar los archivos gráficos con los sitios deseados. Los formatos gráficos ideales para imágenes en el WWW son GIF y JPEG (ver también  Imágenes conformes al WWW).

Ejemplo:

<img src="archivo.gif">
<img src="archivo.jpg">

Aclaración:

Una referencia de una imágen comienza con <img src= (img = image = imágen, src = source = fuente). Después del signo de igualdad se escribe el nombre del archivo gráfico al que ha de ser enlazado (en el ejemplo: "archivo.gif" y "archivo.jpg"). El nombre del archivo debe ponerse entre comillas. El comando para la referencia de la imágen termina en >.

Atención:

Los ejemplos de arriba presuponen que el archivo gráfico se encuentre en el mismo directorio en donde se encuentra el archivo HTML, en la cual es referenciada la imágen. Usted Puede también referenciar  imágenes en otros directorios y hasta  imágenes en otros servidores WWW .

Si usted crea archivos HTML para el WWW, tiene que poner atencióna que las imágenes referenciadas allí no sean tan grandes, ya que imágenes muy grandes provocan que el cargamiento del archivo demore mucho tiempo y el enojo de los usuarios. Reduzca en sus imágenes eventualmente la cantidad de colores y el tamaño de las mismas. Además no debe llenar el archivo HTML con muchas imágenes. En todo caso debe especificar la  anchura y la altura de la imágen.

Para visualizar una imágen sola - sin texto al lado, debe anotar antes y después de la referencia de la imágen un salto de párrafo. Por ejemplo: <p><img src="datei.gif"></p>. Además puede  ponerle una inscripción a una imágen o  dejar fluir un texto alrededor de una imágen.

Bajo sistemas operativos como  MS-Windows, Macintosh, OS/2 y otros, los navegadores pueden visualizar las imágenes referenciadas en la pantalla.  Los navegadores de sistemas de orientación textual (por ejemplo DOS-módulo de texto, Unix-módulo de texto) deben abrir un programa separado para representar las imágenes.

Si en su proyecto WWW usa sólo imágenes para archivos importantes, sin texto alguno, como por ejemplo para la página de entrada, dificulta la identificación del contenido de su proyecto por los programas de búsqueda automáticos que son usados por muchos servicios de búsqueda. En caso de duda debe decidir que es lo más importante: el aspecto gráfico o la identificación del contenido. En caso de que se decida por las imágenes, debe por lo menos usar las posibilidades que le brindan las   informaciones meta.

Referenciar imágenes en otros directorios

Ejemplo visual:

En proyectos grandes es razonable que los archivos estén distribuidos en varios directorios. Eso es bueno para mantener la claridad sobre el proyecto. Para que los proyectos puedan ser transferidos a otros sevidores con otras estructuras de directorios, debe darle a las referencias gráficas nombres de destino relativos.

Ejemplo:

<img src="directorio/archivo.gif">
<img src="directorio/subdirectorio/archivo.gif">
<img src="../archivo.gif">
<img src="../../../archivo.gif">
<img src="../enotrolado/archivo.gif">

Aclaración:

Para la referencia de imágenes son válidos el comando HTML y las condiciones para  referenciar imágenes (en general). La referencia de una imágen se compone de la especificación del destino relativo y del nombre del archivo gráfico.

En caso de nombres de destino relativos, el directorio con el punto de referencia es en el que el archivo HTML se encuentra y que contiene la referencia gráfica (en adelante llamado "directorio actual").

Sie un un archivo gráfico se encuentra en un directorio debajo del directorio actual, anote el nombre del subdirectorio, después una raya diagonal y despues el nombre del archivo gráfico. Si el archivo gráfico se encuentra en el directorio situado arriba del directorio actual, entonces anote dos puntos, una raya diagonal y después el nombre del archivo gráfico. En caso de que los archivos gráficos se encuentren muchos más alejados, tiene que anotar los nombres de los directorios como es señalado en los ejemplos arriba.

Atención:

Utilice siempre las rayas diagonales para separar los directorios, aún cuando el proyecto sea creado en un entorno de sistema operativo  DOS-/Windows. Los navegadores necesitan esa información en forma de rayas diagonales.

Referenciar imágenes en otros servidores WWW

Ejemplo visual:

Cada imágen en un proyecto WWW es un archivo propio y por tal razón tiene su dirección de internet propia. Usted Puede referenciar en su proyecto cualquier archivo gráfico si conoces la dirección internet del mismo. 

Ejemplo:

<img src="http://www.selfhtml.com/xdance1.gif">

Aclaración:

Para la referencia de imágenes son válidos el comando HTML y las condiciones para  referenciar imágenes (en general). La referencia gráfica se compone de la dirección de internet del archivo gráfico.

Atención:

Si usted referencias imágenes en otros servidores WWW, provoca mayor carga de la red. Por tal razón imágenes que se cargan en otros servidores deben ser una excepción.

Si referencia imágenes de otros servidores, preguntele a los ofrecedores de las respectivas páginas si están de acuerdo con ello.

En caso de referencias de imágenes en servidores ajenos, puede suceder que las imágenes de pronto no funcionan, porque el ofrecedor las ha cambiado, borrado o simplemente renombrado.

Texto alternativo

Ejemplo visual

Si crea archivos HTML para el WWW, debe tomar en consideración el ligar un texto alternativo a las imágenes. El texto es representado en caso de que la imágen por algún motivo no sea visualizada (motivos para ello hay muchos). Algunos navegadores presentan el texto alternativo en forma de un pequeño "Tooltip" cuando uno pasa el ratón suavemente sobre la imágen.

Ejemplo:

<img src="archivo.gif" alt="breve descripción de la imágen">

Aclaración:

El texto alternativo es anotado dentro del comando de la referencia de la imágen. La especificación del texto alternativo es introducido por medio de alt= (alt =alternative = alternativo). Posteriormente sigue entre comillas el texto alternativo.

Atención:

En caso de imágenes grandes, el texto alternativo es visualizado antes de que las imágenes sean cargadas. De tal manera el usuario se puede informar sobre el contenido de las imágenes antes de que sean representadas en la pantalla.

Marcos de imágenes

Ejemplo visual:

Puede determinar que los navegadores representen un marco alrededor de una imágen.

Ejemplo:

<img src="archivo.gif" border=10>

Aclaración:

Con ayuda de la indicación border= dentro de la referencia de la imágen, es definido un marco alrededor de la imágen (border = marco). La especificación se efectua en píxeles y significa espesor del marco.

Nombres para las imágenes

Puede determinar que nombre recibe una imágen. Esto es razonable en conexión con JavaScript. El nombre de una imágen puede ser de mucha importancia por ejemplo en caso de objetos JavaSript  Objeto image.

Ejemplo:

<img src="archivo.gif" name="MiImagen">

Aclaración:

Con name= dentro de la referencia de la imágen le da el nombre a la imágen. El nombre debe estar entre comillas, no debe ser muy largo y no debe contener espacios en blanco, símbolos especiales, acentos o ñ. Tan sólo son permitidas letras, cifras y la siguiente raya "_". Minúsculas y mayúsculas son diferenciadas.

Direcciones URL con descripciones para imágenes

Si no le bastan las posibilidades que le da un texto alternativo para una imágen, entonces a partir de HTML 4.0 puedes hacer un enlace a otro lugar u otro archivo donde se encuentran más informaciones sobre la imágen. El navegador puede en tal caso representar el enlace a tal lugar en caso de que la imágen no sea vista.

Ejemplo:

<h1<a name="Descripcion">Informaciones sobre la imágen</a></h1>
usw.
<img src="archivo.gif" longdesc="#Descripcion">

Aclaración:

Con el atributo longdesc= puede hacer un enlace a un lugar en donde la imágen es descrita en forma de texto. En el ejemplo se encuentra el enlace de destino en el mismo archivo donde está la imágen. Después de longdesc= es definido un enlace a un(a) ancla y con <a name=> es definido(a) un(a) ancla con ese nombre en otro lugar. Eso funciona de la misma manera que como en  enlaces dentro de un archivo. Después de longdesc= puede también indicar otro nombre o una dirección URL absoluta. La indicación debe estar entre comillas.

Otras posibilidades

La etiqueta <img> puede contener  atributos universales .

Si ya sabe HTML algo mejor, puede probar las posibilidades que le brindan las  hojas de estilo CSS. Con ellas puede hacer el formato de las imágenes adicionalmente. Antes de ello tiene que saber como  definir hojas de estilo. Posteriormente puede estar preparado para usar las especifcaciones de las hojas de estilo. Laespecificaciones de hojas de estilo más interesantes relacionadas con el tema aquí descrito son las siguientes:
 Intervalos, marcos, alineamiento
 Marcos e intervalos internos
 Colores e imágenes de fondo
 Posicionar elementos

siguiente:	Anchura y altura de las imágenes
anterior:	Enlaces internos de navegadores

SELFHTML / Barra  HTML  Imágenes en HTML

¡Escuche radio!

© 1998  Stefan Münz  © 1999   Traducción  Virgilio Krumbacher, krumbacher@selfhtml.com.ar