<!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" />
<meta name="keywords" content="create a website, how to build a website, start a website, create a blog, web hosting, website templates, website builder" />
<meta name="description" content="HTML Template for your Tripod.com website." />
<title>HTML Website Template For Download - 2 Col Right | Tripod.com</title>
</head>
 
<style> 
	body, h1, h2, h3, p, img, ul, li{
		border:0; margin:0; padding:0;
	}
		/*the above is a very basic reset rule.  Every browser has a slightly different default for HTML tags.  By using this simple CSS reset, all the more glaring styles 
		are reset and can now be set to whatever properties that would suit your website best. */
	
	body{
		background:#333;	/* a light blue background color. */
		font-family:Arial, Helvetica, sans-serif; /* the font family for all text on the web page is now either arial, helvetica or a sans-serif font if those two are not available */
		font-size:13px; /* all normal text on the web page has a base font size of 14px now */
	}
		
	h1, h2, h3, p{
		margin-bottom:10px; /* redeclaring how much of a margin each of these tags should have benethe them */
	}
		
	p{
		letter-spacing:.04em; /* letter spacing sets the horizontal spacing (kerning) between letters in a block of text. */
		line-height:21px; /* line height sets the vertical spacing between lines of text. */
	}
	
	#pageWrap{
		margin:0 auto;	/* pageWrap was added to contain the whole page and center all the content within the browser. To do so you must establish a width and set the margin to auto for both left and right. The most common use, (0 auto) means that there is no margin on the top and bottom auto for both left and right to split the difference */
		width:870px;
	}
	div#header{
		background-color:#333; /* a more specific way to set a background color */
		background-image:url(images/headerbkgd.png); /* sets a background image in the header and the position it should sit */
		background-repeat:repeat-x; /* sets a background image to repeat, repeat-x, repeat-y or not at all as written in this rule */
		background-position:left bottom;/* sets a background image position */
		color:#fff;	/* sets the the color of all header text to white */
		margin:0 auto; /* by declaring a width on any block element (like a div), giving it a css property of margin:0 auto will center that block element on page */
		min-height:130px;	/* setting a minimum height of an element means that it can grow to be bigger, if there is a lot of content in it. However, if it doesn't have enough content, it will be at the very least (in this example) 130 pixels tall */
		text-align:center; /* this line centers the text within this div. Not to be confused with <align="center">
		padding:45px 15px 15px;	/
 by setting a padding, the content within a HTML element will not touch the edges of that element (by adding padding to an element, it actually makes that element appear wider and/or taller.  In this case, the header div is now 15px wider and taller on each side. */
				}
		
	ul.navigation {
		list-style:none;	/* this removes the bullets from list elements */
		margin-top:20px;	/* giving the ul a top margin of 20px */
	}
					
	ul.navigation li{
		display:inline-block; /* an inline block element can have width and height applied to it / and if not, they only take up as much space as the content within allows */
		margin:0 3px 5px;	/* this code adds a 3px margin to the left and right of the list elements, and 5px to the bottom of the list elements */
					}
					
	ul.navigation li a{
		background:#4a4a4a;	/* this is a dark grey background for the link */
		-moz-border-radius:2px; 
		webkit-border-radius:2px; 
		border-radius:2px;	/* these 3 lines of border-radius code make rounded corners work in firefox, safari, chrome, opera and IE9 */
		border:1px solid #595959; /* this adds a light grey solid border of 1px width around the link */
		color:#fff;	/* this makes the link text white */
		padding:3px 10px;	/* as the name implies, this adds extra padding around the link, so that the borders don't bump up against the link text */
		text-decoration:none; /* this removes the normal underline that links usually have */
	}
						
	ul.navigation li a:hover{
		background-color:#000; /*this is a hover pseudo class.  By designating a different background color, than the class for the a tag above, when a mouse hovers over these particular links, in the navigation bar, the background color will change to what's defined here */
		}
	
	div.content{
		background:#f1f1f1;
		margin:0 auto; /* this adds a margin of 15px to the top and bottom of the div with the class of content.  The auto margin applies to the left and right side of the div which is what centers the div in the middle of the page. */
		min-height:300px;
		padding:15px;
	}
				
	div.col-left{
		float:left;
		width:620px
		}
		
	div.sidebar-right{
		float:right;
		padding:0 10px;
		width:200px;	/* when floating content next to each other, applying set widths will make the content play nice with each other. Change the width of the siebar, or take away the width of the above "div.col-right" and see what happens to get a better idea of how widths effect floats */
		}
		
	div.sidebar-right a{
		color:#445e64;	/* this redefines all links in the left sidebar to this new color, as opposed to the default blue link color */
	}
	
	div.sidebar-right a:hover{
		text-decoration:none
	}	/* when hovering over a link, in the sidebar, this turns off the underline */
	
	.list{
		background:#daecf0;
		border:1px solid #c3dce1; /* adds a border to the bottom of the list to further divide the content for eaier segragation */
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;/* These three lines create a rounded corner border around the unordered list. */
		padding:0 0 10px 0; /* This line does two things. Adds space between the bottom of the last list item and the border below. And, removes the left-padding automatically assigned to any list item */
		margin: 0 0 10px 0; /* pushes content from the bottom of the <ul> to the top of the next line item */
		list-style:none; /* removes all bullets from list items */
	}
	.list li a{
		font-size:11px;	/* this makes all anchor classes with .list applied 11px tall  */
		font-weight:bold;	/* this makes all anchor classes with .list bold without using <strong>  */
		display:block; /* This line turns all list items into a block element so that you can add height and width properties like padding, margin, height and width */
		padding:10px 4px; /* here are padding properties to establish the padding from one line item to the next */
		text-transform:uppercase;	/* this makes all anchor classes with .list uppercase  */
		text-decoration:none;
	}
	.list li a:hover{/* :hover is a psuedo class that is applied to the anchor to establish states that an anchor is in. You do not need to repeat all properties from the a tag only define the staet it will appear in when your mouse hovers over the link */
		background:#bad7dd; /* adds a background color on hover state */
	}
				
	div#footer{
		color:#e4e4e4;	/* sets color for type within the div */
		font-size:10px;	/* makes the footer content slightly smaller then the rest of the copy */
		letter-spacing:.6px;
		padding:15px;	/* gives padding bettween footer edge and content within */
	}
	.float-left{
		float:left;	/* use this on an element (like an image) to make it float to the left of it's containing HTML element */
		margin:0  10px 10px 0;	/* this sets the margin to push the text away from the edge of a float left class, (like an image) */
	}
	.float-right{
		float:right;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
	}
	.float-right img{
		margin:0 0 10px 10px;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
	}
	.clear{
		clear:both; /* this clears floats.  This would be used to cancel out a float's behavior on content below it.  */
	}	
	
</style>
 
<body>
	<div id="pageWrap">
        <div id="header">
            <h1>Welcome to my web page</h1>
            <h2>My header sub text</h2>
            
            <ul class="navigation">
                <li><a href="index.html" title="home">Home</a></li>
                <li><a href="http://www.tripod.co.uk" title="Tripod">Tripod</a></li>
                <li><a href="http://www.lycos.co.uk" title="Lycos">Search the web</a></li>
            </ul>
        </div>
        
        <div class="content">
        
        <div class="col-left">
            <h1>This is my first header</h1>
            <p><img src="img1.jpg" style="padding-top:6px;" class="float-left" alt="alternative text.  This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
            <strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
            </p><br />
            
            <h3>Temporibus autem quibusdam</h3>
            <p>
            <em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
            </p>
        </div>
        
        <div class="sidebar-right">
            <h3>links</h3>
            <ul class="list">
								<li><a href="register.htm" >Register</a></li>
            		<li><a href="login.htm" >Login</a></li>
            		<li><a href="contact.htm" >Contact Us</a></li>
            		<li><a href="admin.htm" >Admin Area</a></li>
            		<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
            </ul>
        </div>
        <br class="clear" />  <!-- this code is clearing the floats from the above divs.  See what happens when you take it away to really learn what clear does... -->
        </div>
        <div id="footer">
            <p>Put footer text here.  Like copyright info and such</p>
        </div>
    </div>
</body>
</html>