| Free HTML Tutorials • CSS • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads |
|
Beginners Section |
|
LINKS AND EMAIL |
|
|
| Free HTML Tutorials • CSS • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads |
|
|
Beginners Section |
|
LINKS AND EMAIL |
|
|
|
|
HYPERLINKS
Links or hyperlinks are the lifeblood of surfing the web, of getting from one page to another, one site to another. Without links there would be no web. So it is important to get them right or who knows where you will end up. If you want your visitors to send you email saying how fantastic your site is you will probably want to put an email address on your page/s.
In the following code, the A stands for anchor, and the HREF=" " is asking for a location to link to. The </A> is the closing tag.
The HTML code for an email link looks like this:
So to include your email address in your web page, type in your own user name and the actual address of your ISP between : and ". You can type any other message after >.
Here's an example:
This is the way it appears. Note that it is underlined indicating a link.
You can get a bit more imaginative & include an image, so instead of clicking on your name or message, you would click on the image. Here's the code:
What you will see is this:
Notice that when you put your mouse over it, the cursor changes to a pointing hand indicating a link. This mouse attribute also comes in handy to distinguish a link when a page has a lot of underlined text. As we saw in IMAGES (previous lesson) you can add whatever text you like and centre it. Don't forget your closing tag - </A>. The other thing you should note is "BORDER="0". If you don't specify this, an image used as a link will have a coloured line or box around it - this is equivalent to the underline of a link. Sometimes it looks OK, but it depends on the image and on the link colours you have chosen. Here's how the above example will look if we just leave out BORDER="0" or add "BORDER="1":
In this case it looks alright because the image is a neat shape and the colours go well together. You can also surround the image with text, just as we did for the image in the previous lesson. Another effect is obtained by specifying a larger border size, eg "BORDER=4". This will give a wider border, in the same colour/s as your link colours, like this:
to email me
LINKS Links to and within Web pages can be INTERNAL or EXTERNAL. Let's look at the different types of links, using these lesson pages for examples. INTERNAL LINKS • Links within a site
If you want to link to different pages within your own site, you don't need the full web address, as for example when you click the links at the bottom of these pages to go the next lesson. So to link to another page in this guide, we add the following tags:
On a Web page, the only text that would appear is Tags 3 - Body Tags Note the text is COLOURED and UNDERLINED which indicates a link. As mentioned before, when you put your mouse over it, the cursor changes to a hand. Try clicking on it. Hit the BACK button to return here. • Links within a page
These are used within the current page. For example, you may want to send your reader to a specific part of a long page, or give a means to return to the top of the page. For this, you give the exact place you want your reader to return to a unique name with an anchor tag. In this case we want the reader to be able to return to the top of the page:
Place this at the top of the page. Now at the bottom of the section or the page, but before the </BODY> </HTML> tags, put something like this:
You can name any part of a page. For example, if I want to refer you to the Email section of this page, I just name it like this
You can use the same principle to link to a specific section of another page of your site. If I want to send you to the small colour chart in "Tags 2", I would name the chart "smallcol" and the link code on this page would read:
Notice I have included the name of the HTML page followed by # and the named section of that page. To see it in action, try clicking the link below - Go to the Colour Chart (Just hit the BACK button to return here.) EXTERNAL LINKS
Now let's look at how to link to an EXTERNAL page.
<A HREF="http://www.mydesign.com">My Design</A> It will appear on your page like this:
Again, the text is coloured and underlined. To repeat (what again!) when you move your mouse over the link, you should see the cursor change into a pointing hand and the web address (URL) will appear in the status bar at the bottom of the page, above the toolbar.
Help
|