Submodule 2.3: Links

Links general

In HTML links are hyperlinks. This means that when you click on a link you go to the destination defined on it.

Commonly, when you move the mouse over a link, the arrow will change to a small hand.

The HTML tag for links is <a>. <a> stands for anchor (attaching something to something else).

Inside the <a> tag we have the href attribute. This attribute defines the destination of our link and is not visible on the webpage.

The visible part of our link is the content we place between the <a> and </a> tags.

An important attribute of links is the target attribute. Target is placed within the <a> start tag and defines where to open the link. There are lot different values for the target attribute which you can study in w3schools. https://www.w3schools.com/html/html_links.asp

Here we will mention only the _blank value. A target with this value will open the document in a new window or tab.

<a href="https://yourDestibation.com" target="_blank">Go to this site</a>

For more information: https://www.w3schools.com/html/html_links.asp

Link to a web page

External links
The syntax used inside the href attribute is different for external and internal url. An external url is a different web site. In this case we should use an absolute url which is a full web address starting with https://www.

Example:

<a href="https://www.w3schools.com/" target="_blank">Visit w3schools!</a>

Local links

An internal url, is a link within the same web site (e.g. navigation).

The href syntax for local links is a relative url, a url without https://www.

Examples:

<a href = "anotherPage.html" target="_blank">Visit Another page</a> <!--link to a page-->

<a href = "imagesFiles/myphoto.png" target="_blank">Visit My photo</a> <!--link to an image-->

Image as link

Links do not have to be texts. It is very common to use images as links.As we explained, the visible part of our links is placed between the <a> and </a> tags. Thus our syntax would be like:

<a href = "anotherPage.html" target="_blank">
     <img src = "imagesFiles/myphoto.png" alt = "This is a photo" title = "Click to visit the ....">
</a>

Note

You may have notice that we use href for links and src for media. These attributes may look similar, however the browser understand them very different.

When the browser loads a page, the process of loading is paused until all the src files have been executed (e.g. all images have been loaded).In contrast, the process of loading is not paused for href attributes.

Exercise

Exercise

1. Create a new file exersice02.3.html in the folder "Exercises" in your editor.
2. Create a link to NASA's site. The url of this site is "https://www.nasa.gov/"
3. Create a local link to "exersice02.2.html" file
4. Create a local link to "myphoto.jpg" file. We have this file in the folder images
5. Insert "myphoto.jpg" file in your page and link it to the page "NASA image of the day". The url of this site is ""https://www.nasa.gov/multimedia/imagegallery/iotd.html"
6. We want to open these links in a new window. The browser's output should be as shown in the following image: 

Solution: