Cuando se crean páginas web, es habitual repetir una y otra vez algunos trozos de código HTML, como por ejemplo las tablas, los formularios y la cabecera de las páginas. Para no tener que reescribir continuamente el mismo código, se utilizan los fragmentos de código, llamados “snippets” en inglés.

Snippets

Crear fragmentos de código y trabajar con ellos es un proceso muy sencillo. A continuación se muestran los pasos necesarios para crear un fragmento correspondiente a una tabla completa de XHTML:

1. Se escribe el código XHTML completo de una tabla vacía (con sus etiquetas <caption>, <thead>, <tbody>, <tfoot>, sus atributos summary, scope, etc.)
2. Se guarda el código anterior en un archivo de texto con un nombre fácil de identificar (por ejemplo, “Tabla XHTML”).
3. Cuando se necesite insertar una tabla en una página XHTML, se copia y se pega todo el código creado anteriormente y se completa con los datos necesarios.

El método descrito anteriormente no es muy eficiente si se realiza de forma manual. Afortunadamente, muchos programas utilizados para el diseño web permiten gestionar de forma más cómoda los fragmentos de código o snippets.

Caption

Es el encargado de darle un título descriptivo a las tablas. Sus etiquetas son: <caption> y </caption> (ambas obligatorias).

Crea una caja:

Está definido como: Elemento para tablas.

Puede contener: Texto y/o cero o más elementos en línea.

El cual se visualiza así:

El siguiente código:

  <table border='1'>
   <caption>Título de una Tabla con caption</caption>
    <tr> <td> tabla de una celda. </td>  </tr>
  </table>

Tabla de cabecera, cuerpo y pie

Estas tres tablas se utilizan en combinación para crear una tabla con cabecera, cuerpo, y pie.

1. thead

The Table Head element «tabla de cabecera» o también conocido como thead, es un elemento, que como su nombre lo indica, define la cabecera de una tabla. Entonces, cómo vimos en el caso anterior, la etiqueta thead requiere un tag de apertura y uno de cierre, los cuales son: <thead> y </thead>.

Para hacer eso, necesitamos el siguiente código:

   <table border='1'>
    <caption>Título caption</caption>

<br>

    <thead>
        <tr>
            <th scope="col">título</th>
            <th scope="col">thead</th>
        </tr>
    </thead>


</table>

2. tbody

Lo mismo ocurre con la tabla del cuerpo o tbody, cuyas tags son <tbody> y </tbody>.

Entonces, un ejemplo de ello podría ser:

Cuyo código es:

   <table border='1'>
    <caption>Título caption</caption>

<br>

    <thead>
        <tr>
            <th scope="col">título</th>
            <th scope="col">thead</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Venta queso</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Venta jamón</th>
            <td>18,000</td>
        </tr>
    </tbody>

</table>

3. tfoot

Ahora, que ya tenemos los dos primeros snippets, resta sólo añadir la tabla del pie. Esta tabla es igual que las anteriores, pero va en el final, pues, generalmente se utiliza para indicarnos el total de algo.

Veamos el código completo:

   <table border='1'>
    <caption>Título caption</caption>

<br>

    <thead>
        <tr>
            <th scope="col">título</th>
            <th scope="col">thead</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Venta queso</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Venta jamón</th>
            <td>18,000</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>

Webcode.tools

A continuación se muestra la forma de trabajar otros fragmentos de código con una herramienta muy interesante llamada webcode.tool.

Pero, como hoy estamos viendo HTML, vamos a ir al HTML Generator.

Allí encontraremos una gran cantidad de elementos HTML prediseñados, tales cómo:

Entonces, para ver un ejemplo simple. Vamos a ir a OTHER, y luego al generador de HYPERLINK.

HTML Hyperlink Generator

Luego de hacer clic en el generador de enlaces, veremos lo siguiente:

Estas son todas las opciones que tenemos para crear un hyperlink. Algunas opciones destacables son que dentro del tipo de hiperlink tenemos las tres opciones utilizadas a día de hoy: url; mailto; tel.

Entonces, lo que debemos hacer es, simplemente completar el cuadro de OPTIONS de manera correcta, para que en la sección de PREVIEW se pueda visualizar lo que estamos creando. Una vez hecho esto, simplemente copiamos el código, y lo llevamos hacia donde queremos insertarlo y listo.

Para ello, recomiendo que trabajes todo en Visual Studio Code.