Khurram's World - HTML Tags and Attributes

HTML Basics	What is Tag	HTML Format
HTML Images	Tables	Frames
Forms	Sounds	Video

HTML Tags and Attributes

Now create a simple "Start" page in order to illustrate the fundamentals of HTML. Try typing the following code into your HTML editor.

<html>
<head>
<title>My First HTML Program</title>
</head>
<body>
My Start Page
</body>
</html>

Remember to save the file with a .html or .htm extension, the standard extension for the HTML-formatted documents. Then view it in your browser. The first thing you'll notice about the code is that every HTML command or 'tag' is actually a pair of tags, an opening tag, and a closing tag preceded by a forward slash. However, there are certain exceptions to this rule. Many tags also include attributes, in the form attribute = "value" which add options to that particular tag. Tags may be in either uppercase or lowercase. Tags must also be properly nested, failing which, you will encounter unexpected problems.

Every HTML document must begin and end with <html> .. </html> tag combination, these tags enclose all subsequent tags and identify the document type as an HTML formatted document.

The document may be further subdivided into the header and the body. The header begins and ends with <head> ... </head> tag, and contains information such as the title of the page, the author's name and hte editor used, together with other information to make the page more search-engine's friendly. The header must include the <title> ... </title> tags, which contains the page title. This title appears in the title bar of the browser and is used when saving bookmarks. Only one title can appear in a document and the title cannot contain links or highlighting.

Following the header, we have the body, which is the main part of the document and is enclosed within the <body> ..... </body> tags. it contains all the text, images, hyperlinks and other material to be displayed on the page, together with all the HTML formatting codes that control the layout of the page. The <body> tag has numerous attributes that control the default colors and background properties for the page. Of these, one of the most important is the Text attributes, which decides the default color or all the text on the page. Consider the following example:

<body text="white">
My Start Page
</body>

This displays the words "My Start Page" in white

We can then add the bgcolor attribute, which sets the default background color of the page.
<body text="white" bgcolor="black"> </body>

This displays white text on a black background. However care should be taken to select the background and text colors that establish a sensible contrast for the document, like the one above.

Now, let's find out how to emphasize different segments or words. This may be accomplished through the use of boldface, italics or underlining. The tag specifies that the text should be rendered in boldface. For example, the following line:

HTML is simple 
will be displayed as:
HTML is simple

The tag causes text appear in italics.
e.g. let us take the above example:
HTML is simple 

will appear as:
HTML is simple

and the tag causes included text to be underlined. So the wonderfully statement:
Promises what you can deliver and deliver more than what you had promised!
would appear as:
Promises what you can deliver and deliver more than what you had promised!

Now, we'll show you how to separate page content with horizontal lines. The <hr> tag need not be terminated by a closing </hr> tag. The <hr> tag inserts a horizontal line of user-defined width, height and alignment across the page. Alignment of the line may be specified with the align attribute, valid values for the align attribute are left, center or right. The width and height of the line can be controlled via the Width and size attributes respectively. The width attribute, may be expressed as either a percentage of the browser width, or as an exact number of pixels, while the size attribute is always expressed in pixels.
so the html code will be as:

<hr width="100" size="4" align="right">
will insert a horizontal line of width 100 pixels and height 4 pixels, aligned towards the right side of the page.

if the <hr> tag is used by itself, with any attributes, it will simply insert a line of default height and width across the page.

Incidentally, the Noshade attribute can be used to eliminate the default 3D shading that the browser imparts to the horizontal line. We should inform you that the color attribute of the HR tag is only available in internet explorer and is not supported by Netscape Navigator.

So Now let's incorporate these new tags into the example above:
<html>
<head><title>My First HTML Page</title>
</head>
<body bgcolor=red text=white>
My Start Page
Welcome to my HomePage, the Coolest place for all you folks.
Hope on to the bandwagon... and enjoy the ride
<hr width=75% align=center size=2>
</body>
</html>