CAPITULO 4
(Dando un poco de Imagen y color)
|
CAPITULO 4 |
|
El mundo del WWW es mucho mas que texto y links, queremos colores, queremos imágenes, queremos que nuestra página sea todo un hito en la historia del diseño gráfico. Para esto necesitaremos dos cosas: La tecnica para hacerlo y el talento para hacerlo bién. en este maravilloso y encantador capítulo de "Edición Extremadamente Simple de HTML" veremos la tecnica. El talento es algo que tienes que poner tú (Lo siento amiguitos, de eso del talento yo no sé nada).
Empecemos: Para ponerle un color de fondo a tu peich, tienes una opción del tag <BODY>, que es:
<BODY BGCOLOR=rgb> donde rgb es un código de color semejante al que vimos en la directiva <FONT COLOR=rgb>
Si lo que quieres es poner una imagen de fondo, tienes otra opción que también se añade al tag <BODY>:
<BODY BACKGROUND="nombre de la imagen"> donde "nombre de la imagen" es el nombre del fichero gráfico que queres usar como fondo.
Un ejemplo muy simple de esto es:
<HTML>
<HEAD>
<TITLE>
Ejemplo de imagen de fondo
</TITLE>
</HEAD>
<BODY BACKGROUND="html.GIF">
</BODY>
</HTML>
O, también, pica aquí para verla directamente.
Como puedes ver, la imagen, al ser mas pequeña que la peich, se dispone en forma de mosaico. Además, Puedes ver que la imagen que hemos escogido no es la más idonea, sería necesaria una imagen mucho mas clara para que el texto se pueda leer con comodidad.
Concretamente (Y esto vale también para BGCOLOR), procura elegir imágenes poco contrastadas y de colores que no sean muy llamativos (No queremos que tus visitantes acaben con los ojos irritados). No olvides tanbién elegir un color en el que el texto destaque con claridad.
Para insertar una imagen en tu peich tienes a tu servicio un encantador tag al que seguro que vas a cojer mucho cariño, este amable amigo de todos los grafistas de la red es:
<IMG>
Este tag es muy simple, ni siquiera hay que cerrarlo ( o sea, que no existe </IMG>) y tiene una sola opción extrictamente necesaria que es:
<IMG SRC="nombre de la imagen"> donde "nombre de la imagen" es el nombre del fichero gráfico que queres incrustar en este punto.
Antes de continuar, tenemos que ver unos cuantos puntos acerca de los formatos gráficos y su uso en la WWW:
Existen infinidad de formatos en los que una imagen puede ser codificada, cada uno tiene una serie de ventajas e inconvenientes que lo hacen mas o menos indocado para un empleo concreto. Concretamente los dos únicos formatos que son universalmente aceptados por todos lo navegadores (los navegadores gráficos, logicamente) son el GIF y el JPEG. Existen otros formatos que solo son admitidos por algunos navegadores, pero son excepciones y probablemente no puedan verlos la mayor parte de los visitantes de tu Web.
El formato GIF fué el primero que se usó en la WWW. Posee una limitada capacidad de compresión que facilita su uso para no sobrecargar el ancho de banda y no haya que esperar tres días a que el navegador baje la página. Además, puede ser guardado de forma entrelazada, lo que significa que, a la hora de descargar el gráfico, las líneas que lo conforman no aparecen consecutivas, sino que se carga una línea sí y dos nó, o una sí y tres nó, ect. Esto hace que podamos ver (mas o menos claramente) la imagen cuando aún no se ha cargado del todo. Otra de las virtudes de este formato es que permite asignar un color como transparente, de forma que, los colores o imágenes que hayas escogido como fondo de tu peich se pueden ver a través de él. Además, es posible guardar animaciones en este formato. Sin embargo, su principal limitación es que solo tiene capacidad para codificar hasta 256 colores, con lo que imágenes con una paleta muy grande y con degradados muy intensos, como es el caso de una fotografía a color, se pierda bastante claridad.
Por otro lado, el JPEG es un formato especialmente indicado para fotografías. Carece de la limitación de los 256 colores del GIF y es especialmente apto para los degradados. Ademas el JPEG tiene un sistema de compresión mucho mas capáz que el del GIF, comprimiendo grandes imágenes en archivos bastante pequeños. Tambien tiene un sistema partecido al interlazado del GIF, que ahorra tiempo en la visualización de la imagen. El problema de este formato es que su sistema de compresión pierde parte de la información. Esto hace que sea absolutamente desaconsejable para imagenes nítidas, en las que haya líneas muy definidas o cambios de color muy acusados.
En definitiva, para imagenes donde sea importante la compresión o el número de colores, usaremos el JPEG. Cuando mos interese más la definición o las cualidades de transparencia, nos inclinaremos por el GIF. Con esto ya tienes una idea aproximada de lo que te conviene usar en cada momento. Dejemos la teoría y pasemos a lo práctico.
Existen otros formatos de imagen que se están haciendo populares en la WWW. En particular uno llamado PNG parece que tendrá mucho exito. El problema es que aún no es soportado por la mayor parte de los navegadores.
Puedes ver algo más sobre los formatos gráficos en la sección Taller Web de este mismo Site.
Estabamos viendo el atributo SCR=. Al igual que en el atributo BACKGROUND=, en él indicaremos la ruta y el nombre del fichero gráfico que queremos incrustar en la página del mismo modo como lo hacíamos en el atributo HREF= de los hiperenlaces. O sea, que es posible referenciar una imagen en el mismo directorio, en otro distinto, o incluso en una URL remota. Evidentemente, este atributo es estrictamente necesario (Logicamente, si no lo pones, no hay imagen que ver).
Otras dos opciones muy interesantes son las que permiten definir el tamaño de la imagen:
<IMG HEIGHT=alto WIDTH=ancho> donde alto es la altura en pixels de la imagen y ancho es su anchura.
¿Que para qué sirven estas opciones? Muy simple. Si quieres utilizar una imagen pequeña para que ocupe un gran espacio, puedes forzar sus dimensiones con estos atributos (aunque, probablemente, te aparezcan muy pixeladas). Esto puede ser muy util cuando, por ejemplo, quiers poner un cuadrado azul de 20x20 pixels. Para ello harías una imagen de un solo pixel de tamaño, por ejemplo cuadro.gif (tendría un tamaño ridiculo y, por tanto, se cargaría muy rapidamente.), y la sobredimensionarías de la siguiente forma:
<IMG SCR=cuadro.gif HEIGHT=20 WIDTH=20>
Con lo que obtendrías un gran cuadro sin ocupar mucha memoria. Tambié puedes hacer separadores horizontales (poca altura y mucha anchura), separadores verticales (poca anchura y mucha altura), ect. Las medidas asignadas pueden ser menores que las del original, pero eso no tiene demasiada utilidad (Usar un gráfico grande, que tarde mucho en cargarse, para un dibujo pequeño no parece muy inteligente ¿no crees?).
Pero este no es realmente el objetivo principal de estas opciones. Lo realmente útil es poner aquí las verdaderas dimensiones de la imagen. De esta forma el navegador ya sabe el espacio que va a ocupar y puede seguir presentando la página aunque la imagen no esté totalmente cargada. Esto no ahorra tiempo, pero permite que se pueda seguir leyendo el texto sin que te aburras esperando a que aparezca un dibujito que, a lo mejor, ni siquiera es importante para entender lo que se dice.
Otra opción muy recomendable es la que te permite poner un texto alternativo a la imagen en cuestión. Este texto se presentará en el caso de que el navegador que usemos sea en modo texto, o que hayamos desactivado la carga de imágenes en un navegador gráfico. También se podrá ver en algun lugar de la barra de algunos navegadores gráficos y/o junto al puntero del ratón al indicar la imagen. Esta opción es:
<IMG ALT="Texto a presentar"> donde "texto a presentar" es lo que aparecerá en lugar (o además) de la imagen.
Pero, si el contenido de la imagen es importante, como en una gráfica, quizás quieras poner una descripción más detallada. Para ello HTML tiene la etiqueta:
<IMG LONGDESC="URL"> donde "URL" es la dirección donde describes, todo lo ampliamente que sea necesario, el contenido de la imagen. Esta etiqueta no es demasiado soportada aún, de modo que usualmente se suele colocar, además de este atributo, un link cerca de la imagen que dirija a esta descripción.
Si lo que quieres es que destaque más la imagen, puedes ponerle un borde alrededor con la opción:
<IMG BORDER=tamaño> donde tamaño es el grosor en pixels del borde de la imagen( si es cero, no aparece ninguno)
Pero veamos algún ejemplo que nos aclare un poco las cosas:
<HTML>
<HEAD>
<TITLE>
Empezando con las imagenes
</TITLE>
</HEAD>
<BODY>
<P>Ya sabes, lo copias y le pones la extensión *.htm o *.html, para verlo en tu navegador favorito.</P>
<P>Imagen de ejemplo sin modificar:<IMG SRC=ejempl.GIF HEIGHT=38 WIDTH=61></P>
<P>Imagen de ejemplo con doble ancho:<IMG SRC=ejempl.GIF HEIGHT=38 WIDTH=122></P>
<P>Imagen de ejemplo con doble alto:<IMG SRC=ejempl.GIF HEIGHT=76 WIDTH=61></P>
<P>Imagen de ejemplo gigante:<IMG SRC=ejempl.GIF HEIGHT=76 WIDTH=122></P>
<P>Ahora, con texto en ALT:<IMG SRC=ejempl.GIF HEIGHT=38 WIDTH=61 ALT="Imagen de ejemplo con su texto correspondiente"></P>
<P>Ahora, con borde fino:<IMG SRC=ejempl.GIF HEIGHT=38 WIDTH=61 ALT="Imagen de ejemplo con borde de un pixel" BORDER=1></P>
<P>Ahora, con borde grueso:<IMG SRC=ejempl.GIF HEIGHT=38 WIDTH=61 ALT="Imagen de ejemplo con borde de cuatro pixels" BORDER=4></P>
</BODY>
</HTML>
O, como siempre, pica aquí para verla directamente.
Las imagenes se comportan, por defecto, como componentes del texto a efectos de alineación. Es decir, se puede alinear un gráfico incluyendolo entre dos tags <P></P>, por ejemplo:
<P ALIGN=center><IMG SRC="nombre de la imagen"></P>, esto centraría la imagen en la página.
Aun así, el tag <IMG> tiene una opción ALING, que se usa, com ya te imaginarás, de este modo:
<IMG SRC="nombre de la imagen" ALIGN=modo> donde modo puede ser uno de estos tres: TOP, BOTTOM y MIDDLE.
¿Que para qué sirve esto? Para alinear la imagen HORIZONTALMENTE con respecto al texto que la acompaña.TOP alinea el borde superior de la imagen con el texto. MIDDLE hace lo mismo con el centro de la imagen y BOTTOM lo hace con el borde inferor.Veamslo con un ejemplo:
<HTML>
<HEAD>
<TITLE>
Alineacion vertical de imagenes
</TITLE>
</HEAD>
<BODY>
<P>Imagen alineada con TOP<IMG SRC="html.GIF" ALIGN=TOP></P>
<P>Imagen alineada con MIDDLE<IMG SRC="html.GIF" ALIGN=MIDDLE></P>
<P>Imagen alineada con BOTTOM<IMG SRC="html.GIF" ALIGN=BOTTOM></P>
</BODY>
</HTML>
Sin embargo, por defecto, una imagen ocupa una sola línea de texto. Al fin y al cabo hemos dicho que se comporta como un elemento más de este. Es decir que, por ejemplo, no podemos poner una imagen al lado derecho de la peich y varias líneas al lado izquierdo. Solo podemos poner una línea y, si es demasiado larga, continuará debajo de la imagen.
Bueno, sí podemos, pero con la ayuda, de nuevo, del atributo ALIGN=modo, pero esta vez modo puede ser LEFT o RIGHT. LEFT hace que la imagen se sitúe a la izquierda, permitiendo que el texto fluya a la derecha de ella, RIGHT, por el contrario, hace que la imagen se sitúe a la derecha y que el texto fluya a la derecha. Si quieres alinear la imagen tanto en horizontal como en vertical, tienes que incluir dos sentencias ALIGN (Seguramente, en algún mo mento de la historia, dos programas incluyeron al mismo tiempo la misma opción ALIGN para estos dos usos distintos, de forma que, hoy dia, hay veces que tenemos que introducirla dos veces). Para impedir que el texto fluya alrededor de la imagen, tenemos que recurrir a nuetro viejo amigo el tag <BR> (si, hombre, el del capítulo dos). Para ello usaremos una nueva opción que no vimos en su momento, y que es:
<BR CLEAR=modo>, donde modo será igual a LEFT, RIGHT o ALL.
LEFT impide que el texto fluya a la derecha de la imagen, RIGHT hace lo mismo a la izquierda, y ALL a ambos lados. Como puede parecer un poco confuso, vamos a poner un ejemplo que lo aclare:
<HTML>
<HEAD>
<TITLE>
Alineacion horizontal de imagenes
</TITLE>
</HEAD>
<BODY>
Ya saves lo de copiar y editar con la extension *htm o *html.
<BR>
<IMG SRC="html.GIF" ALIGN=LEFT>Imagen alineada con LEFT, como puedes ver, el texto fluye libremente a su lado derecho (intenta cambiar el ancho de la ventana del navegador para verlo mas claramente) y no intenta pasar al siguiente renglon debajo de la imagen.hasta este punto.<BR CLEAR=LEFT>
<IMG SRC="html.GIF" ALIGN=RIGHT>
Imagen alineada con RIGHT, donde el texto sigue fluyendo porque en la sentencia CLEAR anterior hemos usado la opcion LEFT, pero si incluimos aquí la misma pero con RIGHT,<BR CLEAR=RIGHT> ahora si que salta de linea y continua en la de debajo del grafico en cuestión.
</BODY>
</HTML>
Ya sabes, pica aquí para ver el ejemplo.
Esperemos que ahora esté mas claro.
Si no quieres que el texto esté demasiado pegado al gráfico, puedes darle un margen a la imagen con las opciones:
<IMG HSPACE=numero> donde numero es el margen horizontal en pixels
<IMG VSPACE=numero> donde numero es el margen vertical en pixels
Las imagenes pueden usarse también como links, para ello se hace como con cualquier otro elemento, poniendo el código de la imagen entre los tags <A> </A>. En este caso, el navegador le asigna al grafico un borde por defecto, aunque no se lo indiques con la opción BORDER= . Para cambiarlo solo hay que asignarle el que tú quieras con este atributo (si no quieres ninguno, ponle BORDER=0).
Otra forma muy interesante de usar links en las imagenes es por medio de los mapas interactivos. Pero eso lo veremos en el proximo capitulo de Edición Extremadamente Simple de HTML.
