0

Buenas Tardes

Estoy preparando una web que tiene un footer muy elaborado, por lo he pensado en la idea de preparar un html con solo el footer y que el resto de las páginas lo cargaran de forma dinámica, así allí donde quiera poner el footer se pondría y para modificarlo seria mas sencillo.

¿Existe alguna forma de hacer esto con HTML5?

3

2 respuestas 2

1

Puedes utilizar el include de php.

 <?php include 'footer.html'; ?>

Los archivos son incluidos con base en la ruta de acceso dada mas información -> Include

1
  • 2
    nunca se ha especificado que OP utilice PHP.
    – Rene Limon
    el 5 dic. 2017 a las 19:17
0

Puedes usar algun Cliente, sería lo mas viable, ya sea:

  • AngularJS
  • JQuery

En donde puedes usarlas como plantillas, por ejemplo en mi caso, creé un login con una plantilla, donde en Angular cargo las plantillas.

Plantilla HTML

<html ng-app="appInicioSU">
  <head>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="js/appInicioSU.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/scriptLoginSU.js"></script>
        </head>    
        <body >
            <!--Clase contenedora que se encarga de cargar las plantillas de AngularJS-->
            <div class="container" col-md-4 col-md-offset-4>
              <ui-view></ui-view>
            </div>
          </body>
          <!--Pie de pagina de la interfaz del proyecto-->
          <footer>        
            <div class="">
              <center>
                <a class="mbr-footer__link text-gray" href="#/">Términos de Uso</a>  |
                <a class="mbr-footer__link text-gray" href="#/">Política de Privacidad</a>            
                <br>
                <p class="mbr-footer__copyright" style="color:white;">Versión 1.0.0-prueba.1</p>
                <br>
              </center>
             </div>
          </footer>
        </html>

Vista Contenedora

<form class="form-signin" id="formSU">
<h3 class="form-signin-heading" align="center"></h3>
<input type="text"     class="form-control" name="usuarioSU"    placeholder="Usuario" required/>
<input type="password" class="form-control" name="contrasenaSU" placeholder="Contraseña" required/>
<div class="form-group">
  <div class="">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Recuérdame
        <a href="#" data-toggle="modal" data-target="#modalContrasena">¿Olvidaste tú contraseña?</a>
      </label>
    </div>
  </div>
</div>
<input type="submit" class="botonSU btn btn-lg btn-info btn-block" id="botonSU" value="Iniciar Sesión">

Angular JS

//Dar de alta a la appRegistroEventos NG-appRegistroEventos
var app = angular.module('appInicioSU', ['ui.router'])
//Establecer los componentes que alimentan la app, partes en que se cambian los archivos.
.config(function($stateProvider, $urlRouterProvider)
{
  $stateProvider
  .state('inicioSU',
  {
      url: "/inicioSU",
      templateUrl: "views/adminLoginSU.html"
  });

  //Declaracion de direccion diferente, para redireccionar a la vista por defecto
  $urlRouterProvider.otherwise('/inicioSU');
});

Puedes seguir investigando al respecto, esta es una de las muchas tantas formas posibles de realizar esto, realmente, direccionar entre hojas html con href si es que así lo hacias.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.