CODEWITHSUNDEEP
htmlheaderglobalfooter
Alex
Alex

Reputation: 49

Global header and footer in HTML

I have an website and I want to all pages have same header and footer, a global header and footer. I want to edit footer/header for all pages in same tame. How can I do this?

Upvotes: 0

Views: 19010

Answers (4)

Attila Antal
Attila Antal

Reputation: 821

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/

  1. Create a blank layout
  2. Apply a class name to the header and footer
  3. Create a css document where you create the classes with specific properties.
  4. 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... */

Upvotes: 0

KM123
KM123

Reputation: 1377

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

Upvotes: 0

drserge
drserge

Reputation: 665

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>

Upvotes: 1

Brandon Kiefer
Brandon Kiefer

Reputation: 349

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.

Upvotes: 3

Related Questions