I'm programming a website for my church. I'm an absolute amateur and am doing this as a volunteer. My training is more in network security than writing web pages.

Anyways, I'm writing the page using html/css. I've written my homepage to have a slideshow but I'd like to have sliders on my slideshow. I can't seem to get that part down correctly. I was hoping somebody might give me some hints on what to add to my existing code (or rewrite if necessary).

Here is what I have on my index page.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="tFader.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script src="scripts.js"></script>
<script src="less.js"></script>
<script type="text/javascript" src="jquery.faded.js"></script>
<script type="text/javascript">	
var $j = jQuery.noConflict();
	$j(function(){
	$j("#faded").faded({
	speed: 700,
	crossfade: true,
	autoplay: 5000,
	autopagination:true
	});
  		});
</script>
</head>
 
<body>

<div id="wrapper">

<div id="container1">
<div id="logo"></div>

<div id="top-right">

<div id="socialIcons">
	<a href="http://youtube.com/" target="_blank"><img src="images/youtube-icon.png" alt="rss" width="24" height="24" border="0"></a> <a href="mailto:info@newcovcchurch.net"><img src="images/email-icon1.png" alt="twitter" width="24" height="24" border="0"></a></a><a href="http://www.facebook.com" target="_blank"><img src="images/facebook-icon.png" alt="facebook" width="24" height="24" border="0"></a><a href="http://twitter.com"><img src="images/twitter-icon.png" alt="twitter" width="24" height="24" border="0"></a><a href="http://rssfeedreader.com/" target="_blank"><img src="images/rss-icon.png" alt="rss" width="24" height="24" border="0"></a> </div>
<div class="nav-area"><div align="left"><ul id="nav"> 

<li>
  <div align="center"><a href="index.html">Homepage</a></div>
</li> 
 
	<li><div align="center"><a href="about-us.html">About Us</a></div>
		<ul> 
			<li><a href="find-us.html">Find Us: Map &amp; Directions</a></li> 
			<li><a href="our-staff.html">Our Staff</a></li> 
			<li><a href="beliefs.html">What We Believe</a></li> 
			<li><a href="messages.html">Messages</a></li> 
		</ul> 
	</li> 
 
	<li><div align="center"><a href="ministries.html">Ministries</a></div> 
		<ul> 
			<li><a href="children.html" class="daddy">Children's Ministry</a> 
				<ul> 
					<li><a href="#">Nursery Program</a></li> 
					<li><a href="#">Children: 4 - 12</a></li> 
				</ul> 
			</li> 
		
	
			<li><a href="youth.html">Youth Ministry</a></li> 
			<li><a href="young-adults.html">Young Adult Ministry</a></li> 
			<li><a href="seniors.html">Senior Ministry</a></li> 
			<li><a href="life-groups.html">Life Groups</a></li> 
			<li><a href="missions.html">Missions/Outreach</a></li>
		</ul> 
	</li> 
 
	<li><div align="center"><a href="calendar.html">Calendar</a></div> </li>
	
	
	<li>
	  <div align="center"><a href="resources.html">Resources</a></div>
		<ul> 
		    <li><a href="newcomers.html">Newcomers Information</a></li>
			<li><a href="messages.html">Audio/Video Messages</a></li>
			<li><a href="photo-gallery.html">Photo Gallery</a></li> 
			<li><a href="beliefs.html">What We Believe</a></li> 
			<li><a href="calendar.html">Calendar of Events</a></li> 
			<li><a href="http://www.facebook.com">Our Facebook Page</a></li> 
	</ul> 
	</li>
	
<li><div align="center"><a href="contact-us.html">Contacts</a></div> </li>
 
</ul> 
</div></div>


</div>

</div>




<div id="hang-bar"></div>



<div id="container2">
<div id="photo-box">	
	<div id="slideshow">
			<div id="faded">	
<ul>
			<li><a href="#"><img src="images/photo1.jpg" alt="pic"></a></li>
			<li><a href="#"><img src="images/photo2.jpg" alt="pic"></a></li>
			<li><a href="#"><img src="images/photo3.jpg" alt="pic"></a></li>
			<li><a href="#"><img src="images/photo4.jpg" alt="pic"></a></li>
			<li><a href="#"><img src="images/photo5.jpg" alt="pic"></a></li>
			</ul>
			</div></div>
		</div>

<div id="announcement-section">

</div>

</div>



<div id="container2">

<div id="events-box">
<div id="events-text"></div>
</div>

<div id="buttons">
<div id="button-topleft"><a href="#"><img src="images/button-topleft.png" border="0"></a></div>
<div id="button-topright"><a href="#"><img src="images/button-topright.png" border="0"></a></div>
<div id="button-bottomleft"><a href="#"><img src="images/button-bottomleft.png" border="0"></a></div>
<div id="button-bottomright"><a href="#"><img src="images/button-bottomright.png" border="0"></a></div>
</div>

</div>


<div id="tabs">
<div id="tabs-lefttop"><a href="#"><img src="images/tabs-lefttop.png" border="0"></a></div>
<div id="tabs-righttop"><a href="#"><img src="images/tabs-righttop.png" border="0"></a></div>
<div id="tabs-leftbottom"><a href="#"><img src="images/tabs-leftbottom.png" border="0"></a></div>
<div id="tabs-rightbottom"><a href="#"><img src="images/tabs-rightbottom.png" border="0"></a></div>
</div>

<div class="footer-text" align="center">
&copy; 2014 Riverside Covenant Church  :: <a href="index.html" class="alter-link5">Home</a> :: <a href="http://www.web-templates-studio.com/" class="alter-link5">Church Template by WTS</a></div>

</div>
</body>
</html>