HTML Tutorial - Learn to Design a Website using HTML

by Christopher Heng, thesitewizard.com

All web pages that you see on the Internet use HTML to format its pages for display in a web browser. This is so whether the website is a shopping site, a search engine, a blog or a tutorial site like thesitewizard.com. This tutorial is intended to be a systematic guide to teach you HTML from the ground up. It assumes no knowledge of HTML. By the end of this tutorial series, you'll be confidently creating web pages by directly coding in HTML.

Hand coding a web page in HTML is not the easiest way to create a website. In fact, it's probably the slowest and least efficient way, and, depending on your inclinations, possibly the most tedious. If all you want is to create a website, you may want to consider using a visual web editor to do the job instead. Visual web editors, also called WYSIWYG web editors ("What You See Is What You Get" editors), are computer programs that let you design websites without needing any technical know-how.

Please see Should I Learn HTML or Just Use a WYSIWYG Web Editor? Pros and Cons of Using a Visual Web Editor vs Learning HTML for a more detailed discussion of the advantages and disadvantages of using either method.

Tutorials for both free and commercial visual web editors can be found on the following pages:

Dreamweaver CS5 Tutorial — Dreamweaver is a well-known commercial web editor. If you are using an older version of Dreamweaver, please see the appropriate versions of the tutorial instead, such as the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial.

KompoZer Tutorial — KompoZer is a free web editor.

I have tutorials for other less known web editors as well. The list of tutorials for these different editors can be found on the Tutorials for WYSIWYG Web Editors page. This includes the NetObjects Fusion 11 Tutorial (a commercial web editor) and the Nvu Tutorial (an old version of KompoZer).

Since this is an HTML tutorial, it omits some of the non-HTML-related steps that are required for creating a website, like getting your own domain name, getting a web host, etc. I recommend that you read How to Make / Create Your Own Website: The Beginner's A-Z Guide for more information on these steps. In fact, if you don't already have a domain name or a web host, or if you don't even know what these things mean, I suggest that you read that guide first. The HTML tutorial you're reading assumes that you already know those terms.

HTML in and of itself will not let you do things that web designers typically want to do on their website, like create 2 or more columns on your websites, use different fonts, change colours (or "colors" if you use a different variant of English), or do certain other visual design work to make your web page look nice. Things that govern the appearance of your website are handled by a separate technology called CSS. Please read What is HTML? What is CSS? What are JavaScript, PHP and Perl? Do I Need to Learn Them to Create a Website? for an explanation of what this is, and how it relates to HTML.

That is to say, after completing the HTML portion of this tutorial series, we will move on to the CSS tutorial, so that you can complete your website. Don't worry. This HTML tutorial will seamlessly lead into the CSS tutorial, since both sections of the tutorials were written to work with each other.

If this sounds daunting, you may want to consider creating your first website using one of the visual web editors mentioned above. Those editors automatically create the HTML and CSS code for you, so that you don't have to bother with such things. Then, after you finish your website that way, if you still want to learn HTML, feel free to return to this guide.

The first thing you need is to get a proper text editor. Let me start by ruling out certain things, so that there's no misunderstanding about what I mean when I say "proper text editor".

I know that when I mentioned "text editor", some people probably thought, "no problem, my computer uses Windows, which comes with Notepad".

Let me say this bluntly: Notepad is NOT a proper text editor. If you are going to be working on your website by coding directly in HTML, you really need a fully functional editor. Notepad cannot handle certain characters and character combinations that you may encounter along the road. As such, in certain circumstances, it may corrupt your file without your realising it. Oh, don't get me wrong. It'll work fine most of the time, but at some point along the road, if your file happens to have one or more of those characters it doesn't handle, it will bite you. And you won't even know it happened, since there is no warning or error message accompanying the file corruption. In addition, Notepad cannot handle large files, in which case it may transparently invoke a different program, Wordpad, to do the job. And Wordpad will definitely corrupt your web page.

Bear in mind that even the Microsoft developers do not regard (nor do they recommend) Notepad as a viable editor for normal text editing work. The editor was created for the casual computer user to view things like Windows log files and things like that. That's why it does things like transparently invoking a different program for huge files. Since it's primarily for viewing files, it doesn't matter whether Notepad or Wordpad does the work. But for the webmaster, it matters a great deal.

Even if you are striving for an ascetic life of hardship and severity, Notepad isn't the way. It may be acceptable for someone dabbling with the occasional text file (and even then it's debatable), but it's not the correct tool for someone who wants to work directly with HTML on a regular basis.

Do not use word processors to hand code HTML files. Word processors insert hidden (and invisible) code into your files which are not part of HTML.

By word processors, I mean any program that allows you to underline text, make text bold, put text in italics, create tables, etc. This includes Microsoft Word, LibreOffice, OpenOffice.org, and all the stuff listed in the Free Word Processors and Office Suites page. It also includes Wordpad, which comes with Windows. Yes, Wordpad is a rudimentary word processor. Do not use it for this purpose.

Remember: the type of text editors I'm talking about do not allow you to do things like underline words, put text in bold, etc. They behave just like Notepad (without the problems the latter has). If your program has these types of features, it's not a text editor but a full blown word processor.

Some of you are probably thinking at this point that I've ruled out just about everything on your computer system. Don't worry. Text editors are a dime a dozen on the Internet. In fact, you don't even need a dime. There are zillions of free text editors around. (And zillions of commercial ones too, for that matter. Programmers seem to love creating text editors.)

A list of free text editors can be found on the following pages:

Free HTML Editors and WYSIWYG Web Editors — although this page lists both text editors as well as WYSIWYG web editors, remember that you're just looking for a text editor, so you can ignore the WYSIWYG web editors section of that page. (In case you're wondering, the HTML editors listed on the page are just text editors. They can be used to type HTML code, programming code or any other types of plain text.)

If you can't find anything you like on that page, you can also look at the Free Programmer's Editors page. Don't be deceived by the grandiose title of the page. "Programmer's editors" are just plain text editors. In fact, my decision whether to list a text editor on the HTML editors page or the programmers' editors page is very often arbitrary. If you happen to use a particular text editor to write HTML code, you will end up calling it an HTML editor. If you happen to use the same thing to write programming code, you'll call it a programmer's editor. But they're all just plain text editors. Really. It's mostly a matter of perspective.

For those who can't decide, let me just say, from the point of view of someone who has been using text editors for decades: they're all mostly the same nowadays. Remember that these are not fancy word processors or anything. They all function like Notepad. There is no "best" text editor or anything like that. If you can't decide, just get one and try it out. If you don't like it for some reason, uninstall it and get another one and try that instead. After all, they are all free.

(Actually, for beginners, chances are that any one that you pick will work just fine.)

If you already have Dreamweaver, you don't have to get a separate text editor. Just switch to Dreamweaver's code view. That is, click "View" from the menu bar, and "Code" from the drop-down menu that appears. This switches Dreamweaver from its visual design interface to its text editor interface.

And you're not getting some half-baked text editor either. Dreamweaver's built-in text editor is actually very good, and one that is highly optimised for people writing HTML, so you might as well not waste time looking for another one. Using Dreamweaver's code editor also has numerous other advantages. For example, it has tools to check your code for correctness, and you can also easily switch to the editor's Design view to get an idea of what your web page looks like in a browser. Other advantages include being able to use its site synchronisation facilities to publish your web pages. And so on.

Now that I've bored you to tears with the preliminaries, let's just jump into the deep end of the pool immediately.

Before we discuss the code above, please copy it into your text editor, and save it as a file named "sample.html" on your desktop. I know it's easy to just dismiss my words here and skip this step, but doing it will speed up your learning and improve your understanding of what I'm talking about later. (You'll also be modifying the code as we go along.) There's also a secondary (less important) benefit in that it'll help you get familiar with your text editor.

For those who don't know how to do what I just said in the paragraph above, click once in the box above containing the code. The contents of the box should automatically be highlighted. If it isn't, drag your mouse over the text and manually select everything. Then click your right mouse button. In the menu that appears, click the "Copy" item. Start up your text editor. Click "Edit" on the menu bar followed by the "Paste" item in the drop-down menu that appears. The text you see in the box above should appear in your text editor.

Depending on which editor you've installed, the text above may appear in a variety of colours. Don't worry about that. The colours are what programmers call "syntax highlighting". Just ignore it. (And don't worry if you don't see those colours either. They are not important.)

To save the file, click the "File" menu, followed by the "Save" item in the submenu that appears. When prompted for a filename, select the appropriate folder for the file to be saved (for example, your desktop, so that you won't forget where you put it) and type "sample.html" (without the quotes). Note that I'm assuming that you're not using Notepad. If you use Notepad, this won't work, since Notepad will invisibly change your filename to "sample.html.txt" behind your back. Don't use Notepad.

Now open the file in your web browser. One way to do it is to doubleclick the file on your desktop. The file should appear in your default web browser. Keep both the browser and the text editor open. That is, don't close or exit either program.

Look at the HTML code (either in your text editor or by scrolling up in this article).

Notice that the words displayed in your web browser, "This is a sample web page from thesitewizard.com's HTML tutorial" is sandwiched between "

" and "

". This entire block is itself sandwiched between "" and "". In fact, if you're observant, you'll notice that there are other pairs of words enclosed in angle brackets like the "" and "" pair, as well as the "" and "" pair.

All these angle-bracketed words (or letters) are commonly called "HTML tags". In HTML, the majority of tags come in pairs, with the unadorned version, like "", being used to indicate the start of something, and the version with a preceding slash ("/"), like "", being used to flag the end of something.

Each tag has a specific function. For example, the "

" and "

" tag pair is used to indicate the start and end of a paragraph. (Think of the "p" in "

" as referring to "paragraph".)

Before we discuss the structure of a web page, consider a normal business letter in the brick and mortar world. Such letters actually have a particular form: if the paper you're using does not have a letterhead, you will normally have to type (or write) your own address at the top of the page, followed by the address of the person you're writing to below. Only then do you begin your letter proper with something like "Dear...". There is typically a subject line following that, and below that comes the body of your letter where you finally get to say the things you wanted to say.

Web pages also have a particular format.

The first line of the page identifies the type and version of HTML that your web page is using.

The rest of the page is enclosed between the "" / "" tag pair. Code enclosed between these two tags form the web page proper.

The first part of the web page is what is known as the HEAD section. The section begins with "" and ends with "". It contains information meant for web browsers and search engines. Code placed in this section is not displayed in a web browser. It's like the addresses you place at the beginning of a business letter — they serve a purpose, but they're not actually part of the main content. Anyway, I'm sure you noticed that the HEAD section in my example code is empty at the moment. That's because I didn't want to confuse you by cluttering the file with too many things. We'll insert something into this section later in this chapter.

The part of the web page that contains the information displayed in a web browser is called the BODY section, and it is, as you've probably guessed by now, enclosed between the "" and "" tag pair.

Each of these things is discussed in detail below.

In the example code you used above, the first line reads as follows:

Unlike the other lines on your web page, this first line is not an HTML tag. As mentioned above, it's a sort of version identifier that tells web browsers that your page is using version 4.01 of the HTML specifications. At the time I write this, as far as I can tell, the most commonly used versions of HTML on the Internet are HTML 4 (or 4.01 to be exact) and XHTML 1.0. For all practical intents and purposes, these two versions are actually mostly the same, except that XHTML is fussier about some things, like requiring small letters (lowercase) words for your tags, requiring closing tags for everything, and some other stuff.

We will only be dealing with HTML 4.01 in this tutorial. Don't worry. You don't lose out anything by using HTML 4 as compared to XHTML. In spite of its flashier name (with the extra letter), XHTML doesn't give you more features to use on your web page. It mostly just makes the browser fussier about what it will accept from your web page. It also adds complications with cross-browser compatibility (mainly with old versions of Internet Explorer) that will make your life a bit more miserable if you're a purist and insist on strict compliance with every aspect of XHTML. Since you're just starting out, it's easiest to just begin with HTML 4. (And there's no real need to transition to XHTML either. HTML 4 is complete in itself.)

The version line is commonly called a DOCTYPE by webmasters (since the line begins with the word DOCTYPE). Officially, it is known as a Document Type Definition (or "DTD" for those who love abbreviations). As its name indicates, it does more than tell web browsers the version of HTML you're using. It also indicates whether your web page is one of 3 types: whether it uses frames (a type of HTML technology), whether it is a normal web page ("transitional"), or whether it is a normal web page that uses a limited subset of HTML ("strict").

For those curious about what the DOCTYPEs look like for the other document types, they are as follows:

Anyway, there's no need to memorize any of these DOCTYPEs. Just copy and paste them into your web page as needed.

One of the most important things that belong in the HEAD section is the TITLE tag for your web page. This tag provides web browsers and search engines the title of your page. The title you give in this tag doesn't actually appear on your web page itself, but it is placed in the title bar of the web browser window when it displays your page. To understand what I mean by this, glance at the top of your browser window for now. Do NOT scroll the page to the top or anything like that. Just look upwards at the top edge of the browser. In most web browsers, you should be able to see the words "HTML Tutorial - Learn to Design a Website using HTML (thesitewizard.com)" somewhere in the title bar. Some browsers put these words on the tab for the current window. This is the title that I set for this article.

Switch to your text editor and add the following line into your HEAD section.

For those not sure what I mean, move your cursor to the end of the line containing the tag. Hit the ENTER key to create a new line underneath. Then type in the words I gave in the block above. Actually, you don't really have to use the words "My First Web Page". Use whatever words you want as the title. But make sure those words are enclosed between the opening tag. And ensure that this entire sequence occurs before the closing tag. In other words, when I say to add a certain line into the HEAD section, it means that you have to add that line between the opening tag and the corresponding closing tag.

Save your page and reload (refresh) it in your web browser. For those who are not sure how to reload a page in your browser, find out how. In most browsers, hitting Ctrl+R should do the trick (that is, holding down the Ctrl key while typing the letter "r" on the keyboard). In addition, if you use Windows, a quick way to save your work in most (if not all) text editors is to hit Ctrl+S, that is, hold down the Ctrl key and type "s" on the keyboard. (I'm not sure if this works across the board on Mac software too.)

Now look at the title bar of the browser window. You should be able to see the title you set. Notice that the words you typed do not appear in the main body of your web page itself. The