topper


Diva Help Pages
Other HTML Tags



How Do I Make a line for a web page?
What type of Lists are there?
What is Blockquote?




How Do I Make a line for a web page?

To make a line on a web page without using a bar or other graphic is done like this.

The Horizontal Rule is a line that runs horizontally across your webpage.
The <HR> Tag is a one-sided tag so we don't need to </HR> close this Tag.

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 things you can do to make the line different. You need to set attributes to the coding so that the line will do a variety of things.
You can specify the width in either Percentage (called the Percentage Method )or in Pixels (called the Absolute Method )ie.

<HR WIDTH="50%"> or <HR WIDTH="300">.  Below you will see how each looks


Using Percentage Method
This will give you a line exactly half the size of your page. This method is a good one since no matter what resolution your visitor is looking at your page in, the line will be 50% of the width of their screen.






Using Absolute Method ( Pixels )
This number is the width in PIXELS. This is good when you need to specify an exact size for your line. ie if you want to have a line the same size as a graphic, you can specify the same width as the graphic.




You can also use other Attributes to modify your Horizontal Rule such as where the line should be on your page (left, center or right)

<HR WIDTH="300" ALIGN="LEFT">



<HR WIDTH="300" ALIGN="CENTER">


<HR WIDTH="300" ALIGN="RIGHT">


You can also specify for it to have no shadow meaning that instead of looking indented on a page it will look higher. 



The 20 Pixels is the height of the line. You can reduce it or enlarge it by changing the number of pixels.






Back To top



What type of Lists are there?

There are four types of lists you can make but you need to start each list the same way by indenting using the indentation tag <UL> indents one space in and make sure to close it with </UL>


1) Unordered,
2) Ordered and
3) Definition lists
4) Nested Lists



Unordered Lists
An Unordered List will have bullets in front. You can also give it attributtes that will show a different bullet. TYPE="DISC" TYPE="CIRCLE" TYPE="SQUARE"



The Code


<UL TYPE="DISC">
<LI> milk </LI>
<LI> cereal </LI>
<LI> sugar</LI>
</UL>
The Result
  • milk
  • cereal
  • sugar
The Code

<UL TYPE=" CIRCLE">
<LI> milk </LI>
<LI> cereal </LI>
<LI> sugar</LI>
</UL>

The Result

  • milk
  • cereal
  • sugar
The Code

<UL TYPE="SQUARE">
<LI>milk </LI>
<LI>cereal </LI>
<LI>sugar </LI>
</UL>

The Result

  • milk
  • cereal
  • sugar


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


The Code The Result
<OL>
<LI> milk </LI>
<LI> bread </LI>
<LI> fruit </LI>
</OL>
  1. milk
  2. bread
  3. fruit

Ordered Lists: using number types
When using the The Ordered List tag you can change has several attributes that work exactly the same way but you can specify how they look

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

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 50.
It is simple to specify a Starting Number in your list:


The Code The Result
Fantasy Sites Sites from 50-100
<OL START="50">
<LI> Fantasy Of Old</LI>
<LI> The Realm of Fantasy</LI>
<LI> The Mystery of Unicorns </LI>
</OL>
Fantasy Sites Sites from 50-100
  1. Fantasy Of Old
  2. The Realm of Fantasy
  3. The Mystery of Unicorns






Defintion Lists
A Definition List is a little more complicated 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.


The Code The Result
The Canadian Food Guide specifies that you need a serving of each of the following per day

<DL>
<DT> milk </DT>
<DD> 4 glasses a day</DD>
<DT> bread </DT>
<DD> 2 servings per day</DD>
<DT> fruit </DT>
<DD> 3 servings per day</DD></DL>

The Canadian Food Guide specifies that you need a serving of each of the following per day
milk
4 glasses a day
bread
2 servings per day
fruit
3 servings per day

When the terms are very short, you can use a Compact Definition List. The lists will then be placed on the same line as the definitions.

The Code The Results
The Canadian Food Guide specifies that you need a serving of each of the following per day
<DL compact>
<DT> milk</DT>
<DD> 4 glasses a day</DD>
<DT> bread </DT>
<DD> 2 servings per day</DD>
<DT> fruit</DT>
<DD> 3 servings per day</DD></DL>
The Canadian Food Guide specifies that you need a serving of each of the following per day
milk
4 glasses a day
bread 2 servings per day
fruit
3 servings per day



Nested Lists
This is a very complicated because you are putting can put lists inside lists. This is called Nested Lists. It can be confusing, so try to avoid it if you overwhelmed by all of this.


The Code The Results
We must eat fruits and vegtables each day.
<UL>
<LI> These are some fruits:</LI>
<UL>
<LI> Apples </LI>
<LI> Oranges </LI>
<LI> Bananas </LI>
</UL>
<LI> These are some vegetables: </LI>
<UL>
<LI> Celery</LI>
<LI> Carrots </LI>
</UL> </UL>
We must eat fruits and vegtables each day.
  • These are some fruits:
    • Apples
    • Oranges
    • Bananas
  • These are some vegetables:
    • Celery
    • Carrots





Back To top



What is Blockquote?

The BlockQuote tag will move a paragraph over to the left to isolate it from other text. It's the easiest way to place a whole paragraph.

Open it with <BLOCKQUOTE> and close it with </BLOCKQUOTE>.


The Code The Result
The Canadian Food Guide has reported the following:

<BLOCKQUOTE>The Canadian Food Guide states that you need a serving of fruits and vegetables per day to remain healthy but the statistics show that not everyone is getting their proper servings. </BLOCKQUOTE>
It seems that the quality of the food today does not provide sufficient amounts to maintain health and so we need to take vitamins .

The Canadian Food Guide has reported the following:

The Canadian Food Guide states that you need a serving of fruits and vegetables per day to remain healthy but the statistics show that not everyone is getting their proper servings.

It seems that the quality of the food today does not provide sufficient amounts to maintain health and so we need to take vitamins .




Back To top



Diva Help Pages


Diva Home Page


Diva Help Site Map



All content © 2002 by Diva of the Net
All right reserved.
All other copyrights belong to their respective holders.

All graphics © 1998 - 2002
Dream Web Designs by Lady Care
All right reserved.
All other copyrights belong to their respective holders.

Lady Care's Logo
This background set was made and copyrighted by Lady Care.
Please do not take any of the set or the graphics.
Thank you for respecting the Copyright Laws.