Lyn's Resource Center: Advanced HTML

Main Page
Basic HTML
Advanced HTML
Images
Frames
Tables
Forms
META Tags
Page Tips
ASCII Codes
Color (Hex) Codes
Links
What's New
Contact Me
Feedback Form

Linking

Definition Lists

Lists

Adding Background Music

Misc. HTML

Linking

There are many situations for using hyperlinks on your pages. This section will discuss the different kinds of links, and how to use them.

Linking to another page:

You can link to a page in your own directory with:

<A HREF="yourfile.html">link text</A>

Make sure the page is in the same directory as the page the link is on. Also, be very careful when typing in filenames! Spelling and capitalization errors will result in the page not coming up when clicked. The above link (just don't click it....it doesn't go anywhere!) would look like this:

link text

You can also link to a page not in your directory. Like, for instance, if you wanted to go to the tlkpride.org's main page you'd type in:

<A HREF="http://www.tlkpride.org">tlkpride.org</A>

This link would have the same appearance as the one linking to another page in your directory.

Linking Within a Document
These links are for when you want to "jump" to a certain spot on your page from a link. This would be a great idea to use with a very long page. (This is how this page is organized. When you clicked a link in the index, you "jumped" to a particular part of the page.) Here's how it works:

First you have to name the section you want to "jump" to. Pick a certain peice of text (a header for a section is usually a good choice) and put the following around it:

<A NAME="your_choice">header text</A>

Next, you have to create the link. Here's how:

<A HREF="#your_choice">link text</A>

Take note of something in the above tags. You have to use the same name in both tags, but in the link tag, notice that the "your_choice" (name yours whatever you like) has a "#" sign before it. This is neccessary to the linking tag. Just make sure the "#" is not in the NAME tag.

Links That Let Visitor Send You Email

These links bring up the viewers email sending program. Your email address (or any that you specify) will show up in the To: line of the email. Here's how to do it:

<A HREF="mailto:lionkingfanatic@netscape.net">email me</A>

You'll have to, of course, replace the lionkingfanatic@netscape.net with your actual email address. You can try out the link below to see how it works. Here's the output:

email me

You can also have the subject line of the email be predetermined by typing:

<A HREF="mailto:lionkingfanatic@netscape.net?subject=whatever">email me</A>

Making Links That Aren't Underlined

This is for those of you that don't want your links to be underlined. You'd add the following to the standard link tag:

STYLE="text-decoration: none"

And that's it! Here's an example with a link tag (let's link to tlkpride.org again):

<A HREF="http://www.tlkpride.org" STYLE="text-decoration: none">tlkpride.org</A>

And here's how it would look:

tlkpride.org

return to index

Definition Lists

You might have noticed the use of definition lists in the Basic HTML section. Here, I'll show you how they're used. First, let's see an example of a definition list:

Word, or phrase being defined: This part is the definition of the word, or phrase. (It can also be used for explaining certain HTML tags as I've been doing on some of these page.)

As you can see, the word, or phrase, being defined is over to the left, and the definition is indented. Now let's see how it was done:


<DL>

<DT>Word, or phrase being defined

<DD>This part is the definition of the word, or phrase. (It can also be used for explaining certain HTML tags as I've been doing on some of these page.)

</DL>

return to index

Lists

Lists are slightly different than definition lists. Also, there a couple of different types of lists. Let's take a look at them and see how they're done.

Here's an example of a list. This one in particular is a bullet list.

List

Item 1
Item 2
Item 3

Now here's the code to do it:


List

<UL>

<LI>Item 1

<LI>Item 2

<LI>Item 3

</UL>

You'd get the same effect by replcing the <UL> and </UL> with <DIR> and </DIR>; or <MENU> and </MENU>.

For other types of lists, you would replace the <UL> and </UL> with other tags. Replacing them with <OL> and </OL> would have this output:

List

Item 1
Item 2
Item 3

return to index

Adding Background Music

If you've ever been to a page that has background music on it, you'd know the impact it has. The only problem with putting background music on your page, is that the tags are specific for certain browsers. So, if you use the tags for Netscape, a person with a IE browser would not be able to hear it. This section will not only teach you the tags needed to put the music on your page, but it will also show you how to get around the browser problem so everyone can hear the music.

First of all, the MIDI (or WAV) file must be uploaded to your directory. Once that is done, you're ready to place it on your page. For these examples, let's pretend our sound file is named sound.mid

Netscape Specific

This tag is for Netscape:

<EMBED SRC="sound.mid">

For the above Netscape tag, there are certain attributes. They are as follows:

AUTOSTART=TRUE: This would cause the file to automatically start instead of requiring the user to double click on the "music box".

LOOP=TRUE: This causes the MIDI to play over and over in a loop sequence.

HIDDEN=TRUE: This causes the "music box" to be hidden from the user's view.

You add the attributes to the tag after the file name. For instance, if you wanted the page to start automatically, you'd type:

<EMBED SRC="sound.mid" AUTOSTART=TRUE>

If you want to add any more attributes, you add them all in with a space between each.

Internet Explorer (IE) Specific

This is the tag for IE:

<BGSOUND SRC="sound.mid">

There's only one attribute to add for this one:

LOOP=INFINITE: This is to make the MIDI paly in a loop sequence. Make sure you use this attribute with the IE specific tag ONLY!

Combined Tags For Both Browsers

Here is the tags to make the MIDI file be heard on both browsers. These are just the basic tags. You can use the attributes mentioned above with these tags.

<EMBED SRC="sound.mid">

<NO EMBED>

<BGSOUND SRC="sound.mid">

</NOEMBED>

Make sure if you use the loop attribute in the Netscape specific tag, you also use it in the IE specific tag.

return to index

Misc. HTML

This section covers other various HTML tags.

Placing HTML Code in Your Document

Normally, when you type HTML code in your editor, it will not show up on your page how you write it. Instead, it does the command that it's intended for. On these pages, if you notice, some HTML tags show up so you can see them. Here is how you make it visible to the viewers of your homepage:

You have to start out with a <CODE> tag. Then, wherever you want the < to appear, you'd type in < and whenever you want > to appear, you'd type in > Then you'd close it with a </CODE> tag.

Preformatted text

Some of the ways of preformatting text only work with certain browsers, so if it doesn't work on yours, you'll know why. Preformatting test is a way to have it come out how you type it. This is also good for making HTML visible on your page, but because of the fact that not everyone will see it, it's not recommended. And, because of this, I will only mention the tags, and not actually give examples since most of you won't see it anyway.

To preformat text, put either <PRE> and </PRE>, or <XMP> and </XMP> around the text.

return to index

Page and graphics design and content © Copyright 1998-2009 Lyn Knarr.
Please email me at lionkingfanatic@netscape.net if you need help with your page/site.
Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission.