by Trainer Riad Thalji
- Links are what make a set of pages constitute a website, as the user can navigate from page to page by clicking on them.
- Links can also point to any external URL on the internet.
- The Link tag is called the anchor tag <a>, and has many attributes.
For example, if we are on page1.html and want to place a link around the text “Go to Page 2”, we write:
<a> href=”page2.html”>Go to Page 2 </a>
- In the example above the “Go to Page 2” text will be colored, marked by an underline, and called a hyperlink.
- The user experience helps him/her to know that this is a clickable hyper link and the professional HTML author will let this be clear to the web page visitor.
- A Uniform Resource Locator – URL refers to what we type in the browser address bar to reach a website or web page.
- An Example URLs is: http://www.thalji.net/enc/about
- We use URLs to link parts of our content to external contents.
As an example to link the word visit w3.org to w3.org website, you may write:
<a href=”http://www.w3.org”>Visit W3.ORG Website</a>
- Internal links are those we use to reach contents within our website.
- In this case it is not necessary to use the http or www to reach the page we need. All we need is to specify the file path and name to the href attribute.
For example if we are on page1.html in our website and want to link to page2.html within our same site, we just write:
<a href=”page2.html”>Click to Visit Page2</a>
If page2.html is located on another directory called folder2 within the current folder of page1, we may write:
<a href=”folder2/page2.html”>Click to Visit Page2</a>
If page3.html is located in a folder in the root of our website called foolder3, we may write:
<a href=”/folder3/page3.html”>Click here to Visit Page3</a>
- Sometimes we need to link to a section in our page, another page or an external page, and this is where bookmarks are applied.
- Sections need by identified normally by using the id attribute.
- We then append the hash tag # character to the end of the URL or path/filename we provide in the href attribute, followed by the id name.
For example if we want to link to page2.html making it automatically scroll to the beginning of a paragraph that has an id of ‘question5’ we may write:
Click here to see Question 5</a>
- Almost anything that you put inside the hyperlink tag will become a hyperlink.
This applies to graphics, so we can write a code like this:
<a href=”page2.html”><img src=”image1.jpg” /></a>
and the image1.jpg becomes a hyperlink and will send the visitor to page2.html when it is clicked.
- A combination of images and text inside the anchor tag is also possible.
- The default target of a link click is to switch to the location mentioned by the a tag, unless you specify another method.
- One of the methods available is to set the target to a blank page by using the _blank attribute.
- The _blank link target is used to open the target page in a separate window.
- The _self link target is used to open the target page in the current window replacing the current page, The _self target is the default.
- The _parent link target is used to open the target page in the page we clicked to reach our current page. If no previous page led to the current page then _parent will be equal to the current page.
Let’s now put altogether in one comprehensive example:
This is our small website structure:
It consists of a page called index.html which browsers automatically consider as the starting page of a website unless another page is specified for this purpose.
Here is the code of the index.html page based on this structure:
The results will be like the following:
And here is the code for mylearningplan.html page:
And the output will be something like:
Notice how each link is defined, and how much links are important to connect websites and webpages.
- The index.html web page had an internal link to a page in the same website called mytrainingplan.html
- The # was used to reach the bookmarks.
- Each book mark had an id so that it can be identified in the page.
- After that I used an external link to enable the visitor reach amazon.com
- I also used the w3c.org logo image as a link to let the visitor reach their website.
Then for the sake of providing an example, I used the three types of targets, i.e:
- _blank to show the link result in a new window.
- _self which is the default and displays the link result on the same page.
- _parent, which displays the link result on the page which resulted the current page we were using before clicking that link.