HTML Tutorial - Learn to Design a Website using HTML

Chapter 1: The Beginner's Guide to Learning HTML and CSS


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.

Preliminary Matters

  1. This is not the easiest way to create a website

    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:

    1. Expression Web Tutorial — Expression Web is a free web editor from Microsoft.

    2. Dreamweaver CS6 Tutorial — Dreamweaver is a 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 CS5.5 Tutorial, the Dreamweaver CS5 Tutorial, the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial.

    3. BlueGriffon Tutorial — BlueGriffon is a free, open source web editor.

    4. KompoZer Tutorial — KompoZer is another free, open source web editor. It is, however, somewhat outdated in its support for the modern web standards.

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

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) as a starting point.

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:

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.

Next Chapter

In the next chapter, we will deal in greater detail with the HTML features that pertain to text.

Copyright © 2011-2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

You are here:

Top » HTML Tutorials »

Other articles on: HTML, CSS, Getting Started

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Pages

New Articles

How to Link to This Page

It will appear on your page as:

HTML Tutorial - Learn to Design a Website using HTML





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.