Lesson1

LESSON 1: The VERY Beginning

What is HTML?
Basic HTML document structure.
1. Tags
2. Elements
3. Attributes
The HTML element.
The HEAD element.
The TITLE element.
The BODY element.
Examples.

1. What is HTML?

HTML stands for HyperText Markup Language and is the publishing language of the World Wide Web.

2. Basic HTML document structure.

Every HTML document follows this basic structure:

<HTML>
<HEAD>
<TITLE>Your title </TITLE>
</HEAD>
<BODY>
This is where you write your information.
</BODY>
</HTML>

2a. Tags

A tag is special text--"markup"--that is delimited by '<' and '>'. For example, the expression <BODY> is a tag with name BODY.

An end tag includes a '/' after the '<'.
For example, </BODY> is an end tag.

Tag names are always case-INsensitive, so <BODY> and <BodY> are the same.

2b. Elements

An element has three parts: a start tag, content and an end tag.

For example, to show the text "Hello" in bold, you can use the element B as follows:
Hello
 is the start tag;
 is the end tag;
Hello is the content of the element.

Some elements allow the start or end tag to be omitted.

Some elements have no end tag because they have no content. These elements, such as the BR element for line breaks, are represented only by a start tag and are said to be empty.

Elements cannot overlap each other. If the start tag for an B element appears within a P, the B's end tag must also appear within the same P element:


 
 ...........

3c. Attributes

An element's attributes define various properties for the element. For example, the BODY element takes an attribute BGCOLOR to provide the background color of the document and a TEXT attribute to provide the color of the document's text.

An attribute is included in the start tag only:

<TAG
Attribute-name="Attribute-value"
Attribute-name="Attribute-value"
.....
>
</TAG>

The attribute value is delimited by single or double quotes. The quotes are optional if the attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"), and periods (".").

Attribute names are case-INsensitive, but attribute values may be case-sensitive.

3. Element HTML.

\..........Description

The HTML element contains the HTML document.
The start tag <HTML> is placed at the beginning of an HTML document to tell the browser that the language is used is HTML. The end tag </HTML> is placed at the end of the document.

\..........Syntax

4. Element HEAD.

\..........Description

The HEAD element contains header information about the document, such as its title, keywords, and description.

HEAD precedes the BODY element.

\..........Syntax

5. Element TITLE.

\..........Description

The TITLE element gives the document's title and is typically shown in the title bar of browser's window.

A suggested limit for the number of characters in a TITLE is 60. For example, the title of this document is: HTML Tutorial.

TITLE is placed within HEAD.

\..........Syntax

6. Element BODY.

\..........Description

The BODY element contains the document content, i.e. the information that is shown in the browser's window.

BODY immediately follows the HEAD.

BODY takes a number of attributes for specifying the background and colors of the document on visual browsers.

\..........Syntax

\..........Attributes

Attribute	Description
TEXT="color"	Specifies the text color for the document.
BGCOLOR="color"	Specifies the background color for the document.
BACKGROUND="URI"	Specifies the URI of background image for the document.
LINK="color"	Specifies the link color for the document.
VLINK="color"	Specifies the visited link color for the document.
ALINK="color"	Specifies the active link color for the document.

Note: If both BGCOLOR and BACKGROUND are specified, the background image is used.

Click here for more information about URI's.

\..........Examples to see

Examples 1-4 demonstrate BODY attributes.

7. Examples.

Choose an example and move below the text box to see the HTML code.

Example 1: Writing text.
Example 2: Changing the text color.
Example 3: Changing the background color.
Example 4: Specifying an image for the background.