Webdesign Essentials

# Hyperlinks

  • You can create hyperlinks to:
    1. Another website
      • = external link, absolute address
    2. Another page of your site
      • = internal link, relative address
    3. A specific point on a webpage
      • = internal link, relative address
        OR
      • = external link, absolute address
    4. An email address (and in semester 2 also to a telephone number, an SMS, a geolocation, ...)
    5. A file to download from your site
      • = internal link, relative address

# <a>

  • Tag to place a hyperlink or anchor in the webpage
  • Inline element: should preferably be in a block level element
  • With the required attribute href you specify where the link should take you
  • Between start and end tag you place the text (or image) to which the link should be attached
attribute required/optional description
href required specifies where the link goes to

- webpage or file link: <a href="">
- link to anchor: <a href="#id">
- email link: <a href="mailto:">
title optional tooltip when hovering over the link
target optional specifies where to open the link

- target="_blank" opens the link in a new browser tab
- Don't overuse this feature: when to use target="_blank"
<p>
    <a href="https://thomasmore.be">Thomas More</a>
</p>
1
2
3
  • The external link is also called an absolute path
    • You indicate the full path to the web page via the internet address

WARNINGS

  • Don't forget the protocol part so start with http:// or https:// or...
  • Use absolute addresses ONLY to link to other people's websites, NEVER to link to another page of your own site
    • If you use absolute addresses to refer to your own pages, when moving domain or moving pages, you have to change ALL links again and that's not the intention!

# A link to another page of your site

<p>
    <a href="example.html">To another webpage</a>
</p>
1
2
3
  • The internal link is also called a document relative path
    • The path tells your browser that the web page you are referring to can be found on your web space
    • You can refer to pages that are in the same folder, a parent folder or a subfolder

# Link to a specific point on the current page

<h2 id="title">Concrete</h2>

<p>
    <a href="#title">To the title 'Concrete'</a>
</p>
1
2
3
4
5
  • Meaning id
    • Identifier = unique name within the current page
      • Case sensitive
      • No spaces
      • Must start with a letter
    • Can be used with most tags
  • Meaning #
    • "Stay on this page" (the page is not reloaded)
    • There is no lookup for a folder or file now

TIP

  • When you need to provide a link to go to the top of the page without reloading the page, you don't need an id
    • # is enough!
<p>
    <a href="#">To the top of the page without reloading</a>
</p>
1
2
3
<p>
    <a href="example.html#summary">Example: summary</a>

    <a href="https://itf-web-essentials.netlify.app/HTML5/hyperlinks.html#example-hyperlinks">
    Example: hyperlinks</a>
</p>
1
2
3
4
5
6
  • A similar technique as above can be used to refer to a specific point on another (internal or external) page by adding #nameofid after the (relative or absolute) address
<p>
    Click here to send <a href="mailto:jane.doe@thomasmore.be">a mail</a> to the owner
</p>
1
2
3

REMARK

Making a link of the word 'here' is not interesting for blind surfers, try to attach your link to a meaningful (group of) word(s)

<p>
    <a href="images.zip">Download the images zipfile here</a>
</p>
1
2
3
    
<h1>Hyperlink examples</h1> 

<h2>A link to another website</h2>
<p><a href="https://sinners.be">Student Information Network</a></p> 

<h2>A link to another website (in a new browser tab/window)</h2>
<p><a href="https://sinners.be" target="_blank">Student Information Network</a></p> 

<h2 id="lorem">First lorem text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci amet consectetur consequatur culpa dolore doloribus eligendi eos error ex facilis fuga id in incidunt iusto, magnam nemo non nulla odio omnis porro quibusdam ratione reiciendis rem similique unde vero, voluptatem. Accusantium animi asperiores, beatae culpa cumque deleniti earum enim, eos et ex expedita impedit iste iusto laborum minus perspiciatis placeat quam sint temporibus unde! </p> 

<h2>Second lorem text</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum autem non ducimus incidunt praesentium deleniti delectus ratione ipsum, fugiat tempora neque consectetur velit quos vel alias soluta earum provident impedit! Atque voluptatum fuga optio vel temporibus numquam minima perferendis, quo facilis dolore unde tenetur nihil quod non qui iure, ipsam delectus sequi architecto expedita aliquam. Nemo culpa nobis sapiente animi autem, labore vero eligendi voluptates unde? Dicta, exercitationem. Fugit minima molestias vitae omnis accusamus iure aliquid quo facilis dolore nam voluptatum ipsa mollitia iste nihil hic, reprehenderit porro, harum laborum facere perspiciatis. Sunt aspernatur incidunt minus consequuntur, ipsam quaerat necessitatibus maiores earum atque non ducimus cum voluptatem nemo quo fuga culpa iure? Eveniet nesciunt facilis culpa quia beatae! Maxime eum soluta eveniet! Quos, reprehenderit rerum sunt facere recusandae error autem veniam quaerat ullam quam soluta sed voluptatem dicta harum alias fugiat laudantium aliquam, non facilis? </p>

<h2>A link to a specific point on the current page</h2>
<a href="#lorem">To first lorem text</a>

<h2>A link to the top of this page</h2>
<p><a href="#">To the top of this page without reloading</a></p>

<p>
<a href="#" title="Back to top">
<svg width="26" height="26">
<polygon points="13,0 26,26 21,26 13,10 5,26 0,26" fill="orange" />
</svg>
</a>
</p>
<h2>A link to a specific point on another page</h2>
<a href="https://itf-web-essentials.netlify.app/HTML5/hyperlinks.html#example-hyperlinks">Example: hyperlinks</a>

<h2>A link to an email address</h2>
<p>Click here to send <a href="mailto:jane.doe@thomasmore.be">a mail</a> to the owner</p>
Last Updated: 9/27/2021, 12:12:06 PM