How to keep content separately from top part of webpage

Question

I'm ultra newbie in html/css/whatever in web and I'm trying to build my own website. Let's say I have two parts of my website - top with logo and menu, and bottom with the content. Which tools do i need to keep this separately? I mean - only one file with 'upper things' (because I don't want to edit it on every subpage) and other files with subpages? Do I need php for this?

Is a good thing to use<iframe> in my case?

score 1 · Accepted Answer · answered Apr 03 '13 at 13:51

A server side language like php is the way to go. A server side language will give you the ability to do what is called a server side include.

So for example you can create one file called header.php and place all your code from the opening <html> tag to whatever else will constantly be at the top of your website. You might want to take this even further and create a footer.php to put all the code that will constantly be at the bottom.

Example header.php

<!doctype html>
<html>
<head>
    <title>My Awesome Website</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Menu Link 1</li>
                <li>Menu Link 2</li>
                <li>Menu Link 3</li>
            </ul>
        </nav>
    </header>
    <div id="main">

Example footer.php

    </div><!-- end #main -->
    <footer>
         My Awesome website's Footer content!
    </footer>
</body>
</html>

Now to put them together on our homepage or index.php

Example index.php

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

   <h1>Welcome to my home page!</h1>
   <p>This is my super awesome site and I hope you like it!</p>

<?php include 'footer.php'; ?>

The final output sent to the browser would be the following:

<!doctype html>
<html>
<head>
    <title>My Awesome Website</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Menu Link 1</li>
                <li>Menu Link 2</li>
                <li>Menu Link 3</li>
            </ul>
        </nav>
    </header>
    <div id="main">
        <h1>Welcome to my home page!</h1>
        <p>This is my super awesome site and I hope you like it!</p>
    </div><!-- end #main -->
    <footer>
         My Awesome website's Footer content!
    </footer>
</body>
</html>

score 0 · Answer 2 · answered Apr 03 '13 at 13:49

0

If you want to do it purely in HTML then the only way of doing it via iframe, but it is not the best way and discourage by many developers because you loose deep link, since whole site has the same address.

The better option would be to use server side programming model such as PHP, ASP.NET, Ruby...

answered Apr 03 '13 at 13:49

Vlad Bezden

83,883
25
248
179

Ok, thanks, I'll try some PHP here. – hugerth Apr 03 '13 at 15:28

score 0 · Answer 3 · answered Apr 03 '13 at 15:22

No you don't have to use php for this. You can also use general ssi include files if you'd rather not use php. Using php requires a server that is set up to parse for php (that's another topic :). An example might look like...

<body>
  <div id="header">
  <!--#include file="includes/header.ssi"-->
  </div>

  <div id="menu">
  <!--#include file="includes/menu.ssi"-->
  </div>

  <div id="footer">
  <!--#include file="includes/footer.ssi"-->
  </div>
</body>

As the include file path suggests, there is a dir called 'includes' in your root folder from which your ssi content is called. The ssi files are using regular html markup and any IDs or CLASSes still obey your css.

How to keep content separately from top part of webpage

3 Answers3