HTML – Hiperenlaces titulados

Objetivo: recomendar el uso del atributo title para facilitar información útil en un hiperenlace.

Todo comenzó con el elemento <img>. Esta etiqueta HTML siempre ha dispuesto, tradicionalmente, de un atributo, alt, en el que indicábamos información adicional que los navegadores mostraban en el caso de que, por la razón que fuera, no se llegara a cargar la imagen.

Este tipo de funcionalidad extra se ha demostrado muy útil en muchos más elementos, además de en <img>, hasta el punto de que un buen número de ellos dispone hoy día de un atributo, denominado title, para titular escuetamente la función del elemento. El texto que facilitemos a ese atributo podrá ser empleado por los navegadores a la hora de visualizar (o incluso escuchar) la página. Además, title suele gustar bastante a los robots que se dedican a escudriñar las páginas por la red, por lo que un uso adecuado puede ayudarte a mejorar el posicionamiento de tu página en un buscador.

El propio elemento <img> dispone también de un atributo title, pese a contar ya con alt. La diferencia entre ambos suele prestarse a confusión.

Nuestros potentes hiperenlaces con <a> no podían ser menos, de modo que en su colección de atributos permitidos incluyen también title.

Observa el siguiente código HTML:

Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/" title="Índice completo de la categoría HTML">índice completo</a> de artículos sobre HTML.

Este es su efecto:

Este es el índice completo de artículos sobre HTML.

Ahora, sin hacer clic sobre el enlace, posiciona simplemente el ratón sobre él. Verás que te aparece un texto emergente, junto al puntero, que reza Índice completo de la categoría HTML.

Interesante, ¿verdad? Ahora ya sabemos qué podemos esperarnos al otro lado antes de hacer clic en el enlace, algo que no siempre resulta obvio. Por ejemplo, fíjate en esto otro:

Para acceder al índice sobre HTML pulsa aquí.

Ignorando el texto previo, la palabra hiperenlazada (“aquí”) no guarda relación semántica con el destino del hiperenlace. Naturalmente, en la barra de estado nos aparecerá, normalmente la dirección a la que apunta, pero aún así puede no ser perfectamente explicativa. El atributo title identifica claramente el destino, como puedes comprobar dejando el ratón sobre el enlace.

De todos modos, procura evitar un uso como el anterior. Intenta, en la medida de lo posible, que el texto disparador del hiperenlace, el que aparece subrayado, que es el que colocamos entre las etiquetas <a> ... </a> guarde relación semántica con el destino, tal como hicimos en el primer ejemplo.

Y, por supuesto, utiliza title siempre.

Javier Montero Gabarró


HTML – Hiperenlaces titulados


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

HTML – Hiperimágenes saltarinas

Objetivo: aprender el código HTML necesario para crear un hiperenlace a partir de una imagen.

Eh Hipertexto saltarín vimos el secreto de la magia de la web que permitía tejer una red de contenidos enlazados. El elemento <a> era el responsable de esa magia.

Hagamos un breve resumen: entre las etiquetas de apertura y cierre, <a> ... </a> facilitábamos el texto que activaría el salto cuando el usuario hiciera clic sobre él (que suele visualizarse subrayado). El atributo href contenía la dirección a la que se saltaría. Por ejemplo, una línea como la siguiente:

Este es el índice de artículos relacionados con HTML.

se generaría del siguiente modo:

Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/">índice</a> de artículos relacionados con HTML..

Quiero plantear hoy la siguiente cuestión: ¿y si, en vez de una palabra o frase, queremos que el activador del salto sea una imagen?

Por ejemplo, fíjate en la oveja experta en HTML que aparece a continuación, pillada en el momento en el que se disponía a darse un homenaje en forma de patatas bravas. Si haces clic sobre ella se te abrirá una página con el índice de artículos relacionados con HTML.

¿Cómo se hace eso en HTML?

La respuesta ya la sabes, aunque no lo creas:

1) Sabes cómo referenciar imágenes.

2) Sabes que lo que esté entre las etiquetas <a> ... </a> será el activador del hiperenlace.

Por lo tanto, si quieres que el activador sea una imagen, coloca el código que la referencia entre las etiquetas <a> ... </a>.

Este es el código que mostraría la imagen:

<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />

Para que actúe de hiperenlace, la situamos entre <a> ... </a>:

<a><img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" /></a>

Finalmente, introducimos la dirección de destino (el índice con todos los artículos de HTML) como valor del atributo href dentro de la etiqueta de apertura <a>:

<a href="http://elclubdelautodidacta.es/wp/indice-html/">
<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />
</a>

Así de sencillo…

Javier Montero Gabarró


HTML – Hiperimágenes saltarinas


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

HTML – Hipertexto saltarín

Imágenes en HTML - El títuloPuede que ahora, con páginas webs tan elaboradas e interactivas, no te des cuenta… Pero, sin lugar a dudas, el elemento distintivo de una página web siempre ha sido esa capacidad de enlazar contenidos a través de los hiperenlaces.

Si quieres aprender a generar esos textos subrayados que te hacen saltar a otra página cuando haces clic sobre ellos, sigue leyendo…

Para crear un hiperenlace, necesitamos presentar a un nuevo elemento. Apréndetelo bien, pues con él saltaremos al hiperespacio:

<a> ... </a>

Supongamos que queremos escribir un párrafo como el siguiente:

“Este es un ejemplo de lista con múltiples niveles de anidación en HTML.”

El primer paso consiste en escribir entre ambas etiquetas el texto que queremos que aparezca subrayado, que será el que nos invitará a hacer clic sobre él para transportarnos. En nuestro caso:

<a>lista con múltiples niveles</a>

A continuación debemos indicar a dónde saltaremos. Para ello, el elemento <a> dispone del atributo href (de hypertext reference), al que facilitaremos, entre comillas, la URL de destino.

Búscalo dentro de la etiqueta <a> de apertura y observa el texto desde el que se activará entre ambas.

<a href="http://dl.dropbox.com/u/4631191/blog/html/listas-anidadas-2b.html">listas con múltiples niveles</a>

En este ejemplo, hemos indicado la URL absolutamente, pero también podríamos haberlo hecho relativamente a la página actual:

href="python.html"

Enlazaría a la página python.html existente en el mismo directorio en el que se halla la página actual.

href="programacion/python.html"

Enlazaría a la página python.html que existe dentro de la carpeta programacion que hay en el mismo directorio en el que se encuentra la página actual.

href="../programacion/python.html"

Como lo anterior, pero en este caso la carpeta programacion existe no en el directorio actual, sino en el que está por encima. Los dos puntos .. representan al directorio padre.

Y eso es todo, de momento. En sucesivas entregas iremos sacándole más punta al elemento <a>. Ahora permíteme que practique lo aprendido poniendo un hiperenlace en la firma…

Javier Montero Gabarró


HTML – Hipertexto saltarín


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – III: Un texto alternativo

Hagamos balance de la situación: ya sabemos referenciar imágenes en nuestra página web con el elemento <img> y el atributo src, así como la conveniencia de indicar su tamaño para facilitar el trabajo al navegador.

Hay ocasiones en las que, por determinadas circunstancias, no se descargan las imágenes. Quizás apunten a un fichero inexistente, o puede que hayamos desactivado su descarga para agilizar la carga de la página. O tal vez estemos empleando un navegador en modo texto como Lynx. En esos casos sería muy práctico, a pesar de todo, poder hacernos una idea de cuál es el contenido de la imagen.

Para ello disponemos del atributo alt, al que le facilitamos, entre comillas, un breve texto alternativo describiendo la imagen.

Por ejemplo, he aquí la oveja experta:

<img src="expertahtml.jpg" alt="La oveja experta en HTML" height="283" width="213" />

El texto alternativo indicado en alt aparecerá en el caso de que no se llegue a cargar la imagen.

En algunos navegadores antiguos ese texto se mostraba incluso en imágenes cargadas cuando situábamos el ratón encima de ellas, pero debes saber que eso no es lo que determina la especificación.

Acostúmbrate a usar siempre el atributo alt cuando trates con imágenes. No sólo harás tu página más funcional, sino que, además, será mejor valorada por los buscadores. De hecho, si quieres escribir código XHTML estricto, se trata de una exigencia absoluta.

Naturalmente, hay situaciones en las que no es deseable facilitar un texto alternativo. Si tienes gráficos asociados al diseño estructural de la página como, por ejemplo, las viñetas previas a un menú, no aporta nada, y es incluso molesta, la presencia de texto alternativo. En estos casos, para cumplir con las exigencias de XHTML, bastaría con facilitar al argumento alt una cadena de texto vacía, alt="".

Javier Montero Gabarró


Fecha de última actualización: 20 de abril de 2012


Imágenes en HTML – III: Un texto alternativo


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – II: El tamaño sí importa

La oveja experta en HTML nos presentó en la anterior entrega los rudimentos del tratamiento de imágenes a través del elemento <img>. Vimos cómo indicar la ubicación de la imagen mediante el atributo src, al que le facilitábamos la URL de origen. Aprendimos también algo sobre el modo como el navegador presenta las imágenes junto al texto. Abundemos algo más en este sentido.

Observa la siguiente página, en la que la mencionada experta se hace acompañar por un puñado de ovejas especializadas en armonía musical.

Este es el fragmento de código que genera esa disposición:

<body>
<img src="expertasarmonia.jpg"/>
<img src="expertahtml.jpg" />
Está bien tener un buen rebaño de ovejas especializadas...
</body>

Date cuenta de que la primera imagen es de altura inferior a la segunda. Observa que el punto de inserción del texto depende del espacio que ocupen las imágenes.

Esto tiene sus implicaciones. Analicemos lo que está sucediendo en cámara lenta:

El navegador, en primer lugar, se trae del servidor el código de la página que quiere mostrar. Una vez hecho lo analiza y comienza la descarga de las imágenes que se encuentra en el código. Entre tanto, sin esperar a que estén disponibles, puede ir mostrándonos el texto de la página para que vayamos entreteniéndonos. Pero no es hasta el momento en el que sabe las dimensiones de la imagen cuando puede mostrarnos el formato definitivo.

Con anchos de banda grandes esto no suele ser problemático, pues todo sucede muy rápido. Sin embargo, en situaciones de baja velocidad, o en páginas con imágenes muy grandes y numerosas, suele pasar un tiempo apreciable hasta que disponemos de la página en plenitud de formato.

Esto es algo desagradable, pero existe una manera muy sencilla de evitarlo: especificando de antemano cuáles son las dimensiones de la imagen a presentar. De este modo, el navegador reservará inmediatamente el espacio adecuado en la página y podrá mostrarnos el texto con la garantía de que no lo descabalará más adelante. Las imágenes podrán ir descargándose a su ritmo, pero al menos el formato definitivo ya podrá ser presentado.

Para indicar las dimensiones de la imagen tenemos dos nuevos atributos: height y width, que significan en inglés alto y ancho, respectivamente. Como valor indicamos los tamaños en píxeles.

Esta sería, pues, una forma mejor de mostrar al ganado:

<body>
<img src="expertasarmonia.jpg" height="170" width="227" />
<img src="expertahtml.jpg" height="283" width="213" />
Está bien tener un buen rebaño de ovejas especializadas...
</body>

¿Mucho trabajo acaso calcular las dimensiones en píxeles de una imagen? En absoluto, hay mil maneras de hacerlo. Por ejemplo, basta con consultar las propiedades del fichero. Usando el explorador de archivos de Windows aparecería algo como esto:

Entonces me pregunto, ¿podría utilizar esos mismos atributos de alto y ancho para redimensionar una imagen?

La respuesta es sí, pero no es lo recomendable.

En primer lugar, como las dimensiones nuevas no conservaran la proporción la imagen aparecería deformada, lo cual es algo cutre.

En segundo lugar, aunque las proporciones fueran las correctas e incluso aunque redujeras la imagen de tamaño, estarías forzando al navegador al trabajo extra de reprocesar la imagen. Además, estarías consumiendo ancho de banda inútil, pues aunque hicieras la imagen más pequeña, el fichero del servidor sería el mismo y tendrías que bajar la imagen en su resolución y tamaño original.

Es mucho más eficiente utilizar cualquier programa de retoque de imágenes y redimensionar el fichero original, algo que apenas lleva unos segundos.

Nada más; a esperar que la oveja nos presente la tercera entrega…

Javier Montero Gabarró


Imágenes en HTML – II: El tamaño sí importa


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – I: El origen

Aprender es como colocar piezas en un puzzle. Al principio no son más que elementos aislados que, con un poco de suerte, podemos intuir pertenecen a alguna zona determinada de la figura. Poco a poco las piezas se van uniendo formando pequeñas islas que después se hacen continentes.

En el camino hacia la habilidad de saber hacer páginas web con HTML, vamos a colocar hoy una pieza pequeña pero importante: aprenderemos a insertar imágenes en nuestras páginas.

¿Sabías que al principio la web estaba basada en texto? No fue hasta la aparición del navegador Mosaic cuando se popularizó la WWW con imágenes. Mis primeros pinitos en la nueva web los hice con Mosaic (llevo ya unos cuantos años en esto) y recuerdo con cariño la indescriptible emoción que me asistía cuando navegaba. Era pura magia. Hoy día esto se da por sentado, pero por entonces era apasionante.

Vamos a aprender hoy lo más básico que hay que saber para insertar un gráfico en una página web. En las sucesivas entregas iremos profundizando en el tema.

Para añadir un gráfico disponemos del elemento <img>.

A veces me referiré a elemento o etiqueta indistintamente. Debes saber que un elemento está compuesto por la etiqueta de inicio, el contenido y la etiqueta de cierre.

<img> pertenece al tipo particular de elementos que no requieren una etiqueta de cierre, pues no hay nada entre medias que contener. Todo lo necesario para la inserción de la imagen se especifica en la etiqueta de apertura a través de sus atributos.

Para poder insertar una imagen necesitamos indicar dónde se encuentra. Para eso disponemos del atributo src, al que le facilitaremos la URL de origen.

Por ejemplo:

<img src="http://dl.dropbox.com/u/4631191/blog/knoppix-logo.gif" />

En este caso la imagen se halla en un sitio diferente al que reside la página en sí.

Normalmente las imágenes residirán en la misma máquina, por lo que bastará con indicar el camino relativo desde donde estamos para llegar a la imagen.

Por ejemplo:

<img src="expertahtml.jpg" />

Con esta línea, el navegador tratará de descargar la imagen expertahtml.jpg que esperará encontrar en el mismo directorio que el de la página actual.

Otros ejemplos de especificación de un camino relativo:

<img src="../expertahtml.jpg" />

En este caso buscará la imagen en el directorio padre del directorio actual (los dos puntos simbolizan al directorio padre).

<img src="img/expertahtml.jpg" />

Aquí el fichero se halla en la carpeta img existente en el directorio actual.

También podemos especificar un camino absoluto. En este caso hay que preceder la ruta con el esquema file:, como en el siguiente ejemplo:

<img src="file://c:\imagenes\expertahtml.jpg" />

Observa cómo hemos cerrado la etiqueta. Al tratarse de elementos sin etiqueta de cierre, las normas de XHTML nos fuerzan a terminar de esa forma la única etiqueta que hay. En HTML5 las normas no son tan estrictas y podemos elegir qué modo de cierre preferimos, por lo que también sería válido lo siguiente:

<img src="file://c:\imagenes\expertahtml.jpg">

Hay diversidad de opiniones sobre qué es lo más conveniente…

Vamos a ver ahora como los navegadores nos presentan las imágenes. Comencemos por el caso más simple en el que hay una imagen sin texto alguno. He aquí el cuerpo de la página:

<body>
<img src="expertahtml.jpg"/>
</body>

Observa su efecto en este enlace. Fíjate como la imagen aparece situada en la esquina superior izquierda.

Añadamos ahora algo de texto:

<body>
Esta es la oveja experta en HTML.<img src="expertahtml.jpg" />
Hay ovejas expertas en cada área de conocimiento.
</body>

Observa qué sucede. En el punto donde termina la escritura de la primera frase inserta la imagen. Y lo hace situando ahí su esquina inferior izquierda. Para ello, hace el hueco necesario en la parte superior, desplazando el texto todo el espacio que haga falta. La siguiente frase continúa a partir de la esquina inferior derecha.

Finalmente, consideremos el siguiente código:

<body>
Esta es la oveja experta en HTML.
<br />
<img src="expertahtml.jpg" />Hay ovejas expertas en cada área de conocimiento.
</body>

Esta vez hay un salto de línea, además de la imagen, entre ambas frases. Mira cómo se visualiza el conjunto. Tal como es de esperar, la imagen se inserta en el punto donde debería empezar la escritura, dejando el espacio vertical necesario. Una vez hecho esto el texto continúa a partir de la esquina inferior derecha.

Nada más por hoy. Quédate con esta pieza; por los colores no te costará ubicarla dentro del marco del puzzle…

Javier Montero Gabarró


http://elclubdelautodidacta.es/wp/2012/03/imagenes-en-html-i-el-origen/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Tablas HTML con celdas irregulares – 3 de 3

En las dos últimas entregas presentamos los atributos colspan y rowspan , que nos permitían combinar celdas contiguas en una tabla. Quiero proponerte ahora un ejercicio avanzado que estoy seguro sabrás resolver si has comprendido lo hasta ahora explicado.

Se trata de escribir el código HTML que genera la siguiente tabla:

Tómate el tiempo que necesites para resolver el problema.

¿Atascado en alguna parte? ¿Algún concepto un tanto difuso aún? Si, a pesar de todo, te cuesta hallar la solución, sigue leyendo, entonces…

Recordemos el procedimiento para diseñar este tipo de tablas sin problemas:

1) Procesar los elementos fila a fila, comenzando por la primera, y de izquierda a derecha, es decir, del mismo modo que realizamos la lectura de un libro.

2) No debemos incluir celdas que pertenezcan a una extensión ya iniciada en una definición anterior.

Según esto, en la primera fila nos encontraríamos con tres definiciones de datos: la primera (alfa) extiende la celda tres columnas horizontalmente, la segunda (bravo) es normal y la tercera (charlie) extiende dos filas verticalmente.

<tr>
  <td colspan="3">alfa</td><td>bravo</td><td rowspan="2">charlie</td>
</tr>

La segunda fila contiene cuatro definiciones, pues su última celda pertenece a una extensión que se realizó en la primera fila.

<tr>
  <td>delta</td><td>echo</td><td>foxtrot</td><td>golf</td>
</tr>

La tercera fila es suculenta: contiene tres definiciones y la segunda (india) es peculiar, pues contiene una expansión tanto horizontal como vertical.

<tr>
  <td>hotel</td><td colspan="3" rowspan="2">india</td><td>juliet</td>
</tr>

Presta mucha atención a cómo hemos incluido, dentro de la misma etiqueta td, tanto el atributo colspan como rowspan.

En la cuarta fila debemos definir sólo dos elementos, uno al principio y otro al final, pues las tres hipotéticas celdas centrales pertenecen a una extensión que se inició en la fila anterior.

<tr>
  <td>kilo</td><td>lima</td>
</tr>

Por último, la quinta fila es completamente normal, con sus cinco definiciones de datos, una para cada columna. Me he permitido incluirla en el diseño para que se reflejen bien los límites de cada columna y se dimensionen con claridad todas las extensiones anteriores.

<tr>
  <td>mike</td><td>november</td><td>oscar</td><td>papa</td><td>quebec</td>
</tr>

Este es el código completo del diseño:

<table border="1">
<tr>
  <td colspan="3">alfa</td><td>bravo</td><td rowspan="2">charlie</td>
</tr>
<tr>
  <td>delta</td><td>echo</td><td>foxtrot</td><td>golf</td>
</tr>
<tr>
  <td>hotel</td><td colspan="3" rowspan="2">india</td><td>juliet</td>
</tr>
<tr>
  <td>kilo</td><td>lima</td>
</tr>
<tr>
  <td>mike</td><td>november</td><td>oscar</td><td>papa</td><td>quebec</td>
</tr>
</table>

Y, colorín colorado, esta tabla se ha acabado…

Javier Montero Gabarró


Tablas HTML con celdas irregulares – 3 de 3


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Tablas HTML con celdas irregulares – 2 de 3

Ayer comenzamos el tratamiento de las tablas irregulares en HTML y aprendimos el modo de extender las celdas horizontalmente utilizando el atributo colspan. Aplicando la misma aproximación por filas que tan bien nos ha funcionado hasta el momento, aprenderemos cómo extender celdas verticalmente.

Esta es la tabla que diseñaremos hoy:

Esto es como jugar a los barquitos. Comencemos por la primera fila:

Las tres primeras celdas son normales:

<td>manzana</td><td>pera</td><td>fresa</td>

La cuarta es la que presenta la extensión vertical. El atributo con el que la indicaremos es rowspan, tomando como valor el número total de celdas que ocupa la extensión.

<td rowspan="3">naranja</td>

La fila primera es, por lo tanto:

<tr>
  <td>manzana</td><td>pera</td><td>fresa</td><td rowspan="3">naranja</td>
</tr>

Presta mucha atención ahora a como creamos la segunda fila. La idea es la siguiente: sólo contabilizaremos aquellas celdas que no formen parte de una extensión ya comenzada. Es decir, únicamente aparecerán las normales o las que comiencen una extensión.

Aplicando este principio, la definición de las celdas es sencilla. La primera celda es normal:

<td>melón</td>

La segunda comienza una extensión, por lo que debe figurar (con su correspondiente valor de rowspan):

<td rowspan="2">sandía</td>

La tercera celda vuelve a ser normal:

<td>pomelo</td>

La cuarta celda forma parte de una extensión ya iniciada, por lo que no se indica nada, quedando la fila completa definitivamente sólo con tres definiciones <td>:

<tr>
  <td>melón</td><td rowspan="2">sandía</td><td>pomelo</td>
</tr>

En la tercera fila aparecen dos extensiones ya iniciadas, por lo que sólo figurarán dos definiciones <td> (4 – 2 = 2):

<tr>
  <td>cereza</td><td>kiwi</td>
</tr>

Finalmente, la última fila es completamente normal:

<tr>
  <td>uva</td><td>ciruela</td><td>níspero</td><td>granada</td>
</tr>

Y nuestra tabla al completo queda definida, entonces, del siguiente modo:

<table border="1">
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td><td rowspan="3">naranja</td>
</tr>
<tr>
  <td>melón</td><td rowspan="2">sandía</td><td>pomelo</td>
</tr>
<tr>
  <td>cereza</td><td>kiwi</td>
</tr>
<tr>
  <td>uva</td><td>ciruela</td><td>níspero</td><td>granada</td>
</tr>
</table>

En la próxima y última entrega dedicada a las tablas irregulares contemplaremos el caso en que haya celdas que se extienden a la vez en sentido horizontal y vertical. Con lo explicado en estos dos artículos debería bastarte para resolver el problema por ti mismo y te invito a comprobarlo. No obstante, daremos la solución detallada.

Tocado – Tocado –

La próxima será Hundido.

Javier Montero Gabarró


Tablas HTML con celdas irregulares – 2 de 3


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Tablas HTML con celdas irregulares – 1 de 3

Continuamos el estudio de las tablas en HTML rizando el rizo. En este artículo y en los dos siguientes aprenderemos a diseñar tablas que presentan celdas irregulares, resultado de combinar celdas contiguas entre sí.

Echa un vistazo a la tabla siguiente y verás de qué estoy hablando.

Observa como, en la primera fila, la segunda celda tiene una anchura de dos columnas. En la tercera fila, la primera celda tiene una anchura de tres columnas y la segunda de dos.

Como siempre, nos aproximaremos al diseño fila a fila. Comencemos por la primera.

La primera celda es normal, por lo que la definiremos exactamente del modo que explicamos en los artículos anteriores:

<td>manzana</td>

La siguiente celda tiene trampa, pues presenta una anchura de dos columnas. Existe un atributo para especificar el ancho de una celda en columnas: colspan.

Puesto que la celda ocupa dos columnas, este atributo tomará 2 como valor:

<td colspan="2">pera</td>

Las dos celdas siguientes son normales:

<td>fresa</td><td>naranja</td>

La primera fila queda, entonces, definida del siguiente modo:

<tr>
  <td>manzana</td><td colspan="2">pera</td><td>fresa</td><td>naranja</td>
</tr>

Sólo hay cuatro pares <td>...</td>, en lugar de 5, ya que hay una celda ocupa lo de dos.

La segunda fila no presenta misterio alguno:

<tr>
  <td>melón</td><td>sandía</td><td>pomelo</td><td>cereza</td><td>granada</td>
</tr>

Finalmente, la tercera tiene dos celdas irregulares, la primera de tres columnas de ancho:

<td colspan="3">melocotón</td>

Y la segunda de dos:

<td colspan="2">kiwi</td>

Ya tenemos, entonces, nuestra tabla al completo:

<table border="1">
<tr>
  <td>manzana</td><td colspan="2">pera</td><td>fresa</td><td>naranja</td>
</tr>
<tr>
  <td>melón</td><td>sandía</td><td>pomelo</td><td>cereza</td><td>granada</td>
</tr>
<tr>
  <td colspan="3">melocotón</td><td colspan="2">kiwi</td>
</tr>
</table>

En el próximo artículo veremos cómo extender las celdas verticalmente. No te supondrá ningún problema si has comprendido lo explicado aquí.

Javier Montero Gabarró


Tablas HTML con celdas irregulares – 1 de 3


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Encabezados en las tablas HTML

En el artículo anterior vimos el procedimiento básico para crear tablas en HTML. Hoy voy a explicarte cómo mejorar la presentación definiendo encabezados que sirvan de títulos a las filas o columnas.

Abre la página de ejemplo y déjala a la vista en una ventana o pestaña aparte, pues acudiremos a ella continuamente.

La Tabla 1 ya la conoces. Es una simple matriz de datos de dos filas por tres columnas que nos servirá como conejillo de indias y sobre la que realizaremos todo tipo de perversiones.

Recordemos su código:

Tabla 1
<table border="1">
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

Vimos que el método para crearla era aproximarnos a ella fila a fila, cada una contenida entre las etiquetas <tr> ... </tr>. Cada celda individual dentro de una fila se delimitaba con las etiquetas <td> ... </td>. Todo el conjunto quedaba encerrado entre <table> ... </table>.

Los encabezados de una tabla, sus títulos, no son más que celdas que tienen un formato diferente al de una celda normal. Los navegadores suelen presentarlas destacando su contenido en negrita. Obsérvalo en las tablas 3, 4 y 5 del ejemplo.

El único secreto que tiene la confección de encabezados es entender que pueden aplicarse a cualquier celda, no sólo a la primera fila o columna. Observa la Tabla 2 y fíjate cómo aparecen destacados elementos que estrictamente no constituyen un encabezado. Para crearlos, basta con cambiar la etiqueta de sus celdas: en vez de <td> empleamos <th> (de table header, cabecera de tabla).

Este es el código que genera la tabla:

Tabla 2
<table border="1">
<tr>
  <th>manzana</th><td>pera</td><th>fresa</th>
</tr>
<tr>
  <td>tomate</td><th>cebolla</th><td>pepino</td>
</tr>
</table>

Fíjate cómo aquellos elementos que queremos destacados tienen la etiqueta <th> y los que no <td>.

Entendido esto el resto no tiene historia. Vamos a programar la Tabla 3, en la que la fila superior titula cada columna.

Tenemos tres filas (la de título más las dos de datos), por lo que nos aparecerán tres secciones <tr>. En la primera fila todas sus celdas están destacadas, por los que su etiqueta será <th>.

Tabla 3
<table border="1">
<tr>
  <th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La Tabla 4 ilustra un ejemplo en el que los encabezados titulan cada fila. Tenemos dos filas por cuatro columnas esta vez. Sólo el primer elemento de cada fila tendrá por etiqueta <th>.

Tabla 4
<table border="1">
<tr>
  <th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La Tabla 5 tiene títulos tanto en las filas como en las columnas. En este caso, el primer elemento de la primera fila no contiene dato alguno, pero aún así ponemos el par de etiquetas <td></td>, aunque no haya nada entre ellas. Las restantes celdas de la fila son encabezados. En las filas 2 y 3, sólo el primer elemento es un encabezado. El código te ilustrará esto con claridad:

Tabla 5
<table border="1">
<tr>
  <td></td><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
  <th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

En el próximo artículo veremos cómo crear tablas con celdas irregulares, resultado de combinar entre sí celdas contiguas.

Javier Montero Gabarró


Encabezados en las tablas HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta