ANEXO II. Includes

Cuando queremos insertar un mismo trozo de página en todas nuestras páginas (ya sea una cabecera, un índice, un pie de página, etc), podemos o repetir todo el trozo de código html en todas nuestras páginas o incluir en cada una de ellas una etiqueta que indique que ahí va un trozo de html.
Ese trozo de html debe ser código que unido a todo el código de la página que lo incluye, sea código correcto y coherente.

La implementación de los includes, se hace mediante una etiqueta html, de la forma:
<!--#include file="enlaces.h" --> o <!--#include virtual="../pie.h" -->
Le extensión del archivo incluido puede ser cualquiera (en el ejemplo .h), no así la del archivo contenedor que debe tener la extensión .shtml.

¿Qué ventajas conseguimos con este método?
supongamos que lo que vamos a incluir en todas nuestras páginas es un índice idéntico para todas ellas, y nuestro índice contiene 5 enlaces. Pasados unos meses, vemos que existe la necesidad de ampliar ese índice con un enlace más.
Si no hemos usado "includes", debemos ir página por página e incluir el enlace en el índice, en el sitio adecuado y con el estilo (fuente, tamaño, etc) adecuado.
Si hemos usado "includes" en nuestras páginas, lo único que debemos cambiar es el fichero que contiene el índice y añadirle el nuevo enlace. De esta forma, se actualiza inmediatamente en todas las páginas que lo contienen.
Los includes, sustituyen el funcionamiento de los antiguos "frames" o marcos, pero sin los incovenientes que éstos tenían (a la hora de imprimir, de anotar la dirección (URL), etc).
Ejemplo:
index.shtml

______________________________
CABECERA
______________________________
enlace 1 |
enlace 2 | Contenidos
enlace 3 |
______________________________

Una manera de implementar esto con includes es:
<table>
<tr>
<th colspan="2"> CABECERA </th>
</tr>
<tr>
<td> <!--#include file="enlaces.h" --> </td>
<td> Contenidos </td>
</tr>
</table>

El archivo enlaces.h, contendrá los enlaces que formarán nuestro índice:
por ejemplo:
puede ser que los tengamos en forma de tabla:
<table>
<tr><td><a href="enlace1.html">enlace 1</a></td></tr>
<tr><td><a href="enlace2.html">enlace 2</a></td></tr>
<tr><td><a href="enlace3.html">enlace 3</a></td></tr>
</table>

El resultado desde el punto de vista de cualquier navegador, es un archivo con código HTML correcto y coherente:
<table>
<tr>
<th colspan="2"> CABECERA </th>
</tr>
<tr>
<td>
<table>
<tr><td><a href="enlace1.html">enlace 1</a></td></tr>
<tr><td><a href="enlace2.html">enlace 2</a></td></tr>
<tr><td><a href="enlace3.html">enlace 3</a></td></tr>
</table>
</td>
<td> Contenidos </td>
</tr>
</table>