Lesson 4: Text on the Web

Web Lab

Overview

Students will investigate the common language used to communicate content with browsers: HTML. They will explore basic HTML properties by using Web Lab to work with header and list elements. They will create two personal web pages: a Hobbies page and a Recipe page.

Purpose

This is students' first introduction to HTML. The elements students are working with are kept simple: header elements (<h1> to <h6>), paragraphs (<p>) and list elements (<ol>, <ul>, <li>). These tags are used early on because they are simple and show immediate changes to the display of the web page, allowing students to see the impact of using these tags easily.

The two pages students work on in this lesson, the Hobbies page and the Recipe page, will be included in the Personal Website students are creating. These pages will be used in future lessons when students learn how to add style.

Agenda

Warm Up (5 minutes)

Activity (45 minutes)

Wrap Up (10 minutes)

Objectives

Students will be able to:

  • Describe what HTML is and why it’s important to have a common language for creating web pages
  • Use headers, paragraph, and lists tags to create a simple web pages.

Preparation

Links

For the Students

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.
  • Web Developer - A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications.

Introduced Code

Support

Report a Bug

  • Do students know what a recipe is?

Teaching Guide

Warm Up (5 minutes)

Introduction to Web Lab

Goal: Students will investigate how the language, HTML, adds structure to a web page.

Students will look at a simple web page created in Web Lab on Code Studio and use the Inspector Tool to investigate the language used by computer programmers to create web pages. The Inspector Tool allows you to point to one section of a web page and see the code associated with that section of the page. Students write down observations about the hidden language used to create a simple web page which can be found on Code Studio.

Remarks

At the end of the last lesson, we decided that having a common language for adding structure to a web page is important. Today we are going to start by using Web Lab to investigate how the language, HTML, adds structure to a web page.

Teaching Tip

Whenever showing anything online - but especially code, you can zoom in on your browser by using Ctrl - + (PC) or Command - + (Mac) To use the Inspect Element Tool Open the site Right click (or Ctrl click), then choose “Inspect”

Set Up: Students should take out their journals.

Transition: Have students head to Code Studio and begin working on the second level in Lesson 4. This is the first time they will be using Web Lab. They should not work past the Inspector level.

Activity (45 minutes)

Web Lab: Headers, Paragraphs and Lists

Transition: Have students return to Code Studio and begin working through the rest of the levels. There is another stop level after they create their Hobbies Project.

Wrap Up (10 minutes)

Update HTML Elements List

Students will use the table in Web Development Practices - Project Guide on Page 2 for the first time. This table is a place for each student to keep a personal list of HTML Elements and notes on how to use them.

Set Up: Ask students to take out their Web Development Practices - Project Guide.

Prompt: What four elements did we learn about today and what are their tags?

  • Add the four tags to your HTML Elements List in Web Development Practices - Project Guide.
  • In the purpose column, write what these tags do.
  • In the notes section, write down any notes about how to use the tags when creating web pages. For example <li> must go inside an <ol> or <ul> element.
View on Code Studio

The Internet - Web Development: Lesson 4 - Text on the Web

Background

Students will investigate the common language used to communicate content with browsers: HTML. They will explore basic HTML properties by using Web Lab to work with header and list elements. They will create two personal web pages: a Hobbies page and a Recipe page.

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.
  • Web Developer - A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications.

New Blocks

Resources

  • Levels
  • 3
  • (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

Once students have had time to play with this level and make some discoveries on their own bring students back together.

HTML elements student may find in this page:

* <!DOCTYPE html/>
* <html/>
* <head/>
* <title/>
* <link/>
* <body/>
* <h1/>
* <h2/>
* <h4/>
* <ul/>
* <li/>
* <div/>
* <p/>
* <img/>

In addition to listing out different elements and tags, students should note there is a way to denote set up of content in `<>` and where that ends `</>`

Students may notice the CSS style components in this website. Keep students focused on the index.html file as that is where the HTML code is. If they ask about something not on the above list, model lead learner by saying that the class will have to look into that later.

Discuss: Ask students to start listing some of the rules/symbols that describe HTML.

Say:

HTML has lots of tags! We will slowly build up our knowledge of all of those tags. Today we will start with just a couple of tags for headers and lists.
View on Code Studio
** How do I use the Inspector Tool? ** The Inspector Tool is a great way to figure out what 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 any element in the preview area and Web Lab will highlight the associated code.

Language Detective

Use the Inspector Tool to check out the code for this website someone created on Web Lab! Focus on the index.html file open for now.

Try to answer the following questions:

  • In what ways is this language similar to or different from the languages your groups invented in the last lesson?
  • What are the rules of this language?
  • How does this language add structure to the website?

Wait for instructions from your teacher before going on to the next level.

View on Code Studio

Introduction to HTML

In the last lesson you created a language to explain content and structure. This is a complex problem which computer scientist in the past have grappled with just like you. They came up with and agreed upon a language which they called Hypertext Markup Language, which is often referred to as HTML.

HTML uses groupings of uncommon sequences of characters to explain the structure of a web page. These groups of characters are called tags. Most elements use an opening and closing tag in order show where a certain structure starts and ends. Together the opening tag, closing tag, and content inside the tag make up an HTML element.

For example:

HTML Tag What does it mean?

Start of a big header. Big headers are sets of characters that go together with space around the header to separate it from other parts of the page. Big headers are also larger than other text on the page to make them stand out.
Marks the end of a big header. An end tag is always just the opening tag with a at the beginning.
View on Code Studio

Student Instructions

Adding Content

Start creating your first web page! Try to create a page with a title and two paragraphs.

Do This

  • Write a sentence about your favorite animal
  • On a separate line write another sentence about your least favorite animal.
  • Above both sentences try adding a title that says "Animals"
  • Don't forget to click
  • What do you notice about the structure of your content?
View on Code Studio

Student Instructions

**What are headers?** Headers are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.
**How do I create a header?** You can make something a header element by surrounding it by header tags. For example:
 <h1> Header Text </h1> 


Notice how there is a the opening tag (<h1>) and closing tag (</h1>). The closing tag is the same as the opening tag except it has `/` after the opening angle bracket. The text you want to show as the header goes in the middle of the two tags.
**What is HTML?** Stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
**What is an 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. For example:
**What is an HTML tag?** The special set of characters that tells the machine where the start or end of an HTML element is and what type it is. HTML tags add structure to the content of a web page.
**Why do you need an opening and closing tag?** You need both an opening and closing tag for many HTML elements because it marks where that structure starts and stops. You don't want all the text on your web page to be a title.

Headers

You may have noticed on the last level that everything you type into the editor is getting smashed together. In order to differentiate between these different parts we use HTML elements to mark the different parts of a web page. In your investigation with the inspector did you come across something that made headers?

Do This

  • Make your header "Animals" stand out using the

    header element.

View on Code Studio

Student Instructions

**What is a paragraph element?** Paragraphs are marked by opening(`

`) and closing(`

`) tags as well. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. All of your text in your web page should be contained in an HTML element (headers or paragraphs). Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.
**How do I create multiple paragraphs?** Paragraphs are marked by opening(`

`) and closing(`

`) tags as well. To create more than one paragraph you will want multiple sets of opening and closing `

` tags. For example

    <p>
        This is a paragraph.
    </p>
    <p>
        This is another paragraph.
    </p>
**What is HTML?** Stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
**What is an 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. For example:
**What is an HTML tag?** The special set of characters that tells the machine where the start or end of an HTML element is and what type it is.

Paragraphs

Now that you have a header try to separate the two sentences like the example below using the paragraph element.

View on Code Studio

Student Instructions

Size of Headers

There are different sized headers which are marked by the number next to the h in the header tag. They go from <h1> to <h6> .

Example Result
<h1> Shoulders </h1> 
<h2> Knees </h2>
<h3> Toes </h3>

Predict what the result of the code in the following code will be.

<h3> Eggs </h3>
<h1> Bacon </h1>
<h6> Waffles </h6>
Pick from one of the 4 options

View on Code Studio

Student Instructions

**How do I make different sized headers?** Headers come in 6 different sizes. So far you have primarily used the biggest one <h1>. The number 1 in the HTML tag designates that this is the biggest header. The smallest header is <h6>. You can also try the <h2>, <h3>, <h4>, and <h5> tags which get smaller as the number gets larger.
**What are headers?** Headers are the different sized section titles throughout a web page. Headers add structure to your web page by breaking it up so its easier for a user to read.
**What is HTML?** Stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
**What is an 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. For example:
**What is an HTML tag?** The special set of characters that tells the machine where the start or end of an HTML element is and what type it is.

Header Sizes

Add the names of your favorite animals above the sentence they go with. Make the names of the animals smaller headers than the "Animals" title for the page. See the example below.

View on Code Studio

Student Instructions

Example Hobbies Page

On the next level you are going to work on creating your own Hobbies Page. This is an example of the type of page you are working to create. Come back to this level for reference as needed while creating your page.

View on Code Studio

Student Instructions

Hobbies Page

In this level, you’ll use what you’ve learned to create your Hobbies page. Get creative with your Hobbies Page but make sure it meets the basic requirements in the Checklist first.

Checklist

  • 1 title with large header size
  • At least 3 medium headers with each hobby name
  • At least 3 small headers with the amount of time you’ve been doing each hobby
  • At least a 2 to 3 sentence description of each hobby under the hobby’s time inside paragraph tags
View on Code Studio

This is a stop level: All students will stop when they get to this level. Stop levels will be used throughout coding stages to help keep the class together. They offer time to review the concepts learned in earlier levels before moving on to later levels in the progression. Encourage early finishers to continue to make improvements to the levels before the stop or help their classmates.

Stop: HTML Elements Discussion

Transition: Once all students have reached this level, have them stop.

Review the header and paragraph elements with students. Use any of the following prompts.

Prompts:

  • What does adding HTML elements do to your code?
  • What marks a closing tag?
  • Why do we need closing tags?
  • What is the difference between an h1 tag and an h6 tag?
  • What does the p tag do?

Discuss: Once students have had the chance to think individually, review the answers as a class and discuss any questions students have.

Web Lab: List Elements and Recipe Page

Set up: If you had students bring in recipes, ask them to take them out. If they don't have recipes, you can give them a chance to find a recipe or share one with them to use for the next part of the lesson.

Students should identify that a recipe needs a LIST of ingredients and a LIST of instructions.  This is something they don't know how to create yet.

Prompt: Looking the recipes you brought in. Let's brainstorm some elements a recipe should include.

Transition: Ask students to return to Code Studio continue working.

View on Code Studio

Stop

Go back and continue to work on your hobbies page until your teacher tells you its time to move on. Try adding more hobbies and information to your page.

View on Code Studio

Student Instructions

Example Recipe Page

Over the next couple levels you are going to work on creating your own Recipe Page. This is an example of the type of page you are working to create. Come back to this level for reference as needed while creating your page.

View on Code Studio

Student Instructions

**What is HTML?** Stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
**What is an 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. For example:
**What is an HTML tag?** The special set of characters that tells the machine where the start or end of an HTML element is and what type it is. HTML tags add structure to the content of a web page.

Recipe Page

You are going to start a new web page. This will be a favorite recipe page. It will take a couple levels to build the page. Use your knowledge from earlier in class to start getting it set up.

Do This

  • Take out your recipe you picked.
  • Using a large header tag, put the name of the recipe at the top of the page.
  • Create three smaller headers: Description, Ingredients, and Instructions.
  • Add a paragraph element under the "Description" describing the dish the recipe creates.
View on Code Studio

Student Instructions

**What are the two types of lists?** There are two types of lists in HTML, ordered and unordered lists.
**What is an unordered list?** An unordered list is just a set of bulleted items.
**How do I make an unordered list?** An unordered list element has the tag <ul> . Notice that this is an abbreviation for Unordered List. Each item on the list is marked by a list item element <li>. Notice that this is also an abbreviation for List Item. The list item element is a child element which means that you don't use it on its own. It is contained inside a list element. It can be helpful to indent your <li> tags so its clear that is contained in the <ul> tags.
Example Result
 <ul> 
<li>Red </li>
<li>Green </li>
<li>Blue</li>
</ul>
**What is an ordered list?** An ordered list is a set of bulleted items which are numbered.
**How do I make an ordered list?** An ordered list element has the tag <ol> . Notice that this is an abbreviation for Ordered List. Each item on the list is marked by a list item element <li>. Notice that this is also an abbreviation for List Item. The list item element is a child element which means that you don't use it on its own. It is contained inside a list element. It can be helpful to indent your <li> tags so its clear that is contained in the <ol> tag.
Example Result
 <ol> 
<li>Step 1 </li>
<li>Step 2 </li>
<li>Step 3 </li>
</ol>
**What is HTML?** Stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
**What is an 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. For example:
**What is an HTML tag?** The special set of characters that tells the machine where the start or end of an HTML element is and what type it is. HTML tags add structure to the content of a web page.

Unordered Lists

Now that you have the basic layout for your Recipe page you need two lists. An ingredients list and a directions list. Start by trying to create the ingredients list. All text on your web page should go inside one type of HTML element (header, list, or paragraph).

Do This

Under your ingredients header create an unordered list of ingredients.

View on Code Studio

Student Instructions

**What are the two types of lists?** There are two types of lists in HTML, ordered and unordered lists.
**What is an unordered list?** An unordered list is just a set of bulleted items.
**How do I make an unordered list?** An unordered list element has the tag <ul> . Notice that this is an abbreviation for Unordered List. Each item on the list is marked by a list item element <li>. Notice that this is also an abbreviation for List Item. The list item element is a child element which means that you don't use it on its own. It is contained inside a list element. It can be helpful to indent your <li> tags so its clear that is contained in the <ul> tags.
Example Result
 <ul> 
<li>Red </li>
<li>Green </li>
<li>Blue</li>
</ul>
**What is an ordered list?** An ordered list is a set of bulleted items which are numbered.
**How do I make an ordered list?** An ordered list element has the tag <ol> . Notice that this is an abbreviation for Ordered List. Each item on the list is marked by a list item element <li>. Notice that this is also an abbreviation for List Item. The list item element is a child element which means that you don't use it on its own. It is contained inside a list element. It can be helpful to indent your <li> tags so its clear that is contained in the <ul> tag.
Example Result
 <ol> 
<li>Step 1 </li>
<li>Step 2 </li>
<li>Step 3 </li>
</ol>
**What is HTML?** Stands for Hypertext Markup Language. HTML is used to add structure to the content of a web page. HTML uses tags to specify where certain structures start and end. These tags are sets of characters not found in the English language so that the content and structure can be differentiated.
**What is an 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. For example:
**What is an HTML tag?** The special set of characters that tells the machine where the start or end of an HTML element is and what type it is. HTML tags add structure to the content of a web page.

Ordered Lists

Create an ordered list for each step in your recipe under the Directions header

View on Code Studio

Review: List Elements

Once students have completed their work on their Recipe Page. Review the list tags with students. Use any of the following prompts.

`<ol>` is an ordered (numbered) list, `<ul>` is an unordered list (bulleted) and `<li>` is a list item.

Prompts:

  • What is the difference between the ol, ul, and li tags?
  • What is special about the li tag?

Discuss: Once students have had the chance to think individually, review the answers as a class and discuss any questions students have.

View on Code Studio

Finishing Recipe Page

Now its time to finish off your Recipe Page.

  • Add any more information to your recipe page you think would be helpful such as how long it takes to make or what meal of the day you usually eat it.
  • Finalize your Recipe Page. Use the checklist below to make sure your page is complete. Remember you can always go back and look at the example page.

Checklist

  • All text contained in an HTML tag (header, paragraph, or list)
  • Unordered list of ingredients
  • Ordered list of directions
  • Paragraph description of the dish
  • Headers for each section
  • Title header at the top of the page

Standards Alignment

View full course alignment