back to index

NESTED LISTS

You can also put lists within lists if you wish like I have done with the index. This is called a nested list and is written like so:

<UL>
<LI>Lists
      <OL>
      <LI>Ordered
      <LI>Unordered
      <LI>Defined
      </OL>
<LI>Styles
      <OL>
      <LI>Strong
      <LI>Emphasis
      <LI>Computer Code
      </OL>
</LI>
</UL>

As seen above you do need an ending </OL> or </UL> for each list but only one ending </LI> at the completion of the nested list. Of course how you makeyour nested list is entirely up to you whether it be UL in OL, DL in UL, or whatever. The above example would look like this on your page:

Lists
1. Ordered
2. Unordered
3. Defined
Styles
1. Strong
2. Emphasis
3. Computer Code

HORIZONTAL RULE

This produces a horizontal line that can be used to separate sections of your page. There are four options that can be used in writing it. The first is size, which equals the thickness of the line and is represented by a number. Next is width, which determines how far across the page the line will extend and is represented by a percentile. Then there is alignment, which can be left, right, or center. To make your line a black line, include the command NOSHADE. It is written as such:

And looks like:

LINKS

We can now learn how to make links, which are the foundation the web is built upon, leading us from one page to another. They can also be used to spiff up your page with images, sounds, and backgrounds. There are three basic types I will cover: external, internal, and mailto.

EXTERNAL

The external link basically takes you to another page. It is composed of three parts within the < and > signs. A, which is known as the anchor command, HREF, which tells the browser to create a pathway, and the URL of the page you want to link to. AN anchor is the word, phrase, or image you wish to use as the clickable link. The code is written as follows:

<A HREF="http:// your URL ">LINKING</A>

Whatever is between the <A HREF> and </A>, in this case the word LINKING, is the anchor word. This takes someone to the page you want when clicked on. We will talk aout clickable images in the IMAGES section. This example:

<A HREF="https://members.tripod.com/~Constantine_7/wi erd.html">Wierd sites</A>

looks like this:

Wierd sites

and will take you to my page about wierd links. You may center/align it as you wish if it is a stand-alone word or phrase (not in a sentence). Notice the color of the text is different. This is because we set a certain color for links at the beginning of our page in the BODY BACKGROUND/BGCOLOR command.

TRANSITIONS

Transitions give you the cool effect of having whatever page you link to seem to wipe off or zoom out from the page you just left. Click here to see an exampl of this effect and hit your back button to return. T0 do this you add a TRANSITON= statement to the end of your A HREF command:

Here is a listing of all the different transition effects i have found. Just click on each to see the desired effect.

blackfade fades in new screen slidedown slides new screen from top to bottom over old one

slideleft slides new screen over old one from left slideright slides new screen over old from right

slideup slides new screen over old bottom to top wipedown wipes old page off from top to bottom

wipeleft wipes old page off left to write wiperight wipes off old page right to left

wipeup wipes old page off from bottom to top

INTERNAL

An internal link will take you to a different part of the same document. For example, click on top and you will be transported back to the index of this guide. Then click on INTERNAL to be brought back to this section. Internal linking is written in two parts, the first of which is the <A NAME> command. Basically, you must name the part of the document you wish to link to. When I linked to this section I wrote this next to my heading of INTERNAL:

<A NAME="IN">INTERNAL</A>

Of course you would use whatever name you chose. You do still have to use the ending </A> command. If by chance you are naming (or linking) text that is in between headers then these commands must also fall within the headers, next to your text, like so:

<H2><A NAME="IN">INTERNAL</A></H2>

Now that you have a name for the place you wish to link to you must create the second part, which is the link itself. It is written the same as an external link but with the character # and whatever name you chose for the section you are linking to. The URL is no longer needed unless you are linking to a specific section in another page. More on that next. The link here looks like:

<A HREF="#IN">INTERNAL<A>

IN, as discussed, is the name of the place I wish to link to. The # character basically tells the browser to go to the place named.

You can combine external and internal links to go to a specific section of a different page. This is done by combining the URL of the page and the named section you wan to go to. NOTE: You must get permission from the author of that page to do this or he must have already named the section you wish to go to and you know that name. The folowing would take you directly to the middle of my homepage design site, at which point I have put a listing of HTML sites.

<A HREF="https://members.tripod.com/~Constantine_7/ho mepagedesign.html#LINKS">LINKS</A>

I named that section LINKS around the word guide. The above example would look like this on your page:

LINKS

Try it and see!!!!

MAILTO

This is a link that basically allows people to mail you directly from your site. You can use text or an image to do this. The codes are:

Mine would look like this:

You may try it and send me a message if you like:

Mail Me!

Again you may center/align it as you wish.

IMAGES

Images are fairly easy. They will have a file name of .gif or .jpg and can be animated or not. Unfortnately, webtv users are unable at this time to download them, so we must link to where we can find them on the web. You must have permission to do this first. Of course there is always Draac. He has a huge collection of images you can link to for free. The code is written as follows:

ING SRC tells the browser you are linking to an image to be displayed on your page. After the URL of the page you wish to link to you must include the image name:

The above would show up on your page like this:

Images can be centered or aligned.
When text is chosen to be incorporated next to an image it automatically show up at the bottom, like this:

Of course there are ways to change that.

You can decide where your text will be put by including an <ALIGN="top,middle, or bottom"> in with your IMG SRC code:

<IMG SRC="https://members.tripod.com/~Constantine_7/gifs/marvin.gif" ALIGN="top">you can try it like this

which would look like:

you can try it like this

Or you can use ALIGN=middle to look like this

Another option you might want to add is the ALT command. Some browsers may not be able to read your image, so by putting in ALT="description of image" you can let them know what is supposed to be there:

Earlier, I mentioned making an image a clickable link. Instead of clicking on text to make a link to another page you can instead do it with an image. This is done by puting the IMG SRC code in where the text was in previous examples. ALT is strongly recommended here so that browsers that are unable to read the image still have some text to click on. The code would look like this:

which looks like this and takes you directly to my homepage

This will also work with the Mailto option.

SOUNDS

Last but not least we come to sounds. They can come in the form of small sound bites (wavs) or computerized songs (mids). There are other forms, but most cannot be used with webtv as of yet so I will not cover them. There are two ways to put sounds on your page, embedding and/or background sound.

EMBED

When you embed a sound a small speaker shows up on your page like this:

By clicking on the speaker the chosen sound is heard, in this case in the form of a wav. The embed is created (at least with webtv) much like an image. You use the EMBED SRC= command, the URL of the page, and the name of the wav or mid you are linking to. The above was written like this:

<EMBED SRC="https://members.tripod.com/~Constantine_7/sound/darth1.wav"& gt

BACKGROUND SOUND

Background sound comes up automatically when a page is loaded. There is no speaker to click on and the reader has no choice but to have it play. It is written the same as the EMBED command but substitute BGSOUND for EMBED, like this:

It is recommended that this is one of the last commands before </BODY>. No ending </> is needed for either EMBED or BGSOUND. Both can be set to play over and over again by including the LOOP option in the code, which must be set to TRUE:

This will play ad nauseum unto infinity or until the reader leaves the page.

TABLES

I would love to go into a tutortial about Tables but i fear i have niether the time or inclination.Fortunately though i do have a reference site which was of great help to me. Not only does it cover the different tags and commands of tables but also provides examples of almost every situation you could think of in designing them. Please go to Tables in Netscape 1.1

REFRESH

Last but not least we will discuss how to get a page to automatically refresh to another page or the same on without having to click on something. This involves using a META tag and is put in the HEAD of the page. An example of how it is written would be:

Breaking it down, the HTTP-EQUIV="refresh" basically tells the browser to refresh to another page. How long this will take is designated by the 20 in this example (in seconds) under CONTENT. It can be any length of time you desire. You then put the URL of the page you wish to change to after the desired amount of time. For an example please go back to my homepage and try either the MidnigtRoom section or the Who's Your Daddy section.

Well, that is all I wish to cover here in this guide. If you wish to find out about FRAMES, which I personally have not had use for as of yet, please try one of the other HTML sites on my homepage design site.I hope this guide has been of service to you.

BACK TO INDEX Questions or comments?

BACK TO HOMEPAGE

blackfade	fades in new screen	slidedown	slides new screen from top to bottom over old one
slideleft	slides new screen over old one from left	slideright	slides new screen over old from right
slideup	slides new screen over old bottom to top	wipedown	wipes old page off from top to bottom
wipeleft	wipes old page off left to write	wiperight	wipes off old page right to left
wipeup	wipes old page off from bottom to top