Session 15: Model Lesson 3: U2L2 Intro to HTML

65 minutes

lesson exploration

Purpose

Essential Practice: Teachers provide opportunities for exploration coupled with opportunities for sensemaking.

Lesson Decisions:

Allow participants time to explore Web Lab before discussing its capabilities as a whole group
Watch videos together as a whole group and utilize the discussion questions from the teacher resources to facilitate group sense making
Do not answer questions directly, instead point participants to resources that might help them answer the question themselves.
Create a poster with a list of resources throughout the lesson and refer to it often. Have participants keep a similar list in their journals.

Debrief Topic: Exploration

Objectives

Participants understand the value of exploration along with how resources can support student exploration.
Participants gain experience using HTML and Web Lab

Supplies & Prep

Room Setup:

Participants are seated in pods
Put learners in groups of 2 to 3 - probably just at their table.

Facilitator Supplies and Prep:

Decide which facilitator teaches the lesson
Decide which facilitator debriefs the lesson
Day 2 Slides
Lesson Plan
Poster paper
Markers

Teacher Materials:

Agenda

Kick Off (5 minutes)

Lesson (40 minutes)

Debrief (20 minutes)

Facilitation Guide

Kick Off (5 minutes)

(4 minutes) Previously On

Remarks

Yesterday we learned about two important frameworks in the CS Discoveries curriculum. These include the Problem Solving Process and the Input Output Storage Processing (IOSP) sequence. These frameworks will be used throughout the course. Today, as we begin to dig into Unit 2, we are going to have the opportunity to get some hands on experience designing websites.

The facilitator uses the slides to go over the lessons in Unit 1 and Unit 2 they will have skipped to get here

Unit 1 Lesson 9 - Remind participants that we wrapped this up yesterday
Unit 2 should be kicked off in the morning session but remind participants:
- Unit 2 Lesson 1: Students explore sample websites and start to consider the purposes a website might serve, both for the user and the creators.

(1 minute) Role Reminders

Facilitators reminds everyone of their roles during the model lesson

Remarks

Put your hats on and let's get ready to go!

Lesson (40 minutes)

Warm Up (10 mins)

The Need for HTML

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.

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

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.

Question of the Day: How can we tell the computer both what to put on the web page, and how to organize it?

Key Vocabulary:

website content - the text and images on a website
website structure - how the content of a website is organized

Activity (30 minutes)

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.

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.
Help and Tips Tab: This tab contains all of the relevant videos and map levels for a particular level.
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 Drop-down 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.

Wrap Up (5 minutes)

Reflection

Question of the Day: How can we tell the computer both what to put on the web page, and how to organize it?

Assessment Opportunity

Students answers will vary but will likely center around the fact that using tags helps the computer know what different pieces of content "are". As students discuss HTML as a solution, make sure that they are using the key vocabulary of the lesson:

website content - the text and images on a website
website structure - how the content of a website is organized
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

The content is the literal words that are being typed on the page. Using HTML students are providing structure to the page, explaining how those pieces of content should be interpreted.

Journal 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: After students have had time to reflect individually in the journal, allow them to discuss with a partner, then share with the class.

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 web pages.

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.

Debrief (20 minutes)

Suggested Debrief Plan

Suggested Debrief Plan
Be Sure to Model	Essential Practices	Teachers provide opportunities for exploration coupled with opportunities for sensemaking.
Be Sure to Model	Lesson Decisions	Allow participants time to explore Web Lab before discussing its capabilities as a whole group Watch videos together as a whole group and utilize the discussion questions from the teacher resources to facilitate group sense making Do not answer questions directly, instead point participants to resources that might help them answer the question themselves. Create a poster with a list of resources throughout the lesson and refer to it often. Have participants keep a similar list in their journals.
If the essential practices, listed above, are present in the lesson we recommend the following for your debrief:
Debrief Direction	Topic	Exploration
Debrief Direction	Goal	Participants understand the value of exploration along with how resources can support student exploration.
To reach this goal, consider using the following reflection and discussion prompts:
Debrief Suggestions	Reflection Prompt	As a learner, what was the benefit of exploring Web Lab before watching the videos and discussing the tool as a class?
Debrief Suggestions	Discussion Prompts	How do resources support students in exploring new tools and new concepts? How will you support students using these tools in your classroom? The teacher made the choice to have the class watch the videos together instead of having the class move through the levels at their own pace. How does this decision support student exploration? How might this practice benefit students who are new to CS? Discussion Goal:Participants should understand that sensemaking is a crucial part of exploration. Resources support students in sense making by providing a place for students to go to answer their own questions, revisit concepts they have already learned, and learn new things to push their skill set further. Watching videos together provides an opportunity for class discussion sensemaking. This is also a time to reinforce concepts that have been explored and to ensure all students have the basic understandings necessary to be successful in future activities. When students are set up for success, they are more likely to feel a sense of belonging in the class. FACILITATOR NOTE: As you discuss this prompt, look for places to draw out the decisions for this lesson, listed above.