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.

<!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">

<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" />



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

		<div id="headerLogo">
			<img  id="headerImage" class="center" src="img/headerLogo.png" alt="Illusive Minds Media"> 
		<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>
		<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 id="actions">
							<input type="submit" id="submit" value="Log in">
							<a href="">Forgot your password?</a><a href="">Register</a>
            </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 -->


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