How to cut up a webpage in header, footer, ...?

Question

I have developed a website with 13 webpages. The majority of them have the same header, footer, right aside, ... I know that I can place a HTML or JSP file that contains the code for the header or footer and include it in all my pages so I do not have to write the same code in all my wepages. This is an example of what I will like to place in file called header.html which I would include in all my webpages:

<header>
  <hr id="barraCabecera11">
  <hr id="barraCabecera12">
  <h1 id="nombreBarberia"> The Notorius Barbershop </h1>
  <nav>
    <ul>
      <li id="indexN"><a href="index.html">Inicio</a></li>
      <li id="seccion1N" onmouseover="ver(1)" onmouseout="ocultar(1)">
        <p id="conocenosN">Conocenos</p>
        <div id="subseccion1">
          <p><a href="Subpaginas/Conocenos/historia.html">Historia</a></p>
          <p><a href="Subpaginas/Conocenos/filosofia.html">Filosofía</a></p>
          <p><a href="Subpaginas/Conocenos/plantilla.html">Barberos/Peluqueros</a></p>
        </div>
      </li>
      <li id="seccion2N" onmouseover="ver(2)" onmouseout="ocultar(2)">
        <p id="eventosN">Eventos</p>
        <div id="subseccion2">
          <p><a href="Subpaginas/Eventos/reservar.html">Reservar</a></p>
          <p><a href="Subpaginas/Eventos/contratar.html">Contratar</a></p>
        </div>          
      </li>
      <li id="hairstyleN"><a href="Subpaginas/hairstyle.html">Hairstyle</a></li>
      <li id="notbarN"><a href="Subpaginas/notbar.html">The NotBar</a></li>
      <li id="cursosN"><a href="Subpaginas/cursos.jsp">Cursos</a></li>
      <li id="contactanosN"><a href="Subpaginas/contactanos.html">Contáctanos</a></li>
    </ul>
    <div class="borrar"></div>
  </nav>
</header>

The problem is that I have different relative links in the nav of this header, so I cannot include a file with the same content in all my webpages. Is there a standard way of changing these relative links depending on which webpage the header is included? Please, let me know if I am not explaining myself well.

The duplicate question is about a `` element rather than a ``, but the principle is exactly the same. — Quentin, Dec 05 '17 at 16:47

Régis B. · Accepted Answer · 2017-12-05T18:00:52.887

0

I'm not sure if this is standard but I would change the href of the elements on each page by altering it in javascript after the page is loaded.
Edit: An example would be,given the following anchor tag:

<a href="google.com" id="anchorTest">

You would do:

document.getElementById('anchorTest').href = 'youtube.com';

edited Dec 05 '17 at 18:00

answered Dec 05 '17 at 16:21

Régis B.

187
1
9

"Use JavaScript" is incredibly vague. How would you use it to update the relative URLs in the links to point to the correct place? – Quentin Dec 05 '17 at 16:45
I've updated my answer giving an example. Thanks for helping me improve it. – Régis B. Dec 05 '17 at 18:00
You've hardcoded the string "youtube.com", but if you're hardcoding it then using JS is pointless as it can be hardcoded in the raw HTML. How should the OP determine the correct value for the links? – Quentin Dec 06 '17 at 09:29

How to cut up a webpage in header, footer, ...?

1 Answers1