HTML Tutorial - Learn to Design a Website using HTML

1. Tutorials for both free and commercial visual web editors can be found on the following pages:
   
   1. 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.
   2. KompoZer Tutorial — KompoZer is a free web editor.
   3. 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).

2. This guide omits certain important steps

   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.

3. HTML is not enough

   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.

Get a Proper Text Editor

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".

• Do NOT use Notepad

  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 a Word Processor

  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.

• There are many free and commercial text editors arounds

  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:
  
  1. 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.)
  2. 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 pla
     in 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 have Dreamweaver...

  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.

Your First Web Page

Now that I've bored you to tears with the preliminaries, let's just jump into the deep end of the pool immediately.
Take the following (incomplete) sample HTML page as a starting point.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <p> This is a sample web page from thesitewizard.com's HTML tutorial. </p> </body> </html>

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.

The Logic of HTML

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 "<p>" and "</p>". This entire block is itself sandwiched between "<body>" and "</body>". In fact, if you're observant, you'll notice that there are other pairs of words enclosed in angle brackets like the "<head>" and "</head>" pair, as well as the "<html>" and "</html>" 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 "<body>", being used to indicate the start of something, and the version with a preceding slash ("/"), like "</body>", being used to flag the end of something.
Each tag has a specific function. For example, the "<p>" and "</p>" tag pair is used to indicate the start and end of a paragraph. (Think of the "p" in "<p>" as referring to "paragraph".)

The Structure of an HTML Document

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.

1. The first line of the page identifies the type and version of HTML that your web page is using.
2. The rest of the page is enclosed between the "<html>" / "</html>" tag pair. Code enclosed between these two tags form the web page proper.
3. The first part of the web page is what is known as the HEAD section. The section begins with "<head>" and ends with "</head>". 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.
4. 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 "<body>" and "</body>" tag pair.

Each of these things is discussed in detail below.

DOCTYPE or DTD

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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:

• HTML 4.01 Strict DOCTYPE

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  
  

• HTML 4.01 Frameset DOCTYPE

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  
  

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

The HEAD Section: Introducing The TITLE Tag

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.

<title>My First Web Page</title>

For those not sure what I mean, move your cursor to the end of the line containing the <head> 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 <title> tag and the closing </title> tag. And ensure that this entire sequence occurs before the closing </head> 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 <head> tag and the corresponding closing </head> 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 <title> only sets the title of your web page for the benefit of web browsers and search engines. It does not change your web page's appearance. Anything that you want displayed on your web page itself has to be inserted into the BODY section.

Important: The TITLE tag is required on every web page. Do not leave it out. As I mentioned above, the sample HTML page I gave earlier was not complete, since it lacked the TITLE tag. Actually, it's still not complete, even as a minimal page, and won't be until the next chapter.

Again, please do not quit your text editor or web browser. Keep it open throughout the tutorial. You'll learn faster if you try out what I mention.

The BODY Section and The Paragraph Tag

Although I'll introduce the majority of the HTML tags dealing with text in the next chapter, we will handle the paragraph tag, <p>, here. This will also allow me to demonstrate one very important feature of HTML, namely, whitespace characters do not matter in the portion of the web page between most opening and closing HTML tags. (Don't worry if the last part of that sentence doesn't make sense. That's what this whole section is here for: to explain it.)
Before we get ahead of ourselves, let me first state that the <p> tag signals to the browser that it is to display what follows as a single paragraph until it reaches a </p> tag.
In your text editor, put your text cursor at the end of the line that says "This is a sample web page from thesitewizard.com's HTML tutorial." That is, move your cursor until it is just after the full stop (period) in that sentence. Hit the ENTER key (or RETURN key if you use a Mac). This creates a new line in the text editor. Now type some other sentence into that new blank line. For those who don't know what to say, type "TheSiteWizard.com is a useful resource for webmasters" (without the quotes).
Save the page and reload it in your browser, and look carefully at the placement of your new sentence. Notice that even though you put the sentence on a new line in your text editor, your browser displayed the sentence immediately following the previous one, so as to make both sentences part of the same paragraph.
Return to your text editor and put your cursor between the words "from" and "thesitewizard.com's". At this time, there is only one blank space between those two words. Add some more spaces by hitting your space bar several times. It doesn't matter how many spaces you add, as long as it's a significant number so that you can easily spot that there's a large unnatural gap between those two words. Hit the space bar 10 times if you can't decide.
Once again, save your page and refresh it in the browser. Look at your paragraph in the browser again. Observe that your paragraph looks no different from before. It's as though the web browser swallowed all your extra spaces.
The space character and the new line character (the invisible character or sequence of characters that the text editor inserts into your web page when you hit the ENTER or RETURN key) are called "whitespace" characters. Multiple whitespace characters are replaced by a single whitespace character by all web browsers. In HTML, you do not format a web page by adding spaces or new lines. It won't work. As you have noticed from above, the browser just ignores the extra spaces or lines you add. Instead, you format a page in HTML by adding different HTML tags, or by using CSS.
How does one add a new paragraph to a web page? I'm sure at this point, most of you have already (long) guessed the answer. But let's try it out so that you can see it in action. (I also want to use it to demonstrate something else about HTML. So please do it even though it seems really obvious.)
Move your cursor to the end of the </p> line. Hit the ENTER key. Then insert the following into the new line that you created.

<p>This is a new paragraph because I used a new paragraph tag to start it off.</p>

Save the page and reload it in your browser. The newest addition to your web page should now appear as a new paragraph in your browser.
Switch back to your text editor again. Notice that unlike the previous paragraph, I didn't put my <p> tag on its own line. Instead, I just typed the sentence belonging to the paragraph immediately after the tag, and yet everything worked out the same as when I put the tag on a separate line. Whether or not there is any whitespace between the paragraph tag and my actual text doesn't matter at all.
I recommend that you play around with this a while to get familiar with how the web browsers interpret white space and the paragraph tags. That is, add new paragraphs, or new sentences to your existing paragraph tags, put all sentences and tags on a single line, and reload the page in your browser to see its effects.

Recommendations (to Protect Your Sanity)

From the above experiments, you have probably realised that you can probably put your entire web page on a single line in your text editor, and everything will still show up correctly in your web browser.
While that is true, it's best that you don't do that. Although web browsers will have no trouble dealing with that kind of code, you, the webmaster maintaining the page, will. With everything compressed to occupy minimum space, it's very easy for you to miss something and create errors on your web page. The minimal space saving you get from doing those kinds of silly tricks is just not worth it.