| Lesson 1: Getting Started |
What is a tag?
A tag is a command that tells the web browser what to do. A container is a set of paired tags consisting of an opening and ending tag. While most HTML tags are containers, some HTML tags are empty tags, single tags that don't require a closing tag. In a container, the opening tag tells the browser where to start a command and the closing tag tells the browser where to stop. The opening tag will always have a '<' at the front, the tag name and a '>' at the end. An example of an opening tag is:
<HTML>
All closing tags will have a '<' at the front, then a '/', the tag name, then the '>'. An example of a closing tag is:
</HTML>
Remember, closing tags tell the browser to stop a particular command. Failure to close your tags will instruct the browser to format the rest of your document according to your unclosed tags' commands. Close all containers to prevent your HTML pages from appearing distorted.
Since different containers create different commands, only the text within containers will differ. In the above example, the ellipsis indicate that text will go between the container tags. The text and/or image between any container will display in your browser. The container tags format the contents between them.
It may help to think of an HTML page as a set of nested tags. Container tags will have text nested between their opening and closing tags. Opening container tags may contain attributes that modify their commands. Empty tags can be placed anywhere within the BODY container (see below) of an HTML document, and they are primarily used to format a page (add a horizontal line, page break etc.).
OK, that was a lot to digest. Take a breath; it will all make sense soon.
REMEMBER: Most problems with displaying web pages come from not pairing the tags.
|
Although there are several ways to write and HTML document, we will be using Notepad for this tutorial. You can open Notepad on your PC using the following steps:
|
Using Notepad
You can indent your tags using the SPACE bar and create line breaks using the ENTER key to make it easier to read and keep organized. But don't press the ENTER key within a tag.
|
Incorrect Syntax
|
Correct Syntax
|
|
<HTML > |
<HTML> |
In addition, HTML is not case-sensitive. You can type your tags in all caps or lower-case.
Saving your HTML Document
- Go to File on the menu bar.
- Select Save As.
- Type in your file name. Your file name must end with (.html).
For example, if you wanted to save your file as (myresume), you
must save it as (myresume.html). Although it is not essential
to use all lower-case letters when saving HTML documents, it is considered
good web page etiquette.
- Press Save.
Viewing your HTML Document
- Open up your Web browser (Netscape Navigator or Internet Explorer).
- Select FILE (on web browser).
- Select OPEN
- Select BROWSE to find your file
- Open your document.
NOTE: To view your results, save any changes you've made and click your browser's REFRESH button. Otherwise, it will continue to show the same page.
| The
HEAD Container (<HEAD>. . .</HEAD>)
The <HEAD> tag is always placed after the <HTML> tag, and the </HEAD> tag. The closing </HEAD> tag is placed before the <BODY> tag (to be described later). The HEAD tag contains the information required to display a title for the web page in the web browser's title bar. Top of Page |
| The BODY Container (<BODY>.
. .</BODY>)
The <BODY> tag comes directly after the </HEAD> tag and the </BODY> tag goes just before the </HTML> tag. To work properly, all of your text, graphics, links, etc. must be placed between the BODY tags. Example:
|
 |
 |
| Home | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | FAQS |