Need some basic HTML instruction

[Barb]

Howdy,

I have tried to figure this out on my own via tutorials and viewing others' page source, but I must be missing something in grasping the following:

You have a website. (great start, I know LOL).
You have a page that is let's say a glossary page, so you have a long list of alphabetized words (and their descriptions).

Now, you have a long the top of the page the alphabet, each letter a link. But it links down the page to the corresponding letter section. Have I explained that clear so far?

Now, for example... I click on "C" and I'm taken down to the "C" section of glossary terms. But the header(?) for that section is not a clickable link. So, how does the "C" link at the top of the page know where the "C" section of terms are down further in the page?

I know it has something to do with the "#", but I totally don't understand the details.

Akin to this question is...
I want to, throughout my site, link back and forth to various subjects. For example, I have an article about widget "rod" (needed a name for the example). Now, I want to link that word "rod" at least one in the article to the definition of "rod" on my glossary page. But how do I do that if the word "rod" on my glossary page isn't a clickable link.

I hope I have explained this right. Please feel free to ask questions if you need further clarification. I am not looking for someone to point me to such-and-such tutorial and say "read"....I have read many tutorials, but like I said, I must be missing something cause I do not understand how a link knows where a word is on a page. Can someone explain in detail please?

Thank you for your patience on this basic question.

[Barb]

I'm sorry, I thought of this after posting the above.

The reason for my questions is that I've been reading that for search engine optimatization, etc...it's a good idea to do some anchor text linking within your site.

Link a keyword from one page on your site, to another page on your site. That is what I am wanting. But I don't want to just link to pages all the time, but also on occassion link to specific words on a page so the visitor doesn't have to scroll the page to find out where the keyword is. Know what I mean?

[bedlam]

Try this:

<h1>Glossary</h1>
<ul>
<li><a href="#a-items">A</a></li>
<li><a href="#b-items">B</a></li>
<li><a href="#c-items">C</a></li>
<li><a href="#d-items">D</a></li>
<li><a href="#e-items">E</a></li>
<li><a href="#f-items">F</a></li>
</ul>

<h2 id="a-items">A</h2>
<p>...</p>

<h2 id="b-items">B</h2>
<p>...</p>

<h2 id="c-items">C</h2>
<p>...</p>

<h2 id="d-items">D</h2>
<p>...</p>

<h2 id="e-items">E</h2>
<p>...</p>

<h2 id="f-items">F</h2>
<p>...</p>

The <a href="#a-items"> will, when clicked, jump to <h2 id="a-items">A</h2> (or, alternatively, to something like <h2><a name="a-items></a>A</h2>...I prefer the former method as it's less typing...) This works for any element, not just headers, so you could also link to an individual word in a paragraph etc:

<p><a href="#amet">Go to 'amet'</a></p>

<p>Lorem ipsum dolor sit <span id="amet">amet</span> consectetuer adispicing.</p>

-b

[edited by: bedlam at 4:43 am (utc) on July 1, 2006]

[jdMorgan]

You are looking for "named anchors."

For each glossary entry, such as "rod" the HTML code would be something like:

<p><a name="rod">Rod</a>: Semi-finished steel that is rolled from a billet and is commonly used for making wire, bolts, and nails.</p>

And you could access that glossary entry from another page on your site with a link:

We use the finest <a href="/glossary.html#rod">rod</a> stock to brace our widgets.

You could use the same general approach to link the letters at the top of your glossary page to the Alphabetic sections:

<a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a>

and then add another named anchor ahead of the first glossary entry for each letter:

<a name="A"></a>
<p><a name="aardvaark">Aardvaark</a>: A nocturnal burrowing mammal of the grasslands of Africa that feeds on termites; sole remaining representative of the order Tubulidentata.</p>

Note that in this case, the named anchor is simply opened and closed with nothing required in-between.

The single-most common problem using named anchors is that the case of the anchor and the link to that anchor must agree. For example, the named anchor "Rod" cannot be linked-to as "#rod."

Jim

[Barb]

Bedlam and Jim,

Thank you! I *think* I have grasped how it works now. You both explained the concept in detail - which has been sorely lacking in many tutorials.

One last question....
In the example of the glossary ... when you link down to the "C" section.... when you place that anchor around it - is it clickable? Does it take on link characteristics (such as link colors and such as created in a css)? I don't want these to "look" like links (not talking about the anchor link to get you there)....

Hmmm, guess I'll have to try one and answer that for myself LOL. If they do end up looking like links, any way to change that?