Web Development 101

A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS. Request Quote

  • Grades 7 - 8
  • 10 lessons
    • Web
  • Advanced Course
Course includes
  • 10 lessons
  • 134 activities
  • Enhanced Creativity Tools
  • Automatic Assessment
  • Tutorials and Reviews
  • Coding Puzzles
  • DIY Projects
  • Quizzes
  • Teacher Guides
  • Answer Keys
Prerequisites
No previous coding experience required.

Web Development 101

Lesson: Adding Hyperlinks
Time: 50+ mins

Introduction

In this lesson, students will learn how to use hyperlinks to link to other pages. Activities include solving challenge activities; building a Home Page Navigation project that has three web pages (i.e., Home, My Photos, and My Pets); and taking a 5-question multiple-choice quiz about “Lesson 4: Adding Hyperlinks” concepts. Note: Answers to all challenge activities (4 total) are located below the “Standards” section in this teacher guide.

New HTML Elements

  • <a> : Creates a hyperlink to other web pages or any other URL.

New HTML Attributes

  • href: Adds a section in an HTML document.
  • title: This attribute specifies extra information about the link.
  • target: Specifies where to open the linked URL.
  • id: Specifies a unique element inside a web page.
  • class: Specifies a group of elements to classify.

New CSS Styles

  • text-decoration: Sets the appearance of decorative lines (e.g., underline).

Vocabulary

  • Hyperlinks: A link that allows the user to go to another web page or to a different part of the same page.
  • Scrolling link: A link that allows the user to scroll up and down the page.
  • Menu: A list of text links (or links styled like buttons) that allows the user to navigate to different pages.

Objectives

Students will...
  • Apply coding concepts to complete provided challenge activities
  • Apply concepts from this lesson to create a Home Page Navigation project

Materials

  • Computers or laptops (1 per student) with student account access to Tynker.com

Warm-Up (5 minutes)

  • Tell your students that they’re going to learn about hyperlinks in today’s lesson and show them an example, such as the Tynker dashboard web page. Can they guess how many links it has? (Answer: The Tynker dashboard web page has more than 50 links!) Optional: Ask, “Who can give another example of a hyperlink?”

Activities (45 minutes)

Facilitate as students complete the Adding Hyperlinks modules on their own:
1. What are Hyperlinks? (Document)
  • Students will learn that every web page stored in a web server has a unique location. Here’s an example:

  • Students are introduced to one new concept:
    • Anchor Element- Hyperlinks allow the user to jump from one web page to another. Here is an example:

  • Tell students to click the “Next” button (located at the bottom of the document) to move on to the next module.
2. Linking Files (Document)
  • Students are introduced to one new concept:
    • Relative Links- Students are provided an example of a “my-project” folder that has 2 folders (i.e., pets, photos), 5 HTML files (i.e., index.html, me.html, index.html, kitty.html, max.html), and 3 JPG images (i.e., kitty-summer.jpg, max-playing.jpg, max-winter.jpg):

  • Check that students are clicking the different hyperlinks in the “Project Structure” exercise.
3. Link Attributes (Document)
  • Students are introduced to two new concepts:
    • The title Attribute- The title attribute allows students to provide more information to the user regarding the link. For example, text information will appear when the user hovers their mouse over the anchor element. Here is an example that uses the title attribute:

    • The target Attribute- The target attribute allows students to make a link that opens a new page in a different web browser tab or window. Here is an example that uses the target attribute:

4. Identifying Elements (Document)
  • Students can identify and classify HTML elements using the class and id attributes.
  • This module introduces one new concept:
    • The id Attribute- Students will learn that any element, such as a paragraph, link, or image can have its own unique id. Here’s an example:

  • Point out to students that they can use a special CSS selector that starts with the symbol (#). Here’s an example:

5. CSS Classes (Document)
  • Students are introduced to one new concept:
    • The class Attribute- The class attribute allows students to target a group of elements by applying the class styling to the specified elements. Here’s an example that uses a string of text with no spaces:

      Tell students that they can also use a CSS selector that starts with a (“.”), such as:

6. Images as Links (Document)
  • Students are introduced to one new concept:
    • Image Element Nested Inside a Link- Students are provided an interactive example that demonstrates how clicking an image can open a new page. Here is an example:

  • To solve the challenge activity, students will need to add at least 3 images; add a link to each image; and set the target attribute with the correct value. Give a hint: Ask students, “What value should the target attribute be set to?” (Answer: _blank)
7. Link Scrolling (Document)
  • Optional: Ask students, “When a browser opens a page, does it automatically go to the top or bottom of the page?” (Answer: Top.) “If the page is long, what do you need to do to see all the content?” (Answer: Scroll down the page.)
  • Explain to students that they can link to a specific place inside a web page by using the # symbol followed by a specific id. Here is an example from the “Using the # Symbol” exercise:


    Encourage students to test it out by clicking the hyperlinks on the exercise. This is what the hyperlinks look like:

  • To solve the challenge activity, students will need to add at least 3 images; write a short description of each image; and add links to the list items that take them to the correct image when clicked. If students are struggling, tell them to tackle the challenge one step at a time. For example, their first step can be adding the 3 images inside the body tags:

8. Styling Links (Document)
  • Students will learn how to style links as buttons. Point out the available values and example images on the “Text Decoration” chart:

    Here’s an example:

  • Students are introduced to one new concept:
    • Create a Menu- Students learn that they can create a navigation menu with links for their About Me project.
  • This module includes two different challenge activities.
    • In “challenge 3,” students will need to add links to each of the list items. Give a hint and point out the different list items: Home, About Me, My Pets.
    • In “challenge 4,” students will need to style each of the following items (i.e., Home, About Me, My Pets) to look like the given example:

      Give a hint: Tell students to use the “Links as Buttons” code inside the style element as a resource.
9. Project 6: Home Page Navigation (DIY)
  • In this DIY (do-it-yourself) project, students will create three web pages (i.e., Home, My Photos, and My Pets) with hyperlinks, menu navigation, lists, headings, and images using the Text Code Editor. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial” tab, which will guide them through the project.
  • Are students struggling? Point out that they need to have at least three different HTML files, for example:

  • Here’s a screen image sample of what their project might look like:

  • Did students finish early? Direct their attention to “Step 6” of the “Tutorial” tab, which provides bonus challenges, such as adding more pages and experimenting with different styles of navigation options.
10. Quiz (Multiple Choice)
  • Students will be asked 5 quiz questions to review concepts from this lesson.

Extended Activities (20 minutes)

Discuss the following with your students:
  • What is something you or a friend found difficult in today’s lesson? Make sure to discuss successes and obstacles.
  • List one purpose of including a hyperlink in your web page. (Suggested answer: To direct the user to a different page.)
  • How can you style a link to distinguish it from regular text? (Suggested answer: Make the link blue and underlined OR style the link to look like a button.)

U.S. Standards

  • CCSS-Math: MP.1, MP.4
  • CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  • CSTA: 2-AP-10, 2-AP-13, 2-AP-16, 2-AP-17
  • CS CA: 6-8.AP.10, 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.K. Standards

Key Stage 3 (Years 7-9)
  • Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
  • Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
  • Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.

Answer Key

Challenge 1 (Module 6)- Images with Links:


Challenge 2 (Module 7)- Scroll to Image:

Challenge 3 (Module 8)- List of Text Links:

Challenge 4 (Module 8)- List of Links Styled Like Buttons: