his is a clickable map. Not a very fancy one, I admit, but if you hold your mouse over it and click where you see the little tags, it will take you to another page. These are links, and our lesson today is all about links.
Place your mouse over the map. You will
find roads to other places on our site. Click it!
ow that you're ready to learn about the anchor tag, <A>, which helps you to link up to other places, you're ready to add navigation to your web site. You'll use the anchor tag and its attributes to connect text and images on your web page to other web pages, email addresses, and online addresses.
irst, you need to know the page URL or address. Generally, a page ends in something like this: this.html; that.htm, my.phtml, your.shtml, and so on, depending on where your page (or the one you want to link to) is hosted. This page for instance is lesson6.html, although the full URL is https://www.angelfire.com/de2/irishcreme/lesson6.html. That's a mouthful, isn't it? If you don't know what that means, then just take a look directly above you in the address bar. You know, that place that usually says such and such.com in it? That's the URL (address) of this web page and that is what you'll need to link to this page. You will need to know both forms, the long and short URl's, as we learn about external links and internal links.
ow, what does this anchor tag do? It tells the browser that you're creating a link. The HREF attribute stands for Hypertext Reference--the technical name for a link. Whatever follows HREF= is the actual name or URL of the item to which you plan to link and it always goes between quotation marks.
If you surf the web, you already know what links are, but do you know the code that will add one to your web page? If not, then take a look at this. This link would take you to Shadowfire's Main Index.
That is how you write the html for an external link (a link outside your own
web site). If you noticed, I used the whole URL.
kay, let's break it down. This part is the URL or address of the place you want the visitor to go when he or she clicks on the link.
<A HREF="https://www.angelfire.com/de2/irishcreme/list.html">
In the middle, so to speak, you put the name or whatever you decide to call it, for where the link leads. Just the name, no quotations. This is the only part that will show up on the page. Your visitors will see only the word Shadowfire as a hyperlink. As you can see in my example, this link would take you to Shadowfire Index.
To close your link, you use this end tag: </A>. Put them all together and you have your first link!!
To create an internal link or one within your own web site, you can specify just the name of the web page, for example: lesson6.html. If you look at the URL of this page you will see that in its entirety, it is written like so:
https://www.angelfire.com/de2/irishcreme/lesson6.html
To link to this page from another of my pages, I would write only the name of the page itself plus the .html, giving us this: lesson6.html. This is the way you write the code:
<A HREF="lesson6.html">Lesson 6 </A>
Using the shorter URL helps your pages load faster since the server has to go way out on the web to extract the longer URLs. You can not, however, use this when linking to another web site. You must use the full address as shown in the first example.
'm sure you all want to know how to link to an image, say a button, for example. It's much the same, only you use your image in the place of a name, like so:
<A HREF="lesson6.html"><img src="button.jpg"></A>
You write the code for your image just as if you were placing it on a web page. Then you link it by typing <A HREF="address_where_you_want_the_image_to_take_them.html"> in front of it and </A> behind it. In the example above, my image is a button and if you wrote your code as I did, this is what you would get:
kay guys, that's it for today but in lesson 7, we will learn how to link from one area on a web page to another area on the same page. We will also go into how to set up a link to your e-mail. Take a break. You've earned it if you've gotten this far!