Common content shared between html pages

Posted on 2011-05-03
Last Modified: 2012-05-11
On a static page site what is the best way of sharing common page areas, say like the page top & bottom, between pages?

A long time in the past I used frames but later found that they were not so good for search engines.

I have also used inline scripting where you set up in each page a link to some common javascript and then with the document body you declare a script section that calls a javascript function pagetop() located in the common scripts.

The pagetop function uses document.write(myhtml) to output the html required for the common areas.

Are there other approaches which are better?


Question by:inthedark
    LVL 10

    Expert Comment

    If you use an application such as Adobe Dreamweaver it offers site management tools which allow you to create library items ( such as a page header / footer / etc ) which you can embed into each page.

    When you change those items it updates your entire site.
    ( and all of your pages will be HTML / contain all the code )

    Trial version of dreamweaver if you want to try it out:

    Dreamweaver Features:

    There are other similar applications which do this but that is my personal favorite for managing sites.
    LVL 10

    Expert Comment

    You can also create page Templates which will allow you to have preset pages for each time you start a new one with all of the header / sidebar / footer content you need there...

    LVL 14

    Accepted Solution

    If you use PHP, it's pretty easy.  You can turn any HTML file into a php file by changing the extension.  Then lets say you have some content that you want to have on multiple pages... ex: site navigation:

    <ul id="siteNav">
      <li><a href="/page-1.php">Page 1</a></li>
      <li><a href="/page-2.php">Page 2</a></li>
      <li><a href="/page-3.php">Page 3</a></li>

    Open in new window

    You would take that and put it in a PHP file so that your PHP file would have nothing except for that  code.  Call the file "site-nav.php" and save it in the root of your website.

    Then, in your different pages on your site, you can put the following line of code:

    <div id="content">
    <!-- Put your page content here -->
    Lorem Ipsum

    Open in new window

    LVL 17

    Author Comment

    Thanks for the suggestions.  If I go the Designbyonyx suggestion and take the  php route how can I edit the old MyPage.html page to do a permanent redirect to MyPage.php?
    LVL 14

    Expert Comment

    there are a couple of options.  The best is probably to use your .htaccess file (google it).  You should be able to use the following:

    RewriteEngine on
    RewriteRule ^(.*)\.html $1\.php

    This will redirect everything with an HTML extension to the same file with a PHP extension.
    LVL 17

    Author Closing Comment

    Sorry for delay

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now