Lesson Plan
Course Title: Principles of Information Technology
Session Title: Introduction to Basic Web Page Design
Lesson Duration: 3.5 hours
Performance Objective:
Upon completion of this assignment, the student will be able to create a well-designed basic
webpage with a left or top side navigation panel, text header, pictures, external links, and
anchor links.
Specific Objectives:
1. Define terms associated with web page development
2. Identify purpose and intended audience for web pages
3. Identify qualities of a well-designed web page
4. Discuss safety and copyright implications with publishing a web page
5. Draft a layout sketch for a personal web page
6. Build a personal web page
7. Evaluate finished web pages
Preparation
TEKS Correlations: 130.272(c)
(1) The student demonstrates the necessary skills for career development, employability, and
successful completion of course outcomes. The student is expected to
(C) employ effective reading and writing skills;
(H) demonstrate an understanding of legal and ethical responsibilities in relation to the
field of information technology; and
(I) demonstrate planning and time-management skills such as project management and
storyboarding.
(3) The student uses emerging technologies to exchange information. The student is expected
to
(H) demonstrate ethical use of Internet and online resources, including citation of source.
(4) The student demonstrates knowledge of the hardware components associated with
information systems. The student is expected to
(E) demonstrate proficiency in the use of a variety of input devices such as mouse,
keyboard, microphone, digital camera, printer, scanner, and optical disk reader.
(11) The student applies design and web publishing techniques. The student is expected to
(A) identify the terminology associated with web page editing software and its functions;
(B) identify the terminology associated with interactive media;
(E) create a web page containing links, graphics, and text.
(12) The student understands and demonstrates legal and ethical procedures as they apply to
the use of information technology. The student is expected to
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
1
(A) demonstrate ethical use of online resources;
(B) adhere to copyright rules and regulations.
Instructor/Trainer
References:
Curriculum-developer knowledge
Instructional Aids:
 Basic Web page Design Presentation
 Basic Web page Design Vocabulary Presentation
 Web page Vocabulary Sheet
 Vocabulary Review Activity Worksheet
 Web page Design Activity Worksheet
 Web page Planner Rubric
 Basic Webpage Rubric
 Evaluating Web pages Checklist
Materials Needed:
HTML editing software
Equipment Needed:
 Projector for Presentation
 Computer Lab
 Internet Access
Learner
Students will review the Webpage Vocabulary Sheet the night before class.
Introduction
MI
Introduction (LSI Quadrant I):
SAY, “Have you ever wondered what’s behind some of the neat webpages you visit
each day on the internet? A web designer is someone who creates well-organized
and eye-pleasing pages with text, graphics, and color to convey a message to the
viewer.”
ASK, “Do any of you have social media profiles? These are very basic forms of
webpage design because you are using color, graphics, pictures, and text to convey
a message about yourself.”
SAY, “Today, we will discuss the various aspects of building a basic webpage, and
then you will get to build your own personal basic webpage based on what you’ve
learned.”
Outline
MI
Outline (LSI Quadrant II):
I.
Instructor Notes:
Students learn terminology associated with
webpage development.
A. Anchor Link
B. Copyright
C. External Link
Introduce the vocabulary terms
using the Basic Webpage Design
Vocabulary Presentation.
Hand out the Vocabulary Review
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2
D.
E.
F.
G.
H.
I.
J.
II.
HTML Editor
Layout Sketch
Webpage Designer
Webpage
Webpage Layout
Website
WYSIWYG
Activity Worksheet to the students
for them to complete during the
vocabulary presentation.
Students identify purpose and intended
audience of webpages
A. Purpose of the webpage
1. What message are you trying to
convey to anyone who views your
webpage?
B. Intended audience of the webpage
1. What pictures and vocabulary
should you use?
Introduce concepts of design by
using the Basic Webpage Design
Outline Presentation.
III.
Qualities of a well-designed webpage
A. Well organized, easy to follow
B. Inviting
C. Not “busy”
D. Color – but not too much color
Teacher should display examples both
good and bad of webpage design.
Hand out the Webpage design
Activity Worksheet to the students
for them to complete during the
presentation. Search online for
examples of “well-designed”
webpages
IV.
Safety precautions in building and
publishing a webpage on the Internet
A. Openness of the Internet – Anyone can
view
1. Social Media vs. Open Internet
B. What type of personal information
should not be posted on the web?
1. Address, phone, social, etc.
C. Copyright Laws for Web Design
1. What is copyright?
2. Why are copyright laws in place?
Teacher displays slide 4 - 5 of
Basic Webpage Design Outline
Presentation
V.
Draft a layout and text for the webpage
1. Should include placeholders for
pictures, the heading, text, anchor, and
external links
2. Teacher should display for students an
example of a webpage planner/draft or
demonstrate on a whiteboard, etc of
how to create the draft/planner.
3. After demonstration, have students
Encourage the students to
comment and discuss the issues
on each slide.
A great link for FAQs on copyright
is
http://www.copyright.gov/help/faq/.
A good discussion starter for
copyright is
http://www.udel.edu/topics/techtalk
/1998/March/purpose.html.
Students continue to complete
Design Activity Worksheet.
Teacher demonstrates planner
creation
Have students complete section 5
of the Design Activity Worksheet –
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3
complete their own planner
VI.
VII.
VIII.
creating a draft/planner for a
webpage.
Teacher should demonstrate using an
HTML editor to students on how to create a
basic webpage to include the items shown
on planner/draft.
Building the webpage using an HTML editor
A. Opening HTML editor software
B. Saving the webpage (.html or .htm)
C. Inserting a table for left-hand layout
D. Creating a text header
E. Inserting pictures – adding text captions
F. Creating links
G. Anchor links
H. External links
Evaluate the webpage
A. Well-organized?
B. Color scheme?
C. Is message conveyed easily for viewer?
D. What could make it better?
Have students evaluate the webpages of 3
other students, answering the above
questions for each.
Use an HTML to demonstrate
creating a webpage.
Students will observe. Ask for one
or two volunteers to redemonstrate in front of peers.
Encourage students watching to
peer coach and evaluate the
student demonstrator on model
building techniques
Hand out the Basic Webpage
Evaluation Rubric to each student.
Review this with them.
Students will use their planner as
a guide while using an HTML
editor to create their webpage.
Slide 9 of Basic Webpage Design
Outline Presentation
Hand out the Evaluation Checklist
to each student. Have them
complete the checklist while
evaluating 3 other students’
webpages.
Application
MI
Guided Practice (LSI Quadrant III):
The teacher will demonstrate how to sketch a draft/planner for a webpage. The teacher
will build a basic webpage using an HTML editor and HTML editing software to showcase
the process/techniques while students observe.
Ask one or two volunteers to re-demonstrate in front of peers. Encourage students
watching to peer coach and evaluate the student demonstrator on webpage building
techniques.
MI
Independent Practice (LSI Quadrant III):
Students will work on their planner and on their personal web pages independently.
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Summary
MI
Review (LSI Quadrants I and IV):
Q&A Session
Q: Why is a layout sketch important in the web design process?
A: A storyboard allows the designer to visualize how the page will look and where images, text,
and links (both anchor and external) will be placed.
Q: What’s the difference between a webpage and a website?
A: A webpage is a single file document on the World Wide Web consisting of an HTML file and
any related files for scripts and graphics, often hyperlinked to other documents on the Web. A
website is a set of interconnected webpages usually including a homepage, generally located
on the same server, and prepared and maintained as a collection of information by a person,
group, or organization.
Q: What are the qualities of a well-designed webpage?
A: A well-designed webpage is inviting, well organized, colorful without being “busy”, and easy to
navigate.
Q: What’s the difference between an anchor link and an external link?
A: Anchor links are internal links within a webpage that allow the user to “jump to” other areas of
the page, while external links are links to another webpage or website.
Q: What type of personal information should not be posted on the web? Why?
A: Any personally identifying information such as address, phone number, social security number,
etc.
Q: What is copyright?
A: The legal right granted to an author, composer, playwright, publisher, or distributor to exclusive
publication, production, sale, or distribution of a literary, musical, dramatic, or artistic work.
Q: Why are copyright laws in place?
A: To protect the authors, composers, playwrights, publishers, or distributers from their work
being stolen or lifted and used without consent by others. It also encourages authors/creators
in their efforts by granting them ownership of exclusive rights for their work.
Review Activity
Teacher will use the Vocabulary Presentation to review with the students. Teacher will let
students discuss responses to review questions listed in summary section above.
Evaluation
MI
Informal Assessment (LSI Quadrant III):


Teacher will observe student demonstrators and student observers during guided
practice to assess understanding of concepts and techniques. Revision/re-teach will
occur as needed before moving to Independent Practice portion of the lesson.
Teacher will circulate through the lab as students work on models independently to
redirect/re-teach as necessary.
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5
MI
Formal Assessment (LSI Quadrant III, IV):


Teacher will use the Webpage Planner Rubric to evaluate students’ planners
Teacher will use the Basic Webpage Rubric to evaluate students’ webpages.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):



Once the instructor reviews the web pages, they can be published for the student’s
parents to view or entered in various organizational contests for student web design.
Students will use the skills and techniques for web design in future projects.
Create a “web quest” looking at good and poorly designed web pages.
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
7
Webpage Vocabulary
Anchor Link – Internal link within a webpage that allows the user to “jump to” other
areas of the page.
Copyright - The legal right granted to an author, composer, playwright, publisher, or
distributor to exclusive publication, production, sale, or distribution of a literary, musical,
dramatic, or artistic work.
External Link – A link to another webpage or website.
HTML Editor – A software application for creating webpages using the HTML markup
language or a WYSIWYG interface.
Layout Sketch - A rough sketch outlining the layout and components of a webpage or
website.
Webpage - A document on the World Wide Web consisting of an HTML file and any
related files for scripts and graphics, and often hyperlinked to other documents on the
Web.
Webpage Designer - Someone who creates well organized and eye pleasing pages
with text, graphics, and color to convey a message to the viewer.
Webpage Layout – Web pages either have a left-hand, right-hand, or top layout.
Website - A set of interconnected web pages usually including a homepage, generally
located on the same server, and prepared and maintained as a collection of information
by a person, group, or organization.
WYSIWYG – “What you see is what you get” editing that is a graphical interface for the
HTML language.
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
8
Vocabulary Review for Basic Web Page Design
Lesson
Instructions: Fill in the blanks below with the correct term as your teacher goes over
terminology associated with web page development.
Section One
Anchor Link:
__________ __________ within a web page that allows the user to “__________
__________” other areas of the page.
Copyright:
The __________ _________ granted to an author, composer, playwright,
publisher, or distributor to exclusive publication, production, sale, or distribution of
a literary, musical, dramatic, or artistic work.
External Link:
A link to __________ web page or website.
HTML Editor:
A __________ __________ for creating web pages using the HTML markup
language or a WYSIWYG interface.
Layout Sketch:
A rough sketch outlining the __________ and __________ of a web page or
website.
Web Designer:
Someone who creates ___________-__________ and __________ __________
pages with text, graphics, and color to convey a message to the viewer.
Web Page:
A document on the __________ __________ __________, consisting of an
__________ file and any related files for scripts and graphics, and often
__________ to other documents on the Web.
Web Page Layout:
Web pages either have a __________-hand, __________-hand, or __________
layout.
Website:
A set of __________ web pages usually including a __________, generally
located on the same server, and prepared and maintained as a __________ of
information by a person, group, or organization.
WYSIWYG:
“What you __________ is what you __________” editing that is a graphical
interface for the HTML language.
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
9
Design Activity Worksheet - Basic Web Page Design
Instructions: Fill in the blanks below with the correct term as your teacher explains
terminology associated with web page development.
Section Two
Process for web page design
1. Determine the ___________ of the web page
2. What ___________ are you trying to convey to anyone who views our web
page?
3. Determine your intended ______________ of the web page
4. What is the ________ range of the intended audience?
5. What is the __________ of the intended audience?
Section Three
Qualities of a well-designed web page
6. Well-_______, and easy to follow.
7. ______________
8. Not “_____________”
9. Color: ______________
10. Who will be able to see your web page if it is posted on the Internet?
______________
Section Four
Safety precautions
11. What type of information should NOT be included on your web page?
a. ______________, _______________, ____________
12. What is copyright?
13. Why are copyright laws in place?
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
10
Section Five
In the section below, sketch out a draft of what you want your web page to look like. Be
sure to include the following items:
 A text placeholder for the page header
 Other text placeholders throughout the page
 A left-side navigation panel
 Picture placeholders (at least 3)
 External links – indicate website linked to
 Anchor links within the web page – indicate target places linked to
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
11
Webpage Planner Evaluation Rubric
CRITERIA
Excellent
5 Points
Good
3-4 Points
Left-Side
Navigation
Layout
Navigation
layout was on
left side and
indicated
target of links.
Navigation
layout was not
on left side but
indicated
target of links.
The student
showed
placeholder for
3 pictures and
indicated
content of
picture.
The student
showed
placeholder
for less than 3
pictures and
indicated
content of
picture.
The student
indicated
placeholder
for a text
header at the
top of the
page
indicating
words but not
size and color.
3 Inserted
Pictures
Text Header
Anchor Links
External
Links
Copyright
Guidelines
Followed
The student
indicated
placeholder for
a text header
at the top of
the page
indicating
words, size
and color.
The student
indicated
placement for
2 anchor links
indicating
target of link.
The student
indicated
placement of
external link
and its website
address and
listed
relevance to
content.
The student
followed
proper use of
citations for all
necessary
content.
Acceptable
1-2 Points
Navigation
layout was on
left side but
did not
indicate target
of links.
The student
showed
placeholder for
3 pictures but
did not
indicate
content of
picture.
Unacceptable
0 Points
The student did
not use a leftside navigation
layout.
The student did
not indicate
placement for
any pictures.
The student
indicated
placeholder for
a text header
at the top of
the page.
The student did
not indicate a
text header at
the top of the
web page.
The student
indicated
placement for
1 anchor link
indicating
target of link.
The student
indicated
placement for
anchor link(s)
but did not
indicate target
of link.
The student did
not indicate any
anchors within
the web page.
The student
indicated
placement of
external link
and its
website
address but
not relevance.
The student
indicated
placement of
external link
but not its
website
address or
relevance.
The student did
not indicate
placement of
external link.
The student
followed
proper use of
citations for
some
necessary
content.
The student
followed
proper use of
citations for
little necessary
content.
The student did
not follow
copyright
guidelines.
TOTAL POINTS: ________/30 pts
POINTS
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
12
Basic Web Page Evaluation Rubric
CRITERIA
Excellent
5 Points
Good
3-4 Points
Acceptable
1-2 Points
Unacceptable
0 Points
Left-Side
Navigation
Layout
Navigation layout was
on left side and links
worked correctly.
Navigation layout
was on left side
and some links
worked correctly.
Navigation layout
was on left side but
contained no links.
The student did not
use a left-side
navigation layout.
The student inserted
less than 3 personal
pictures into the
web page.
The student neither
correctly sized nor
inserted pictures into
the web page.
The student placed
a text header at the
top of the web page
using appropriate
color but not size.
The student did not
place a text header at
the top of the web
page.
The student added
only 1 working
anchor link within
the web page.
The student added
anchor link(s) within
the web page but it
did not work
properly.
The student did not
correctly add a
working anchor link
within the web page.
The student
correctly added a
working external
link within the web
page.
The student added
an external link
within the web page,
but it did not work
properly.
The student did not
correctly add a
working external link
within the web page.
The student
followed personal
safety guidelines
but not copyright
laws.
The student
followed copyright
guidelines but not
personal safety.
The student did not
follow personal safety
or copyright
guidelines.
The student web
page was similar to
draft/planner
document with
several changes.
The student web
page was only
slightly similar to
draft/planner
document.
The student web
page was not
representative of
draft/planner
document.
There were less
than 3 errors in
grammar,
capitalization,
punctuation, and
spelling.
There were 4-8
errors in grammar,
capitalization,
punctuation, and
spelling.
The student used text
that had more than 8
errors in grammar,
capitalization,
punctuation, and
spelling.
The web page
appears somewhat
organized, some
items placed at
random
The web page
appears
disorganized, but
items seem to be
relevant to
content/purpose
The web page is
not “busy”, but
color is
overwhelming.
The web page is
“busy” but uses
color effectively.
3 Inserted
Pictures
Text Header
Anchor Links
External Links
Copyright
Guidelines
Followed
Layout Sketch
Writing
Mechanics
Overall
Appearance Organization
Overall
Appearance –
Design
The student correctly
sized and inserted 3
personal pictures into
the web page.
The student placed a
text header at the top
of the web page using
appropriate size and
color.
The student correctly
added 2 working
anchor links within the
web page.
The student correctly
added a working
external link within the
web page whose
content was relevant
to homepage.
The student followed
personal safety &
copyright guidelines
with proper use of
citations throughout
the web page.
The student web page
was very similar to
draft/planner
document with only
minor changes.
The student used text
free of errors in
grammar,
capitalization,
punctuation, and
spelling.
The web page is well
organized, easy to
follow, and inviting.
The web page is not
“busy” and uses color
effectively.
The student
inserted 3 personal
pictures into the
web page, but they
were not sized
correctly.
The student placed
a text header at the
top of the web
page using
appropriate size
but not color.
POINTS
The web page
appears
disorganized, items
placed at random or
irrelevant to
content/purpose
The web page is
“busy” and is an
overwhelming use of
color.
TOTAL POINTS: ________/50 pts
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
13
Evaluating Web pages Checklist
Evaluator Student Name: ___________________________
Instructions: Complete the checklist below by evaluating 3 other websites created by
your peers. In each box below, indicate with a ranking of 1-5 how well that website
conveyed the items listed.
Rankings:
12345-
Name of student
who created web
page
Well
organized
Color
Scheme
is missing this component
needs improvement
good
very good
excellent
Message
Conveyed
Links work
properly
Suggestions for
improvement
1.
2.
3.
IT: [Principles of IT]: [Intro to Basic Webpage] Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
14