Marking links

In this topic we will discuss how to make hyperlinks. When a user clicks a hyperlink a new webpage is opened. The text in the current document, which is highlighted due to click the click event of the user, that is called anchor text and the address of the web page is called hyperlink reference.

Anchors

To create an anchor the first thing you need to do is to choose where you want to link the anchor tag to. Once you have decided this you need to create the anchor.

You make the anchor by <a name="Anchors">

The text inside of the quotation marks is your anchor.

To link text to an anchor on the same page you would write <a href="#Anchors">Anchors</a>

Anchors

To link to an anchor on a different page you would write <a href="LinksAndAnchors.html#Anchors">Anchors</a> Anchors

<a href= is the opening tag. The first part in the quotation marks is the name of the html page - #LinksAndAnchors.html. The second part in the quotation marks is the name of the anchor - #Anchors. </a> is the closing tag.

Another example is:- <a href="#BottomOfPage" >Bottom of page</a>. This is displayed like:- Bottom of Page. It will take you to the bottom of the page

There are two types of anchor tags-


Absolute pathnames

In this type of path , the hyperlink reference is an entire URL because the web browser needs to know how to find pages. The URL is made from a protocol specification http://, a domain or IP address, www.kent.ac.uk and path of the file, /courses/undergrad/2012/subjects/information-technology

The files are two levelS down in the directory folder hierarchy of the site. The slash (/) separates levels in the directory hierarchy and crossing a slash moves lower in the hierarchy into a subfolder. Such complete URLs are called absolute pathnames; they are the right way to reference pages at other website.


To create an absolute link to a website you would use the code <a href="http://www.kent.ac.uk/">University of Kent</a>

This would display like:- University of Kent

Relative pathnames

This link refers to other webpages on the same site. A relative pathname describes how to find the referenced file relative to the file in which anchor tag appears. Suppose we have written our own history for stuart and broad for our history.html page. If the files are named stuart.html and broad.html the anchor tag of the history page can use relative references Stuart and Broad .

Relative pathnames saves us typing the protocol part, the domain part and the path to the part but thats not the only reason we use relative pathnames. It is more flexible because it let us move web files around as a group without changing the references.

Relative pathnames are very simple when the file contains an anchor and a referenced file are in the same folder we just give the file name. When the referenced file is deeper in the directory hierarchy, perhaps in a folder or in a folder inside another folder we simply give the path from the current folder to the file. For example, in the folder containing history.html we create a subfolder, present, which contains the two profiles. Then the anchor of Stuart present becomes:- <a href ="present/stuartpres.html">Stuart</a> which displays:- Stuart

The only problem left is how to refer to folders up in the hierarchy. The technique of doing this is to refer to the next outer level of the hierarchy that is containing folder- as .. (dot dot). Imagine the directory structure has the form:-


my pages 
	present
		stuart.html
		broad.html
			bio
				history.html 

In history.html, the Stuart present anchor would be <a href=>../present/stuartpres.html">struat</a> because the present cant be reached by going down the folder (bio) containing history.html. Instead, we have to go up to the next higher level to my pages. From there we can navigate down to the present through the present folder.


To create a relative link you would write:- <a href="index.html">home</a> This is displayed like home and would take you to the homepage of this website


Link to send an email

To link to send an email you would use:-<a href="mailto:address">text</a> It is displayed as, where address represents the email address that the mailto links to, and text is the text that shows the user what they are clicking on:- Harry's email
Back to anchors



This is the end of this section, you can continue to the next section or try the exam to test your knowledge.
Click here to attempt the exam now.



Previous Page

Next Page

Go to top