HTML Tutorial

Introduction

This tutorial is designed to help you learn about the Markup Language (tags) used in web page construction.

After you have completed this tutorial you will use your new skills to develop a Communications Technology-related series of web pages.

Assumptions

This tutorial assumes you have some basic knowledge of computing--know how to create and save files, how to load files, how to create directories, how to switch between programs, etc.

Requirements

To use this tutorial you will need to be running an text editing program such as Notepad or Notepad++ (portable link), and of course, a web browser.

Tutorial Layout

Example HTML is shown in a constant width font:

Any examples showing what the browser would preview is shown in a text box:

This is an example of how this line looks ⁱⁿ _a browser.

The Basics and Lists series of lessons should be performed in order, but all other series of lessons can be performed in any order you like.

The Basics

This section introduces you to the Markup Language, or tags, that you would use in most web pages you would create. It covers essential tags, text-related tags, adding images, and creating links.

It is best to perform this part of the tutorial in a linear fashion. This means you would first complete the What is a Web Page? tutorial, then proceed to the What is HTML? tutorial, etc.

If you would like to review material you have already covered, you can quickly access the desired page by clicking on the appropriate link.

What is a Web Page?

A web page is simply a text file that, when viewed using a Web Browser, allows the user to view multimedia content. The multimedia content can include text, graphics, video, animations, and sound.

A web page contains tags that define the basic layout of your document. (See What is HTML?)

Web pages are normally saved with the extension "htm" or "html". For example, the filename for this page is "webpage.htm". For this tutorial, you will be saving all pages with the htm extension.

Web pages are most often viewed on the World Wide Web, although they can also be viewed from a local disk drive.

Review Questions

What is HTML?
What kind of program is used to view web pages?
Where are web pages most often viewed?
What kinds of programs can be used to create web pages?

What is HTML?

HTML, which stands for HyperText Markup Language, is a document formatting language.

HTML is used to display multimedia documents on the World Wide Web using a web browser such as Netscape Navigator or Internet Explorer.

HTML is composed of special tags which define the basic layout of your document. Some examples of tags include:

<body>
<img src="photo.jpg">

Note that there is no guarantee that the way a document looks in your browser is the way it will look in all browsers. It is best to check your document in different browsers and at different resolutions before publishing to the Internet.

Review Questions

What does HTML stand for?
What is a tag?
What kind of software is used to display web pages? Give two examples.

Your First Page

All web pages must have the following basic tags:

<html>

<head>

</head>

<body>

</body>

</html>

Note that the page starts with <html> and ends with </html>. These tags tell the browser that this is an HTML document. Note the slash ("/") in the final tag means that this is an ending tag.

Within the <html>...</html> tags there are two sections--a head section (<head>...</head>) and a body section (<body>...</body>).

The Head section is used for the title of the page (see Add a Title) and for specialized tags used with search web sites such as Google, Yahoo or Lycos.

The Body section is used for the main content of the web page. You will be spending most of your time editing tags in this section.

Assignment

Create a folder in your class documents folder named "My Test Website" (without the quotes).

Open your web page editor. Be sure to use an editor that lets you edit the tags.

Using your web page editor, add the basic tags shown above to a new document. Note that the tags can be either lowercase or uppercase; tag case is ignored by the browser software..

Save as "first.htm" in your project folder.

View your document by opening it with your default web browser.

Review Questions

What basic tags are used on all web pages?
What is the purpose of the head section?
What is the purpose of the body section?
When viewing your first.htm page in the web browser, what do you see? Why?

Add a Title

The title is added within the head section of your web page and is created using the <title>...</title> tag pair. The following example demonstrates how the title for this page is created:

<html>

<head>

<title>Add a Title</title>

</head>

<body>

</body>

</html>

Note that the <title>...</title> tags are within the <head>...</head> tags. (The title line is shown in red for demonstration purposes only.)

Assignment

Reopen first.htm and immediately save as "title.htm" (again, without the quotes).

Add the following title to your first web page:

<My Name>'s Web Page.

(Substitute your own name for <My Name>)

Preview your newly saved document in your browser.

Review Questions

What are the basic tags used for adding a title?
In what section are the title tags added?
Where does your title appear when previewed in your browser?

Continue this series by clicking on "Headings", below.

Headings

Headings are created with the <H#>...</H#> tag pair, where "#" is a level number from 1 to 6.

Headings are always on a line on their own. In other words, other text can never be on the same line as a heading.

The following example...

<body>

<h2>Heading Level 1</h2>

</body>

...produces text similar to this:

Heading Level 1

Note that the heading tag is located in the body section of the web page.

Assignment

Using your title.htm file, add a level 1 heading with the text "This is a level 1 heading". Save as "heading1.htm". Preview your document.

Add appropriate tags and text for heading levels 2 to 6. Save as "heading2.htm". Preview your document.

Review Questions

What is the basic tag pair used for creating headings?
How many heading levels are there?
Basically, what is the difference in appearance between the heading levels?
Give an example of where you would use a heading.

Paragraphs

Basic paragraphs use the tag. Optionally, a tag can be used to end the paragraph.

Paragraphs are always preceded by a blank line. If you do not want your paragraph to be preceded by a blank line, use the tag instead.

For example, this paragraph was started with the tag. Notice that it is preceded with a blank line. (This is extra stuff to make this a long paragraph. This is extra stuff to make this a long paragraph. This is extra stuff to make this a long paragraph. This is extra stuff to make this a long paragraph.)

But this paragraph was started with the tag. Notice that it does not have a blank line before it. (This is extra stuff to make this a long paragraph. This is extra stuff to make this a long paragraph. This is extra stuff to make this a long paragraph. This is extra stuff to make this a long paragraph.)

A tag is not really used to start a paragraph. Its real intent is to move to the next line without inserting a blank line (like a carriage return on a typewriter).

A tag may also contain alignment information. Notice the following three paragraphs.

This paragraph starts with the tag.

This paragraph starts with the tag.

This paragraph starts with the P style="text-align:right" tag.

A specialized kind of paragraph is the block quote. It is obtained by using the <BLOCKQUOTE>... </BLOCKQUOTE> tags. The following paragraph is blockquoted:

Einstein, Albert (1879-1955), German-born American physicist and Nobel laureate, best known as the creator of the special and general theories of relativity and for his bold hypothesis concerning the particle nature of light. He is perhaps the most well-known scientist of the 20th century.¹

Assignment

Load heading1.htm into your editor, then change the heading to "Paragraphs".
Write a brief paragraph describing your interest in the Internet.
Reproduce the previous paragraph twice more. Configure so the second copy is center-justified and the third copy is right-justified.
Copy and paste the passage about Einstein into your editor. Configure it as a blockquote.
Save your file as "para.htm". Don't forget to use the Save As function instead of Save. Preview your document.

Review

What tag is used to start paragraphs?
What tag is used to start a paragraph on the next line?
How do right-align a paragraph? Center?
Continue this series by clicking on "Text Tricks", below.

Text Tricks

Bold (or Strong)
Italics (or Emphasized)
Underlined
<tt>Teletype</tt>
<strike>~~Strikeout~~</strike>
^Superscript and Subscript
Size
Color (note the American spelling!)
Small and <big>Big</big>

Of course, you can use ~~any~~ ^combination _of these you desire! When you do this, though, you must be careful about the order of the tags. For instance:

bold and italics

is incorrect. The correct order would be:

bold and italics

For the font color tag, the "#" part of the tag is divided into red, green and blue, with the numbers being in hexadecimal. The example given means there are "FF" (in hex, 255 in decimal) parts red, 0 parts green, and 0 parts blue. The number for green would be #00FF00, while the number for blue would be #0000FF.

For the font size tag, the legal range of sizes is 1 to 6. Note that you can also specifiy a relative size such as "+1" or "-2".

Assignment

Load heading1.htm into your editor, then change the heading to "Text Tricks".
Recreate the following examples:

Save your file as "text.htm". Don't forget to use the Save As function instead of Save. Preview your file.

Review

What are the tags for bold, italics, underline, strikethrough, teletype, superscript, and subscript?
What are the two basic options that can be set with the tag?
What is the legal size range for fonts?

Links

Links are what make the World Wide Web the World Wide Web.

A link, or hyperlink, is simply a text or graphic that, when clicked on, takes you to another site, or to another page, or to another part of the page you're on..

In most cases, links are represented as underlined words, but quite often, links can be graphical in nature.

The <a> tag is used to create links. For example, a tag for Google would look like:

<a href="http://www.google.com">Google</a>

There are two important considerations here. One is the "href=" part (hyper reference), which is where you would go if you clicked on the link, and the other is the "Google" part, which is what is displayed on the screen.

To link to another part of the page you would use the <a name=""> tag. For instance, if you include a <a name="top"> tag at the top of your body section, you could link to it with this tag: <a href="#top">Top</a>. Notice the pound sign before the word "top".

The use of graphics as a link is covered in another lesson.

Assignment

Load heading1.htm into your editor, and change the heading to "Link Test".
Add a link to the Westlane web page (http://westlane.net). Save as "link.htm".
Preview your page.

Review

What tag is used to create a hyperlink?

Continue this series by clicking on "Adding Images" (forthcming).