Building with HTML

Unit: Web Design Fundamentals

Lesson 3 of 30

Curriculum Information

Subject Area: Technology
Curriculum Level: Level 5 | New Zealand Curriculum – Technology Learning Area
Strands:

• Technological Practice: Planning for practice; Brief development
• Technological Knowledge: Technological systems
• Nature of Technology: Characteristics of technological outcomes

Key Competencies Developed:

• Thinking (creative and critical thinking in digital environments)
• Using language, symbols, and texts (coding and digital expression)
• Managing self (self-directed learning)
• Relating to others (peer review and collaborative development)

---

Lesson Title

HTML Text and Links

Lesson Duration

60 minutes

Learning Outcome

By the end of this lesson, Year 10 students will:

• Understand how to use HTML to structure and format text on a webpage
• Use ordered and unordered lists
• Accurately construct hyperlinks to other websites using the <a> tag
• Produce a basic webpage that contains at least three different text formats, one list, and two functional links

---

Materials and Set-Up

Resources Required:

• Computers with text editor (e.g., Visual Studio Code)
• Internet browser (Google Chrome, Firefox, etc.)
• Whiteboard and markers
• Pre-prepared HTML boilerplate template (printed and digital copy available)
• Quick-reference handout: HTML Tags Cheat Sheet (printed)

Room Set-Up:

• Students seated in pairs to encourage peer learning
• Teacher station connected to projector

---

Te Ao Māori Perspectives

This lesson integrates foundational principles of ako (reciprocal learning) and whanaungatanga (relationships) through collaborative pair activities and sharing of knowledge with peers. Students are encouraged to draw parallels between web “links” and whakapapa connections – how everything is woven together and holding space for others’ experiences online.

---

Lesson Sequence

1. Whakawhanaungatanga & Recap (5 minutes)

Purpose: Create connection, set context
Activity: Karakia and brief roll/icebreaker – “What’s one website you visit daily?”
Recap:

• Review concepts from Lesson 2: What is HTML? What tags did we already learn?

---

2. Introduction of New Concepts (10 minutes)

Teaching Input:
Use the projector to display three key uses of HTML covered today:

• Text formatting: <strong>, <em>, <p>, <h1> to <h6>
• Lists: <ul>, <ol>, <li>
• Hyperlinks: <a href="URL">Link text</a>

Analogy (Thinking Skills):
Ask: "If your webpage were a mihi, what would the links be? How do you invite others to explore more about where you come from – just like how hyperlinks lead users to more depth?"

---

3. Guided Practice (15 minutes)

Activity: "From Script to Structure"

• Project a basic webpage made using only <p> tags
• Class collaboratively transforms it: add a heading, bold key terms using <strong>, add an unordered list of links, add links using <a>

Discuss:

• Why are different tags used? What kind of user experience does this create?

---

4. Independent Task – Design Challenge (20 minutes)

Task Brief:
Students will create a personal homepage with the following elements:

1. A heading with their name/title using appropriate heading tags <h1>–<h3>
2. A paragraph about a hobby or interest
3. An unordered or ordered list (e.g., favourite books, places, or foods)
4. Two working hyperlinks – one must go to a meaningful site of their choice, and the other to a classmate's webpage (Activity will link into Lesson 4)

Success Criteria:

• HTML tags are used correctly and nested properly
• Content is meaningful and formatted
• Links are functional and relevant

Teacher Prompting:

• “Does your page ‘speak’ clearly to someone visiting it?”
• “How are you making sure each section of your page has a purpose?”

---

5. Ako & Feedback Session (5 minutes)

Peer Review:

• In pairs, students review each other's pages
• Use a simple warm/cool feedback sheet
  • Warm feedback: “One element I liked was...”
  • Cool feedback: “One way to improve is...”

---

6. Wrap-Up and Reflect (5 minutes)

• Students write in their design journal using the prompt:
  • “Today I learned how to...”
  • “Next time, I want to try...”

Quick Poll (using thumbs or sticky dots):

• How confident do you feel about using HTML so far?
  • 😃 = Very confident
  • 😐 = Sorta confident
  • 😟 = Need more help

---

Homework / Extension

Optional – Digital Scavenger Hunt
Students explore 3 of their favourite websites and document:

• One place using a hyperlink
• One use of a heading
• One example of a list

They will bring this back to discuss as design inspiration in Lesson 4.

---

Teacher Notes

• Consider checking browser access and saving permissions before the lesson
• Tailor examples to student interests where possible
• Allow bilingual scaffolding for te reo Māori learners, especially terminology like ‘tūhono’ (connect/link)

---

Assessment (Formative)

• Observation during the task
• Review of student webpages
• Peer feedback quality
• Design journal entries

---

Reflection for Kaiako

• Were all students able to complete their structured webpage?
• Did the whanaungatanga activity at the start help form connections for the day’s task?
• How might we amplify the connection between cultural identity and digital presence in future lessons?

---

Ngā mihi nui – thank you for sharing in this design journey – our students are the next generation of digital storytellers!