Gráficos
Gráficos incluidos en el texto
- Sin alinear con el texto
- Alineados con el texto
| Texto |
Enlaces |
Tablas |
Otros recursos |
Gráficos
Su inclusión en los documentos html complementa el texto y da un aspecto más variado a su presentación en pantalla. Pero hay que evitar la instalación de un número elevado o bien imágenes grandes ya que se retrasaría la carga completa del documento.
Los formatos .gif y .jpg son los más utilizados en las construcción de páginas web ya que ambos son legibles por los navegadores.
El formato .gif es preferible para dibujos o gráficos sencillos en color, mientras que para fotografías es aconsejable el formato .jpg que además permite obtener documentos de menor tamaño. Sin embargo, en formato .gif pueden obtenerse documentos transparentes útiles en los casos que se desee ver a su través un elemento de fondo.
Los gráficos se incluyen mediante la etiqueta <img src="URL">, es un enlace particular para gráficos que permite al navegador visualizarlo en pantalla.
La dirección URL puede escribirse en forma abreviada para los
documentos que tengamos en alguna carpeta de nuestro directorio (ver detalles
en Enlaces).
En caso de no incluir el tamaño, el gráfico se reproducirá al tamaño original en puntos. Puede modificarse mediante las directrices width y height, para la anchura y altura, respectivamente. Guardar o no la proporcionalidad del gráfico es opcional en función de lo que se persiga.
Es interesante utilizar la directriz alt para introducir un texto en el caso de que la imagen no se carge. Además en caso de que el gráfico tuviera un enlace, éste sería operativo.
Gráficos incluidos en el texto
Sin alinear con el texto
En este caso interesa situarlos en alguno de los dos márgenes del documento.
El gráfico normalmente queda rodeado por el texto, parcial o totalmente según donde se haya puesto la directriz, pero la visualización depende de cada navegador.Ejemplo 1)
Texto con el que se relaciona el gráfico, pero sin estar alineados; el gráfico de 200 x 150 puntos se dispone a la derecha, por lo que el texto quedaría alineado a la izquierda de la pantalla.
en código html
<img src="../ilustra/gioconda.jpg" align="right" width=200 height=150 alt="Gioconda"> Texto con el que se relaciona el gráfico, pero sin estar alineados; el gráfico de 200 x 150 puntos se dispone a la derecha, por lo que el texto quedaría alineado a la izquierda de la pantalla.
Alineados con el texto
la posición relativa del gráfico respecto a la línea de texto que lo contiene, se controla mediante las directrices align="top", align="middle" y align="bottom", que alinean con el texto su parte superior, media o inferior, respectivamente.
Esta directriz es útil cuando los gráficos tienen una altura similar a la línea de texto, de lo contrario los espacios entre líneas quedarían alterados.Ejemplo 2)
La figura que sigue
en código html
La figura que sigue <img src="../marcas/flechar.gif" align="bottom" alt="B"> tiene su base alineada con esta línea de texto, la siguiente <img src="../marcas/flechar.gif" align="middle" alt="M"> es su parte media la alineada, y esta última <img src="../marcas/flechar.gif" align="top" alt="T"> es su parte superior la que está alineada con esta línea de texto.
El control de la posición relativa de texto y gráficos con estas directrices no es buena, por lo que conviene hacer una prueba en el navegador. No obstante sus posiciones relativas dependerán de la anchura de la ventana en pantalla y del tipo de navegador.
Gráficos y texto en tablas
Se consigue un mejor control mediante el uso de tablas, disponiendo el texto y el gráfico en celdillas aparte (ver detalles de construcción de tablas).
Para asegurar que no haya variaciones en la presentación en
pantalla hay que fijar los directrices de la tabla (anchura total y la
de cada celdilla) y del texto (tipo y tamaño de letra), de esta
forma lo que demos por definitivo, tras una prueba, se mantendrá
en la pantalla sin cambios (para contrastar la anchura conviene compararla
con una tabla de reborde 1, tipo y enmarcado 0, la misma anchura y algún
carácter como texto).
Hay variaciones de presentación entre navegadores (p. ej.: el texto incluido en la tabla se ajustó para Netscape).
Ejemplo 3)
Gráfico de 80 x 80. Texto, justificado en ambos márgenes, tipo New York, tamaño +1.
Tabla de 800 puntos de anchura, celdillas de 80 y 720 puntos de anchura respectivamente, con un enmarcado 3, tipo de celdilla 5 y reborde 1 (con tabla de prueba de 800 puntos)
 |
Para asegurar que no haya variaciones en la presentación en pantalla hay que fijar los directrices de la tabla (anchura total y la de cada celdilla) y del texto (tipo y tamaño de letra), de esta forma lo que demos por definitivo, tras una prueba, se mantendrá en la pantalla sin cambios (para contrastar la anchura conviene compararla con una tabla de reborde 1, tipo y enmarcado 0, la misma anchura y algún carácter como texto) |
| tabla de prueba de 800 puntos de anchura |
en código html
<table cellspacing=3 cellpadding=5 border=1 width="800">
<tr>
<td width="80"><img src="../ilustra/earth9.gif" width="80" height="80" alt="Tierra"></td>
<td width="720"><p align="justify"><font face="new york" size=+1>Para asegurar que no haya variaciones en la presentación en pantalla hay que fijar los directrices de la tabla (anchura total y la de cada celdilla) y del texto (tipo y tamaño de letra), de esta forma lo que demos por definitivo, tras una prueba, se mantendrá en la pantalla sin cambios (para contrastar la anchura conviene compararla con una tabla de reborde 1, tipo y enmarcado 0, la misma anchura y algún carácter como texto)</font></p></td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=1 width="800">
<tr>
<td align="center">tabla de prueba de 800 puntos de anchura</td>
</tr>
</table>
| Texto |
Enlaces |
Tablas |
Otros recursos |
© Marcos A. Lamolda 2003