> Faqs > Compartir mismo header y footer para varias páginas de un sitio web

Compartir mismo header y footer para varias páginas de un sitio web

Buenas tardes espero no importunarlos con preguntas básicas (creo). Soy nuevo en el mundo del desarrollo web y empece haciendo un pequeño proyecto.

Tengo 3 paginas HTML5 con CSS y quiero que tengan el mismo header y footer y desde una página principal (inicio) empezar a interactuar con el sitio.

Este es mi menú: Inicio | Servicios | Recursos | Contacto.

Gracias infinitas de antemano por su AYUDA y comprensión. Quedo a sus órdenes.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Tal como formulas la pregunta no queda claro si quieres:

  • Que el header y el footer se compartan entre varias páginas, pero siendo las páginas independientes, cada una en un archivo HTML que se carga aparte.
  • Que el header y el footer se compartan entre varias "pantallas" de una misma página. Siendo que esas "pantallas" se carguen sin que se recargue completamente toda la página, simplemente intercambiando el contenido a medida que el usuario pulsa los enlaces.

Ambas cosas son posibles. Y además existen una infinidad de posibles soluciones para conseguirlas.

La primera opción es más común y básicamente se resuelve, generalmente, mediante el uso de un CMS. (Sistema gestor de contenido) como podría ser WordPress. En tu CMS defines el template o tema (que incluye el header y footer entre otras cosas) y cada página muestra un contenido distinto según se requiera. Si quieres empezar con WordPress tienes el Curso gratuito de WordPress.

Esta misma aproximación también la consigues de manera super simple sin necesidad de usar un CMS. Simplemente usando un lenguaje del lado del servidor como PHP. Para ello tienes que usar la sentencia de "include" en PHP. Ella te permite tener el header y el footer en archivos separados y desde cada página simplemente los incluyes con un include. Por ejemlo en este artículo te muestran una manera muy simplificada para conseguir crear una plantilla con includes en PHP. Recuerda que puedes aprender PHP de manera sencilla en el Manual de PHP.

La segunda opción también es sencilla, si sabes cómo hacerla. Pero requiere en el fondo más conocimientos técnicos de Javascript. Ese es el esquema de funcionamiento de las SPA (Single Page Application). Para construirla generalmente usamos Javascript, pero además algún framework del estilo de Angular, VueJS, React, o simplemente Web Components con LitElement. Para ello requiere usar generalmente un sistema de routing en Javascript.uí la cosa se complica algo, así que si estás empezando creo que no te debe interesar mucho ir por este camino.

Sergio
78 1 9 5

Para hacer este tipo de cosas se usa la programación del lado del servidor. Ya sabes, PHP, Node, Java, Python... o el lenguaje que quieras.

El modo de proceder consiste simplemente en crear los archivos de cabecera y pie de página de manera independiente. En ellos colocas el HTML qué corresponde con esos elementos de la página, por ejemplo, todo el marcado para hacer el pie o todo el marcado para hacer la cabecera.

Esos archivos quedan independientes, por ejemplo "layouts/pie.php" o "layouts/cabecera.php".

En cada página del sitio web luego incluyes esos bloques por medio de los archivos de HTML dónde están definidos. En PHP por ejemplo la sentencia que sirve para incluir un pedazo de página en otro se llama include.

include "layouts/pie.php";

En principio es así de simple, sin embargo, las personas normalmente utilizan sistemas de templates que permiten organizar los bloques de la página de una manera más optimizada IHP reutilizar mejor los bloques en cualquier lugar. O quizás un sistema gestor de contenido, que incluirá su propio sistema para hacer los templates a base de bloques o archivos completos.

Empezar por lo básico, simplemente con PHP, te resultará sencillo. Luego se puede complicar todo lo que quieras.

Salva
256 3 18 2