SpydarGrafix³  Lists & Advanced Formatting
Tags Covered
[<UL></UL>] - [<OL></OL>] - [<LI>] - [<PRE></PRE>]
[<BLINK></BLINK>] - [<MARQUEE></MARQUEE>] - [<BLOCKQUOTE></BLOCKQUOTE>]

Unordered List Tags:

The <UL></UL> tags are used for making lists on your pages. These lists would not be numbered just bulleted like this:

My favorite things.

  • Cats
  • Computers
  • Pizza

Here is how you will write it:

My Favorite Things
<UL TYPE=circle>
<LI>Cats
<LI>Computers
<LI>Pizza
</UL>

You will notice in the coding, there is a <LI> before each item in your list. This is a List Item, to be used when making a list on your web page.

[ Back to the TOP ] - [ Back to the Tutorial List ]
-------------------

Ordered List Tags:

The <OL></OL> tags are used for making numbered or lettered lists on your page. It would look like this:

My favorite things.

  1. Cats
  2. Computers
  3. Pizza

Here is how you will write it:

My Favorite Things
<OL TYPE=1 START=1>
<LI>Cats
<LI>Computers
<LI>Pizza
</OL>

Make sure once again, that you use the <LI> tag when listing each item. In the Ordered List tag, this time use a TYPE=, such as 1 or A or a, then a START=, to tell the list at which point to start. Like this: <OL TYPE=1 START=1>. This list would be numbered starting with number 1.

Summary:
TYPE attributes for <UL TYPE="...">are:

  • disc
  • circle
  • square
TiP:You may also use these TYPE attributes as <LI TYPE="..."> before each item...

And TYPE attributes for <OL TYPE="..."> are:

  • A
  • a
  • I
  • i
  • 1

[ Back to the TOP ] - [ Back to the Tutorial List ]
-------------------

List Item Tag:

To make this list, you start with the opening tag <UL> or <OL>, whichever kind of list you are using. Then you make the list of what you want, each item starting with List Item <LI>. Then, don't forget to close your Unordered or Ordered List tag with </UL> or </OL>. If you want the little dots to show next to each item, in your <UL> tag, put TYPE=circle or square or disc. Like this: <UL TYPE=circle>.

[ Back to the TOP ] - [ Back to the Tutorial List ]
-------------------

Preformatted Tags:

The <pre> </pre> tags are used to make your web page look as you want it to. HTML does not recognize indents and specific columns. So you use the <pre> </pre> tags to do that for you. Like this:

Monthly Income _______________________________________________________ January February March April _______________________________________________________ $1585.96 $1264.58 $1353.63 $1146.39

Now the text will be laid out the way you typed it into your .html file. Here is how it was coded:

<PRE><CENTER>
Monthly Income
______________________________________________________

January          February          March              April

______________________________________________________
    $1585.96        $1264.58        $1353.63        $1146.39
</CENTER></PRE>

[ Back to the TOP ] - [ Back to the Tutorial List ]
-------------------

Blink Tags:

Now we will get into something you will run across designing your web pages. Some tags are browser specific. Meaning what may work for NETSCAPE won't always work for Microsoft Internet Explorer. The <BLINK></BLINK> tags are to make messages blink on the screen.

[ Back to the TOP ] - [ Back to the Tutorial List ]
-------------------

Marquee Tags:

The <MARQUEE></MARQUEE> tags work the same as the <BLINK></BLINK> tags, only they are browser specific to MSIE. These tags are not recommended but are fun to see your words come to action.

<MARQUEE BGCOLOR="#0000F0">This will be scrolling if you are using MS Internet Explorer. See how the BGCOLOR attribute allows you to change the background color of the MARQUEE?</MARQUEE>

<MARQUEE BEHAVIOR="SLIDE">This will SLIDE...and stick</MARQUEE>

<MARQUEE BEHAVIOR="ALTERNATE">This will Alternate</MARQUEE>

Other attributes are:

  • ALIGN="..." values of "TOP", "MIDDLE", and "BOTTOM"
  • DIRECTION="..." values of "Left" or "Right"
  • HEIGHT="..." specifies the height of the MARQUEE in pixels or %.
  • HSPACE="..." specifies the left and right margins of the MARQUEE in pixels.
  • LOOP="..." the number of times to loop.."-1" or "INFINITE" make it loop indefinitely.
  • SCROLLAMOUNT="..." number of pixels between each draw of the marquee.
  • SCROLL DELAY="..." number of milliseconds between each draw of the marquee
  • VSPACE="..." top and bottom margin for the outside of the marquee
  • WIDTH="..." the width of the marquee in pixels or percentage of the screen.

[ Back to the TOP ] - [ Back to the Tutorial List ]
-------------------

Blockquote Tags:

The <BLOCKQUOTE></BLOCKQUOTE> tags are used to quote something, or set it apart from other text. Like this:
This is the Blockquote tags in use.


There are two more HTML tags to be aware of, they are not coding to make things visable on your web page, they are reference codes.

The first is the COMMENT tag, this tag is useful to you, for when you want to edit and update your web page, which should be done often. As you write your page, make comments to yourself on your page, such as: <!-- about me --> Then below the comment would be what you let your viewers know about you. Use <!-- comment --> often, so you can easily find where you need to go to fix or change things. Try something. Up on the menu bar of your browser, you will see View. Click on View, then go down to Source. You will then see how this page is constructed. Notice the many comments we have used. It makes editing a lot easier in the future.

The next HTML tag is the DOCTYPE tag. This tag is one the tells browsers what version of HTML you are using. In this case we are using HTML3.2 so, at the very top of each page we have written we have included the DOCTYPE tag, it looks like this:

<!doctype html public "-//W3C//DTD HTML 3.2//EN">

This way, the browser knows this page has been coded with HTML3.2.

Try early on in writing HTML to use these two tags, it will save time and energy later on.


Note: It is a good idea to have a copy of each browser loaded on your system, that way you can check your pages with both browsers as you go along. Being sure it looks the same for everyone, no matter what browser they are using.

[ Back to the TOP ]

[ Back to Tutorial List ] - [ Next Lesson ]

[ Home Page | HTML Bookstore | Free Web Graphics | Our Friend's Pages ]

[ E-Mail Us ]


This page hosted by Get your own Free Home Page


This Site Created By JPWeb Consulting
©1996-2004 - All Rights Reserved
1