0

I have a simple website, in which I've written the code that's about the header.
This is included in the index.html. Now that I want to add another .html file, how can I have the header related code, included into all the HTML files?

A simple copy paste will surely do the job, but is it a correct solution?

Developing in Ubuntu, using Sublime Text with H5BP and Compass.

Chris
  • 3,619
  • 8
  • 44
  • 64
  • PHP is what I use. I write my HTML in PHP, to a page called `header.php`, then I `include 'header.php';` in `index.php` and `echo` the `$varible` I store the HTML into, onto every page. – StackSlave Nov 16 '13 at 23:01
  • First of all, HTML is no code ^_^ Ontopic: You could, like @PHPglue say, use PHP. But I think this will be overload for only the include function. You could also use an ajax call and get the content of your HTML file. [Related](http://stackoverflow.com/questions/676394/how-to-include-an-html-page-into-an-html-page) – Ron van der Heijden Nov 16 '13 at 23:04
  • Using a server-side language is DEFINITELY the way to go for this. But you could also have blocking XMLHttpRequest that writes it to the document – markasoftware Nov 16 '13 at 23:07
  • It's also popular to have everything on one page, with a query string determining the page. The JavaScript would read the query string, and depending on it, simply change the URL of an iframe in the center – markasoftware Nov 16 '13 at 23:08
  • @Markasoftware: But since you are talking about JavaScript, you mean client-side, right? Wouldn't this be bad for the loading time of the page? – Chris Nov 17 '13 at 19:21
  • yes. It would. but you could always have a placeholder element that takes up space and just populate it once the request loads – markasoftware Nov 17 '13 at 19:28

2 Answers2

1

I would use PHP:

// header.php
<?php
date_default_timezone_set('America/Los_Angeles');
function https(){
  $sv = $_SERVER;
  if(!isset($sv['HTTPS'])){
    header("LOCATION:https://{$sv['SERVER_NAME']}{$sv['PHP_SELF']}"); die();
  }
}
function http(){
  $sv = $_SERVER;
  if(isset($sv['HTTPS'])){
    unset($_SERVER['HTTPS']);
    header("LOCATION:http://{$sv['SERVER_NAME']}{$sv['PHP_SELF']}"); die();
  }
}
$doc = "<!DOCTYPE html>
  <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head>
      <meta http-equiv='content-type' content='text/html;charset=utf-8' />
      <meta name='keywords' content='put your site keywords here' />";
$main = " </head>
<body class='njs'>
  <div id='head'>
    <div id='menu'>
      <nav class='tabs'>
        <a href='index.php' id='hm'>Home</a>
        <a href='page2.php' id='p2'>Page 2</a>
        <a href='page3.php' id='p3'>Page 3</a>
        <a href='page4.php' id='p4'>Page 4</a>
        <a href='page5.php' id='p5'>Page 5</a>
        <a href='page6.php' id='p6'>Page 6</a>
        <a href='page7.php' id='p7'>Page 7</a>
      </nav>
    </div>
    <div id='content'>";
 ?>

Now, put header.php in a restricted folder, in the same location as index.html for added security, then change index.html to index.php. Now index.php:

// index.php
<?php
include_once 'restricted/header.php'; http(); // could be https() for SSL
echo "$doc
    <title>Whatever - Home</title>
    <meta name='description' content='Whatever - Home' />
    <style type='text/css'>
      @import 'common.css'; @import 'index.css';
    </style>
$main";
?>
  <!-- put your content here -->
  <!-- don't forget to close the `id='content'` div -->
  </div>
</body>
</html>
StackSlave
  • 10,613
  • 2
  • 18
  • 35
  • Some questions coming up, brace yourself! :P (I'm new to the web developing world, that's why.) So, 1. why it is needed to set the timezone? 2. What do the functions `http()` and `https()` do, and do I absolutely need them for this small _about me_ website? 3. Why do we use these variables? (I've achieved splitting the header and home content by copying all the header-relative lines to a `header.php` file and then including this file to the `index.php` file. Just that, I didn't use any variables with `echo`.) 4. When you say restricted, with permissions like `600`? – Chris Nov 17 '13 at 19:30
  • `1.` It's to make sure your MySQL database, that you will probably make has the correct time - Change that to your timezone. `2.` http() forces an insecure protocol, so the user is redirected if they are using https://. Note that some Browsers will not change back to an insecure protocol if you move to an https page on the same site. https() forces a secure protocol, so if you have purchased an SSL (Secure Sockets Layer) certificate the user cannot get on that page at all without https://. – StackSlave Nov 17 '13 at 22:58
  • Thank you for the reply to the comment. I've tried simply assigning the contents of `` (+the `head` tags), as you posted ( `$head = " HTML here ";` and at the index.html typed this: `` and all I get is a blank page, whose source is cut up to the point of the echo (before the `echo`). What have I done wrong? – Chris Nov 17 '13 at 23:17
  • `3.` I echo the entire String. In PHP you can put simple variables into double quotes, and they will be evaluated before the String is output. `4.` I'm not sure about 600, but Read, Write and Execute(Directory) should be off for Users and on for Owner. – StackSlave Nov 17 '13 at 23:27
  • `head.php` would have to be in the same folder as for than `include_once` to work, and your page needs to be called `index.php` not `index.html`. – StackSlave Nov 17 '13 at 23:31
  • Yes, I have it `index.php`, sorry. The problem were the double quotes into at the HTML. I've replaced them with singe quotes and echoing the whole header, worked fine. Thank you for your help! – Chris Nov 17 '13 at 23:57
0

You could also ajax to load in the header into the separate pages, if you didn't want to deal with php. Just have the header html in a separate file and do an ajax call on dom load and then apply the response to the container of the header in the page you are using.

user3000116
  • 75
  • 1
  • 6