Tutorial HTML lesson 8: Links
In this lesson you learned how to build links between pages.
What do I need to build a link?
To build a link you use what you have used so far to encode HTML: a tag. A simple and tiny tag with an element and an attribute is enough for you to build links to where you want. The following is an example link to MSN site:
example 1
<a href="http://www.msn.com/"> Here a link to MSN.COM</a>
Will be in the browser like this:
The element refers to "anchor" - anchor. The href attribute is short for "hypertext reference" - a reference to hypertext - and specifies the link target - which is usually an Internet address or a file.
In the above example the href attribute has the value "http://www.msn.com", which is the full address of HTML.net site and is called a URL (Uniform Resource Locator). Note that "http: //". Should always be included in URLs The phrase "Here's a link to HTML.net" is the text displayed in the browser as a link. Remember to close the tag with a .the </a>.
What about links between my own pages?
If you want to build links between pages of a website you do not need to type the full address of each page (URL). For example, if you have two pages (let's call them page1.htm and page2.htm) and saved the two in the same directory you build a link from one to the other using only the file name in the link. Under these conditions, a page1.htm link to page2.htm is as shown below:
example 2
<a href="page2.htm">Here a link to the page 2</a>
If page 2 is placed in a subfolder (named "subfolder"), the link is as shown below:
example 3
<a href=" Subdirectory/page2.htm">Here a link to the page 2</a>
On the other hand, a page 2 link in the "sub directory" to page 1 is as follows:
example 4
<a href="../page1.htm">Here a link to the page 1</a>
"../" Points to the folder one level above the file which the link is made. Following the same principle you can point to two (or more) up by writing "../../".
You got it? Alternatively you can always use the full address of the file (URL).
How are links within a page?
You can create internal links within the page itself - for example, a table of contents or index with links to each chapter on a page. All you need is to use the id attribute and the "#" symbol.
Use the id attribute to mark the element that is the link target. For example:
<h1 id="heading1"> Heading 1</h1>
You can now create a link that leads to that element by using "#" in the link attribute. The symbol "#" tells the browser to get on the same page it is. The "#" must be followed by the id where the link goes. For example:
<a href="#heading1">Link to the header 1</a>
Everything is clear with an example:
example 5
<html>Link to the header 1
<head>
</head>
<body>
<p><a href="#heading1"></a></p> Link to the header 2
<p><a href="#heading2"></a></p>
<h1 id="heading1">Header 1</h1>
<p>Text text text text</p>
<h1 id="heading2"> Header 2</h1>
<p>Text text text text</p>
</body>
</html>
Will be in the browser like this.
header 1
Text text text text
header 2
Text text text text
(Note: The name of an id attribute must begin with a letter)
Can I create link to anything else?
You can create link to an email address. This is done similarly to link to documents.
example 6
<a href="mailto:[email protected]"> Email to nobody in msn.com</a>
Will be in the browser like this.
The only difference is that instead of the document address you type mailto: followed by the email address. When the link is clicked the user's default e-mail program opens with the link address already entered in line to the recipient. But attention, this will only work if the user has an email program installed in machine. Make an experience with this type of link by clicking on the above example.
There are other attributes I should know?
To create links you always use the href attribute. Additionally you can use a title (title) for your link:
Example 7
<a href="http://www.msn.com/" title="Visit MSN">MSN.COM</a>
Will be in the browser like this.
The title attribute is used to provide a brief description of the link. If you - without clicking - place the cursor over the link, you'll see the text "Visit MSN".
|
|