Exit tutorial


HTML Tutorial
Starting Your Home Page
What is HTML And Why Is It So Good?

HTML stands for the HyperText Markup Language. HTML is the major language of the World Wide Web, which is the graphical part of the Internet. Most web sites and web pages are written in HTML. Some of the advantages of the format are that:

  • HTML files are plain text files, and by implication simple to create and edit.
  • HTML has a simple structure and syntax to follow.
  • HTML is a universal format. It can be composed and edited on any type of computer hardware.
  • HTML is platform independent which means that it can be written and viewed on any type of operating system...Windows, Mac, UNIX/Linux or whatever.
  • HTML is a flexible multimedia delivery medium. It gives you the ability to combine text, images, sounds, and video in one format.
  • HTML Files can be easily linked together using hyperlinks for fast and simple site construction and navigation.
  • HTML files are ideal as a local document format. It is not essential to publish your files to the Internet if they are only for your own use. HTML is frequently used for internal networks and Intranets which are inaccessible by Internet users.

Getting Started

This tutorial will teach you how to write your own web pages by using HTML. You do not need any special WYSIWYG HTML editor to use this guide, any old text editor, like Notepad will be fine. By learning HTML, you will have much more control over how your web pages look, and you'll more easily discover ways to make your web pages look even better.

Because HTML is platform independent, you'll need to save your HTML files in standard (ASCII) text format. The easiest way to do this is use a program like notepad.exe in Windows. If you'd prefer to use a word processor like Word or WordPerfect to write your HTML code, you can do so, but you need to save your files as "Text" or "Text Only." You'll see this option in a drop down box in your "Save As..." screen. If you use a word processor and forget to save it as text, you'll see only garbled data when you try to view your page with a web browser.

Writing Your Files 

I recommend that when you write your web page, you first create a directory on your hard drive to place the HTML files and graphics files. Simply find your hard drive, and create a new directory (folder), and call it something like like homepage. Then, when you save an HTML file, you can save it to that directory. You can save the file with an extension of .html or .htm.

Traditionally files stored on a UNIX server have had the extension .html, whilst those stored on a Windows server used the extension .htm. Nowadays these have become virtually interchangeable. Note that a
lthough you don't have to have the extra 'l' at the end of the file, it does not mean it will be the same file. You can have one file called filename.htm and one file called filename.html on your host's server, and they are two completely separate files. It's probably best to choose one form of file extension, and to use it throughout your site, to avoid confusion or inaccuracy.

Note to Microsoft Windows Users: If you are using notepad.exe to edit your HTML files, and you type index.html as the name of your file when you save it, notepad may automatically name it index.html.txt! To get around this, when you save an html file with notepad, type quotation marks around the file. Instead of typing index.html, type "index.html". This tells notepad not to use the default .txt extension.

A good tip if you are using the Windows operating system is to right-click in the folder where you would like your new HTML file added. A new context menu will appear. Select 'New HTML File' from the list and a new, empty file will be created, with the correct extension.

In certain circumstances, some HTML files will require the suffix .shtml. These indicate a type of HTML which is assembled in a dynamic way, rather than being written in the conventional fixed way. I will explain the difference between these methods later in the course. For now, just be aware that this occurs.

You may encounter other forms of web pages which have different suffixes such as .asp, .dhtml, .xhtml, .php and so on. These indicate that they were constructed using more advanced forms of web programming. Although these approaches are often derived from HTML, they are not the pure original form that we are dealing with in this course.

Building Your Home Page 

Your main web page file must be titled index.html or index.htm (or occasionally index.shtml) , because this is the name almost all web hosts' servers are set up to handle the main page of your site. Check with your web space provider if you can't get index.html to work. Occasionally systems insist on other file names for the index page, for example: home.html or default.html)

How index.html acts:
Let's say you saved three HTML files to your hard drive, one is your main home page file, one is a page about yourself, and one is a page with your favorite links. It would look something like this:

Directory homepage

  • aboutme.html
  • links.html
  • index.html

Now, say you got an account with a web space provider, and you have the username 'fredbloggs'. When you FTP these three files onto your Web Provider's web space, they might individually be accessed on the web by anyone as:

  • http://www.yourwebprovider.com/fredbloggs/aboutme.html
  • http://www.yourwebprovider.com/fredbloggs/links.html
  • http://www.yourwebprovider.com/fredbloggs/index.html

The latter of the three files, index.html, can also be accessed as http://www.yourwebprovider.com/fredbloggs/, because almost all web servers use index.html as the default web page. When the user asks for / on a directory, it merely shows the index.html file transparently.

Viewing Your Pages 

Remember that there are two views of your web pages available. You can view the underlying code in a text editor or WYSIWYG program or alternatively you can view the page as you intend your audience will see it, using a browser program such as Internet Explorer, Netscape, Opera, AOL etc.

If you are editing index.html with your text editor, it is easy to view what you have written. Just start up your web browser, and select File, Open File and find the file on your hard drive. Then go back to your text editor, change a line, hit save, and click reload/refresh with your browser. What is displayed will change to reflect the changes you have made to the code.

It is also possible to view the code of any web page you fancy. Just right-click on the page, and select "View Source". The text editor associated with HTML files will open revealing the page's code. You can even save it to your hard drive. This is a useful trick to have, as you will be able to see how the page's author has structured their code, and possibly use it in your own designs. There is an old saying which says:

Bad programmers write bad code.
Good programmers write good code.
Great programmers recycle good code!

However, remember that while there is no copyright on HTML code, individual elements of the site, such as graphics, text content and the like remain the property of the author. Do not take those without permission.

| Back to the Index |