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.
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
- 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 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
Warm Up (10 mins)
The Need for HTML
- Look at the image inside the Exemplar Text Website
- 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.
- Share your instructions with a neighbor.
- Let’s run a quick demo using the instructions below.
- One student verbally shares one of their instructions with me, Mrs. Weber.
- Mrs. Weber will act as the person on the phone trying to draw the web page.
- Mrs. Weber will publicly “draw” the website exactly as the student instructs.
- Before we move from 1 instruction to the next, tell Mrs. Weber if she has drawn it correctly. If not, make your directions more specific until if can drawn correctly.
- We will switch student instructors as we go.
- We will repeat this process until the page is drawn.
- 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)
- 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.
- One of you, 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.
- Go to code.org and do Lesson 3: Intro to HTML together as a class.
Wrap Up (5 minutes)
- In your own words, in your Word Online file for this class, how does HTML help solve the problem of telling a computer what a web page looks like, not just what content is on it?
- When you are done writing, share with a partner, then share with the class.
- Vocabulary: Website Content & Website Structure
- 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.