Ok so I'm getting there with all the coding etc now, I can design a half decent website. Where I think I fall short is how I organise my code. Does anyone have any good links to websites/ books on how to keep semantic about coding and how to keep it all tidy rather than one big mess?

 

Thanks, James.

I try (and I mean TRY!) to order mine....

 

<div id="wrapper">
  <div id="another_div">
			<div id="content">
					   Blah blah blah blah.
			</div>
  </div>
</div>

 

I also try to keep things in sections, separating with...

 

 

<!-------this in html---------> and */----------------------this in css----------------/*

Three simple steps you can take:

 

1. Comment sections of your code, e.g. placing <!-- Header --> <!-- Content --> and so on.

 

2. Try to space things out relevantly, i.e. make use of new lines.

 

3. Indent your code (as Helen has shown). If using things such as lists/divs, it helps to show where a tag starts and ends.

 

If all else fails, you could try using an automated tidy service such as this.

 

If you'd like an example of how clean/semantic code should look, you can take a look at a site my group and I recently coded for a uni project, where the aim was to create a website using primarily semantic code, then style it using simple css. You can see it here.

(View the source to see what I mean)

All the mentioned above help a lot.

 

What also helpes me is a function in Notepad++ you can collapse certain divs so you can check weather the number of openen and closing divs checks out. Also you can just have the part your working on open so your not looking at a sea of codes.

 

Ofc this might not always work perfectly if your working with php and using If / else statements.

I indent my PHP (I use Whitesmiths notation), but don't so much with my HTML. However, one thing I do with both my HTML and CSS, is to insert 3 or 4 blank lines between distinct sections, and pop a comment in before each section saying "this section does this".

 

I also put each CSS declaration on one line (so, for example, all the rules in the brackets for "div.clear" appear on the same line). It makes for long lines sometimes, but it makes it much easier to scan down a CSS file looking for a particular rule. I appreciate that's not to everyone's taste - and it is definitely a matter of what works for you - but this works for me.

If I have a number of divs, especially nested ones, I like to put a comment at the end of the div e.g. </div> <!--- end of xxx div --->

 

I find it quite useful for debugging

 

Based on Helen's example, it would look like ...

 

<div id="wrapper">
     <div id="another_div">
               <div id="content">
                          Blah blah blah blah.
               </div>  <!--- end of content div --->
     </div>  <!--- end of another_div div --->
</div> <!--- end of wrapper div --->

Thanks for all the tips, helps a lot

 

Very neat btw clearcutdesignz, thanks

*/----------------------this in css----------------/*

 

Surely you mean /*-------------*/ lol

Hey Nero, I do that as well - but mine are a bit shorter

 

<div id="header">

...

</div<!--/header-->

I indent my PHP (I use Whitesmiths notation)...

 

Code indenting is about personal choice and what reads best to you.

 

We adopted this style for PHP some years ago:

 

Formatting Allman Style

 

The main reason for this is that we are also C# developers and this is how Microsoft Visual Studio formats the code by default.

Apart from everything that's already been said above, I really like to insert

some php include tags for my navigation and footer.

 

Simply because they will be exactly the same on all pages.

 

So for example:

 

HTML

<?php include_once "footer.php"; ?>

 

footer.php

<?php
print '

<div id="footer">
<p> footer goes here </p>
</div>
';
?>

 

Now all you have to do is insert this line of code on all the pages that you want the footer to be on

<?php include_once "footer.php"; ?>

 

If you ever decide to change the footer for whatever reason, you only have to modify one file...

 

I find this very useful, hope you do too!

Yes - that is useful for that.

 

However, these days, you would almost always use a template system to keep your php code completely seperate from your html code.

 

The industry standard these days is:

 

PHP XTemplate

It seems pretty low profile for an industry standard, and I'd never heard of it, I have to say. I agree templating can be the answer for some projects (look at phpBB) but it can also add CPU overhead and development time... Also XTemplate only has 38,000-odd downloads from its project page and the project is run by 2 developers - I don't think I'd rely on it.

Hi,

 

I'm glad that you're thinking in this way. Good on you. Most people don't bother.

 

Anyway, all of the above advice is great. Just thought I'd add my 2 cents.

 

This is how I structure my code in both XHTML and CSS.

 

Firstly, I always use HTML comments like so to break up sections of code:

 

<!-- HTML COMMENT -->

 

I always capitalise my comments so as to break them away from normal lower-case XHTML code.

 

When structuring my XHTML I like to indent nested elements (elements that are contained within other elements) like so:

 

<!-- WRAPPER START -->
<div id="wrapper">
 <!-- CONTAINER START -->
 <div id="container">
	  <!-- CONTENT START -->
	  <div id="content">
		   <p>This is my content</p>
	  <!-- CONTENT END -->
	  </div>
 <!-- CONTAINER END -->
 </div>
<!-- WRAPPER END -->
</div>

 

You may have noticed that I use both 'START' and 'END' comments for each element. This allows me to easily recognise the start and end of a specific element.

 

I also use specific naming conventions for XHTML elements. I try to be as specific as possible as to what the element is for, does or represents. I use underscores to separate words rather than hyphens as this separates element ID's and CLASSES from the directory structure within my websites. For example:

 

<!-- MAIN CONTENT START -->
<div id="main_content">
 <a href="http://www.mysite.com/sub-folder/web-page.html">Web Page</a>
<!-- MAIN CONTENT END -->
</div>

 

When coding my CSS I follow similar rules.

 

I use 5 external stylesheets when styling my pages. I link to one main stylesheet (main.css) within my XHTML documents and then use the '@import' command to import the rest of the required stylesheets. Like so:

 

/*--------------------
MAIN LAYOUT
--------------------*/
@import url("layout.css");
/*--------------------
TYPOGRAPHY
--------------------*/
@import url("typography.css");
/*--------------------
COLOUR SCHEMES
--------------------*/
@import url("colours.css");
/*--------------------
FORM LAYOUT
--------------------*/
@import url("form.css");

 

I also use commenting within my stylesheets to identify which stylesheet it is and also the elements within the stylsheet. As follows:

 

/*--------------------
MAIN LAYOUT STYLESHEET

Version: 1.0
Author: Gareth Daine
Email: info@chocolatecherrydesign.com
Website: http://www.chocolatecherrydesign.com
----------------------
GLOBAL
--------------------*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
/*--------------------
WRAPPER
--------------------*/
#wrapper {
width: 100%;
text-align: center;
}
/*--------------------
CONTAINER
--------------------*/
#container {
width: 790px;
margin-right: auto;
margin-left: auto;
}
/*--------------------
HEADER
--------------------*/
#header {
width: 100%;
}

 

I also identify the author, the authors email and website and what version the website is currently at. I do this within comments at the top of each stylesheet.

 

The five stylesheets I always use are.

 

• main.css
  
• layout.css
  
• colours.css
  
• typography.css
  
• form.css
  

 

It may seem like a lot of hassle and work but trust me, it really does aid in the development of your websites. It speeds things up and helps with future maintenance.

 

Hope this helps.

Gareth has hit the nail on the head here. You shouldn't be afraid of using multiple style sheets to keep your code nice and tidy.

 

Well done for wanting to know how to do this - it is a fine art to keep your code clean and easy to manage.

 

Good luck with it

That's great information, thanks for the concise explanation Gareth

 

In terms of capitalizing your comments, does that adhere to strict XHTML validation?

 

I have only used one CSS file for my markup up until now, with all elements placed in that one file. Multiple CSS files for different parts of the web page definitely looks like a better way of doing it!

 

Thanks all, great help

Hi,

 

Not a problem.

 

With regards to validation, the answer is yes. HTML comments are ignored by the browser and thus pass validation.

 

I do this all the time and I only code XHTML Strict 1.0.

It seems pretty low profile for an industry standard, and I'd never heard of it, I have to say. I agree templating can be the answer for some projects (look at phpBB) but it can also add CPU overhead and development time... Also XTemplate only has 38,000-odd downloads from its project page and the project is run by 2 developers - I don't think I'd rely on it.

 

That is becuase it is the new *updated* version of XTemplate, the old one has now been removed from phpclasses.org

 

You are correct in saying that using a template system uses more server load, however, you can easily cache generated pages - thus actually saving CPU load in larger websites.

 

Without some kind of cached template system, every page load requires a visit to the database to generate the page etc. and this is what causes overhead.

 

/*--------------------
MAIN LAYOUT STYLESHEET

Version: 1.0
Author: Gareth Daine
Email: info@chocolatecherrydesign.com
Website: http://www.chocolatecherrydesign.com
----------------------
GLOBAL
--------------------*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
/*--------------------
WRAPPER
--------------------*/
#wrapper {
width: 100%;
text-align: center;
}
/*--------------------
CONTAINER
--------------------*/
#container {
width: 790px;
margin-right: auto;
margin-left: auto;
}
/*--------------------
HEADER
--------------------*/
#header {
width: 100%;
}

 

I also identify the author, the authors email and website and what version the website is currently at. I do this within comments at the top of each stylesheet.

 

The five stylesheets I always use are.

 

• main.css
  
• layout.css
  
• colours.css
  
• typography.css
  
• form.css
  

 

I like the way you code your CSS stylesheets - very neat and tidy.

 

I'll take it for granted that the above is your standard **starting point** when you create a site?

 

Also I like to see that people are using the CSS reset as you have at the top of your CSS doc.

@Avera...

 

Re new version: Ah, I see.

 

Re caching: yes, that works well in some circumstances (phpBB3 makes extensive use of it) - though not all. Depends on the site (as with so many other things!).

 

For the kind of sites I build (where content is often both user and session dependent), my preference is to optimise the SQL schema, indices, queries and stored procedures to the max, and make sure the DB is running on a fast box with low relative load.

The way I usually do it is this... Not everyone will think this is smart but it works for me...

 

(Assume this is after the body tag, doctype, head etc.)

 

<div id="container"> <!-- bof Container -->
<div id="header"> <!-- bof Header -->
<div id="content"> <!-- bof Content -->

</div> <!-- eof Content -->
</div> <!-- eof Header -->
</div> <!-- eof Container -->

 

bof = begin of

 

eof = end of

 

Thank you Avera.

All of the above, also the link below is worth a read.......

 

http://css-tricks.com/what-beautiful-html-code-looks-like/

I go a bit crazy with my comments sometimes. Like this:

 

/* XXXXXXXXXXXXXX SECTION NAME XXXXXXXXXXXXXX */

Helps it stand out

 

I space my divs out a bit more, but not if the tags are related to each other, so no space between the blog_post/h1/p:

<div id="wrapper">

  <div class="blog_post">
			<h1>Title</h1>
			<p>Blah.</p>
  </div>

  <div class="blog_post">
			<h1>Title</h1>
			<p>Blah.</p>
  </div>

</div><!-- /wrapper -->

Quite interesting to see how different people layout their CSS