Lesson 3: Intro to HTML
Overview
In this lesson students are introduced HTML as a solution to the problem of how to communicate both the content and structure of a website to a computer. The lesson begins with a brief unplugged activity demonstrating the challenges of effectively communicating the structure of a web page. Students then look at an exemplar HTML page in Web Lab and discuss with their classmates how HTML tags help solve this problem. Students then write their first HTML. A wrap-up discussion helps to solidify the understanding of content vs. structure that was developed throughout the lesson.
Purpose
This lesson introduces many new concepts and tools to students. They are introduced to HTML, the Web Lab tool, and how to navigate lesson resources on Code.org in general. While the understanding of HTML as a way to communicate the structure of a web page is a critical learning objective, this lesson has students do minimal programming since there are many other new ideas and tools to grasp. In the next lesson students will have more time to spend programming in HTML.
Assessment Opportunities
-
Explain that HTML allows a programmer to communicate the way content should be structured on a web page
In the final reflection prompt, students should give an explanation of how HTML is used to structure content on a page.
-
Write a simple HTML document that uses opening and closing tags to structure content
Level 8 on Code Studio provides a mini-rubric to assess student use of HTML.
-
Understand how to use lesson resources provided in Web Lab
As students progress through the HTML lesson, check that they are looking through the drop down tips on the right hand side of the instructions, clicking into the map levels in the "Help and Tips" tab, and making use of the inspector tool.
Agenda
Warm Up (10 mins)
Activity (30 minutes)
Wrap Up (5 minutes)
View on Code Studio
Objectives
Students will be able to:
- Explain that HTML allows a programmer to communicate the way content should be structured on a web page
- Write a simple HTML document that uses opening and closing tags to structure content
- Understand how to use lesson resources provided in Web Lab
Preparation
- Review the Code Studio levels
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Exemplar Text Website - Website
Vocabulary
- HTML - Hypertext Markup Language, a language used to create web pages
- HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
- HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type
- Website Content - the text and images on a website
- Website Structure - how the content of a website is organized
Introduced Code
Teaching Guide
Warm Up (10 mins)
Teaching Tip
If this site is blocked for students, your IT department may need to whitelist codeprojects.org. This is the same site that students will use to publish their own web pages, so it's important that they have access.
The Need for HTML
Display: Show the image inside the Exemplar Text Website - Website
Prompt: Imagine you wanted to explain to a person over the phone how to draw this web page. Write down as clear instructions so that what they would draw would perfectly match this image.
Discussion Goal
Goal: Activities like this one are often used in CS courses to help highlight just how much precision is needed to communicate instructions to a computer. In this instance the goal is similar. You want to highlight the challenge of differentiating the actual content on the page and instructions indicating how it should be structured. This demonstration helps justify the creation of HTML in order to tag pieces of content to help the computer understand what they are and hence how they should look.
Discuss: Once students have written their instructions, have them briefly share their instructions with a neighbor.
Demo: Run a quick demo using the instructions below.
- Pick one student to verbally share one of their instructions with you.
- The teacher should act as the person on the phone trying to draw the web page
- Publicly “draw” the website exactly as the students instructions say. For example, if told to "Write bigger", write the word "bigger" on the page. If they don't indicate where text goes then place text in random locations.
- As the student gives you instructions have them tell you if you have drawn it correctly. If you have not drawn it correctly, have them make their directions more specific until you can draw it correctly.
- Change students after a couple instructions to get more students involved.
- Keep track of the instructions students give and the improvements they make to the instructions somewhere visible as well.
- Repeat this process until you have recreated most of the web page.
Discuss: Once you have finished drawing the site, quickly create a list of all the different kinds of information they needed to account for in their instructions. For example, location, size, font, etc.
Remarks
There's a lot of information that we need to communicate if we want to create web pages. It's not enough to just know what content you want to put on your page, like the actual words or images. You need to know where things should be and how they should look. Today we're going to start learning the languages used on the web to represent this additional information.
Activity (30 minutes)
Teaching Tip
Using Resources: Below you can find recommendations for using the many resources students are introduced to in the lesson. Wait until after students have seen all of these resources to review at the end of the lesson, but add them to the list and model the correct usage as they appear.
- Videos: Watched as a class, but students can always return to them.
- Map Levels: Contain text and diagrams explaining content. These are intended as helpful student resources, not class readings. They are a good place to go for review after learning content or when students get stuck in levels.
- Level Instructions: Instructions may introduce small pieces of new content. Each level features a "Do This" section explaining what students are supposed to do in that level. Set the expectation early that reading these instructions, not just the "Do This" section, is important.
- Level Tips: Students can click these tips in the instruction areas of lessons. Students should use these as a first place to check for help before talking with peers or a teacher.
- Inspector Tool: Highlights the code corresponding to a web page element when hovered over in the Preview Area.
- Bubble Color: Bubbles may turn green but there is no validation of correctness. Green only means a student clicked Continue or Finish for a level. Set the understanding early that this is more a tool for them than an indication of either completeness or correctness.
Exploring HTML
Remarks
Today we are going to start working with a lot of resources. As we discover each type of resource, we'll add it to the list here at the front of the room, and at the end of the lesson we'll review how each is used.
Display: At the front of the room, write the heading "Resources" on the board or blank poster paper, leaving space to list the various resources as they appear in the lesson.
Wrap Up (5 minutes)
Assessment Opportunity
Goal: Students answers will vary but will likely center around the fact that using tags helps the computer know what different pieces of content "are". Using these tags helps the computer know what the tags are supposed to look like. If this discussion needs to be returned to after students have seen more tags that's fine as well. In either case use this discussion to motivate the content vs. structure wrap-up point.
Reflection
Prompt: In your own words, how does HTML help solve the problem of telling a computer what a web page looks like, not just what content is on it?
Content Corner
Content - Structure - Style: Once students have been through this lesson the definitions provided here should have some context. The content is the literal words that are being typed on the page. Using HTML students are providing stucture to the page, explaining how those pieces of content should be interpreted. Later in the unit students will learn CSS, a language that allows them to individually style elements. For now, however, the styles being applied based on their HTML tags are just the default styles of their web browser. Students don't need to fully understand this difference at this point, as it will be much clearer once they learn CSS in chapter 2. The difference between content and structure, however, will be returned to many times in this chapter.
Discuss: Have students write or silently think out their ideas, then share with a partner, then share with the class.
Vocabulary: Introduce the following words Website Content Website Structure
Remarks
HTML uses tags to help the computer know what different pieces of content in the web page actually are. Right now we've only learned how to tell the computer that some text is a paragraph, or that part of your website is the body. We've already seen how that affects the way our web pages look and are structured. As we move forward we're going to learn more tags and see more examples of how this language helps us add structure to our webpages.
Review: Return to the list of lesson resources you wrote on the board and review as a class how they are supposed to be used. Refer to the teaching tip above for recommended uses.
- Lesson Overview
- Student Overview
- Experiment with Web Lab
- 2
Student Instructions
Welcome to Web Lab!
The platform you are in is called Web Lab. There are three main parts of the screen in Web Lab.
Do This
- Try typing something in the workspace.
- Press
to see it in the preview area!
- Video: Intro to Web Lab - Part 1
- Teacher Overview
- Student Overview
Discussion Goals
While there are no broad learning goals for this video, students should understand that the instructions for Web Lab levels appear in the wide panel at the top, and the bottom three panels, from left to right, include the list of files that they are working on, the area where they type in their code, and the area where they see the results of their code. For now, they do not need to worry about every button, as they will be explained later, but they should understand that the inspector tool helps them to link parts of the web page with code that created them, and the refresh and save button allows them to update their webpage if it does not automatically update when they change the code.
Although it's not part of the video, the instructions pane will also often include drop down questions and answers that students can use when they are completing an activity, and in some levels the tabs at the top of the instructions pane will take students to a "Help and Tips" area that includes reference information relevant to the activities.
Question to consider:
- What are the different parts of Web Lab, and what are they used for?
- Explore HTML
- Teacher Overview
- Student Overview
HTML Discussion
You should bring students back together once they've spent a couple minutes looking through this level. The discussion prompts listed in the level should be used in a standard Think-Pair-Share structure.
- What text is appearing in both the code and the web page?
- How is this language communicating extra information about the way to represent text?
The goal of the discussion is to call out the features of HTML that students are noticing. The two primary takeaways (reinforced in the subsequent video as well) are that HTML uses a system of tags to surround content and indicate what it is and how it should be displayed.
How do I use the Inspector Tool?
The Inspector Tool is a great way to learn more about unfamiliar code in Web Lab. To turn on the Inspector Tool, click
. You will know that the Inspector Tool is on because the button will turn white and say "Inspector: On". Once you turn on the Inspector Tool, you can hover over anything in the preview area and Web Lab will highlight the code that is making that part of the page appear.
Explore HTML
This is a web page written in HTML, the language of the web. You'll learn more about how it works, but first explore it by using the Inspector Tool.
Do This
- Click the Tip "How do I use the Inspector Tool?" on the right to learn how to use the Inspector Tool.
- Follow the instructions in the web page to explore the web page and discuss with a partner how it is working.
- Video: Intro to Web Lab - Part 2
- Teacher Overview
- Student Overview
Discussion Goals
As student discuss HTML tags, make sure they understand that HTML tags are used to structure, or organize, content on the screen. Talking about the organization, structure, or role of the content in the page (heading, paragraph, list, etc.) is more accurate than talking about specific aspects of its appearance (such as size or spacing).
Although certain structural roles may be associated with appearance (headings are larger), HTML does not specify anything in particular about the appearance. This allows users with different needs, such as the visually impaired, to interact with the structured content in a way that makes the most sense for them. Later in the unit, students will learn about styles and CSS, which allows them to specify exact size, color, and spacing to their HTML elements.
The paragraph tag separates text into paragraphs. You may want to follow up this question by asking students how they think a web browser for the blind might deal with paragraphs. For example, while sighted people may use spacing and new lines to separate out paragraphs, what should a screen reader do?
Questions to consider
- Why are HTML tags useful?
- What does the paragraph tag do?
- HTML Tags
- Student Overview
Student Instructions
Add Text to the Body
When you start any Web Lab project, it will automatically add <!DOCTYPE>, <html>, <head>, and <body> tags to your project. When you add content to your projects, you'll need to do it between the <body> and </body> tags because it should be part of the body of your webpage.
Do This
- Write three separate sentences about any topic you like inside of the body tags of your web page.
- Hit "Refresh and Save" if you don't see the changes in the preview area.
- Compare your work with a neighbor. Make sure you're placing code in the same place.
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 texts is contained within paragraph tags. There are at least two paragraphs created through the proper use of paragraph tags.
Convincing Evidence
At least some text has been separated out into a paragraph through proper use of paragraph tags.
Limited Evidence
There is at least one paragraph tag in the text, but it may not be used properly (e.g. missing closing tag, paragraphs created outside of the body element).
No Evidence
There are no paragraph tags in the text.
Student Instructions
What is a paragraph element?
Paragraphs are marked by opening(<p>) and closing(</p>) 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.
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:0Use 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
- Place the text you just wrote inside at least two separate paragraphs by surrounding it with
<p>and</p>tags - Compare the results with a neighbor. What has changed about the way your text is displayed?
Student Instructions
What is a paragraph element?
Paragraphs are marked by opening( `` ) 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.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.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.Debug: Fix the Broken Tags
This simple web page has some issues which are preventing the content from being displayed correctly. Identify and fix the issues. This practice is also called "debugging" your code.
Do This
- Fix the broken code so that the web page displays correctly
- Compare the problems you fixed with a neighbor
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.