Lesson Plan

WEB DESIGN/HTML

This lesson is about incoporating images in HTML (Notepad Editor).
Ms. D. C.
Classroom teacher
Show More
My Grades 6, 7, 8
My Subjects English Language Arts, Math, Science, Social Studies, Arts, World Languages, English Language Learning, Health & Wellness
Objectives

The Student Will Be Able To:

Incorporate image tags and attributes in order to display a picture and change features of a picture in a webpage.

I Can Statements

o I can decode the meaning of HTML tags.

o I can save a document as an HTML file.

o I can refresh the browser window.
o I can create the structure of an HTML document.

Subjects
Math
Science
Grades 6 - 8
All Notes
Teacher Notes
Student Notes

1 Hook - Brainstorming Activity

Padlet
Free, Paid

Create a padlet, insert a picture of a dog then ask the students to respond to write two sentences about that picture.

Student Instructions

Ask Students to open your padlet link and respond to the picture of the dog.  (Free Write)

2 Direct Instruction/Guided Practice

Lesson Sequence (60 minutes):

Give students a KWL Chart and tell them to open Notepad.

In the 1st Column - Write what you know  about HTML and Notepad?

Write down any HTML Tags that you know.  We should know is basic HML programming)

      Q: What are the basic tags?

<!DOCTYPE html>, <HTML>, <HEAD>, <TITLE> and <BODY>

State the Objective - Today we will learn how to add images to a web page.

1)  Open Notepad++

2)  Add the basic tags to Notepad.

- <!doctype>, <html>, <head>, <title>, <body>

Have students compare your notepad enter with someone at your desk.  Make corrections.

3)  After the body tag, let's add an image.

Go to: https://www.w3schools.com/html/html_images.asp

This tag is <IMG SRC="https://www.commonsense.org/education/Copy%20and%20Paste%20-%20Picture%20URL">

Compare your Notepad with the person next to you.

Q:  What is a URL?

A:  It stands for Uniform Resource Locator – simply a web address link.

<IMG is the tag name.  <SRC=”URL”> is the source attribute.

Type in <IMG SRC=”and place the web address here”>.

Go to google images, search for a dog, and right click to copy the link address.

Paste it in notepad in the QUOTES.

Save And Refresh to see if it works.

If it did not work, let’s see what the problem is.

Student Instructions

Open the Read/Write Think KWL Chart and Write what you know about HTML in the 1st Column.  Include all tags.

Open Notepad ++ and add the image tag.

Go to google images, search for a dog, and right click to copy the link address.

Paste it in notepad in the QUOTES.

Save And Refresh to see if it works.

If it did not work, let’s see what the problem is.

 

 

 

3 Independent Practice

Have students upload their notepad documents in Edmodo.

Student Instructions

Students upload their notepads in Edmodo.

4 Wrap Up

Padlet
Free, Paid

Lesson Closure (5-10 Minutes):

 1.  What is the difference between <body BGColor=”green” and <body background=”URL”>?

2. What HTML Tag did we use to incorporate images in a web page?

Student Instructions

Have students open up the padlet and answer these questions.