Cómo incluir un archivo HTML en otro

Qué saber

  • Contenido incluido elimina la necesidad de editar todas las páginas de su sitio para obtener contenido repetido.
  • Las inclusiones del lado del servidor, PHP y JavaScript le permiten agregar códigos específicos a cualquier página en la que desee incluir un archivo.
  • Los sitios CMS usan plantillas o temas para contenido repetido.

Este artículo explica cómo funciona "Incluye" y proporciona los pasos para usar las inclusiones del lado del servidor, las inclusiones de PHP y las inclusiones de JavaScript.

Uso de inclusiones del lado del servidor

Server Side Included se desarrolló por primera vez para permitir a los desarrolladores web "incluir" documentos HTML dentro de otras páginas. Básicamente, un fragmento que se encuentra en un documento se incluye en otro cuando la página se ejecuta en el servidor y se envía al navegador web.

SSI está incluido en la mayoría de los servidores web, pero es posible que deba habilitarlo para que funcione. Si no sabe si su servidor admite SSI, comuníquese con su proveedor de alojamiento.

instagram viewer

A continuación, se muestra un ejemplo de cómo puede utilizar SSI para incluir un fragmento de HTML en todas sus páginas web:

  1. Guarde el HTML de los elementos comunes de su sitio como archivos separados. Por ejemplo, su sección de navegación podría guardarse como navigation.html o navigation.ssi.

  2. Utilice el siguiente código SSI para incluir el código de ese documento HTML en cada página.


    o.

    La incluir La directiva acepta dos parámetros. Virtual asume que el nombre del archivo es relativo a la raíz del documento del sitio web, mientras que expediente acepta una ruta de archivo absoluta.

  3. Agregue este código en cada página en la que desee incluir el archivo.

El uso de PHP incluye

Como SSI, PHP es una tecnología a nivel de servidor. Si no está seguro de tener la funcionalidad PHP en su sitio web, comuníquese con su proveedor de alojamiento.

Aquí hay un script PHP simple que puede usar para incluir un fragmento de HTML en cualquier página web habilitada para PHP:

  1. Guarde el HTML de los elementos comunes de su sitio, como la navegación, en archivos separados. Por ejemplo, su sección de navegación podría guardarse como navigation.html o navigation.ssi.

  2. Utilice el siguiente código PHP para incluir ese HTML en cada página (sustituyendo la ruta y el nombre del archivo entre las comillas).

  3. Agregue este mismo código en cada página en la que desee incluir el archivo.

JavaScript incluye

JavaScript es otra forma de incluir HTML en las páginas de su sitio. Esta técnica no requiere programación a nivel de servidor, pero es un poco más complicada y obviamente funciona para un navegador que permite Javascript, lo que la mayoría lo hace a menos que el usuario decida deshabilitar eso.

Así es como puedes incluir un fragmento de HTML con JavaScript:

Guarde el HTML de los elementos comunes de su sitio en un archivo JavaScript. Cualquier HTML escrito en este archivo debe imprimirse en la pantalla con el document.write función.

  1. Sube ese archivo a tu sitio web.

  2. Usar una 

  3. Use ese mismo código en cada página en la que desee incluir el archivo.

¿Qué son las inclusiones HTML?

Una inclusión es una sección de HTML que no es un documento HTML completo en sí mismo. En cambio, es una parte de otra página que se puede insertar en una página web completa a través de la programación. La mayoría de los archivos de inclusión son los elementos mencionados anteriormente que se repiten en varias páginas de un sitio web. Por ejemplo:

  • Navegación
  • Informacion registrada
  • Áreas de encabezado
  • Áreas de pie de página

Cómo 'incluye' hace que el diseño web sea más eficiente

Casi todos los sitios web incluyen elementos del diseño que se repiten en todas las páginas del sitio, incluida el área del encabezado donde reside el logotipo, el menú de navegación y el área del pie de página.

Los elementos repetidos en un sitio permiten la coherencia en la experiencia del usuario. Un visitante no necesita ubicar la navegación en cada página porque una vez que la ha encontrado, sabe dónde estará en otras páginas del sitio que visita.

El contenido incluido elimina la necesidad de editar todas las páginas de su sitio para este contenido repetido. En su lugar, edita un archivo y luego todo su sitio y cada página que contiene recibe la actualización.

Archivos HTML

Contenido repetido en sistemas de gestión de contenido

Si su sitio utiliza un CMS, es probable que utilice ciertas plantillas o temas que forman parte de ese software. Incluso si crea estas plantillas a medida desde cero, el sitio aún aprovecha este marco para las páginas. Como tal, esas plantillas de CMS contienen las áreas del sitio que se repiten en cada página. Simplemente inicie sesión en el backend del CMS y edite las plantillas necesarias. Se actualizarán todas las páginas del sitio que utilizan esa plantilla.

Incluso si no usa un sistema de administración de contenido para su sitio, aún puede aprovechar los archivos incluidos. En HTML, incluye ayude a facilitar la administración de estas áreas de su sitio con plantillas.

Otros incluyen métodos

Hay varias otras formas de incluir HTML en sus páginas. Algunos son más complicados que otros, y muchos de ellos están desactualizados para los estándares actuales.

  • CGI incluye: Puedes usar Perl u otro lenguaje de programación para crear sus páginas y luego incluir lo que desee, ya sea como archivos "requeridos" o leyéndolos manualmente.
  • Flash incluye: Si crea su sitio completamente en Adobe Flash, puede usarlo para incluir elementos del sitio. Este método está desactualizado y los sitios Flash completos son una rareza en la Web en estos días.
  • Los marcos incluyen: En lugar de utilizar los mismos elementos una y otra vez en varias páginas, cree un sitio enmarcado donde los marcos sean las partes duplicadas del sitio. Sin embargo, a excepción del elemento iframe, los marcos son obsoletos en HTML5.
  • Incluye herramientas de gestión de contenido: La creación de plantillas es uno de los principales puntos de venta de CMS y es realmente la forma en que se maneja este trabajo en la mayoría de los sitios hoy en día.