Global header and footer in HTML

Question 1

If your site in php you can write something like this:

Index.php

<?php 
include 'header.php';
?>
<div class="container">
    Text
</div>
<?php 
include 'footer.php';
?>

Header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="keywords" content="keywords">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/custom.js"></script>
    <link rel="shortcut icon" href="img/favicon.ico">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>

    </header>

Footer.php

    <footer>

    </footer>
 </body>
 </html>

Question 2

My favorite way is to add a php include wherever I want the HTML to show up. Then just add

<?php include '../header.php' ?>

right after the body on every page. I know there are other ways, but this is by far the most simple.

Question 3

You could try the jQuery ajax load function. Take a look at w3schools for a quick guide. Hope this helps

Question 4

If you'd like to stick to HTML, you can apply css style and make classes.

Applying css: http://htmldog.com/guides/css/beginner/applyingcss/

Create css classes: http://htmldog.com/guides/css/intermediate/classid/

Create a blank layout
Apply a class name to the header and footer
Create a css document where you create the classes with specific properties.
Customize the layout, when you're done, create hundreds of copies of that html file and add a different content to each of them:)

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My html page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="globalHeader">
           // header contet
    </header>

    <content>
       // main content of the page
    </content>

     <footer class="globalFooter">
       // footer content
     </footer>

</body>
</html>

style.css

.globalHeader { option: values; }
.globalFooter { option: values; }
.globalContent { option: values; }
    /* p tags, div tags and so, and so... */