Lesson 4: Mini-Project: HTML Web Page
Overview
Question of the Day: How can I use HTML to express a personal value?
In this optional mini-project, students use what they have learned to create their own personal web page on a topic of their choice. The lesson starts with a review of the HTML that students have learned. They then begin their project by designing a web page and identifying which tags they will use to implement it. They then create their web pages in Web Lab and share with the class. Optionally, after engaging in a formal feedback process, they may make final changes to their websites before reflecting on their process. This project can be completed in one day or expanded over several days, depending on the scheduling needs of the class.
Purpose
This project allows students more time to practice the content that they have already learned. It is intentionally open-ended and flexible to allow classes to spend one or several days, depending on the pacing needs of the students or the school calendar.
Agenda
Lesson Modifications
Warm Up
Activity
Wrap Up
View on Code Studio
Preparation
- Print out a copy of the project guide for each student.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- HTML Web Page - Slides
- Peer Review - HTML Web Page - Exemplar
- Project Guide - HTML Project - Exemplar
For the Students
- HTML Web Page - Project Guide
- HTML Web Page - Peer Review
- HTML Web Page - Rubric
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
Journal
Discussion Goal
This discussion allows students to share ideas for their websites, but it is not necessary for everyone to share if they prefer not to. The goal of the discussion is to start students thinking about the topic and encourage them to think of websites as a way to express themselves.
Prompt: What is one personal value you would like to share with the world?
Allow volunteers to share out personal values that they think are important.
Remarks
We all have things that are important to us. Websites allow us to share those things with the entire world. Today, we are going to work on using what we have learned about HTML to share out something that we think is important.
Question of the Day: How can I use HTML to express a personal value?
Activity
Distribute: Give each student a copy of the Project Guide.
Step 1: Define - State your Goal
Students will already have stated a personal value in the warm-up, but this is a chance for them to refine what they want to say, or even change their minds about their website topic.
Step 2: Prepare - Design your Page
As students answer questions about the design of the page, ensure that they are differentiating between the content of the page and the way that content is organized or structured. After they have completed their designs, ensure that they can identify which tags will be needed for different text on the web pages.
Step 3: Try - Develop your Page
After you have checked the designs, allow students to log into Code Studio and code their pages. They will have a chance to review all of the tags they have learned before they start on their web pages. They can complete these activities as a review or use them as resources while they work on their projects.
Step 4: Reflect
Students should have a chance to think about what they liked best about their pages. You may also want to allow students to formally or informally present their work to the rest of the class.
Peer Feeedback
As part of this project, you may give students the opportunity to give feedback to their peers using the Peer Review form. This will likely extend the project by at least one day.
Wrap Up
Discussion Goal
Use this share out to get students excited about the things that they will learn in upcoming lessons. If you create a poster, you may also want to cross off topics as you teach them. For topics that are not covered in the curriculum, you can point students to similar topics that are covered or, if appropriate, direct them to outside resources that will guide them in learning those skills.
Question of the Day: How can I use HTML to express a personal value?
Journal
Prompt: What's one thing that would make your web page better that you don't know how to do yet?
As students share out their ideas, put them on the board or a poster, and try to call out any skills that they will be learning in the next few lessons.
- Lesson Overview
- 1
Student Instructions
Here are some HTML tags that you may have seen in the past couple of lessons. You can use them to review the tags you might want for your web page.
Choose from the following activities:
Add paragraph tags to separate the paragraphs
Find the bugs caused by incorrect paragraph tags.
Use your debugging skills to figure out why the paragraph has disappeared.
Fix the bugs caused by incorrect heading tags.
Add a large heading to the top of a web page.
Separate the lines of the haiku using the <br> tag.
Student Instructions
`) and closing(`
`) tags. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. 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 make multiple paragraphs?**] Here's an example of several paragraph tags in a row. This code would be placed inside of the body of your web page. wzxhzdk:0 :::Use Paragraph Tags
The <p> </p> tags or "paragraph" start and end tags are placed around text to indicate that it is part of a paragraph. Placing text between paragraph start and end tags lets the computer know that it should be treated differently, often just spacing it out from other text.
Do This
- Use
<p>tags to separate the content into different paragraphs.
Student Instructions
`) and closing(`
`) tags. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. 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 make multiple paragraphs?**] Here's an example of several paragraph tags in a row. This code would be placed inside of the body of your web page. wzxhzdk:0 :::Use Paragraph Tags
The <p> </p> tags or "paragraph" start and end tags are placed around text to indicate that it is part of a paragraph. Placing text between paragraph start and end tags lets the computer know that it should be treated differently, often just spacing it out from other text.
Do This
- Fix the code so that none of the tags turn pink.
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.
:::
It looks like the second paragraph is missing. Can you fix the bug?
Do this
- Find and fix the problem that is causing the bug.
Student Instructions
Debug: Headings
::: 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.
:::
There are a few issues with this page's headings. Can you fix them?
Do This
- Fix all of the pink errors.
- Adjust the heading tags to be the appropriate size, if necessary.
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 page about animals of the sea. Can you add a catchy, large heading and title it?
Do this
- Add a larger heading at the top of the page.
Student Instructions
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.
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!
Do This
- Separate each line using
<br/>tags.
Student Instructions
Check out these new tags that will let you add lists to your web page.
Choose from the following activities:
Create a list of unordered elements
Use the <ol> tag to create a numbered list
Student Instructions
Unordered Lists
::: details [What are the two types of lists?] There are two types of lists in HTML, ordered and unordered lists.
:::
::: details [What is an unordered list?]
An unordered list is just a set of bulleted items.
An unordered list element has the tag <ul>. This is an abbreviation for Unordered List. Each item in the list is marked by a list item element <li>. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the unordered list (<ul>).
:::
::: details [How do I make an unordered list?]
Making an unordered list has two steps: making the list and adding the list items. To make the unordered list, write the unordered list tags <ul></ul>. Next, add your list items inside the unordered list tags. To make each list item, use the list item tags <li></li> and write the list item inside the tags.
It can be helpful to indent your <li> tags so it's clear they are contained in the <ul> tag.
:::
Look at how the given code creates an unordered list, then create your own list of desserts.
Do This
- Look at how the
<ul>and<li>tags are used to create an unordered list. - Use the
<ul>and<li>tags to create your own list.
::: details [Show me another example of working code.]
| Example | Result |
| wzxhzdk:0 |  |
:::
Student Instructions
Ordered Lists
::: details [What are the two types of lists?] There are two types of lists in HTML, ordered and unordered lists. :::
::: details [What is an ordered list?]
An ordered list is a set of bulleted items which are numbered.
An ordered list element has the tag <ol> . This is an abbreviation for Ordered List. Each item in the list is marked by a list item element <li>;. This is an abbreviation for List Item. The list item element is a child element, which means that it goes inside of its parent element, the ordered list (<ol>).
:::
::: details [How do I make an ordered list?]
Making an ordered list has two steps: making the list and adding the list items. To make the ordered list, write the ordered list tags <ol></ol>. Next, add your list items inside the ordered list tags. To make each list item, use the list item tags <li></li> and write the list item inside the tags.
It can be helpful to indent your <li> tags so it's clear they are contained in the <ol> tag.
:::
An ordered list is like an unordered (bulleted) list, but it has numbers. Just use the <ol> tag instead of <ul>.
Do This
- Use the
<ol>and<li>tags to structure this content into an ordered list.
::: details [Show me an example of working code.]
| Example | Result |
| wzxhzdk:0 |  |
:::
- Code Your Page
- 4
Student Instructions
Add HTML
Next, you should add the HTML to your page.
Do This
- Add HTML to make the page you sketched in your project guide.
- Review Your Page
- 5
Student Instructions
Review your Page
Next, check to make sure your page has everything you want.
Do This
- Check to make sure all the content is there.
- Check that the HTML tags structure the content correctly.
- Make sure your code is organized, readable and free of bugs.
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-12 - Modify, remix or incorporate portions of an existing program into one's own work, to develop something new or add more advanced features.
- 1B-AP-15 - Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.