Force the import of css and js on site pages

Question

<nav class="navmenu center">
   <ul>
      <li class="first scroll_btn active" onclick="atualizarPagina('Home.htm');"> <a>Home</a></li>
      <li class="scroll_btn" onclick="atualizarPagina('Empresa.htm');"><a>Empresa</a></li>
      <li class="scroll_btn" onclick="atualizarPagina('Servicos.htm');"><a>Serviços</a></li>
      <li class="scroll_btn" onclick="atualizarPagina('Contato.htm');"><a>Fale Conosco</a></li>
    </ul>
</nav>

<div id="conteudoHome">
   ...
</div>

<div id="conteudo">

</div>


    function atualizarPagina(site) {
        if (site == "Home.htm") {
            $("#conteudoHome").css("display", "block");
            $("#conteudo").css("display", "none");
        }
        else {
            $("#conteudoHome").css("display", "none");
            $("#conteudo").css("display", "block");
            $.get(site, function (data) {
                $("#conteudo").html(data);
            });
        }
        void (0);
        scroll(0, 0);
    }

Every page, for example Enterprise.htm, has only one container html.

So when the user accesses the site as www.x.com.br/Company.htm, it doesn’t matter the css and js of the index, and loses all the website formatting.

I wanted to know how to make sure that when accessing www.x.com.br/Empresa.htm, imports all the css and js.

And taking advantage of the question, I wanted to know if this type of site (not containing a complete structure for each page) compromises something of SEO, like google indexing these things, because I read in some places that affect SEO.

Answer 1

It is not possible to "inherit" this structure with pure HTML. You will need either some server-side mechanism (such as Masterpages, in C#), or, the closest you can get to the client side is using a platform style Backbone.js for your Javascripts and something like @import CSS for your styles.

About Backbone, this is no subject for this answer - if you want to know more, visit the official website and read about @import CSS, you can make a sheet /css/company.css as follows:

@import url("main.css");

#conteudo {
    font-size: 16px
}

At the same folder level, the file main css.:

body {
    background-color: yellow;
}

And then, in Company.htm refer as follows:

<!-- ... -->
<link rel="stylesheet" href="css/empresa.css">
<!-- ... -->