Links are going to connect your website to the World Wide Web and to itself internally, that is to pages in your website or paragraphs on the same page. Let's look at them first.
Internal Links
These are for when you want to send visitors to another part of the page they are viewing at that moment.
Here we'll look at the [A] (for address) tag and the NAME and HREF attributes.
Let's look at an example of internal links or "anchors".
Here's a simple example, you have a list of internal addresses. The visitor must click on them to jump to a list of names, beginning with the letter he clicked on, which are somewhere else on the web-page.
The coding you need to make the jumps work looks like this. Of course, it doesn't have to be a list, it can be a table for example.
(<>'s have been replaced with [ ]'s to invalidate the HTML)
[A NAME="top"][/A] [!-- This assigns the name "top" to this statement.--]
This is a Christian name finder.
[OL TYPE="A"]
[LI][A HREF="#A"]A names[/A]
[LI][A HREF="#B"]B names[/A]
[LI][A HREF="#E"]E names[/A]
[LI][A HREF="#etc]etc names[/A]
[/OL]
The paragraphs you want visitors to link to are coded as follows.
[A NAME="A"][/A][H3]The A's[/H3]
Adrian[BR /]
Alan[BR /]
Antony[BR /]
A etcetera[BR /]
Back to the [A HREF="#top"]top[/A].[!--Click here and you return to "top".--]
[A NAME="B"][/A][H3]The B's[/H3]
Barry[BR /]
Boris[BR /]
Brian[BR /]
B etcetera[BR /]
Back to the [A HREF="#top"]top[/A].
Etc. for C's, D's.
Notice the # in the HREF anchor-addresses; this is the indication that it's an internal link. The actual address itself has no #. Don't forget, it must have the [/A] tag.
External Links
These are the links to other sites and to other pages on your own site.
Here again we'll look at the [A] tag and its attribute HREF and a new one, TARGET.
Right; what does this statement tell us?
To visit my website[A HREF="whatever it is called"] click here[/A].
Simple, click on "click here" to visit my website. And please notice the closing [/A] tag. Its that simple! As we know all clickable text is colored blue and is underlined.
A couple of things before we go on. Notice that as with other attribute data we've looked at you must use "quotes" to enclose the parameter. Of course you don't have to use text for the click text. There are a couple of other possibilities. You may want to use a banner as link to make the illustration clearer. In a later article I'll be going into images.
But to give you an idea here's the coding needed when you want to use an image instead of text. And by the way, the image can be anywhere, even on another website.
[A HREF="another site somewhere"]
[IMG SRC="images/linkhtml.jpg" TARGET="_blank" WIDTH="468" HEIGHT="60"][/A]
If you're sending your visitor to another page or site but don't want to lose him then its a good idea to include the TARGET attribute in the [A] statement, as above.
Your original page will still visible with the target page on top. So when they close the target, your page is still there. The default value is "_self" which is the one that causes the new page to overwrite your page in the same window. There are other values but we're not going to discuss them here.
Refreshing and redirecting.
I want to talk about the HTTP=EQUIV attribute in the [META] statement and this in combination with the DATA and the CONTENT attributes.
When could you use this? When you want a visitor to be rerouted to another webpage or site from the one they're originally sent to. You've all seen pages which say, "This page will redirect to etc. etc. in 10 seconds." It could come in handy one day.
What does refresh coding look like?
[HTML]
[HEAD]
[TITLE]Refresh demo coding.[/TITLE]
[META HTTP-EQUIV="Refresh" CONTENT="15;URL=http://www.the-job-hunters.book.com"]
[/HEAD]
[BODY]
etc.
[/BODY]
[/HTML]
It's quite straight forward, the "15" represents the number of seconds you want the browser to wait before refreshing, and you will realize that if this parameter is "0" then the refresh will happen immediately. The URL is, of course, the target. (Note where the "quotes" are.)
If you wanted to refresh some dynamic information, share prices, whatever, just refresh the same page as follows.
[HTML]
[HEAD]
[META HTTP-EQUIV="refresh" CONTENT="20"]
[/HEAD]
[/HTML]
This page will refresh itself every 20 seconds.
Where are pages to be found that must be linked to?
When working on your PC the pages you want to link to are most probably all in the same directory. So the coding is:
[A HREF="destination-page.html"]click here[/A].
On the web you might have your site organised in logical directories/folders so 'destination-page.html' might
be in a sub-folder 'sales-pages'.
[A HREF="sales-pages/destination-page.html"]click here[/A].
Finally, the destination-page may be another site or on another site.
[A HREF="another site somewhere"] Click here[/A].
[A HREF="another site somewhere/sub page/destination page"] Click here[/A].
If in doubt, always use the last, full, option.
This article is one of a series of 6.
Much more information at www.the-html-book.com . Opens in a new page.
|
