logo.gif

Miscellaneous Useful Tags

Once you have your page started there are other useful tags you can use to add a little variety.


Headings

There are 6 heading sizes you can use. This is to have text displayed bigger than normal, like for the heading of a section of your page. Headings are coded as follows, with the largest first and getting smaller as we reach 6:    H1, H2, H3, H4, H5, H6

The following Heading tag: <H3>HTML is fun.</H3> will result in HTML is fun.

PLEASE NOTE: The Header Tags will insert a blank line above AND below the Tag. To illustrate that here is a block of text with the Header tag added:

Roses Are Red
<H4>Violets Are Blue</H4>
I Ran Out of Ideas Here

This will display in your browser as:

Roses Are Red

Violets Are Blue

I Ran Out of Ideas Here

The text in the Header is bolded, and has those blank lines above and below. The easy way around this is to just use the Font Tag and assign a bigger size and then bold the text.

Paragraphs and Line Breaks

So next you will want to write a paragraph. Text will automatically wrap when it hits the edge of the screen, so you don't have to force the text to wrap while writing a paragraph. If you want to force a "Line Break" you can put in the "break" tag <BR>. That will tell the browser to move to the next line down before continuing. If you want to move down two lines before the text continues, you can put two of these <BR><BR>, or you can put a "Paragraph Break" like so: <P>. Both have the same effect.

Example: Typing this code...
This is a test to see if I can make this line break here <BR> and then to test if I can make it double break here <P> so that I will be way down here.

Will result in...
This is a test to see if I can make this line break here
and then to test if I can make it double break here

so that I will be way down here.

Note 1:  Occasionally you may see </P>, but it is not necessary, so don't bother. Please remember that the Line Break <BR> and the Paragraph Break <P> do not need to be "closed" (there is no </BR> and no need for </P>).

Note 2:  Browsers ignore white space in the code of a document. Therefore, you must use paragraph and line breaks or all your words will become one huge paragraph. Try it, you'll see.


Horizontal Rules

The Horizontal Rule is a line that runs horizontally across your webpage. The <HR> Tag is a one-sided tag (like the <IMG> or <META> tags) so we don't need a Closing </HR> Tag to finish this tag set.

If you enter the <HR> tag you will get a line all the way across your webpage, the same color as your browser's color.

There are several Attributes you can use to modify your Horizontal Rule:

WIDTH=
Use this Attribute to specify how wide you want your line to be. You can use percentage value to specify the percentage of the page you want the line to cover, or you can specify the absolute pixel size of the line.

Percentage Method:

WIDTH="50%"

This will give you a line exactly half the size of your page. This method is recommended since no matter what resolution the viewer is looking at your page in, the line will be 50% of the width of their screen.

Absolute Method:

WIDTH="300"

This number is the width in PIXELS. This works well when you need to specify an exact size for your line. For example, if you want to have a line the same size as a graphic, you can specify the same width as the graphic.

ALIGN=
Using this Attribute will give you the ability to specify further, where the line should appear on your page. This is useful if you are trying to place a line that you have already defined as less than 100% the width of the page.

The correct Value's to use are "right", "left" and "center".

SIZE=
Use this Attribute to specify the HEIGHT of the line. If you want a line 20 pixels high, we would code it like this:

SIZE="20"
If you do not specify a size, the line will default to SIZE="1"

NOSHADE
This Attribute is a little bit different than most since it has NO associated Value. This is more like an On/Off switch than a Value, as we have come to know them. You can specify that the line is displayed as a solid line with no shading (shading gives you that sorta 3-D effect) by coding the NOSHADE Attribute like this:

<HR NOSHADE>

As with most tags that use Attributes, you can combine all or some of the Attributes into one tag, like this:

<HR WIDTH="50%" ALIGN="Center" SIZE="20" NOSHADE>

The above example would give you a line 50% the width of the page, sitting in the center, 20 pixels high, with no shading.

HTML Lists: unordered, ordered and definition lists

With HTML you can also make nicely laid out lists. The can be indented, have bullets (dots) in front, or they can be automatically numbered. Every item in a list is tagged with <LI>, and there is no need to close the LI tag.

The Unordered List

An Unordered List will have bullets in front. You open an Unordered List with <UL> and close it with </UL>.

Here is the code and results of an Unordered List:

       The code:

<UL>
<LI> milk
<LI> bread
<LI> fruit
</UL>

       The result:

  • milk
  • bread
  • fruit

Unordered List: defining 'bullet' types

We can use the TYPE= attribute to define how we want the Unordered bullets to look:

TYPE="DISC"
TYPE="CIRCLE"
TYPE="SQUARE"

So, if you want ALL of your recipe items to have SQUARE 'bullets' just add the TYPE= attribute, like this, to your <UL> tag:

       The code:

<UL TYPE="SQUARE">
<LI> 1 egg white
<LI> 1 cup of milk
<LI> 2 cups of flour
<LI> 1 tablespoon of sugar
</UL>

The result:

  • 1 egg white
  • 1 cup of milk
  • 2 cups of flour
  • 1 tablespoon of sugar

The really cool part about this TYPE= attribute is that you can also specify the type of 'bullet' you want EACH individual List item to have, by including the TYPE= attribute right in the <LI> tag:

       The code:

<UL>
<LI TYPE="CIRCLE"> 1 egg white
<LI TYPE="SQUARE"> 1 cup of milk
<LI TYPE="DISC"> 2 cups of flour
<LI> 1 tablespoon of sugar
</UL>

The result:

  • 1 egg white
  • 1 cup of milk
  • 2 cups of flour
  • 1 tablespoon of sugar

The Ordered List

An Ordered List will have numbers in front. You open an Ordered List with <OL> and close it with </OL>.

Here is the code and results of an Ordered List:

       The code:

<OL>
<LI> milk
<LI> bread
<LI> fruit
</OL>

       The result:

  1. milk
  2. bread
  3. fruit

Ordered Lists: defining number types

The Ordered List tag has several attributes that work exactly the same way as the Unordered List tag attributes we discussed above:

TYPE="A" (Upper Case Letters... ie, A,B,C etc.)
TYPE="a" (lower case letters... ie, a,b,c etc.)
TYPE="I" (Upper Case Roman Numerals... ie,II,III,IV etc.)
TYPE="i" (lower case roman numerals... ie,ii,iii,iv etc.)
TYPE="2" (Standard numbers... ie, 1,2,3 etc.)

Now, just as with the Unordered Lists you can either use these attributes in the <OL> opening tag or in the individual <LI> List Item tags!

Ordered Lists: define the starting number

Let's say you want a numbered list that starts at a specific number, like 100. It is simple to specify a Starting Number in your list:

       The code:

Cool Sites from 100-200

<OL START="100">
<LI> Gazoo's Gold
<LI> Fortress of Solitude
<LI> Bravenet

blah blah blah

</OL>

       The result:

Cool Sites from 100-200

  1. Gazoo's Gold
  2. Fortress of Solitude
  3. Bravenet

    blah blah blah

Definition Lists

A Definition List is a little more involved as there are two levels to this list. There is the Term and the Definition. You open a Definition List with <DL> and close it with </DL>. The two levels are determined with <DT> for the term, and <DD> for the definition.

Here is the code and results of a Definition List:

       The code:

<DL>
<DT> milk <DD> a very healthy liquid
<DT> bread <DD> mix your dough and bake
<DT> fruit <DD> my favorite are bananas
</DL>

       The result:

milk
a very healthy liquid
bread
mix your dough and bake
fruit
my favorite are bananas

When the terms are very short, you can use a Compact Definition List. The terms will then be placed on the same line as the definitions. Here is the code and results of a Compact Definition List:

       The code:

<DL compact>
<DT> milk <DD> a very healthy liquid
<DT> bread <DD> mix your dough and bake
<DT> fruit <DD> my favorite are bananas
</DL>

       The result:

milk
a very healthy liquid
bread
mix your dough and bake
fruit
my favorite are bananas

Nested Lists

When you get to be a "List Pro", you can put lists inside lists. This is called Nested Lists. It can be confusing, so try to avoid it if you are still trying to grasp all this.

       The code:

<UL>
<LI> These are fruit:
<UL>
<LI> Apples
<LI> Oranges
<LI> Bananas
</UL>
<LI> These are vegetables:
<UL>
<LI> Celery
<LI> Carrots
</UL>
</UL>

       The result:

  • These are fruit:
    • Apples
    • Oranges
    • Bananas
  • These are vegetables:
    • Celery
    • Carrots


The Block Quote

The BlockQuote tag will move a paragraph over to the left to isolate it from other text. It's like tabbing over a whole paragraph. Open it with <BLOCKQUOTE> and close it with </BLOCKQUOTE>.

Here is an example:

This sentence is not between the blockquote tags.

This paragraph is between the blockquote tags and you will notice that it is indented over. The whole paragraph is indented over until you close the blockquote. It's a pretty handy command actually.
Now I'm out of the blockquote again.


Preformatted Text

The text between the <PRE> and the </PRE> tags will be displayed exactly as it looks on your HTML editor page. It will be displayed with a "fixed-width" font. 

    <PRE>
      Hello everyone!
      This is a sample              See, I'm over here now.
      I'm not putting any tags inside this paragraph.  
      I'm just   P   L    A   Y    I   N     G    around.    
      Pretty fancy, huh?  
    </PRE>

Will be displayed as: 

      Hello everyone!
      This is a sample              See, I'm over here now.
      I'm not putting any tags inside this paragraph.  
      I'm just   P   L    A   Y    I   N     G    around.    
      Pretty fancy, huh?



The next step in the creation of your killer web site is Linking all of those pages you've been creating so you can click your way from one to another:

~~~~~ On to "Hyperlinking To Another Page" ~~~~~