Learning How to Create Website Using HTML & CSS Basics

lj100 Sun Jun 27, 2010 7:20 pm

<html>

<head>

<title>TESTPAGE</title>

<meta name="" content="" />

<link href="yourcssfilehere" rel="stylesheet" type="text/css" />

<!-OTHER WISE:: If you dont know to to use CSS Document, you can have this One-->

<style type="text/css">

/*CSS CODES*/

body { margin:0px; font:12px arial; color:#999; background:#eee; }

#pageWrapper { width:100%; text-align:center; padding-top:20px; }

#pageContainer { width:800px; margin:0px auto; text-align:left; background:#fff; }

#header { width:auto; font:38px times,georgia; padding:10px 10px; color:#000; border-bottom:2px solid #d70000; }

#contentWrapper { width:800px; }

#leftNav { width:200px; float:left; }

#rightNav { width:200px; float:right; }

#mainNav { width:380px; float:left; margin-left:10px; }

#clr { clear:both; }

#leftNav h3, #rightNav h3 { margin:0px; padding:10px; font:16px arial; font-weight:normal; }

#contentPanel { padding:10px 0px; }

#contentPanel h3 { margin:0px; padding:0px; font:24px times,georgia; color:#000; }

#subcontainer { width:auto; text-align:left; }

#footer { width:auto; padding: 10px; text-align:center; background:#000; color:#fff; }

</style>

</head>

<body>

<div id="pageWrapper">

<div id="pageContainer">

<div id="header">My Test Page</div>

<div id="menu"></div>

<div id="contentWrapper">

<div id="leftNav">

<h3>Left Navigation</h3>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About us</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contact us</a></li>

</ul>

</div>

<div id="mainNav">

<div id="contentPanel">

<h3>Middle Navigation : Welcome Text</h3>

<div id="subcontainer">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sem ante, ultricies a condimentum lobortis, blandit at sapien.
Quisque quis urna sit amet sem accumsan sagittis. Proin at suscipit eros.
Cras sed arcu lectus, in pretium leo. <br><br>
Phasellus tincidunt, mauris ut bibendum faucibus, sapien tellus tempus dolor,
vitae mollis metus nulla at mi. <br><br>
Suspendisse euismod venenatis fringilla. Suspendisse egestas
imperdiet felis ac fermentum. Vivamus vehicula, neque non molestie fringilla,
nunc ante gravida turpis, eget fringilla turpis metus lobortis mauris.
Sed at sagittis neque. Fusce ligula purus, feugiat id vestibulum aliquet,
pharetra ut nisi. <Br><br>Etiam sit amet nisl risus. Sed sem lacus, faucibus in molestie ac, ornare id nisl.
<br><br><br><br><bR>

</div>

</div>

</div>

<div id="rightNav">

<h3>Right Navigation</h3>

<ul>

<li><a href="#">Lates News and Updates</a></li>

<li><a href="#">Archives</a></li>

<li><a href="#">Help and Support</a></li>

<li><a href="#">Blogs</a></li>

<li><a href="#">Downloads</a></li>

</ul>

</div>

<div id="clr"></div>

</div>

<div id="footer">Copyright © 2010 yourdomain.com. All rights reserved.</div>

</div>

</div>

</body>

</html>

Good Luck!

fharz Fri Aug 05, 2011 11:37 pm

Wow great! Thanks for this. Do you own a website tutorial for that? if you have can i have it since i am trying to learn Making Website that's out thesis this next semester. Actually im starting making a website for a certain company that i have choose. If you have would you mind sharing it. I would be greatly appreciate it. Thanks a Lot. :-)

Learning How to Create Website Using HTML & CSS Basics

Learning How to Create Website Using HTML & CSS Basics

Re: Learning How to Create Website Using HTML & CSS Basics