Resume Website: Hyperlinks — Programming Examples

Project purpose

Lesson 3 gave the resume website its presentation with an external stylesheet, an image, and HTML5 semantic structure. Lesson 4 connects it with hyperlinks: links within the page, links to other files in the project, links to other websites, an email link, and an image that works as a link. The site also grows from one page to two, so students have to think about where each file lives relative to the others.

Important: Link only to pages students are comfortable having on a public resume. Use a sample email address while learning, and remember that a mailto: link publishes that address to anyone who views the page. Link to a site’s home page or another publicly available page rather than a deep link into content the student does not have permission to share.

Lesson 4 goals

By the end of this build, students should be able to:

create a hyperlink with the anchor element <a> and its href attribute
explain the difference between an absolute (fully qualified) URL and a relative (partial) URL
read a relative path that starts with a folder name, with ../, and with /
write links that use the http, https, and mailto protocols, and recognize ftp
create local links to another page and to a PDF in the project
create external links to other websites
use an image as a hyperlink
create internal links with <a id="..."> bookmarks and href="#..."
link to a bookmark inside a different page with filename.html#id
troubleshoot common anchor mistakes (missing </a>, missing quotes, missing >)
explain link rot and how to check a site for dead links

Project setup

Add a PDF, a second page, and keep the existing folders:

resume-website/
├── index.html
├── documents/
│   └── resume.pdf
├── images/
│   └── profile.jpg
├── projects/
│   └── resume-website.html
└── styles/
    └── site.css

resume.pdf can be the student’s resume exported from Word or Google Docs. The new projects folder exists so students have to use ../ to get back out of it.

Instructor follow-along

1. Meet the anchor element

Talking points:

Links are what make the Web a “web.” A hyperlink is a word, phrase, or image that takes the visitor to another file or another spot in the same file.
The syntax is <a href="URL">linked text or image</a>. <a> is a container tag, so it needs a closing </a>.
href stands for hypertext reference, the target of the link.
By default, links appear blue and underlined. CSS can change that.
URL and URI are used interchangeably. A URL is a URI that includes the location and the protocol used to retrieve the resource.

Pause and ask: Which part of <a href="contact.html">Contact Me</a> does the visitor see, and which part tells the browser where to go?

2. Absolute versus relative URLs

Talking points:

An absolute (fully qualified) URL includes the protocol and the full path, such as https://www.nemcc.edu/. Use it for other websites.
A relative (partial) URL assumes the current document’s folder, such as projects/resume-website.html. Use it for files in your own project.
folder/page.html looks for a subfolder on the same level as the current page.
../page.html goes up one folder before looking.
/folder/page.html starts at the root. On a Web server that is the site’s root folder, but on your own computer it is the top of the drive, so these links break when the site is opened from a folder.
Windows paths use back slashes (C:\). URLs and Linux/UNIX paths use forward slashes. Always use forward slashes in HTML.

Pause and ask: The stylesheet link in index.html is styles/site.css. What would it need to be from a page inside the projects folder?

3. Choose the right protocol

Talking points:

http:// and https:// request Web pages. https is the secure version and is what most sites use now.
mailto: opens the visitor’s email program with the address filled in, such as <a href="mailto:student@example.com">student@example.com</a>.
ftp:// is for file transfer. Students should recognize it, but current browsers no longer open FTP links, so the resume will not use one.

Pause and ask: Why is the email address written twice in a mailto: link?

4. Create local links, including a PDF

Talking points:

A local link points from one file in the project to another. If the folder structure stays the same when the site is uploaded, local links keep working.
Link to a PDF the same way as to a page: <a href="documents/resume.pdf">Download my resume (PDF)</a>. The browser opens the PDF or downloads it.
Link text should say where the link goes. “Download my resume (PDF)” is better than “click here,” for both visitors and search engines.

Pause and ask: If resume.pdf is renamed, what happens to the link, and how would you notice?

5. Create external links

Talking points:

An external link points to another website and always uses the full URL with its protocol.
Good candidates on a resume are the college, a professional profile, and the validators used to check the site.
External links can raise copyright questions. Prefer public pages and home pages over deep links into another site’s content.

Pause and ask: Why does an external link need https:// at the start when a local link does not?

6. Use an image as a link

Talking points:

Place the <img> tag inside the <a> tags: <a href="..."><img src="..." alt="..."></a>.
The image’s alt text is now functional, so it should describe where the link goes, not only what the picture shows.
On the project page, the profile image links back to the home page, the same way a logo usually does.

Pause and ask: The profile picture’s alt text was “Your Name” in Lesson 3. Why should it change now that the image is a link?

7. Create internal links

Talking points:

An internal link jumps to another spot on the same page. It takes two parts: a bookmark and a link to it.
The bookmark is an anchor with an id: <h2><a id="skills">Skills</a></h2>.
The link uses a hash (#) and the same name: <a href="#skills">Skills</a>. Without the hash, the browser looks for a file named skills.
A short navigation bar at the top and “Back to top” links (href="#top") make a long page easier to use.
To jump to a bookmark on a different page, put the file name first: ../index.html#skills.

Pause and ask: What happens if the link says href="#Skills" but the bookmark is id="skills"?

8. Add a second page in a subfolder

Talking points:

projects/resume-website.html describes the resume website project and links back to the resume.
Every reference on this page starts with ../ because the page is one folder deeper: the stylesheet, the image, the PDF, and the home page.
The two pages now link to each other, which is what makes a set of pages a site.

Pause and ask: If the project page loads with no styling, what is the first thing to check?

9. Style the links

Talking points:

A rule such as a { color: #7a5c00; } changes every link from the default blue.
That rule also matches bookmark anchors like <a id="skills">, so headings that hold a bookmark need h2 a { color: inherit; } to stay their normal color.
Check link color against the background for readable contrast, and keep links underlined so they do not depend on color alone.

10. Troubleshoot, validate, and manage links

Talking points:

Common anchor mistakes: a missing </a> (the rest of the page becomes a link or text disappears), missing quotation marks around the href value, a missing > on the opening tag (garbled code), and <a/> typed instead of </a>.
Validate both pages with the W3C Nu HTML Checker after adding links.
Link rot is what happens when links stop working because pages are moved, renamed, or deleted, or because bookmarks are renamed.
Dead links annoy visitors and lower a page’s search engine ranking.
A link checker such as the W3C Link Checker reports broken links, but a person still has to fix the code and confirm each link still points to relevant content.

Pause and ask: A link checker says every link works. Why should the links still be checked by hand now and then?

Starter CSS additions

Add these rules to the end of styles/site.css:

/* Lesson 4: change the default blue hyperlink color */
a {
  color: #7a5c00;
}

/* Keep the anchor-wrapped headings looking like normal headings */
h1 a,
h2 a {
  color: inherit;
}

nav {
  clear: both;
  text-align: center;
}

Updated `index.html` (Lesson 4 revisions)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Student resume for Your Name">
  <meta name="author" content="Your Name">
  <title>Your Name | Resume</title>
  <link rel="stylesheet" href="styles/site.css">
</head>

<body>
  <!-- Replace the sample information with your own safe, professional content. -->

  <header>
    <h1><a id="top">Your Name</a></h1> <!-- new: bookmark for the Back to top links -->
    <a href="projects/resume-website.html"><img src="images/profile.jpg" alt="Your Name - view the Resume Website project" class="profile" width="150" height="150"></a> <!-- new: image as a link -->
    <p><strong>Web Development Student</strong></p>
    <p>Booneville, Mississippi</p>
    <p>Email: <a href="mailto:student@example.com">student@example.com</a></p> <!-- new: mailto protocol -->
    <p>Phone: 555-0100</p>
    <p><a href="documents/resume.pdf">Download my resume (PDF)</a></p> <!-- new: local link to a PDF -->
  </header>

  <nav> <!-- new: internal links to bookmarks on this page -->
    <p>
      <a href="#summary">Summary</a> |
      <a href="#education">Education</a> |
      <a href="#skills">Skills</a> |
      <a href="#experience">Experience</a> |
      <a href="#projects">Projects</a> |
      <a href="#links">Links</a>
    </p>
  </nav>

  <hr>

  <main>
    <h2><a id="summary">Professional Summary</a></h2>
    <p>
      Motivated web development student learning to create clear,
      accessible, and standards-based websites. Interested in an
      entry-level opportunity to apply technical and problem-solving skills.
    </p>

    <h2><a id="education">Education</a></h2>
    <h3><a href="https://www.nemcc.edu/">Northeast Mississippi Community College</a></h3> <!-- new: external link -->
    <p>
      Web Development Program<br>
      Expected graduation: Month Year
    </p>

    <h2><a id="skills">Skills</a></h2>
    <ul>
      <li>HTML document structure</li>
      <li>Readable and valid markup</li>
      <li>CSS3 styling and external stylesheets</li>
      <li>Hyperlinks: local, external, internal, and image links</li>
      <li>Problem solving</li>
      <li>Written and verbal communication</li>
    </ul>
    <p><a href="#top">Back to top</a></p>

    <h2><a id="experience">Experience</a></h2>
    <h3>Job Title or Volunteer Role</h3>
    <p><em>Organization Name, City, State | Month Year to Present</em></p>
    <ul>
      <li>Describe one responsibility using a strong action verb.</li>
      <li>Explain a contribution or result when possible.</li>
      <li>Show a technical, teamwork, or customer service skill.</li>
    </ul>
    <p><a href="#top">Back to top</a></p>

    <h2><a id="projects">Projects</a></h2>
    <h3><a href="projects/resume-website.html">Resume Website</a></h3> <!-- new: relative link into a subfolder -->
    <p>
      Building a standards-based resume website throughout IST 1433.
      Lesson 4 added local, external, and internal hyperlinks, a
      linked PDF, and an image that works as a link. The project will
      continue to grow as new HTML, CSS, and JavaScript concepts are learned.
    </p>
    <p><a href="#top">Back to top</a></p>

    <h2><a id="links">Links</a></h2> <!-- new: external links section -->
    <ul>
      <li><a href="https://www.linkedin.com/">My LinkedIn profile</a></li>
      <li><a href="https://validator.w3.org/">W3C Markup Validation Service</a></li>
      <li><a href="https://validator.w3.org/checklink">W3C Link Checker</a> (used to find dead links)</li>
    </ul>
    <p><a href="#top">Back to top</a></p>
  </main>

  <footer>
    <h2>References</h2>
    <p>Available upon request.</p>
    <p>Links last checked: Month Year</p> <!-- new: reminder to check for link rot -->
    <p>Copyright &copy; <span>Your Name</span>. All rights reserved.</p>
  </footer>

  <!-- Your Name, today's date. Lesson 4 hyperlinks. -->
</body>
</html>

New `projects/resume-website.html`

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Resume Website project for Your Name">
  <meta name="author" content="Your Name">
  <title>Resume Website Project | Your Name</title>
  <link rel="stylesheet" href="../styles/site.css"> <!-- ../ moves up one folder -->
</head>

<body>
  <header>
    <h1><a id="top">Resume Website Project</a></h1>
    <a href="../index.html"><img src="../images/profile.jpg" alt="Your Name - return to the resume home page" class="profile" width="150" height="150"></a>
    <p><strong>Your Name</strong></p>
    <p><a href="../index.html">Return to my resume</a></p>
  </header>

  <hr>

  <main>
    <h2>About This Project</h2>
    <p>
      This page lives in the <strong>projects</strong> subfolder of the
      resume website. Every link and file reference on this page starts
      with <strong>../</strong> to move up one folder before looking for
      the file.
    </p>

    <h2>What I Have Learned So Far</h2>
    <ul>
      <li><a href="../index.html#skills">See the Skills section of my resume</a></li> <!-- bookmark on another page -->
      <li><a href="../index.html#experience">See the Experience section of my resume</a></li>
      <li><a href="../documents/resume.pdf">Download my resume (PDF)</a></li>
    </ul>

    <h2>Inspiration</h2>
    <p>
      The <a href="http://info.cern.ch/">first website ever published</a>
      was built at CERN and is still online today.
    </p> <!-- http protocol: this historic site does not use https -->

    <p><a href="#top">Back to top</a></p>
  </main>

  <footer>
    <p>Copyright &copy; <span>Your Name</span>. All rights reserved.</p>
  </footer>

  <!-- Your Name, today's date. Lesson 4 hyperlinks. -->
</body>
</html>

Student customization checklist

Validation and testing

Click every link on both pages, including the PDF, the email link, and each nav link.
Confirm the project page shows the stylesheet and the profile image.
Validate index.html and projects/resume-website.html with the W3C Nu HTML Checker.
Validate styles/site.css with the W3C CSS Validation Service.
Run the site through the W3C Link Checker once it is online, or check each external link by hand.
Temporarily rename resume.pdf and confirm the link breaks, then restore the name. That is link rot in miniature.
Open both pages in a second browser and at a narrow window size.

Lesson 4 design decisions

Bookmarks use the textbook’s <a id="..."> syntax so the code matches the reading. Students can learn later that an id works on any element.
All links within the project are relative, so the site keeps working when the folder is moved or uploaded.
A root-relative / path and an ftp:// link are discussed but not used, because a / path breaks when the site is opened from a folder and browsers no longer open FTP.
The second page sits in a subfolder on purpose so students practice ../.
Link color comes from the stylesheet, and links keep their underline.

Next lesson checkpoint

Keep both HTML files and styles/site.css as the source of truth. The next lesson adds HTML tables while keeping the links and navigation working.

Project purpose

Lesson 4 goals

Project setup

Instructor follow-along

1. Meet the anchor element

2. Absolute versus relative URLs

3. Choose the right protocol

4. Create local links, including a PDF

5. Create external links

6. Use an image as a link

7. Create internal links

8. Add a second page in a subfolder

9. Style the links

10. Troubleshoot, validate, and manage links

Starter CSS additions

Updated index.html (Lesson 4 revisions)

New projects/resume-website.html

Student customization checklist

Validation and testing

Lesson 4 design decisions

Next lesson checkpoint

Updated `index.html` (Lesson 4 revisions)

New `projects/resume-website.html`