Re: HTML Links

by Thomas Rumley <trumley(at)softhome.net>

 Date:  Mon, 06 Oct 2003 13:15:47 -0400
 To:  hwg-basics(at)hwg.org
 In-Reply-To:  hotmail
  todo: View Thread, Original
<html>
<body>
I'm Assuming that you're asking about how to make links with html. Any
text that you see placed between 2 astricks (*) is meant as an example; I
hope they don't confuse. Sooooooooo.......<br><br>
There are three types of links that you'll run into in every day use and
two more that you'll find useful in helping people contact you through
your web page. <br><br>
* &lt;A href=&quot;http://listen.to&quot;&gt;Listen to a Web
Pro&lt;/a&gt; * <br><br>
A standard link comes in three sections. <br><br>
&lt;A<br><br>
This part of the link is called the link anchor. The A within the tag
shows that this is an anchor tag. The<br>
link anchor holds the url that will be jumped to when a visitor clicks
onto the link. <br><br>
* &lt;A href=&quot;http://listen.to&quot;&gt; *<br><br>
This link uses an absolute address to load a page. The
<a href="http:///" eudora="autourl"><i>http://</a> </i>at the front of
the url tells your browser that this is an absolute address and is
pointing to a web page that is outside of the current site. The
<a href="http:///" eudora="autourl"><b>http://</a></b> is called a
protocol and stands for <b>&quot;H</b>yper <b>T</b>ext <b>T</b>ransfer
<b>P</b>rotocol.. Make sure that the url you are linking to is within
&quot;quotes&quot;, otherwise the link will not work. <br><br>
* &lt;A href=&quot;http://listen.to/hlplinks.html&quot;&gt; *<br><br>
While this example also uses an absolute address, it specifies a page
within the linked site as well. hlplinks.html is a page name. Some pages
may use a <b>.htm</b> suffix instead. There's no difference between the
two and both are used for web pages.<br><br>
* &lt;A href=&quot;http://listen.to/subject/hlplinks.html&quot;&gt;
*<br><br>
Just like the last example this link points to a page within a site but
it also shows that the page is being kept within a sub - directory of the
site. The directory for your page is like a table of contents for a book.
A sub - directory is like the index of a chapter in the book. <br><br>
In the above url &quot;subject&quot; is the name of the sub - directory.
Notice that it is specified with a slash between it's name and the name
of the page. The slash is required and the link will not work without it.
<br><br>
<br>
* Listen to a Web Pro *<br><br>
The second part of a link is the text. This text is what will be
displayed onto the web page when it is loaded by a user. The text may be
anything that you like. It's specified by you. <br><br>
&lt;/a&gt;<br>
And this is the closing anchor tag. Both linked anchors and named anchors
are container tags. They require a closing tag in order for them to work.
<br><br>
<br>
That's the basics of a normal tag, we can start digging into the other
types of tags now. <br><br>
<a name="relativelinks"></a><br>
Relative Links<br><br>
<br><br>
* &lt;A href=&quot;hlplinks.html&quot;&gt;This Page&lt;/a&gt; *<br><br>
This is a relative link. The first thing that you can see is that the
protocol (<a href="http:///" eudora="autourl">http://</a>) of the
absolute link is missing. What a relative link does is point to a page
that is within the same site of the current page. <br><br>
Let's say that the url for the current page is: <br><br>
<a href="http://www.fortunecity.com/skyscraper/sun/520/index.html" eudora="autourl">http://www.fortunecity.com/skyscraper/sun/520/index.html<br>
</a>and you want to link to<br>
<a href="http://www.fortunecity.com/skyscraper/sun/520/webshop.htm" eudora="autourl">http://www.fortunecity.com/skyscraper/sun/520/webshop.htm</a><font color="#FFFF00">
<br><br>
</font>Both pages are being kept in the same sub - directory. In fact, they are being kept in a sub - directory. [520] of a sub - directory [sun] of a sub - directory [skyscraper]. Quite a handful to type into a link. But because they are both in the same folder a relative link can be used. You're wanting to link to the webshop.htm page, so that is all that you have to define within the relative link. <br><br>
* &lt;A href=&quot;webshop.htm&quot;&gt;The Web Shop&lt;/a&gt; *<br><br>
<br>
<hr>
<br><br>
<a href="http://www.fortunecity.com/skyscraper/sun/520/index.html" eudora="autourl">http://www.fortunecity.com/skyscraper/sun/520/index.html<br>
</a>and you want to link to<br>
<a href="http://www.fortunecity.com/skyscraper/sun/webshop.htm" eudora="autourl">http://www.fortunecity.com/skyscraper/sun/webshop.htm</a> <br><br>
But lets say that the target page is in a directory one up from the current directory. One up being that you have to travel one less directory to get to the specified page. Note that the above example that the page webshop.htm is no longer in the &quot;520&quot; sub - directory but lies in the sub - directory [sun] above it. <br><br>
* &lt;A href=&quot;../webshop.htm&quot;&gt;The Web Shop&lt;/a&gt; *<br><br>
&quot;../webshop.htm&quot;<br>
The ../ is a short cut in address speak. What it is saying is that the page is within this site but it is in one directory up. It it had been two directories up you could have addressed it by including another <font color="#FFFF00">../</font>. And so on, up to the main directory itself. <br><br>
<br>
<a name="locallinks"></a><br>
Local Links<br><br>
<br>
Instead of linking to another page lets say that you wanted to link to another section within the same page of your site. Now that you have the basics of links this won't be difficult to follow at all. Inserting local links into your page is a two step process. <br><br>
First, you have to insert a named anchor as the point in the page that you wish to link to. <br><br>
* &lt;A name=&quot;jumptohere&quot;&gt;&lt;/a&gt; *<br><br>
&nbsp;&quot;jumptohere&quot; can be called anything that you wish to. It's just a name. Just like in a link tag the A shows that this is an anchor tag. And just like the link anchor it drives a spike into the web page as a place holder. <br><br>
The second part of a local link is the link anchor.<br><br>
* &lt;A href=&quot;page2.html#jumptohere&quot;&gt;Go here&lt;/a&gt; *<br><br>
This could have been done with either an absolute address or a relative one. We use a relative link because were staying within the same directory as the page that we're working on. The #jumptohere attribute within the link tells the browser what section of page2.html you're linking to. The &quot;#&quot; tells the browser that this is a local link and that jumptohere is the name of the section to jump to. <br><br>
Notice that &quot;jumptohere&quot; is what links the two parts together. It is spelled the same (capitalization counts) in both the named anchor and the link anchor. <br><br>
<br>
And those are the three kinds of links that you're going to run into as you create your web page. Now for two more links that you 're going to find useful.<br><br>
<br>
<a name="imagelinks"></a><br>
Image Links<br><br>
Like a normal link, Image links follow the same rules. But, instead of using text to show a link on your web page, you use an image. <br><br>
* &lt;A href=&quot;page2.html&quot;&gt;&lt;IMG src=&quot;mycatbig.gif&quot;&gt;&lt;/a&gt; *<br><br>
An image tag takes the place of the text between the Link anchor and it's closing element. <br><br>
<a name="email"></a><br>
E-mail Links<br><br>
<br><br>
&lt;A href=&quot;mailto:spiritiwriter(at)full-moon.com&quot;&gt;<br>
&lt;IMG src=&quot;MailMe.gif&quot;&gt;<br>
&lt;/a&gt;<br><br>
<br>
In the course of your writing web pages you'll probably want a visitor be able to contact you in some way. One of the methods is by using an e-mail link. When a visitor clicks on this link, your browser will open up its e-mail program and insert your e-mail address into the TO:<br>
form. <br><br>
As you can see, the main difference in the e-mail link and the standard link is the spot where the url would normally go. Instead of the url, the mailto: option is included. Make sure that you notice where the quotes are placed here. If they're missing or in the wrong place this link will not work. The e-mail address that you want specified should take the place of &quot;spiritwriter(at)full-moon.com&quot;. <br><br>
And that's all there is to links. They look kind of complicated at first glance but once you take a good look they aren't that hard at all. At <br><br>
10:59 AM 10/6/2003 -0500, you wrote:<br>
<blockquote type=cite class=cite cite>How do you navigate with HTML in getting people to your site from other sites?<br>
Michael<br><br>
_________________________________________________________________<br>
Instant message in style with MSN Messenger 6.0. Download it now FREE!&nbsp; <br>
<a href="http://msnmessenger-download.com/" eudora="autourl">http://msnmessenger-download.com</a><br>
</blockquote></body>
</html>

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA