Effectively Including one html file in another html file

4
votes

I have a file, a.html, and a css file, a_style.css, that is linked to a's <head>. I now want to include a second html file, b.html, which has its own style included in the <style> tag. Specifically, b.html specifies the footer I want in a.html. My question is: The a_style.css file defines the headings, margins, etc. which also apply to b.html. If I include b.html in a.html, does a_style.css still apply to the included file? Further, the following is all I have to include b.html in a.html:

<div class="footer">
<?php include('./project/b.html');?>
</div>

Is this enough? Or do I need to include something in a's <head>, similar to 

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

(this particular code comes from MathJax)? I have no prior knowledge of php and found this snippet on a similar question: Insert one HTML file into another HTML file. This has not yet worked for me. I tried changing the extension to .php, but then the eclipse editor does not allow me to collapse/expand individual tags any longer, making the script very messy.

2
phphtmlcss
have you tried to rename your files to .php instead of .html? – Frédéric Bourdeau
yes. this has not worked. Besides, it causes eclipse to not show me the expand/collapse feature any longer... – Douglas James Bock

2 Answers

1
votes

If you just want to include html code the php command include is not the right tool. As mentioned in a comment it's used to include PHP code. You just want to read a file and print it out. So what you want to use is readfile

<div class="footer">
<?php readfile('./project/b.html');?>
</div>

It doesn't matter where the CSS / JS includes are. Most people include them in the <head>-Tag, others like to do it at the end of the <body> tag. But if you want to make this work it, it doesn't really matter.

1
votes

The a_style.css file defines the headings, margins, etc. which also apply to b.html. If I include b.html in a.html, does a_style.css still apply to the included file?

Let me start by saying that it all depends on where you are including your file. Conflicting styles will be overridden by whichever comes last. Let me explain how.

Suppose you have three files:

  • a.php
  • a_style.css
  • b.php

Scenario: 1

When you include a_style.css after including b.php in your a.php file:

a.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page A</title>

    <?php

        require_once("b.php");

    ?>

    <link href="a_style.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <p>This is a paragraph</p>

</body>
</html>

a_style.css

p{
    color: #00ff00; /* green */
}

b.php

<style>
    p{
        color: #0000ff; /* blue */
    }
</style>

Output:

enter image description here

Since we have included a_style.css after b.php, hence a_style.css will override every conflicting styles(in this case paragraph color), hence the green colored paragraph.


Scenario: 2

When you include a_style.css before including b.php in your a.php file:

a.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page A</title>

    <link href="a_style.css" type="text/css" rel="stylesheet" />

    <?php

        require_once("b.php");

    ?>

</head>

<body>

    <p>This is a paragraph</p>

</body>
</html>

a_style.css

p{
    color: #00ff00; /* green */
}

b.php

<style>
    p{
        color: #0000ff; /* blue */
    }
</style>

Output:

enter image description here

Since we have included a_style.css before b.php, hence b.php will override every conflicting styles(in this case paragraph color), hence the blue colored paragraph.