Firstly using external css will make things a lot easier when it comes to updating the site. Learning to code to web standards will ensure your site remains in a workable state with browser updates in the future. When you learn to hand code you begin to see things in a clearer light, letting a programme code often creates messy code which again is harder to update. A good example I always use is my first attempt at hand coding a fluid layout here.
First Fluid Layout
Here is the code from your site..
Code:
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome to KH-Labz.net</title>
</head>
<body>
<p align="center"> <br><b>
<font face="Century Gothic" size="2"> </font>
<font face="Century Gothic" size="1"> </font>
</b>
<font face="Verdana" size="1"><b>
<a href="index.htm" style="text-decoration: none"><font color="#000000">HOME</font></a>
</b>|<b> <a href="about.htm" style="text-decoration: none">
<font color="#000000">ABOUT US</font></a> </b>|
<b> <a href="news.htm" style="text-decoration: none"><font color="#000000">NEWS</font></a> </b>|<b>
<a href="services.htm" style="text-decoration: none"><font color="#000000">SERVICES</font></a>
</b>| <b><a href="clients.htm" style="text-decoration: none">
<font color="#000000">OUR CLIENTS</font></a> </b> |<b>
<a href="testimonials.htm" style="text-decoration: none"><font color="#000000">TESTIMONIALS</font></a> </b>| <b>
<a href="recruitment.htm" style="text-decoration: none"><font color="#000000">RECRUITMENT</font></a>
</b>| <b><a href="contact.htm" style="text-decoration: none">
<font color="#000000">CONTACT US</font></a>
</b> </font><br><br><img src="anikh.gif" width="760" height="120"></p>
<center><table border=0 bordercolor=white cellpadding=0 cellspacing=0><tr>
<td background="IMAGE" height=400 width=200><center><center><ilayer name="scroll1">
<div id="scroll3"
style="width:150;height:570;
background-color:COLORHERE;
overflow:auto">
<p align="left"><u><b><font face="verdana" size="2" color="#FF9900">Latest News</font></b></u><p align="left">
<font face="verdana" size="2">21/02/07 - New client! Abergele Holiday
Cottages, a local holiday cottage firm!</font><p align="left">
<font face="verdana" size="2">12/02/2007 - Jobs now available, click on
Recruitment to find out more.</font><p align="left">
<font face="verdana" size="2">12/02/2007 - Our new site has been created! Have
a look around.</font><p align="left">
<img border="0" src="khservicespic.jpg" width="150" height="100"><p align="left"></div></td>
<td background="IMAGE" height=400 width=600><center><center><ilayer name="scroll1">
<div id="scroll3"
style="width:500;height:570;
background-color:COLORHERE;
overflow:auto">
<p align="left"><b><u><font face="verdana" size="2" color="#FF9900">Welcome to KH-Labz.net!</font></u></b><p align="left"><font face="verdana" size="2">Our aim as
a website solutions company is to provide you with</font><font face="verdana" size="2"> top quality solutions at
competitive prices. We provide a number of services to provide you with all of
your website needs.</font><p align="left"><font face="verdana" size="2">To the
left is our 'latest news' box, here you can find updates on our various
projects and our business.</font><p align="left"><ilayer name="scroll1">
<font face="verdana" size="2">Feel
free to take a look around our all-new fully functional website and we hope to deal with you and/or your company soon!</font><p align="left">
<u><b><font face="verdana" size="2" color="#FF9900">What we have to offer</font></b></u><p align="left">
<font face="verdana" size="2">We have a number of high-quality services
available:</font><ul>
<li type="circle"><p align="left"><font face="verdana" size="2">Graphics
Design - Advertisements, logos, banners...</font></li>
<li type="circle"><p align="left"><font face="verdana" size="2">Website
Design - High-quality, unique, original designs at highly competitive
prices.</font></li>
<li type="circle"><p align="left"><font face="verdana" size="2">Website
Development - We can develop your site for you, cheaply and effectively to a
very high standard.</font></li>
<li type="circle"><p align="left"><font face="verdana" size="2">Domain name
& website hosting registration (contact us for more details)</font></li>
</ul>
<p align="left"><font face="verdana" size="2">For more information regarding
our services, click on 'services' on our navigation bar.</font><ilayer name="scroll1"><p align="left">
<p align="left">
<font size="1" face="Verdana"> </font></div></td></table></p>
<p align="center"><font size="1" face="Verdana">© Copyright 2007, KH-Labz.net.
All rights reserved.</font></p>
<p align="center"><img border="0" src="footkh.jpg" width="760" height="25"></p>
and heres the code from the hand coded site...
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Home</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="outer">
<div id="header">
<h1>CSS Fluid Test</h1>
</div>
<div id="nav">
<ul class="button">
<li><a href="index.html">Option1</a></li>
<li><a href="index.html">Option2</a></li>
<li><a href="index.html">Option3</a></li>
<li><a href="index.html">Option4</a></li>
</ul></div>
<div id="main">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nisi risus, nonummy sed, eleifend et, nonummy quis, quam. Ut erat justo, adipiscing quis, consectetuer ut, adipiscing id, velit. Suspendisse facilisis ullamcorper purus. Mauris vitae risus eu mi hendrerit gravida. Pellentesque sodales,
<p><img class="FloatLeft" src="Images/Pic/pic.gif" alt="" width="150" height="112" border="0">Risus nec porttitor feugiat, lacus mauris viverra lorem, sit amet consequat nisi est vitae eros. Praesent in arcu. Sed venenatis ornare felis. Aliquam erat volutpat. Fusce nec enim id nisl nonummy fringilla. Integer neque. <a href="index.html">Suspendisse</a> condimentum pulvinar turpis. Morbi lacinia, massa vitae varius consectetuer, leo risus sodales felis, id sodales urna eros et arcu. Mauris vitae tellus. Proin vel nunc vel libero vulputate sollicitudin. Aliquam nec nunc et leo imperdiet suscipit. Curabitur sed metus. Donec enim ante, porttitor eu, lobortis a, iaculis vel, risus.</p>
<h4>Mauris vitae risus eu mi hendrerit gravida.</h4>
<p>Pellentesque sodales, risus nec porttitor feugiat, lacus mauris viverra lorem, sit amet consequat nisi est vitae eros. Praesent in arcu. Sed venenatis ornare felis. Aliquam erat volutpat. Fusce nec enim id nisl nonummy fringilla. Integer neque. <a href="index.html">Suspendisse</a> condimentum pulvinar turpis. Morbi lacinia, massa vitae varius consectetuer, leo risus sodales felis, id sodales urna eros et arcu. Mauris vitae tellus. Proin vel nunc vel libero vulputate sollicitudin. Aliquam nec nunc et leo imperdiet suscipit. Curabitur sed metus. Donec enim ante, porttitor eu, lobortis a, iaculis vel, risus.</p>
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nisi risus, nonummy sed, eleifend et, nonummy quis, quam.</p>
</div>
</div>
</body>
</html>
You can see not only is there a lot less code it's layed out a lot clearer for future reference, and neither site has much more on than the other.
Hope this makes things a little clearer.
22-02-2007, 07:30 PM
Similar Threads
Linear Mode
