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.

Happy

:o)

People seem to be happy this evening.

I’m happy, because Wiggle are replacing the broken stuff, free of charge, which is nice. Good service makes me happy.

The girl who cleans the office, who is usually miserable, was all happy and smiley this evening. The girl in the shop on the way home was all smiley too. Maybe its because I’m being happy and smiley (though not significantly more than usual), or maybe I’ve got DULLARD tattooed across my forehead or something?

Answers on a postcard…

That was really really good…OH CRAP!!!

It was going really well. I’d had a great ride, was absolutely caked in mud and was still singing the Chemical Brothers track I’d heard earlier. I was generally a very happy bunny who was riding his bike home.

I’d ridden up the Sandy Lane side of Leckhampton, down the other side, up over the Woodland trust land, down past the cows and sheep, back up Lecky, through 1/20th Utah and Proflex Alley, down the old slalom track (EEEEK!), up towards Sandy Lane again, across the top to The Viewpoint, down via Dog Poo Alley and Fast Tony (ah, them were the days), before coming down the old tramway and heading for home.

I’d discovered that the Stiffee’s new tyres aren’t very good in thick claggy mud, but are pretty good everywhere else. I’d remembered just how bad v-brakes can be, and just how quickly you can get through pads. I’d also remembered why I used to use SPD pedals for cross-country rides. Might have to get me some new bike shoes.

And then the chain came off. “No bother” I thought. I stopped, got off and went to put it back on.

Huh? OH [loud expletive]!

It would appear that the jockey wheel and side-plates are no longer attached to the Singleator that I fitted yesterday. I wandered back up the road a bit and find the missing bits lying on the road, now somewhat mangled after a succession of cars has driven over them.

Its taken me all of one ride to kill it. As you can imagine, I’m really happy about that. Back to the old mech for now then…

Whoodathunkit?

Trueing a bicycle wheel has something of a “black arts” stigma attached to it. But it really isn’t very difficult at all. It requires only a few things:

  • The patience of a saint.
  • A spoke-key.
  • Some blu-tac and a little allen key.
  • A little knowledge of how a wheel works.

I can’t be bothered to explain the process here. It’d take longer to do that than to true a wheel. But let me put it this way:

Earlier on, I upturned my Cove Stiffee, and went to work on the back wheel. It was so far out of true it was funny — so wibbly that it was almost impossible to work out which bits were true and which weren’t. Adam left me in the garage with the comment “You’re going to be there for hours mate!” Not so – half an hour or so later I was done. Winner!

I then fitted the new tyres (which seem very narrow for 2.3″ers) and singleator and the bike was all ready to be ridden! Just a pity it was getting dark by then…

Eynsham again

I used to work for a company based in Eynsham. They moved down the road to Carterton, and I thought that was the end of it — I mean, what possible reason would there be for me to go back to that sleepy little Oxfordshire town? Well, it turns out that the company I work for now has an office in Eynsham too, and I happened to be there yesterday.

Anyway, as I am still lacking a car, I had to get the good old Number 53 bus.

Oh. The memories. Getting up at ludicrous-o-clock in the morning and walking down into town to catch it. Sitting there half asleep as it takes numerous detours from the A40 (all in the name of good service). Being the only one who gets off at Eynsham, and the only one to get on there again in the afternoon. The bus nearly carrying on past you because the bus-stop at the Evenlode isn’t lit up. I’d forgotten just how long it takes, compared to the driving.

This, along with my other recent public transport experiences, and the fact there isn’t a supermarket within walking distance of here, means I’m seriously looking into getting a car. Mind you, I’ve said that before and never managed to get anywhere. Bloody lethargy…

How big will the Mini be?

Ina Fried, a c|net journalist, emailed me last night having seen my post about the Mac Mini.

Clearly they liked my reply so much that they’ve quoted me.

I R meeja whore.

Geek Kit

I get home. I log on. I see that Apple have announced some very cool new kit.

I soon find myself in the Apple Store pricing up a new machine.

“Oooh, I’d like that … that looks cool … there’s no point in owning a computer if you don’t have the Creative Suite … an Elgato DVB PVR would be nice …”

And all of a sudden I was hit by “Order Total: £3,234.00”.

I closed the window and backed slowly away from the PC. Why does Apple gear have to be so very very tempting to a geek like me?

You know, I think I might well find myself buying a Mac Mini in the not too distant future.

Good Bye Lenin!

I’ve just been to see Good Bye Lenin! at the film society, along with Ben and Anne.

[Image of the Good Bye Lenin! poster artwork]

Owen won’t be pleased to hear that he missed out on a really very good film (frusturiatingly events conspired against him and he wasn’t able to come along) .

I don’t know much about german cinema. The only other german film I remember seeing is Tatoo, which couldn’t be much more of a contrast to this one if it tried.

This one is a comedy, but not overtly so, and it could easily fit into so many other genres. Its full of clever political imagery, interwoven with some really very subtle family emotions. I’m finding it difficult to put this into words — there were so many parts of the film that stood out for me, but I don’t want to give any of it away. The way Alex (Daniel Brühl) gets excited by the silliest things because of his obsession is just fantastically played out, being both touching and very funny, and the way that his mother is played, especially towards the end of the film, is very well done.

I think the best thing I can do is tell you to see it yourself. Your local video shop is bound to have a copy by now.