Introduction

The following pages are intended to give you a solid foundation in how to write clean, elegant HTML to display information. You won't be a HTML guru at the end but you will be well on your way and armed with the right knowledge and skills to get you there if that's what you want (which you should).

The World Wide Web is an increasingly important aspect of our lives. Web technologies are also being incorporated into many other areas as well. HTML is the foundation of this and this is what this tutorial will focus on. Once we have a solid foundation in HTML, future tutorials will explore CSS (Cascading Style Sheets), which allow us to style the information we are displaying, and Javascript, which allows us to add interactivity.

In this tutorial we are learning how to write HTML with our own bare hands. This tutorial is not going to look at programs which generate HTML for you such as DreamWeaver or ExpressionWeb.

Outline

This HTML tutorial is divided into 11 sections. In general I recommend you work through them in order but if you've come here just to learn about a specific topic then who am I to slow you down, just head straight on over.

You can now jump into section 1 and get started or keep reading below to learn a little more about this tutorial.

1. Background Information - A bit about the browser, writing, viewing and debugging your HTML code.
2. The Basics - What is HTML exactly and how do tags work.
3. Document Template - The basic HTML template all documents should follow.
4. Headings and Paragraphs - Basic tags which allow us to organise content.
5. Simple Formatting - A few more tags to help make your important content stand out.
6. More Formatting - Learn about special characters, preformatting text and comments.
7. Links - How to link your content to other pages.
8. Images - Make your content stand out with images.
9. Lists - Learn how to organise content into lists.
10. Tables - Learn how to organise content into tables.
11. Final Thoughts - Where to from here.

Once you've worked through this tutorial and gotten the hang of HTML you may want to check out our Website Development Challenges to see how you can take this stuff further.

Structure

The best way to learn HTML is as a series of small, easy to manage steps. This tutorial is organised as such, with each section building upon the knowledge and skills learned in the previous sections. If you work through them in order, read them fully (there is a fair bit of material but it is important for getting a proper understanding) and practice as you go I believe you should have a fairly pleasant and smooth journey to HTML mastery.

99 times out of 100 when a student has troubles with this stuff I find that it is not that they are incapable but that they were lazy and didn't read the material fully.

Each section is structured in the following format:

• An introduction outlining what you will learn in that section.
• Detailed material including extensive examples.
• A summary of the most important concepts.
• A set of activities to help you solidify your knowledge and skills.

Think of the activities not as tutorial questions (such as you may get in a class at school) but as direction on where to explore to benefit from your new knowledge and skills. Treat the activities as a starting point for exploration. The further you take it, the better you will do. (How well you do and how far you go depends on how unlazy you are.)

This site is also designed to work well on tablets. I know a lot of people like to be at their computer doing work and have their tablet next to them with reference material on it. If that is you then this site works quite well with that set up. Another good approach is to have your browser on one half of the screen of your computer and a text editor on the other half so you can try out the examples as you go.

Problem Solving and Creative Thinking

If you wish to succeed with HTML then there are two things which will help, Problem solving and Creative thinking. Here are some basic pointers to help you along the way.

• Explore and experiment. Remember, you're learning how to assemble a set of building blocks and with them you can build elegant pages. The examples you will find are intended to be an illustration of how the code works, not the only thing you can do with it. I encourage you to tweak the examples and see how they behave. This will give you a much better understanding on how they work. You will have a lot of questions along the way along the lines of "What if....?" and "Can I ...?" to which I say, "Give it a go and see what happens." The worst you can really get is an obscure page. In which case you think about it a bit to understand why you got the output you did, then have another go. Don't hold back!
• Read carefully and don't skip over the fine details. I can't stress this enough. The fine details are important and are often the difference between your code working and not working. If something isn't working then re-read the material carefully and re look over what you have typed in to make sure you haven't make a silly little typo.

To learn more about problem solving visit our Problem Solving Skills tutorial.

About the Author

Hi. My name is Ryan Chadwick and I have been teaching HTML to students for over 10 years now. It's something that I very much enjoy. In a world where we are increasingly hiding the complexities away from users (smart phones and tablets in particular), it is always satisfying to give that power back to people and allow them to do amazing things with technology.

But teaching is only one of the things I do. I also develop and manage websites, and manage computer systems for a few different organisations. I feel that all my work is complementary and benefits from what I learn in the others. Combined, they give me a fairly good understanding of how technology works, and also an understanding of how people use technology, perceive technology, learn technology and work around technology.

This website is both for you, and for me. For you, it is a digital form of what I have been teaching my students over the years. For me, it is an opportunity to clarify and polish what I teach and how I deliver it. To these ends, if you have any feedback at all, be it to tell me you found a particular section confusing, or to let me know it was helpful, I would be more than happy to hear from you.

Drop us a message at

Using this material

Anyone may link to the content on this website.

If you are a teacher, academic, manager or trainer and wish to use this material in your classes or training you are more than welcome to link to these pages and refer your students here or show them in your classes, but please do not just copy my material.

I've put a fair amount of time and effort into creating this resource so please be cool and do the right thing.