ICTWS - (18.3.2) Web Scripting Learning Plans - SJE

1
I.C.TOPIA WEB
SCRIPTING
LEARNING PLANS
TechFactors,
Inc.
E-mail Address: info@techfactors.com
Website: www.techfactors.com
2
Trademark of TechFactors,
Inc.
Philippine Copyright 2018 by TechFactors, Inc. All rights reserved. No part of this
guide may be reproduced or copied in any form, in whole or in part, without
written consent of the copyright owner. However, clients of TechFactors, Inc.
may freely edit or reproduce any part of the guide for educational purposes.
Second printing of the third edition, 2019

Published by TechFactors, Inc. Printed in
the Philippines
Authors: Arturo L. Jacinto, Jr., Florida V. Ortiz, and Jasmin D. Niguidula,

Ph.D. Editors: Alvin Ramirez, Micah Angelie C. Dizon and Divine Louise P.
Anai
Artist: Joseph Timothy S.

Bago
Exclusively distributed by TechFactors,

Inc. 101 V. Luna Road Ext., Sikatuna
Village Quezon City 1101 Philippines
Telephone number: (632) 9296924 E-
mail address: info@techfactors.com
Website: www.techfactors.com
TABLE OF
CONTENTS
5 COURSEWARE
DESCRIPTION
6 YEARLY
PLANS
9 WEEKLY
PLANS
22 L1 THE WEBPPAGE
UNTANGLED
28 L2 WRITING OUT THE

WEBPAGE
40 L3 PLANNING YOUR
WEBSITE
45 L4 EXPERIMENTING WITH FONTS AND

COLORS
53 L5 WORKING WITH THE BOX

MODEL
58 L6 EXPERIMENTING WITH
MULTIMEDIA
65 L7 PROCESSING ONLINE
FORMS
70 L8 MAKING DYNAMIC
WEBPAGES
76 L9 OTHER WEB
MATTERS
81 L10 GETTING STARTED WITH

JAVASCRIPT
4
AVASCRIPT SYNTAX RULES VARIABL
ES
91 L12 JAVASCRIPT OPERATORS
96 L13 CONTROLS AND LOOPS
101 L14 FUNCTIONS AND EVENTS
107 L15 JAVASCRIPT OBJECTS
112 L16 JAVASCRIPT INDEPENDENT OBJECTS

COURSEWARE of Web design are thoroughly observed, su
images, and the efficiency of layout and hype
DESCRIPTION
The second part of the book makes it easy to
side Web applications using JavaScript. It pro
In this course, the students will be taught to create their own webpages with
Notepad, the basic text editor of the Windows®to- follow learning
operating system.material
It will befor aspiring webma
interest in learning more advanced skills in W
used instead of WYSIWYG (What You See Is What You Get) editors to
ensure that the students learn the basic structure and syntax of HTML.
Matters of accessibility will be incorporated into each lesson as the principles
COURSE INTENDED LESSON 1. Discover how programming languages ha
Apply the different models or paradigms of c
OUTCOMES
fundamental programming concepts that are
most conventional programming languages. 4. Dev
At the end of the course, learners will be able
to: learning a particular programming language
66
YEARLY PLANS
Overview
This section contains list of lessons and topics that the learners will encounter in the whole courseware
MODULE WEEK NO. LESSON NO. TOPIC
1 1 The Webpage Untangled
2 2 Writing out the Webpage
3 3 Planning your Website
4 4 Experimenting with Fonts and Colors
5 5 Working with the Box Model
6 6 Experimenting with Multimedia

7 7 Processing Online Forms
8 8 Making Dynamic Webpages
9 9 Other Web Matters
10 10 Getting Started with Javascript
11 11 Javascript Syntax Rules and Variables
12 12 Javascript Operators
77
8
13 13 Controls and Loops
14 14 Functions and Events
15 15 Javascript Objects
16 16 Javascript Independent Objects
WEEKLY PLANS
99
10
FIRST QUARTER
Overview: This section contains outcomes, framing questions, and standards that will help the learner
a simple webpage based in w3C standards and create a program using JavaScript by the end of the co
Lesson Lesson Outcomes
(LO)
Framing Questions (FQ)
Content Standard (CS)
Performance Standard (PS)
Assessment Tools (AT)
ISTE Standard (IS)
1 • Understand
the basic concepts involved in webpage design.
• Create a webpage.
• Write basic patterns for HTML tags.
• Insert the DOCTYPE declaration.
• How can I create my own Web page?
· Demonstrate understanding of the nature and concepts of the World Wide Web.
• Define Web Terminologies.
• Differentiate HTML and CSS.
✓ Measure ✓ Han
KC, CT, ID
✓ 2 • Use the
• What are the
Recognize the
• Use heading
Measure
KC, CT, heading and
uses of tags in
various HTML tags
and paragraph
✓ Recitation
ID, CC paragraph
HTML
used in creating a
tags.
✓ Hands-on tags.
documents?
Web page.
• Create a nested
Activity
• Create
list. different kinds
• What would
• Input a of lists and
HTML be like
preformatted nest one upon
without the
text and a another.
tags?
horizontal rule
• Input a
into the Web preformatted
page. text and a
• Determine and horizontal rule
utilize the into the page.
different HTML tags in creating a Web page.
3 • Identify the
steps needed to plan for a website.
• Determine the different sections appropriate for a website.
• What would be
· Determine the steps
• Identify the
✓ Measure
KC, EL a good website?
in website planning
steps in website
✓ Recitation and their
planning.
✓ Hands-on importance.
• Distinguish
Activity between website sections.
• Explain the importance of
11 11
12
website planning.
4 • Describe the
uses of external style sheets.
• Describe the uses of in-line, internal, and external style sheets.
• Identify the commands used in setting style sheet properties, like fonts and text colors.
· Recognize various
✓ Measure means of
✓ Recitation decorating and
✓ Hands-on modifying Web
Activity pages in HTML.
· How can customizing text styles and fonts be more efficient using external style sheets?
• Distinguish various style sheets.
• Identify the uses of each style sheet.
KC, CC, ID
✓ 5 • Lay out pages
• How will the
· Acquire a deeper
• Distinguish
Measure
ID, CT, EL using CSS
knowledge of
understanding of
span tag from
✓ Recitation properties.
creating
HTML styling using
div tag.
✓ Hands-on
• Apply the
effective
box model
• Differentiate
Activity span and div
reports benefit
concepts.
margin and HTML tags.
an individual?
padding.
• Adjust
• Lay out pages margins and
• How can good
using CSS padding.
reporting be
properties beneficial in an
• Recognize industrial
selected style setting?
sheet techniques.
6 • Manipulate
text, images, borders, and the background.
• Alter the size of an image using the img tag attributes.
• Embed animated GIFs.
• How can I
· Determine the tags
• Select
✓ Measure
ID, CT, KC make my
used in placing
appropriate
✓ Recitation Web pages
multimedia in
multimedia to
✓ Hands-on more
HTML documents.
attach to HTML
Activity attractive?
documents
• When should
• Determine the I use images
advantages and in HTML
disadvantages documents? of using
multimedia in HTML.
13 13
14
✓ 7 • Describe the
How can online
· Identify different
Measure
CT, KC, ID parts and
forms help the
functions of online
✓ Recitation functions of a
user and the
forms.
✓ Hands-on typical online
server?
Activity form.
• Create online forms that cater to the demands of the users.
• Process online forms
8 • Add more life to their pages by following the markups provided in the lesson.
• Explain the advantages of new technologies.
• Apply JavaScript commands.
Create a simple online form.
How can I create
· Acquire a deeper
• Determine
✓ Measure
CT, KC, ID an interesting
understanding of
usefulness of
✓ Recitation Web page with
ways to creating
Web
✓ Hands-on dynamic
dynamic Web
technologies
Activity elements?
pages using some
• Explain Web technologies.
advantages of Web technologies
• Utilize JavaScript commands in creating
dynamic Web pages.
9 • Describe meta
tags and their relationship with search engines.
• Upload files and submit to various search engines.
• Define Web advertisement.
• Explain how search engines work.
• Define and explain intellectual property rights (IPR).
• Learn usability tips for use in their own Web pages.
• How is
· Recognize other
✓ Measure information
Web concepts
✓ Recitation disseminated
relevant in
✓ Hands-on on the Web?
creating Web
Activity pages.
• How do search engines work?
• Describe meta tags and their relationship with search engines.
• Explain Web advertisement and how search engines work.
• Define and explain intellectual property rights.
15 15
CT, KC, ID
16
✓ 10 • Define script.
What is a script?
· Demonstrate
• Define a script
Measure
CT, KC, ID
• Distinguish
How to create a
understanding of
• Distinguish
✓ Recitation between
scripting
the concept of
differences
✓ Hands-on client-side and
program?
program scripting.
between client-
Activity server-side
side and server- scripting.
side scripting.
• Identify the
• Identify tools tools needed
needed to start to start using
using JavaScript. JavaScript
11 • Describe
JavaScript
• Explain where JavaScript was derived
• Use the basic syntax and variables in JavaScript
How can I create
· ✓ CT, KC, ID
my own Web page with JavaScript
• Measure ✓ Recitation ✓ Han
code?
Demonstrate
Define deeper
JavaScript and understanding of
its function. Web scripting
• Explain using JavaScript.
JavaScript derivation.
• Work with JavaScript utilizing the basic syntaxes and variables.
✓ 12 • Define
Recognize various
• Distinguish the
Measure
CT, KC, ID operator.
operators used in
differences
✓ Recitation
• Distinguish
creating
between
✓ Hands-on among the
JavaScript
JavaScript
Activity different
programs.
operators and operators in
their functions. JavaScript.
• Use operators in
• Identify the
creating uses of the
JavaScript different types
programs. of operators.
• Apply the different types of operators in JavaScript.
13 • Describe the
different types of conditional statements.
How can I make a calculator using JavaScript code?
How can I
• control the loops?
Demonstrate understanding of the controls and
• Distinguish the
✓ Measure
CT, KC, ID different
✓ Recitation control
✓ Hands-on statements
Activity
17 17
18
loops • Explain the
concepts in functions of
Web scripting. each type of conditional statement.
• Create sample codes for each type of conditional statement.
used in Web scripting.
• Create sample codes applying the different conditional statements.
14 • Describe the
use of functions and events in Java Scripting.
Determine various JavaScript functions and events in Web scripting. How can I apply functions and ev
page?
• Describe the use of functions and events in JavaScripting.
✓ Measure ✓ Recitation ✓ Han
CT, KC, ID
• Explain how functions work in JavaScript.
• Identify the different events that JavaScript can handle.
• Discuss how functions work in JavaScript.
• Identify different events that JavaScript can handle.
15 • Describe what
a JavaScript object is.
• Explain the functions of the different types of objects in JavaScript.
How could I
Demonstrate ✓ associate a JavaScript object in my Web page?
Measure understanding on
✓ Recitation the concept of
✓ Hands-on JavaScript objects
Activity and their roles.
Create objects such as Array, Function, Date, Number, Boolean and String.
19 19
CT, KC, ID
20
• Create objects using JavaScript.

16 • Identify the • Identify
the different JavaScript
different independent objects in independent objects.
JavaScript. • Create sample programs applying the
• Explain
the functions of each different independent objects.
independent object in JavaScript. • Create sample programs applying the
different independent objects.
• Apply the different independent objects
• Create sample programs applying the
in a
different independent objects.
How can JavaScript further improve
✓ Measure ✓ Recitation ✓ Hands-on
how my Web page works?
Activity
Demonstrate deeper understanding of
JavaScript and its independent objects.
Activity
Activity
Activity
Activity
• Identify the different JavaScript
CT, KC, ID
independent objects.
CT, KC, ID
CT, KC, ID
CT, KC, ID
CT, KC, ID
sample program.
EVALUATION Number of Learners within Mastery Level
Number of Learners Needing Remediation/Reinforcements
Others:
•
ISTE Standards:
• Empowered Learner (EL)
• Computational Thinker (CT)
• Innovative Designer (ID)
• Digital Citizen (DC)
• Knowledge Constructor (KC)
• Creative Communicator (CC)
• Global Collaborator (GC)
21 21
22
LESSON 1 THE
WEBPAGE
UNTANGLED
LESSON OUTCOMES
After discussing the subject matter, the learners are expected to be able to:
1. Understand the basic concepts involved in webpage design. 2. Create a webpage. 3.

Write basic patterns for HTML tags. 4. Insert the DOCTYPE declaration.
23
LECTURE
A. Enduring Understanding
• How can I create my own Web page?
B. Content Standards
• Demonstrate understanding of the nature and concepts of the World Wide Web.
C. Topic Outline
• Your First Web page
• HTML Tags
• Web Tools
• W3C Standards
D. Performance Standards
• Define Web Terminologies.
• Differentiate HTML and CSS.
E. Intended Lesson Outcome

Gain awareness of the importance of the World Wide Web in computing technology.
F. Teaching Techniques
The suggested teaching approach for this lesson may vary through lecture and demonstration
individual and group activities.
G. Methodology 1. Motivation
Ask the learners what they do when surfing the Web and name their favorite sites. Let the
describe what their site would look like and what will be their objectives if ever they will m
one. Let them write their answers on the board.
the class what they do when they surf the Web. Ask their favorite sites and write thes
board. Ask them what their site would look like and what it would be about if ever they ma
Write their answers on the board.
24 State that websites are easy to create and it has lately been a creative way of express
need to know are a few rules and tags and your dream website could be on its way.
2. Lesson Proper
Discuss the lesson. Write the terminologies encountered and their definitions on the boar
Use the slide of the HTML template when discussing DOCTYPE and the main elements
Web page.
APPLICATION
A. Engagement Activity
Create a Web page about your favorite dessert. It should contain three paragraphs maximum
B. Reinforcement Activity
The learners will be making a Web page by means of a text editor and a Web browser. They
it in their Web Design folder inside the My Documents folder. For the entire procedure, they w
text editor like Notepad and an Internet browser (e.g., Microsoft® Internet Explorer). Create a
naming convention for your class (e.g., <Lastname_Firstname_Lesson1.html> for the first We
file) so that the learners will not overwrite each other’s works. The learners need to untangle
document and make a web page from scratch, wherein the body should contain a poem abou
World Wide Web and/or HTML.
25 Answer:
EVALUATION
Give Part A of the Measure section as a quiz.
SYNTHESIS
Ask the following questions for discussion purposes:
1. How can you remember the different tags in HTML?
2. What kinds of error will you encounter while creating a Web page?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>Activity No. 1</title>
</head>
<body>
According to the Glossary of Poetic Terminology (article) by Paul Williams on AuthorsD

haiku is "a three-line poem, usually imagistic, derived from the Japanese tradition. The
third lines have five syllables and the second line has seven."
</body>
</html>
26 ASSI
Enumerate at least six shortcut keys for word processing
ANSWER KEY
Evaluation
A. 1.
• HTML – HTML or HyperText Markup Language is a language used in creating web pages.
• XHTML – a cleaner and stricter version of HTML
• W3C – stands for World Wide Web Consortium, the organization that develops Web Stand
2.
The main elements of an HTML document are the following: html, head, title, and the body.
• HTML – HTML or HyperText Markup Language indicates that the file is composed of HTML
commands.
• Head – Contains the title element.
• Title – encloses the written content that will appear in the title bar of the browser window.
• Body – includes all the other tags, elements, and contents of your page.
3.
A text editor is a formatting tool used in making and editing text files. One good example of it is
A text editor differs from a WYSIWYG program in the way it is used. In a text editor like Not
can edit text files, HTML files and programming codes like Java and C++ while on most W
programs the only file that you can edit is the file that you’ve created on a particular W
program.
27 B.
1. g 2. e 3. h 4. f 5. d 6. b 7. i 8.
j 9. a 10. c
C.
1. e 2. b 3. d 4. c 5. a
D. 1. Suggested answers:
• Local and international news (BBC, CNN)
• Products and services (Ebay)
• Scientific findings (various online journals)
• Horoscope (various fun / leisure portals)
• Literary works (various literary portals)
• Book reviews (Amazon.com)
• Cooking recipes (Allrecipes.com)
• Weather forecasts (The Weather Channel, Yahoo Weather)
28
LESSON 2 WRITING OUT

THE WEBPAGE
LESSON OUTCOMES
1. Use the heading and paragraph tags. 2. Create different kinds of lists and nest one upon
another. 3. Input a preformatted text and a horizontal rule into the page.
29
LECTURE
• What are the uses of tags in HTML documents?
• What would HTML be like without the tags?
• Recognize the various HTML tags used in creating a Web page
C. Topic Outline
• Format Tags
• More Text Tags
• Tags for Lists
• Preformatted Text and Horizontal Rule
• HTML Links
• Use heading and paragraph tags.
• Create a nested list.
• Input a preformatted text and a horizontal rule into the Web page.
• Determine and utilize the different HTML tags in creating a Web page.

Creation of a webpage showing learners’ familiarity with the most commonly used HTML
tags.
The suggested teaching technique for this lesson is through lecture and demonstration with
G. Methodology
A. Checking of Assignment
Five tags that are not yet discussed:
this special character is used to create a line
• <p> content </p>
break
this tag is used to indicate
• <ul> </ul>
paragraphs
this tag is used to enclose unordered
• <b> content </b>lists
this tag is used in boldfacing
• <ol> </ol>
• <i> content </i> this tag is used to enclose ordered
this tag is used to italicize lists
• <br />
this • <li> content </li>
tag is used to indicate items in a list 30 • <dl> </dl>
this tag is used to enclose a definition list
• <dt> </dt>
this tag is used to enclose the term being defined
• <dd> </dd>
this tag is used to enclose the term definition
• <pre> </pre>
this tag is used to input text which appears exactly as it was typed
• <hr>
this tag is used to put a horizontal line
B. Review
Let the learners recite individually. Ask them to explain the functions of the main elements of HTML.
C. Motivation
Ask the class what they want to add to their first Web page. Would they like to give it more life and im
and format? What do they have in mind? Write their answers on the board.
State that Web page design is like creating a book. Using the appropriate tags, Web designers can cre
pages of their choice. They can put texts, tables, lists, images, colors, and even video and audio files.
D. Lesson Proper
Use the table of HTML tags and their functions as a reference in discussing the lesson.
APPLICATION
Create the following page using the code snippets found in the book and the table of HTML tags as ref
Write the code on a sheet of paper.
The page should contain the following format:
• The student’s name in boldface.
• The student’s address in italics.
• An unordered list of the student’s hobbies. There should be at least five hobbies.
31 • An ordered list of the student’s favorite desserts. There should be at
least five desserts.
The learners will do the following activities:
1. Type the tags of the display. 2. Encode a nested list.
Answers:
Browser Display HTML Code
<h1>BOOK SECOND.-- EPONINE</h1>
<hr />
<h2>CHAPTER I</h2>
<h4>THE LARK'S MEADOW</h4>
<h1>BOOK NINTH.--WHITHER ARE THEY

GOING?</h1>
<hr />
<h2>CHAPTER I</h2>
<h4>JEAN VALJEAN</h4>
<h1>BOOK FOURTEENTH.--THE GRANDEURS OF

DESPAIR</h1>
<hr />
<h2>CHAPTER I</h2>
<h4>THE FLAG: ACT FIRST</h4>
<ol type="I">BOOK THIRTEENTH.- -MARIUS ENTER

SHADOW
<li>From the Rue Plumet to the Quartier Saint-Denis</li>
<li>An Owl's View of Paris</li>
<li>The Extreme Edge</li>

32 </ol>
<ul type="square">
<li>Unite: Blanchard: Arbre- Sec. 6.</li>
<li>Barra. Soize. Salle-au- Comte.</li>
<li>Kosciusko. Aubry the Butcher?</li>
<li>J. J. R.</li>
<li>Caius Gracchus.</li>
<li>Right of revision. Dufond. Four.</li>
<li>Fall of the Girondists. Derbac. Maubuee.</li>

<li>Washington. Pinson. 1 pistol, 86 cartridges.</li>
<li>Marseillaise.</li>
<li>Sovereignty of the people. Michel. Quincampoix. Sword.</li>
<li>Hoche.</li>
<li>Marceau. Plato. Arbre- Sec.</li>
<li>Warsaw. Tilly, crier of the Populaire.</li>
</ul>
<dl>
<dt><b>Louis XVIII.</b></dt>
<br /><br />
<dd>is represented in comic pictures of that day

33 as having a pear-shaped
head.</dd>
</dl>
<dl>
<dt><b>LONG LIVE THE PEOPLES!</b></dt>
<br /><br />
<dd>These four words, hollowed out in the rough ston

a nail, could be still read on the wall in 1848.</dd>
</dl>
<p>
"Oh, mon Dieu! what if you should meet them!"
<br />
<br />
"I should beg alms of them for my poor."

<br />
<br />
"Do not go, Monseigneur. In the name of Heaven! You

risking
your life!"
<br />
<br />
"Monsieur le maire," said the Bishop, "is that really all?
I am not in the world to guard my own life, but to guard

souls."
</p>
34 <p>
"And when do you start?"
<br /><br />
"He did not say when."
<br /><br />
"And when shall you return?"
<br /><br />
"He did not say when."
</p>
<p>
Je les entendais dire: Est elle belle!<br />
Comme elle sent bon! Quels cheveux a

flots!<br />
Sous son mantelet elle cache une aile,<br />
Son bonnet charmant est a peine

eclos.
</p>
<p>
"Lovely things we will buy<br />
As we stroll the faubourgs through,<br />
Roses are pink, corn-flowers are blue,<br />
I love my love, corn-flowers are blue."
</p>
35 <pre>
EXPENSES OF CARRIAGE AND CIRCUIT.
For furnishing meat soup to the patients in the hospita

livres
For the maternity charitable society of Aix . . . . . . . 250 "
For the maternity charitable society of Draguignan . . . 250 "
For foundlings . . . . . . . . . . . . . . . . . . . . . 500 "
For orphans . . . . . . . . . . . . . . . . . . . . . . 500 "
-----
Total . . . . . . . . . . . . . . . . . . . . . . . 3,000 "
Such was M. Myriel's budget.
</pre>
36 <pre>
+------------------------------------- -----------------------+ | Q
| C | D | E | Learn this list by heart. After so doing | | | |
| you will tear it up. The men admitted | | | | | | will do th
same when you have transmitted | | | | | | their orders t
| | | | | | Health and Fraternity, | | | | | | u og a fe L. |
+------------------------------------- -----------------------+
</pre>
<pre>
Saltpetre . . . . . . . . . . . 12 ounces.
Sulphur . . . . . . . . . . . 2 ounces.
Charcoal . . . . . . . . . . . 2 ounces and a half.
Water . . . . . . . . . . . 2 ounces.
</pre>
<title>Les Miserables EXCERPTS</title>

37
EVALUATION
Give Part B of the Measure section as a quiz.
SYNTHESIS
1. When and how do you use heading tags? 2. What is the most important thing to remember
encoding nested
lists?
ASSIGNMENT
Conceptualize ideal topics for a website.
ANSWER KEY
Evaluation
A. 1. The line break tag is used to create a line space, which is equivalent to pressing the
“Enter” key once. Use: &nbsp (which means non-breaking space) or <br/> (which is actually a
special character, not a tag).
2. FILO = First In Last Out. You may interchange the tags as long as the first that you open wit
last that you close with, as demonstrated in the example below:
<em><strong>Viva Las Vegas!</strong></em>
3.
• Unordered or Bulleted List – the list is enclosed in <ul> </ul> tags, while each item is enclo
in <li> <li/> tags.
• Ordered or Numbered List – the list is enclosed with each list item inside <li> </li> tags.
• Definition list – the list is enclosed in <dl> </dl> tags. The term to be defined is within the <
</dt> tags, followed by the term’s definition inside <dd> </dd> tags.
38 • Nested List – you can nest lists within lists to create a hierarchy of
information.
4. The paragraph element tags are <p> and <p/>.
5. HTML supports up to six levels of headings. The first level heading should
be your main, or umbrella, topic, and the other levels will consist of your subtopics.
6. Non – breaking space is represented by &nbsp.
7. To include an unordered list to a Web Page the <ul> </ul> tags should
be used to enclose the list itself.
8. To include an ordered list to a Web Page the <ol> </ol> tags should be
used to enclose the list itself.
9. To place an item in an unordered list to a Web Page each item must be

enclosed in <li> <li/> tags.
10. A hyperlink is used to open a file or page. It is usually shown as a text with
an underline, and when you click it, it leads you to another page or downloads a file.
11. The markup for opening a new window is including the property –
target=“_new” to your anchor tag.
12. The <a> tag should have a mailto:<email address here> in the href property.
B.
1.d 8. i
2.c 9. a
3.f 10. k
4.e 11. m
5.h 12. l
6.g 13. j
7.b
8.i
9.a
10.k
39 C.
12 3 Digital Divide3 2
4 The gap between people with 5 access 5 to digital and information technology, and those 6 witho
access 6. It includes:
7 ▪ 8 the imbalances in physical access to technology; and 8
▪ 9 imbalances in resources and skills needed to effectively participate as a digital citizen.9 7 In other words
unequal access by some members of the society to information and communications technology, and
unequal acquisitions of related skills. 10
4 1 Answers:
1. <dl></dl> 6. <b></b> or <strong></strong>
2. <dt></dt> 7. <ul type=”square></ul>
3. <h1><h1> 8. <li></li>
4. <dd></dd> 9. <li></li>
5. <b></b> or <strong></strong> 10. <u></u>

40
LESSON 3 PLANNING
YOUR WEBSITE
LESSON OUTCOMES
1. Identify the steps needed to plan for a website. 2. Determine the different sections
appropriate for a website.
41
LECTURE
• What would be a good website?
• Determine the steps in website planning and their importance.
C. Topic Outline
• Website Planning
• Website Sections
• Identify the steps in website planning.
• Distinguish between website sections.
• Explain the importance of website planning.

Appreciate the importance of website planning before working with Web pages.
The suggested teaching technique for this lesson is through lecture/discussion with
individual/group presentation and written assessments.
G. Methodology
1. Checking of Assignment
Depending on the class size, you may want to group the learners for a discussion on w
good topic would be for a website. Give them a few minutes to discuss among themselv
they plan to put in there and why.
2. Review
Assign one member of each group to recite and present to the rest of the class their ide
website. Ask them to:
• Describe what the site will be about.

42 • Explain why they chose that topic.
• Demonstrate their idea on what sections should be found in the site.
3. Motivation
Start by creating a situation where the learners are already creating their own Web pag
about their hobbies, themselves, their friends, or anything they want. Ask them what the
would look like, especially on the styles and designs. Ask for the colors and the fonts th
want on their site. Write their answers on the board.
4. Lesson Proper
Show the learners that there are different sections they can use for their own Web page
these are applicable to the website they have in mind. Emphasize the value of planning
than going straight to the computer to create a website. Illustrate how to accomplish ea
step by citing actual examples.
APPLICATION
Divide the class into six groups. Each group should be assigned with one of the following:
• Fan site
• Business site
• Personal site
• Information site
• Hobby site
• Blog site
After being assigned with their site orientations, the groups will then take a look at the website
sections discussed earlier and create a site map depending on the orientation assigned. Eac
should come up with a link with a one-sentence explanation on why such a link is essential fo
particular site. The learners can also use the Internet for additional references on particular s
the same orientation as theirs.
43
The learners will think of a theme or topic for their own Web page. This activity can be done
or individually, depending on the size of the class or the teacher's discretion. Outputs will var
EVALUATION
Ask the learners to present their ideas in class. Ask the class to critique the website being prese
each group and make suggestions on how it can be improved.
SYNTHESIS
1. What would be a good website topic? What are your interests? What are
your hobbies? 2. Which of the website sections are applicable to your website?
ASSIGNMENT
• What is CSS?
• What are the three types of CSS? Explain each.
ANSWER KEY
Evaluation
A.
1. Steps in planning for a website:

• Creating a goal for your website
• Identify your target audience
• Determine and trim down content
• Visualize the page flow
• Sketch the essential features and the look and feel of your website
• Plan site maintenance and update
• Create your website
• Perform
usability testing
44 2. Characteristics of a potential audience you will look for:
• Gender
• Age range
• Kind of work (or school)
• Habits
• Cultural affiliation
• Interests
3. A home page
4. The guest book section
5. The site links section
6. The about me/contact me section
7. The site section
8. Usability is the ease of which a user can employ a certain tool for a
goal; being user-friendly
9. Here are some usability tips:
• Easy page navigation

• Seamless page flow
• Not confusing theme and purpose of the website
10. A splash page.
B.
1. e 5. i 9. f
2. c 6. j 10. g
3. d 7. b
4. h 8. a
C. Answers may vary.

45
LESSON 4 EXPERIMENTING
WITH FONTS AND COLORS
LESSON OUTCOMES
1. Describe the uses of external style sheets. 2. Describe the uses of in-line, internal, and e
style sheets. 3. Identify the commands used in setting style sheet properties, like fonts
and text colors.
46 LECTU
• How can customizing text styles and fonts be more efficient using external style sheets?
• Recognize various means of decorating and modifying Web pages in HTML.
C. Topic Outline
• Fashioning CSS
• Font
• Color
• Text
• Special Characters
• Comment Tags
• Distinguish various style sheets.
• Identify the uses of each style sheet.

Be familiar with the different style sheets in formatting Web pages.
individual and group written and hands-on activities.
G. Methodology
What is CSS? - Cascading Style Sheet; it is in charge of the presentation of HTML conten
What are the types of CSS? – In-line, Internal, and External

47 In-line – CSS commands are embedded or placed inside HTML tags.
This style is embedded with the tag in an HTML document. It is not a very flexible choice o
implementing style.
Internal – CSS commands found at the upper portion of the HTML document. This style is
the top of the HTML document. It is more flexible than inline, but is still not that flexible if u
multiple pages.
External – CSS commands found in a separate document. This style is found in a separat
With an external style sheet, you can change the look of an entire website by changing ju
file. It is the best choice when the style is applied to many pages.
2. Review
Let the learners do the following:
• Describe how nested tags are made.

• Create an ordered list using the appropriate HTML tags of the presidents of the
Philippines.
3. Motivation
Ask the learners if they have any idea how to change the font format of their website conte
them describer their ways. Then, introduce the lesson for today.
4. Lesson Proper
In discussing the lesson, emphasize the advantages of using external style sheets when c
Web pages. After discussing the part on font styles, show the slide demonstrating font sty
the class. Discuss the codes used. Do the same for colors, text styles, and paragraph pro
APPLICATION
Using the code in the most recent slide, change the lines such that the external style sheet w
displayed has the following properties:
• h2 should be:
48 o Blue o Times New Roman or Arial Black o Aligned to the right
• strong should be: o Teal o 32pt o Boldness of 700
• p should be: o All in uppercase o Overlined o Word space of
10em
The learners will use an external style sheet file to modify the given Web page. They will be
manipulating an HTML file and a CSS file in order to replace the deprecated tags.
The learners will remove deprecated tags from the provided HTML file and replace them wit
external style sheet. Also, they are tasked to play a timed game of rgb-hex colors.
49 Answers:
The solution to create the lesson4.html source code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style3.css" />
<title>Activity No. 3</title>
</head>
<body>
<br /><br /><br /><br /><br />
<h3>Things You Can Do When You Don't Have <em>Internet</em> Connection at Work:</h3>
<ul>
<li>Do your work in advance or review finished ones.</li>
<li>Organize your files, including the Recycle Bin.</li>
<li>Swap Flash games with your officemates.</li> Note <li>Read that
learners’ previously outputs downloaded will vary.
<em>e-books</em>.</li> Here <li>Create are the rgb-hex your very codes own with wallpaper.</li>
the HTML-named colors:
<li>Solve today's sudoku puzzle.</li>
<li><strong>Doze off (zzzzzzzz). ü</strong></li>
</ul>
</body>
</html>
5
0 blue #0000ff
qua #00ffff
navy #000080
maroon #800000
red #ff0000
black #000000
gray #808080
silver #c0c0c0
fuchsia #ff00ff
purple #800080
teal #008080
olive #808000
yellow #ffff00
white #ffffff
EVALUATION
Give a five-item short quiz. Choose from the following:
• Definition of an external style sheet

• Advantages of using an external style sheet
• Escape sequence for copyright
• Escape sequence for ampersand
• Escape sequence for n with tilde
• Rgb-hex code for the color red
• CSS code for a font weight of 600
• CSS code for the font families Arial, Courier New, and Times New Roman
SYNTHESIS
1. What is the significance of CSS in the making of Web pages? 2. What are deprecated tag
and attributes? Give some examples. 3. What are escape sequences?
ASSIGNMENT
• What is a box model in CSS?
• What are span and div tags?
ANSWER KEY
Evaluation
A. 1. The External Style Sheet is a file which, if changed, will change the look of
an entire website.
2. © encodes the copyright.
3. • font-family – specifies the font that your text will be in.

• font-size – specifies the size of your font.
• font-style – specifies which among the following your font will appear in: italic, normal, and obli
• font-weight – specifies how thick each letter will become.
4. .css is the file name extension of an external style sheet.
5. The color property is used to modify the font color.
6. The font-size specifies the size of your font.
7. Text-align specifies how the text will be aligned: left, right, or justified.
8. /* your comments here */
9. Possible answers: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white and yellow
10. xx-large
51
52
B. 1. g 6. i
2. a 7. h
3. b 8. j
4. f 9. c
5. e 10. d
C. 1. g 6. d
2. h 7. j
3. f 8. b
4. a 9. c
5. I 10. e
LESSON 5 WORKING WITH TH

BOX MODEL
LESSON OUTCOMES
1. Lay out pages using CSS properties. 2. Apply the span and div
HTML tags. 3. Adjust margins and padding.
53
54
LECTURE
• How will the knowledge of creating effective reports benefit an individual?
• How can good reporting be beneficial in an industrial setting?
• Acquire a deeper understanding of HTML styling using box model concepts.
C. Topic Outline
• Selected Style Sheet Topics
• Page Layout: Layout Table vs CSS Positioning
• Span and Div Tags
• The Box Model
• Margin and Padding
• Page Layout Using Box Model
• Distinguish span tag from div tag.
• Differentiate margin and padding.
• Lay out pages using CSS properties.
• Recognize selected style sheet techniques.

Give more creative emphasis to certain elements of a Web page by utilizing the different box
tags.
individual and group written and hands-on activities.
G. Methodology
• The box model is HTML styling where an element is enclosed by the padding that has b
which are enclosed by margins.
• The span tag is the defining style of any in-line element.
• The div tag is the defining style of any block-line element.
2. Review
Let the learners recite individually. Ask them to give the HTML codes for the table that foll
3. Motivation
Ask the learners what they do if they want to emphasize a statement when conversing wit
someone. Write their answers on the board.
4. Lesson Proper
In discussing the lesson, refer to the HTML code snippets when discussing tags. State tha
properties are used to efficiently lay out Web pages. This efficiency can cut down the time
changing layouts as well as improve code readability.
APPLICATION
Divide the class into groups of two. The learners will apply the box model on an image of the
The instructor should approve the image chosen. The creative options are theirs to decide. T
open book activity. The learners should submit the HTML document before the end of the se
Tecson, Earl John
Day AM PM Total
In Out In Out (Hours) Mon 9:00 12:00 2:00 6:00 7 Tue 9:00 7:00 10 Wed 10:00 12:00
1:00 5:00 6 Thu 2:00 8:00 6
Fri 9:30 1:30 4

55
5 guide used to plan the website’s layout – a black-and-white representation
6 of the actual site.
a wireframe of their final project using CSS
Outputs may
e is basically the skeleton of a website. It is a visual
vary.
EVALUATION
Give Part B of the Measure section as a quiz.
SYNTHESIS
1. Can you describe each CSS positioning property? 2. What is the difference between grou
and classifying selectors 3. What are span and div tags? 4. Can you illustrate the difference
between the margin and padding
properties?
ASSIGNMENT
On one whole sheet of pad paper, define what Multimedia is.
ANSWER KEY
Evaluation
A.
1. In the box model, the element is enclosed by the padding, which is then
enclosed by the borders, and which, in turn, are enclosed by the margins. 2. The format for
identifying or naming classes is: .name 3.
• The position property has the absolute, relative, static, and fixed values.
• The float property has the values left and right.
• The clear property has the values left, right, and both.
4. div
5. span
4. <img src="image.jpg " style="position: absolu
1;” />
B. 1. <p style=”text-align: right;”>some 5. <span style=“background-color: red; padding

src="image.jpg " /></span>
text</p>
6. h1 {text-decoration: underline;}
2. <img src=”image.jpg” style=”float: right;” /> 5
7
3. <img src="image.jpg " style="position: absolute; left: 10; top: 10;">
58
LESSON 6 EXPERIMENTING
WITH MULTIMEDIA
LESSON OUTCOMES
1. Manipulate text, images, borders, and the background. 2. Alter the size of an image
using the img tag attributes. 3. Embed animated GIFs.
LECTURE
• How can I make my Web pages more attractive?
• When should I use images in HTML documents?
• Determine the tags used in placing multimedia in HTML documents.
C. Topic Outline
• Multimedia
• Text and Images
• Background Values
• Borders
• Audio
• Videos
• Select appropriate multimedia to attach to HTML documents.
• Determine the advantages and disadvantages of using multimedia in HTML.

Develop creativity and technical skills in creating and designing HTML documents utilizing
multimedia elements.
G. Methodology
Multimedia refers to different forms of media such as text, picture, music, animation, and
videos.
2. Review
Let the learners recite individually. Ask them to:
• Describe the uses of external style sheets.

59
6 • Enumerate at least five predefined colors.
0
• Enumerate the different paragraph
3. Motivation
Ask the class what they think about placing images in their Web pages. Wouldn’t it be coo
images can be attached in HTML documents? We could attach our favorite pictures or pa
and it would make the website a lot more attractive. We can even use images as backgro
The only question left would be, “How?” State that today’s lesson would tackle that proble
after the discussion, the learners will then be able to attach images of their choice to their
4. Lesson Proper
Write the background values discussed and their properties on the board. Show the slide
HTML code with background values. Explain and relate it with the background values writ
the board. Do the same with image attributes.
Display the five JPEG images when discussing JPEG. Do the same with the other image
formats.
APPLICATION
Divide the class into five groups. Distribute the images displayed earlier to each group, givin
one image for each format. Using the code in the book, each group will attach the images as
to them in an HTML document. Use the commands discussed to make the document more c
1. Edit a text file and save it as a Web page. There are 31 errors in the file. It contains an
style sheet, a background image that repeats, and eight pictures.
2. Create a Web page that utilizes an internal styleCrop.
sheet and show
thumbnails together with the original pictures. (Thumbnails
4. Click and dragarethe cropping handles.
small versions of the images or Web pages to be displayed.)
NOTE: When putting thumbnails on a
that they be of the same size. You will
right of the window) the dimensions of
can control the width and height.
Directions for cropping an image using Microsoft Office Picture Manager:
• When you are done cropping the
1. Open the folder that contains images. Make a copy of it in the
on the task pane.
same folder, then rename it (e.g., ‘croppingtiger’ if the original file is
‘tiger’). • If you are satisfied with the cropp
save it. If not, right-click the image,
2. Right-click the image, then select Open With. From the submenu,
Changes. This will undo the chang
click Microsoft Office Picture 6
Manager. 1
6
NOTE: Instead of doing2 step 2, you may simply double-click the
image since the default Windows® program for opening images
Answer
: is Microsoft Office Picture Manager.
3. From the Microsoft Office Picture Manager toolbar, click the Picture
<html><head><title>Activity No. 4</title> <style
type="text/css"></style></head><body> <p><br />Coc
Sleepy Creature Collection<br /><br /><br /></p>
<img src="Cliparts/lioncouple.jpg" alt="Can you feel the lov
/><br /><br /><br />
<img src="Cliparts/elks.jpg" alt="elks?" /><br /><br
/><br />
<img src="Cliparts/birds.jpg" alt="green and sleepy" /><br /
/><br />
&nbsp
src="Cliparts/orangutan.jpg" alt="see no monkey" /><br /><br /><br />
<img src="Cliparts/tiger.jpg" alt="looking for cover" /><br /><
/>
<img src="Cliparts/bfly.jpg" alt="single doze" /><br /><br
/><br />
<img src="Cliparts/lioncubs.jpg" alt="talk about hanging from
/><br /><br />
<img
src="Cliparts/ephants.jpg" alt="cropped elephants" width="250" /><br /><br /><br />
<hr /></body></html>
EVALUATION
Give part A of the Measure section as a quiz.
SYNTHESIS
1. How can you alter an image’s size in HTML? 2. What are GIFs and JPEGs? How
about animated GIFs?
ASSIGNMENT
Identify the tags for the following table properties:
• Table row
• Table data
• Caption
• Colspan
• Rowspan
• Cellpadding
• Cellspacing
ANSWER KEY
Evaluation
A.
1. The main disadvantage is that the image can be distracting or

annoying to someone who tries to read information on the same page. (Other answer
vary, depending on the student.)
2. GIF (Graphics Interchange Format) can be transparent or animated

and supports only 256 different colors. JPEG (Joint Photographic Experts Group) can
transparent or animated and it supports 16 million different colors.
3. Yes, because width and height attributes specify the dimension of

the image.
63
6 4. <style> </style> tags are use for inserting a style sheet.
4
5. Background-image
6. The src attribute (src is an abbreviation for source).
7. The width attribute specifies the image’s width.
8. The height attribute specifies the image’s height.
9. GIF supports only 256 different colors.
10. <embed> tag
B.
1. b
2. e
3. a
4. g
5. d
6. h
7. c
8. j
9. f
10. i
C. Answers may vary.
LESSON 7 PROCESSING
ONLINE FORMS
LESSON OUTCOMES
1. Describe the parts and functions of a typical online form. 2. Create online forms that
cater to the demands of the users. 3. Process online forms
65
66
LECTURE
• How can online forms help the user and the server?
B. Content Standard
• Identify different functions of online forms.
C. Topic Outline
• Online Forms
• Content
• Input Fields
• Submit Query and Reset Buttons
• Processing Forms
D. Performance Standard
Create a simple online form.

Develop creativity and technical skills in developing online forms.
G. Methodology
When the user clicks the [Submit] button, the data of the form are sent to another file. The
for action is something that tells the browser the location of that file that will process the d
two values for the method attribute define one of two ways the data from the form are sen
file.
2. Review
Let the learners recite individually. Ask them to enumerate and describe the five dynamic
elements.
3. Motivation the efficiency of interactivity between both
maintaining
Ask the class if they had ever filled out an autograph the goal of the server to deliv
book. What
user. book? Write
questions would they like to appear on that autograph
their answers on the board. The following items would most likely
appear on the list on the board:
• Name APPLICATIO
• Birthday N
• Address A. Engagement Activity
• Cell phone number
Divide the class into four groups. The class
• Favorite color
wherein each group will classify them appro
• Favorite food check boxes.” to “Each group will be given a
• Favorite actor/actress classify them appropriately into radio boxes
• 4. Lesson
• Spicy food
Proper
• Four-legged pets
Discuss the topics as they appear in the lesson. Refer to the •slide of complete
Computer games
HTML code when discussing the following topics:
• Christmas presents
• Text fields 6
7
• Radio buttons
6
• Check boxes 8
• Text areas
• Select fields
The learners will continue working on their w
• Submit and reset buttons online form for a Web page which is about th
STATE: Online forms help the user and server at the sameInternet.
time by increasing
The outputs of the learners may vary.
EVALUATION
Give Part B of the Measure as a short quiz.
SYNTHESIS
1. What are online forms? 2. What is spamming? 3.

What is Web server?
ASSIGNMENT
Give examples of new Web technologies. Give examples of dynamic Web elements. ANSWER
KEY
Evaluation
A. 1. The Submit Query button allows users to submit information to the

webmaster, while the Reset button resets the form back to its default values.
2. A drop-down menu is created using select fields from which the user can
access information from a particular list.
3. Radio buttons are used when you want the user to select only one option from a list. Check
are used when you want to let the user select more than one option from a number of choices. B
buttons are similar in that you need to set the value of type attributes for both.
4. Online form
5. Text field .
6. Radio button 1. i 6. f
7. Check box 2. a 7. h
8. Text areas 3. b 8. g
9. Select field 4. e 9. c
10. Submit query button 5. j 10. d
B
<textarea cols=”40” rows=”10” name=”message”>T
C. 1. First Name: <input type=”text” name=”fname”
box</textarea>
size=”20” /> 4. <input type="file" name="forUpload" />
2. <input type="radio" name="fruit" value="mango" /> mango<br
5. Password: /> type="password" name="pw
<input
<input type="radio" name="fruit" value="banana" /> banana<br />
maxlength="8">
<input type="radio" name="fruit" value="apple" /> apple<br /> 6
9
3. Message:<br />
70
LESSON 8 MAKING
DYNAMIC WEBPAGES
LESSON OUTCOMES
1. Add more life to their pages by following the markups provided in the
lesson. 2. Explain the advantages of new technologies. 3. Apply JavaScript
commands.
LECTURE
• How can I create an interesting Web page with dynamic elements?
• Acquire a deeper understanding of ways to creating dynamic Web pages using some Web
technologies.
C. Topic Outline
• Web Technologies
• Web Tricks
• Determine usefulness of Web technologies.
• Explain advantages of Web technologies.
• Utilize JavaScript commands in creating dynamic Web pages.

Develop creativity and critical thinking skills in creating dynamic Web pages applying JavaSc
commands.
individual and group assessments.
G. Methodology
• Examples of new Web technologies are Flash and JavaScript.
• Examples of dynamic Web elements are cycling banner ads, marquees, status bar
messages, and CSS tooltips. 2. Review
Let the learners recite individually. Ask them to:
• Explain the use of online forms.
• Enumerate the parts of the form needed to incorporate in an HTML document.
71
72
3. Motivation
Ask the class of the different elements that make a web page interesting. Write their an
on the board. If the list includes “dynamic elements,” explain the lesson on the context o
dynamic Web elements. If the list does not include “dynamic elements,” state that Web
are capable of having dynamic elements and proceed to explain through the context of
lesson.
4. Lesson Proper
Before discussing the lesson, turn on the computer, connect to the Internet, and run the Google Chrom
discussing Flash, use the Google search engine to search for a website with Flash eleme
discussing Java, use the same search engine to search for a website with JavaScript elem
Use these sites for demonstration and reference. Discuss the rest of the lesson using the
to demonstrate each subtopic.
APPLICATION
Divide the class into eight groups. Assign each dynamic Web element to two groups. The
create an HTML code demonstrating the assigned dynamic Web element. This is an open
activity.
• Work on their website project.

• Integrate a JavaScript game and other Web tricks in their Web pages.
In the interactive activity you will find the Web page with links and descriptions of the free Ja
games by clicking on the buttons noted.
EVALUATION
Let the learners answer the Measure part of the book on pages 105-106.
SYNTHESIS
1. What is JavaScript? 2. What are the Web tricks you have tried putting on your pages?
ASSIGNMENT
What are meta tags? What are their uses?
ANSWER KEY
Evaluation
A. 1. Sample answer: You can effectively use Web multimedia when you want to
add more interactivity to your site so that it’ll be more attractive.
2. A plug-in is a hardware or software module that adds functionality to a

existing system.
3. Sample answer: with this script, a scrolling message will be displayed on

your browser’s status bar.
<script type="text/javascript"> 
</script>
B.
1. d
2. b
3. e
4. f
5. g
6. c
7. j
8. h
9. a
10. i
C. 1. <embed </embed>
src="animation.swf"
2. alert dialog boxes, pop-up windows, animatio
quality="high"
cookies, hit counter, calculator, form
width="800px" height="200px" handler
type="application/x-shockwave-flash" 3. <a href="http://www.google.com" onMouseOv
Google'; return true">Search the Web</a>
pluginspage="http://www.macromedia.com/go/getflashplayer">
4. <a href="http://www.google.com" onMouseOver="window.status='Go to Date(); var
var currentDate = new
month
Google'; return true" onMouseOut="window.status=''; = currentDate.getMonth();
return true">Search
the Web</a>
var TodaysDate = currentDate.getDate() + "/" + (z[m
5. <script style="text/JavaScript"> (currentDate.getFullYear());

"5","6", </script>
"7", "8", 7
"9","10","11","12"); 5
76
LESSON 9 OTHER WEB

MATTERS
LESSON OUTCOMES
1. Describe meta tags and their relationship with search engines. 2. Upload files and submit
to various search engines. 3. Define Web advertisement. 4. Explain how search engines
work. 5. Define and explain intellectual property rights (IPR). 6. Learn usability tips for use in
their own Web pages.
LECTURE
• How is information disseminated on the Web?
• How do search engines work?
• Recognize other Web concepts relevant in creating Web pages.
C. Topic Outline
• Meta Tags
• Uploading Files
• Submitting Your Site for Crawling
• Web Advertisement
• Intellectual Property Rights (IPR)
• Usability Tips
• Describe meta tags and their relationship with search engines.
• Explain Web advertisement and how search engines work.
• Define and explain intellectual property rights.

Manifest a deeper knowledge of Web design and the application of Web design concepts.
individual and group assessments.
G. Methodology
Meta tags do not affect either the form or content of a Web page although they hold inform
about its contents. They are used by search engines to identify what kind of information is
Web page.
77
78
2. Review
Let the learners recite individually. Ask them to;
Differentiate internal from external links.
Explain the role of hyperlinks in the success of the Web.
3. Motivation
Ask the class if they have ever used a search engine. State the following and for each item
them the probable keywords to use when using the search engine:
• Jose Rizal as the national hero of the Philippines
• The top five finalists for MTV Philippines Best Rock Group of 2006
• The current average price list of computer hardware in the Philippines
• Movies that are now showing in Metro Manila
Write their answers on the board beside each item. Ask them if they have any idea how se
engines work. Let some learners explain their opinions. State that aside from hyperlinks, s
engines also contribute to the success of the Web as an information dissemination tool.
4. Lesson Proper
Divide the class into four groups. Look for websites that offer free web hosting. Sign-up an
your website to this Web hosting service. Make sure that everything is working as expect
APPLICATION
Divide the class into four groups. Assign each dynamic Web element to two groups. They wi
create an HTML code demonstrating the assigned dynamic Web element. This is an open bo
activity.
The learners will do the following
activities: ANSWER
• Put a written/artistic work in their websiteKEY
and use meta tags.
• Upload a splash page for their
Evaluatio
website.
n
• Create or download a banner
ad. A. 1. passing it as one's
The outputs of the learners will vary. A sample splash page is illustrated in
own.
the activity page.
2. AdSense earns the website owner revenue th
exposure in the
website.
EVALUATIO
3. Website usability refers to the perceived effic
N
ite; user-
Let the learners answer the Measure part of the friendliness
book on pages 113-
114.
4. Here are some of the usability tips presented
• Cookie crumbs in navigation

SYNTHESI • Arrange how elements appear in a pag
S • Contrast between text and background
Ask the following questions for discussion • Put the Submit button on the left, and C
7
purposes:
9
1. Can you give the website 8 sections discussed in the
book? 0
• Retain form data
2. What is the typical size of a banner ad?
• Create a custom, Not Found (404) page
3. What is
IPR?
• Consistent look throughout the web pages.
• Minimize Flash
• Make an FAQ page.
• Always give the user a way out
5. An example of this is Geocities.yahoo.com

B.
1. g 6. j
2. i 7. f
3. c 8. a
4. h 9. b
5. e 10. d
C. Suggested answers:
Philippines, travel, tour, package tour, Philippine hotels, Philippine tourism, best Philippine
destinations, travel agency, visit Philippines, best travel deals.
D. Suggested answers:
1. http://www.webhosting.info/webhosts/tophosts/Country/PH
2. http://www.bayanhosting.com/
3. http://www.webfocus.ph/
4. http://www.mabuhayhosting.com/
5. http://www.hosting.ph/
6. http://www.philwebservices.com/
E. Kazanidis, Ortiz, Amante, De Sagun, Caro. (2012). Web Scripting 2nd Edition. Philippines:
TechFactors, Inc.

ICTWS - (18.3.2) Web Scripting Learning Plans - SJE

Uploaded by

Document Informationclick to expand document informationWeb Scripting Learning Plan

Document Informationclick to expand document information

Copyright:

Available Formats

ICTWS - (18.3.2) Web Scripting Learning Plans - SJE

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ICTWS - (18.3.2) Web Scripting Learning Plans - SJE

Uploaded by

Copyright:

Available Formats

1

E-mail Address: info@techfactors.com

Second printing of the third edition, 2019

Authors: Arturo L. Jacinto, Jr., Florida V. Ortiz, and Jasmin D. Niguidula,

Artist: Joseph Timothy S.

Exclusively distributed by TechFactors,

28 L2 WRITING OUT THE

45 L4 EXPERIMENTING WITH FONTS AND

53 L5 WORKING WITH THE BOX

81 L10 GETTING STARTED WITH

91 L12 JAVASCRIPT OPERATORS

96 L13 CONTROLS AND LOOPS

101 L14 FUNCTIONS AND EVENTS

107 L15 JAVASCRIPT OBJECTS

112 L16 JAVASCRIPT INDEPENDENT OBJECTS

MODULE WEEK NO. LESSON NO. TOPIC

1 1 The Webpage Untangled

2 2 Writing out the Webpage

3 3 Planning your Website

4 4 Experimenting with Fonts and Colors

5 5 Working with the Box Model

6 6 Experimenting with Multimedia

8 8 Making Dynamic Webpages

9 9 Other Web Matters

10 10 Getting Started with Javascript

11 11 Javascript Syntax Rules and Variables

13 13 Controls and Loops

14 14 Functions and Events

16 16 Javascript Independent Objects

• Create objects using JavaScript.

EVALUATION Number of Learners within Mastery Level

Number of Learners Needing Remediation/Reinforcements

1. Understand the basic concepts involved in webpage design. 2. Create a webpage. 3.

E. Intended Lesson Outcome

1. How can you remember the different tags in HTML?

<link rel="stylesheet" type="text/css" href="style1.css" />

<title>Activity No. 1</title>

According to the Glossary of Poetic Terminology (article) by Paul Williams on AuthorsD

Enumerate at least six shortcut keys for word processing

LESSON 2 WRITING OUT

E. Intended Lesson Outcome

Browser Display HTML Code

<h1>BOOK SECOND.-- EPONINE</h1>

<h4>THE LARK'S MEADOW</h4>

<h1>BOOK NINTH.--WHITHER ARE THEY

<h1>BOOK FOURTEENTH.--THE GRANDEURS OF

<h4>THE FLAG: ACT FIRST</h4>

<ol type="I">BOOK THIRTEENTH.- -MARIUS ENTER

<li>From the Rue Plumet to the Quartier Saint-Denis</li>

<li>An Owl's View of Paris</li>

<li>The Extreme Edge</li>

<li>Unite: Blanchard: Arbre- Sec. 6.</li>

<li>Barra. Soize. Salle-au- Comte.</li>

<li>Kosciusko. Aubry the Butcher?</li>

<li>Right of revision. Dufond. Four.</li>

<li>Fall of the Girondists. Derbac. Maubuee.</li>

<li>Sovereignty of the people. Michel. Quincampoix. Sword.</li>

Comme elle sent bon! Quels cheveux a

Son bonnet charmant est a peine

As we stroll the faubourgs through,<br />

Roses are pink, corn-flowers are blue,<br />

I love my love, corn-flowers are blue."

2. © encodes the copyright.