Lesson 3: Headings
45 minutes
Overview
Question of the Day: How can we work together to fix problems with our websites?
In this lesson, students continue to use HTML to structure text on web pages, this time in pairs, with a focus on working together and debugging problems with their sites. Students learn how the different heading elements are displayed by default and practice using them to create page and section titles.
Purpose
This lesson introduces the core practices of pair programming and debugging. These will be used throughout the unit and align with authentic practices used by industry professionals. It also covers the heading tags that students will use in their pages for the rest of the unit and reinforces the general structure of HTML (opening tag / content / closing tag).
Assessment Opportunities
-
Use heading tags to change the appearance of text on a web page.
See the multiple choice question on Level 8 and the rubric on Level 9.
-
Structure content into headings, subheadings, and paragraphs.
See the rubric on Level 9.
-
Use a structured practice to collaboratively create a digital artifact.
As students move through the lesson, ensure that that are following the guidelines for pair programming as described in the video. In the wrap up journal prompt, check that student responses describe effective collaboration.
Standards
AP - Algorithms & Programming
- 1B-AP-11 - Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.
- 1B-AP-15 - Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.
Agenda
Objectives
Students will be able to:
- Structure content into headings, subheadings, and paragraphs.
- Use a structured practice to collaboratively create a digital artifact.
- Use heading tags to change the appearance of text on a web page.
Preparation
- Have student journals ready to give back.
- If you want to use an anchor chart, prepare poster paper to do so as a whole class.
- Check the "Teacher's Lounge" forum for verified teachers to find additional strategies or resources shared by fellow teachers
- If you are teaching virtually, consider checking our Virtual Lesson Modifications
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the teachers
- Headings - Slides
- Headings and Paragraphs - Resource
For the students
- Video: Debugging - Video (Download)
- Video: Pair Programming - Video (Download)
Vocabulary
- Heading - A title or summary for a document or section of a document.
Introduced Code
Teaching Guide
Warm Up (5 minutes)
Tags Poster
Journal: Have students make a T-chart on a blank page in their journals and label the top "HTML Tags"
[pull-right]
[/pull-right]
Anchor Chart / Poster: Throughout this unit students will be keeping track of the tags they learn. This warm-up prompts students to record the HTML tags that they learn by writing them in their journals. If you wish, you can also keep track of the same information on a shared class poster or anchor chart that you update after each lesson. Prompts throughout the unit will tell you when students should update their journals, and updating the anchor chart may provide reinforcement of that process.
Prompt: Yesterday, you learned about HTML, the language of the World Wide Web. HTML uses tags to structure content on web pages. In your groups, think of as many tags as you remember and what they do.
Give students a few minutes to think of as many tags as they can.
Remarks
Now that you've had some time to think of your own, share your lists with a partner and see whether there's anything else that you can add.
Discuss: Pairs should discuss with one another and record their ideas in their journals. Afterward, share across the room and add the different tags to a poster or anchor chart, if you choose to make one. As you go through the tags, highlight how working together allowed the students to make their lists more comprehensive.
Goal: The goal of this discussion is to review the tags that students saw in the previous lesson.
<!DOCTYPE html>- Tells the computer that this is a document written in HTML<html>- Indicates the beginning of your code written in HTML<head>- Contains information (sometimes called "metadata") about your web page<body>- Contains all the main content of your web page<p>- Defines a paragraph
Remarks
Usually we are able to solve problems better when we work with someone else. That's true in programming our web sites, too. Today, we're going to look at some ways that we can work together to solve different problems that our websites might have.
Question of the Day: How can we work together to fix problems with our websites?
Activity (35 minutes)
Pair Programming
Group: Put students into pairs.
Pair Programming: Pair programming is practiced in education and in industry. Students who pair program are more confident in their abilities and are more likely to continue to study computer science. This practice is most effective if it is introduced early and the rules for switching partners are enforced by the teacher. You can read more about Pair Programming in the Curriculum Guide linked in the CS Discoveries curriculum page at https://studio.code.org/courses/csd.
Remarks
We're going to be working on Web Lab again today, but this time we'll be using pair programming. Pair programming helps people make better programs by working together, but there are some rules we have to follow to make sure it goes well.
Display: Show the Pair Programming video.
Questions to consider with the video:
- Why do you think professional programmers use pair programming?
- How do you think pair programming will help you to program better?
Goal: The goals of this discussion center less around particular answers to this question and more around promoting positive attitudes toward pair programming. As students discuss its potential benefits, make sure they understand that this is an industry standard practice, not just something done by learners in the classroom.
Review: Ensure that students understand the rules for pair programming:
Some classes may need more support in communicating and collaborating effectively. If appropriate, consider having your students brainstorm a list of "sentence stems" that they can use for respectful and effective communication before they break into pairs ("Have you considered..." "What about..." "I think the problem might be..."). As students move through the lesson, remind them that their main goal today is to learn how to work together on a web page, which is even more important than the heading tag!
- There is only one computer.
- The driver is the only one to touch the keyboard/mouse.
- The navigator should look for problems in the code and keep track of the high-level plan.
- Both driver and navigator should be communicating constantly.
- Driver and navigator must switch when the teacher indicates, typically every few minutes.
Web Lab: Headings
Transition: Have pairs go to Code Studio and both log in using the "Pair Programming" feature.
Prompt: Remind students to switch driver and navigator every three minutes. You may want to project a digital timer at the front of the room.
Facilitating Skill Building Levels: Skill Building levels are designed to continue teaching new skills and blocks through exploration, trial-and-error, and using worked examples from pre-supplied code. Students are still getting familiar with the concepts in the lesson and will need strong support throughout these levels to build confidence, debug their code, and cement their understanding.
[pull-right]
[/pull-right]
Level Types: This multiple choice question that asks students to choose how HTML headings will display on a web page. You can see which students have answered the question correctly by going to that level and pulling out the Teacher Panel from the right hand side. Students who have successfully answered the question will have a green bubble. Students have as many chances as they like to answer correctly, so guessing and checking can also lead to a correct answer. Click Here to learn more about using the teacher panel with students.
Questions to consider with the video:
- What is debugging?
- What are the four steps to debugging?
Students should identify debugging as the process of finding and fixing problems in their code. The four steps of the debugging process are describe the bug, hunt for the bug, try out small solutions (or change your code), and document what you have learned.
You may also want to reference the Guide to Debugging found on the CS Discoveries curriculum page.
Facilitating Practice Levels: Practice levels are designed for students to apply their knowledge from the previous levels and develop fluency in using the new blocks of code to solve problems. Students can choose which practice levels they would like to complete, and it’s not necessary for a student to complete each practice level before continuing.
Students tend to be more engaged and respond better when they have an authentic choice about how to continue their learning. Allow students to choose practice levels according to their interests and level of comfort, and consider providing opportunities for students to demonstrate and explain their solutions to the practice levels they chose to the entire class.
Digging Deeper: For more tips about programming levels, see the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.
Facilitating Assessment Levels: Assessment levels contain a single task that requires applying the skills and concepts from the level in order to solve. Students should complete these levels individually and you can use your judgment of how much external help students should have. Assessment levels also contain a rubric that can be used for formative assessment and a box to provide feedback to students - click here to learn more about using rubrics and giving feedback to students.
Digging Deeper: For more tips about assessing student work, see the CSD Guide to Assessment.
Facilitating Challenge Levels: Challenge levels are designed as extensions to the concepts and skills students learn throughout a lesson. Challenge levels tend to focus on more open-ended tasks for students to complete, or opportunities to combine several skills from previous lessons together into one program.
Challenge levels do not need to be completed for students to meet the core objectives of a lesson. Instead, every task in a challenge level is meant to supplement and enrich the learning objectives of a lesson, but are not required for future lessons. Students can still demonstrate mastery of the objectives of a lesson without completing any of the challenge levels.
Digging Deeper: For more tips about programming levels, see the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.
Wrap Up (5 minutes)
Journal
Question of the Day: How can we work together to fix problems with our websites?
Prompt: Have students update their "HTML Tags" log with the heading tags they learned in this lesson.
Key Vocabulary:
- heading - a title or summary for a document or section of a document
Prompt: Today, you learned a lot about debugging, which is an important skill for programmers. What is one way working with a partner helped you to debug today?
Check that students are describing effective forms of collaboration.
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.
