How to use HTML, Build Your Website

learn how to design, build, market and profit online

Site Menu

 

Learn How to use HTML and HTML Templates - Lesson 5

One of the great things about the Web is how easy it is to look at someone else's HTML code. You can peek at the code for any site you visit by going there and choosing Source or Page Source (depending on the browser) from your browser's View menu.

This is a great way to learn the finer points of HTML. There have been plenty of times when I've gone to a site that I liked, but didn't know how it was made, so I looked at the HTML and learned some new tricks. Once you've got the basics of HTML down, you might want to look at the source code of some pages that you like or that you're confused about, and see what's going on behind the scenes. But, remember, don't be a thief! Some people take things too far and simply steal other people's code and use it for themselves. Naturally, they change some of the text and colours around but it is a lot less work than building a site from the ground up. It may be easier but it can get you into a lot of trouble down the track.

The good news is that there are some people who make HTML files that they want you to copy/purchase and change around for your own web site. These are called HTML templates and can be great time savers. They fill out all the basic HTML code for a site, allowing you to just have to worry about the content. Templates range from free to hundreds of dollars. Some hosting companies, like the one we recommend, offer HTML templates for free.

If you don't have time now to learn HTML fully, but would like to at some stage, templates offer a great alternative to site building software. To find them just search for 'HTML templates' at Google.

Learning HTML

Since there are plenty of fantastic web sites out there that have complete guides and tutorials we won't duplicate all that effort. Instead, the purpose of this lesson it to provide you with a quick look at some of the basics so you will get an idea of what is to come. If you want more detailed comprehensive information why not try the following recommended sites or just search for 'HTML tutorial' with Google.

Writing HTML: A Tutorial for Creating Web Pages

This HTML tutorial introduces you to HTML syntax and then takes you step by step through the process of creating a web site about volcanoes! Downloadable and also printer friendly. Great stuff!

NCSA (at UIUC) Beginner's Guide to HTML

A fantastic introductory site that will also let you download the material so you can study offline. Highly recommended.

HTML Basics

HTML is just text that describes a web page. A HTML file is a page of text, and you can use pretty much anything to edit it with (notepad, wordpad, etc).

HTML contains the instructions that the browser will use to display your web page. HTML tells the browser where to put the text, the pictures, links and so on. It does this by using tags.

Tags

A tag is just letters or words between two brackets, for example <tag>.

There are a lot of tags and learning HTML consists of learning how to use all these tags.

A command in a HTML file consists of an opening and a closing tag.

For example, <tag> put some value in here </tag>

You will notice that the closing tag </tag> has a slash before the tag name. This lets the browser know that we are finished with the tag.

For example, let's say you wanted to underline some text on your web page. You would find the tag for underline: <u> and then create an entry in your text file like the following,

    <u>This text is underlined</u>

Simple, huh?!

First Web Page

Let's look at creating your first web page.

Open up a text editor like notepad (Start->Programs->Accessories->Notepad). Enter in the following text:

    <html>
      <head>
        <title> My Web Site Title </title>
      </head> <body> My first site, lalala </body>
    </html>

Save the file as 'index.html'. Note, all HTML files that you create should be save with the file extension .html.

Now open it up using your web browser.

Congratulations! Your first site should be displayed.

You would have noticed that we start the file off with the tag <html> and end it with </html>, this lets the browser know that it is about to read a HTML file and when that file is complete.

Tags make use of things called modifiers. These control the attributes of a tag. For example, if you change the body tag in your sample file to the following it should display your text as yellow on a red background.

<body bgcolor="red" text="yellow">

Tables

Tables are the foundations of websites. The following example will display a table in your web browser:

    <html>
      <head>
        <title> My Web Site Title </title>
      </head> <body> <table>
        <tr>
          <td>Cell 1</td> <td>Cell 2</td>
        </tr> <tr>
          <td>Cell 3</td> <td>Cell 4</td>
        </tr>
      </table> </body>
    </html>

The table tag has many modifiers that allow you to change the size and appearance of the table. For example,

<table width="500" border=1>

The centre tag can also be used as a tag modifier, for example:

<table align=center>: Everything in the table will be centred.

The valign tag modifier can be used to alter the vertical alignment, for example:

<table align=center valign=bottom>

The colspan tag modifier can be used in tables to stretch a row to span over a number of columns, for example:

<td colspan=2>Stretch over two columns</td>

Similarly, rowspan can be used to merge columns.

Useful Tags

Here are some other tags that you might find useful:

<!---- Comments go here ----> This tag allows you to place comments about your web site for your own reference within the source code.

<center> ... </center>: Everything between these two tags is centred when displayed.

Images

The img src tag is used to insert images into a web page. For example, to insert the E-business starter logo into a table you would do the following:

<table> <tr> <td><img src="http://www.ebusinessstarter.com/images/title.jpg" width=700></td> </tr> </table>

For your own web site and images you would just change the source to be where you had uploaded your image.

Links

The link tag another important one. It allows you to link to other sites from your own. The link tag looks like this:

<a href="link">Insert what you want to call the link here</a>

For example, you could link to the E-business Starter home page with the following:

<a href="http://www.ebusinessstarter.com">E-Business Starter</a>

Well, that is all we are going to cover on HTML. Remember to visit our recommended tutorials if you would like a more in-depth study.

Sitemap and Robots.txt

Robots.txt is a plain text file located in the root directory of your server. Web robots read it before they fetch a document. This is a key element in the directory structure. When the site is deployed, you will need to have this text file in the root of the site. Google robots.txt information.

Next, lets add the sitemap.xml to the root directory. Visit this site to generate a file for your site.

Conclusion

Congratulations on completing the build phase of your e-business website. Next it is time to start bringing potential customers to your website. Let's look at marketing!