Learnit Training

5. Creating hyperlinks

The letters HT in the abbreviation HTML are for Hypertext. And with the word hypertext become clickable words (left) means in a piece of text. These hyperlinks ensure that the World Wide Web is linked from different locations. Let's also add a hyperlink to our website.

5.1 The Anchor

Placing the code for a hyperlink is relatively easy when you know the code. But before we enter the code, it's a good idea to first determine what the clickable part will be (the visible part of the link). I suggest we include an extra piece of text within our previously placed paragraph container. Behind the last sentence of the paragraph ending with the words we will end up with the structure called the Flower of Life. You can add The text Learn More . Of these last two words, the intention is to become a hyperlink. To do that place an A-container around the two words, see image below.

Online Free HTML5 and CSS training from Learnit

Finally, it is necessary to have this hyperlink (the a-tag stands at an anchor) actually refers to something. You can do this by placing an additional so-called attribute within the open-tag of the anchor. Just after the a but still within the larger than sign >add a space and type this code href="https://www.learnit.nl". You can read the attribute href added to the open-tag of the anchor as "the anchor refers to". Please also note that the full web address including the text http:// must be provided.

Finally, the code looks like this.

Online Free HTML5 and CSS training from Learnit

5.2 An additional target attribute

When you view the website in the browser and you click on the link you will leave the current website to Learnit on the website. Sometimes it is not pleasant that you lose visitors in such a way. It is sometimes desirable for the new website to open in a new tab or window. To achieve this, you can add another attribute to the anchor's open tag. When you place a space after the last quotation mark of the href attribute again, followed by this code target = "_blank" , when you reload the webpage in your browser, the link will open in a new tab. This code will look like this.

Online Free HTML5 and CSS training from Learnit

Test The result in your browser:

Online Free HTML5 and CSS training from Learnit