What follows is an summary of several useful HTML tags followed by examples of their use.

Review the examples carefully. You should be able to see if a particular tag will create your desired effect or effects.

For a more complete listing of tags and more details on ways in which they can be used, please refer to the class' "Recommended Resources" page at http://www.vu.org/webdesign/desk/recom.htm.

The <BR> tag

The <BR> creates a line break with no extra space between the two lines, much like hitting return on a word processor. Since HTML will ignore hard returns you will need to insert this tag when you want to stop typing on one line and begin again on the next. You can also add the attribute "CLEAR" and a value of <BR CLEAR="LEFT">, <BR CLEAR="RIGHT"> or <BR CLEAR="ALL">. This will stop text from wrapping around an object and "clear" the margins to the right, left or both of the tag. This tag has no closing tag half.

EXAMPLE TYPE 1:

This is the first line of the example of using the <BR> tag.
This is the second line, it is separated from the first line by the <BR> tag.

EXAMPLE TYPE 2:

These are examples of using "CLEAR" with the BR Tag.

  In this first example, the text is NOT cleared.

  In this second example, the text has been cleared RIGHT.

The <P></P> tag set

The <P></P> tag set is used to create a line break with an extra space between the two lines. It works much like a double space on a word processor. Use it to separate your paragraphs just as you would in any other writing to break a web page up into more easily read "chunks". When writing web pages it is sometimes suggested that paragraphs on a web page be kept under four lines in length, to avoid large unbroken stretches of text which may be tedious to read.

EXAMPLE:

This is the first line of the example of using the <P> </P> tag.

This is the second line, it is separated from the first line by the <P> </P> tag.

Changes to the alignment of your paragraph can be made with this tag by adding to the tag <P ALIGN=></P> and making the value for the "=" LEFT, RIGHT or CENTER. This can be particularly useful when adding images to the web page in a situation in which you want the text to "wrap" around the image. Just remember if you use the <P> tag this way, the closing tag </P> is needed to "reset" the alignment!

EXAMPLE:

Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.Test text to show the wrapping effect with text aligned with the ALIGN="LEFT" added to the <P> tag.

The <CENTER> </CENTER> tag set.

Centers the text or what ever is placed between the tags. Not much else description needed here. Can be used to center any text or other items placed between the tags. Note: This tag is one that is considered "deprecated' with the adoption of HTML 4.0. It can still be used to center text at this time, however, reading over the Intro to HTML 4.0, will explain the significance of this change.

EXAMPLE:

This is an example of using the <CENTER> </CENTER> tag.

---

<B></B> tag set.

The BOLD tag set causes the text between the tags to be in BOLD print. Good for emphasis. Also used is the <STRONG></STRONG> tag set which give approximately the same effect as the <B></B> tag set. The BOLD set is used more often.

EXAMPLE:

This is text has been made BOLD by the <B> </B> tag set.
This text is not bold.

<I></I> tag set.

This tag set indicates what is between the text is italicized. Another nice one to use for emphasis. In fact also used for italics is <EM></EM> or the tag for Emphasis. In most browsers it give the same effect either way. Something that I have noticed is that the <I></I> tag set renders the text in a slightly lighter typeface as well, a consideration you might want to keep in mind. Check how your italicized text appears on your page. Not much good to emphasize it if no one can read it!

EXAMPLE:

This is text has been ITALICIZED by the <I> </I> tag set.
This text is not italicized.

---

The <HR> tag

Creates a horizontal rule across the page. You can get creative with this tag by modifying it in many ways. Not only can you create a straight, line all the way across the page, you can manipulate the <HR> tag in quite a few ways.

EXAMPLES:

<HR WIDTH="50%"> creates a line centered on the page that is 50% of the page width.

---

<HR WIDTH="25%"> creates a line centered on the page that is 25% of the page width.

---

By adding an additional modifying element called "ALIGN" you can change the position of the line on the page, LEFT, RIGHT or CENTER.

<HR WIDTH="50%" ALIGN="RIGHT"> Pushes the line to the right margin.

---

<HR WIDTH="25%" ALIGN="LEFT"> Pushes the line to the left margin.

---

You can add an additional attribute called SIZE to your <HR> tag. This will cause the line created to be thicker.

<HR SIZE="10">:

---

and <HR SIZE="5">:

---

You can also use noshade to cause the line to appear solid rather than grooved. Unlike most attributes, the NOSHADE should not be in quotation marks inside the tag.

<HR NOSHADE>

---

All these attributes can be combined:

<HR WIDTH="50%" SIZE="15" NOSHADE ALIGN="RIGHT">

---

<HR WIDTH="25%" ALIGN="CENTER" NOSHADE SIZE="5">

---

---

The Heading <Hx> </Hx> tag set.

Placing a text between the two halves of this tag set and substituting a number from one to six for the "x" creates the a heading on the web page. Typically used to set apart "sections" of a web page, like a headline, chapter heading or a title. (Note: This should not be confused with the <TITLE> of the web page.) These tags used only in descending order. (In other words, a <H1 > </H1> tag set would not be placed lower on the page than a <H2> </H2>). Also each should only be used once per web page.

EXAMPLE:

Placing text between the <H1> </H1>tags creates a the largest heading:

<H1 > is the largest of the headings

Text placed between the tag set <H2> </H2> creates a slightly smaller heading:

<H2>

This continues all the way down to the smallest heading, <H6> </H6>. Though there probably is not much reason for using headings much smaller than the

Writing <H3> </H3> tag set. Examples of the sizes of the remaining headings are below

This is an <H3>.

Here we have an <H4>.

This <H5> may be too small to be useful.

And <H6> is probably smaller than the text on the page.

<PRE></PRE> tag set

The text placed between these tags will be PREFORMATED, or in other words, will appear on the page as it appeared in the original document. A good example is a poetry. If you are using a poem, you might want that poem to appear on your web page exactly as it does on the page from which you have taken it.

EXAMPLE:

I daydreamed night dreams

              and they all seemed so real.

      then I fantasized fantasies and

              realized they were reality!

This web page created by Kathleen M. Weber on February 4th, 1998.