I've checked lots of tutorials about including header, navigation and footer using php "include". But I ended up separating my html tags. For instance, my <div id="content">
is in "header.html" while it closing </div>
tag is in the footer. This gives me some problem when I use jQuery and looks kinda messy. Is there a better practice to generate external content? (is jQuery the solution?)
index.php
<?php include("header.html"); ?>
<?php include("navigation.html"); ?>
<div id="content">
<h2 class="clear">This is the contact page</h2>
<p>
Main content here... Main content here... Main content here... Main content here...
Main content here... Main content here... Main content here... Main content here...
Main content here... Main content here... Main content here... Main content here...
Main content here... Main content here... Main content here... Main content here...
Main content here... Main content here... Main content here... Main content here...
Main content here... Main content here... Main content here... Main content here...
</p>
</div>
<?php include("footer.html"); ?>
header.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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Study at Best</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.dropshadow.js"></script>
<script type="text/javascript" src="scripts/jqueryScripts.js"></script>
<link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
<link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
</head>
<body>
<div id="container">
<div id="header">
This is the header
</div>
footer.html
<div id="footer">
<p>BEST School © Copyright 2009</p>
</div>
</div>
</body>
</html>