...
PDA

Clean code?

samxdesigns
05-20-2012, 06:06 AM
I was thinking of making a new website and starting fresh but maybe just editing my homepage I used on the last site just a tiny bit.

I kind of need some ideas since I'm not a very experienced coder, bearing that in mind please don't make it crazy complex or if you do make it crazy complex, atleast offer a detailed description or some help. :)

Now, here is the current code, if you can find any flaws or think it needs some cleaning up, please help me! :D

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Home</title>
<META NAME="author" CONTENT="Sam Herron">
<META NAME="description" CONTENT="A forum/site for all sorts of things.">
<META NAME="keywords" CONTENT="Forum, HTML, CSS, Javascript, PHP, Help, Tutorials, Friendly, Community, Sam, Designs, Coding">
<style type="text/css">
<!--
.navbar {
height:50px;
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0; }


.navbar ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 24px Verdana;
list-style-type: none;
text-align: center;
}

.navbar li{
display: inline;
margin: 10px;

}

.navbar li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.navbar li a:hover{
text-color:#03F ;
}

.blacktheme li a{
font-size:24px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}


-->


li {text-align:center;}

h2 {color:#fff;text-align:center;font-size:41px;font-family:"Lucida Console", Times, serif;}

h3 {text-align:center;color:#fff;font-size:32px;}

h4 {text-align:center;color:#fff;font-size:20px;}

h6 {font-size:20px;text-align:center;text-decoration:underline;}

hr.regards {color:#ff8000;}

body {background-image:url('http://1dut.com/wp-content/uploads/2011/10/29-awesome-black-themed-abstract-wallpapers-1dut.com-13.jpg');}

p {color:#fff;}

p.description {color:#fff;font-size:22px;line-height:50px;font-family:"Courier New", Times, serif;}

p.name {color:#FF9900;font-size:24px;}

hr {color:#FF8000;}



a:link{color:#000;text-align:center;}
a:visited{color:#000;}
a:hover{color:}
a:active{color:#ff0000;}

a.two:link {display:block;
margin: auto;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:485px;
text-align:center;
padding:4px;
text-decoration:none;
}

a.two:visited {display:block;
margin: auto;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:485px;
text-align:center;
padding:4px;
text-decoration:none;
}


a.two:hover {display:block;
margin: auto;
font-weight:bold;
color:#FFFFFF;
background-color:#FF8000;
width:485px;
text-align:center;
padding:4px;
text-decoration:none;
}

a.three:link {color:#fff;}
a.three:visited {color:#fff;}
a.three:hover {
color:#0099FF;
text-decoration:underline;
}

a.four:link {color:#fff;}
a.four:visited {color:#fff;}
a.four:hover {
color:#0099FF;
text-decoration:underline;
}

a.six:link {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:8px;
text-decoration:none;
}
a.six:visited {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:8px;
text-decoration:none;
}
a.six:hover {background-color:#FF8000;text-decoration:underline;}

a.seven:link {color:#fff;font-size:20px;}
a.seven:visited {color:#fff;}
a.seven:hover {color:#FF800F;}

img.center {display: block; margin-left: auto; margin-right: auto; margin-bottom:7px;}

#main-wrap{
width: 996px;
margin: auto;
background-color: #3D3D3D;
padding: 20px;
opacity:0.80;
filter:alpha(opacity=80); /* For IE8 and earlier */
}

#sidebar {
border-top: 3px solid #FF800F;
border-left: 3px solid #FF800F;
border-bottom: 3px solid #FF800F;
height: 800px;
width: 200px;
float: right;
margin-right: 2px;
padding: 1px 0 0 1px;
color:#FF800F;
}


</style>
</head>
<body>


<a id="top"></a>

<img src="http://img839.imageshack.us/img839/4673/3613596903de9b9m3.jpg" border="0" width="996" height="125" alt="BannerFans.com" class="center" />
<div id="main-wrap">
<br />
<div class="navbar blacktheme">

<ul>
<li class="first"><a href="http://www.moderncodersforums.tk">Forums</a></li>
<li><a href="http://www.lawlsitez.x10.mx/owm/client.php?locale=en&style=original">Support</a></li>
<li><a href="http://www.youtube.com/user/deathmetal569">Youtube</a></li>
<li><a href="http://xat.com/web_gear/chat/go_large.php?id=163877624">Chatroom</a></li>
</ul>

</div>
<br />


<h3>Description</h3>

<br />
<p class="description">
&nbsp;•&nbsp; Moderncoding.tk is a social forum where you can get help with coding and school subjects, exchange gaming console online names, you name it.
<br />
&nbsp;•&nbsp;
The forums are powered by phpBB and the theme for the forums was not designed by me, <br /> I am thinking about attempting to design a theme though.
<br />
&nbsp;•&nbsp; You can find the designers name in the footer of the forums.
<br />
&nbsp;•&nbsp; This page was designed by the founder of moderncoding.tk (Sam)
<br />
&nbsp;•&nbsp; We have a great staff including Admin_Unknown and Roadbuster.
<br />
&nbsp;•&nbsp; This is my first official site since I only started coding about 5-6 months ago.
<br />
<br />
I hope you enjoy moderncoding.tk and all the features it provides for you. (:

<br />
<p>Best regards,</p>

<p class="name">
Sam.
</p>
<hr class="regards"/>

<a class="two" href="#top" title="RETURN TO TOP">Page designed by Sam. (:</a>
</div>



</body>
</html>

Hope someone can provide some ideas, thanks a ton!

~ Sam. :)
gr8pro
05-20-2012, 12:43 PM
Of course it needs cleaning. One of the major cleaning is to move all you CSS code into a partucular css file with .css extension. Instead of putting all the CSS code in all other files you may use it once in a CSS stylesheet and include it to all your files. This will help you for further modifications in CSS styles and then you would have to edit all the files containing the CSS properties which are to be changed.

Create a file called style.css and put all your css in it. Remember to remove the <style></style> tag. And to include the stylesheet in all the HTML files, use this code inside head tags -

<link rel="stylesheet" href="somefolder/style.css" />
dan-dan
05-20-2012, 04:30 PM
<br /> in between divs is not the correct way to achieve space between.

<div id="main-wrap">
<br />
<div class="navbar blacktheme">


The correct way would be to add top margin to the inner div. In this same line of code, I noticed that navbar is a class. There's only one of it, so it should be an id.
_Aerospace_Eng_
05-20-2012, 10:25 PM
I also suggest that you use a valid doctype. Replace
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

You may also want to run your page through the HTML validator: http://validator.w3.org and CSS validator: http://jigsaw.w3.org/css-validator/
samxdesigns
05-20-2012, 11:58 PM
Thanks for replying everyone, I really appreciate it! :)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum