HTML Tutorial

What is HTML?

This may sound like a bit of a stupid question to ask, since if you came to this article you probably want to learn HTML, and thus have a vague idea of what it is. Despite that, I'm going to do like all the other tutorials and actually give you a definition. That way you'll have an idea of what this tutorial's about.

HTML stands for Hypertext Markup Language. It's a set of elements or 'tags' that are put into a text document to mark it up for display in a web browser.

HTML is:

A way of adding structure to documents.

Easy.

A necessary part of good website design.

HTML is not:

A way to make documents look pretty.

A programming language.

The only thing you need to know to put up a good website.

Now, I suspect I may have lost one or two of you. After all, if you've found this tutorial you want to make web pages and web sites, and surely a part of that involves making them look nice, right? Well, yes. But web sites involve more than just HTML. These days, websites might involve any of the following:

• Databases, and database queries written in HTML.
• Server-side scripting languages such as Perl, JSP, ASP or PHP. These generate HTML and allow the site to interface with databases.
• HTML code.
• Presentational instructions (stylesheets), written in CSS.
• Browser scripting such as Javascript and VBScript. This adds interactivity to web pages.
• Embedded media, which may include:
  • Images
  • Flash files
  • Movies or audio files
• A whole lot of other crap.

Most of that falls outside the scope of this tutorial, however. I'm just going to teach you the very basics; stuff that will allow you to cobble together a web page that, though not necessarily pretty, will at least be fairly easy to update if need be. At the same time I hope to get you into good habits.

What You Need

Since we're just starting with the basics, you only really need two programs when running through this tutorial: a web browser (such as the one you're using now) and a text editor. For the moment, Notepad or whatever basic text editor comes bundled with your operating system is fine, but you may wish to pick up an editor with syntax highlighting. This will make coding of all sorts a lot easier for you.

Guiding Principles

I can't teach you everything there is to know about HTML. I can't even make you good at it. Only you can do that. Still, bear these principles in mind when you read this tutorial, and whatever other books and tutorials on which you manage to get your grubby mitts.

1. Practice, practice, practice. The only real way to learn is by doing. Get yourself some webspace, even an Angelfire site will do, and stick some pages up. Mess around with your code. Experiment. Make mistakes and learn from them. Your first effort (hell, your first few efforts) will be crap. Mine was. Everyone's was. Learn what works and what doesn't.
2. Structure, structure, structure. Remember what I said about HTML being a way to structure documents? I really meant it. Poor structure will ultimately lead to the site looking awful. Make sure all your HTML tags are closed and nested properly.
3. Indent, indent, indent. Indented code is easier for you to read. It'll help show you where lists and tables begin and end, and on the whole will help you keep track of your code. Programmers do it, or at least good programmers do it. So should you.
4. Test, test, test. Look at your web page on more than one browser. Check it out on Internet Explorer, Firefox, Opera, anything you can think of. Check the page out offline before uploading it to your site. Sure, mistakes can always be fixed later, but the fewer mistakes you have on show, the better it reflects on you.
5. Check, check, check. Sick of me repeating verbs three times yet? I know I am. Make sure all your tags are closed. Ensure all your element names are in lower-case, as XHTML is case-sensitive. Check the spellings of element and attribute names and values. A character out of place can screw up your document structure. Be thorough!

What isn't in this Tutorial?

If you're after an advanced tutorial, this probably isn't for you. This is about the real basics, and the habits you should try to develop when applying them. This isn't a complete tutorial at all. Certain bits of HTML are useless without additional bits of code, whether server- or client-side, to back them up. Pretty much the same goes for most interactive bits of a website. As such, you won't find much of anything about the following here:

• Forms
• Event attributes like onclick, onmouseover and onmouseout
• Embedding media in a web page

We will be covering these subjects in other tutorials, but they fall outside the scope of this article. So there.