En el primer capítulo hemos aprendido a realizar sencillas páginas web. En este segundo capítulo presentaremos dos elementos habituales de estos documentos, de una importancia fundamental: los gráficos y las tablas.

1. Las imágenes de un documento HTML

Las imágenes están presentes en los documentos HTML de muchas maneras: fotografías, dibujos, iconos, fondos, etc. Ninguno de estos elementos es imprescindible para una página web, pero todos son recomendables.

Antes de tratar sobre las cuestiones técnicas, conviene reflexionar acerca de la propia utilización de los gráficos en los documentos HTML.

1.1. Imágenes: consideraciones previas

• En muchas ocasiones, las imágenes no son otra cosa que el "maquillaje" del documento. Conviene que nuestras páginas sean bonitas, pero sin olvidar lo verdaderamente importante, el contenido, que habitualmente no son las imágenes.
• Aunque parezca estar en contradicción con lo anterior, a veces resulta más importante tener recursos en la edición de imágenes que en la propia edición HTML. Dicho de otra manera: para conseguir una buena página web, resulta casi imprescindible manejar algún programa de edición de imágenes (Paint Shop Pro, Photoshop, etc.).
• Para evitar que las imágenes parezcan meros "pegotes para hacer bonito", conviene integrarlas al máximo, conseguir que posean alguna función dentro del documento. La solución más obvia (además de no colocar imágenes sin relación directa con el tema tratado) es que resulten "pinchables", es decir, que remitan a sus propios enlaces (índices, anclas, contenidos secundarios, etc.).
• Conviene recordar que resulta muy sencillo hacerse con una pequeña biblioteca de imágenes a medida que navegamos por la red, puesto que la mayor parte de las veces pueden descargarse y almacenarse. (Basta con pinchar la imagen deseada con el botón derecho del ratón y selección la opción Salvar imagen como.) Por otra parte, la propia red dispone de miles de imágenes, al alcance de cualquier buscador (Google Images, por ejemplo)
• Un problema fundamental a la hora de introducir imágenes en un documento HTML es su "peso", es decir, su tamaño en bites. Cuantas más imágenes haya en un documento web, mayores y de mayor calidad, más ocuparán, y, por tanto, más tiempo tardará el usuario en descargarlas de la red. Conviene tener en cuenta lo siguiente:
  1. Los formatos de imágenes habituales en la Web son *.GIF y *.JPEG. Utilizar otros formatos ocupa habitualmente mucho más espacio y, además, resulta problemático.
  2. ¿Cuál de los dos formatos resulta más adecuado? El GIF permite, por su característico entrelazado, recargar progresivamente una imagen al abrir la página. Por su parte, el JPEG posee algo más de calidad en el tratamiento de los tonos (el GIF sólo maneja 256 colores), pero "pesa" más y tarda más en descargarse. En definitiva, para imágenes sin excesivas pretensiones de calidad (iconos, fondos, etc.) los dos formatos vienen a resultar equivalentes.
  3. Si, a pesar de todo, una imagen ocupa mucho espacio, una buena idea puede ser colocar en la página principal una pequeña imagen de baja calidad, a modo de icono, enlazada con la imagen completa.

1.2. Imágenes: las etiquetas

• La etiqueta básica para insertar una imagen es: <IMG SRC="dirección de la imagen">. De esta manera, el navegador visualizará la imagen contenida en la dirección especificada.¹
• Como puede verse, la imagen no forma parte de un documento HTML: éste sólo indica al navegador dónde puede descargarla.
• Esta etiqueta básica posee varios atributos, que se muestran en la siguiente tabla:

• Conviene hacer algunas aclaraciones con respecto a estos atributos:
  1. El "texto alternativo" se denomina así porque supone una verdadera alternativa al gráfico. Hay que tener en cuenta la posibilidad de que el navegador que visite nuestra página tenga desactivada la opción de "ver imágenes" (¡o incluso un error en el enlace por nuestra parte!), en cuyo caso sólo aparecería dicho texto.² En condiciones "normales", el texto alternativo posee la función de un pie de foto, puesto que aparece al posar el cursor sobre la imagen.
  2. El tamaño de la imagen puede modificarse, efectivamente, con <IMG width="¿?" height="¿?">, pero hay que tener en cuenta que los valores que señalemos aquí no alteren las proporciones de la imagen original. En cualquier caso, como norma general, es mejor efectuar todos los ajustes necesarios en un programa de edición gráfica (Paint Shop Pro, Photoshop, etc.) .
  3. Los ajustes de <IMG align> pueden referise a la línea de texto o al párrafo:
     • Una imagen pequeña (como un icono) puede presentarse dentro de una línea de texto. En este caso, puede alinearse justo sobre la línea del texto (<IMG align="top">), debajo (<IMG align="bottom">) o en el medio (<IMG align="middle">).³
     • Una imagen puede colocarse dentro de un párrafo, de modo que el texto se presente a la izquierda (<IMG align="right">) o a la derecha (<IMG align="left">) de la imagen.⁴
     • Una imagen puede presentarse formando su propio párrafo. En ese caso, una buena manera de alinearla es colocar la imagen dentro de una etiqueta <DIV>...</DIV>.
  4. Para que la imagen no presente bordes, el valor del atributo ha de ser <border="0">.
• Una imagen puede soportar su propio enlace.⁵ Para ello, basta con enlazar la etiqueta de la imagen de la manera ya conocida. Por ejemplo:
  <A HREF="fichero.html"><IMG SRC="imagen.gif"></A>
  .

1.3. Los fondos de pantalla

• Para mejorar su presentación general, un documento HTML puede llevar un fondo coloreado o una imagen, del tipo que sea.
• La instrucción para el fondo de pantalla se añade a la etiqueta del <BODY>:
  1. Si es un color de fondo, la etiqueta es, por ejemplo: <BODY BGCOLOR="#000088">.
  2. Si es una imagen de fondo, la etiqueta es: <BODY BACKGROUND="dirección">.
• Cuando se utiliza una imagen de fondo, suele tratarse simplemente de algún pequeño archivo con algún tipo de textura, que se coloca a modo de mosaico, como si fuera un papel pintado.⁶
• La utilización de fondos puede llegar a dificultar gravemente la lectura de los caracteres. Veámoslo con un doble ejemplo de color de fondo e imagen de fondo:

• Para solucionar este problema, existen etiquetas que permiten especificar el color del texto y de los enlaces:

• Conviene hacer algunas aclaraciones con respecto a estas etiquetas:
  1. En primer lugar, debe quedar claro que estas etiquetas no se refieren a las imágenes, sino al color de los caracteres del documento. Simplemente, éste es el momento adecuado para presentarlas.
  2. En principio, el color de los caracteres puede variar según los navegadores, puesto que depende de sus opciones por defecto. Estas etiquetas anulan dichas especificaciones por defecto, asegurando por tanto que todos los caracteres del documento se verán de igual manera en cualquier browser.
  3. Como estas etiquetas se insertan en la etiqueta <BODY>, afectan a todo el documento; son, por tanto, mucho más potentes que la etiqueta <FONT COLOR>.
• Veamos ahora cómo pueden mejorarse con estas nuevas etiquetas los ejemplo anteriores:

• Como puede observarse, el Ejemplo 2-b resulta prácticamente imposible de leer con esa definición de color. Podríamos buscar alguna combinación que destacase más, pero el verdadero problema de ese documento es que la imagen utilizada como fondo es inadecuada. La solución consiste –como mínimo– en tratar dicha imagen en un programa adecuado, para suavizar sus tonos.

inicio

• Las tablas permiten ordenar y alinear los elementos de un documento de una manera precisa.
• Las tablas son mucho más frecuentes de lo que parece a primera vista, puesto que, en la mayor parte de los casos, las líneas que las definen permanecen ocultas.
• Las etiquetas fundamentales que definen una tabla son las siguientes:

• Con estas etiquetas ya podemos definir una tabla, por ejemplo, de 2x2 (2 líneas, 2 columnas y 4 celdas):

• Para la primera fila de una tabla, que en muchas ocasiones contiene el encabezado o el título de las columnas, puede utilizarse la etiqueta <TH>...</TH> en lugar de la habitual <TD>...</TD>, porque el contenido de la celda aparece así centrado y en negrita.
• La etiqueta <CAPTION>...</CAPTION> permite introducir un pie de tabla. Puede especificarse la posición del pie con respecto a la tabla por medio de las siguientes atributos:

2.1. Las propiedades de la tabla

• La tabla del Ejemplo 3 es muy rudimentaria, puesto que no se ha definido ninguna de sus características generales, salvo el número de filas y columnas.
• La etiqueta <TABLE> posee una serie de atributos que permiten controlar sus características básicas. Se muestran en la siguiente tabla:

• Conviene realizar varias pruebas con distintos valores de los atributos anteriores para controlar adecuadamente el aspecto de las tablas. En cualquier caso, la tabla anterior puede actualizarse, por ejemplo, de la siguiente manera:

• Como es lógico, una tabla puede verse afectada por un considerable número de las etiquetas expuestas en los apartados anteriores.

2.2. Las propiedades de la celdas

• Cada celda dentro de una tabla puede contener todo tipo de elementos: texto, imágenes, enlaces, etc.
• Una celda puede incluso contener dentro de sí una tabla secundaria completa. De este modo, las tablas pueden anidinarse unas dentro de otras.
• El contenido de cada celda puede verse afectado por infinidad de etiquetas distintas, como cualquier otra porción de texto: fuentes, tamaños, colores, alineados, etc.
• En el subapartado anterior, hemos presentado las propiedades generales de la tabla. Vamos a ver ahora cómo controlar las propiedades que afectan a una fila o a una única celda:

• Los parámetros de esta tabla pueden aplicarse tanto a filas enteras como a una única celda.
• Un mismo parámetro (el tamaño, el color de fondo, etc.) puede especificarse para toda la tabla, para cada fila o para cada celda. Es importante, por tanto, que los valores de las distintas indicaciones no resulten contradictorios.
• En cualquier caso, la regla general es que la especificación en una unidad menor se impone a la especicación de una unidad mayor. Así por ejemplo, el valor de alineamiento de una celda se impone al alineamiento general de toda una fila.
• Todas las celdas de una fila son por defecto de igual anchura, pero se van ajustando al contenido,⁷ por lo que muy probablemente se desajustarán al introducir distintos caracteres en cada una de ellas. Para evitar este problema, es necesario utilizar el atributo <TD width>, como se muestra en el siguiente ejemplo:

• Hasta este momento, sólo hemos manejado tablas homogéneas, es decir, con un número constante de filas y columnas. Sin embargo, las tablas suelen adoptar otras muchas formas.
• Para conseguir una tabla asimétrica hay que ir agrupando las celdas, bien en la fila, bien en la columna. Las etiquetas para este proceso son las siguientes:

• El siguiente ejemplo muestra el etiquetado de un par de tablas asimétricas:

• En definitiva, la creación de tablas es poco menos que un "arte", que depende no sólo del dominio técnico, sino de la imaginación y del sentido del creador. Por ejemplo, puedes ver aquí un ejemplo algo más trabajado, aunque ciertamente feo. La posibilidades de las tablas son prácticamente ilimitadas.
• El manejo del etiquetado de las tablas no es defícil pero sí complicado, porque exije una gran minuciosidad. Aunque utilicemos un editor de HTML.

inicio

Notas

inicio