www.webdeveloper.com
Results 1 to 4 of 4

Thread: HTML5, links and additional pages with same headers

  1. #1
    Join Date
    Aug 2014
    Posts
    1

    HTML5, links and additional pages with same headers

    I graduated over a year ago and just recently pulled out my HTML5 book and started building a site. My questions has to do with the header and side bar. I have a links on my main page to go to additional pages and I want to keep the same header and side bar throughout the site. How do I do this? I can't find it in my book nor can I remember. Any help would be greatly appreciated.

  2. #2
    Join Date
    Oct 2013
    Posts
    610
    I'm guessing you need either PHP Includes or Server Side Includes. Either will allow you to put repeating content into a separate file (or files) and then call it within your pages. Both are pretty easy to use. Some hosts allow both (although you shouldn't mix them). Others allow one or the other.

    Google is your friend

  3. #3
    Join Date
    Mar 2012
    Posts
    1,835
    I use PHP include files for this. They are ver easy to set up:

    1. Rename the .HTML file to .PHP (E.g. index.html becomes index.php).

    2. Cut the header code and put it "as is" in a separate file (E.g. header.php).

    3. In the original file, put the following where the header code was:

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

    4. Repeat for the menu and footer.

    So:

    HTML original:
    Code:
    <body>
    <div id="header">
    <h1>The heading</h1>
    <!-- header code goes here -->
    </div>
    <div id="menu">
    <!-- the menu goes here -->
    </div>
    <div id="bodytext">
    <!-- the body text goes here -->
    </div>
    <div id="footer">
    <!-- the footer goes here -->
    </div>
    </body>
    PHP replacement:

    INDEX.PHP
    Code:
    <body>
    <?php 
    include 'header.php'; 
    include 'menu.php';
    ?>
    <div id="bodytext">
    <!-- the body text goes here -->
    </div>
    <?php 
    include 'footer.php'; 
    ?>
    HEADER.PHP
    Code:
    <div id="header">
    <h1>The heading</h1>
    <!-- header code goes here -->
    </div>
    MENU.PHP
    Code:
    <div id="menu">
    <!-- the menu goes here -->
    </div>
    FOOTER.PHP
    Code:
    <div id="footer">
    <!-- the footer goes here -->
    </div>
    </body>
    Note:

    1. In this example I could have put the header and menu in one include file, but I've shown them separately.

    2. CARE: You cannot test the PHP directly in your browser (as you can with HTML). You need to set up a local host and call the index file as you would if it were on line. I use WAMPSERVER as my local server. It is free and installs automatically. I then set up a shortcut to run the PHP. Assuming that the local path to the development copy of the site is:

    C:\wamp\www\mysite\index.php

    ...the shortcut would be:

    http://localhost/mysite/index.php

    or:

    http://127.0.0.1/mysite/index.php

    or omit "index.php" in either case (as it will be assumed).

  4. #4
    Join Date
    Aug 2014
    Posts
    1
    With the PHP you can do moreover you can refer in google.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles