Member Avatar for daviddoria

Currently, my index.html is like this

<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->


<div class="page"><!-- start page -->
	<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
		

	</div><!-- end sidebar -->
	
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 


	</div><!-- end content -->
	
</div><!-- end page -->

</body></html>

If I want to change the content in the "page" section, but leave the title header and sidebar there, how would I do this? I can't imagine I have to have the header and sidebar on every page, or when I have to make a change to either of those, I have to change it on every page!

Any suggestions?

Thanks,
Dave

  • 4 Contributors
  • 5 Replies
  • 199 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by daviddoria

Dani AI

Generated

As recommended, pulling the header and sidebar out into separate include files is the right pattern to avoid repeating markup across pages. 's follow-up shows the common server-side gotcha: include directives must be parsed by the web server (some hosts only parse .shtml or require mod_include), so raw include text appearing in the browser usually means the server is not configured to run SSI.

Server-side options (recommended for reliability and SEO) include SSI, simple PHP includes, or a real templating system from whatever server stack is available. A minimal PHP include pattern looks like this:

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

<div class="content">
  <!-- page-specific HTML -->
</div>

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

For static hosting without server parsing, client-side injection can work during development or on read-heavy sites, but it affects SEO and requires JavaScript. A tiny fetch-based injection example:

fetch('/includes/header.html')
  .then(r => r.text())
  .then(html => document.getElementById('header').innerHTML = html);

Common practical notes and pitfalls: relative paths inside included fragments are resolved against the final page URL, so image and stylesheet links in a header often break when pages live in subfolders. Use root-relative URLs (for example, /css/style.css) or a consistent base href in the page head. Avoid using iframes for main layout (as suggested) because they create separate browsing contexts, break history/back behavior, hurt accessibility, and reduce crawlability. If server-side includes are unavailable and PHP is not an option, consider a build step (simple static site generator) to assemble templates into static pages at deploy time.

Summary: SSI is the quickest when supported; PHP or template engines are robust on dynamic hosts; client-side injection and static-site builds are useful fallbacks.

Recommended Answers

All 5 Replies

Member Avatar for cfajohnson


Use Server-Side Includes, e.g.:

<!--#include file="page.html" -->

Or:

<!--#include file="header.html" -->
<body>
 <h1>Title</h1>
 <p>...</p>
</body>
<!--#include file="footer.html" -->
Member Avatar for MJ Pieterse

i would suggest to iFrames

Member Avatar for FC Jamison

So should the code look something like this?

<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<!--#include file="header.html" -->

<div class="page"><!-- start page -->

	<!--#include file="sidebar.html" -->

	
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 


	</div><!-- end content -->
	
</div><!-- end page -->

</body></html>

With the header.html file as...

<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->

...and the sidebar.html file being...

<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
		

	</div><!-- end sidebar -->
Member Avatar for FC Jamison

OK...that worked on my server when I named the original document index.shtml. The shtml extention was required so that I could add the SSI (server side include) directives to the existing page.

Member Avatar for daviddoria

Interesting, cool though - thanks all!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.