HTML Tutorial 2

Web Page Structure

  

HTML Tags

The HTML language is written in the form of 'tags' which dictate some characteristic of the web page or its content. Tags consist of some text within angular brackets eg <html>.

Some HTML elements have opening and closing tags. For example the start of a web page is defined by <html>, and the end of the page defined by </html>. These are called container tags. Other elements are defined by a single tag, for example an image would be inserted by <img src="myimage.gif">.

Comments start with <!-- and end with -->. In these tutorials they will be colored green to distinguish them from the other tags.

 Page Structure

A web page is divided into two main sections, a head section and a body section

<html>
<head>
<!-- head section -->
</head>
<body>
<!-- body section -->
</body>
</html>

The head section contains information about the web page, but not content which appears on the page. The body section is where the content appears.

 <title> tag

The <title> tag is the most important tag in the head section. It provides a summary of the content of the page and is important as it is indexed by some search engines. The content of the title tag also appears in the results of queries in some search engines. On a web page, the title can be seen inthetop left corner of the browser, above the File and Edit menu titles. The title tag for this page is:

<title>Knowledge River - HTML Turorial 2</title>

 <body> tag

The <body> tag identifies the start and finish of the page content. By adding other optional parameters or information into the body tag characteristics of the page as a whole can be specified. Note that a web page only ever has one body tag. If parameters are included, they are added into the same tag.

Optional parameters:

Background color
bgcolor="red" or bgcolor="#ff0000"
The background color can be specified as a hexadecimal number or as a named color (see Web Colors).

Background Image
background="myimage.jpg"
A background image can be provided for the web page. The image will be 'tiled' repeatedly both horizontally and vertically to occupy all available background space in the window. To stop an image from tiling, it must be larger than the web page.

Text color
text="navy"
Defines the defaultcolor of text on the page.

Fixed background
bgproperties="fixed"
Makes the background image remain still while the web page scrolls over it.

Link color
link="green"
Specifies the color of text in a hyperlink.

Active link color
alink="yellow"
Specifies the color of text in an active hyperlink.

Visited link color
vlink="red"
Specifies the color of text in a visited hyperlink

Left margin width
leftmargin="0"
Specifies the width of the left margin at the edge of the page. By default this is set to 5 pixels. but if you want the page content, for example a table, to go right to the edge of the page the margin has to be set to "0".

Top margin width
topmargin="0"
As above, specifies the width of the margin at the top of the page.

The complete body tag made up of all the above elements would therefore be:

<body bgcolor="#ff0000" background="myimage.jpg" text="navy" bgproperties="fixed" link="green" alink="yellow" vlink="red" leftmargin="0" topmargin="0">
<!-- body section -->
</body>

© & Design by systemalchemy.com