Include header.html to include multiple html pages

Question

I have this bootstrap template: http://wrapbootstrap.com/preview/WB0412697

I have stripped out my header section in the index.html and placed it into it's own file named header.html.

I have tried using the techniques JQuery techniques located on these stack overflow pages and have no been able to get the page to render the header.html within the index.html: - Make header and footer files to be included in multiple html pages, Common Header / Footer with static HTML and Include another HTML file in a HTML file

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
<title> Welcome...</title>

<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">

<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">  
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

<!-- CSS Theme -->    
<link rel="stylesheet" href="assets/css/theme-colors/default.css">

<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head> 

<body>
<div class="wrapper">
<!--=== Header ===-->    

<!--=== End Header ===-->

In between header and end header I have tried:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(function(){
$("#header").load("header.html"); 

});
</script>

along with the other examples within the aforementioned links as well as. I have also tried:

<!--#include virtual="insertthisfile.html" -->

which would have been really nice if it worked, as it seems very simple and

<?php include("filename.html"); ?>

but after changing the .html files to .php, my browsers only render plain text.

Any suggestions? What am I doing wrong?

This is something you should be doing serverside, and if the PHP include doesn't work, you probably don't have PHP, or the file doesn't have a .php extension. — adeneo
– adeneo, Commented Dec 26, 2014 at 21:32
You would need to change all the file extensions to .php. So it would look like <?php include("header.php"); ?>. See tutorial tizag.com/phpT/include.php — AndrewH
– AndrewH, Commented Dec 26, 2014 at 21:33
See if your server supports server side includes. You can then rename your .html files to .shtml and add some #include directives. — Salman Arshad
– Salman Arshad, Commented Dec 26, 2014 at 21:43

lazy panda · Accepted Answer · 2014-12-26 22:16:55Z

2

you can make a php file like this. I expect you want the <head> staying the same as well

<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

then you can choose between different main content files depending on the $_GET using a if statement

<?php
$header = file_get_contents('header.html');

if($_GET['page'] == 'home'){
   $main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
   $main = file_get_contents('contact.html');
}

$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

edited Dec 26, 2014 at 22:16

answered Dec 26, 2014 at 22:08

lazy panda

1561 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amir Parsa KHademi · Accepted Answer · 2014-12-27 11:59:43Z

1

First step : create div for footer and header

        <!DOCTYPE html>
        <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
        <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
        <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
        <head>
        <title> Welcome...</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Meta -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico">

        <!-- CSS Global Compulsory -->
        <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- CSS Implementing Plugins -->
        <link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
        <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">  
        <link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

        <!-- CSS Theme -->    
        <link rel="stylesheet" href="assets/css/theme-colors/default.css">

        <!-- CSS Customization -->
        <link rel="stylesheet" href="assets/css/custom.css">
    <script type="text/javascript"> 
                $(function () {
                $.get("header.html", function (respons) {
                    var header1 = respons;
                    $("body").append(header1);
                });
            });
    </script>
        </head> 

        <body>
</body>
</html>

edited Dec 27, 2014 at 11:59

answered Dec 26, 2014 at 22:03

Amir Parsa KHademi

1051 silver badge10 bronze badges

2 Comments

Johnathan Maravilla Over a year ago

the div header is within the header.html. Based upon your statement, I'm assuming the div needs to be within the index.html.

Amir Parsa KHademi Over a year ago

Solved! @eloscurosecreto

Mardzis · Accepted Answer · 2014-12-27 16:51:35Z

Use simply PHP code:

<?php 

 // Include file with header
      include("./include/header.php"); 


 // This bit always includs to the "center" Call page file via URL
      if (isset($_GET['page'])){
      $file=$_GET['page'];
      $file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
           if(file_exists($file2)){
                if(substr_count($file,"../")>0){
                          echo "Warning!";
                          }elseif($file=="index" or $file=="/index"){
                                    echo "Warning!";         
                          }else{
                               include $file2;
                          }
                }else{
                     include "./include/404.php";
                }
      }else{
           include "uvod.php";
      }


 // Include file with footer
      include("./include/footer.php");

?>

Collectives™ on Stack Overflow

Include header.html to include multiple html pages

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related