i have a .html file as below which works fine when i run it in apache2 but when i change the file extension to .php file it cant work properly. Please suggest your idea. Thank you.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="jquery.mobile-1.0/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
<link href="css/jqm-docs.css" rel="stylesheet" type="text/css" />
<script src="jquery.mobile-1.0/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>

</head>

<body>
<div data-role="page">
<div id="jqm-homeheader">
<h1 id="jqm-logo"><img src="file:///C|/Users/Asus/Desktop/title.png" width="1344" height="111" /></h1>
<h1 style="font-family:Tahoma, Geneva, sans-serif; color:#00F;"> Welcome to Student Online Progress Analysis System</h1>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-filter="true" data-inset="true">
<li data-theme="d">
<h3>Data Management</h3>
<p>All confidential data will kept in the server database and can be editted or updated only by administrator</p>
<ul data-theme="d">
<li>Key in new data
<ul data-theme="d">

</ul>
</li>
<li>Update database
<ul data-theme="d">
<li><a href="index.html">Chicken</a></li>
<li><a href="index.html">Cow</a></li>
<li><a href="index.html">Duck</a></li>
<li><a href="index.html">Horse</a></li>
<li><a href="index.html">Pig</a></li>
<li><a href="index.html">Sheep</a></li>
</ul>
</li>
<li>View Record
<ul data-theme="d">
<li><a href="index.html">Aardvark</a></li>
<li><a href="index.html">Alligator</a></li>
<li><a href="index.html">Ant</a></li>
<li><a href="index.html">Bear</a></li>
<li><a href="index.html">Beaver</a></li>
<li><a href="index.html">Cougar</a></li>
<li><a href="index.html">Dingo</a></li>
<li><a href="index.html">Eagle</a></li>
<li><a href="index.html">Elephant</a></li>
<li><a href="index.html">Ferret</a></li>
<li><a href="index.html">Frog</a></li>
<li><a href="index.html">Giraffe</a></li>
<li><a href="index.html">Lion</a></li>
<li><a href="index.html">Monkey</a></li>
<li><a href="index.html">Panda bear</a></li>
<li><a href="index.html">Polar bear</a></li>
<li><a href="index.html">Tiger</a></li>
<li><a href="index.html">Zebra</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Colors</h3>
<p>Fresh colors from the magic rainbow.</p>
<ul data-theme="d">
<li><a href="index.html">Blue</a></li>
<li><a href="index.html">Green</a></li>
<li><a href="index.html">Orange</a></li>
<li><a href="index.html">Purple</a></li>
<li><a href="index.html">Red</a></li>
<li><a href="index.html">Yellow</a></li>
<li><a href="index.html">Violet</a></li>
</ul>
</li>
<li>
<h3>Vehicles</h3>
<p>Everything from cars to planes.</p>
<ul data-theme="d">
<li>Cars
<ul data-theme="d">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">GMC</a></li>
<li><a href="index.html">Honda</a></li>
<li><a href="index.html">Hyundai</a></li>
<li><a href="index.html">Infiniti</a></li>
<li><a href="index.html">Jeep</a></li>
<li><a href="index.html">Kia</a></li>
<li><a href="index.html">Lexus</a></li>
<li><a href="index.html">Mini</a></li>
<li><a href="index.html">Nissan</a></li>
<li><a href="index.html">Porsche</a></li>
<li><a href="index.html">Subaru</a></li>
<li><a href="index.html">Toyota</a></li>
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</li>
<li>Planes
<ul data-theme="d">
<li><a href="index.html">Boeing</a></li>
<li><a href="index.html">Cessna</a></li>
<li><a href="index.html">Derringer</a></li>
<li><a href="index.html">Embraer</a></li>
<li><a href="index.html">Gulfstream</a></li>
<li><a href="index.html">Piper Aircraft</a></li>
<li><a href="index.html">Raytheon</a></li>
</ul>
</li>
<li>Construction
<ul data-theme="d">
<li><a href="index.html">Caterpillar</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">John Deere</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
The widget works fine in .html extension and once i changed it to .php extenstion it can't run.