Working on the Web: Where do I start?

<help/>

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…

What do you think the best way to do things is? I’m guessing HTML as the basic groundwork — then onto XHTML and CSS, with Flash & JavaScript for the movey bits. then maybe onto XML and PHP?

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:

1. Get a decent browser

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.

2. Start with the basics: XHTML

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:

Use <div> tags to divide a document up into logical divisions, such as <div id="header">, <div id="navigation">, <div id="content"> and <div id="footer">.

Use <hx> tags for all of your headings, e.g. <h1>Level 1 Heading</h1>, <h2>Sub Heading</h2>, <h3>Sub-sub heading</h3>, all the way down to <h6>.

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, <strong> and/or <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.

3. Learn some CSS

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.

4. Extra Bits

Once you’ve got this groundwork down, you might like to start experimenting with a bit of ECMAScript (its what they call JavaScript these days), Flash or PHP.

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.

5. Books

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.

Cheers,
 
 
 
Olly.

7 Responses to “Working on the Web: Where do I start?”

1. matt

Do all that, then decide the web is pants, and real life pays more money.
:o

2. Simon #2

You lost me after ht…

Just use frontpage and images that are 800×600 at least, and make sure you put two side by side. Bitmap is prefered format. Use tables within tables and give them a raised border for style. Let frontpage create 3 times the amount of code as needed and voila you have a cracking website :o) Ahh the old tablesir website.

3. Jon

Cheers Olly.
Maybe you should write a book. I’ll animate the front cover for you.

4. matt

font must be Comic Sans.

5. Olly

Comic Sans? Nah, that’s too nice (!!!) – think more along the lines of Copperplate Gothic. For everything.

Oh, and don’t forget using of multiple 600k animated GIFs, back in the days when broadband was nothing more than a pipedream… (I’m looking at you here Simon#2! ;-) )

6. Simon#2

But they are soo pretty… ooh and those animated ones for email are so classy, instantly makes visitors think you must be a pro :o)

7. matt

600k animated gifs,

but Olly, you didn;t KNOW me back in 97 ;o