“Another XHTML lesson?” scream the masses. “Yes, yes indeed” I reply. Why do I think that we need another one going on? Because I would absolutely hate to learn now, with so many conflicting opinions flying around, browsers to contend with, semantics finally playing a larger role. In general, the job of a web developer is getting harder.
This ‘lesson’ is going to warm us into things gently. I’m going to spout more opinion than fact - but opinion which will be beaten into your brains by the end of the whenever-it’s-done long series of lessons - and explain where we’re going with this. I’m also labouring under the impression that you have time on your hands - I doubt you’ll be able to skim this. I’ll try and keep things concise, just be warned that some things invoke such a powerful emotion in me that gesticulating is the only way forward to express my distaste.
But before you even dive into throwing together your first doctype and your paragraph with ‘Hello world’ in it, you need to think about these things, so let’s crack on. (Slight warning - if you’re very new to this, you might not get some of the words used, but they’ll be covered, don’t worry.)
Semantics
Semantics are, as in language, bloody important. They are what dictate the meaning behind a word, or in our instance, tag. It’s vitally important to remember that these days, it’s not just browsers running through the content on the internet. We have spiders, text readers, mobile phones, PDA’s, aggregators and more to contend with. Every bugger and his mate grabs content from the internet now.
So we need to remember that we can’t give something meaning simply by how it looks. What if a visually impaired user comes along? They may not be able to see italics, but if something is in an <em> tag then that’s emphasis, which can be placed on the phrase by their screen reader.
That’s perhaps not the best example, but this section is tied in very heavily with..
Structure
Because structure can give a document excellent semantic meaning.
Imagine a book. You read the title, and the chapter title, a section title, a shitload of paragraphs, and then get to another section title. Pretty important structure huh? It’s exactly the same for websites. Given that most (All? Catch my several-year-old take on that) websites are there to give information, they’re pretty similar to books. And we’ve had these semantic, structural tags since the internet was dragged kicking and screaming into the world. <h1>, <h2> etc.
Headings are vital. Break up your document with them. Wrap your content in paragraphs rather than just divs. If you have your site logo, is it an <img />? No, it’s not - it’s a styled <h1> if you think about it, because the image itself has no meaning towards the actual content of the page.
The best way to check this out is to turn off CSS on your website. You should very easily be able to follow the flow of your document, and there shouldn’t be anything getting in the way like unrelated (i.e. layout-specific) images.
The Evil Stuff
Ok, so you’ve got the picture that we’re all cuddly with semantics and document structure in 2008 right? Well, let’s take a look at the kind of crap we don’t like to see any more, because it hurls us back 5 years into a world of iframes and tables. What will we absolutely never, ever, under any circumstances be using in these lessons? (Feel free to skip to the next area if you’re clued up about this kinda crap.)
Tables for layout
Remember that section on semantics? The lovely <table> is, as you would expect, in no way at all semantically correct for wrapping an entire site. They’re slow to load… honestly, I don’t think I can reiterate this any better than it’s already been done.
Internet Explorer
I know this has been done to death, but I want to talk to learning developers. If you’re using IE to develop, you’re gonna have a really shitty time. Get Firefox, (Nothing against Opera and such, but thinking about Firebug here..) and then go get Firebug and the Web Developer Toolbar. When you get into JavaScript especially, it’s an absolute must to have these tools. Remember people, we’re here to create our sites to standards first and then hack it into IE compatibility. Not the other way round.
Frames
Quite literally, it’s 2008. They’re ugly, bad for SEO, inconsistent and a bitch to maintain. Nothing more to be said.
So what do I need?
Having established what you absolutely don’t need, what do you need? Well, I get laughed at in IRC because of my die-hard defence of Adobe’s Dreamweaver. I love it. It’s quite pretty, runs fast, has built-in FTP, etc etc. I’d love to use Aptana and others, but they’re just not aesthetically pleasing enough. I do not ever use the ‘Design’ view, it just has a very nice ‘Code’ view, and loads of handy features (Which I’m sure the others have, but like I said, on aesthetics, Dreamweaver is made of win.)
So if you’re a noob or an Adobe-fanboy like myself, you can’t go far wrong with Dreamweaver. Free alternatives of course include Aptana (Which I may myself try and use. Again.) and the ever-awesome Notepad++.
If you’re going to go into PHP and MySQL, which I fully intend to write about as well, you’ll need to grab hold of a local server for development - I personally use WampServer because it includes everything in a 30-second install process.
If you want to put your finished stuff on the intrawebz, you’ll also need an FTP client. FireFTP? SmartFTP? There are thousands.
And of course, you’ll need a layout. I’m not going into design, because that’s totally not my field. I can do it but my skills aren’t exactly ‘leet’.
The next steps
That’s it! Get all your stuff installed and sorted out. Then hang the hell on and wait for part 2, where we’ll actually get into some damn code. I’m going to provide the full process of coding up a sample layout, and maybe sprinkling some MooTools goodness in there as well.
