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
Last Updated: 9/27/2021, 12:12:06 PM