USING HTML TO DESIGN WEBPAGES

 by Sharon Centanne
HYPERTEXT MARKUP LANGUAGE - A simple programming language using formatting code words embedded in your text to tell your web browser client how to display web pages. All commands are placed between the < and the > signs, and placed right into your text at the appropriate spot. Most HTML commands require a repeat of the command with the / to turn them off again. You may use either upper or lower case for your commands. Both work. I have used upper case here to emphasize the command tags. You may wish to do so in your coding to see them more easily.

Some HTML commands:

<HTML> - Tells your web browser to display the following text as a web page. This should be the first command for your page and </HTML> should be the last.

<HEAD> -HEADER - Used to display the heading for the web page. </HEAD> is used at the end of the heading. This heading is displayed at the top of the browser, and is used by search engines. <TITLE> and <META> tags are placed between <head> and </head> to describe the page for search engines.

<TITLE> - Used to display the title of the page. This appears on the Title Bar of the window. <TITLE> is used to end the title and must appear or everything following will go into the title!

<BODY> - used to set the beginning of the main part of the page. Usually used right after </TITLE>. Use </BODY> at the end of the page before </HTML>

The following tags are used inside the <BODY> and </BODY> tags:

<BGCOLOR> - used to set the background color of the webpage.
Example: <BGCOLOR=#000000>will set the color to black and <BGCOLOR=#FFFFFF> will set the color to white. All 6 digit numbers are in hexadecimal, meaning base 16, using A thru F for 10 thru 15. You can find the exact number you need for your colors by copying the number from other websites you like or doing a search on the web for sites that figure the color out for you.

<H1>. <H2>, <H3>, <H4>, or <H5> is used to set the font size for the heading information.

<BLOCKQUOTE> and </BLOCKQUOTE> - used to set margins in from the edge of the webpage.

<B> - BOLD- used to emphasise words by making the font Bold. Use </B> to turn Bold off, or the rest of the text will all be in Bold!

<I> - ITALICS - used to change the text to Italics. Use </I> to turn Italics off and return to plain text.

<FONT SIZE="x"> - sets the size of the font in the body of the page. Use with a number from 1 to 5 in place of the x.

<:OL> - ORDERED LIST - enables you to list items and the computer will supply the numbers for you.

<UL> - UNORDERED LIST - enables you to list items and the browser will supply bullets in front of each item.

<LI> - LIST ITEM - must be placed before each item in an ordered or unordered list.

</OL> or </UL> - placed at the end of the list items to indicate the end of the list.

<IMG SRC> - IMAGE SOURCE - tells the browser where to find a image or picture to display. Example: <IMG SRC="picture.gif"> for a file on the same drive and in the same folder as your website, and <IMG SRC="http://www.wherever.com/picture.gif"> for a picture on a remote server. Quotations are used on both ends of the exact reference address. Note: http:// must be added before any remote web address.

<ALT>= - ALTERNATE - Used to display an alternate text file for users with text-based browsers, such as Lynx. If you don’t provide an alternate to your pictures and graphics, Lynx displays only [IMAGE], which can confuse the user.

<ALIGN="TOP">, <ALIGN="CENTER">, <ALIGN="BOTTOM">, <ALIGN="RIGHT">and <ALIGN="LEFT"> commands are used with <IMG SRC> to tell your browser where to show the picture.

<A HREF=" "> - ANCHOR HYPER REFERENCE - Used to link your page to other pages on your local server or on a remote server anywhere in the world. Example: <A HREF="article.txt"> for links to pages on your local drive and
<A HREF="www.wherever.com/article.txt"> to link to pages on remote servers. A description of the link should follow this address and then the command </A>. This informs the browser to display the description underlined and in blue so that the user knows where to click to activate the link. Note: Failure to use the </A> results in the entire rest of your text to be blue and underlined!

<P> - PARAGRAPH - used to start a new paragraph in your text. Does not require </P>. <BR> - BREAK- Used to put a carriage return in a specific place in your text.<BR> is especially useful for displaying poetry on your webpage if placed at the end of each line.

<NO BR> is used to make sure that certain words are not separated from each other onto two separate lines. This works in Netscape but may not work in inferior browsers like Internet Explorer. <BR> is may be needed to turn off this tag.

<HR> - HORIZONTAL RULE - Used to place a straight line between groups of text to show separation. The width and length of the line may be defined with width="x" or length="x" where "x" is a numeral.

These are the basic commands used to format text to appear on a web page. For further information, read the following books:

HTML For Dummies - by IDG books
teach yourself HTML 3.0 in a week - by Laura Lemay (Note: there may be more current editions available, even books for HTML 4.0)

These books also contain advanced commands for more experienced users. Many of the new commands will not work on every browser, so you will want to be sure to download the latest browsers to take advantage of the fancier HTML commands.

Final Notes: You can use any text editor to write HTML. You will have to go back and forth checking your text in your browser until you get the page to display the way you want. Eventually, you will have some idea what each tag will do to your page and you will be able to write code quickly. A text editor also will allow you to cut and paste templates and other code so that you can make a group of pages have a similar look and feel, while saving time as well!

© Copyright February 1997, July 2002 Sharon Marie Centanne, Centanne Web Design
This page updated July 10, 2002.