HTML's Top Ten Tags
by David Nolette
Introduction
The purpose of this article is to create a document that can be read by a browser, such as Internet Explorer or Mozilla, and have the fewest number of html tags. It will not contain any photos or graphics but it will look like text created by a word processor. The formated text could then be printed by any browser. You also will have the ability to add background color and link to other web pages. The html document must be created in a word processor that saves files in a text or ascii format. The file must be saved with an html or htm extension. You can even use a simple word processor like Notepad, which comes free with Windows. Or you can find a program on the internet like Arachnophilia. They call it careware but there is no cost involved. The program has a built in viewer.
How Many
There are only 10 tags plus one used in making this document. The plus one is the (pre) tag which I had to use with special codes so I could make the tags visible. When you look at the source code which I hope you do, ignore any line that starts with (pre). It won't make any sense. We will examine the (pre) tag some other time.
html
head
title
body
headings
paragraph
break
blockquote
background color
hyperlinks
HTML
The html tag is the first and most important tag. Every html document must begin with this tag. As with most html tags it come in pairs. The html starting tag is what makes the browser recognize the document as an html document. Every document must also end with the closing html tag. As with all html tags it is enclosed in brackets. Notice that the closing tag is identical to the starting tag except for the forward slash immediately following the bracket. Every closing tag must start this way. Tags are also called elements.
<html> </html>HEAD
An html document consist of two areas, the head and the body. The head area contains such information as the title of the document. It is opened and closed with head tags.
<head> </head>TITLE
The title of the html document is inserted between the two tags. The browser puts the title at the very top of the browser. It is not the same thing as a heading. The title will not appear in the body of the text unless you repeat it in a heading.
<title> </title>BODY
The body contains the main portion of the document. It is found between the opening and closing body tags. These first four tags--html, head, title, and body could be considered as the essential elements of a page.
<body> </body>HEADINGS
The headings can be of any of six sizes. The largest size might be used as the first line of a home page, otherwise it wouldn't be used much. The headings in this article only contain h2 and h3. Experiment.
<h1> </h1>PARAGRAPH
The paragraph tag is the main element in creating space and separation between paragraphs. It always leaves one extra line of space.
<p> </p>BREAK
The break tag is like the enter key on a keyboard. It ends a line and goes down one line without leaving a line space. You will find many uses for the break tag. One use would be for making lists without using special list tags. Another would be addresses. You do not need a closing tag.
<br>BLOCKQUOTE
With just the first seven tags you could make a formated document but it would look better with the addition of the blockqoute tag. The blockquote tags adds the equivilant of margins to the browser. It add space to the sides and makes for easier reading. There are other ways you can do this but this is the simplest. You can also put blockquotes within other blockquotes. This is what I did for the 'How Many' list.
<blockquote> </blockquote>BACKGROUND COLOR
With the above eight tags we can create readable and usable documents but we will now go one step farther. Web pages are usaully full of color but if none is selected the browser sets default colors for text, background and links. Unless someone has tampered with the browser preferences the default text color is black. The background color defaults to grey or white. For now we will show how to set one color--the background color. I have selected lightblue to show possibilites but for now white is a good choice. Strictly speaking, bgcolor is not a tag but an attribute of the body tag. Notice that bgcolor is enclosed in the brackets of the body tag. Because of the wide variety of colors, colors are usually named by hexidecimal numbers but that can come later. Experiment with different colors if you want but remember the text is black so the background color must contrast with it.
<body bgcolor="lightblue">HYPERLINKS
There is one tag that makes html documents special from all other documents. This tag gives you the ability to jump from page to page and also from one one web site to another. Just by clicking a mouse button we can go from a web page in Minnesota to one in Austraila. Notice that the link starts with the letter 'a' followed by a space. This is called the anchor. The attribute href refers to the site you are linking to, it is still enclosed in the anchor brackets. After the left bracket is the place where you will name the page you are linking to. You may name it any name you want but logic dictates you name it something pertinent to the place you are linking to. The browser will show it as underlined text. There are absolute and relative links. I will show you an example of each. The absolute link can be used for all links but it is easier to use relative links when you have many pages within your own web site. Remember the address must be written perfectly or it won't work. Computer programs are very picky for being exact. Here is a absolute link to my home page.
The Family History of David Nolette
<a href="http://www.nolette.net/dnolette/index.html">The Family History of David Nolette </a>Here's a relative link to a web page that only uses ten tags.
<a href="Basic_One.html"> The Study of Family History</a>
Summary
That was easy, wasn't it. You can now make your own documents in html. But you may be asking yourself. Why not just make the document in a word processor like WordPerfect or Microsoft Word. You can but not everyone owns a copy. An html document is the most portable document there is. Almost everyone has at least one installed browser. You are making a document that will be readable for years to come. Of course if you are making a page for a web site it must be an html document. If you have a certain area of interest, such as I do with genealogy, you can also link your files on your own hard drive.
Don't forget. Examine the source code in your browser.
Have fun with your html study and implementation.
copyright by David Nolette