HTML Documentation

by **cHv** Fri Sep 12, 2008 9:04 am

Greetings,

Most forums are in based on HTML documents, and this is what I am going to be analyzing today.

An HTML page is always easy to create.
What you need is an HTML box with title and body.

Lets create one:

Quote about HTML : D.R.I

Start with a title

Every HTML document needs a title. Here is what you need to type:

My first HTML document
Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag and ends with the matching end tag . The title should be placed at the beginning of your document.

To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar. With just a title, the browser will show a blank page. Don't worry. The next section will show how to add displayable content.

Add headings and paragraphs

If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

An important heading

and here is a slightly less important heading:

A slightly less important heading

Each paragraph you write should start with a tag. The is optional, unlike the end tags for elements like headings. For example:

This is the first paragraph.

This is the second paragraph.
Adding a bit of emphasis

You can emphasize one or more words with the tag, for instance:

This is a really interesting topic!
Adding interest to your pages with images

Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.

The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:

The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:

You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.

Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.

Adding links to other pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the tag. Lets define a link to the page defined in the file "peter.html" in the same folder/directory as the HTML file you are editing:

This a link to Peter's page.
The text between the and the is used as the caption for the link. It is common for the caption to be in blue underlined text.

If the file you are linking to is in a parent folder/directory, you need to put "../" in front of it, for instance:

Mary's page
If the file you are linking to is in a subdirectory, you need to put the name of the subdirectory followed by a "/" in front of it, for instance:

Sue's page
The use of relative paths allows you to link to a file by walking up and down the tree of directories as needed, for instance:

John's page
Which first looks in the parent directory for another directory called "college", and then at a subdirectory of that named "friends" for a file called "john.html".

To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:

This is a link to W3C.
You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

This uses "/" to refer to the root of the directory tree, i.e. the home page.

Three kinds of lists

HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the
and
tags, for instance:

the first list item
the second list item
the third list item

Note that you always need to end the list with the
end tag, but that the is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the
and
tags. For instance:

the first list item
the second list item
the third list item

Like bulletted lists, you always need to end the list with the
end tag, but the end tag is optional and can be left off.

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a tag and ends with Each term starts with a tag and each definition starts with a . For instance:

the first term
its definition

the second term
its definition

the third term
its definition

The end tags and are optional and can be left off. Note that lists can be nested, one within another. For instance:

the first list item

the second list item

first nested item
second nested item

the third list item

You can also make use of paragraphs and headings etc. for longer list items.

MORE UPDATES ON HTML DOCUMENTS SOON COMING

Some of my writtens dont appear as I want since we have HTML enabled here. I am sorry -cHv