Billy J.

Grieco
EdTech 506
January 29, 2016

Unit of Instruction Outline:

Creating a Webpage
1. Unit Goals (long rangehow does this unit fit with year-long goals?)
The goals of this unit will be for students to understand the conceptual basics of HTML5, and be
able to apply proper HTML syntax and tags to create their own simple webpage. This unit will
focus on getting students access to text editing software, an introduction to foundational HTML5
syntax, and culminates in students writing and validating several lines of their own code. Within
the context of yearlong goals, students would also be introduced to CSS for stylizing their
content, and a few introductory Javascript interactions.
2. Specific ways to relate goal(s) to curriculum (team/department, system and state
frameworks)
In terms of school goals, there is a big push to incorporate more computer science lessons into
the core curriculum. Specifically, this activity relates to several important goals in the New
Jersey Core Curriculum Standards, as follows:
Content Area

Technology

Standard

8.2 Technology Education, Engineering, Design, and

Computational Thinking - Programming:
All students will develop an understanding of the nature and
impact of technology, engineering, technological design,
computational thinking and the designed world as they relate to
the individual, global society, and the environment.

Strand

A. The Nature of Technology: Creativity and Innovation

Technology systems impact every aspect of the world in which we live.

Grade
Level
bands

Content
Statement
Students will be
able to
understand:

Indicator

Indicator

6-8

The core concepts

of technology.

8.2.8.A.2

Examine a system, consider how each

part relates to other parts, and discuss a
part to redesign to improve the system.

8.2.8.A.3

Investigate a malfunction in any part of a

system and identify its impacts.

Content Area

Technology

Standard

8.2 Technology Education, Engineering, Design, and

Computational Thinking - Programming:
All students will develop an understanding of the nature and
impact of technology, engineering, technological design,
computational thinking and the designed world as they relate to
the individual, global society, and the environment.

Strand

C. Design: The design process is a systematic approach to solving

problems.

Grade
Level
bands

Content Statement

6-8

The application of
engineering design.

Indicator

Indicator

8.2.8.C.4

Identify the steps in the design process

that would be used to solve a
designated problem.

8.2.8.C.5

Explain the interdependence of a

subsystem that operates as part of a
system.

8.2.8.C.5.
a

Create a technical sketch of a product

with materials and measurements
labeled.

8.2.8.C.6

Collaborate to examine a
malfunctioning system and identify the
step-by-step process used to
troubleshoot, evaluate and test options
to repair the product, presenting the
better solution.

Students will be
able to
understand:

The role of
troubleshooting,
research and
development,
invention and
innovation and
experimentation in
problem solving.

3. Characteristics of the students for whom this unit is intended (needs in the cognitive,
affective, physical, and social areas)
The intended learners for this activity are a group of 7th graders with a diverse range of abilities,
but who are performing at or near grade level. Socioeconomically, most students live within
upper-middle class families and have ready access to computers at home. Almost all also have
smartphones for personal use. Prior skills indicate a high level of comfort with basic computer
functionality, but little prior knowledge of the skills being taught in the activity. Group work is
preferred, but presumably because students want the opportunity to engage socially with their
peers during class time.
4. Students Present Level of Performance and Knowledge (Do the students have the
adequate knowledge to complete the unit successfully? What prerequisite skills must
the students have to complete the unit content? Include technology skills.
Various levels of technical abilities are to be expected, but students need to have basic
computer skills, including navigating an operating system to find a downloaded file, switching
between tasks in that operating system, and using a web browser. Overall this group of students
has a high level of comfort with basic computer skills, including operating software and using an
Internet browser. While they understand how to navigate a webpage, they have very little prior
knowledge on how these pages are constructed or how they work from a technical perspective.
Installing software on a desktop computer from the web will be the most unfamiliar skill for most
learners.
5. Classroom Layout and grouping of students (Where will the learning take place?
How will the room be organized? How will students be grouped (whole group,
individuals, pairs, small groups, etc.)
The learning environment will be the schools computer lab. Computer lab sessions are done in
hour-long blocks, so this lesson will need to span three sessions. The room sits 28 students in
four horizontal rows, seven seats in each row, all facing the front of the room. Each student has
his or her own Macintosh desktop with access to the Internet, each purchased within the last
two years. With proper supervision, students can be allowed to download and install software to
the computers. Each computer can print to two printers, one color and one black and white. In
the front of the room, the instructor has access to a whiteboard with standard markers and
erasers, and part of the whiteboard overlaps with a SmartBoard. The SmartBoard is hooked up
to a Mac laptop that is dedicated to the room. Students will either be working individually or in
small groups for different segments of the activity.
6. Introductory procedures (How will you introduce the unit and the goals?)
To gain the students attention, the instructor will show students promotional video from
code.org, a website dedicated to promoting and expanding programming education. Following
the video, students will be asked if anything in the video surprised by anything they learned in

the video, have questions about it, and also what they learned from it. Students will also be
asked what they think the required skills of programming are (as described in the video, most
students will already possess these skills, ie. very basic math, reading, and writing skills).
Following that discussion, the instructor will then explain to students the structure and purpose
of the lesson so they are clear on its goals. Finally, to stir interest and motivation, students will
be given the opportunity to share their favorite websites with the class, and the instructor can
demystify the backend of the page by showing them how they can look at the underlying code
via the Developer Tools tab in Google Chrome.
7. Materials and media (any resource, persons or materials: be as specific as possible.
Identify resource, its availability, how it is to be used and why).
Students will be given a variety of resources to guide them through this exercise. First is an
HTML overview guide. This gives students a quick reference document for all of the HTML tags
they will use during the course of the lesson. Next are three examples of pre-built HTML code
for the instructor. The first is a completed webpage similar to that which the students will build
that the instructor can copy into SublimeText and open in a web browser to show students what
their final project may look like. Instructors will also get two versions of that same code, but this
time with intentional errors introduced somewhere in the code. This will be used for a student
scavenger hunt activity where they must locate and correct the problematic code.
Additionally, an instructional packet for students can be distributed in print or projected on a
screen for the class. This document walks students through every step of the process.
Instructors will receive a observational checklist to monitor student progress through the lesson.
Student worksheets will also be provided to document answers to any questions that dont take
place on the students computer. Finally, a list of additional resources will be given to the
instructor to give further direction to students who are interested in learning more.
8. Visuals (although this is part of the materials and media, I want this to be a specific
part of your plan). Identify at least EIGHT static graphic visuals (NOT links to video clips
or websites, please) that you will be creating and use, their purpose, and design.
8.1. An introductory graphic representing how code from a text editing software is read and
displayed by a computer for use during the opening parts of the lesson.
8.2. A graphic showing how code is loaded into a server which other users than access through
the internet to see that same page displayed on their own computers, also at the beginning of
the lesson to orient users on the basics of how webpages are viewed by others.
8.3. A visual representation using the metaphor of formatting a Word document as similar to
applying HTML tags. This will be used immediately before students are first introduced to
8.4. Graphic on how to properly wrap text in HTML tags.
8.5. Continuing from 8.4, a graphic on how to properly embed HTML tags within each other, to
be used before students start writing code of their own.
8.6. A two-part graphic locating and visually explaining the errors in the instructor example code
(for instructor use).

8.7. A graphic pointing out various elements of an existing popular webpage and the
corresponding HTML tag used to create it, intended for students to see how what theyre
learning is applied in webpages theyre already familiar with.
8.8. A Where to go from here graphic visually representing how different code languages
combine to create modern web pages, used as a primer to give students insights into how they
can further build their knowledge.
9. Assessment and evaluation of learner understanding (Identify the methods the
teacher will use to identify student learning levels and needs. Describe when these will
be used during the unit).
For needs assessment, prior to the assignment the instructor the instructor can survey students
on identifying existing comfort level with the prerequisite skills, any level of knowledge already
possessed by students on the topic, and gauge their level of interest in the topic. From this,
general conclusions can be drawn on their preferred learning methods and where to most
appropriately start the lesson. Throughout the course of the assignment, the instructor will
employ several assessment measures. First, an observational checklist organized by learning
objective will be used to evaluate student progress on procedural tasks of the lesson, including
successfully installing software correctly, creating, saving, and editing an HTML file in
SublimeText, and opening that page in a web browser. Students will also have to complete
several worksheets as they write their code, including fill-in-the-blank exercises and problemsolving exercises. Finally, they will write qualitative responses to what theyve learned and how
it can be applied in the future.
10. Relate assessment instruments to the outcomes stated in the goals.
All observational checklists and student worksheets are correlated to the lessons learning
objectives.