Hyperlinks

Libraries are a place where a person can go to study, spend time and do some research. It is because there is an infinity of materials that can help the person in various subjects. The library allows users to explore and navigate among different topics and issues. The user can have access to books, journals, and articles, and sometimes there is also video and audio. The library is an offline representation of what a hyperlink is.

The hyperlink is essential to the World Wide Web (WWW). Hyperlinks are elements that connect one page to another, for example. Similarly, with the library example, a hyperlink or link allows the user to access different content in various forms from one place.

The way this hyperlink is represented may vary. It can be text, images, QR codes and other multimedia elements. For instance, if it is text on a web page, it may be in a different colour, typically blue and underlined. It is because the user needs to be signalized so that the user can be aware that it is a link.

On a web page in a computer, it is possible to identify if the element is a hyperlink by hovering the mouse pointer over the element (text, image etc.). The mouse pointer will change to a “finger", and at the bottom of the browser shows the URL that the link will open.

Obs.: In mobile/tablet it is not possible. That is why it is important to have a different style.

The hyperlink provides a connection. This connection can be to another point on the same page or even on the same website or connect the user with another website, video, images, and another kind of multimedia source.

A table of content in a book provides a list of titles, subtitles, and other parts of the book with the respective page that is located. So, the user can look in the list and quickly go directly to the page with the content of interest. Likewise, in an article on the web, there is a list of topics. The user can click directly on one of them, and the content on the page will change to show the user what they requested.

Another way to think about hyperlinks is that it is an element that links the source and target, similar to books that have a list of references to indicate to the reader the source of information.

<a></a>: HTML element

Hyperlinks can be implemented as a Hypertext Markup Language (HTML) element. In HTML, hyperlinks are created using the tag anchor <a>. The anchor has two attributes and links to another resource or page. The first attribute is the “href" that contains the URL of the target, which is the address of the resource. The second one is what will be used to represent the link to be displayed to the user. The most common form of hyperlinks is text.

We can see an example of a link using a text below:

<a href="https://www.uwa.edu.au">Click here to visit UWA website</a>.

In this example, the href attribute has the URL of the website of the University of Western Australia, which is the online address to access the university's web page. And the text "click here to visit UWA website" provides a visual representation that the user can click to be redirected to the website.

<a href=" ..." target=" ..."> xxxxxx</a>

Another example is the links that direct the user to the same webpage but at another point or section. That can be useful when there is a lot of content, and the user needs to scroll the page. For example, the example below will redirect the user to the end of this page. There will be another link to return the user to this point.

The “Welcome back!" has an id tag to signalize it is a point of address on the web page. And the link uses this id to indicate the address of the target. So it can be created as:

<a href="#end-of-page">Click here to go to the end</a>
<p id="welcome-back">Welcome back!</p>
<h6 id="end-of-page"><a href="#welcome-back">Click here to go back</a></h6>

Moreover, as mentioned before, other elements, such as images, can be used as a visual representation of the link.

In the frame below, we have different examples of a hyperlink using images, buttons, text and icons to be a visible element that can be clicked. In addition to other values to href, that can be a website, email, or a file.

HTTP requests

AJAX implementation can make use of hyperlinks. For example, the frame above uses AJAX to update the information without needing to refresh the entire page. It is possible by using JavaScript to send an HTTP (Hypertext Transfer Protocol) request to the server and retrieve information. In this case, the JS function is called through the hyperlinking button to retrieve the json file.

When an address is provided through the href hyperlink or browser's address bar, which can be a URL domain, file, mailto, etc., the browser will find the IP address for that using DNS lookup and, after that, establish a connection with the server. Pederson illustrates this process in this link.

Bellow is the diagram from Ionos website that illustrates this process.

Once the connection is established, the browser will send an HTTP request to retrieve information from the server. The request consists of data that can indicate to the server which client it refers to. In addition, the request has a method, a path and a version of the HTTP.

One of the most common methods of HTTP request is GET. The GET method is done through hyperlinks or direct URL typing in the browser's address bar. Once done, the browser sends a GET request to retrieve information from the server. For instance, the first example is the Google website. Once the user clicks on the link, the browser sends a GET request to the server hosting the website to retrieve the information and display it to the user. The GET method is a read-only operation, which means the user can only view, search, sort or filter the data.

Once the request is made, the server responds to the browser by informing the request's status, how to handle the response and the resource, which can be images, data, or files such as HTML, CSS and JavaScript. For example, if the status is 200, that means successful, and the browser will render the response and display it to the user.

Below you can watch the video produced by Code Academy that explains each step.