Hey all,
I am teaching myself web programming and I have ran into a problem. It should be easy for all of you but I have tried everything I can think of. I am trying to start with jquery but it seems I have done something wrong. It doesn't want to work no matter what I do. It works when I use it "inline" inside my HTML file, but when I try and use external files... it fails.

Ill paste my HTML, I don't have anything for jquery because I can't get anything to work. Am I doing something wrong with my HTML? my directory is only two folders... the root folder that everthing is in and then a js folder that all the jquery is in.

I hope this isn't too confusing to understand. Any help will be very much appreciated. Thank you. P.S. Any tips on my HTML would be cool too.


Code:
<!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>Illusive Minds Media</title>

<script src="js/jquery.js"></script><!-- jQuery Library -->


<link rel="stylesheet" href="footer.css" type="text/css" media="screen" /><!-- Footer Stylings -->
<link rel="stylesheet" href="head.css" type="text/css" media="screen" /><!-- Footer Stylings -->


<!-- The following code targets IE6 only and enables mouse hover on non-anchor tags -->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="htc/ie6.css" />
<![endif]-->

</head>

<body>

	<div id="header"><!-- BEGIN HEADER -->

		<div id="headerLogo">
			<img  id="headerImage" class="center" src="img/headerLogo.png" alt="Illusive Minds Media"> 
		</div>
		
		<nav id="navBar">
			<a id="navPhoto" href="#">Photography</a>
			<a id="navCinema" href="#">Cinematography</a>
			<a id="navWeb" href="#">Web</a>
			<a id="navDesign" href="#">Design</a>
			<a id="navConnect" href="#">Connect</a>
			<a id="navTheMinds" href="#">The Minds</a>
		</nav>
		
		<div id="slider"></div>
		
	</div><!-- END HEADER -->
	
<!-- _____________________________________________________________________________________________________-->

	

<div id="footer"><!-- BEGIN FOOTER CONTAINER -->


    <ul id="footer_menu"><!-- Begin Footer Menu -->
    
    
        <li class="imgmenu"><a href="#"></a></li><!-- This Item is an Image -->
        
        
        <li><a href="#">My Account</a><!-- Begin Second Menu Item -->
        
            <ul class="dropup"><!-- Default Drop Up List -->
				
				<li><form id="login">
					<h1>Log In</h1>
						<fieldset id="inputs">
							<input id="username" type="text" placeholder="Username" autofocus required>   
							<input id="password" type="password" placeholder="Password" required>
						</fieldset>
						
						<fieldset id="actions">
							<input type="submit" id="submit" value="Log in">
							<a href="">Forgot your password?</a><a href="">Register</a>
						</fieldset>
				</form></li>
				
            </ul><!-- End Drop Up List -->
            
        </li><!-- End Second Menu Item -->


        <li class="right"><a href="#" class="drop">Logout</a><!-- Begin Right Aligned Item -->
            
        </li><!-- End Right Aligned  Item -->


    
    </ul><!-- End Footer Menu -->




    <ul id="social"><!-- Social Icons -->
    
    	<!-- The span is the text appearing on hover, use the tooltip class in the link -->
        <li><a href="#" class="tooltip"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>
        <li><a href="#" class="tooltip"><img src='img/rss.png' alt="" /><span>RSS</span></a></li>
        <li><a href="#" class="tooltip"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>
        <li><a href="#" class="tooltip"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>
        
    </ul><!-- End Social Icons -->



</div><!-- END FOOTER CONTAINER -->


<script src="js/nav.js"/></script><!-- NavBar Animations -->

</body>
</html>