HTML Tag Reference

HTML 'Tags'

COMMANDS	DESCRIPTION	RESULT
<HTML>...</HTML>	Signifies the very beginning and ending of a page, the entire script should go between these tags.	N/A
<HEAD>...</HEAD>	Signifies the beginning of the header, certain tags can only be placed within these <head> tags.	N/A
<TITLE>...</TITLE>	The text that you put between these tags will become the title bar of the page. These tags must be located between the <HEAD> tags.	N/A
<BODY>...</BODY>	The body of the page must be located between these tags. Place the first <BODY> tag right after the </HEAD> tag. This tag also identifies characteristics of the page such as Background image, Background color, text color, and link color. The syntax would be <BODY BACKGROUND="image name" BGCOLOR="color" TEXT="color" LINK="color"> NOTE: for color refer to the COLOR section on the back page	N/A
<Hn>...</Hn>	This tag calls for a header. This makes the font within the tags bold and a certain size. The syntax would be where n is a number between 1-6, 1 being the largest font, 6 the smallest. (<H1> text </H1>)	H1 H2 H5 H6
<BR>	This tag calls for a line break.. it does not need to be closed with </BR>	blah blah line break --^
<P>	This tag calls for a paragraph break, It will add a line break followed by a blank line... it does not need to be closed with </P>	N/A
<HR>	This tag calls for a horizontal line to cross the page...it does not need to be closed the syntax would be <HR WIDTH="n%" HEIGHT="n"> NOTE: Width is the length of the page it would cross in %, Height is a number between 1-4 and determines the thickness.
<BLOCKQUOTE>... </BLOCKQUOTE>	This tag indents the text within it on both the right and left margins.	indented text...
<I>...</I>	all text within the tags becomes italic	Italic
<U>...</U>	all text within the tags becomes underlined	Underlined
<B>...</B>	all text within the tags becomes bold	Bold
<STRIKE>...</STRIKE>	all text within the tags becomes Strikethrough	~~Strikethrough~~
<SUP>...</SUP>	Text within the tags becomes superscript	This is ^Superscript
<SUB>...</SUB>	Text within the tags becomes subscript	This is _Subscript
<BLINK>...</BLINK>	Text or images within the tags blinks.	N/A
<EM> .. </EM>	This makes the text emphasized (same as italic)	Emphasized
<STRONG> .. </STRONG>	This makes the text strong (same as bold)	Strong
<KBD> .. </KBD>	This makes the text appear as the font courier	`Keyboard`
<TT> .. </TT>	This makes the text appear typewritten	`Typewriter`
<FONT>...</FONT>	This changes the characteristics of all text within the tags Correct syntax it <FONT FACE="font name" SIZE="n" COLOR="color"> Where n is a number between -2 and +3 (be sure you put the + or -) NOTE: for color refer to the COLOR section on the back page	Font color is grey
<IMG>	This tag specifies that an image will be placed at the location of the tag Syntax is <IMG SRC="image name"> you do not need to close this tag	N/A
<A>...</A>	This tag means that all text or images within the tag will be linked to another page syntax is *<A HREF="location of the link">*text/image it will be linked to</a> for email addresses put "mailto:xxx@zzz.com" in the quotes after HREF=. The linked text will be underlined and a different color and linked images will have a border around them	N/A
<CENTER>...</CENTER>	Text and images within these tags will be centered on the page	centered
<RIGHT>...<RIGHT>	Text and images within these tags will be justified to the right	right justified
<LEFT>...</LEFT>	Text and images within these tags will be justified to the left, this is the default setting. You do not need to use this unless you are within CENTER tags.	left justified

LISTS

Lists are a special set HTML tags which allow the user to bullet, number, or categorize lists of items. There are many ways to do lists, the following is the syntax, the variables, and the output.

SYNTAX	VARIABLES	OUTPUT
<UL> <LI>item one <LI>item two </UL>	Unordered List (bullets) <UL TYPE="n"> n= circle (default), disc, or square	list 1 item one item two
<OL> <LI>item one <LI>item two </OL>	Ordered List (numerals) <OL TYPE="n" START="s"> n= 1 (default), A, a, I, i s= wherever you want the list to start (e.g., C would cause the list to begin at C instead of A)	list two item Y item Z
<DL> <DT>Term 1 <DD>definition 1 <DT>Term 2 <DD>definition A <DD>definition B </DL>	Definition List (terms) <DL>	Term 1 definition 1 Term 2 definition A definition B

NOTE: with lists, you can "nest" them within each other. You could have an outline composed of Ordered Lists, and then within the <OL> tags add new <OL> tags. They should automatically indent and use a different style. (the first OL default is 1, the second is something else.) Unordered lists work in the same fashion, (the first UL default is circle, the second default is disc, then the third is square). REMEMBER, the default only changes if the tags are within each other. Look at the example below.

list X
<UL>
   <LI> item A
    <LI> item B
         <UL>
             <LI> item 1
             <LI>item 2
         </UL>
     <LI> item C
</UL>

list X

item A
item B
- item 1
- item 2
item C

Also note how I indent my code, this way it is much easier for me to work through and decide which tag goes with which list. UL's can be nested in OL's and vice-versa as well.

Back to Table of Contents

Special Characters

CHARACTER	SYNTAX
&	&
<	<
>	>
(space without line break)
©	©

These are special ways of getting certain characters to be printed on your page. If you were to put "<" in your script, the HTML would expect you to be writing a tag, so the "<" would not show up on your page. However, if you use "<" in your script, it will come out as "<" on your page.

HTML Comments

As all good programmers know, we should comment our code sufficiently. HTML allows you to use the following syntax for a comment, i.e., whatever you write in these tags will not be seen anywhere ON your page, only if someone is looking at the script.

Misc. comments

HTML really is a skill that you can learn on your own if you invest the time to work at it. Each time you try to do something, don't give up until it is done the way you wanted it...that way you are teaching yourself. If you are browsing the internet and you see a page with some really cool HTML tricks, and you want to know how to do it...then just open their source code and see how. Note how I said "see" how they did it, not "copy" the way they did it. If you really need to copy a part of someone's page directly be sure to email them and ask permission. There are a lot of expert programmers on the internet and many of them are very kind and willing to help a beginner, if you look around you can use them as a very vast resource to build your knowledge.

Another note is that there are quite a few tools out there for new editors to use. Such tools as Netscape's Composer, Microsoft's FrontPage, MapTHIS! and a lot of other shareware tools which make certain tasks of a web-master easier. Even Microsoft Word is able to do HTML (in Word97). Some people choose to use these tools, and others choose to do it in various other ways. No matter what choice you make, becoming a HTML programmer does not require buying the latest software or editing tools, because chances are there is a free tool on the internet that can do the job just as well. I recommend looking at places such as "http://www.shareware.com" and "http://www.winfiles.com" because they have well-organized listings of tools that are available, and small descriptions of each one.

Back to Table of Contents

Colors

Colors in HTML are not usually written as text, but instead they are written in hex. The format is "#xxxxxx"...which can be broken down into 3 colors. "#RRGGBB". you simply replace the x's in "#xxxxxx" with an appropriate value. Appropriate values are any number 0-9, and any letter A-F. 0 is the lowest and F is the highest.

Unfortunately, it is very difficult to randomly combine numbers and letters and come up with decent looking colors, so here is a table with many colors and their HEX equivalents. NOTE: the Pound symbol (#) is very important in "#xxxxxx"...so don't forget it.




		"The University of California 4-H Youth Development Program Engages Youth in Reaching Their Fullest Potential while Advancing the Field of Youth Development."