Lesson 3: Intro to HTML

Web Lab

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.

Agenda

Warm Up (10 mins)

Activity (30 minutes)

Wrap Up (5 minutes)

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 categorize content
  • Understand how to use lesson resources provided in Web Lab

Preparation

  • Review the Code Studio levels

Links

For the Teacher

Vocabulary

  • HTML - Stands for Hypertext Markup Language and is used to create the content of a web page.
  • HTML Element - A piece of a website. Marked by a start tag and sometimes closed with an end tag. Also includes the content of the element as well.
  • HTML Tag - The special set of characters that tells the machine where the start and end of an HTML element is and what type it is.
  • Website Content - The raw text, images, and other elements included in a web page
  • Website Structure - The purpose of different pieces of content in a web page, used to help the computer determine how that content should be displayed

Introduced Code

Teaching Guide

Warm Up (10 mins)

The Need for HTML

Display: Show the image inside the Exemplar Text 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 the recommended way of 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 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" 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. I'm going to leave a list here at the front of the room, and at the end of the lesson we'll review how each is used.

Display: Write the following list at the front of the room

  • Videos
  • Map Levels
  • Level Instructions
  • Level Tips
  • Inspector Tool
  • Bubble Color

Wrap Up (5 minutes)

Discussion Goal

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

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.

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?

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.

View on Code Studio

Overview

In this lesson students are introduced to 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.

Vocabulary

  • HTML - Stands for Hypertext Markup Language and is used to create the content of a web page.
  • HTML Element - A piece of a website. Marked by a start tag and sometimes closed with an end tag. Also includes the content of the element as well.
  • HTML Tag - The special set of characters that tells the machine where the start and end of an HTML element is and what type it is.
  • Website Content - The raw text, images, and other elements included in a web page
  • Website Structure - The purpose of different pieces of content in a web page, used to help the computer determine how that content should be displayed

New Tags

  • Levels
  • 2
  • (click tabs to see student view)
View on Code Studio

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 Code Area
  • Press to see it in the Preview Area!
View on Code Studio

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.

View on Code Studio
** 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 the . 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
  • Follow the instructions in the web page to explore the web page and discuss with a partner how it is working.
  • Levels
  • 7
  • 8
  • 9
  • (click tabs to see student view)
View on Code Studio

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 since 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.
View on Code Studio

Teaching Tip

This lesson has minimal programming in it. As you check students work, or better yet have them check one another's, all you need to be looking for is:

  • Students are writing their code inside of the body of the web page
  • Students are correctly using opening and closing <p> </p> tags
  • Students have made more than one paragraph
  • Students know how to use the Tips in the top right corner of the instructions

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.

`

This is a paragraph. It has two sentences.

` `

This is another paragraph.

`

Use Paragraph Tags

The <p> tag or "paragraph" tag is placed around text to indicate that it is part of a paragraph. Placing text in a paragraph tag lets the computer know that it should be displayed differently, usually just by 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?
View on Code Studio

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.
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 often make a best guess of what you intended to do. Sometimes different browsers even will make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.

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