Home/ Questions/Q 612775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:55:46+00:00

i’m new to web developement and i have a problem .. and a (bad)

  • 0

i’m new to web developement and i have a problem .. and a (bad) solution :
i want to navigate in my page. The pages have the same layout. The only difference is an div container.
Sample code :
home.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
    <div id="outer" >
        <div id="inner">
            <div id="left" >
            <div id="menu3">
        <ul>

            <li><a href="home.html" title="Link 1">Home</a></li>
            <li><a href="about.html" title="Link 2">About</a></li>
        </ul>
</div>

        </div>
        <div id="content" ><h2>Startseite</h2>
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        </div><!-- end content -->
        </div><!-- end inner -->
    </div><!-- end outer -->
</div><!-- end container -->
</body>
</html>

about.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
    <div id="outer" >
        <div id="inner">
            <div id="left" >
            <div id="menu3">
        <ul>

            <li><a href="home.html" title="Link 1">Home</a></li>
            <li><a href="about.html" title="Link 2">About</a></li>
        </ul>
</div>

        </div>
        <div id="content" ><h2>Startseite</h2>
        <p>
              **OTHER CONTENT**
        </p>
        </div><!-- end content -->
        </div><!-- end inner -->
    </div><!-- end outer -->
</div><!-- end container -->
</body>
</html>

This works fine.
But there is a lot of code duplication which can get me into trouble when i have 15 pages 😀
So.. what is the usual way to do it ?
Maybe some Ajax voodo ?!

Please Help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use Server Side Includes (SSI)

    There is no need to install additional software on your server if you do not need all its functionality. PHP doesn’t come standard with any web-server.

    Personally, using PHP to reduce HTML-repetition is the equivalent of shooting down a mosquito with a M198 howitzer.

    On the other hand, SSI is supported in the two most widely use web-server software (Apache, IIS) and its usage is rather simple.

    Simply use the extension .shtml or .shtm for your file. Put your comment contents in separate files, and then, in your page file, use the following to include the different parts:

    <!--#include virtual="common/header.part.shtm" -->
<h2>Startseite</h2>
<p>
   **OTHER CONTENT**
</p>
<!--#include virtual="common/footer.part.shtm" -->

    Again, this is supported by all major web-server software available and requires no additional CGI modules to be installed, unlike PHP.

    Note: Apache requires mod_include to be enabled on the web-server. Its binaries are included in every binary Apache distribution.

    You definitely do not want to use AJAX for a situation like this for the following reasons:

    1. Your page will be unreadable for people using browsers without JavaScript support (embedded devices, desktop computers in high-security workplaces, etc.)
    2. Search engines cannot (as of yet) interpret JavaScript DOM changes properly and won’t be able to crawl your pages properly.

    SSI is the simplest way of doing this server-side.

    • 0