Welcome to the basic HTML course presented by the University of Area52! Here you will learn the basics for building your own web page.

These lessons will start at the very beginning and take you through everything that you need to create a web page as well as include a number of tips and tricks for you to try out.

Course Outline:

Lesson 1: HTML concepts and some basic tags

Lesson 2: Text effects, fonts and colour
Lesson 3: Background images and hyperlinks
Lesson 4: Adding images and sound
Lesson 5: Special codes and tips
Final Quiz

After completing the five short lessons, you will have learned what you need to know to tackle the more advanced courses of tables, forms, frames, and then beyond. So enjoy and take your time.

At the end of each lesson there is an assignment for you to put into practice what you have just learned.

What you will need:

Before beginning this lesson, you should have already acquired space on a server where you can upload your files and edit your web pages. You should know how to access your directory (username and password) and how to open a file, edit and save it.

These lessons will refer to the general setup used by the most free servers on the web that offer file editors and preview browsers. (e.g., Angelfire, Xoom, Geocities). Each of these servers have slightly different setups so I have tried to remain general so that they cover most different interfaces. If you have specific questions about how to access your pages, your instructor should be able to help.

Even though there are many ways to edit your pages and transfer them to your server the same rules for coding HTML apply for them all.

Note: Never provide anyone with your password.

What is HTML?

HTML stands for HyperText Mark-up Language, and is the major language of the World Wide Web. HTML is actually a very simple coding language that is read (or interpreted) by a web browser. Your HTML code are instructions telling the browser how you would like your page to look and where to place your text, pictures, music, and links.

Because you do not want any other codes except the ones that you put in, you cannot use a word processing program to write HTML. Instead you can use a text editor, such as notepad or an HTML editor.

An HTML file ends with the extension .html or .htm so your computer knows what kind of coding it is. The html or htm after the period tells it that this file contains coded instructions that can be read by a browser on how to make your page appear and where the files are that you want to use on your page. Files such as images (usually ending in .jpg or .gif) or music (ending in .midi, .wav or mp3, etc.) are separate from the code file and must be uploaded separately. When they are needed, the browser gets them and displays or plays them depending on your coded instructions.

A simple but useful program for creating the HTML files is a basic text editor like notepad in Windows. You can type your code directly into notepad and then save it as a document with an .html extension. You then get a browser to read the file. Usually we do this by uploading the html file to a server and typing in the file address into a browser. The browser interprets the code and display the page for the visitor to read. The big plus for HTML files is that they can be created and read by almost any type of computer or operating system: IBM, Mac, Unix or whatever you may be using as long as there is a browser that can read html.

The Basics

The default for the first page of a website is index.html or index.htm. When you type in an address or URL into a browser, it will look for the index.html or index.htm and display it according to the coded instructions in this file. All the other pages of your site can be named anything you want because you connect to them by creating a 'link' to these pages from your index.html page. You tell the browser what your pages are named and where you have put them.

HTML code is contained in brackets. You will probably recognize these brackets as the "lesser than" and the "greater than" symbols. These characters are on your keyboard. When the browser sees these symbols, it knows there are instructions inside the brackets. Inside the brackets you add HTML tags. HTML tags are words and/or symbols that tell your browser what to do; they are your instructions for how you want your page to look.

HTML Tags

So the first thing to know about HTML tags is they almost always are in pairs - an opening and a closing tag. The opening tag tells the browser to start doing something and then the closing tag tells it when to stop doing it. The closing tag is the same as the opening tag EXCEPT with a slash in front of the tag. Everything that you put in between the opening tag and the closing tag will be affected by the tag. For example, <HTML> is the opening tag that indicates the start of your whole HTML page and </HTML>is the closing tag that indicates that your web document is finished. Everything in between these two tags is your HTML page.

Remember, the slash / before the word is what distinguishes a closing tag from an opening tag. The other thing to note about HTML tags are that they are NOT case sensitive. That means that you can use <HTML> or <html> or <HTml> and the browser will know what you mean. It makes it easier to read your code though if you use capitals for your tags, so I will use capitals in this lesson to distinguish an HTML tag.

The required tags for every HTML document are the <HTML>, <HEAD>, <TITLE>, and <BODY> tags and their corresponding closing tags </HTML>, </HEAD>, </TITLE>, and </BODY> (see notepad image above).

This is the order that the tags are placed into your document. This basic page could be understood by any browser.

What the tags are telling your browser:

<HTML> </HTML>
These tags tell the browser where to start and end your document, and that it is written in HTML.

<HEAD> </HEAD>
Contains special information for the web browser, like the page title, meta tags for search engines, and special style or format instructions.

<TITLE> </TITLE>
The title is contained within the head of your document and therefore goes inside the <HEAD> </HEAD>tags. This is where you put the title of your page. (for example, look at the top of this page. I have put the following in the tags in this page: <TITLE>HTML Lesson One, page 1</TITLE>. Whatever you put here, will appear at the very top of your visitor's browser. Also, when people bookmark your page, this is the title that is saved in their bookmarks or favourites. This is the only part of your head section that is visible to your visitor.

<BODY> </BODY>
This is where you will put the main part of your HTML page, including your text, sounds and images. Things put here will be displayed for your visitors to see.

Lets start making an HTML page:


You might like to open a new window with your browser and work on your new web page. By switching between the windows, you can practice as you go. You can log into the Geocities file manager by clicking here. You can log into the Angelfire file manager by clicking here. You can log into the FortuneCity file manager by clicking here. For other webservers, just open a new window and log into your file manager. Be sure you are using an advanced HTML editor so you can type in your own code. You are now ready to start a new file.

Go to "New", to open a new page. A page should appear with an empty box for you to write in your HTML code. There should also be small box located at the top for you to name your file. (Ex. Lesson 1.HTML). Every HTML page file must be end with either .htm or, .HTML. In some servers, you have to create and name your document first and then open it.

EXERCISE 1

When you are ready, type in the HTML tags into a new page (in some file mangers, the basic HTML tags are already created for you (see Geocities advanced HTML editor on the right):

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>


2. Next, choose a title for your page and put it between the opening and closing <TITLE> tags, like this:


Example: <TITLE> U of Area 52 HTML Lesson One </TITLE> (choose your own title)

3. Finally, add a few sentences of text between the <BODY> AND </BODY> tags.

Example: <BODY> This is the start of my new improved web site <P> You will be assimilated - resistance is futile !</BODY>


4. Notice in the example above that I used another tag: the <P> tag. This is a paragraph tag to separate your paragraphs by adding an empty line. Try using it to separate a few sentences and see the effect.

5. Once you are done, save the document and click the view or preview button of your saved lesson1.html document.

Do you see your title at the very top of your browser? The title does not appear on your page, but it should be at the very top of your browser when you view your page. Remember to use the refresh button on your browser whenever you change a page or you may not see the changes.