Below you will find the basic format for writing an HTML page. Included are some of the more commonly used tags with a brief description of their use.
When writing an HTML page one must remember:
- When you have an action that requires an open tag, you need a closing tag to end the action.
- Anything you want the web page to do other than what is accomplished with the default settings, will need a tag.
For ease in identifying tags, they have all be colored blue with descriptive comments in italics.
Let’s begin our page:
<HTML>
<HEAD> Inside the head tags you will define the title, the description and the keywords.
<TITLE> Place the title of the page here </TITLE>
<META name=”description” content=”"> The description of the page would go here.
<META name=”keywords” content=”"> The keywords for the search engine would go here.
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″> You would use this portion of the body tag to define the colors for the background (BGCOLOR), text, active link (LINK) and visited link (VLINK). Note colors are shown as hexadecimal.
The body of the page would go here. It can contain text, images, and/or tables of information that may use some of the following tags.
<img src=”http://www.yourdomain.com/image.jpg” width=”150″ height=”20″ hspace=”2″ vspace=”2″ border=”0″ align=”middle” alt=”Alternate description”> - You would use this code to insert an image or graphic. The information contained in the code gives the location of the image, the size in height and width, whether or not you want horizontal space (hspace) or vertical space (vspace) around the image, if you want it to have a border, where you want the image to align, and an alternate text description.
<a href=”http://www.yourdomain.com/linkpage.html”> Link Page </a> – Code used to create a hyperlink to another page.
Hard return <br> - This forces a line return
Underline [ <u> underline </u> ] – Use this to underline words, numbers or paragraphs that you want to highlight
Bold [ <b> bold </b> ] - Use this to bold letters, numbers, words or paragraphs you want to bring attention to.
Italics [ <i> italics </i> ] – Use this to italicize letters, numbers, words or paragraphs you want to highlight.
Center <center> center </center> – Use this to center text, images or tables.
Comment – <!– blind comment –> - This comment is visible inside the document’s code but is not displayed when the web page is viewed on line.
Fonts <font face=”arial” color=”#ff0000″> Font tag is for ”arial” in ”red” </font> - Use this code to change font style, size and color. You can use it to change only 1 letter, 1 word or a complete page.
Blockquote <blockquote> Use this to segregate a block of text </blockquote> -
If you wanted to highlight a paragraph, you might want to use a blockquote tag. This tag will indent the text, separate it from the rest of the document with a return on top and bottom. You can manipulate the text and fonts within the ‘blockquote’ tags.
Header – <h1> header </h1> – Use this tag for search engine optimization and to highlight specific key words relevant to the page.
No break – <nobr> 1234567890 </nobr> – Use this code to hold together a string of numbers or a sentence that you do not want broken.
Table <table><tr><td> table </td></tr></table> – This is the code for a very simple table. Tables are comprised of rows and columns where <tr> represents a row and <td> represents a column.
The body of your page would end here and not go beyond this point.
</BODY>
</HTML>
End of Page
There are many different reference books available for learning HTML. We have found that the Quickstart guides by Elizabeth Castro are the best – they use images rather than lengthy explanations to “get you up and running in no time”. For a selection of excellent Quickstart reference guides by Elizabeth Castro visit this link . . . HTML QS
