Lesson 3: Headings
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.
Agenda
Lesson Modifications
Warm Up (10 minutes)
Activity (45 minutes)
Wrap Up (5 minutes)
View on Code Studio
Objectives
Students will be able to:
- Use heading tags to change the appearance of text on a web page.
- Structure content into headings, subheadings, and paragraphs.
- Use a structured practice to collaboratively create a digital artifact.
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.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Headings - Slides
Vocabulary
- Heading - A title or summary for a document or section of a document.
Introduced Code
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 2.
Warm Up (10 minutes)
Teaching Tip
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.
Tags Poster
Journal: Have students make a T-chart on a blank page in their journals and label the top "HTML Tags"
Discussion Goal
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
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.
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 (45 minutes)
Pair Programming
Teaching Tip
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://curriculum.code.org/csd.
Group: Put students into pairs.
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.
Teaching Tip
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!
Review: Ensure that students understand the rules for pair programming:
- 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.
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
Assessment Opportunity
Check that students are describing effective forms of collaboration.
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?
- Lesson Overview
- 1
- Video: Pair Programming
- 2
Teaching Tip
Discussion Goals
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.
Student Instructions
Questions to consider:
- Why do you think professional programmers use pair programming?
- How do you think pair programming will help you to program better?
Teaching Tip
Debugging
Students may note that when code is organized and uses whitespace, it's much easier to find bugs, but any reasonable piece of advice around debugging could work here.
Allow students to share out their advice, and continue to emphasize that getting bugs is a normal part of programming. Students will be introduced to a formal debugging process later in the lesson.
Student Instructions
Two heads are better than one!
This HTML code has some bugs that are making the code pink.
Do This: Work with your partner to fix the HTML bugs so that none of the code is pink. Together, come up with one piece of debugging advice.
Student Instructions
Headings
:::
::: details [**What is an HTML tag?**]
An HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.
:::
So far, you've organized your content into paragraphs. Another way HTML allows you to organize your code is by using headings. A heading is a short piece of text that goes at the top of a section of content, like a title.
Do This:
- Find the headings in the web page below and use the Inspector Tool to see the code that makes them.
- Make sure you and your partner agree on what the tags do.
- Change the code so that "Drawing" and "2 years" match the headings on the rest of the page.
Student Instructions
Heading Sizes
` The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is `
`. You can also try the `
`, `
`, `
`, and `
` tags which get smaller as the number gets larger.
:::
::: details [**What is HTML?**]
HTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
:::
::: details [**What is an HTML element?**]
An HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example:
:::
::: details [**What is an HTML tag?**]
An HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.
:::
Headings can come in different sizes. In this page, there are six different sized headings, but they are all mixed up. Can you and your partner figure out how to fix them?
Do This: Use the inspector tool to figure out what makes the headings different sizes Make sure you and your partner agree on what the different heading tags do. * Change the tags so that the headings are in order from biggest to smallest, and the text says the correct size, as in the picture below.
- Quick Check
- 6
Teaching Tip
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.
Student Instructions
<h3> Eggs </h3> <h1> Bacon </h1> <h6> Waffles </h6>
- Video: Debugging
- 7
Teaching Tip
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.
Student Instructions
Questions to consider:
- What is debugging?
- What are the four steps to debugging?
Student Instructions
Try out what you've learned on one or more of the following activities.
Choose from the following activities:
Use your debugging skills to figure out why the paragraph has disappeared.
Use your debugging skills to figure out why the tags are pink.
Use your debugging skills to figure out why some subheadings are smaller than others.
Add a large heading to the top of a web page.
Student Instructions
Debug: Missing Paragraph
::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::
::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::
::: details [What are some examples of bugs?]
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
:::
::: details [Why does the code sometimes turn pink?]
Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.
:::
::: details [Why does HTML seem to work even when it's broken?]
HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.
:::
Someone has submitted a bug report on this web page. Can you fix the bug?
| What I expected to happen | What happened instead |
|---|---|
| Three paragraphs, one each | The turtle paragraph is missing |
| on dogs, turtles, and birds |
Do this
- Find and fix the problem that is causing the bug
Teaching Tip
This is a teacher note.
Student Instructions
Debug: Pink Tags
::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::
::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::
::: details [What are some examples of bugs?]
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
:::
::: details [Why does the code sometimes turn pink?]
Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.
:::
::: details [Why does HTML seem to work even when it's broken?]
HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.
:::
Someone has submitted a bug report on this web page. Can you fix the bug?
| What I expected to happen | What happened instead |
|---|---|
| The code should not be pink | There is pink code near line 8 and line 14 |
# Do this * Find and fix the problem that is causing the bug
Teaching Tip
This is a teacher note.
Student Instructions
Debug: Pink Tags
::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::
::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::
::: details [What are some examples of bugs?]
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
:::
::: details [Why does the code sometimes turn pink?]
Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.
:::
::: details [Why does HTML seem to work even when it's broken?]
HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.
:::
Someone has submitted a bug report on this web page. Can you fix the bug?
| What I expected to happen | What happened instead |
|---|---|
| The code should not be pink | There is pink code near line 12 and line 14 |
# Do this * Find and fix the problem that is causing the bug.
Teaching Tip
This is a teacher note.
Student Instructions
Add Larger Heading
::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::
::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::
::: details [What are some examples of bugs?]
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
:::
::: details [Why does the code sometimes turn pink?]
Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.
:::
::: details [Why does HTML seem to work even when it's broken?]
HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.
:::
Here's a great article on modes of transportation. Can you add a catchy, large heading and title it?
# Do this * Add a larger heading at the top of the article.
- Assessment
- 9
Assessment Opportunities
Use HTML to create a web page that includes hierarchical headings, paragraphs, lists, and images.
Understand the need for precision when using computer languages and use appropriate syntax.
Extensive Evidence
All content is contained in tags, uses paragraph tags and multiple sized headings in a logically consistent way.
Convincing Evidence
All content is contained in tags, uses paragraph and heading tags in a reasonable way.
Limited Evidence
Most content is contained in tags. At least one heading tag is used.
No Evidence
Little or no content is contained in tags.
Student Instructions
Headings and Paragraphs
`) and closing(`
`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headings or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text. ::: ::: details [**How do I create multiple paragraphs?**] Paragraphs are marked by opening (``) and closing (`
`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `` tags. For example wzxhzdk:0 ::: ::: details [**What are headings?**] Headings are the different sized section titles throughout a web page. Headings add structure to your web page by breaking it up so it's easier for a user to read. ::: ::: details [**How do I make different sized headings?**] Headings come in 6 different sizes. So far you have primarily used the biggest one `
`. The number 1 in the HTML tag designates that this is the biggest heading. The smallest heading is `
`. You can also try the `
`, `
`, `
`, and `
` tags which get smaller as the number gets larger.
:::
::: details [**What is HTML?**]
HTML stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
:::
::: details [**What is an HTML element?**]
An HTML element is a piece of a website that is marked by a start tag and sometimes closed with an end tag. The element also includes the content inside the tags. For example:
:::
::: details [**What is an HTML tag?**]
An HTML tag is the special set of characters that tells the machine where the start or end of an HTML element is and what type it is.
:::
The author of this page added in a lot of content, but did not think about structure. All of the text is mashed together.
Do This: Look through the content with your partner and decide what you think the best structure should be. Use your heading and paragraph tags to code the structure into the page.
Student Instructions
Here are some extra HTML codes to try out, and a Free Play area to use them in.
Choose from the following activities:
Learn how to make new lines without starting a new paragraph. You can use this code to add poems or lists to your page.
Learn the code for making a horizontal rule and practice using it.
Learn the code for the special character "<" and practice using it.
Learn the code for the special character ">" and practice using it.
Learn the code for the special character "&" and practice using it.
Try using the new code you have learned to create your own HTML page.
Student Instructions
Extra Code: Line Break
In some situations, like a poem or a list, you'll want to start a new line inside the same paragraph, like you might do in poetry. You can use the line break <br> tag for this.
Do This
- Read the HTML and look for where the line break
<br>code is used to separate the lines in the poem. - Add two more line breaks to separate out the other lines in the poem.
Tip: The <br> tag is useful for writing addresses or poems.
Note: Use the <br> tag to enter line breaks, not to separate paragraphs. Always separate each paragraph with its own set of <p> and </p> tags!
Student Instructions
Extra Code: Horizontal Rule
In some situations, you'll want to insert a horizontal line, or rule, to break up themes in your page. You can use the horizontal rule <hr> tag for this.
Do This
- Read the HTML and look for where the
<hr>code is used to add a horizontal rule in the web page. - Add more horizontal rules to break up the page by theme.
Student Instructions
Extra Code: Special Character "<"
As you have learned, the character < is used for tags. If we want the character to show up as < in a paragraph, we need to use the special code <.
Do This
- Read the HTML and look for where the
<code is used. - Add a less than sign "<" and "3" wherever you see the word "heart" to make the page more fun!
Student Instructions
Extra Code: Special Character ">"
As you have learned, the character > is used to close tags. If these symbols are also in your text, the browser might mix them with tags. To avoid this, we should use the special code > anywhere we want ">" to show up on a web page.
Your teacher is making an online worksheet to teach younger students how to use the greater than sign in math and needs your help adding the proper sign.
Do This
- Read the HTML and look for where the
>code is already used twice. - Use the special code to add ">" where needed to complete the teacher's worksheet.
Student Instructions
Extra Code: Special Character "&"
The ampersand character (&) can cause errors in your HTML code because it is actually used for other special characters like less than symbols (< is encoded as <), and double quotation marks (" is encoded as").
To use the & character in a paragraph correctly, you need the special code &.
Yes, you need an ampersand to encode an ampersand!
In this activity, you'll make up a list some of your favorite things and practice using ampersands.
Do This
- Read the HTML and look for where the
&code is used correctly. - Replace the ampersand that is causing pink code with the special code for the symbol.
- Fill in the blank categories or add your own using the new code. Try to come up with answers that use the symbol!
Student Instructions
Free Play
Now that you have learned how to create HTML headings and code special characters, you can put your skills to the test!
Do This
- Create your own HTML page using the new code.
- Be creative and have fun with it!
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
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.