Lesson 15 - Anchors & Links/Base Tag

Links allow the viewer to click on a Label on a web page and direct their browser to open another web page. To create a link to a URL of 'http://www.af.mil', type:

<a href="http://www.af.mil"> THIS IS THE LABEL </a>
try it.

Links can be placed anywhere on the page. If the above link had a label of "USAF Home Page" and was placed within a random paragraph, it would appear thus:

Links allow the viewer to blah blah blah USAF Home Page blah blah blah open another web . . .

If you click on "USAF Home Page" above, your browser will open the USAF Home Page.

To link to a part of the same page the viewer is on, create an anchor. If you type:

<a name="xyz">this and that</a> and somewhere else on the page, type
<a href="#xyz">go there</a>

<a name="xyz">this and that</a> is the anchor that shows the browser where on the page to go. <a href="#xyz">go there</a> is the link that tells the browser to go to the anchor. try it. For example, if you type:

<h2 style="text-align:center"> The Only Way To Fly</h2>
<p> The US Air Force offers <a href="#adv"> adventure</a>,
<a href="#train"> training</a> and
<a href="#ben">benefits</a>.</p>
<h2><a name="adv"> ADVENTURE</a></h2>
<p> blah blah blah</p>
<p> blah blah blah blah</p>
<h2><a name="train"> TRAINING</a></h2>
<p> blah blah blah</p>
<p> blah blah blah blah</p>
<h2><a name="ben"> BENEFITS</a></h2>
<p> blah blah blah</p>
<p> blah blah blah blah</p>

It looks like:

The Only Way To Fly

The US Air Force offers adventure, training and benefits.

ADVENTURE

Nofiem in rhavescue crinolatis. Dresc oquadas vovam stu givinanis ehe ucolant. Predr opsuspiem op gipicrus odruquoro. Ladr pofapriem sma esnasmiant tadanis. Ginus in oquoroschue dasadanis. Dregecrum plif bre vuhes ecrischo.

TRAINING

Stirh cosniant oge oplopres iposchatis. Scovesius, ucaschue sa vulit ehecranis. Omimius pist it pehetue conascronis. Lufosc, oprespue do quoropepsum scrupaler. Acuthus cririrhont, epsol liredrus thi snofobam pronosmonis.

BENEFITS

Guprum in isnesciant ilohuer. Inethon ogocrat, psasc lilec dre abicus lagant. Prat nitirhiant mufilatis, ih eplip umimam idaher. Erepit aquidan os nilubriem scroneprotis.

Try clicking on one of the links shown above. You can even link to an anchor on another page by typing:

<a href="otherpage.htm#anchorname"> Label </a>

Any of the links shown above will open in the same window as the page hosting the link. To open a link in a new window, type:

<a href="linksite.htm" target="_blank"> Label </a>

If you want to open the link in a specific window, replace "_blank" with the name of the desired window. If the window doesn't yet exist, replace "_blank" with the name of your choice, and the viewer's browser will create a new window and name it with that name. try it.

If the linked file is in the same directory as the current page, it is easier and more convenient to write "xyz.htm" as the HREF instead of the full "http://www.abc.com/home/this/that/xyz.htm". The problem with this is if the current page changes directories, or is created by a CGI script on the fly, or some other occurrence, the link goes nowhere. To give all links a base reference, add the Base tag in the head of your file like so (change the href to suit your site):

<html>
<head>
<base href="http://yourDomain.org/path/to/directory/" target="abc">
<title>XYZ</title>
</head>
<body>
      blah blah blah
</body>
</html>

Now, any link (or image) on your page that does not give a full URL will be referenced to the BASE URL. If you don't want all links to open in another window (called "abc" in this case), delete the Target attribute. try it

To make an e-mail link, type:

<a href="mailto:SomeName@SomeWhere.com"> E-mail me</a> with questions.

As with other links, the text between the start and end tags is all that appears on the web page. When the viewer clicks on this link, the default e-mail program opens with 'SomeName@SomeWhere.com' preset in the 'To:' box. (If you want to get fancy with mailto, read this. For a handy tool, see this page).
Try it.

For all links and anchors, whatever appears between the start and end tags is what can be clicked to activate the link. Usually it is text (such as "click here" or something similar), but it can be virtually anything. For instance, if we substitute an image in place of "E-mail me" shown above, we get:

E-mail us with questions.

Try it.
Now open sample2.htm and add some links and anchors.


In this lesson, we learned about these HTML tags:
<a href=""> and </a>
<a name=""> and </a>
<base href="" target="">
By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site and this site.

Lesson 14B Master Style Sheets   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 16A CSS/Page Breaks

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 4,028 different visits in the last 30 days.
435,594 hits on this domain since 24 Nov 2006.
http://www.sandersongs.com/HTMLcourse/Lesson15.php
This page was last modified on our server on 6 Oct 2013
and last refreshed on our server at 3:57 am, MST
This file took 0.0096 seconds to process.