Good afternoon
I'm preparing a website that has a very elaborate footer, so I thought about the idea of preparing an html with just the footer and that the rest of the pages will load it dynamically, so wherever you want to put the footer would put and to modify it would be easier.
Is there any way to do this with HTML5?
You can use the php include.
<?php include 'footer.html'; ?>
Files are included based on the given path more information - > Include
You can use a Client, it would be the most viable, either:
Where you can use them as templates, for example in my case, I created a login with a template, where in Angular I load the templates.
HTML template
<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>
Context View
<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');
});
You can continue researching about it, this is one of the many possible ways to do this, really, direct between sheets html with href if you did so.