Add HTML file with CSS to another HTML file

Question

Basically I have an index.html file, which is supposed to be the homepage of a website. On the homepage, I want to include a product configurator (let's call it config.html ), which I have separately coded. Both index.html and config.html have their own separate CSS stylesheets. I'm also using Bootstrap in index.html and jquery in config.html.

Is there a way to embed config.html into index.html (the configurator onto the website homepage) without messing up the code?

I've tried just copying and pasting config.html into the index.html code, and the configurator CSS into the main website CSS, but it doesn't work.

Sorry if I'm not being clear enough, but I hope you get what I mean. I'm a complete beginner at HTML and a friend recommended me this website for additional help.

Answer 1

<link rel="import" href="url of your file">

this must be in head section.

you can also add a html file in div section, like.

<div w3-include-html="h1.html"></div>

Answer 2

In the future, try to add some code so we have a better understanding, however, you should be able to add config.html code to index.html with no need to have different pages. One way will be to put everything you have inside config.html body inside a new <div> in index.html or you can make use of <iframe> more details here . There are many ways around. Try and make use of W3Schools

Answer 3

You can use jquery to embed the two HTML documents for instance:

If your index.html file has a div tag with the class homepage.

<div class="homepage">
 <!--Here am assuming that this is the content inside your 
    index.html-->
</div>

Whatever info is there in your homepage you can add it within the div tag of class "homepage" then add a second div tag which will represent your config.html document as shown here:

<div class="config.html">
   **The contents of your config file will appear here once 
     you have added the Jquery snippet below.**
</div>

Then add this javascript snippet to embed the two pages:

<script type="text/javascript">
  $(function)(){

    **Jquery will load the contents of your config.html within 
      the div tag in your index.html file**

    $(".config").load("config.html"); //THIS IS VERY IMPORTANT

  });

<script/>

Next time please provide some code to make this a bit simpler to explain.