A friend of mine wants to get into this whole web-building thang — but doesn’t really know where to start. He asked me for some help, and I replied with something along these lines…
I could write a whole book on this, but I’ll try to keep it relatviely brief for now. I’d do it like this:
First things first: Download and install Mozilla Firefox. Its generally a much better web-browser than Internet Explorer, and follows the standards much more closely, which makes it a much better browser to work with during development.
Now that you’ve got a decent browser, you should start by learning your basic XHTML. Don’t worry at all about how the thing looks at this point – its all about document structure, and using the right tag for the job. A few examples would be:
<div> tags to divide a document up into logical divisions, such as
<div id="content"> and
<hx> tags for all of your headings, e.g.
<h1>Level 1 Heading</h1>,
<h3>Sub-sub heading</h3>, all the way down to
Pick up a magazine, or a diary. Look how they are set out and try to match up the XHTML tag with the content.
<h1-6> for headings,
<p> for paragraphs,
<em> to strengthen or emphasise text,
<table> and its siblings for tabular data (and not for page layout).
Make sure that your code validates – upload it to http://validator.w3.org/ to check it out. Only then can you blame the browser if it gets things wrong.
I know that this bit isn’t in the least bit exciting, but its very important that you get this bit right. Do it properly and you’ve gone a long way towards getting accessibility issues and search engine friendliness sorted right from the word go. In this day and age, those are very important features in any website.
Once you’ve got a grounding with XHTML, you can start on your CSS. Start basic and get more complex as you get the hang of it. Make sure your code is correct over at the CSS Validator: http://jigsaw.w3.org/css-validator/
One of the best places to start out with CSS is Mako4CSS. Some of the information is out of date and refers to Netscape Navigator 4 – you can safely ignore that these days. Once you’ve got the hang of the basics, take a look at places like CSS-Discuss and the Sitepoint forums. If you want to see just what’s possible with CSS, take a look at the CSS Zen Garden.
Try not to curse Internet Explorer for getting it horribly wrong. Its really not a very good browser anymore, but millions of people still use it. A good place for finding ways of working around its flaws is Position is Everything.
The important thing here is that you shouldn’t rely on client-side techniques (i.e. browser scripting and plug-ins) for critical site functionality. If the user has it switched off, or the plug-in isn’t installed, or they’re simply using an older browser, your site should degrade gracefully.
For instance, if you display some critical information using Flash, you should fall back to an alternative method (plain text is probably fine) for users who don’t have it installed.
Another example would be form validation – its helpful to have a ECMAScript alert telling you that the email field is compulsory for instance, but this should be backed up on the server side (for isntance with a PHP script), in case the user has disabled ECMAScript.
As for books, I’ve never used any, but I’m told the following ones are good:
I hope thats helpful, and let me know if you’ve got any further questions on any of it.