| Full lesson | Create for a teacher a set of content for giving a lesson, beginning with the lesson plan. Each new block of materials must begin with an H1 heading (other subheaders must be H2, H3, etc). When you describe required pictures, write those descriptions in curly brackets, for example: {A picture of a triangle} |
| Which subject | Design and technology |
| What topic | Hyperlinks, Internal, External, Email, and Create a Navigation Bar |
| What length (min) | 45 |
| What age group | Year or Grade 10 |
| Class size | 6 |
| What curriculum | CompuScholar |
| Include full script | |
| Check previous homework | |
| Ask some students to presents their homework | |
| Add a physical break | |
| Add group activities | |
| Include homework | |
| Show correct answers | |
| Prepare slide templates | |
| Number of slides | 7 |
| Create fill-in cards for students | |
| Create creative backup tasks for unexpected moments |
Hyperlinks: Internal, External, Email, and Creating a Navigation Bar
Year/Grade 10
Design and Technology
6
CompuScholar
| Step Number | Step Title | Length (mins) | Details |
|---|---|---|---|
| 1 | Introduction | 5 | Introduce the topic of hyperlinks and their importance in web design. Define internal, external, and email hyperlinks. |
| 2 | Group Activity - Research | 10 | Divide students into pairs and assign them different types of hyperlinks. Each pair will research their assigned type and fill in the printable cards. |
| 3 | Direct Instruction | 10 | Teach students how to create internal and external hyperlinks, and demonstrate how to create email links and navigation bars. |
| 4 | Hands-on Practice | 10 | Students will work individually to create hyperlinks in a sample web page using what they learned. |
| 5 | Collecting Printable Cards | 5 | Randomly check the filled printable cards to assess students' understanding without requiring presentations. |
| 6 | Assigning Homework | 5 | Assign homework related to creating a webpage with hyperlinks, and explain the expectations for the assignment. |
"Good morning, everyone! Today, we're diving into an exciting topic that's crucial in web design: hyperlinks. Let's start by discussing what hyperlinks are and why they are important. Can anyone tell me what they think a hyperlink is?"
[Wait for responses]
"Exactly! Hyperlinks are clickable links that connect one web page to another. They can take you to different sections within the same page, to other websites, or to send an email—all essential functions for navigating the web. There are three main types of hyperlinks: internal, external, and email hyperlinks.
Let's keep these definitions in mind as we explore this topic further."
"Now, I would like you to turn to your partner and form pairs. I will assign each pair a type of hyperlink to research. Your task is to gather information about your assigned hyperlink type and fill out the printable cards I have provided.
The pairs will be:
You have 10 minutes to complete this activity. Use the internet to find examples and key characteristics of your assigned hyperlink. After 10 minutes, we’ll come back together and share what we’ve learned.”
[Circulate the room to guide students and ensure they’re engaged]
"Great work, everyone! Now, let’s bring everyone’s findings together. I’ll start by explaining how to create internal and external hyperlinks.
First, an internal hyperlink. You do this by using the <a> tag and pointing to a specific page on your own website. For example, it looks like this:
<a href='about.html'>About Us</a>Now for external hyperlinks, you use a similar approach but link to an outside site. Here’s how that would look:
<a href='https://www.example.com'>Visit Example</a>Next, I'll show you how to create an email link. This will utilize the mailto: function:
<a href='mailto:email@example.com'>Email Us</a>Finally, let’s talk about creating a navigation bar. The navigation bar usually contains multiple internal links like this:
<nav>
<a href='home.html'>Home</a>
<a href='about.html'>About</a>
<a href='contact.html'>Contact</a>
</nav>Does everyone understand these concepts? Are there any questions?"
"It's time for some practical application! I want each of you to create hyperlinks in a sample web page using the information we've just learned. Open your HTML editor and create a simple HTML page with at least one internal hyperlink, one external hyperlink, one email link, and a navigation bar.
You have 10 minutes to complete this, and I'll be here to assist you if you have any questions. Once you're finished, you can show me your progress."
[Walk around the classroom to provide assistance as necessary]
"Alright, time's up! Please pass your filled-out printable cards to me. I’ll randomly check through them to assess your understanding of the different types of hyperlinks we discussed. You don’t need to present them; I’ll just look for accuracy in your findings.”
[Collect and quickly review the cards]
"Now for your homework! I would like each of you to create a webpage that includes all the types of hyperlinks we've covered today. Make sure you have at least one internal link, one external link, one email link, and a navigation bar.
The expectations for this assignment are clearly outlined on the handout I’ll provide. Make sure to upload your project to the class drive by next week. If you have any questions or need assistance, don’t hesitate to ask me during the next class.”
"To wrap up today's lesson, let's quickly recap what we've learned. We explored the different types of hyperlinks — internal, external, and email — and we even practiced creating them in a webpage.
Hyperlinks are vital for web design, as they provide navigation and connectivity on the web. I encourage you all to explore and experiment with hyperlinks further on your own. Thanks for your hard work today!"
| Slide Number | Image | Slide Content |
|---|---|---|
| 1 | {Image: A classroom setting with students seated} | - Introduction to the lesson on hyperlinks - Definition of hyperlinks: clickable links connecting web pages - Importance of hyperlinks in web navigation |
| 2 | {Image: Two students working together} | - Group activity: Research assigned hyperlink types - Pair 1: Internal Hyperlink - Pair 2: External Hyperlink - Pair 3: Email Hyperlink |
| 3 | {Image: A computer screen showing HTML code} | - Direct instruction on creating hyperlinks - Internal hyperlink example: <a href='about.html'>About Us</a> - External hyperlink example: <a href='https://www.example.com'>Visit Example</a> - Email hyperlink example: <a href='mailto:email@example.com'>Email Us</a> - Navigation bar example with internal links |
| 4 | {Image: Student using a laptop to code} | - Hands-on practice session - Create hyperlinks in a sample web page - Include at least one internal, one external, one email link, and a navigation bar - Duration: 10 minutes to complete |
| 5 | {Image: A stack of papers being collected} | - Collecting printable cards - Assessment of understanding through collected cards - No presentation required; focus on accuracy |
| 6 | {Image: A checklist with homework instructions} | - Assigning homework - Create a webpage with all types of hyperlinks - Include: at least one internal link, one external link, one email link, and a navigation bar - Submission deadline: next week |
| 7 | {Image: A summary slide with bullet points} | - Conclusion of the lesson - Recap of different types of hyperlinks - Importance for web design and navigation - Encourage exploration and experimentation with hyperlinks |
Define a hyperlink and explain its importance in web design.
List and describe the three main types of hyperlinks covered in class. Provide an example for each type.
Write the HTML code for an internal hyperlink that links to a page called "gallery.html" with the link text "Gallery".
Create an external hyperlink in HTML that directs users to "https://www.wikipedia.org" with the text "Visit Wikipedia".
How would you write an email hyperlink that opens a new email to "contact@example.com" with the text "Contact Us"?
Explain the purpose of a navigation bar in a webpage. Provide an example of how to create a basic navigation bar using HTML.
Why is it important to include internal links in a webpage? What impact do they have on user experience?
After learning about hyperlinks, how do you think they enhance the functionality of websites? Provide two benefits.
Design a simple webpage layout on paper that includes at least one internal link, one external link, one email link, and a navigation bar. Describe your design in a few sentences.
Reflect on the group activity from class. What was the most interesting thing you learned about your assigned type of hyperlink?
A hyperlink is a clickable link that connects one web page to another; it's crucial for navigation and connectivity on the web.
The three main types of hyperlinks are:
<a href='about.html'>About Us</a>).<a href='https://www.example.com'>Visit Example</a>).<a href='mailto:email@example.com'>Email Us</a>).<a href='gallery.html'>Gallery</a>
<a href='https://www.wikipedia.org'>Visit Wikipedia</a>
<a href='mailto:contact@example.com'>Contact Us</a>
A navigation bar provides a way for users to easily navigate a website. Example:
<nav>
<a href='home.html'>Home</a>
<a href='about.html'>About</a>
<a href='contact.html'>Contact</a>
</nav>Internal links help in keeping users engaged on a site and allow for easy navigation to related content, enhancing user experience by providing a seamless flow of information.
Hyperlinks enhance website functionality by enabling easy access to related content and facilitating communication through email links. Benefits include improved navigation and better user engagement.
(Answers will vary; students should provide a visual layout on paper and describe placement and purpose of their links and nav bar.)
(Answers will vary; students should reflect on their learning experience and insights gained from the group research activity on their hyperlink type.)
| Question | Answer |
|---|---|
| What is a hyperlink? | |
| What are the three main types of hyperlinks? | |
| Can you give an example of an internal hyperlink in HTML? | |
| How does an external hyperlink differ from an internal hyperlink? | |
| What is the purpose of an email hyperlink? | |
| How do you create a navigation bar with hyperlinks in HTML? | |
| Why are hyperlinks important in web design? | |
| What would you include in your homework assignment regarding hyperlinks? | |
Can you describe the function of the <a> tag in HTML? |
|
| What are some examples of when you might use email hyperlinks? |