CSCI 344: Spring 2023

Advanced Web Technology

CSCI 344: Spring 2023

UNCA Logo

HTML Resources > 3. Hyperlinks

Linking is probably the most important feature of the worldwide web, and allows documents, media, fonts, text files, etc. to be connected together – no matter what computer they are on! There are three different ways of linking to resources:

  1. Using relative paths
  2. Using absolute paths
  3. Using internal links

1. Using relative paths

Most of the time, your web pages will link to neighboring files that are stored on the same computer as your web page. Given this, you have to “teach the browser” how to navigate from the current file to a file stored in a neighboring folder.

In the example below, pretend that your files are organized as follows and that you’re editing the index.html file located inside the my_website/home directory.

my_website
├── files
│   └── gallery.html
├── home
│   ├── contact.html
│   ├── index.html
│   └── styles
│   └── styles
│       ├── dark
│       │   └── new.css
│       └── my_style.css
├── images
│   ├── cat.jpg
│   └── dog.jpg
└── test.html

Sample index.html code

The code below shows how you might apply these paths in an actual HTML page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first web page</title>
        <link rel="stylesheet" href="styles/my_style.css" />
        <link rel="stylesheet" href="styles/dark/new.css" />
    </head>
    <body>
        <!-- All visible content goes inside of the body tag -->
        <h1>Hello world</h1>
        <img src="../images/dog.jpg" alt="A picture of a dog" />

        <p>
            Here is <a href="contact.html">my contact form</a>.
            Here is a <a href="../test.html">Test Link</a>.
            Here is <a href="../files/gallery.html">my photo gallery</a>.
        </p>
    </body>
</html>

2. Using absolute paths

Note that if the resource is on someone else’s computer, you need to provide a “fully qualified” URL path, including the protocol (https), the server name (google.com), and then file path (none specified in this case).

3. Using internal links (linking to page regions)

Note that the href value is prefaced with a hash tag (#) followed by the id of the section where you want to jump:

Additional Resources