Difference between revisions of "Hyperlink"
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
| Line 19: | Line 19: | ||
Linking to a place in the document is super handy! You can see an example on the top of this page or on any Wiki page, like the [https://en.wikipedia.org/wiki/Red_warbler Red Warbler]. | Linking to a place in the document is super handy! You can see an example on the top of this page or on any Wiki page, like the [https://en.wikipedia.org/wiki/Red_warbler Red Warbler]. | ||
[[File:Index Wiki.png]] | [[File:Index Wiki.png|thumb]] | ||
This type of URL is called a Fragment URL. To create a Fragment URL we need two elements. | This type of URL is called a Fragment URL. To create a Fragment URL we need two elements. | ||
| Line 37: | Line 37: | ||
</source> | </source> | ||
You can also highlight the targeted element with CSS. When the link Taxonomy is clicked, the element with id="Taxonomy" will have the following styles applied. | |||
<source lang="css"> | <source lang="css"> | ||
Revision as of 13:32, 27 September 2022
This page describes how to create a hyperlink. Pronounced hyppppeerrrlink because IT IS hyper.
Hyperlinks can be used to create links between pages in your website, to a certain place in a document or another website.
External website
<a href="https://wdka.nl">Go to the website</a>
Between pages in your website
<a href="./about.html">About</a>
To a place in your document
Linking to a place in the document is super handy! You can see an example on the top of this page or on any Wiki page, like the Red Warbler.
This type of URL is called a Fragment URL. To create a Fragment URL we need two elements.
The first element is the element we scroll to. This can be any type of element, for example an h1, h2, div, span
We give the element an ID attribute, in this example the ID is "Taxonomy". You can decide how the ID is named, but it has to be unique on the page. Place the element with the ID on the position you want the page to scroll to.
<span id="Taxonomy">Taxonomy</span>
The second element is the anchor tag. This will create the link to the element with the ID. We start the href value with an hashtag #
<a href="#Taxonomy">About</a>
You can also highlight the targeted element with CSS. When the link Taxonomy is clicked, the element with id="Taxonomy" will have the following styles applied.
<style>
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
