Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Clean code?

  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Canada
    Posts
    60
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile Clean code?

    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!

    Code:

    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.
    Check out my new forums: http://www.moderncoding.co.nr (:

    Strengths: HTML & CSS.


    Code:
    EpicFriends x = 
    players.getNearest(BestFriend);
    if (x != null) {
    x.interact("High Five" + x.getName());

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    India
    Posts
    29
    Thanks
    2
    Thanked 1 Time in 1 Post
    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
    Code:
    <style></style>
    tag. And to include the stylesheet in all the HTML files, use this code inside head tags -

    Code:
    <link rel="stylesheet" href="somefolder/style.css" />
    UmarWebTechs.com - That's all about Web Development and it's tips, tricks and techniques.

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    <br /> in between divs is not the correct way to achieve space between.
    Code:
    <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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I also suggest that you use a valid doctype. Replace
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    with
    Code:
    <!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/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Canada
    Posts
    60
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for replying everyone, I really appreciate it!
    Check out my new forums: http://www.moderncoding.co.nr (:

    Strengths: HTML & CSS.


    Code:
    EpicFriends x = 
    players.getNearest(BestFriend);
    if (x != null) {
    x.interact("High Five" + x.getName());


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •