HTML Tutorial by iykestar

VIEWS: 20 PAGES: 125

									How to Start / Create Your Own Website:
The Beginner's A-Z Guide
The essential step by step guide on how to set up a website
by Christopher Heng,

This tutorial shows you how to make or create a website. It is intended for the
beginner and layperson, taking you step by step through the whole process from
the very beginning. It makes very few assumptions about what you know (other
than the fact that you know how to surf the Internet, since you're already reading
this article on the Internet). As some steps are more involved, this guide also links
to selected relevant articles on that you will need to click
through to read for more information.

The Essential Step-by-Step Guide to Making Your
Own Website
   1. Get Your Domain Name
      The first thing you need to do before anything else is to get yourself a
      domain name. A domain name is the name you want to give to your website.
      For example, the domain name of the website you're reading is
      "". To get a domain name, you have to pay an annual fee
      to a registrar for the right to use that name. Getting a name does not get you
      a website or anything like that. It's just a name. It's sort of like registering a
      business name in the brick-and-mortar world; having that business name
      does not mean that you also have the shop premises to go with the name.

         o   Detailed information on getting a good domain name can be found in
             the article Tips on Choosing a Good Domain Name.
         o   After you read that, you will need to know the steps to registering a
             domain name and the things you need to look out for when
             registering. You can find a detailed guide in the article How to
             Register Your Own Domain Name.
     o   It may also be wise to take a look at some of the Important
         Precautions to Take When Buying a Domain Name, just so that you
         don't commit the same mistakes that some newcomers make when
         buying a domain name.
2. Choose a Web Host and Sign Up for an Account
  A web host is basically a company that has many computers connected to
  the Internet. When you place your web pages on their computers, everyone
  in the world will be able to connect to it and view them. You will need to
  sign up for an account with a web host so that your website has a home. If
  getting a domain name is analogous to getting a business name in the brick-
  and-mortar world, getting a web hosting account is analogous to renting
  office or shop premises for your business.

     o   There are many issues involved in finding a good web host. Read up
         on the various things you need to look for in searching for a good web
         host in the article How to Choose a Web Host.
     o   After you have an idea of what to look for, you can search for one
         from the Budget Web Hosting page. You can also find out which web
         host I'm currently using from the Which Web Host Do You
         Recommend? page.

  After you sign up for a web hosting account, you will need to point your
  domain to that account on your web host. Information on how to do this can
  be found in the guide How to Point a Domain Name to Your Website (Or
  What to Do After Buying Your Domain Name).

3. Designing your Web Pages
  Once you have settled your domain name and web host, the next step is to
  design the web site itself. In this article, I will assume that you will be doing
  this yourself. If you are hiring a web designer to do it for you, you can
  probably skip this step, since that person will handle it on your behalf.

     o   Although there are many considerations in web design, as a beginner,
         your first step is to actually get something out onto the web. The fine-
         tuning can come after you've figured out how to get a basic web page
         onto your site. One way is to use a WYSIWYG ("What You See Is
         What You Get") web editor to do it. Such editors allow you to design
    your site visually, without having to muck around with the technical
    details. They work just like a normal wordprocessor.

    There are many commercial and free web editors around. For those
    who don't mind spending money on a good commercial web editor,
    one of the most highly-regarded WYSIWYG web editors is
    Dreamweaver. If you are planning to use this editor, has an online tutorial on Dreamweaver CS5
    Tutorial: How to Design a Website with Dreamweaver CS5. The
    tutorial takes you through all the steps of creating a fully-functional
    website with multiple pages and a feedback form, and provides you
    with the theoretical and practical foundation that will help you create
    and maintain your site.

    If you prefer to use free software, you can find a complete tutorial on
    using KompoZer, a free WYSIWYG web editor, in the article How to
    Design and Publish Your Website with KompoZer. Like my
    Dreamweaver tutorial, this one also guides you through the process of
    creating a website that has a home page, an about page, a site map, a
    links page and a feedback form. It also shows you some of the main
    features of the KompoZer software so that you can go on improving
    and updating your website on your own.

    There are many other web design software around. If you prefer not to
    use either of the above, you can find some others listed on's Free HTML Editors and WYSIWYG Web
    Editors page.

o   After you have followed my tutorial, and are on the way to designing
    your website, you might want to read the article Appearance,
    Usability and Search Engine Visibility in Web Design as well. The
    article takes a brief look at some of the real world issues that every
    web designer must deal with.
o   An integral part of web design is search engine readiness. Search
    engine promotion does not start after the web site is made. It starts at
    the web design stage. The article 6 Tips on How to Create a Search
    Engine Friendly Website is a must-read. My article on How to
    Improve Your Search Engine Ranking on Google is also important for
    the simple reason that Google is the most popular search engine
    around, at least at the time this article was written.
     o   There are many other issues regarding the design of web pages. The
         above will get you started. However, if you have the time after you
         get something out onto the web, you may want to read my other
         articles on Web Design and Website Promotion and Search Engine
4. Testing Your Website
  Although I list this step separately, this should be done throughout your web
  design cycle. I list it separately to give it a little more prominence, since too
  few new webmasters actually perform this step adequately.

  You will need to test your web pages as you design them in the major
  browsers: the latest versions of Internet Explorer (version 9 at the time of
  this writing), Firefox, Opera, Safari and Chrome. All these browsers can be
  obtained free of charge, so it should be no hardship to get them.
  Unfortunately, directly testing your site in all these browsers is the only way
  you can really be sure that it works the way you want it to on your visitors'

  Optional: If you have time, you may want to read my article on how to test
  your website in multiple versions of Internet Explorer and check your site
  under earlier versions of Internet Explorer ("IE"), namely IE 8, IE 7, and IE
  6. This is not strictly necessary nowadays, since the main culprit causing
  website problems, IE 6, is slowly disappearing from the Internet, with IE 7
  following in its heels.

  If you want to improve the chances that your website will work in future
  versions of all web browsers, consider validating the code for your web
  pages. In layman's language, this means that you should check that the
  underlying code of your web page, called "HTML" and "CSS", have no
  syntax errors. You don't actually need technical knowledge of HTML and
  CSS to validate the page, since you can use one of the numerous free web
  page validators around to do the hard work. On the other hand, if the
  validator tells you that your page has errors, it may sometimes be hard to
  figure out what's wrong (and whether the error is actually a serious one) if
  you don't have the requisite knowledge. Having said that, some validators
  actually give concrete suggestions on how to fix your code, and one of them,
  called "HTML Tidy", is even supposed to be able to fix your code for you.

5. Collecting Credit Card Information, Making Money
   If you are selling products or services, you will need some way to collect
   credit card information. You should read up on How to Accept Credit Cards
   on Your Website. I also have a step by step guide on How to Add an Order
   Form or a "Buy Now" button using PayPal to a Website for those using

   If you need advertisers for your website, you might want to read How to
   Make Money From Your Website and the follow-up article How to Increase
   Your Website Revenue from Affiliate Programs. A list of advertisers and
   affiliate programs can be found on Affiliate Programs: Free Sponsors and
   Advertisers. Those companies are on the constant lookout for new web
   publishers to display their advertisements.

 6. Getting Your Site Noticed
   When your site is ready, you will need to submit it to search engines like
   Google and Bing. You can use the links below to do this.

      o   Google's Link Submission Page
      o   Bing's Site Submission Page

   In general, if your site is already linked to by other websites, you may not
   even need to submit it to these search engines. They will probably find it
   themselves by following the links on those websites.

   Apart from submitting your site to the search engine, you may also want to
   consider promoting it in other ways, such as the usual way people did things
   before the creation of the Internet: advertisements in the newspapers, word-
   of-mouth, etc. As mentioned in my article on More Tips on Google Search
   Engine Results Placement, you can even advertise in the various search
   engines. Although I only mentioned Google in that article, since that was the
   topic of that discussion, you can also advertise in other search engines like
   Bing and Yahoo!. This has the potential of putting your advertisement near
   the top of the search engine results page, and possibly even on other

   There are also less obvious ways of promoting your website, which you
   might want to look into.

Naturally the above guide is not exhaustive. It is a distillation of some of the
essential steps in getting started with your site. If you want more information, you
should read the other articles on However, the above tutorial
should be enough to help you put your website on the Internet.

Copyright © 2006-2012 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and
scripting, from

HTML Tutorial - Learn to Design a
Website using HTML
by Christopher Heng,

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

  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

       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

    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,, 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 plain text editors. Really. It's mostly a matter of

    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

        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

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
 This is a sample w eb page from thesitew's HTML tuto

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

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

Notice that the words displayed in your web browser, "This is a sample web page
from'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>"

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.

In the example code you used above, the first line reads as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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"
      HTML 4.01 Frameset DOCTYPE
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

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

The HTML Tags that Deal with Text
(HTML Tutorial Chapter 2)
by Christopher Heng,

In this chapter of the HTML tutorial series, we will learn more about the HTML
tags, entities and other paraphernalia that deal with text.

If you have only just arrived at this site with the intention of learning HTML,
please start at the first chapter of the tutorial. (This article you're looking at is
actually chapter 2.) Those who do not know anything about creating websites
should read How to Make / Create Your Own Website: The Beginner's A-Z Guide
before anything else.
Language and Your Website: Character Encoding,
Character Sets and Content Type
When you type some text characters into a file on your computer (any file,
including things like HTML files), the characters are not saved as letters of the
alphabet in the file but as a series of numbers. (It's actually more technical than
that, if we go down to the electronic level, but the above loose description will do
for our purposes.) For example, if you type the letter "a" into a plain text file, your
editor actually saves the number 97 into the file. When you display that file, the
text editor or web browser (or any other program) reads the number and interprets
it as "a" and displays it as such.

The problem is that 97 does not intrinsically mean "a" or any other thing on a
computer. It means "a" only if the program reading it expects a text file using a
particular language, encoded using a specific system that is pre-agreed by everyone
in the computer world. In this system, 97 happens to mean the small letter
(lowercase) "a". In a different system, or character set, 97 may mean some other
letter of some other alphabet.

Since a web page can contain any language in the world, encoded using any
character set, a web browser needs to know both the language your page uses as
well as the character set it is using in order for it to display the text correctly.

One way to specify the language that your web page uses is to add an attribute to
the <html> tag. If you will recall from chapter 1 of this HTML tutorial, your entire
web page proper is enclosed between <html> and </html>. The addition of a
language attribute specifying that the content of the page is in English will result in
the HTML code from the previous chapter looking like the following.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
 <html lang="en">
 <title>My First Web Page</title>
 This is a sample w eb page from thesitew's HTML tuto
Notice that instead of a plain <html> tag, we now have <html lang="en">. I added a
space after the "html" part of the tag, and added additional words. As is probably
obvious to you, the attribute "lang" specifies the language the page is written in.
The portion after the equals sign ("="), enclosed in quotation marks, specifies the
language. Since our sample web page uses English, I have specified "en" as the
language. If your page uses German, you will have to use "<html lang="de">", and if
it uses French, you will need to specify "<html lang="fr">". As you probably have
already noticed, you can't just specify any old language name after "lang=". You
need to find out the actual code for that language. A list of language names can be
found here. Remember to enclose the name in quotation marks before placing it
after "lang=".

Apart from the language attribute to the HTML tag, you also need to specify the
character set that your web page uses. This can be done by adding a new tag into
your HEAD section. If your web page uses English and only the basic English
alphabet, numbers and punctuation marks, you can specify the ISO-8859-1
character set by inserting the following line into your HEAD section. (If you don't
know what I mean by "inserting a line into the HEAD section", you should review
chapter 1 again, where I taught you how to insert the TITLE tag into that section.
The procedure is the same.)

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1">

Alternatively, as preferred by many people, you can also specify the UTF-8
Unicode character set instead.

<meta http-equiv="Content-type" content="text/html;charset=utf-8">

The UTF-8 character set supports all languages, including English. In fact, the
ISO-8859-1 character set is just a subset of UTF-8. If you don't know which to
choose, specify the UTF-8 character set. You'll have less trouble that way,
especially if at some indeterminate point in the future, you suddenly decide to use
some accented character or a character that does not occur in the basic English
alphabet. (Remember that there are actually some words in the English language
that use these accented characters.) Before you ask, most of's
pages currently use ISO-8859-1 as its character set, but that's due to historical
reasons. "Historical reasons" in this context is my way of saying that I created my
site this way many years ago, when I didn't know better, and kept everything as it
was through sheer inertia (ie, laziness).
There are other ways to specify your language and character set besides inserting
them into your web page. For example, it is also possible to set it as a
configuration option in your web server. (The web server is the computer program
that your web host uses to run your website.) However, since this is an HTML
tutorial, I will not deal with that method here. In any case, it's actually good
practice to specify your language on your page. This way, your page will still be
valid if you change web hosts and forget to configure the new server.

Note that the <meta> tag does not have a closing tag.

With the addition of the attribute specifying your web page's language as well as
the META tag specifying the character set, your web page is now complete as a
minimal web page. That is to say, it has all the minimum elements that are required
on a valid web page. (That of course doesn't mean that it has what you want on
your website. It simply means that the page you now have is considered a valid
HTML page with all the required elements. There's obviously still a lot more to

Reprise: The <p> Tag
Now that we've declared the language and character set that our web page is going
to use, we can start using the HTML tags that pertain to the manipulation of text.

We have already met <p>, or the paragraph tag, in chapter one. If you're not already
familiar with this tag, perhaps because you skipped chapter 1, please return to that
chapter and read up on it. I mention this tag here only for completeness.

If you remember, the <p> is used to start a new paragraph on your web page. Web
browsers, when encountering the tag, usually start the text following your tag on a
new line on the web page. Since <p> always starts a new paragraph, you cannot
nest <p> tags inside each other. That is, if you want a new paragraph, close off the
existing paragraph with </p> before using a new <p> tag.

In addition, if you have carried out the experiments I mentioned in the previous
chapter, you'd have noticed that if your page had other content just above your
paragraph tag, browsers usually leave a blank line before starting your new
paragraph. This brings us to the question of how you can place some text directly
on the line beneath the current one, without leaving the blank line that you get
between paragraphs when you use <p>. For example, if you are a poet, and want to
publish your poetry on your page, how do you put your verses on the page without
leaving huge gaps between each line? This is the function of the next tag that we're
going to learn.

The <br> Tag
The <br> tag is used when you want to put what follows on a new line without
actually starting a paragraph. Take a look at the following HTML code as an
example. To simplify my examples from now on, I will only show the code
relevant to the tags I'm explaining. That is, I won't show things like the <head>
section, the <body> tags and the other tags that are understood to be on every web
page. If you're not sure what these other tags are, please read chapter 1 and the
section above.

Had I the heavens' embroided cloths,<br>
Enwrought with golden and silver light,<br>
The blue and the dim and the dark cloths<br>
Of night and light and the half-light,<br>
I would spread the cloths under your feet:<br>
But I, being poor, have only my dreams;<br>
I have spread my dreams under your feet;<br>
Tread softly because you tread on my dreams.

Insert the above poem from William Butler Yeats into your web page (the one you
started in chapter 1), and reload the page in your web browser to see the effect.
Notice that each line in the stanza occupies its own line on the page, the way you
would expect in a poem. The <br> tag, which I like to think of as being short for
"line break", forces everything that follows to a new line.

Notice that there is no closing tag for <br>. Since the <br> tag merely creates the
end of a line, and does not signal the start of something (the way a paragraph tag
does), it does not need (nor does it have) a closing tag.

Page and Section Headings
What if you wanted to put a heading on your web page, for example, to put a
visible title for the above poem? HTML provides numerous tags for this purpose,
namely, <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
To see the tag in action, add the following line to your web page, in a blank line
just above the opening <p> tag of the poem you inserted above.

<h1>Cloths of Heaven, by W. B. Yeats</h1>

Reload the page in your browser and examine the results.

These tags have the following characteristics:

   1. Use the Lower-Numbered Header Tags First
      Basically, a <h1> tag signals the highest level header on a web page. Many
      webmasters use it to display the title of a web page. If you have divided your
      web page into sections, with some paragraphs containing their own title,
      those paragraph titles may use <h2>. If those paragraphs have sub-
      paragraphs, and you need to put a title to them, use <h3>. And so on.

      In other words, you should use the header tag with the smallest number first,
      before using one with a larger number. For example, all of's web pages use the <h1> tag for the title of the web page.
      The <h2> tag is used for the titles of each section on the page, such as the
      words "Page and Section Headings" you find at the beginning of this section.
      The titles of sub-sections within these sections use the <h3> tag. The heading
      "Use the Lower-Numbered Header Tags First" that you see above is
      enclosed within the <h3> tag pair.

   2. Put Your Header Text Within the Tag Pair
      As you will have probably observed from my example, the header tags come
      in pairs, like the paragraph tags. For example, the <h1> signals the start of
      the header text to the web browser, and the </h1> tag signals the end of it.

   3. Put the Header Outside the Paragraph Tag
      Notice that I told you to put the header tag outside the paragraph block. The
      header is not part of the paragraph. Header and paragraph tags are what is
      known in HTML as block-level tags. The browser formats the content you
      place within such tags in its own block. For example, each paragraph stands
      on its own, as a distinct block, on your web page. The header tag, likewise,
      places the text enclosed within it in a separate block with its own formatting
      (which is the topic of the next point).
   4. Appearance of the Header in Web Browsers
      Browsers typically display the text contained between header tags in a way
      so that it stands out in some way on the page. Most browsers do this by
      putting the headers in bold. The smaller numbered headers, like <h1>, are
      usually displayed with larger fonts. To distinguish between the smaller
      numbered headers and those with bigger numbers, browsers may render the
      larger numbered headers using smaller fonts.

      Before you ask, control of the appearance of the headers, like the rest of
      your web page, is done using Cascading Style Sheets (CSS). As such, fine-
      tuning of the appearance of the header tags will be only taught in the later
      chapters of this tutorial series, in the CSS chapters. Do not choose which
      header tags to use based on its current appearance, for example, don't choose
      a particular header level because it has the size you want. Sizes of the text
      and all such things can be changed later. Choose the header tag according to
      the level the header appears in. Top level headers should use <h1>. Headers
      one level lower should use <h2>. And so on. The appearance of the headers
      can always be changed later.

      By way of reassurance, so that you know that you can really change the text
      enclosed in header tags so that they appear in any way you want, take a look
      at's pages, for example, the Budget Web Hosting page.
      The words at the top "Budget Web Hosts (Page 1)" are actually enclosed in
      <h1></h1> tags. They are orange on a purple background because I added
      CSS rules to specify that colour ("color" if you use a different variant of
      English) combination for that set of header tags. The words underneath,
      "Cheap, affordable, commercial web hosts", were simply enclosed in
      <h2></h2> tags. No special HTML tags were used for those effects.

      To reiterate, choose the appropriate header tags for your titles according to
      the function those titles play on your page, not according to the appearance
      those tags currently confer. The appearance can be changed later, using CSS.

Emphasizing Text: Putting Text in Bold or Italics
There are occasions where you may want to emphasize a particular word or group
of words on your web page. Emphasis can be achieved using one of the following
HTML tags:
      The <em></em> tag
       The <em></em> tag pair tells browsers that any enclosed text is to be
       emphasized in some way. As far as I know, all browsers display such text in
       italics. Note that the tag doesn't say that the text has to be in italics. It just
       tells browsers that it has to be emphasized. However, it seems that all major
       browser vendors render (ie, display) such text in italics.

      The <strong></strong> tag
       The <strong></strong> tag pair tells browsers that the sandwiched text is to be
       strongly emphasized. Web browsers today (as far as I know) display such
       text in bold. Again, this display of text in bold by web browsers is just a
       practice that the browser vendors adopted. The tags themselves do not mean
       "bold" or anything like that.

There are, however, some things you should note about the use of these tags.

   1. Do not use them for stylistic purposes
       Do not use these tags for the purpose of changing the appearance of words
       so that they look prettier on your web page. For example, don't put text in
       these tags just so that you can get the higher numbered header tags like
       <h6></h6> to be displayed in bold. As I mentioned before, things that pertain
       to the appearance of your web page should be modified using CSS, not by
       choosing HTML tags that happen to cause your text to take on a certain

       Use the tags only if you really want certain things emphasized. For example,
       I put the words "not" in the first line of the paragraph above in
       <strong></strong> to draw attention to it. The principle to learn here is that you
       should use HTML tags for the function those tags suggest. Appearance
       changes for the sake of making the web page look good are to be done in
       CSS. Be patient. We'll get to dealing with CSS eventually. You need to learn
       HTML first because CSS assumes a prior knowledge of HTML.

   2. Do not put block level tags within these tags
       If you have an entire paragraph that you want to emphasize, for example, to
       give a warning about the consequences of taking some action, you should
       always put your <strong></strong> and/or <em></em> tags inside your
       paragraph tags.

       For example, the following code illustrates the correct use of these tags.

       <strong>The "strong" tag is placed within the "p" tag in this example.
       This is as it should be.</strong>

       The code below is incorrect, because it places paragraph tags inside the
       <strong></strong> tags.

       <strong><p>This code is invalid. Do NOT use it!</p></strong>

       The <strong></strong> and <em></em> tags are inline tags. The <p></p> tags are
       block tags. Block tags can contain any number of inline tags, but inline tags
       cannot contain a block tag.

How to Insert Angle Brackets and Other Special
Since angle brackets like "<" and ">" are used to flag the start and end of HTML
tags, you might be wondering how you can actually insert such characters into
your web page without the web browser mistaking it for a tag. For example, how
do you insert the "less than" sign in a mathematical expression like "x < 5"?

To insert a left angle bracket, "<", you have to type "&lt;" (without the quotes) into
your web page. A right angle bracket, ">", is inserted by typing "&gt;" (without the
quotes) into your web page.

Like the angle brackets, the ampersand, "&", is a special character treated
differently from other characters by all web browsers. It flags the start of a
sequence of characters known in the HTML standard as a character entity
reference. The most commonly used character entity references are as follows:

      &lt; for "<"
      &gt; for ">"
      &amp; for "&" (see below)
      &nbsp; for the space character (see below)
      &copy; for the copyright symbol "©"
      &trade; for the trademark character, such as in "thesitewizard™"

As you may have guessed, once we defined the ampersand ("&") as a special
character that begins a character entity reference, we need a way to tell the web
browser when we really need an ampersand, hence the creation of another new
character entity reference, "&amp;", to represent the ampersand itself. In other
words, when you need to type an ampersand on your web page, don't type "&".
Type "&amp;" (without the quotes).

The "&nbsp;" character entity reference represents a non-breaking space. As I'm
sure you've noticed when you carried out your experiments in chapter 1, when you
put a space between 2 words in your web page, the browser may wrap the second
word onto a new line if it runs out of space on the current line. If you have a pair of
words that must always be placed together on the same line, put "&nbsp;" (without
the quotes) between those 2 words instead of the normal space character to force
the browser to always keep those two words together. This character entity
reference is also useful when you need to put more than 1 space between two
words. Again, as you found out in chapter 1, whenever you put more than one
space character between two words, web browsers collapse the additional space
characters so that you always end up with only one space displayed. If you really
need the extra space characters for whatever reason, you will need to insert a
"&nbsp;" for every space character you want displayed, instead of multiple space

Other (Less Used) HTML Tags for Presenting Text
There are other HTML tags pertaining to text that can be used in your web
documents. Most webmasters don't use them, but here are a few that you may (or
may not) find useful.

      Displaying snippets of computer code: the <code> tag
       The <code></code> tags are used when you want to display some computer
       code. I use these tags a lot in this HTML tutorial series for my HTML tags.
       For example, the words "<code></code>" in this sentence is sandwiched
       between the <code></code> tags. As you can see, web browsers typically
       display such text in a monospaced (fixed pitch) font.

      Quoting someone: the <blockquote> and <q> tags
    If you're quoting someone, you can place that quote inside either
    <blockquote></blockquote> or <q></q> tags. Use <blockquote> if you're quoting a
    paragraph or more of text, and <q> if you're just quoting a short phrase in the
    middle of your sentence. In more technical lingo, <blockquote> is a block tag
    that can include paragraph tags within its opening and closing tags, while
    <q> is an inline tag (like <strong> and <em>) that cannot enclose block level

    You can see an example of the <blockquote> tag in action in the article 4
    Things to Be Aware of When Writing English Content for an International
    Audience. The quote from Oscar Wilde at the beginning of that article is
    placed within a <blockquote></blockquote> tag pair. As you can see, web
    browsers typically indent the content marked up (ie, tagged) in this way.

   Superscripts and subscripts: the <sup> and <sub> tags
    If you need superscripts to flag a footnote or to represent expressions like
    e=mc2, use the <sup></sup> pair to enclose the text you want raised.
    Subscripts like the "2" in CO2 are produced by placing the character or
    characters between <sub> and </sub>.

    Both <sup> and <sub> are inline tags.

   Preformatted text: the <pre> tag
    If you enclose a block of text using the <pre></pre> tags, you're telling the
    browser that your text is already in a formatted state. Most (if not all)
    browsers will preserve the formatting of your text as-is, leaving in all your
    white spaces and new lines exactly as you entered them. Browsers also
    typically do not wrap lines that are too long to fit into the width of the
    browser window. Note though that browsers are not required to exhibit this
    behaviour ("behavior" in certain variants of English), but the ones that I have
    tested do. Your text is also usually displayed using a monospaced font.

    This tag pair is often used to display computer programming source code,
    where formatting is important. It's best not to abuse it for the use of your
    normal paragraphs of text.

    The <pre> is a block level tag.

   Indicating deleted text: the <del> tag
       If you want to indicate that a certain word, phrase or sentence is no longer
       relevant, you can enclose it between the <del></del> tag pair. For example,
       this word "" has been marked up using the <del></del> tag pair. As you can
       see, web browsers typically strike out the word or words tagged in this way.

There are a few other HTML tags that are rarely used by webmasters. They are
listed below for completeness' sake, although I doubt most of you will ever use

      Citations: <cite></cite>
       Use this to include a reference to your source.

      Definition: <dfn></dfn>
       If you're defining some term or other, you can mark up your definition with
       this tag.

      Acronym: <acronym></acronym>
       You can use this tag for the acronyms used on your page. Webmasters using
       this tag usually add a "title" attribute to the tag to elaborate on what the
       acronym means. For example, the acronym "scuba" in this sentence has been
       marked up as <acronym title="Self-contained underwater breathing
       apparatus">scuba</acronym>. Attributes will be taught in a later chapter in this

      Abbreviations: <abbr></abbr>
       Those with a love for abbreviations can use this tag to mark them up on your
       page. Like the acronym tag, people using this tag typically add the optional
       "title" attribute to expand the abbreviation. For example, the abbreviation
       "HTML" in this sentence has been marked up as <abbr title="Hypertext Markup
       Language">HTML</abbr>. As mentioned earlier, I will deal with attributes in a
       later chapter.

      Sample output: <samp></samp>
       Sample output from a computer program can be placed within the
       <samp></samp> tag pair.
      Keyboard input: <kbd></kbd>
       If you're indicating that something is to be typed on the keyboard, mark it up
       with this tag.

      Variable (for computer programmers): <var></var>
       If you're a computer programmer discussing the source code of a computer
       program on your web page, it's possible to mark your variables up using this

      Document changes: <ins></ins>
       This tag is the counterpart to the <del> tag mentioned earlier. While the <del>
       tag indicates text that have been deleted, the <ins> tag indicates new words,
       phrases or sentences that have been inserted.

After looking through the list, some of you are probably thinking, "But Chris, what
does the browser show when I use these tags?" A simple way to find out is to try it
out on your web page and load it in your browser to see the results. However, I
would suggest that the question actually misses the point of these tags. HTML tags
are meant to describe the type of content you're typing on your page. They are not
meant to prescribe appearance. Appearance on a web page is not meant to be
controlled by HTML tags, but by Cascading Style Sheets, or CSS. You can cause
those HTML tags to make your text take on any appearance you like with CSS. Its
default appearance is not really relevant. (For the curious but lazy reader: some of
the above tags simply put the text in a monospace (fixed pitch) font, while others
don't change the appearance of your text at all.)

Do you have to memorise all these tags so that if you happen to use things like
abbreviations, you can remember to tag them appropriately? In practice, few
webmasters bother. For example, words like "HTML" and "CSS" are used liberally
throughout, but I don't recall tagging even a single instance of
them with the <abbr></abbr> tag pair (other than in the example above). In fact, it's
quite possible to get by without knowing any of the tags mentioned in this entire
subsection. Of course if you want all your abbreviations to be displayed in (say)
brown, then it's simplest to just tag them all and create a CSS rule that tells the
browser to display all abbreviations in brown.

How About Fonts and Other Snazzy Design Features?
For those of you holding your breath, waiting for me to finally get round to talking
about how you can change the fonts on your web page, you'll have to wait a bit
longer. Font changes are considered as one of the things that govern the
appearance of your web page, and are thus done using Cascading Style Sheets, not
HTML. Although there are ways to change fonts using HTML, those methods are
deprecated, which, in the world of computers, basically means that they are
outdated, and will eventually be removed from the standard.

As such, we'll talk about fonts when we get to the CSS part of this tutorial series.

Do Not Interweave Different Tags
Now that you know enough to cause problems, it's important that you learn an
important rule in writing HTML code, otherwise you'll end up creating invalid

The easiest way to explain this rule is to use an example. Consider the following
HTML code snippet.

<strong><em></em></strong> is a tutorial website for

Notice that "" is enclosed within both <strong> and <em> tags. As
such, in most (or all) browsers, that word will be displayed in both bold and italics.
Observe carefully the order of the opening and closing tags. The innermost starting
tag (that is, the tag closest to "") is <em>. It is matched by the
innermost closing tag of </em>. Just outside that pair of tags is the <strong></strong>
tag pair. The opening <strong> tag is matched by the closing </strong> tag on the
same (outer) level.

Now look at the following invalid HTML code.

This code has <strong><em>errors</strong></em>! Can you spot the problem?

The innermost <em> tag is not matched by an innermost closing </em> tag. Instead,
the web browser parsing that sentence encounters an unexpected </strong> tag.
Although you might think that you managed to get all the closing tags into your
web page, the opening and closing tags are not really at the same level. The mixing
up of opening and closing tags in random order causes the code to be invalid. It's
like writing a mathematical expression with the following bracket structure:

{[(2+5] X [7-8}) + 1]

Even if you assume that any type of bracket can be used for a mathematical
expression, the above expression still makes no sense because the brackets are all
jumbled up instead of matching each other at the correct level. In the same way,
the HTML code with opening and closing tags jumbled up in a mess also makes no

Note that just because web browsers are often able to decipher the mess that some
webmasters create with interwoven opening and closing tags of different types
doesn't mean that such code is valid. Remember that browsers are not required to
parse and display invalid code in the way you want. They cannot be expected to
read your mind, after all. Do not depend on browsers to be telepathic. For all you
know, it may be a bug in the browser that caused it to display the bad code in the
way you think it should be displayed. When that bug is fixed (and browser vendors
fix bugs in their browsers all the time), your web page will no longer appear in the
way you intended it.

But how do you spot errors on your web page? After all, it's not like you
deliberately set out to create an invalid page. Obviously, if you made an error, it
must have been through either ignorance or carelessness. As such, they may be
very hard to spot, especially if you don't even know they were errors in the first
place. This is the topic of the next section.

How to Check Your Web Page for Errors: Validating
Your Code
The easiest way to get your HTML code checked is to run it through something
known as a validator. An HTML validator is a computer program that looks at your
web pages for errors that violate the HTML standard. It will spot things like the
jumbled tags that I mentioned above, as well as other types of errors. There are
many free HTML validators around, some of which you can download and install
on your computer, others where you can access only when you're connected to the
Note that HTML validators only check for HTML errors. They will not check your
English spelling, your English grammar, or whether your page looks nice. They
merely check if you have things like an opening HTML tag without a matching
closing HTML tag, non-existent HTML tags (something that happens when you
make a spelling error in your tag, such as using a "strnog" tag when you mean a
"strong" tag), and other things that will cause your HTML structure not to conform
to the HTML rules.

For now, open a browser window to the W3 Consortium's HTML Validator. This
validator gives you 3 ways to check your web page for errors.

   1. If you have already uploaded your web page to your website, you can simply
      type the URL to your page into the "Address" field of the validator for it to
      check. Click the "Check" button when you're done.
   2. Otherwise, if you have not yet published your web page to the Internet (as is
      probably the case for the majority of you), look for the words "Validate by
      File Upload" somewhere near the top of the page and click it. Click the
      "Choose..." button next to the "File" field. A dialog box should appear. This
      dialog box shows you the files on your computer. Navigate to the HTML file
      that you've been working on, select it and click "Open" (or "OK" or
      whatever the button on your dialog box says; the exact words depend on
      your web browser and your operating system). The complete file path of
      your web page should appear in the "File" field. ("File path" here means the
      file name, folder and drive [if you use Windows] of a particular file.) Click
      the "Check" button when you're done. Your browser will upload your file to
      the validator for checking.
   3. Another way to get your page checked is to click the "Validate by Direct
      Input" words at the top of the validator page. You can then copy and paste
      your entire HTML page into the box and click the "Check" button to get the
      page checked.

(If you can't decide, and you haven't uploaded your page to your web host yet, just
use the "Validate by File Upload" option. If you have already published your web
page, it's probably easiest to use "Validate by URI".)

If your page has no errors, the validator should say something like "The document
was successfully checked as HTML 4.01 Transitional!" followed by a line that
gives the results, such as "Result: Passed". Otherwise, the results line will tell you
the number of errors and warnings your page produced. In such a case, scroll down
the results page to read more about the errors the validator found on your page.
The detailed information gives you the exact line number (and column number) of
the error in your page along with a description of what the error is.

Incidentally, if you used the "Validate by Direct Input", you will always get one
warning telling you that the validator assumed that your page uses "UTF-8" as the
character encoding. Since you copied and pasted your code directly into the
validator using this method, and the validator's page itself uses UTF-8 for its
character encoding, your copied-and-pasted text will always end up using UTF-8
whether or not your real page actually uses this encoding. (The browser
transparently converts your text into UTF-8 as specified by the validator's own
UTF-8 encoded page.) If this bothers you because you think it may mask an error
on your page, just use the "Validate by File Upload" or "Validate by URI" options

How to Create Automatically Numbered
Lists, Bullet Point Lists and Definition
Lists in HTML
by Christopher Heng,

From time to time, you may want to create a numbered list on your web page, or
kjjhperhaps a list where each item on a list begins with a bullet point. This chapter
of the HTML tutorial series shows you how you can do this. We will also deal with
another type of list called definition lists.

For those who have just arrived at this article from outside,
please note that this is chapter 3 of the HTML tutorial. I shall assume that you are
already familiar with the things I covered in the earlier chapters, so you may want
to start at the beginning if you aren't already conversant with the earlier material.
However, if you are completely new to creating a website, it may be best to read
How to Make / Create Your Own Website before even going to chapter 1 of the
HTML tutorial. There are more things to creating a site than just the web design

Unordered Lists (Bullet Point Lists)
Lists of items that have a bullet point (or black dot) preceding each item on the list
are known as "unordered lists" in HTML. You can see an example of an unordered
list by scrolling down. The "New Pages" and "Related Pages" sections near the
bottom of this page use unordered lists.

To begin an unordered list, use the "<ul>" tag. Then, for every item in the list, put
your text (or picture) between "<li>" and "</li>". When you've completed every
item in your list, close off the list with a "</ul>" tag.

Here's an example to make things clearer.

<h2>My favourite sites</h2>

Although I used plain text for each item in the unordered list above, I could have
also put pictures for each of the items if I wanted. (No, you didn't miss anything.
We haven't got around to learning how to put images on your page yet. All I'm
saying here is that you're not restricted to using text for each item in the list.)

As you've probably guessed, the "ul" in the "<ul>" tag stands for "unordered list"
while the "li" in "<li>" stands for "list item".

The "<li>" tag is a block tag. You can include multiple paragraph tags between the
opening "<li>" tag and its closing "</li>" tag should your items require it.

Like most other things on your web page, the shape of the bullets on your page can
be changed using Cascading Style Sheets (CSS), which will be taught later in this
series. In fact, the appearance of the entire unordered list can be so radically
modified using CSS that it no longer even looks like the default bullet point list.
For example, the navigation menu generated by the CSS Navigation Menu Bar
Wizard actually uses an unordered list for the button menu. It's still a list of links at
its heart, of course. The button-like appearance is just a visual gimmick.

Ordered Lists (Numbered Lists)
Numbered lists are referred to as "ordered lists" in HTML parlance. Ordered lists
use "<ol>" and "</ol>" instead of the "<ul></ul>" of unordered lists. As before, each
item in the ordered list is sandwiched between "<li>" and "</li>" tags. That is, the
only difference between an ordered and an unordered list where the HTML code is
concerned are the opening and closing tags for the entire list.

To make sure there's no misunderstanding, let me convert my previous list of
"favourite sites" (or "favorite sites" in US English) to an ordered list. The
converted code is as follows:

<h2>My favourite sites</h2>

As you can see, all I needed to do to change an unordered list to an ordered one is
to switch from "ul" to "ol" for the opening and closing tags. The "<li>" tags remain
the same.

Web browsers automatically number each item in an ordered list, relieving you of
the burden and tedium of manually numbering or renumbering your items. Like
many things in HTML, the type of numbering used can be changed using CSS.
That is, you are not restricted to using numeric digits for your lists; CSS lets you
use Roman numerals as well as letters of the alphabet. You can also set your list to
begin at a number other than "1", and even randomly assign numbers to each item
in your list (although that sort of defeats the purpose of having an ordered list).
However, as mentioned earlier, CSS will be taught in a later chapter, since it
depends on knowledge of HTML.

Definition Lists
HTML supports another type of list which it calls definition lists. Although this
type of list is probably less used than ordered and unordered lists, we shall deal
with it here, for the sake of completeness.

Let's begin by looking at some HTML code:

 <dt>Term to be defined</dt>
 <dd>This is definition of the above term. It can be as long or short as you want it
to be.</dd>
 <dt>Second term to be defined</dt>
 <dt>Another term that is synonymous with the 2nd term</dt>
 <dd>This is the definition of the second term and its synonym.</dd>

Definition lists are meant for situations where you need to pair up a term with its
definition. Hence you might use it for things like a glossary. Its use, however, is
not strictly restricted to definitions. The HTML standard gives examples where the
"term" portion states something that is further elaborated in the "definition"
section. An example of this can be seen on's pages, such as on
its Free Hard Disk Backup and Restore Utilities page. The bulk of the page uses a
definition list, where the name of the software is given as the "term" and my
description and opinions (if any) of the program is given as the "definition".

As you can see from the above example code, you start off a definition lists with a
"<dl>" tag. For each term you want to define, enclose the term in a "<dt></dt>" tag
pair. The definition of that term is enclosed in a "<dd></dd>" tag pair. You can even
list multiple terms that share a common definition. Finally, when you've finished
with your list of definitions, close it off with "</dl>".

Like the "<li>" tag, the "<dd>" tag is a block tag. You can include multiple
paragraphs within the definition if you wish. (The "<dt>" tag, however, is an inline

At the time I write this, I have not specially styled (ie, changed the appearance of)
the definition lists used on's internal pages, such as the free
hard disk backup page mentioned above, so if you want to see how web browsers
render such lists by default, you can take a look at that page (or any other internal
page on, for that matter).
Dreamweaver CS5 Tutorial: How to
Design a Website with Dreamweaver CS5
by Christopher Heng,

Adobe Dreamweaver CS5 is a computer program that you can use to create and
maintain a website. It lets you design websites visually on your computer, almost
in the same way you would use a wordprocessor like Microsoft Word or Office. It
combines ease-of-use with power, making it a favourite (or "favorite" if you use
US English) among both new webmasters as well as seasoned professionals.

Overall Goals of This Tutorial Series
This tutorial series guides you through the process of creating a complete, fully
functional, multi-page website using Dreamweaver CS5. Your site will have a
home page, a feedback form, an About Us page and a Site Map. In the process of
creating this site, you will learn how to create pages with multiple columns, add
pictures and text, create links, use different font sizes, customise the colours, add a
menu bar, update the design on multiple web pages in an easy way, etc.

As a result, not only will you have a working site at the end of this series, you will
also have gained the skills and knowledge to create, design and publish any other
website you wish.

Goal of This Chapter
In this chapter, you will create a basic two-column web page and put it on the
Internet. By the end of the chapter, you will be viewing that web page on the
Internet using your web browser.

Important: this tutorial was written as a hands-on tutorial. To benefit from it, or to
even understand it, you will need to actually perform the steps as I describe them.
The practical nature of this guide makes it difficult to follow if you're not doing the
things mentioned.

What You Will Need
There's more to creating a website than just using a web editor like Dreamweaver.
If you are new to website creation, I strongly recommend that you first read How
to Make / Create Your Own Website: The Beginner's A-Z Guide, found at

At the very least, you will need the following:

      Dreamweaver
       Since this is a Dreamweaver tutorial, it stands to reason that you will need
       the aforementioned web editor itself.

       Note: this tutorial series assumes that you are using the CS5 version of
       Dreamweaver. If you are using a different version, please go to the tutorial
       series for that version instead, such as either the Dreamweaver CS5.5
       Tutorial, the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial.
       Although the CS3, CS4 and CS5/CS5.5 versions of Dreamweaver have
       many similarities, there are some differences between them (especially
       between CS5/5.5 and the earlier versions), so you'll have an easier time if
       you simply read the tutorial specifically written for that version.

       Those using versions of Dreamweaver prior to CS3, such as Dreamweaver 8,
       will have to upgrade to the current version to use this tutorial. The earlier
       versions lack certain features used in the three tutorial series.

      A Web Hosting Account
       You will be placing your website on the Internet from this chapter onwards
       (yes, from chapter one). For this to work, you will need a web host. A web
       host is (loosely speaking) a company that has computers that are
       permanently connected to the Internet. After you've finished designing your
       web pages, you will need to transfer them to your web host's computer
       (called a "web server"), so that it can be seen by the rest of the world. There
       are many web hosts around. If you don't already have one, you can find a list
       of cheap web hosts at

Note that I've omitted a number of important things from the above list, since you
can find such information from the Beginner's A-Z Guide mentioned above. Most
crucially, before you start, you should register your own domain name for reasons
given in my article on Is it Possible to Create a Website Without Buying a Domain
Name? The High Price of "Free"..

Setting Up Your Website in Dreamweaver's Site
Before you begin designing the appearance of your web page itself, you'll need to
give Dreamweaver some basic information about your website. This is done using
its Site Manager.

   1. Start up Dreamweaver.
   2. The Dreamweaver web editor will appear the top half of which should
      appear something like the picture below. The exact appearance of
      Dreamweaver on your computer will be slightly different from my picture
      depending on how big your computer monitor is, and whether you're running
      Windows 7, Vista, XP or Mac OS X. (And, of course, the words,
      " Dreamweaver CS5 Tutorial" won't appear in your
      Dreamweaver window either.)

      Near the top of the window, you should be able to see a line of text that
      reads "File Edit View Insert Modify Format Commands Site Window Help".
      This is the Dreamweaver menu bar, and each word on that menu bar is a
      clickable item that leads to other menus. We will be using this menu
      extensively in the course of this tutorial. The menu gives you access to many
      of Dreamweaver's facilities.

   3. Click the word "Site" on the menu bar. A drop-down menu will appear.
      Click the "New Site..." item on that menu.

      Important: from now onwards, in the interest of brevity, I shall refer to such
      a sequence of clicking on the "Site" menu followed by clicking the "New
   Site..." menu item as "Site | New Site...". That is, if I say click "File | Close"
   it means to click the "File" menu, and when a menu appears, click the
   "Close" item on it. (This is just an illustration, do not actually click the File
   menu at this time.)

4. A dialog box will appear. The dialog box should have a title like "Site Setup
   for Unnamed Site 2". The actual number that follows the words "Unnamed
   Site" may be different on your system, depending on whether you've ever
   used Dreamweaver on your computer before. In any case, the number is
   unimportant. You're about to change the entire text "Unnamed Site 2" to the
   name of your website anyway.

   In the dialog box itself, you should see two fields, one labelled "Site Name"
   and another "Local Site Folder".

   Replace the default value of "Unnamed Site 2" in the "Site Name" field with
   the name of your website. The name of your website can be any name you
   want. If you have bought your own domain name, one way is to enter that
   domain into this field. For example, if you have registered a domain called
   "", simply type "" (without the quotes) into the
   field, replacing the words "Unnamed Site 2". Alternatively, if you're creating
   a company website, you can type your company's name into this field. For
   example, if your company is called "Example Company", you can enter
   "Example Company" into that space.

   The content of the "Site Name" field is for your own reference only. It is not
   actually displayed publicly on your website, so you don't need to spend too
   much time coming up with a perfect name to use here. It's there in case you
   create many different websites using Dreamweaver and need a way to
   distinguish between them. For the sake of your own sanity, I recommend
   that you do not leave it as "Untitled Site 2" but give it some sort of
   informative and descriptive name. Otherwise, in the distant future, if and
   when you have 100 sites, you'll be pulling your hair out trying to figure out
   which name belongs to which website.

5. The "Local Site Folder" field tells Dreamweaver where it should save a copy
   of the files you create. This is a location on your own computer. On
   Windows systems, if this is the first time you're using Dreamweaver, it gives
   a default folder name of "Unnamed Site 2" somewhere in your Documents
   folder. For example, if you're using Windows Vista or Windows 7, you
      might get a suggested name like "c:\Users\christopherheng\Documents\Unnamed
      Site 2\". To change the folder to some other location, click the folder icon
      next to the field, and select a different folder. Alternatively, if you don't
      mind the default location, but just don't like the "Unnamed Site 2" portion,
      simply click somewhere in the field, move your cursor to the "Unnamed Site
      2" portion and replace it with your site name (eg, ""). Be
      careful not to overwrite any other part of the text; for instance, don't delete
      any of the backslashes ("\") unless you know what you're doing.

      If the above paragraph appears too complicated, and you feel panic rising
      just trying to understand what I wrote, just leave everything at its default
      setting. While it's good to have a descriptive folder name, so that you can
      easily locate your files in the future, it's too minor a matter to be worth
      getting stuck over.

   6. When you're satisfied with your changes, click the "Save" button at the
      bottom of the "Site Setup" dialog box. The dialog box will disappear, and
      you'll be returned to the main Dreamweaver window. You are now ready to
      design your first web page.

How to Create a Two Column Web Page with
Dreamweaver CS5
Different websites have different layouts. Some, like the Feedback Form Demo site
have all their content in a single column. Others, like's article
pages, have a two column layout. If you don't know what I mean, look at this very
article that you're reading. Notice that the leftmost column of the page contains's logo (at the top of the page) and its navigation menu. The right
column holds the actual article text itself. Websites can of course have more than 2
columns: for example, at the time this was written, I use a 3 column layout for my
Site Map.

For the purpose of this tutorial, you will be creating a 2 column web page. The two
column format is a very popular layout among webmasters because it is both space
efficient and familiar to internet users. A layout that is familiar to users tends to be
perceived as user-friendly, since its familiarity means that users will know how to
navigate a website with that layout. It's always important to strive to make your
website as user-friendly as possible, so that your visitors actually know how to use
your site.
1. Click "File | New...". If you remember what I mentioned earlier, this means
   to click the "File" menu, followed by the "New..." item in the menu that

   A dialog box with a title "New Document" will appear.

2. In the Layout column, look for the line that says "2 column liquid, left
   sidebar, header and footer" (see picture above). Click that line once.
3. On the rightmost side of the window, look for the field labelled "Layout
   CSS" (see picture above). Click the drop down arrow in the box next to that
   label and select "Create New File".

   This causes Dreamweaver to save the information controlling the appearance
   of your website (called "CSS") in a separate file. Since all the pages on your
   website will share a common layout, placing all the information about the
   layout into a single file avoids needless duplication of information, saving
   you disk space and bandwidth, and speeding up the loading of your web
   pages if your users visit multiple pages on your website.

4. Click the "Create" button in the bottom right of the dialog box.
5. A new dialog box, entitled "Save Style Sheet File As", will appear. Click the
   "Save" button in that dialog box.
6. By default, Dreamweaver creates your web page in what is known as the
   "Split" mode. In this mode, your web page as it appears in a real web
   browser is shown on the right side. This visually pleasing portion is called
      the "Design" mode in Dreamweaver. The left side shows the underlying
      "raw" code for your website. This left side is called the "Code" mode in
      Dreamweaver, and the code it shows is called HTML.

      If you do not see this "Split" mode, but only see the visually pleasing version
      of your website (the "Design" mode), or just the seemingly gibberish text of
      the "Code" mode, don't worry. We are about to standardise the display mode
      for everyone.

      No matter what you see on the screen, whether it's the "Split" mode I
      described earlier or some other mode, click "View | Design" from the menu.
      The cryptic text of the "Code" mode split screen should disappear, and the
      entire window should now be filled with your web page as it appears in a
      web browser (the "Design" portion). Note that you must take this step if you
      wish to follow this tutorial series, since all the steps in this tutorial, as well
      as the screenshots assume that you are working in Design mode. If you do
      not switch to Design mode, you might get confused later when
      Dreamweaver does not behave the way I describe.

      Note: if, in the future, when you've completed this tutorial series, and you
      want to restore the "Split" mode, just click "View | Code and Design" from
      the menu. The screen layout will automatically revert to what you saw
      earlier. So fear not. You can easily restore everything back to its original
      condition. But for now, please switch to the Design mode.

Introduction to the Home Page: What Should I Put on
My Home Page?
Before we continue to replace the default text on the page with your real web page
content, it's important to understand the basic principles behind what you'll be

The first page that you'll be designing is your website's "home page". The home
page of a website is basically its main page. It is the page that your visitors arrive
at if they simply type the domain name of your site. For example, if you type
"" into your browser, you will end up at my home page.

In terms of function, the home page of a website is similar to a combination of the
front cover of a magazine and its contents page. Like the front cover of a
magazine, your home page should give your visitors an idea of the sort of things
that can be found on your site. And like a magazine's "Contents" page, it should
provide links to important pages (or sections) on your site so that your visitors can
get to whatever they're looking for on your website.

So what does this mean in practical terms? If your website is one that sells
products and services, you may want your home page to mention your most
important products and services, as well as link to individual product description
pages where visitors can find more information and place an order. Even if you are
just creating a personal website, or a hobby website, you should still try to give
your visitors an idea of the sort of things they can expect to find on your website.

How to Design Your Home Page in Dreamweaver CS5
   1. Let's familiarise ourselves with the default page that Dreamweaver has
      created for you. The web page is currently filled with some placeholder text
      that you will be replacing with your own content. If the default text looks
      suspiciously like instructions written in technical jargon, it's because it really
      is a bunch of technical instructions. But you needn't bother trying to
      decipher it. The parts that are relevant to you will be translated into plain
      English in this Dreamweaver CS5 tutorial series.

      Vertically, the page is divided into 2 columns. The left column contains the
      beginnings of a navigation menu, something similar to what you see on The right column is where the bulk of your real content
      should go, and you'll be replacing the existing placeholder text later in this
      chapter. At present, it contains the large-print title, "Instructions", as well as
      paragraphs of text interspersed with smaller sub-headings.

      At the very top of the page is a small rectange labelled "Insert_logo (20% x
      90)". Even though it may not be obvious, this rectangle is actually sitting in
      the corner of a horizontal band cutting across both columns of your web
      page. The entire top horizontal band is meant for your logo, and you will be
      working on it in Chapter 2 of this tutorial.

      Scroll to the bottom of the page. You can do this either by hitting the PgDn
      key on your keyboard or by dragging the scroll bar on the right of your web
      page with your mouse. Notice that there's another horizontal band spanning
      the width of your web page at the bottom. This is the footer. You will be
      customising the text of this footer later in this chapter.
2. Directly above your web page, in the part of the window that belongs to the
   Dreamweaver program rather than your page, look for the word "Title"
   followed by a field that currently contains "Untitled Document" (see picture

   Click your mouse cursor somewhere in the words "Untitled Document", then
   use the Delete or Backspace keys on your keyboard to remove the existing
   text. Replace it with the name of your website. For instance, if your website
   is called "XYZ Company", type "XYZ Company" into that field.

   This "title" field is an internal field on your web page. It is not displayed in
   the body (visible portion) of your web page. It is shown only in the title bar
   of the web browser window itself. If you're not sure what I'm talking about,
   look at the top of your browser window now. (Yes, this very moment.) Don't
   use the scroll bar and don't scroll to the top of this page in any way. Just
   glance upwards to the top edge of your web browser. You should be able to
   see the words "Dreamweaver CS5 Tutorial: How to Design a Website with
   Dreamweaver CS5 (", or at least the first part of it, in the
   top frame of your browser window. I placed those words into the Title field
   of this particular web page when I created it.

   Although the "Title" field is just an internal field, it is an important part of a
   web page. Search engines use the content of this field to list your website in
   search engine results. If you leave your title set at "Untitled Document",
   your web page will appear in search engine results as "Untitled Document"
   rather than "XYZ Company" or whatever name you've given your website.

3. Now that you've finished replacing the title field, you can start working on
   the main content of your web page. Typing text in a Dreamweaver window
is similar to typing in any wordprocessor. If you have ever used Microsoft
Word or any other word processor, the process is the same.

First replace the visible heading "Instructions" with the name of your
website or some other appropriate text, such as "About XYZ Company" or
"Welcome to Shakespeare's Website". To do this, click your mouse cursor
somewhere in the word "Instructions" to place the text cursor on the page.
You can then use your arrow keys to move the cursor around, the Delete and
Backspace keys to remove existing text, and all the other characters on your
keyboard to insert text.

After that, move your cursor to the paragraphs and sub-headings below
(using the arrow keys on your keyboard or by clicking your mouse on the
spot you want to change) and replace them with the content you want on
your home page. Bear in mind the things I mentioned about what your home
page should include in the section above. If you're at a total loss as to what
to write, take a look at the sample block of text below belonging to a
fictitious company and use that as a model. Obviously, you won't be able to
use it literally (since your company is unlikely to sell the same things), but it
can be adapted to suit your own business. If you're experiencing writer's
block, many people find it helpful to just type something, even if it sounds
utterly mundane. Once you have something down, you can always go back
and refine it as the days go by.

Welcome to Example Co.
Example Co. is the world's leading business dealing with all manner of
examples. We have examples of famous literature, not-so-famous pulp
fiction, reference books, movie and television DVDs, office furniture, and so
on. Our selection of examples is so extensive that we even have examples of

Featured Products
Dreamweaver Site: This is an example of a Dreamweaver site, created using's tutorial on Dreamweaver. The tutorial shows you how to
create a basic but fully-functional website which you can modify and
augment to suit your needs.
   Mechanical Typewriter: Return to the glorious days of old, where documents
   have to be typed on paper, and where, if you want multiple copies, you need
   carbon paper (not included). No electricity or batteries are needed. This
   machine is powered by your fingers.

   Don't worry about changing fonts, making words bigger or smaller,
   underlining words, putting text in italics or bold, making links, inserting
   pictures, making sub-headings, and things like that. For now, just
   concentrate on getting your words down. Polishing your page to make it
   look nicer will be taught in the next few chapters.

4. Don't change anything in the left column and ignore the fact that the left and
   right columns have uneven heights. The left column will be dealt with in its
   own chapter since it relies on you having additional knowledge before you
   can work on it.
5. When you've finished with your content, scroll down to the bottom of the
   page to the horizontal bar at the bottom, which Dreamweaver calls the
   footer. Move your mouse over any of the words in the footer and click it
   once to place your text cursor there. Replace the existing text with whatever
   you wish. Many webmasters place a copyright notice in this section. A
   copyright notice is simply a sentence like "Copyright © 2010 by Christopher
   Heng". The copyright symbol, ©, can be inserted by clicking "Insert | HTML
   | Special Characters | Copyright" from the menu. For more information about
   copyright, please read the article Copyright Issues Relevant to Webmasters,
6. Once you're satisfied with the changes you've made (so far), save the page
   by clicking "File | Save As..." from the menu. A dialog box, with a title
   "Save As", will appear. Type "index.html" (without the quotation marks) into
   the "File name" field and click the "Save" button.

   IMPORTANT: do not use any name other than "index.html" as your
   filename. Make sure you type it exactly as I mentioned, completely in small
   letters (lowercase) with no spaces in the word. Do not use any other name.
   The name "Index.html" is wrong, as is the name "INDEX.HTML". Use only

   Additional information: the name "index.html" is a special name that is
   recognised by most web servers. If it is published to the right location, it will
   be sent to your visitors if they simply type your domain name (eg,
      "") in their browser. This is the behaviour you
      want, since you're designing your home page.

How to Publish / Upload Your Web Page with
Dreamweaver CS5
You are now going to publish your page to your web host. That is to say, you are
about to transfer your web page and its associated files to your web host's
computer so that it can be viewed on the Internet.

I know that some of you are probably reeling back in horror at the thought, since
the page is far from finished. But there is really no cause for concern here. Since
your website is new, and you have not advertised your website's address (called
"URL" in webmaster lingo) to anyone, no one will even know your website exists.
Not even the search engines. As a result, the only one who will see your unfinished
web page is you. As you will discover in time, it's not that easy to get visitors.

The main reason that we're publishing your page at this time is to allow you to get
familiar with all the major stages of the design of a web page: that is, creating a
web page involves not only crafting the page, but also involves getting the page
from your computer onto your web host's computer. Once you get this hurdle out
of the way, you will have mastered what is one of the largest technical challenges a
newcomer is likely to face. Don't let this scare you, though; it's actually quite easy!

Another important reason for publishing now is to let you test your design in a web
browser when your page is on the Internet. Even though you can always test your
site on your own computer, it's not the same. It's possible to make mistakes that
don't show when your page is on your computer, but appear only when it is on the
Internet. Testing your page on the Internet after every stage allows you to catch
those errors early. Otherwise, when the mistakes accumulate, it may become
difficult for you (as a newcomer) to figure out where it went wrong.

Please do not skip this step if you're following this tutorial series. I will assume
you have done this in future chapters, and you may find it difficult to follow what
I'm saying there if you skip this.

   1. Click the "Site | Manage Sites..." menu. A dialog box, "Manage Sites" will
   2. Click the "Edit..." button. This will open up a dialog box "Site Setup for
      [your site name]" where "[your site name]" will be replaced with whatever
     name you entered when you first set up your site. The contents of the dialog
     box should also be familiar from your initial setup.
3.   Look at the left column of the dialog box. The "Site" line should be currently
     selected. Click the "Server" line to select it. When you do so, the contents of
     the right side of the dialog box will change.
4.   On the right column of the dialog box, look for a "+" (plus sign). It should
     be just under the blank list box in the middle of that column. Click it. An
     untitled dialog box will appear.
5.   There should be two tabs at the top of the dialog box, "Basic" and
     "Advanced". To make sure that you're on the correct tab, click the "Basic"
6.   Enter anything you like into the "Server Name" field. This field is merely for
     your own information, so it doesn't really matter what you enter here. One
     simple way is to enter something like "'s server". The name you
     enter here will be displayed in the blank list box you saw earlier, and you
     can always change it later if you find you prefer something else.
7.   At this point, you will need the information that your web host furnished you
     when you signed up for a web hosting account. Web hosts usually send you
     a lengthy list of details about your account when you first sign up. Among
     these is something known as your "FTP address" (sometimes called "FTP
     hostname" or "FTP server" by web hosts). FTP stands for "File Transfer
     Protocol". It is the usual method by which you transfer your web page from
     your computer to your web host's computer. This act of transferring your
     files from your system to your web host's system is known as "uploading" or

     If your web host sent you the information in an email message, either print
     the message out or open it in another window on your computer so that you
     can refer to it. I personally prefer to open it in another window so that I can
     simply cut and paste the information from that window into Dreamweaver,
     thus avoiding typing errors. However, do whatever suits you best.

     Put the FTP address that your web host gave you into the field for "FTP
     Address". If you have your own domain name, and you're hosted on a
     commercial web host, this address is typically your domain name prefixed
     with "ftp". For example, if your domain name is "", many web
     hosts will set up your FTP address to be "". Check the email
     you received from your web host for this information, or ask them if you
     cannot find the information anywhere. If the address is indeed
     "" enter that into the "FTP Address" field.
   (Note that you cannot just randomly guess your FTP address and enter it
   here. It has to be what your web host has supplied to you. Not all web hosts
   use the "" form. Some just ask you to enter your domain name
   ("") while others supply you a name completely unrelated to your
   domain name. If you are not sure what the FTP address for your site is, ask
   your web host. Guesswork is pointless.)

8. Leave the port field set at the default of "21" unless your web host has
   instructed you to use a different port address. If your web host didn't
   mention any port number, leave the field alone.
9. Enter your FTP user name and password into the "Username" and
   "Password" fields respectively. Obtain this information from your web host
   if you don't already know it. If you don't want to keep entering your
   password every time you publish a page, leave the checkbox beside "Save"
   activated (a tick automatically appears in that box when you type your
   password). If you are sharing your computer with others, and don't want
   Dreamweaver to save your password, click the box containing the tick to
   uncheck it. Note that I will assume that you have left the box checked in this
   tutorial, since that is what the majority of's Dreamweaver
   readers do.
10.To make sure that you've entered your username, password and FTP address
   correctly, click the "Test" button under the password field. If you are
   successful, you will get a message saying "Dreamweaver connected to your
   Web server successfully". Click the "OK" button to dismiss it.

   Note: If you use Windows Vista, the Windows firewall may issue a message
   asking you whether to block or unblock the connection. Be sure to click the
   "Unblock" button, or you'll be blocking FTP connections for Dreamweaver.
   By default, FTP connections are two-way, requiring the server to which
   you're connecting to make a connection back to you, hence the warning by
   the firewall. This is normal, so don't panic when you get that message from
   Vista. The interference by the firewall may also cause your first test in
   Dreamweaver to fail, leading Dreamweaver to issue a dialog box telling you
   to use Passive connections. Just click OK to that message, and click the
   "Test" button again.

   If the "Test" button fails, Dreamweaver will pop up a message advising you
   to activate either the "Use Passive FTP" or "Use IPv6 transfer mode"
   options. To do this, click the triangle beside "More Options". You can find
   the words "More Options" just above the "Help", "Save" and "Cancel"
   buttons near the bottom of the dialog box. The More Options section will be
   expanded, revealing a section where you can further configure your FTP
   settings. Click the "Use Passive FTP" checkbox to activate it and test again.
   In most cases, setting the "Passive FTP" mode is enough to make the test

   If the test continues to fail even after you've checked the "Use Passive FTP"
   box, it's possible that you've entered your FTP address, username or
   password wrongly. To make sure that those are typed in correctly, do not
   manually type them, but copy and paste them from the information supplied
   by your web host.

   If, having done that, you still find that you cannot connect, look at your FTP
   address field. Does it contain your domain name or some modification of
   your domain (like "" where "" is your own
   domain name? If so, and you've only just bought your domain name within
   the last 2 days, it's possible that your domain name has not yet propagated
   throughout the Internet. What this means is that when a new domain name is
   bought, it takes a while (usually about 2 days) before it is recognised
   throughout the world. In such a case, your only recourse is to wait a day or
   so before testing again. There's nothing anyone can do to make it happen

   You can also ask your web host for help in checking your settings (in case
   you actually got your FTP address, username or password wrong). But
   remember that if the problem lies with a new domain name that has not
   propagated, you just have to be patient and wait. There's nothing your web
   host can do to help you in such a case.

11.The next field that you have to complete is the "Root Directory" field. This
   is needed because you can't simply publish your web page to any folder you
   want on the web server, and expect it to appear on the Internet. Web hosts
   usually configure their computers so that only files placed in specific folders
   are considered as part of your website. This is needed, otherwise anyone on
   the Internet can read your private files, like your email, etc.

   Go back to the information provided by your web host again, and look to see
   if they mention the name of a folder (or "directory" or "subdirectory") where
   you need to place your files into. Some hosts tell you to place your website
   files in a directory called "www". Others say that you need to place them in
   a folder called "public_html". Still others tell you to place your files in a
   folder named after your domain name. And there are also hosts that say that
   you can simply upload or publish your files into the default directory you see
   when you connect by FTP.

   Like your "FTP address", this is not something you can randomly guess. If
   you don't already have the information, find out by asking your web host.

   Once you have the information, enter the folder name into the "Root
   Directory" field. For example, if your web host tells you to publish your files
   to a "www" directory, enter "www" into the field. If they tell you to just use
   the default directory when you connect, leave this field blank.

   (One last thing: note that where most web hosts are concerned "www" and
   "WWW" are two different words. Hint: for those who can't detect the
   difference between them, look at the capitalisation of the word. In other
   words, if they say, use "www" to store your website files, make sure you put
   "www" and not "WWW" in the "Root Directory" field.)

12.Click the "Save" button when you've finished configuring the FTP settings.
13.You'll be returned to the "Site Setup" dialog box. Notice that your entry is
   now listed in the list box on that page. Should you ever need to make
   changes to your settings, click the pencil icon at the bottom of the list box.
   The pencil icon can be found directly after the "+" and "-" icons.

   For now, click the "Save" button on this window. Dreamweaver may issue a
   dialog box with the message "The cache will now be recreated because the
   name, root folder, HTTP address, or cloaking settings of the site have been
   changed." Click "OK". You'll be returned to the "Manage Sites" dialog box.
   Click the "Done" button.

14.Once that you've finished configuring Dreamweaver for your site, it's time to
   publish your home page. To do this, click "Site | Put".
15.When a dialog box with the title "Put dependent files" appears, click the
   "Yes" button. Dependent files are the additional files that your web page
   needs so that it is displayed correctly in a web browser. Don't take too long
   to click "Yes" or Dreamweaver will automatically select "No" for you,
   which is not what you want. You must click the "Yes" button or your web
   page will not look the same in your web browser.
      (If you've waited too long, and have found that Dreamweaver has
      automatically dismissed the dialog box for you, click "Site | Put" all over
      again. This time, be sure to click the "Yes" button when the dialog box

      Dreamweaver will then issue a dialog box informing you of its progress. The
      dialog box will automatically disappear when it has completed the uploading
      of your web page.

Testing Your Web Page
Now that you've published your web page, you will need to check it using a web
browser. Although Dreamweaver does a good job of showing you what your web
page will look like, it is not really a web browser but a web editor. As such, there
are some things you can't effectively test in Dreamweaver itself.

To test your home page, type your website's address ("URL") into your browser.
For example, type "" if that is your site's URL. Notice that I
did not ask you to type the "index.html" filename. If you've set things up correctly,
even though you didn't type the "index.html" portion, you should still see the
contents of the "index.html" file.

If you get a "404 File Not Found" error instead of the web page you designed, or
you get your web host's preinstalled default page, you may have entered the wrong
folder name into the "Root Directory" field I mentioned earlier. Go back and fix
the error. That is, click the "Site | Manage Sites..." menu item, click the "Edit..."
button, click the "Servers" line in the left column, click the name of your server in
the list box on the right side to select it, and click the pencil icon under the list box.
You can then change your Root Directory to the correct location. When you've
finished, be sure the click the "Save" button in both that dialog box as well as the
"Site Setp" dialog box, and finally click the "Done" button in the "Manage Sites"

If you get a "No DNS for" (or whatever your domain name is)
or "Domain not found" error, you may be facing the domain propagation issue I
mentioned earlier (where a domain is so new that it is still not yet recognised by
your Internet broadband or dialup provider). Another possibility is that you're
using a web host that has not set up the "www" subdomain for you, and you typed
in "" into your browser. Not all web hosts do this automatically
for you. If this is the case, try typing your URL without the "www", for example
type "" into your browser.

If you get no errors at all, but see the page that you designed earlier,
congratulations! You have created and published your first web page using
Dreamweaver CS5. It may be a raw and unfinished page (for now), but you have
successfully walked through all the essential steps of designing and uploading a
web page.

Next Chapter: How to Add Pictures to Your Website
In the next chapter of the Dreamweaver CS5 Tutorial, you will learn how to add
pictures and a logo to your website.

Copyright © 2010-2011 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and
scripting, from

How to Add a Feedback Form to Your
Website with Dreamweaver CS5
by Christopher Heng,

A feedback form, also called a contact form, allows your visitors to send you a
message from a web-based form. The message will be delivered to you via
ordinary email. In this final chapter of the Dreamweaver CS5 Tutorial, you will
add a feedback form to your website, thereby completing it.

As with the other chapters of this Dreamweaver tutorial series, this article assumes
that you have completed the earlier chapters, and thus makes references to
concepts and techniques taught there. If you are not an experienced user of
Dreamweaver CS5, you may want to begin with chapter 1. In fact, if you are new
to web design, it's best to start at the real beginning, with the guide How to Make /
Create Your Own Website.
Goal of This Chapter
By the end of this chapter, you will have added a feedback form to your website. In
fact, you will also have completed your website, and have a fully functional multi-
page website. In addition, you will have learnt most of the commonly-used skills
needed to create and maintain a website using Dreamweaver CS5, and be able to
create other websites any time you want.

Before You Begin
You will find it much easier to understand this chapter if you have some
experience using a feedback form as an ordinary user. As such, please go to
Feedback Form Demo Site and use the form. Don't worry: the form on that site is
just a demo, so you can test it to your heart's content without spamming anyone.
The messages sent go into a black hole.

Even if you're a seasoned user of web forms, please go to that site and use the form
there at least once. That way, I can refer to elements of that form in this tutorial
without wondering whether you know what I'm talking about. The form you create
in this chapter will be based on the exact same technology that the demo form uses.
So please do it now before you proceed.

Special Requirements
You will need the following. This list is not optional. You must have the following
or your form will not work.

      A web host that lets you run scripts that send email
       Your website needs to be hosted on a web host that lets you run scripts
       (computer programs) on their computer. Not only that, they must allow your
       scripts to send email.

       Most (if not all) commercial web hosts, including the one I currently use,
       allow this.

       If you're not paying for your web hosting, for example, if you're using a free
       web host, or you're using the free hosting that comes with your broadband
       connection, or you're using one of those "free starter websites" that some
       domain registrars give you when you buy a domain name, chances are that
       the things described in this chapter will NOT work for you. If you're not
       sure, ask your web host.

      Your web host must support PHP 4.2 and above
       The feedback form script (computer program) requires a technology called
       PHP to be installed on your website's web server. See the article What is
       PHP? for a plain English explanation of what "PHP" means. You don't really
       need to read it if you're feeling lazy, but it'll help you understand things a bit
       better if you do.

       For those using a paid web host that lets you run scripts, it's likely that you
       will already have PHP available for your site's use. The PHP needs to be at
       least version 4.2. (Before you ask, PHP 5 or any bigger number is fine too.)

Parts of the Feedback Form System
As you will have noticed when you tried the demo feedback form, you will be
creating the following components:

      The Feedback Form
       This is the form itself. You will create it using's Free
       Feedback Form Script Wizard, and, optionally, customise ("customize" in
       US English) its appearance in Dreamweaver.

       The form, by itself, doesn't do anything. Your visitors can click the "Send
       Feedback" button till they are blue in the face, and nothing will be sent. The
       real job of sending the email is done by the next component.

      The Feedback Form Script
       The feedback form script is the computer program that takes whatever your
       visitors submit through the form and transforms it into an email message. It
       then passes the message on to the email system installed on your web host's
       computer. Your web host's email system then does the work of actually
       transmitting the message to your email account. (It's a bit more complicated
       than that, but that's the gist.)
     Like the form, you will be using the Free Feedback Form Script Wizard to
     create a customized version of this script. Don't worry. It's all free.

    The Thank You Page
     After the script passes the message to your web host's email system, it will
     tell your visitor's browser to retrieve the "Thank You" page from your site.
     This is just a straightforward web page that tells your visitors that their
     message has been sent. You will be designing this page yourself in

    The Error Page
     The "Error" page will be shown to your visitors if they fail to enter some
     crucial information into your feedback form. Like the "Thank You" page, it
     is just an ordinary web page that you will design using Dreamweaver.

How to Add a Contact Form for Your Website in
Dreamweaver CS5
 1. Generate the Feedback Form and Script
        o   The first thing you will need to do is to go to the Feedback Form
            Wizard and generate your customised feedback form and script. The
            wizard can be found at
        o   Read the introductory page of the wizard, choose the option to create
            a PHP feedback form script, and click the "Go to Step 2" button.
        o   In Step 2, enter the information required by the form:
                Email: Enter the email address at which you wish to receive the
                   mail from your site's visitors.
                URL of Feedback Form:
                URL of "Thank You" Page:
                URL of "Error" Page:

            You should of course replace the part with the real
            address of your website. However, do NOT change the filenames,
            especially that of feedback.html since you have used that name in your
            navigation menu in the previous chapters. If you change the name
            now, the button in your navigation menu (and any other links pointing
         to your contact form) will break. In addition, if you dislike the names
         I gave above so much that you plan on changing them, be sure to read
         the article How to Create Good Filenames for Your Web Pages so that
         you don't create problematic filenames that will cause trouble.

     o   Read the licence agreement. If you agree to the terms, indicate it in
         the form and click the "Generate script" button to continue.
     o   A new page, containing customised versions of the contact form and
         script, will appear. Do NOT close this page. Leave it open while you
         carry out the next few steps in Dreamweaver. We will need the code
         generated by the wizard for your site.
2. How to Save the Feedback Form Script the Correct Way
     o   Start up Dreamweaver and click "File | New..." from the menu. If you
         will remember from the previous chapters, this means to click the
         "File" item from the menu bar, and then the "New..." item in the drop
         down menu that appears.
     o   Click "Blank Page" in the leftmost column. Notice carefully that I
         said click "Blank Page" and not your template.
     o   In the "Page Type" column, click the line that says "PHP".
     o   Click the "Create" button.
     o   A page that looks blank will appear. Unfortunately, this page is not
         actually blank, and we need to delete the invisible rubbish that
         Dreamweaver inserted when it created the page.

         (Note: if you don't see a blank page, that is, a page that is completely
         white, but see your 2 column website design, it means you did not
         follow my instructions above. Close the page without saving it and go
         back to the beginning of this section. This time, make sure you click
         "Blank Page" as I mentioned.)

         VERY IMPORTANT: click "View | Code" from the menu. You
         should now see the HTML code that Dreamweaver inserted into your
         PHP page. Select everything on that page. If you use Windows, an
         easy way to select everything is to use Ctrl+A, that is, hold down the
         Ctrl key and type "a". (I believe that Mac OS X uses Command+A
         instead of Ctrl+A.) Alternatively, you can also drag your mouse
         across everything to highlight it. If you use the mouse method, make
         sure that you've really selected everything. Then hit the DEL key.

         Your window should now be blank.
o   Switch back to your web browser without quitting Dreamweaver.

    The first section on the web page should have a heading "Feedback
    Form Script". Notice that there is a box in that section. This box
    contains your feedback form script.

    Select everything in that box. The best way to do this is to click your
    mouse somewhere in the box to put your text cursor there. Then hit
    Ctrl+A (probably Command+A on the Mac) as you did earlier. This
    should highlight everything in the box, but not on the rest of the web
    page. (Note: for most people, simply clicking somewhere in the box
    should automatically cause all its contents to be selected. If this is the
    case for you, there's no need to use Ctrl+A to select everything,
    although doing so will do no harm.)

o   Copy the selected text to the clipboard. The easiest way to do this in
    Windows is to type Ctrl+C (hold down the Ctrl key, and type 'c').
    Alternatively, you can click your right mouse button (while the mouse
    pointer is in the box) and select "Copy" from the menu that appears.
o   Switch back to Dreamweaver. Do NOT close your web browser.
    We're still not done with it yet.
o   Click "Edit | Paste" from the menu. The entire script generated by the
    Feedback Form Wizard should appear in your blank document. The
    last line in the window should be a red "?>". Above that line, you
    should see lines in various colours, namely red, blue, green, purple
    and, if your screen is big enough, some orange.

    If you don't see the things I mentioned above, close this Dreamweaver
    window (using "File | Close") without saving anything. Then go back
    to the start of this section (click the link to find the exact place to go
    to) and redo everything.

    WARNING: do NOT change anything in this window. Leave
    everything as it is. There is nothing that you should be customising
    here: in spite of the English words in some parts of the file, this is not
    a web page that you are looking at. It is a computer program. It is not
    displayed to your visitors. Modifying anything here may cause your
    feedback form to fail to work correctly. Let me say it again: do not
    add, subtract or modify anything. Do not even add blank lines.
     o   Click "File | Save As...". When the "Save As" dialog box appears,
         type "feedback.php" (without the quotes) into the "File name" field. Do
         not use any other name. Do not add spaces to the name. Do not use
         capital (uppercase) letters. The name must be exactly as I said. Click
         the "Save" button.
     o   Click "View | Design" from the menu. You should see a blank page.
         Do NOT type anything here. You're still looking at the feedback form
         script, albeit in Design view. Click "File | Close" from the menu
         immediately to close the window before you accidentally add or
         change something here.
3. How to Create the Feedback Form
  You will now create the web page containing your feedback form. This web
  page is just an ordinary web page, like the ones you've created in the earlier
  chapters of this Dreamweaver tutorial series.

     o   Click "File | New..." from Dreamweaver's menu.
     o   Click "Page from Template" in the left column and select the template
         that you designed in chapter 7. Since your feedback form is part of
         your website, it should probably have the same layout and design that
         you've given the rest of your site. Click the "Create" button.
     o   You should now be back in familiar territory. As usual, remember to
         change the "Title" field above your web page to an appropriate title,
         for example, "Feedback Form", "Contact Us", "Contact Form" or
         "Support" (or whatever else you like). Add a visible heading of
         "Feedback Form" (or whatever) into the editable portion of your web
         page, and delete the placeholder content from your template's editable
         regions (if any).
     o   Switch back to your web browser, and look for the section entitled
         "HTML Code" (scroll down the page to find it). As before, there
         should be a box in that section. Select everything in that box and copy
         it to the clipboard. If you've forgotten how to do it, go back to the
         above section to refresh your memory.
     o   Switch back to Dreamweaver. Click to put your text cursor in the spot
         on your web page where you want the form fields to appear. Note that
         the cursor should be on a blank line. If you don't have a blank line,
         make one by hitting the ENTER key (or the RETURN key on the
     o   Click "View | Code" from the menu.
     o   Dreamweaver will display the underlying code for your web page.
         Your text cursor should be positioned somewhere in a line that says
         "<p>&nbsp;<p>". In fact, to be specific, the cursor should be after the
         first "<p>" and before "&nbsp;<p>".

         Use the arrow keys on your keyboard to move the text cursor to the
         end of the line, that is, to immediately after "<p>&nbsp;<p>" on the
         same line.

     o   Click "Edit | Paste" from the menu to paste the HTML code you
         copied to the clipboard from your browser earlier.
     o   Click "View | Design" to return to Dreamweaver's Design mode. You
         should now be able to see the form.
4. How to Customise the Feedback Form
  This section deals with how you can customise the visual appearance of the
  feedback form. You do not have to customise anything if the form already
  looks fine to you. If you don't want to change anything, just skip to the next
  step. Otherwise, read on.

  The form obeys the same CSS rules as the rest of your web page. As such,
  you can use the techniques taught in chapter 3 to change the fonts, text size
  and colours if you wish. I will not go through those steps again below.
  Instead, I will deal with the things you have not yet learnt in previous
  chapters, namely, with how to change the widths of the various fields in your

  Before you begin, though, I should probably mention that the width and
  height of the various fields do not affect how much information your visitors
  can enter into your form. It's just a visual gimmick. Even if you create a very
  narrow field, your visitors can still enter very long names, email addresses or
  comments. The web browser will simply scroll to allow them to continue
  typing whatever they want to type.

  Having said that, it's still useful to be able to change the sizes of the various
  fields so that the form fits better into the visual design of your web page.

     o   How to Widen the Name and Email Address Fields
         To increase the width of the "Name" or "Email address" fields, click
         the field you wish to change to select it.
    In the PROPERTIES panel at the bottom of the Dreamweaver
    window, change the number in the "Char width" field to any number
    of your choosing. The default width is "25". If this is too narrow,
    change it to a bigger number (eg, "30", without the quotes) and hit the
    ENTER key. If the results are still not to your liking, modify it again
    till you get the width you want.

o   How to Widen the Width and Height of the Comments
    To change either the width or height, or both, of the Comments field,
    click the box under "Comments" to select it.

    Look at the PROPERTIES panel at the bottom of the Dreamweaver
    window. The "Char width" field, with its default of 45, controls the
    width of the box, while the "Num lines" field, with its default of 15,
    controls the height. Feel free to change those numbers to create a
    width and height that suits your site's design. Again, remember that
    you don't have to create a really big box just to allow your visitors to
    send you long messages. The web browser will scroll when necessary.

o   How to Change the Send Feedback Button
    To change the text appearing on the "Send Feedback" button, click the
    button once to select it.

    Change the words "Send Feedback" in the "Value" field in the
    PROPERTIES panel of Dreamweaver.

o   What Else You Can Change, and What You Should NOT
    The feedback form and the feedback form script were created to work
    with each other. The script depends on certain things in the form
    being left at its original value, and if you change those things, the
    form may not work correctly. As such, let me mention the things that
    you can change in the form, and the things that you should not
        The general rule of thumb is that only things that appear (that is, are
        visible) on your web page can be modified. That is, you can change
        the words "Name:" and "Email address:" that appear next to the Name
        and Email Address fields. You can change the word "Comments" that
        appear above your comments box. You can change the widths and
        heights of the various fields. You can change the text "Send
        Feedback" that appears on the button. You can also freely change the
        colours of the text and the background (as taught in the earlier

        Apart from the above, do not change anything else. For example, do
        not change anything other than "Char width" and "Num lines" in the
        PROPERTIES panel for your 3 fields. Do not change anything other
        than the "Value" field for the "Send Feedback" button. I know the
        PROPERTIES panel provides other tantalising fields that may tempt
        the compulsive customisers among you to modify. Specifically, do not
        change the words "fullname", "email", "comments" in the "TextField"
        boxes in the PROPERTIES panel. The words in those "TextField"
        boxes are not displayed on your web page, so you don't have to worry
        about them. They are for internal use by the script.

5. Saving the Feedback Form
  When you've finished customising your form, click "File | Save As..." and
  type "feedback.html" (without the quotes) into the "File name" field of the
  "Save As" dialog box. As usual, do not use any other name, do not change
  the capitalisation (case) of the name and do not add spaces into the name.
  Use the name exactly as I gave it. This is important because you entered this
  filename to the Feedback Form Wizard earlier, and it embedded the name
  into the script. If you change it now, you may lose some of the functionality
  of the script.

  Close the feedback form with "File | Close".

6. Create the "Thank You" and "Error" Pages
  You will need to create 2 additional web pages for the feedback system to
  function properly. These are just ordinary web pages, so you should be able
  to create them yourself without help. After all, you've already created so
  many web pages in the last couple of chapters.
The first page to create is the "Thank You" page. This page is displayed to
your visitors after the feedback form script successfully passes their message
to your web host's email system. The main purpose of this page is to let your
visitors know that their message has been sent. Most websites take this
opportunity to also thank their visitors for their comments.

Create the page the way you did the other pages of your site (like your home
page, site map, etc), based on your custom website template. Remember to
replace the "Title" field with something meaningful like "Feedback Sent",
"Message Sent Successfully", "Thank You" or some other phrase of your

In the main content section of your web page, say whatever you want to your
visitors. For those who are not sure what to say, here's one possibility:

Message Sent
Your message has been sent to the webmaster. Thank you for your

If you are running a business, you may want to give a more customer-
friendly message, like:

Thank You for Your Feedback
Thank you for your comments. If your message requires a reply, I typically
reply within 24 hours of the receipt of the message.

After you complete the page, save it with a filename of "thankyou.html"
(without the quotes). This is the name you provided to the Feedback Form
Wizard earlier, and the name is embedded in the feedback form script. If you
use a different name, change the case or add spaces, your visitors will be
greeted with an unfriendly 404 File Not Found error when they submit their

The other page that you will need to create is the "Error" page. This page is
shown to your visitors when they fail to provide their email address, name or
message. Since such information is needed for the script to create a properly-
formed email message from the form submission, the script (by default)
displays the "Error" page if any of those fields are empty.
      Like the "Thank You" page, feel free to write whatever you want. One
      possibility is to say:

      Error Sending Message
      Please complete all the fields in the form before clicking the "Send
      Feedback" button. Click the "Back" button in your browser to return to the
      form to fix the error.

      As before, remember to enter something meaningful in the "Title" field of
      the page. For example, you can use "Error" or "Missing Information"
      (without the quotes) as the title.

      When you've finished with the page, save it with a filename of "error.html"
      (without the quotes). Again, don't change the name in any way, not even the
      capitalisation (case). The filename must be identical with what you furnished
      the Feedback Form Wizard earlier, or your visitors will get a File Not Found
      error instead.

   7. Publish Your Pages
      Publish your site with "Site | Synchronize Sitewide..." as you did in chapter
      7. Your form page, feedback form script, thank you and error pages should
      appear in Dreamweaver's list of files to be published.

Testing the Feedback Form
To test your feedback form, connect to your site in a web browser. Make sure you
test the following:

   1. Check if you named your "Error" page correctly
      To check if you've named your error file correctly, and that the name
      matches what you gave the wizard, do not enter your email address in your
      first test of your form. In fact, don't bother to enter anything at all. Just click
      the "Send Feedback" button. You should get your error page. If not, and you
      get a File Not Found error when you submit the form, it probably means that
      there is a name mismatch: the name (or web address) you gave the wizard is
      not the same as the name (or web address) of the error file you actually
      created. Another possibility is that you failed to publish your error page or
      saved it to the wrong folder.

   2. Check if you named your "Thank You" page correctly
      To check if you've named your "Thank You" page correctly and saved it in
      the right place, write a message to yourself using that form. Make sure you
      complete all the fields properly. If you get a 404 or File Not Found error
      when you submit the form, it again means there is a name or web address
      mismatch somewhere. Either you've saved your "Thank You" page with a
      different name from what you furnished the Feedback Form Wizard, or you
      saved your page to the wrong folder, or you failed to upload the page.

   3. Check if your web host's email system has delivered the message
      After you get your "Thank You" page, you should log into your email
      account and see if you have received your email. If not, go through the
      checklist of things to do when you don't receive your email.

If you run into some other problems testing the script, please see the Frequently
Asked Questions (FAQ) about the Feedback Form Wizard. You may also want to
reread this chapter to make sure you didn't miss anything crucial.

Congratulations and Where to Go From Here
Congratulations! You've done it! You've not only created a fully functional multi-
page website, you've also mastered all the basic skills needed to design a website
using Dreamweaver CS5.

Accepting Credit Cards on Your Website
by Christopher Heng,

Are you thinking of selling things on the web? If so, you will probably also be
considering some way in which you can accept credit cards on your site. Since new
webmasters who visit often ask me about how they can get
started accepting payments in this form, this article provides some basic
information on adding credit card payment facilities to your website.

(Note: if you do not already have a website, you may also want to read The
Beginner's A-Z Guide to Starting/Creating Your Own Website.)

Why Do It?
Credit card payments allow you to take advantage of the following types of

   1. Impulse buyers. After reading your advertisements and hype on your site,
      buyers would be all fired up about your product. If they have a means of
      making a purchase immediately, you've secured that sale. If you only allow
      cheque payments, the additional time it takes for them to get their cheque
      book and mail out the cheque may be a deterrence. They may also have
      second thoughts later.
   2. International customers. Credit card payment is a tremendous convenience if
      your customers are overseas. It automatically takes care of the problems of
      currency differences as well as the time it takes for a cheque to travel to the
      vendor. You will lose a large number of overseas customers if cheque
      payment is the only way you can accept payment.

Methods of Accepting Credit Card Payments
There are actually two ways in which you can accept credit cards on your site.

   1. Using Your Own Merchant Account. To do this, you will need a bank that
      will allow you to open a merchant account. Requirements for this will vary
      from country to country, and you should check with your local banks for
      more information on this.
   2. Through a Third Party Merchant. There are numerous companies around that
      are willing to accept credit cards payments on your behalf in exchange for
      various fees and percentages. These are also known as "payment gateways".

Which Method Should You Use?
The initial costs of opening your own merchant account is usually higher than
when you use a third party merchant. Indeed, some third party merchants have no
setup fee at all.
However, the transaction fee (which is what you pay the bank or third party
merchant for each sale) is much higher when you use a third party as compared to
when using your own merchant account.

A third party merchant is usually convenient to use when you don't know if you
can actually make much out of your product or service. If you just want to test the
water to see how things are, this is usually a good way to start. It is also convenient
in that the merchant takes care of everything for you. You just get a cheque at the
end of each payment period (if you have earned enough) and concentrate on your
products, services and customers. Another benefit is that if you use a reputable
third party merchant, your visitors may be more willing to buy your goods online
since they trust that merchant to keep their credit card numbers safe.

Having your own merchant account lowers your transaction costs. However, you
have to be careful to minimize your credit card risks since you'll be processing the
credit card payments yourself. This is not to say that there are no risks attendant in
using a third party merchant.

Some Third Party Merchants / Payment Gateways
Here's a list of some third party merchants that you might want to consider if
you're looking for ways to accept credit card payments. Except for PayPal, I have
not actually tried any of them myself (as a vendor). Check them out carefully and
use them at your own risk.

Note that rates and stuff that I publish below were correct at the time I investigated
these vendors. It will most likely have changed by the time you read this since the
merchants tend to modify their rates from time to time according to market
conditions. Make sure that you check the current (up-to-date) details from their site
before making any decision.

The list is arranged alphabetically.

CCBill: There are no setup fees. Transaction fees vary (I can't find the schedule
though) depending on the volume of sales in each accounting period. According to
their website, "these fees are never more than 13.5% of revenues charged during
this one-week period for CWIE hosting clients and 14.5% for non-hosting clients".
CCNow: This is only for people who ship tangible, physical products. There is no
setup fee, and they charge 9% per transaction except in the November and
December where the fees are 8% per transaction (yes, lower).

Google Checkout: Google has its own payment gateway that is available for US
and UK sellers. It is mainly for use if you are selling tangible and digital goods,
although you can also use it to charge for services and subscriptions. Charges
range from 1.9% + $0.30 USD to 2.9% + $0.30 USD per transaction, depending on
the volume of sales in the previous month. If your buyer is not from your country
(ie, not in the US if you are in the US, or not in the UK if you are in the UK), there
is also another 1% processing fee.

Kagi: Kagi's fees seem to vary according to the order size, type of item sold and
the type of payment (credit card, cash, money order) used by your customer.

PayPal: This well-known service allows you to set up a Premier or Business
account (you are subject to certain limits when receiving credit card payments if
you use a Personal account, and probably also higher fees per transaction). The
charges range between 1.9% + $0.30 USD to 2.9% + $0.30 USD for each
transaction if you are in the US. Non-US users are charged different amounts
according to the country. From experience, I find this service easy and fast to

ProPay: A new competitor to PayPal (see elsewhere on this page) that currently
only caters to US residents. Depending on the type of account you sign up for, you
have to pay an annual fee (starting from $34.95) as well as transaction fees of 3.5%
+ $0.35 USD. However, to accept cards like American Express and Discover, you
have to use their more expensive plans.

RegNow: Designed for software authors to sell their ware, this merchant charges a
one-time activation fee of $19.95 USD plus a transaction fee of 6.9% plus $1 USD
per unit for their commission (minimum $2 USD charge). They also provide you
with facilities that allows you to easily set up an affiliate program.

How to Put an Order Form or Shopping Cart on Your
Once you have signed up the vendor of your choice, you will be able to put an
order form or shopping cart on your site. Each vendor has a different method for
this, but most, if not all, will provide you with premade forms that you can
customize for your product or service.

(Note: if you use PayPal, and don't know where to start, see my tutorial How to Put
an Order Form or Buy Now Button on Your Website Using PayPal for a step-by-
step guide.)

Trying It Out
Whichever you choose, if you are selling things on the Internet, you really have not
much choice but to accept credit cards. You probably don't know what you missed
until you try it out.

All the best for your business!

Copyright 2000-2009 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and
scripting, from
How to Design and Publish Your Website
with KompoZer
by Christopher Heng,

KompoZer is a WYSIWYG (What You See Is What You Get) web editor based on
Nvu, another free WYSIWYG web editor. It is essentially Nvu with some bugs
fixed and a name change. KompoZer runs on Windows, Macintosh and Linux.

This article guides you through the steps of creating your first web site using

What You Will Need
You will need the following for this tutorial.

   1. You will need to have KompoZer. You can obtain it free of charge from There are versions of KompoZer
      for Windows, Macintosh and Linux. Select the appropriate one for your
   2. You will need a web host to publish your pages to. For the complete
      beginner, a web host is (loosely speaking) a company which has computers
      that are permanently connected to the Internet. After you design your web
      page(s), you will need to transfer your pages to your web host's computer
      (called a web server), so that the rest of the world can see it. There are
      numerous web hosts around — you can find a list of cheap web hosts on

There are other things involved in getting your first web site up and running, such
as getting your own domain name, creating a search engine friendly website and
promoting your web site. This tutorial however does not deal with those issues —
it is strictly about designing (creating) and publishing your website using
KompoZer. For those who are total beginners, it may be useful to read How to
Create / Make a Website: The Beginner's A-Z Guide for an overview of the entire
process of website creation and maintenance.

Overall Goals of this Tutorial
By the end of this tutorial series, you will have created a fully functional website
with multiple pages, including a main page, a working feedback form, a Reciprocal
Links page, an About Us page, and a Site Map. Your website will contain images,
multiple columns, a form, links to other pages within your site, links to other sites,
text in different font sizes, and so on.

More importantly, you will know how to use KompoZer to create, design and
publish your site so that you can design new sites any time you want.

Goal of this Chapter
In this chapter, you will learn to create a rudimentary web page and publish it so
that it can be accessed on the Internet. By the end of this chapter, you will be
viewing your web page on the Internet with your favourite web browser.

Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand
it, you need to follow the steps as I describe them. The practical nature of this
guide makes it difficult to follow or understand if you're not doing the things

Installing KompoZer
To install KompoZer, first download the correct file for your system.

If you use Windows, and don't know what to do with the zip file after you have
downloaded it, do the following.

Create a new folder on your desktop. Call it "kompozer" (without the quotes).
Double-click the zip file you downloaded. A window will open. Drag the files in
that window to the folder that you have created earlier. Then go to that new folder,
and click the right mouse button on the file kompozer.exe. Click the "Send To"
menu item in the menu that pops up. Next, click the "Desktop (create shortcut)"
menu item. A shortcut to KompoZer will be placed on your desktop. To run
KompoZer, all you have to do is to double-click this shortcut.
If You Can't Find "Kompozer.exe"
If you cannot find any file called "kompozer.exe", it means that Windows is hiding
part of the filename from you. Please read (and do the things mentioned in) How to
Force Windows Explorer to Always Show You the File Extensions so that you can
locate the correct file.

If You Use Windows 95, 98, 98 SE, 2000 or ME
In the unlikely situation that you use a version of Windows earlier than Windows
XP, Windows Vista or Windows 7, you may need to install one of the free
archivers from the Free File Archivers and File Compression Utilities page before
you can double-click the zip file to open it. That is, after you install the archiver,
just open the "kompozer" folder on your desktop the normal way by double-
clicking it. You should now be able to open the folder. Early versions of Windows
lacked the ability to open zip files unless you install an archiver that supports it.

Creating A Simple First Web Page
To give you an idea how simple it is to create a web page, first start up KompoZer.

You will be greeted with a window that contains a menu (the top line of the
window that says "File Edit View Insert..." etc), a few lines of toolbars (containing
buttons like "New", "Open", etc), a left panel with a heading "Site Manager", and a
large pane on the right-hand side that has a tab called "Untitled". This large pane is
where you will design your web page.

Type the following into the KompoZer. You don't have to do anything special —
just start typing. Note that you can type whatever you wish — I'm just furnishing
you a block of text as an example. For ease of explanation, though, I will assume
that you have typed the text here in the rest of the tutorial. Don't let that stop you
from being creative, though.

Shakespeare's Website

Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to
day, to the last syllable of recorded time; and all our yesterdays have lighted fools
the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor
player, that struts and frets his hour upon the stage and then is heard no more. It is
a tale told by an idiot, full of sound and fury, signifying nothing.

When you type, you are typing into KompoZer's "Normal" mode. You can see
which mode you are using by glancing at the series of tabs at the bottom of the
KompoZer window.

To see how your page appears in an actual web browser, click the "Preview" tab to
enter KompoZer's "Preview" mode. Return to the "Normal" mode before
continuing. I shall assume that you are using the "Normal" mode in this tutorial
unless otherwise specified. The "Normal" mode is KompoZer's WYSIWYG editor
mode. When you type text in this mode, KompoZer converts it into a HTML web
document behind the scenes so that web browsers can recognize it as a web page.
If you want to look at the HTML code that is generated from what you just typed,
click the "HTML Source" tab at the bottom of KompoZer. Remember to return to
the "Normal" mode when you've finished admiring the code.

Now save the page onto your hard disk. Do this by clicking on the "File" menu,
then the "Save" item on the menu that appears. A dialog box should appear asking
you for the Page Title.

Note: For convenience, in future, I shall refer to this sequence of clicking on the
"File" menu, followed by the "Save" item simply as:

File | Save

This means that you are to click on the "File" menu, followed by the "Save" item
on the menu that appears. There are shortcuts to saving a file in KompoZer, as
there are for the many commands given in this tutorial. I shall, however, leave the
discovery of minor things like that to you and concentrate on the main task of
creating a web page.

As mentioned earlier, when you use "File | Save", a dialog box will pop up, asking
you to give a title to your page. Since this is the main page of your website, you
should enter the name of your website here. For example, if you are publishing a
personal web page, you might want to name your website "Shakespeare's Website"
(without the quotes) if your name happens to be Shakespeare. If you are publishing
a company web page, the site name should be your company's name, such as
"ABCDEF Company" or the like.
Once you've finished with the title, click the OK button or simply hit the Enter key
(or Return key on the Mac).

A new dialog box will appear, prompting you for a filename. Navigate to a
directory (ie, folder) on your computer where you want to save your page. Type
"index.html" (without the quotes) into the file name part of the dialog box. Do not
accept the default name given in the dialog box. Do not use another name. Do not
use capital letters in the name (ie, uppercase). Most web hosts expect the main
page of your website to be called "index.html". Their computers are configured in
such a way so that if you simply type your domain name, like, the index.html file will be displayed. If you change the
name to some other name, this will not work as expected.

After you've saved the file, you will be returned to KompoZer's main window.
Look at the top of the window at the window's title bar. Notice that instead of the
words "untitled", the title that you typed in earlier now appears there.

Uploading or Publishing Your First Web Page
Before we proceed to polish the page so that it looks at least half-way decent, we
need to publish the page to your web host. One reason we're going to do this now,
even before we've finished the page, is that KompoZer needs the information about
your actual website's address (or URL) before it can correctly handle things like
links and images on your web page. So even though the page is probably an
embarrassment to you at this stage, please complete the following steps, or you
will encounter problems later.

Don't worry about the page being so plain. If you've not advertised your website's
address (URL) to anyone, no one will even know your site exists, so this
preliminary version of your page will be seen by no one but you. People will not
visit your site out of the blue just because you happened to sign up for a web
hosting account today. It's not that easy to get visitors.

Another reason that you're publishing your page at this time is so that you can get
familiar with the major stages in the design of a web page. Once you get this
hurdle out of the way, and you know how to get your web page from your
computer into your web host's computer, you have mastered what is arguably the
biggest technical challenge a newcomer is likely to face. Don't let this scare you
though — it's actually quite easy!
To publish the page, go to "File | Publish" (ie, the "Publish" item on the "File"
menu). A "Publish Page" dialog box will appear asking you for more details.

      "Site Name" is the name that you want to give your website. Use the name
       that you gave to your website when asked for the title earlier (ie,
       "Shakespeare's Website" or "XYZ Company" or whatever). This name is
       only used by KompoZer internally, to refer to your site, but it's probably best
       to use the real name you ultimately wish to give to your site to minimize any
       confusion later.
      The "HTTP address of your homepage" field specifies the actual web
       address (or URL) of your website. If you registered a domain name like
       "" for your site, enter "" into this box.
       This field is required because KompoZer will use this information to form
       links on your site. Be sure to enter the "http://" prefix as well.
      "Publishing server" is a bit more complicated to explain. When you signed
       up for your web hosting account from a commercial web host, you would
       have been given a whole bunch of details by your web host. Among these is
       something known as your "FTP address". FTP, or File Transfer Protocol, is
       the usual means by which you transfer your web pages from your own
       computer to your web host's computer. Transferring your pages from your
       computer to your web host's computer is known as "publishing" or
       "uploading" your pages.

       For the purpose of this tutorial, I will assume that your web host told you
       that your FTP address is "". You should substitute your real
       FTP address everytime you see "" in the examples below.

       Before you enter that address though, you will need to know which directory
       (or folder) you need to put your web pages. Some web hosts require you to
       put your web pages in a directory named "www". Others require you to put
       it in a "public_html" directory. Still others say that you are to put your web
       pages into the default directory that you see when you connect by FTP. And
       so on. Find out the directory where you're supposed to upload your web
       pages to.

       Once you've got all the details, you're ready to form the address you have to
       enter into the "Publishing address" field.

       If your FTP address is "", and the directory that you're
       supposed to upload to is "www", enter "" here.
       Notice that you have prefixed "ftp://" to your FTP address
       (""), added a slash ("/") and followed it with your web
       directory name ("www"). If your web host tells you to simply upload it to
       the directory you are logged into when you connect by FTP, then just enter
       "" here.

      The "User name" and "Password" fields in the dialog box refers to user
       name (or login name) and password that your web host assigned to you. It is
       needed so that KompoZer can connect to your FTP account and upload
       (publish) your pages.

When you've finished completing the information, click the "Publish" button.
KompoZer will proceed to connect to your FTP account on your web host and
upload your pages. There will be a dialog box that pops up to tell you it is
uploading your page. The box will automatically disappear when KompoZer has
completed its task.

If you get an error message from KompoZer, look through the guide above again
and recheck all your settings. Most of the problems at this stage are caused by one
of the settings not being correctly entered. If you have eliminated all possible
errors in your settings and still get an "Unknown publishing error", check my FAQ
on this.

Testing the Web Page
Before you proceed further, you need to test the web page you have uploaded. This
way, you will know whether you've made any mistake when entering your details

Start up your browser. Type the URL (web address) of your website. This is the
address that you typed into the "HTTP address" field earlier. For example, type
"" if that is your URL.

If you've entered the "publishing server" earlier correctly, you should see the page
you created earlier in your web browser.

If you get an error like "No DNS for" or "Domain not found",
it probably means that your domain name has not yet propagated to your ISP. Put
simply, this means that you probably only just bought your domain name. It takes
time for a new domain name to be recognized across the world (usually 2 or more
days), so it's possible that your ISP has not yet updated its name servers to
recognize your new domain. Some web hosts give you a temporary address which
you can use to access your website in meantime. If you have that, use the
temporary address to check that your site has been uploaded properly. Otherwise,
you'll just have to wait.

If you get an error like "404 File Not Found" or you get your web host's
preinstalled default page, you may need to go back and check your "publishing
server" field. You may have published your page to a location that is not
recognized by the web server as the default page to show when only your domain
name is entered.

You can change the settings that you have just entered by accessing the "Edit |
Publishing Site Settings" menu. Then click the name of your website in the left
pane, under "Publishing sites". One possibility for the page not showing is that you
did not specify the correct directory on your web site to publish your index.html
page to. A more remote possibility is that your web host requires that your page be
named something other than "index.html". This is very rare nowadays, so explore
this last possibility only when you've ruled out all others. At worse, ask your web
host's support department or check their documentation for help.

If what you see is your domain parking page created by default when you first
bought your domain name, it may mean that you forgot to point your domain name
to your web hosting account. I strongly recommend that you go back and follow
the steps given the How to Start / Make a Website in addition to following this
tutorial. As mentioned before, there's more to creating a website than just using a
web editor.

If you get no errors at all, but see the page that you've designed earlier,
congratulations! You've created and uploaded your first web page. It may be a
rudimentary page but you have successfully walked through all the essential stages
of designing and uploading a web page.

KompoZer Tutorial 2: How to Add
Images, Change Fonts & Colours, and
Create Links
by Christopher Heng,

In the first chapter of the KompoZer tutorial, you designed a rudimentary web page
and uploaded it to the web host.

In this chapter, you will learn how to

      change font faces and point sizes;
      add section headers or titles;
      insert images;
      change the colour of the background and the text;
      and add a navigation bar and create links to other pages on your site.

By the end of this chapter you should have a working main page of your real web

If you missed the first chapter of this tutorial, the article on How to Design and
Publish Your Website with KompoZer can be found at

How to Change Font Faces and Point Sizes
In the first chapter, we typed the following text into KompoZer:

Shakespeare's Website

Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to
day, to the last syllable of recorded time; and all our yesterdays have lighted fools
the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor
player, that struts and frets his hour upon the stage and then is heard no more. It is
a tale told by an idiot, full of sound and fury, signifying nothing.

Let's polish up the page. As it stands, we have not specified the font face that your
web page is to use. This means that your page will appear in the default font of the
web browser your visitor is using, whatever that may be. For visitors using Internet
Explorer on Windows, this usually means that the "Times New Roman" font face
will be used, unless your visitor has changed the default setting. Since the actual
font face varies from system to system, and browser to browser, it is usually best to
specify that a particular font be used by the browser every time it displays your
page, so that you have more control over the appearance of your web page.
To do this, select the text of the entire page. This can be done with the mouse by
dragging the mouse cursor from the first "S" in "Shakespeare" to the full stop
(period) after the last word. Alternatively, type Ctrl-A (type "a" while holding
down the key labelled "Ctrl") in Windows to select everything.

From the "Format | Font" submenu, select either "Helvetica, Arial", "Times" or
"Courier". I will assume that you selected "Helvetica, Arial" in this tutorial.
"Helvetica, Arial" (actually "Helvetica, Arial, sans-serif" although the menu does
not say it) means that the browser will try to use a font named "Helvetica" on the
visitor's computer if available, otherwise it will use the "Arial" font. If the latter is
not available either, the browser will try to use another sans-serif typeface. For the
curious: the Helvetica and Arial fonts are very similar in appearance. Arial is found
by default in Windows systems, while Helvetica is available by default in a
number of other systems.

The appearance of the text should instantly change. If you are running Windows,
the Preview window will now show your text using the "Arial" font.

You can also change the point size of the font on the page. For example, if you
think that the text of the "Tomorrow, and tomorrow" paragraph is too small for
your visitors (for example, your site caters to people who need large print such as
the elderly or the visually impaired), select the "Tomorrow, and tomorrow"
paragraph, and go to the "Format | Size" menu. You can experiment with the
various sizes till the text of the page is to your liking. Be careful not to make the
text too small. What looks good on your computer with your particular monitor
resolution may be unreadable on a different system with a high resolution monitor.

Do not change the point size of "Shakespeare's Website". We will do this next,
using a different technique.

How to Specify Headers and Titles
In web design lingo, the text "Shakespeare's Website" is actually regarded as the
header of the paragraph, or perhaps of the entire page. By convention, both in print
and on the web, headers are usually in bold and in a larger point size than the rest
of the text on the page.

While it is possible to simply change the point size of the text using the technique
described earlier, headers are usually specified in a different way.
Select the text "Shakespeare's Website" at the top of the page. Go to the "Format |
Paragraph" menu and select "Heading 1". "Shakespeare's Website" should now be
in a large point size and in bold.

You may have noticed from that menu that there are a variety of header styles -
"Heading 1" to "Heading 6". Although KompoZer will not prevent you from doing
so, you should only use "Heading 2" after you have used "Heading 1", "Heading 3"
after you have used "Heading 2" etc. That is, "Heading 1" is meant to be used as
the topmost header in the hierarchy, with "Heading 2" used for the lower level
section headers, and so on.

Note that even though you're using "Heading 1" for "Shakespeare's Website", it is
still possible to control or change the point size and font face using the method
mentioned earlier.

Now save the page with "File | Save". If the "File | Save" option is disabled, use
"File | Save As". KompoZer may ask you for the filename again. Simply choose
the "index.html" file, and click "OK" to replace the existing version. Note that you
must save your page before you go on to the next step, or KompoZer will disable
certain features that you will need later.

How to Add Images
   1. If you want to add an image to your web page, you must have a means of
      creating that image. For that, you either need to have access to a graphics
      drawing program, or if you already have the picture on paper that you can
      use (such as a logo that is printed on your company's letterhead), you will
      need to scan that picture into the computer.

      If you are creating your own pictures, you need a drawing program that can
      create PNG, GIF or JPG files. If you have no idea where to get such a
      drawing program, you can find a list of free programs on's Free Drawing and Painting Software page.

      A description of how to use a drawing program or a scanner is outside the
      scope of this tutorial. However, a basic guide to designing a logo for your
      site can be found in my other tutorial, How to Create a Logo for Your Site
      the Quick and Easy Way: Logo Making for the Graphically Challenged.
2. Place the image file into the same folder as your index.html page.
   Alternatively, you may create a subfolder named "images" in the directory
   where you saved your index.html file in the last chapter, and copy your
   image file into it. If you don't know how to create a subfolder, just place the
   image in the same folder as index.html.

   For the purpose of this tutorial, I shall assume that your file is called
   "logo.gif". I recommend that you name your files using small letters (that is,
   lowercase letters) with no spaces in the name. This avoids a variety of
   problems that occurs when your filenames has capital letters (uppercase
   letters) and spaces.

3. To insert an image beside the words "Shakespeare's Website", position your
   cursor to the left of the word "Shakespeare" (or whatever word you have
   typed in the header). Select "Insert | Image..." from the menu. A dialog box
   will pop up asking you for the location of the image. Click the "Choose File"
   button (next to the box for "Image Location") to select your image and click

   Under the "Image Location" box, which should now contain the name of
   your image file, the "URL is relative to page location" box should have a
   tick in it. If not, click it to enable it. If the box is grayed out, it means that
   either you have not published your page before or you have not saved your
   file since your last change or both. Click the "Cancel" button and fix the
   error before returning to this step. For example, if you have not published it
   before, return to chapter 1 of the KompoZer tutorial for more information on
   how to do this. If you have already published your page previously and still
   encounter this error, it means that you have not saved the file after making
   some changes. Do it before returning here.

4. In the "Alternate text" field, enter "Logo for Shakespeare's Website". The
   text you type here will be displayed if the visitor uses a browser that does
   not display graphics or has the graphics display deliberately disabled. It is
   also useful for people who are blind or visually impaired, and rely on speech
   synthesizers to read web pages out aloud for them. As such, any time you
   add a picture, it is important that you add some sort of descriptive text in the
   "Alternate text" field. As a side benefit, adding the alternate text also
   improves your website's search engine friendliness, which is an important
   part of website design if you want your site to have visitors.
   5. Click the "Appearance" tab in the dialog box. You can now change the
      alignment of the image. Click the down arrow in the box under the "Align
      Text to Image" field to display a menu with the options available for that
      item. Select the item "Wrap to the right" on that drop down menu. This will
      cause any text that follows your picture to move to the right of the image.
   6. Click the OK button. Your image should display to the left of the words
      "Shakespeare's Website". Depending on the height of your image, it is
      possible that some of the words in the paragraph that follows are also
      aligned to the right of the image.
   7. Move your cursor to the start of the main paragraph, that is, move it to the
      first "T" in "Tomorrow, and tomorrow". Select "Insert | Break Below
      Image(s)". The paragraph should now start below the image and not wrap to
      the right of it as before. Note: You do not have to do this if your image did
      not affect your main paragraph. To undo what you just did, click "Edit |
      Undo" on the menu. You can always use "Edit | Undo" to undo something
      that you just did, if you decide that it was a mistake.

At this point, your page may or may not look good, depending on the size of your
image. If your image is too large and the text too small, the alignment will not look
good. One way to fix that is to adjust either the size of the image (use your drawing
program) or the size of your heading.

If putting the image to the left of your header does not work too well, you can
insert the image above your header. To do this, delete the existing image by
clicking on it with your mouse, and hitting the Delete key. Next, insert a blank line
above your header and move your cursor upwards to the blank line. Insert the
image as before, only this time, do not change the alignment of the image in the
"Appearance" tab (just leave it set to the default).

If you insert an image in this way, you may want to centre ("center" in US English)
both the image and the header "Shakespeare's Website" on your web page. To do
this, click on the image once to select it. Then select "Format | Align | Center".
Similarly, to centre "Shakespeare's Website", select the text, and then use "Format |
Align | Center" from the menu again.

Background Colour and Text Colour
There may be occasions that you need to change the colour of certain aspects of
your web page. For example, you may wish to change the background colour of
your page. To do this, select "Format | Page Colors and Background" from the
menu. Click "Use custom colors", and then the colour button beside "Background".
You will be presented with a dialog box with many colours to choose from. Select
your preferred colour then click OK to accept the changes.

If you are changing the colours of your background and text, be sure to select
colours that will contrast well so that your text can be easily read.

How to Create a Link to Another Page
In the chapters to come, we will create a number of other pages. In order for your
visitors to reach those pages, you need to add links to those pages.

To create a series of links to the other pages on your site, do the following:

   1. Move your cursor to the bottom of the page. Leave a blank line after the the
      paragraph above. We will be creating a navigation bar for this site at the
      bottom of this page.
   2. Select "Insert | Link" from the menu.
   3. Enter "Home" (without the quotes) in the box entitled "Enter text to display
      for the link". This will be the underlined text that visitors will see.
   4. For the "Link Location" field, enter "index.html".
   5. Click the OK button.
   6. Using the same procedure, add links to the following pages as well:
         o About Us (aboutus.html)
         o Feedback Form (feedback.html)
         o Reciprocal Links (links.html)
         o Site Map (sitemap.html)

      Separate the links using spaces and a vertical bar (see picture below).

      Where's the Vertical Bar?
      For those who don't know how to get the vertical bar (ie, "|"), you can find it
      on your keyboard.

      The exact location, however, varies from keyboard to keyboard, which in
      turn varies from country to country, manufacturer to manufacturer, and
      keyboard model to keyboard model. On many keyboards, it's the same key
      as the backslash ("\") character. If you use a US keyboard, look at the keys
      below or next to the backspace key. If you use a UK keyboard, check the
      key next to the left Shift key. If it's not there, you may be using a different
      keyboard model (with a different layout) from those I'm accustomed to. In
      such a case, just go through your keyboard key by key, in a systematic
      manner, to look for it.

      When you've finished putting up all the links, the bottom of your page
      should look like the following:

      Home | About Us | Feedback Form | Reciprocal Links | Site Map

   7. Select the entire line at the bottom, centre the line with "Format | Align |
      Center", and if you wish, change the font to "Helvetica, Arial" as before.

At this point, your page should look something like the following. Since I don't
know what picture you used nor its size, I've put a placeholder in the diagram

Writing the Real Content of Your Main Page
At this point, you have a working main page for your web site, except that the real
text for the page has not yet been written. You should now replace the header on
the page (if you have not already done so) and the quote from Macbeth with the
real content of your site.

Here are some tips on what you can put on your main page.

   1. Replace the header "Shakespeare's Website" with the real name of your
   2. Visitors arriving at your site at the main page should be able to tell what
      your site is about. The text and graphics in your site should work together to
      that end. This does not mean, though, that you have to write a long story on
      your front page describing the purpose of your site or company. However,
      simply putting a cryptic picture in place of the existing Shakespearean text
      will not help your visitors figure out what your site or your company is all
   3. Your main page should also allow visitors to access the rest of the site. For
      the purpose of this tutorial, we have placed links to certain pages of the site
      that are found on a typical company website. If you intend to have other
      pages, for example a page listing your products, you should create a link to
      that page as well. Important: when creating filenames for these other pages,
      create names that do not have any capital letters (ie, uppercase letters) or
      spaces in them. Spaces and capital letters in the names might lead to
      problems in the future. See the article How to Create Good Filenames for
      Your Web Pages if you want more information.

Once you've finished rewriting the text on the page with more appropriate content
for your site, save the page by clicking "File | Save". Next, you will have to
republish the updated page to your site. Select "File | Publish". When the dialog
box appears, put a check in the checkbox for "Include images and other files" if it's
not already there. If you don't do this, your images will not be uploaded to your
website. Finally, click the OK button to allow KompoZer to upload your revised
page to your web server.

Congratulations - you now have a functional main page for your website.

Next Chapter: Data Tables and Multi-Column
In the next chapter of this tutorial, you will learn how to use data tables as the first
step to learning how to create multiple column layouts for your website.

How to Create Data Tables in KompoZer
by Christopher Heng,

In the second chapter of this tutorial, you created a functional main page of your
site. In this chapter, you will learn how to how to use tables to display your data.
Even if you do not have any data that you need to display, you should not skip this
chapter since it is the basis for next chapter's lesson on how to create a multi-
column layout for your website.
If you missed the earlier instalments of this tutorial, you can find the first chapter
of the KompoZer tutorial at

Creating Tables to Display Your Data in KompoZer
For this section of the tutorial, you will be creating a new page for your website:
the "About Us" page. This chapter will take you through the process of creating a
page that looks something like the page in the diagram below. You will of course
have to modify the content to suit your site. The main idea in this section is to
introduce you to the use of data tables, which we will use (or misuse) to create
multiple column layouts for our site later.

Steps to Take
   1. If you've been observing the websites that you visit, including, you will have noticed the pages on a particular website
      share a common design, with only the page-specific content differing from
      page to page. The common design not only saves the web designer time
      when designing a site, it also helps visitors. A common layout among the
      pages on a site make it easier for visitors to locate common elements like
      navigational links.
2. For this tutorial, we will use the index.html page that we created in the
   previous chapters as a template for our second page.
3. Make a copy of the index.html that you created in the previous chapter, and
   call it aboutus.html.

   To do this in Windows, open up "My Computer" and navigate to the
   index.html file. If you can't find any file named "index.html", only a file
   named "index", click the "Tools" menu in the "My Computer" window,
   followed by "Folder Options". Click the "View" tab at the top of the options
   dialog box. Uncheck the box "Hide extensions for known file types". Click
   the button "Apply to All Folders". Click the "OK" button. You should now
   be able to see the full filenames of all your files.

   Select the "index.html" file with your mouse. Right-click the file and select
   "Copy" from the menu that pops out. Click a blank spot in that same window
   and right click it. Select "Paste". A new file, "Copy of index.html", will
   appear. Right click the file and select "Rename". Change the name from
   "index.html" to "aboutus.html".

4. Start up KompoZer. Click "File | Open File". An "Open HTML File" dialog
   box will be displayed. Select the aboutus.html file which you created in the
   step above and click the "Open" button.
5. KompoZer will display your new aboutus.html file. At this point, the page is
   identical with the index.html that you created earlier. We will be changing
   this page to an "About Us" page. The "About Us" page on a site typically
   gives your site's visitors information about a company (if yours is a company
   site) or about you (if yours is a personal site).
6. Change the heading of the page from "Shakespeare's Website" to something
   appropriate for an "About Us" page on your website. For example, if your
   site is a personal website, you can call it "About Me". If you want to use that
   page as a resume, you can call it "[your name]: Resume" or [your name]:
   CV". If your site is a company website, call it either "About Us" or "XYZ
   Company: About Us".
7. From the Format menu, click the "Page Title and Properties" menu item.
   Change the text in the Title field to match what you used for the header
   earlier, and press the ENTER key.
8. Replace the quote from Macbeth with the "Here are some of my
   achievements:" or, alternatively, substitute with the real content that you
   want on your finished site.
9. Hit ENTER a couple of times to leave a blank line before the start of your
10.From the menu, select "Table | Insert | Table..." A dialog box appears. The
   dialog box shows an image of a 6 x 6 table, with 2 rows and 2 columns
   selected by default. Below the image, the dialog box shows the number of
   rows and columns currently selected in case you're too lazy to count the
   number of shaded squares yourself.
11.Basically we want to create a table with 5 rows and 2 columns. There are a
   couple of ways to create such a table. One way is to move your mouse over
   the squares until you get a 5 x 2 table. For small tables like ours, this method
   will probably suffice. However, this method limits you to creating a table
   with a maximum size of 6 rows by 6 columns. For this tutorial, you will be
   using the alternative method, which allows you to create tables of any size
   you wish.
12.Click the "Precisely" tab at the top of the "Insert Table" dialog box. This
   new tab will allow us to specify exactly how big the table is to be. Enter "5"
   (without the quotes) for Rows and "2" (again, without the quotes) for
   Columns. Under width, the default is 100 % of window, which means that
   your table will fill out the entire width of your web page. You can leave it
   set to the default. The "Border" value should be 1 pixel by default, which
   means that your table will have a border of one pixel surrounding its cells.
   You can leave that alone too. Once you've finished, click OK or hit the
   ENTER key.
13.A table should appear on your screen. Complete the table using the data
   below. Alternatively, you can complete it using your real content. To move
   to the different columns and rows in the table, use the TAB key.
   Alternatively, if you prefer using the mouse, you can click in the appropriate
   cell to position your cursor. (Don't worry about the constantly resizing

     Year       Play / Achievement

   1599        Julius Caesar

   1600        Hamlet

   1604        Othello

   This year Shakespeare's Website
   14.Note: your table will not look exactly like the table in my picture earlier. In
      particular, your table should fill out the width of the browser, while the table
      in my picture does not. I mention this for the sake of those who might worry
      that they're doing something wrong if their screen does not look the same as
      my image.
   15.If you want to move the cursor outside your table, do not use the TAB key in
      the last cell. Use the arrow key instead. If you use the TAB key there,
      KompoZer will automatically create another row in the table thinking that
      you want to extend the table. If this warning comes too late for you, and
      you've already accidentally created another empty row, you can easily delete
      it the extra row by moving your keyboard cursor to that row and use "Table |
      Delete | Row" to get rid of it. It is also possible to undo mistakes
      immediately after you commit them by using "Edit | Undo" from the menu.
   16.Now look at your table. The first row of the table actually contains the
      header for the rest of the table. To indicate that it is the header, move your
      cursor to the "Year" field, then select "Table | Table Properties". You will be
      greeted with a dialog box with two tabs at the top: "Tables" and "Cells".
      Click the "Cells" tab. The dialog box contents will change when you do so.
      Now change the "Cell Style" in that dialog box from "Normal" to "Header".
      Click OK. Now move your cursor to the "Play" field of your table and do the
      same here.

      You have indicated that the those two cells are headers for their respective
      columns. Browsers typically show such headers by displaying them in bold.

   17.If you like, you can select the entire table and change the font face to
      "Helvetica, Arial". Use the method mentioned in Chapter 2.
   18.Preview the page, save it as "aboutus.html" and publish it. Go to your
      website and click the "About Us" link from your main page, and you should
      be able to see this newly created page. You can return to your main page
      again by clicking the "Home" button at the bottom of your "About Us" page.

Congratulations. You've created your first page with a table and used it to present
data. In the next chapter, we will use a table to control the positioning of text on
your web page in order to create a multiple column layout for your website.

How to Create a Multiple Column Layout
for your Website in KompoZer
by Christopher Heng,

If you look at the design of many websites, you will probably notice that most of
them have multiple columns of text and graphics on each page. For example, on, most pages have two columns: the left column holds the site
logo and navigation menu buttons while the right has the main content. It is
possible to have more than two columns too. At the time I wrote this,'s main page has three columns.

Since KompoZer does not allow you to arbitrarily position text and graphics on
your web page, nor does it allow you to easily create multiple columns using
Cascading Style Sheets (don't worry if you don't know what this is) from the
WYSIWYG interface, you will have to use an old webmaster trick to accomplish
this. Here is where the table creation tips that you learnt in the previous chapter of
this tutorial come into play.

If you have not done the exercise given in KompoZer Tutorial 3: How to Create
Data Tables for your Web Page because you thought you will never need to use
tables, you should return to that chapter and try it now. I will assume that you
already know how to create and configure tables in this chapter.

For those of you who arrived at this page without reading any of the preceding
chapters, and want to start at the beginning, you can find the first chapter of
KompoZer tutorial at

Creating a Two Column Layout for Your Web Page
The aim of this section is for you to create a page that looks something like the
If you notice from the above picture, the page is a two column web page that will
serve as your Reciprocal Links page. The latter is where you can place links to
other sites that either link to you or that you find useful.

If you decide to keep the two column layout you create here for your site after you
finish this chapter, you should go back to the pages you created in the earlier
chapters and modify them. This allows your site to have a consistent feel. That is,
if you want a two-column layout for your site, change all the pages on your site to
have the same two-column layout. Likewise if you prefer a one-column layout or a
three-column layout (and so on), change them to have the same layout. This is not
a hard-and-fast rule, just a general recommendation; for example, as noted above, (at the time this was written) varies its layout according to its
content: it uses a three column layout for its main page and a two column layout
for its articles.

Creating a Two-Column Layout: Steps to Take
   1. The basic idea here is to create an invisible table that has the number of
      columns you want. The table is configured so that it fills the entire width of
      the browser window.
   2. Start KompoZer with a blank page.
   3. Insert a table with "Table | Insert | Table". When the dialog box appears,
      click the "Precisely" tab at the top of the dialog box. In the fields that appear
      in the dialog box, specify 1 row and 2 columns. Leave the default width of
      "100% of the window" as it is. In the "Border" field, enter 0 to replace the
      default border value. You are creating a table without any lines that occupy
      the entire width (100%) of the window. Click OK when you are done.
   4. Move your cursor into the left column (eg, by clicking in the blank space in
      that column with your mouse), and type the text shown in the picture above.
      The underlined items in my diagram represent links to the other pages on
      your site. They are the same links that you have been using in the earlier
      chapters of this tutorial. For your ease of reference (if you have been using
      the same page names that I have given in the earlier chapters), the links point
      to the following pages:
          o Home (index.html)
          o About Us (aboutus.html)
          o Feedback Form (feedback.html)
          o Reciprocal Links (links.html)
          o Site Map (sitemap.html)
   If you have forgotten how to create links, you can review chapter 2 again for
   the information. If you are using KompoZer 0.7.10 (and possibly other
   versions as well), you might find that the links you create do not appear to
   have the traditional blue underline. This is due to a longstanding bug in
   KompoZer and its predecessors, Nvu and Mozilla Composer. Don't worry -
   if you created the links correctly, they will be there when your website is
   viewed by a browser even if it doesn't appear while you are creating the

5. Before you carry on further, save the page. When prompted for a title for the
   page, enter "Reciprocal Links". For the filename, enter "links.html". Don't
   get creative here (unless you know what you're doing): if you change the
   filename or the title of the page at this point, you will need to go back and
   change all the links that you have already created in the earlier chapters of
   this tutorial.

   Once you have saved the page, you can open it in your web browser to
   verify that your links were coded correctly and appear normal. You need to
   do this because KompoZer doesn't render the left column correctly, making
   it difficult for you to check visually in the web editor.

6. Now move your cursor to the right column (eg, by clicking in it). Type the
   main content of your Reciprocal Links page here. If you have no idea what
   to type, use the example text given in the picture above as a temporary
   placeholder. The URLs for the links in the diagram are as follows:
       o "please let us know" ( feedback.html ). Note that this sentence is just a
          placeholder until you get real links to place here. Once you have
          something, you can delete the sentence "If you wish to exchange link
          with us, please let us know" or, at your option, leave it above (or
          below) your list.
       o's KompoZer Tutorial (

          1.shtml )
       o's Free Hard Disk Backup and Restore Software (
7. I'm sure you have noticed that the width of the right column expanded as
   you typed your text. KompoZer mimics the behaviour of a web browser
   when rendering table columns that do not have an explicit width setting.
   While a column that changes its width dynamically according to its content
   is acceptable for most data tables, it is not what we want when we use (or
   abuse) a table as a container for our page content. Another problem is that
   the text on your page is centered vertically, that is, if you don't have much
   text in that particular column, it will appear in the centre of your page.

   To fix this, move the cursor to the left colum (eg, by clicking in it). Select
   "Table | Properties" from the menu. Click on the "Cells" tab at the top of the
   dialog box that appears. Click the checkbox for "Width" to select it ("Width"
   can be found in the "Size" section). Type 20 in the Width field. Change the
   drop down box for "Width" from "Pixels" to "% of table". Under "Content
   Alignment", check the "Vertical" box, and select "Top" from the drop-down
   box beside it. Click the OK button.

   The left side of the table should change its width. If the width is still not
   acceptable for your content, try again and use a different number till you are
   satisfied with the width of the left column.

   Once you are satisfied with the width for the left column, repeat the
   procedure for the right column. The width for the right column should be 80
   if you used 20 for your left column (ie, 100% - 20% = 80%). If you've used
   a number other than 20 for your left column, subtract that number from 100
   to get the value you need to enter. Remember to set the vertical alignment
   value to "Top" for this column as well.

8. Many people use a different colour for their navigation panel (which is what
   the left column of your page currently functions as) to distinguish it from the
   main content of your page. To do this, make sure your cursor is in the left
   column, and select "Table | Table or Cell Background Color" from the menu.
   Select a colour other than black, blue or purple. Actually, you are free to
   select whatever colour you want. But if you select either black, blue or
   purple, you will find that some of the text becomes extremely difficult to
   read under certain circumstances. If you can't decide, choose one of the
   yellow-based colours. For example, I selected the "#ffcc66" colour. (Every
   colour you choose has an associated colour value. This value appears in the
   "Hex" field at the bottom of the dialog box. If you want to choose the same
   colour I did, click on the colours until you find one that has "#ffcc66"
   appearing in that field.)
9. If you have not already done so, you may wish to change the size of the text
   and the typeface used to something other than the default. For example, I
   used the "Helvetica, Arial" option in the "Format | Font" menu for the text.
   You can also use a graphic image with your site's logo in place of the text
      "Shakespeare's Website". Make sure that the width of the logo is suitably
      narrow so that it can fit into your left column when your site is viewed with
      a 1024x768 screen resolution. You may also want to change the various
      titles or headers on the page, that is, "Shakespeare's Website", "Sites that
      Link to Us" and "Useful Sites", to use the header styles "Heading 1" and
      "Heading 2", as described in chapter 2. Doing so will automatically switch
      those pieces of text to use a bold and large font.

      When you're done with your changes, save the page and publish it.

How to Create a Three-Column (or More) Layout
Although you will not be creating any three-column page for the purpose of this
tutorial, if you find you need such a layout, simply enter the required number (eg,
"3" for a three-column page) instead of "2" for the "Columns" field when you
create your table.

Special Cases
Sometimes you need to create a page that is basically two columns but with a
single column either at the top or at the bottom of the page. For example, you may
want to put a banner at the top of the page that spans both columns. Or you might
want to put a copyright notice at the bottom of the page that stretches from the left
side of the page to the right.

The easiest way to do this in KompoZer is to simply place the banner or text before
(or after) your table. Another method is to create a table with more than one row,
and join the cells in top row (or the bottom row) so that there is only one column
for that row. I leave these special cases as an exercise for those interested.

Creating a Site Map
At this point, you have sufficient knowledge to create a respectable-looking
website with multiple pages. You can now consolidate your knowledge by creating
(on your own) a Site Map for your website.

A Site Map is a page that links to every important document on your website. Such
a page is a useful aid to your visitors in case they want to locate a particular page
quickly. It is usually present in well-designed sites with multiple pages, and is one
of the facilities that improve a site's usability. Although your site has only a few
pages at present, and all of them are listed in your left-column navigation panel, it
is a good practice to always create a site map for your sites (unless the site only has
one or two pages).

You can see an example of a site map by checking out's Site
Map at You do not need to use a
three-column layout for your Site Map though; the only reason's
Site Map has three columns is because there are too many pages to list in a linear
fashion. Your Site Map can be a straightforward list of links to all your pages if
you like. In fact, it is best to keep your Site Map simple so that visitors can find
what they want easily. Restrain yourself from making it into such a graphical feast
that your visitors have to solve a maze of visual puzzles before they can locate
your pages.

How to Add a Feedback Form to Your
Website Using KompoZer
by Christopher Heng,

As you surf the web, you will probably have noticed that most of them have some
sort of facility for visitors to send a message to the webmaster. Some sites have a
feedback or contact form, which is basically a form that you can complete and send
using your web browser. Other sites have their contact information, like email
addresses, displayed on a page on their site.

In this final chapter of the KompoZer Tutorial, you will be adding a feedback form
to the site that you have created in the previous chapters. If you have arrived here
from outside the site and wish to read the earlier chapters, you can find the first
chapter at
On the other hand, if you arrived here looking for a feedback form script and not
an KompoZer tutorial at all, you should go directly to the Feedback Form Wizard
at to create your script.

Note that of all the chapters in this series of KompoZer tutorials, this chapter is
probably the most difficult to understand, since it involves many unavoidable
technical aspects. However, even if you don't understand portions of it, you should
still be able to create a feedback form for your site by blindly following my step-
by-step guide.
Overview: How a Feedback Form Works
There are many aspects to getting a working feedback form on your website: it is
definitely more than simply designing a web form with KompoZer. By way of
overview, here are some of the major elements that we will need. You do not need
to understand every single detail at this point since I will take you item by item
through the whole process later. However, it is useful to have the big picture in
mind so that you don't get lost in the forest of details later.

   1. The first thing we need is the web page containing the feedback form. You
      will be designing most of this page using KompoZer. By itself, the form
      doesn't do anything at all: your visitors can click the "submit" button till they
      are blue and you will still not receive their message. The task of sending the
      form contents as an email message lies with what is known as the feedback
      form script.
   2. The feedback form script is essentially a computer program that processes
      the contents of the form sent by your visitor's web browser. It takes the raw
      message and formats it as a regular email message and then sends it via
      email to the webmaster. This script has to run on the web host's server (ie,
      computer) itself. You will be using a script custom designed for you by's Free Feedback Form Wizard. However, you will have to
      find a web host that supports the running of such scripts yourself. Not all
      web hosts allow scripts to be run on their server (computer).
   3. Next, we have the "thank you" page. After the browser sends the message
      to the script, you will want to thank your visitors for their email. Even if you
      don't feel particularly grateful, you will still need some sort of page that will
      inform your visitors that their message has been successfully sent. This page
      can be easily designed using KompoZer.
   4. Finally, you will need an "error" page. If a visitor mistakenly clicks the
      "submit" (or "send") button before he/she has finished typing essential
      elements such as their email address, the feedback form script will direct
      them to a page telling them that they have missed out components required
      in a message. Like the "thank you" page, this is a straightforward web page
      that can be designed with KompoZer.

In other words, for your feedback form to work at all, you need five major things:
the feedback form, the feedback form script (program), the thank you page, the
error page, and a web host that allows you to run programs (scripts) on their
Step by Step Guide
 1. Get a web host with PHP 4.2 or above
   Your feedback form will not work at all if you use a web host that does not
   allow you to run your own programs (scripts) on their computers. Basically,
   if you use the free web space provided by your Internet Service Provider
   (such as AOL), or if you use a free web host, you will not be able to get
   your feedback form working. Note that there are even some commercial
   (paid) web hosting that do not allow you to run your own scripts.

   If you are looking for a suitable web host, you need to find one that supports
   the running of PHP scripts with an installed PHP that is version 4.2 or
   above. Generally, if a commercial web host supports PHP, their PHP version
   will satisfy this requirement. Do not use free web hosts, even if they have
   PHP support, since many of them do not allow PHP scripts to send email.

   You can find a list of commercial web hosts at If you are
   curious as to which web host I use, you can find the information in my
   review at

 2. Generate a custom feedback form script
   The next thing you will need to do is to visit's Free
   Feedback Form Wizard to generate a customised feedback form script. The
   wizard can be found at

   Read through the Wizard's introductory page. Choose to create the PHP
   feedback form script. Although you can generate any of the other types of
   feedback form scripts, for the sake of simplicity, this tutorial will only focus
   on the installation and creation of a feedback form that uses the PHP
   feedback form script.

   In the next page, enter the information requested by the form. Modify the
   URLs supplied below to contain your real domain. For example, if your
   domain is "", use that instead of the
   "" given below.
     o   Email: (enter your email address)
     o   URL of Feedback Form:
     o   URL of "Thank You" Page:
     o   URL of "Error" Page:

  Under the "Advanced Options (Optional)" section, click the drop down box
  for "HTML family to use" and select "HTML". (This step is optional, so it's
  no big deal if you can't be bothered to set it.)

  Finally, read the licence agreement. If you agree to the terms, indicate it in
  the form, and click "Generate script" to continue.

  Do not close the web page that appears. Leave it open while you work on the
  next few steps.

3. Saving the script
  Start up an ASCII text editor without closing your browser. Windows users
  can simply start up Notepad, which is found in your Start menu. Click the
  Start menu, followed by the "Programs" menu item (or "All Programs" menu
  item if you use XP), the "Accessories" menu, then the "Notepad" menu item.
  If you are a Linux user, you probably already know what an ASCII editor is;
  for example, you can use "Kate", "vi, "emacs", or one of the million editors
  available on Linux. Mac users are on their own (sorry) since I have no idea
  what text editors are available on a modern Macintosh. It is important that
  you do NOT use a word processor like Office or Word or the like. If you are
  not sure where you can get an ASCII text editor, there are many free ones
  available for different platforms at

  Switch to your web browser, and locate the section that has the header
  "Feedback Form Script". Select everything in the box below. If you are
  using Windows, one easy way is to simply click your mouse somewhere in
  the box and type Ctrl+A (hold down the Ctrl key and type 'a'). Then copy the
  text you have selected to the clipboard. You can use Ctrl+C in Windows, or
  use "Edit | Copy" from the browser's menu.

  Switch back to your text editor, ie, Notepad if you are using Windows. Paste
  the contents you copied earlier. In Notepad, you can paste by using "Edit |
  Paste" from the menu. WARNING: Do not modify anything in this page. Do
  not attempt to beautify it. Do not even attempt to add a blank line. This is
  not the user-visible portion of your web page. We will come to that later.

  Save the file as "feedback.php" and quit your editor. Important: if you are
  using Notepad on Windows, please save the file as "feedback.php"
  including the quotes. If you don't add the quotes, Notepad will save the file
  as "feedback.php.txt" behind your back.

4. Publishing (uploading) the script
  To upload or publish the script so that it can be used by the pages on your
  website, you will need to use a program for transfering files, called an FTP
  client (FTP stands for File Transfer Protocol). KompoZer, up to version
  0.7.10, does not seem to be able to transfer a script file that is associated
  with a form despite what its "Publish" dialog implies. Basically, you will
  need a separate FTP client to transfer ("upload") the "feedback.php" file
  from your computer to your web host's computer, so that it can be used by
  your website.

  If you are using Windows, please refer to the following tutorial for
  instructions on how to publish the feedback.php file to your website: How to
  Publish or Upload Your Files to Your Website with FileZilla at Read the
  tutorial, follow its instructions, then return to this tutorial for the remainder
  of the steps.

  Non-Windows users will have to look for an FTP client and find out how to
  use it to upload the feedback.php file to your web server. There are
  numerous free FTP clients available for many modern operating systems.
  You can find a list of them on the Free FTP and SFTP Clients and Free
  Download Managers page on

5. Creating the feedback form web page
  By now, you should have no problem creating an ordinary web page. In fact,
  if you have been diligently doing the things mentioned in the previous
  chapter on multiple-column layouts, you will already have a four-page
  website (Home, About, Reciprocal Links, Site Map) with each page having a
  two-column layout.
Copy the layout from the other pages that you have created and create your
navigation panel as before. If you are using the two-column layout from
Chapter 4, put your cursor in the second column and type the heading
"Feedback Form" (without the quotes). You can beautify it in any way you
choose (for example, make it bigger, change the font, leave a blank line after
it, etc). We will insert the feedback form generated by the wizard below that
heading. If you are using some other layout, put the heading in the
appropriate portion of the page.

Now switch to the browser window that contains the generated code from's wizard. This time locate the section in the output
generated by the wizard that reads "HTML Code". Click in the box below
and select and copy everything.

Switch back to KompoZer. Click in the space under the "Feedback Form"
heading that you created earlier. Once you see your cursor blinking in the
appropriate spot in the second column, click the "Source" tab at the bottom
of the Window. The HTML code for your page will be displayed. Don't
move the blinking text cursor and do not click anywhere in the HTML code
portion. Select "Edit | Paste" from the menu to insert the HTML code given
by the wizard in the current location.

Click the "Normal" tab at the bottom of the screen again to view your form.
The form should be inserted in the correct portion of your page. You can
now beautify your page any way you wish.

To widen the input field for "Name", click the field (the text-entry box)
beside the words "Name:", and select "Format | Form Field Properties" from
the menu. A dialog box will appear for that field (box). Click the button
"More Properties" to expand the dialog box. The default field size as
generated by the wizard is "25". You can increase it if you want the field to
appear wider, or decrease it if you want it narrower. Note that this field size
merely sets the appearance of the box on the screen. It does not affect how
much text your visitor can type into the field. Most browsers will simply
scroll the text if the box is not wide enough for what the visitor wants to

Simlarly, you can change the size of the box underneath "Comments:". Click
the box, select "Format | Text Area Properties" and adjust the rows and
  columns to your satisfaction. As before, this change is merely cosmetic, and
  will not affect the amount of text your visitor can enter.

  The text appearing on the button can be changed as well. Right-click the
  "Send Feedback" button. That is, click the right mouse button while your
  mouse cursor is over the "Send Feedback" button. A pop-up menu will
  appear. You can either ignore it and select "Format | Form Field Properties"
  from the main menu or simply click "Form Field Properties" from the pop-
  up menu that appears. The "Field Value" line in the dialog box that appears
  should display "Send Feedback", which is the text that is shown in the
  button on the form. Change it to some other text if you wish.

  Do not change any value other than those I mentioned above. Most
  importantly, you should not modify the "Field Type" and "Field Name"
  values or the form will not work correctly.

  When you have finished making changes, save your page as "feedback.html"
  with a title "Feedback Form". You can change the title if you wish, but you
  should leave the filename as "feedback.html" since this is the name you
  supplied to the Feedback Form Wizard earlier, and the script generated relies
  on it.

6. Creating the "Thank You" and "Error" pages
  To create your "Thank You" and "Error" pages, start with the layout that you
  created for the other pages of your site and insert the navigation panel as
  usual. Then insert the appropriate text as outlined below.

  The "Thank You" page typically thanks your visitor for sending his
  comments. Its main purpose is to provide feedback to the visitor that his
  comments had been successfully submitted. You can write anything you
  wish for this page. For example, you might want to say something like
  "Thank you for your comments. If your message requires a reply, I typically
  reply within 24 hours of the receipt of the message."

  The "Error" page is shown whenever the visitor submits the form without
  filling one of the fields. For example, if he/she fails to enter an email address
  when the form is submitted, the "Error" page will be displayed instead of the
  "Thank You" page. Your error page should inform the visitor that he/she
  needs to complete all the fields in the form, and that he/she is to click the
  browser's "Back" button to go back to the form to repair the error. For
      example, a possible message that you can use for your "Error" page is
      "There were errors in the form that you submitted. Please complete all the
      requested information before submitting the form. Click the 'Back' button on
      your browser to return to the form to fix the error."

   7. Publishing the Feedback Form, Thank You and Error pages
      When you have finished designing your pages, publish them with
      KompoZer. If you have forgotten how to do so, you may want to read
      chapter 1 of the KompoZer tutorial again.

   8. Testing the Feedback Form
      When all your files have been published, you should test your feedback form
      to make sure that it works. If something goes wrong, check the Feedback
      Form Wizard FAQ (Frequently Asked Questions) for the answer. You
      should also reread this chapter of the tutorial to see if you missed anything.

Where to Go From Here
Congratulations! With this chapter, you have completed the basics of using
KompoZer to design a website. You have also created a fully functional site,
complete with main page, an "About Us" page, a "Reciprocal Links" page, a "Site
Map" and a working "Feedback Form". More importantly, you now have the
knowledge to use KompoZer to create, design and publish new websites as and
when you wish.
How to Register Your Own Domain Name
by Christopher Heng,

If you have a web site, you should seriously consider registering your own domain
name. A domain name is a name like "          " or "", which you
can use to refer to your website. Note that you do not have to be a company or
organisation ("organization" in US English) to register a domain name. Any
individual can do it too.

Importance of a Domain Name
There are a number of good reasons for having a domain name:

      If you ever change your web host, your domain name goes with you. Your
       regular visitors or customers who knew your site name as (for example) would not have to be informed about
       a change of web address (also known as "URL"). They would simply type
       your domain name and they'd be brought to your new site.
      If you are a business, a domain name gives you credibility. Few people will
       be willing to do business with a company that does not have its own domain
      If you get a domain name that describes your company's business or name,
       people can remember the name easily and can return to your site without
       having to consult their documents. In fact, if you get a good name that
       describes your product or service, you might even get people who were
       trying their luck by typing "" in their browser.
      If you want good sponsors (advertisers) for your website, a domain name is
       usually helpful. It tends to give your website an aura of respectibility.

Registration Overview
Getting a domain name involves registering the name you want with an
organisation called ICANN through a domain name registrar. For example, if you
choose a name like "", you will have to go to a registrar, pay a
registration fee that costs around US$10 to US$35 for that name. That will give
you the right to the name for a year, and you will have to renew it annually for
(usually) the same amount per annum.
Some web hosts will register it and pay for the name for free (usually only the
commercial web hosts), while others will do it for you but you'll have to foot the
registrar fees.

My personal preference is to register the name directly with a domain name
registrar rather than through my web host. I've heard stories, in the past, of less-
than-reputable web hosts that registered the domain under their own name, making
them the owner of the domain rather than you (although I don't know if such web
hosts still exist today). Registering with a domain name registrar allows me to
make sure that I am registered as the owner, the administrative and technical
contacts. Being the owner is vital — if someone else places himself as the owner
(such as your web host), he can always decide to charge you some exorbitant fee
for the use of the name later, and there is little you can do. The various other
contacts are less vital, but may still play important roles, depending on your
registrar. For example, for some registrars, the administrative contact's approval is
required before a domain name is transferred out of a web host (or at least, it used
to be). If he/she cannot be contacted, the technical contact is used.

Domain names disappear extremely fast. Many people claim that all the good
domain names are gone. I doubt that — but it is probably true that most good
domain names that are descriptive of products and services have been taken. If you
want a domain name for your site, I suggest you act now, or face the anguish of
having lost that name later. After all, US$10 (more or less) for a year's ownership
of the name is pretty cheap when you realise that you're cornering a good name for
your website.

Step By Step Instructions
If you want to register a domain name, here's what you need to do. Please read it
all before acting.

      Think of a few good domain names that you'd like to use. It won't do to
       think of only one — it might already be taken (it probably is!). You can find
       some tips on choosing a good domain name from my article, Tips on
       Choosing a Domain Name, at

       There's more to it than meets the eye.
      You will need either a credit card or a PayPal account to pay for the domain.
       This is a requirement of most if not all registrars. It will allow you to claim
       and get the domain name immediately on application. This is not an option
      If you already have a web host, obtain from them the names of their primary
       and secondary nameservers. Don't worry if you don't understand what these
       things mean. Just save the information somewhere. The information can
       usually be obtained from their FAQs or other documentation on their site,
       usually under a category like "domain name" or "DNS" or "domain name
       transfer" and the like. If you can't find it, email them. You'll need the
       information to point your domain name to your website after you buy your
       domain. Don't worry if you don't have a web host yet. Just read on.
      If you do not have a web host, you can always allow the registrar to you to
       park your domain name at a temporary website specially set up for you. This
       way you can quickly secure your domain name before it's too late and still
       take your time to set up the other aspects of your site. As far as I can tell,
       most registrars (or probably all) automatically park your domain by default
       whether you ask them to or not, so if this is your situation, you probably
       don't have to do anything special to get it done. Some of those registrars also
       provide you with a free email address at your own domain name while it is
       parked at their site, like (where "" is your

List of Domain Name Registrars
There are numerous domain name registrars. Listed below are just a few, along
with my comments, if I know anything about them. Note that the domain name
industry is highly competitive, with prices wildly fluctuating throughout the year,
every year, so it's impossible to really mention accurate prices below unless I
spend all my time updating this page. Please check their sites for the latest rates.
(Note: all prices are in US dollars.)

      World's Largest Registrar - — This extremely popular
       registrar (possibly the biggest today) offers .com domain names for $9.99
       (plus 20 cents) per year ($6.99 plus 20 cents if you transfer from another
       registrar). They have a web interface to manage your domains, free web
       redirection (where people who visit your domain will get transferred to
       another web address of your choice), free starter web page, free parked page
       or free "for sale" page, and an optional private domain registration where
       your domain is registered in the name of a proxy company. They offer .com,
       .us, .biz, .info, .net, .org, .ws, .name, .tv,, and Note
       that (as with all registrars) the exact price varies depending on which domain
       you are registering (for example some domain extensions are more
       expensive than others). Both credit card and PayPal payments are accepted.
    — This fairly popular registrar provides fairly cheap domain
       prices ($15.75 plus 20 cents per domain), a convenient web interface to
       manage your domains, an optional privacy facility where your domain name
       is registered in the name of a proxy company, etc. They offer .com, .net,
       .org, .biz, .info, .us, .ca, .tv, .name, .cc, .de, .sr, .md,,
       domains, etc. If you're transferring a domain here from other registrars, the
       price is even cheaper ($6.99 plus 20 cents). Both credit card and PayPal
       payments are accepted here.
    — This domain name registrar has been in business for a very
       long time: they were one of the biggest around when I started buying my
       first domains. They are currently running an offer (only via the above link)
       where they charge $9.99 for the first year for a domain name with a free
       business email account. Domains qualifying for this offer include .com, .net,
       .org, .biz, .us and .info. Country-specific domains have different prices.
       (Note: you'll need to use the above link to get the $9.99 special offer. If you
       access their site in some other way, you may end up with their regular price
       of around $37, depending on the number of years you register.)
      1&1 Internet — This is primarily a large web host that is also a domain
       name registrar. You are charged $6.99 for .com, .org, .net, .us domains.
       They also offer .info domains for $0.99 (first year only) and .biz at $8.99.
       The fee includes private domain registration, which means that your
       particulars are hidden from public view (done by registering the domain in
       the name of a proxy company). You also get a free email account, DNS
       management, domain forwarding and masking, and a starter website with
       each domain. Both credit card and PayPal payments are accepted by this

In addition, as mentioned earlier, a number of commercial web hosts will give you
a free domain name if you are hosting with them, as will many (if not all) of the
registrars above.

After You Register Your Domain Name
If you're not sure what to do after you register your domain name, please read the
How to Make / Create Your Own Website: The Beginner's A-Z Guide.
Once you decide, you should not procrastinate. I've lost more than one domain
name by procrastinating (I lost the latest one by only one day). After all, at the
price you're paying, it works out to be less than $1 a month for the majority of the

What are HTML, CSS, JavaScript, PHP
and Perl? Do I Need to Learn Them to
Create a Website?
by Christopher Heng,

I'm sometimes asked by visitors thinking of starting their own website what terms
like "HTML", "CSS", "JavaScript", "PHP" and "Perl" mean. Or, on occasion, their
questions on some other topic show that they have misunderstood the meaning of
these words. This article explains the terms and discusses what knowledge is
actually necessary for creating a website.

What is HTML?
When you write a normal document using a word processor like Microsoft
Word/Office, your text is saved in a file with a special format. It is not simply
saved as the string of words you typed since the document needs to preserve things
like the font you chose, the size of the text, which words are in bold, which italics,
and so on. The special format includes not only your words, but all these extra
information so that the next time Word opens your document, it can display the
document with the exact appearance you created earlier.

In the same way, web pages are simply strings of words put in a special format that
web browsers are able to display. While the format of Word documents is simply
called "Word format" (or "doc format"), loosely speaking, one might say that web
pages are formatted using "HTML". Take the paragraph of text in the box below
for example:

This is an example paragraph to illustrate what HTML is, for the purpose of
explaining common terms like HTML, JavaScript and PHP.
If you were to peek into the raw code for the above words, you will see the

This is an example paragraph to illustrate what HTML is, for the purpose of <a
common terms like HTML, JavaScript and PHP</a>.

Notice that it is more or less like the text given earlier, except that there is
additional information embedded. For example, the portion that says <a
href=""> (which I placed in a
different font above to make it easier to spot) tells the web browser that what
follows, until </a> is reached, is to be regarded as a link pointing at the web address

When the web browser sees this information, it makes the words "explaining
common terms like... [etc]" appear as the blue underlined text that represents a
clickable link. The rest of the text is just displayed as-is.

Do I Need to Learn HTML to Start My Own Website?
Just as you do not have to know the nitty-gritty of the "doc format" in order to
create a document in Microsoft Word, learning HTML is optional for creating

You can simply use a web editor to create your website, the same way you use
Word to create a normal document. The web editor allows you to type your text in
the usual way, underline your text, make it bold, add pictures, and so on, using an
easy-to-use interface. Tutorials for the most-used web editors can be found on in the following pages:

      How to Design a Website with Dreamweaver CS5 — for the commercial
       Adobe Dreamweaver editor
      How to Create a Website with Dreamweaver CS4 — for the older version of
      How to Create a Website with Dreamweaver CS3 — for an even older
       version of Dreamweaver
      How to Design and Publish Your Website with KompoZer — for the free
       KompoZer editor
      How to Design and Publish Your Website with Nvu — for the free Nvu
You should also read How to Make / Create Your Own Website: The Beginner's
A-Z Guide because there are other things involved in making your own website
besides designing the web pages.

For those who are curious, "HTML" stands for "Hypertext Markup Language".
Basically, it's just a means for formatting your document. There's nothing esoteric
or fancy about it, just as there's nothing special about the Word format or any other
document format.

What is CSS?
Cascading Style Sheets, or CSS, allow you to specify things like the font you want
on your page, the size of your text, whether the page is to have 2 columns, whether
your text is to be in bold or italics, and so on. In other words, it is the part that lets
you control the appearance of your web page.

You may be used to the Microsoft Word "doc" format, where everything from the
text you type to the appearance of the document is specified in a single file,
transparent to you. On the web, the raw information is specified in HTML and
most of the appearance is determined by the CSS.

If you use a web editor like those I mentioned above, you won't have to bother with
which parts goes into the HTML portion and which parts goes into the CSS
portion. Everything will be taken care of by the editor.

For those who like to know the gory details, you can read my Introduction To
Cascading Style Sheets (CSS). However, if you are using a web editor, you don't
need that information since the editor does everything for you, so don't worry if
that article is too technical. (It wasn't written for the absolute newcomer.)

What are JavaScript, PHP and Perl?
Since the HTML/CSS combination is analogous to the data found in a Word
document, it is good only for displaying information.

If you want your web pages to do different things depending on the situation, you
will need a programming language. For example, some websites want to provide a
membership facility where people can log into the site, and access certain
information. Other sites provide a feedback form so that visitors can contact them.
All these things require facilities that a simple document format cannot do.
JavaScript, PHP and Perl are three of the most commonly-used programming
languages on the Internet. They are used by websites to carry out more
complicated operations.

Programs written in JavaScript run in the web browser itself, so if your website has
a JavaScript program, the program will be automatically fetched by your visitor's
browser and executed on his/her computer. PHP and Perl programs, on the other
hand, run on the computer where your website is located, that is, on your web
host's computer. After the PHP or Perl program does what it needs to do, it sends
the result to the visitor's web browser, which merely displays the results.

Apart from the above difference, from the point of view of a non-programmer,
there's not much point asking what the difference is between the languages, say,
between PHP and Perl. It would be like asking what the difference is between
English and German, or some other human language. They're just different
languages that you can use to write web-based programs. Each computer language
has its own strengths and weaknesses.

Learning a programming language is vastly different from creating a website
whether with a web editor or directly in HTML. Although I have tutorials for
things like learning to write programs in PHP (and the other languages), many
people will find programming a difficult undertaking, unless they already have a
programming background or an inclination towards programming.

For the most part, it is not necessary to learn JavaScript, PHP or Perl to create your
website. In fact, even if you want your site to do complicated things, you can often
find pre-written programs to do the job for you without your having to dabble in
programming. For example, if you need a feedback form on your website, just use's Feedback Form Wizard to generate one yourself. It will create
a customized script for you — all you need is to plug and play. (Note: if you're
using one of my web editor tutorial series above, this is taught in one of the later

Other pre-written programs can be found in the relevant sections on There are too many pages on that site to list here, so you
should just go to one of the following index pages and look for the program you
need. (Note: the word "script" in the context below merely means "program".)

      Free PHP Scripts (
      Free Perl Scripts (
      Free JavaScripts (
      More Free JavaScripts (

In general, when you're looking for a script, you don't really have to bother with
the language, ie, whether PHP, Perl or JavaScript. Just look for the type of script
you want. If you use a commercial web host, both PHP and Perl are usually
supported, so the exact language doesn't really matter (although PHP scripts tend to
be easier for novices to install). As for JavaScripts , don't worry. Since JavaScript
programs run on your visitors' computers (in their browsers), support from the web
host isn't needed (unless you use one of those free web hosts that delete JavaScripts
from your pages).

It's Not As Difficult As You Imagine
Creating a website is not as difficult as some people imagine. Yes, you will have to
learn how to use new software (like a web editor), but some people hit a mental
block because they are confronted with obscure jargon like "HTML", "CSS",
"JavaScript" (etc) that are used everywhere. But as you can see, these terms aren't
really the gigantic obstacles they appear to be at first. And when using a good web
editor and tutorial, you're practically insulated from the technical hurdles and
challenges that is suggested by these terms.

Which Web Host Do You Recommend?
by Christopher Heng,
Updated: 24 April 2008.

I worry a lot about this page. I originally set it up to cut down the amount of email
I receive at asking me to recommend a web host. However, over
time, I have found that I had to revise this page numerous times as a result of
changes in the web hosting scene. The worst thing is finding out that the quality of
hosting at the hosts I had earlier mentioned here had deteriorated. Naturally those
hosts are no longer listed below.

The best way to treat this page is to regard the comments I make here about web
hosts as merely the opinions of one person given at a particular point in time. I
recommend that you investigate thoroughly any host before signing up. You can
find a list of things you should look for in a web host in my other article How to
Choose a Web Host.
Note that I only mention commercial and free web hosts providing shared hosting
(where yours is not the only website on a particular machine). Since I have no
direct experience with leasing a dedicated server or getting a virtual private server
(VPS), this page will not mention any companies providing such facilities.

Commercial Web Hosts: My Personal Favourite
At present, is hosted at FutureQuest, and indeed has been on this
host since 2000. So far, I have found them to be reliable, honest and competent,
with the people at the helm appearing to be people who understand the software
and issues that surround running web servers. Their prices are not the cheapest
around, but I find that they are well worth the price. The old adage, "you get what
you pay for", seems most appropriate in their case, and I would rather pay that few
extra dollars for their reliability and competence than to find my sites down for
long periods at a stretch, costing me more money than the few bucks I can save in
hosting fees.

Things I like about them include the automatic availability of a secure shell
account (SSH) without requiring me to ask for it, numerous Apache modules
(including the important mod_rewrite module), Perl modules and other developer
facilities. Also, no other customer with an account on the same server as you can
read and copy your scripts by simply telnetting to their account and changing to
your directory to read/copy them (something which, you might be surprised to
learn, you can do on many other web hosts).

And then there are the intangibles, which are hard to quantify. For example, there
are things like their competence which has been demonstrated in the way they
manage their servers, plan ahead, etc. I also like their honesty, even in things like
automatically refunding for downtimes that exceed their 99.5% uptime guarantee
(not that there's much downtime) — something which many hosts not only require
you to prove (very hard to do) but often even deny. It's little things like these that
increase my confidence in a host and make me willing to trust my website (and
credit card number) with them.

Of course there are numerous other features in their hosting packages, but those are
fairly standard among most other hosts (like a control panel to manage your email
addresses, PHP, Perl, etc), so I'm not going to bother to mention them here. In fact,
simply doing a feature versus price comparison of web hosts is not really very
useful since most people only use a subset of all features offered (and web hosts
know it, and so bloat their feature list to get customers). Far more important, in my
opinion, are the above things.

Cheaper Web Hosts
Very often, when people ask me about web hosting, they want to know if I know
any cheap but good web host. This particularly applies to those who are just
starting their web site and are not willing to sink a lot of money into it.

My problem with this question is that although I'm willing to answer it, my
experience with cheap web hosts have not been entirely favourable, so it is difficult
to recommend the cheap ones where I have actually placed sites on.

As such, at this point in time, if you really want dirt cheap hosting, you will have
to evaluate them for yourself. Sorry. There are a number listed in's Annotated List of Budget Web Hosts.

Free Web Hosts
I previously had a section mentioning free web hosts that I had found noteworthy.
However, as I have not had a major site hosted on a free web host since 1999, my
knowledge of good free web hosts quickly became dated, and is now hopelessly
obsolete. Since the free web hosting scene changes even more rapidly than the
commercial web hosting scene, with web hosts disappearing every now and then
(sometimes even within the month they start), it is best to check out (and evaluate)
for yourself any free web host you come across. A number of them can be found
on's Free Web Hosts page.

Before you rush out to sign up for a free web host, you should read my article on
All Those Disappearing Free Web Hosts.

Price and Web Hosting
Price is always a factor in choosing web hosts. You would be fooling yourself if
you told yourself otherwise (unless you have lots of money to burn). However,
higher prices do not mean that you'll get a good web host. Higher prices do,
however, mean that you have a better chance of getting good support, since at least
they will have the money to hire more staff if they want to.
There is always a trade-off. At least for me. There's no way I can afford to put all
my sites on my "ideal" web hosts. For sites that are not so critical, I am willing to
pay a cheaper price at the cost of a little more "down" time and inconvenience than
my more important sites.

In general, if you run a business on the web, you will not want to take that kind of
risk. Bad support and "down" times have a habit of occurring at the worst possible
moments (such as during your peak ordering seasons).

One (cheap) host (not listed above) that used to house one of my non-critical
"play" sites has had over a period of a few months numerous problems: repeated
periods of "down" times (sometimes running even for hours with them not only
unaware of the situation but also unreachable), email problems (their email system
was down so mail from my visitors could not reach me), FTP problems, and so on.
If you're running a business, I suggest that you weigh the costs of your site being
down against the cost of paying a few dollars extra per month for a good web host.
When your site is "down", you will lose your sales and customers for that period. If
you're earning from your website, it may be worth your while to pay those extra
dollars. After all, as long as your site is "up", you stand the chance of getting
additional sales which will more than make up for the additional cost of a few
bucks. Remember: no site, no sale.

As for free web hosts: you just got to swallow whatever you're dished out. Support
is often non-existent for free web hosts. It never ceases to amaze me to hear from
people who complain of free web hosts that have lousy service. You didn't pay a
cent, so what do you expect? Frankly, I don't recommend that you run a business
site on a free web host. Hobby sites and personal sites are probably okay. You
might still want to consider getting your own domain name though. If you don't
know why this is so, see my article, My Biggest Website Regrets.

My personal policy, however, is that if it's an important site, don't be penny-wise
and pound-foolish. Saving one or two dollars per month is not worth the loss of a
few hundred or a few thousand dollars when your site goes down.

Other Issues in Web Hosting
So that you do not get tricked by web hosts who are less than upfront about their
packages and practices, you may also want to read these other articles:

      The Fine Print in Web Hosting: Resource Usage Limits
      The Real Meaning of "Unlimited" in Web Hosting

And Finally...
Best wishes for your site!

Using Float to Define 2 Columns
While there are many methods of using CSS to create a two-column site, this
tutorial uses the float property to move one column to the side of another. In some
ways, this method is more flexible than the absolute positioning method currently
used on It also allows you to add optional header and footer
bars that span both columns if you wish.

The two-column CSS given here has been tested to work on Internet Explorer 6
and 7, Opera, Safari and Firefox.

The HTML Code for a Basic 2 Column Website
The HTML part of the code is fairly simple. You basically need 2 div blocks, one
for each column.

<div id="container">
 <div id="navbar">Navigation</div>
 <div id="content">Content here</div>

The words "Navigation" and "Content here" are merely placeholders for the
navigation side bar and main content. You should remove those words when you
put your real content. The "container" div block is merely a block enclosing both
the two columns, and is useful if you want to apply certain styles that affect both
columns as a unit.

The CSS Code for a Basic 2 Column Website Using a
Fluid or Liquid Layout (Relative Widths)
If you want a website where your page widths expand or contract according to how
large your visitor's browser window is, you should use relative widths for your
columns. At the time I write this, uses such a fluid layout as
well. For example, if you change the size of your browser window, your browser
will reformat this article as far as possible to fit within the window (unless you
resize it too small).

The CSS code for this is simple.

#content {
  margin-left: 20%;
#navbar {
  float: left;
  width: 20%;

The CSS code has to go either into the style section of your web page or an external
style sheet. Here's how to customize the code:

   1. Changing the Width
       The above style sets the side column for your navigation bar to 20% of the
       width of the browser window. Consequently, the left margin of the column
       containing your content is also set to start at 20% from the left edge of the
       browser window, otherwise your content will overlap with your navigation

       If you prefer that the width of the side column be wider or narrower, just
       change both the margin-left and width properties to the same value.

       You can also use pixels for the width instead of a percentage. For example,
       to constrain your navigation bar column to 200 pixels, change each of the
       20% values to 200px instead. The use of pixels is useful if you have a picture
       (such as a logo) that you want to place in the side column and don't want the
       column to be narrower than your image.

   2. How to Put the Navigation Bar on the Right
       The code above puts the navigation menu in the left column, just like what
       you see on this page. If you prefer that the navigation menu be on the right,
       as is commonly found in blogs, change the code so that it looks like the

       #content {
         margin-right: 20% ;
       #navbar {
         float: right ;
         width: 20% ;

       Again, change "20%" to a value appropriate for your site.

The CSS Code for a Basic 2 Column Website Using a
Fixed Layout
Although, at this point in time, I still use a relative width layout, or liquid layout as
some people like to call it, the disadvantages that I mentioned in my article The
Great Fixed Vs Relative Width Page Layout Debate are becoming more acute with
the huge monitor resolutions that are now available.

As a result, some people prefer to fix the width of their window to some reasonable
value, like 800 pixels or 1024 pixels. To use such a fixed layout for your site, set a
width for the block containing both columns. Here's where the empty container
DIV that you created earlier comes in useful.

The following CSS code creates a page with a fixed width of 800 pixels.

#container {
  width: 800px ;
#content {
  margin-left: 200px;
#navbar {
  float: left;
  width: 200px;

However, if you do the above, and your site appears in a browser window wider
than 800 pixels, you will find that both your columns will be flushed to the left of
the window, leaving a sea of white space on the right of the screen. What you
want, in such a case, is for both of your columns to be centred in the browser

The standards-compliant way of centering a block is given below:

#container {
  width: 800px ;
  margin-left: auto ;
  margin-right: auto ;

For this code to work in IE 6 and 7, you must have a valid Document Type
Definition ("DTD"), or DOCTYPE, for your web page to avoid triggering IE 6/7's
backward-compatibility mode (also known as Quirks mode to most webmasters).
For example, the HTML 4.01 transitional DTD is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

The left and right margins are set to auto which causes standards-compliant
browsers to give them both an equal value, effectively centering the block.

How to Put a Top Header or a Footer Spanning Both
Columns on a 2 Column Site
Some sites have a top header spanning both columns. They may either place the
site's logo or name here, or, perhaps even banner advertisements or both. In the
same way, some sites also include a footer that span both columns. Among other
things, the footer may be used for things like copyright notices.

To use a header and footer using this 2-column layout, modify your HTML code as

<div id="layout">
 <div id="header">Top Header</div>
 <div id="navbar">Navigation</div>
 <div id="content">Content here</div>
 <div id="footer">Bottom Footer</div>

Add the following CSS code to your existing style sheet. Simply place it after the
styles you created above.
#footer {
            clear: both ;

If you want the text in your header to be centred, add the following. Otherwise,
there's no need to define a header style.

#header {
         text-align: center ;

The same text-align property can be added to the footer to centre the text there as
well, if you wish.

Miscellaneous Matters
    1. Top Line Alignment Issues
       You will probably find that IE 6 and 7 do not align the top lines of your left
       and right columns in the same way as all the other browsers. If your site
       design happens to be alignment-sensitive, you may want to use the
       conditional includes described in the article How to Use Different CSS Style
       Sheets For Different Browsers (and How to Hide CSS Code from Older
       Browsers) to position your text specifically for those browsers. It's best to
       specifically position the code for IE 6 and 7 alone (and not all IE versions),
       since Microsoft has promised that IE 8 will have improved CSS standards
       compliance, so if you position it for all IE versions, your site design will
       break in IE 8 and above.

    2. Text and Graphics Go Right to the Edge
       The code given above merely provides the basic layout. As it stands, your
       text and graphics will go right to the edge of each column. One way to make
       some space between the text and the edges is to add the following property
       to your content, navbar, header and footer DIV selectors.

       padding: 4px ;

       The exact width of the padding is of course up to you. The 4px given here is
       just an example.
With the CSS code given above, you're now on your way to creating your 2-
column website. You may also wish to check out the CSS navigation menu bar
wizard as well, if you wish to add a CSS-driven navigation menu bar to your side
panel that has mouse-over hover effects.

How to Point a Domain Name to Your
Website (Or What to Do After Buying Your
Domain Name)
by Christopher Heng,

Following my article on What Does It Mean to Park a Domain Name? Domain Name Parking
Explained, I received a few queries from visitors on how they can associate their newly acquired
domain name with their website. The visitors haven't actually designed any website yet, but they
have already signed up with a web host and are ready to "transfer" (their term, not mine) their
domain there. This article describes how you can point that new domain name to your website.

Assumptions Made in This Article
   1. You Already Have a Domain Name

       Since the people asking this question have already bought their own domain name, I will
       proceed on that assumption. If this is not true for you, please read the article How to
       Register Your Own Domain Name to find out how you can go about getting your own

   2. You Already Have a Web Hosting Account

       A web host is basically a company that has specially configured computers that are
       permanently connected to the Internet. They allow you to place your website on their
       system (usually because you are paying them a monthly fee to let you do this) so that it
       can be viewed by others on the Internet.

       If you don't have a web host, you'll need to sign up for one before you can point your
       domain anywhere. For this article to be relevant, your web host must allow you to use
    your own domain name for your site, which is the case for all commercial web hosts (as
    far as I know). Those wondering which web host I use myself may read my Which Web
    Host Do You Recommend? page.

Steps to Associating Your Domain Name with Your Website
  1. Get Your Web Host's Name Servers

    The first thing you'll need to do is to find out the list of name servers used by your web

    "Name servers", or "DNS servers", loosely speaking, are the things that will translate
    your domain name to the actual location of your website. A little example will make this
    clear. Let's say you type a domain like "" into your web browser. In
    order to display the website associated with, the browser needs to
    know the real address of the site. Appearances to the contrary, the Internet does not
    actually use names for addresses, but series of numbers, like, called IP
    addresses. Name servers translate the domain name you and I use to the actual numeric IP
    address used by the machines on the Internet.

    When you sign up with a commercial web host, they will configure their name servers so
    that it will furnish your website's real IP address when there is a query for your domain
    name. As such, in order for your domain to be found on the Internet, you must link your
    domain to your web host's name servers.

    (There's a bit more to this than that, but I'm sure you're not here for a long boring
    technical lecture on how things operate on the Internet. Suffice it to say, in order for your
    domain name to resolve, a lot of different name servers are involved, including your
    Internet provider's name servers, your registrar's name servers, your web host's name
    servers, etc. Don't worry. Much of it is automatic. All you need to do to make it all work
    is given below.)

    The easiest (though not necessarily fastest) way to find out the name servers used by your
    web host for your domain is to ask them. A faster way is to look for the information
    yourself in either the email sent to you by your host when you first signed up with them,
    or from the documentation on your web host's site. If you have no idea where to get the
    information, contact your web host and ask them for the "DNS servers" or "name servers"
    to use for your domain.

    The list of name servers will often look like,, and
    so on, where "" will probably be replaced by some other domain name used
    by your web host for their servers.

    Your web host may give you 2 or more name server addresses. Note down all these
    names. Better still, keep the email or web page containing these names open on your
  computer so that you can cut and paste them later. You'll need to enter these names,
  exactly as given, into your registrar's system.

2. Enter the Name Servers into Your Registrar's Settings for Your Domain

  Once you have the list of name servers, go to your domain name registrar and log into
  their system. You will obviously need the login name and password that you created
  when you first registered your domain.

  Once logged in, you will need to look for some option to either set your domain's name
  servers or change them. Every registrar has a different way of doing this, and there is no
  standard method, so it's not possible for me to give you a detailed blow-by-blow account
  of how to get to the appropriate screen. (Even if I did, my description will quickly
  become out-of-date since registrars, like all webmasters, change their site design every
  now and then.) What I'll do instead is give you some idea of what to look for.

  In general, try the following to get to the page on your registrar's site that lets you modify
  the name servers:

     o   Find a way to list all your domains in the registrar's site. Sometimes this can be
         found in a "My Domains" page, or a "Domain Manager" page, or something
         similarly named.
     o   Select the domains for which you want to set the name servers. Sometimes this
         involves checking a box beside your domain name in the list of names.
         Alternatively, if you only have one domain name, you may even be able to click
         the domain name to get to the settings screen.
     o   Some registrars have a "Manage DNS" menu link, or a "DNS" button, or a
         "Nameservers" button. If you see such a link or button, that's probably the one
         that you will need to click. Basically look for things that say "DNS" or "Name
         Servers" or "Nameservers", whether to "set" it or "change" it, or "manage" it or
         some other thing.

  Once you manage to find the correct page to change your name servers, you will
  probably see a form that lets you enter things like your "Primary Name Server",
  "Secondary Name Server", "Tertiary Name Server" and maybe even more (like a fourth,
  fifth and sixth name server as well). The exact words used may not be the same, but it
  should mean basically your first name server, second name server, and so on.

  Put your first name server from your list, usually the name beginning with "ns1", into the
  "Primary Name Server" field. Then type your second name server, the name beginning
  with "ns2", into the "Secondary Name Server" field. And so on. A domain name should
  have at least 2 name servers associated with it. Some web hosts give you more, others
  only 2. Some registrars allow you to enter up to 6 names, others only 2. If you only have
  2 nameservers to enter, but your registrar gives you 6 fields, just enter the first 2 and
  leave the other fields blank. If you have 3 nameservers to enter, but your registrar only
  allows you to enter 2, just enter the 2. Don't worry about the fields you didn't get to use,
       or the extra name servers that your web host provided that you couldn't enter. Your
       domain will work fine without those extras. They are there to provide a bit of
       redundancy, so that your site will still work if the first name server fails.

       If you cannot find the place to set your name servers, or you don't want to just blunder
       around the registrar's website looking for the correct option to try, look for the "Help" or
       "FAQ" documentation on your registrar's site. This is such a basic procedure that
       everyone needs to do that they are likely to have some sort of guide on their site, if only
       to avoid having to answer the same question over and over again from their customers.

       At worst, if you are completely lost, and dare not poke around in the registrar's site
       because you're afraid you'll change something you shouldn't, write to the registrar to ask
       them for help. Don't expect a fast reply though. Some of them take days to reply, and
       often only to point you to the relevant documentation on their site. As is the case for
       many other things, if you want something done fast, you'll need to figure it out yourself.
       Hopefully the tips in this section will give you enough information so that you know
       what links/buttons to look for and click.

Once you've set your name servers, you're done. Yes, you read that right. That's all there is to it.
You'll have to wait a bit, though, before you can access your website using your domain name.
Just because you set it at your registrar level doesn't mean that the rest of the Internet knows your
domain has a new address. It takes a while, sometimes up to 2 or more days for every machine in
the world to catch up with the changes.

To top