(NOTE: No closing tags are required on the first three tags below.)

The <BR>tag
Creates a line break, just 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.

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. The <P>tag
Creates a line break, much like a double space on your word processor. Use it to separate paragraphs just as you would in any other writing. This tag may be used to break a web page up into more easily read "chunks". Stylistically, it is sometimes suggested that paragraphs on a web page be kept under four lines in length, to avoid boring the reader. This tag can come in handy in that case.

As mentioned briefly before, the <P> tag does have a closing tag,</P>, that is still only rarely used. Unless you know that the situation calls for it, it is, for now, safe to leave it off.

<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="40%" ALIGN="RIGHT"> Pushes the line to the right margin.

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

<HR WIDTH="25%" ALIGN="Center">Pushes the line to the Center of the page.

This can also be done with the following code:

<center><hr width=25%"></center>

You can add an additional attribute called SIZE to your Hard Rule. This will cause the line created to be thicker. For example,

<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.

For example:

<HR NOSHADE>

All these attributes can be combined:

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

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

The <CENTER> </CENTER> tag set.

Centers the text or whatever is placed between the tags. Not much more description needed here. Can be used to center any text or other items placed between the tags.
The <H1> </H1> tag set.

This is <H1></h1>

Placing a text between creates the largest heading and is actually the first of six headings available. Typically used to set apart "sections" of a web page, like a headline and stylistically 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>).

The books say each should only be used once per web page. I disagree!

Reminders:

  • HTML ignores regular line breaks or "hard returns" on the keyboard. If you want a line break you will have to use one of the tags which can achieve that effect.
  • HTML is NOT case sensitive. When typing tags it does not make a difference in the way it is read by the browser if you type UPPER or lower case. It is considered better stylistically to use all UPPER case.
  • You should try to put each tag or tag set on a separate line, rather than running all the text and tags together. Keeping them separate makes them easier to read and to update.
  • Don't leave off an angle bracket on your tags.
  • Don't forget the opening tags and the closing tags on all tags that require it.
  • If quotation marks are indicated around an attribute, such as the WIDTH attribute in the HR tag i.e.:
    . be sure to use them! While it may be safe to leave them off in certain cases, it is far safer to be sure you always surround your attributes with quotation marks!
You won't believe how much annoyance a single missing angle bracket, quotation mark or / can cause! Until it happens to YOU!

These tags are a good start to add your touch to your page, but they won't satisfy you for long. Let us continue on learning more tags.

More Tags and Things To Do With Them

<BLINK></BLINK>

This is blinking text

Causes a blinking effect to the text in between. This tag set is a bit unpopular to say the least. Some people think it shouldn't be used at all. Most agree using sparingly is best. But it can be a fun tag and can effectively used to draw attention to a key word. This tag is also not supported by all browsers, MSIE does not support it.
<B></B>

The BOLD tag set causes the text between the tags to display in BOLD print. Good for emphasis.

Also used is the <STRONG>Strong</STRONG> tag set which give approximately the same effect as the <B></B> tag set. The BOLD set is used more often.

<I>Italics</I>

This tag set indicates the text in between is italicized. Another nice one to use for emphasis. In fact, also used for italics is <em>Emphasis</em> or the tag for Emphasis. In most browsers, it gives the same effect either way.

Lists:

Lists are a useful way of presenting information in a easily readable format. A list of "Hot Links" is virtually a standard on home pages. Not surprisingly, lists can be achieved in a number of ways. We will discuss the two most common in this lesson. <UL></UL>

Unordered or Bulleted Lists:

You have probably seen them on almost every web page, as below:

My favorite Pages:
Gypsy-J's
Fundcraft Recipes

The unordered list is made of the opening and closing tags <UL></UL>. The items to be listed will be placed between the<UL></UL>tags. By using <LI> (with no closing tag needed) to indicate each "list item." There is an automatic line break between list items. To create an additional line space you can use the <P> tag in front of each list item.

NOTE:

The <LI> tag is another tag that does not have to have a closing tag. but most people I have noticed add it. The HTML for the unordered list above would be written like this:

<UL>My favorite things:
<LI>Gypsy-J's
<LI>FundCraft Recipes
<LI>Kid's Stuff
</UL>		 LOOKS LIKE
    My favorite things:
  • Gypsy-J's
  • FundCraft Recipes
  • Kid's Stuff

<OL></OL> Ordered Lists:

My Favorite TV Shows
1.Days of Our Lives
2.Another World
3.I Love Lucy

Not quite as common but very useful are lists that are ordered rather than simply bulleted. The opening and closing tags for an ordered list are <OL></OL>. <LI> is used to indicate each item on the list here as well, except the default is Arabic numeral 1, 2, 3, and so on. It is possible to alter the default to show Roman numerals, and upper and lower case letters as well. This is how you would write the list as above:

<OL>

My Favorite TV Shows
<li>Days of Our Lives
<li>Another World
<li>I Love Lucy
</OL>

 LOOKS LIKE:
    My Favorite TV Shows
  1. Days of Our Lives
  2. Aother World
  3. I Love Lucy
Lists can be used in many ways and come in several other forms as well.

<PRE>PRE TAG</PRE>

The text placed between these tags will be PREFORMATED, or in other words, appears on the page as it did in the original document. A good example is a poem where you might want the lines to appear on your web page exactly as they do on the page from which you have taken it. The following poem is surrounded by the <PRE></PRE>tag set. 

     			Prayer for the Addicted
  
			God, grant me the serenity
  			To accept a post I cannot change,
  			Courage to walk past the computer
			without turning it on when I'm running late for work,
  			And the wisdom to know the difference
			between "come to bed now" meaning
			"let's have some fun"  and "come
			to bed NOW" meaning "that computer
			has got to go"
<BLOCKQUOTE>BLOCKQUOTE</BLOCKQUOTE>

<blockquote> BLOCKQUOTE will set apart the text between the tags by indenting it slightly. Used stylistically much like you see in articles and research papers when another author or reference is quoted.</blockquote>

Next Week:
Hyperlinks and Using Images On Your Page

To get you started, here is the HTML for a link allowing the person "clicking" it to send you e-mail.

<A HREF="mailto:yourname@yourisp.com">E-mail me</A>

Substitute your e-mail address in this example, of course. Write whatever you want to show on the web page between the opening and closing tags, such as "E-mail me" or "E-mail Gypsy-J".

It is good to always include an e-mail link to yourself on your web page. This way people viewing your page can give you feedback.

Good Luck and Have Fun

Lesson One
Lesson Two
Lesson Three
Lesson Four
Lesson Five
Lesson Six
Page Extras
Netscape Color Codes
Links for Graphics
back


barline