Difference between revisions of "Hyperlink"

From Publication Station
 
(6 intermediate revisions by the same user not shown)
Line 15: Line 15:
</source>
</source>


== To a place in your document ==
== Linking withing a page ==
[[File:Index Wiki.png|thumb]]
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].
 
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 {{code|inline=y|lang=html|h1, h2, div, span}}, etc.
 
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.


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].
<source lang="html5">
<span id="Taxonomy">Taxonomy</span>
</source>


[[File:Index Wiki.png]]
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 {{code|inline=y|lang=html|#}}. This indicates it is an internal URL pointing to an element with that ID.


<source lang="html5">
<source lang="html5">
Line 25: Line 35:
</source>
</source>


<source lang="html5">
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.
<span id="Taxonomy">Taxonomy</span>
 
<source lang="css">
:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}
</source>
</source>

Latest revision as of 13:43, 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>

Linking withing a page

Index Wiki.png

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, etc.

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 #. This indicates it is an internal URL pointing to an element with that ID.

<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.

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}