"HTML5 e CSS3 - Módulo 2"
Links

"Curso em Vídeo"
This is the student's notebook of Ricardo Barros Becheli

Links

"Links are found in nearly all web pages. Links allow users to click their way from page to page". (w3schools)

More than that, the <a> HTML anchor element, with its href attribute, can create hyperlinks to:

MUCH more can be said about links and the <a> tag and you may read it at MDN Web Docs, but here we will stick to the following:

  1. External links (When there's a full web address in the href attribute, it is called absolute URL).
  2. Internal links:
    1. To pages of the same website (A local link - a link to a page within the same website - is specified with a relative URL (without the "https://www" part):
      1. Belonging to the same folder as the current one.
      2. Stored in another folder of the same website.
    2. To a certain line (or section) of the same page.
    3. A download link.

1) External links

This kind of link is made to an absolute URL (includes the "https://www" part). Example:

You can access my public repository at Github by clicking here.

The HTML element:

<a href=""></a>

<a> means anchor and href means hypertext reference.

And how it's filled:

<a href="the URL comes here">and the text that will become hyperlink comes here</a>

And there's something very important:

As you can see in the code below, there are a "target" and a "rel" attributes, meaning:

  1. target="blank" means that the target page will be opened in a new tab of your browser.
  2. rel="noopener noreferrer" means that the opening of a new tab will avoid undesired invaders (crackers). Not doing this can be risky.

Those "rel" attributes can be automatically set if you start your link code by typing "a:blank" in the VS Code.

Check the code:

The href code

2) Internal links

2.1) Link to pages of the same website:

This kind of link is made to a relative URL (without the "https://www" part).

2.1.1) Belonging to the same folder as the current one:

Just click on any link of the navigation bar, except the "Introduction" one, which is the index and is in the root directory.

2.1.2) Stored in another folder of the same website.

Just click on the "Introduction" link of the nav bar.

2.2) Link to a certain line (or section) of the same page, in 2 steps:

a) First, you use an id to give an unique name to the destination point of the future link.

Code: anchor in the same page.

b) And soon after that you make the link through the usual <a> tag, pointing the hypertext reference (href) to the id through a # plus the name of the id.

Code: link to the anchor in the same page.

2.3) Download link:

From here you can download a PDF book from Curso Em Vídeo about the Internet History.