PROGRAMMING (.

NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

Design and webpage with HTML and CSS

Develop basic HTML document usingmHTMP5 and CSS 3 syntax
Illustrate different business domain features
TLE_ICTP.NET11-12PPHJCIIf-i-29
Learning Context (Brief discussion of the lesson, cite examples)

HTML, CSS, & JAVASCRIPT

HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript are
three web developing tools that run the web. They are quite related, but they perform specific
tasks. As an aspiring web developer, it will be quite a long journey. The gist of the three tools
are the following:

 HTML is for adding meaning to raw content by marking it up.

 CSS is for formatting that marked up content.
 JavaScript is for making that content and formatting interactive.

Imagine HTML as the abstract text and images displayed in a web page, CSS as the page
that actually gets displayed, and JavaScript as the behaviors that can manipulate both HTML
and CSS.

html

head body

h1 p

For example, you can insert a text as a paragraph with this HTML:

<p id='some-paragraph'>This is a paragraph.</p>

Then, you can set the size and color of that paragraph with some CSS:
JAVASCRIPT
HTML
CSS
p{
font-size: 20px;
color: blue;
}
And you can make it interactive that when the user clicks it with some JavaScript

1|Page
 PROGRAMMING (.NET TECHNOLOGY)

var p = document.getElementById('some-paragraph');
p.addEventListener('click', function(event) {
p.innerHTML = 'Click me!';
});

HTML, CSS, and JavaScript are totally different languages, but they all refer to one another in
some way. Most websites rely on all three, but the appearance of every website is determined
by HTML and CSS. That makes this module a great starting point for your web development
journey.

Why do we need to learn HTML, CSS and JavaScript?

Learning and enhancing your skill HTML, CSS, and JavaScript is only a requirement being a
web developer. These are some of other skills that you need to run a website:
 Organizing HTML into reusable templates
 Standing up a web server
 Moving files from your local computer to your web server
 Reverting to a previous version when you screw something up
 Pointing a domain name at your server
Dealing with these difficulties involves setting up different “environments” to organize your
files and handle the building/deploying of your website. All of this is perpendicular to the
actual HTML, CSS, and JavaScript code that make up a website. This module focuses
entirely on the languages of HTML and CSS.

HTML

Web
Development
CSS

JAVASCRIPT

What is a Domain Name?

A domain name is the website’s equivalent of a physical address. Its like when a GPS needs
a street address or a zipcode to provide directions, a web browser needs a domain name to
direct you to a website.

There are two main elements of a domain. For example, the domain name Youtube.com

2|Page
 PROGRAMMING (.NET TECHNOLOGY)

consists of the website’s name (Youtube) and the domain name extension (.com). When a
company (or a person) purchases a domain name, they’re able to specify which server the
domain name points to.

Every website that you visit effectively consists of two main elements: a domain name and a
web server.

A web server is a physical machine that hosts the files and the databases that your website
is made from and sends them out to people across the internet when they visit your site from
their machine.
The domain name is what people type in to access your site, and it points the web browser
to the server that stores those resources. Without a domain name, people would need to
remember the specific IP address of your server — and that’s just not going to happen.

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1

Direction: List down 5 famous websites you always visit and write your purpose why you visit those
site. Example: Youtube- to watch my favorite vlogger

ACTIVITY 2

Draw the overview of the computer system.

computer

H______ S______
__ ___

Input O______ P_________ S___________ System A_____________ P_____________

Java

ACTIVITY 3

Direction: Write the domain extension of the following domain. Number 1 is done for you.

.COM 1. Commercial
____________2. Organization
____________3. Network
____________4. Education
____________5. Government

3|Page
 PROGRAMMING (.NET TECHNOLOGY)

ACTIVITY 4

Direction: Write the domain extension of the following domain. Number 1 is done for you.

Write a short essay to discuss the importance learning HTML, CSS and JavaScript. Are these three
applications the same? Why? (not less than 150 words)

ACTIVITY 5

Direction: Choose the best answer that describes the following sentences. Number 1 is done
for you.

domain name HTML JavaScript

web server CSS website

_____________1. Three tools that run the web

_____________2. Three tools that run the web
_____________3. Three tools that run the web
_____________4. The website’s equivalent of a physical address
_____________5. is a physical machine that hosts the files and the databases that your website
Scoring Rubric (If necessary)

Rubric for essay:

Focus/ Main Point (10 points)

Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.internetingishard.com/html-and-css/introduction/
 https://www.hostinger.ph/tutorials/what-is-a-domain-name

Name of Learner

4|Page
 PROGRAMMING (.NET TECHNOLOGY)

Grade level and Section

Date

Design and webpage with HTML and CSS

Develop basic HTML document using HTMP5 and CSS 3 syntax
TLE_ICTP.NET 11-12PPHJCIIf-i-29
Learning Context (Brief discussion of the lesson, cite examples)
What is CSS?
• Cascading Stylesheets
• Not a programming language
• Stylesheet/styling language
• Used for web layout and design
What do we need to start?
1. A web browser (google chrome, mozilla firefox, safari, edge)
2. A text editor (sublime, atom.io, brackets, notepad++)
3 Methods for adding CSS
• Inline CSS
• Internal CSS
• External CSS
CSS Selectors
Colors in CSS
• Color names
• Html color names
• Hexadecimal
• The box model
• Margin, padding and shorthand
• Positioning in CSS
• Static
• Relative
• Absolute
• Fixed
• Initial
• Inherit

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1
DIRECTION: WRITE AN HTML TAG FOR THE FOLLOWING

1. Change the color of all <p> elements to "red".

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>

5|Page
 PROGRAMMING (.NET TECHNOLOGY)

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
2. Change the color of the element with id="para1", to "red".
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p id="para1">This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
3. Set the background color for the page to "linen" and the background color for <h1> to
"lightblue".

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
ACTIVITY 2
ESSAY
1. Try to visit a website and identify the CSS tags used in the website.
2. Rate the website from 1-10 and explain your rating
3. What properties of colors should be used in making a webpage more
presentable? Explain your answer..

ACTIVITY 3

Direction: Write the letter of the correct answer.

1. What does CSS stand for?

A. Creative Style Sheets
B. Computer Style Sheets
C. Colorful Style Sheets
D. Cascading Style Sheets
2. What are style sheets used for?

6|Page
 PROGRAMMING (.NET TECHNOLOGY)

A. To define how HTML elements are displayed.

B. To define how Word Documents look.
C. Are used with spreadsheets.
D. None of the above.
3. Style sheet should be placed in a separate file?
A. True
B. False
4. Cascading style sheets are used to format the following?
A. Colors.
B. Fonts.
C. Lists.
D. All of the above
5. What is the proper syntax of an element in a style sheet file?
A. HTML tag name, beginniing curly brace, property, value, semicolon, ending curly brace.
B. HTML tag name, beginning parenthesis, property, value, comma, ending parentheses.
C. HTML tag name, property, value and semicolon.
D. HTML Property and value

Scoring Rubric (If necessary)

Rubric for essay:
Focus/ Main Point (10 points)
Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection
I have learned in this activity that ______________________________________________________
________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.youtube.com/watch?v=yfoY53QXEnI
https://study.com/academy/lesson/pseudocode-definition-examples-quiz.html

7|Page
 PROGRAMMING (.NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

BASICS OF JAVASCRIPT (VARIABLES AND DATATYPES)

Create HTML5 document using advanced techniques with JavaScript and CSS3
TLE_ICTP.NET 11-12PPHJCIIj-IIIa-d-30
Learning Context (Brief discussion of the lesson, cite examples)
What is JavaScript? JavaScript is a lightweight, interpreted programming language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform.
Advantages of JavaScript
• Less server interaction: You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
• Immediate feedback to the visitors: They don't have to wait for a page reload to see if
they have forgotten to enter something.
• Increased interactivity: You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
• Richer interfaces: You can use JavaScript to include such items as drag-anddrop
components and sliders to give a Rich Interface to your site visitors.
JAVASCRIPT – SYNTAX
<script ...>
JavaScript code
</script>
The script tag takes two important attributes:
• Language: This attribute specifies what scripting language you are using. Typically, its
value will be javascript. Although recent versions of HTML (and XHTML, its successor) have
phased out the use of this attribute.
• Type: This attribute is what is now recommended to indicate the scripting language in
use and its value should be set to "text/javascript".
JavaScript Variables JAVASCRIPT – OPERATORS
• Arithmetic Operators
• Comparison Operators
• Logical (or Relational) Operators
• Assignment Operators
• Conditional (or ternary) Operators

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1
DIRECTION:
1. Create a variable called carName, assign the value Volvo to it.
var ____ = "______";
2. Create a variable called x, assign the value 50 to it.
var ______ =________;
3. Multiply 10 with 5, and alert the result:
alert(10 ____ 5);
4. Get the value "Volvo" from the cars array.
var cars = ["Saab", "Volvo", "BMW"];

8|Page
 PROGRAMMING (.NET TECHNOLOGY)

var x = ________;
5. Use the length property to alert the length of txt.
var txt = "Hello World!";
var x = _________;
alert(x);

ACTIVITY 2

Design an interactive webpage on a yellow paper. The webpage should be an information

sheet of a student

ACTIVITY 3

Direction: Write the letter of the correct answer.

1. What is the HTML tag under which one can write the JavaScript code?
A) <javascript>
B) <scripted>
C) <script>
D) <js>

2. Which of the following is the correct syntax to display “GeeksforGeeks” in an alert

box using JavaScript?
A. alertbox(“GeeksforGeeks”);
B. msg(“GeeksforGeeks”);
C. msgbox(“GeeksforGeeks”);
D. alert(“GeeksforGeeks”);
3. What is the correct syntax for referring to an external script called “geek.js”?
A. <script src=”geek.js”>
B. <script href=”geek.js”>
C. <script ref=”geek.js”>
D. <script name=”geek.js”>
4. Which of the following is not a reserved word in JavaScript?
A. interface
B. throws
C. program
D. short
5. Predict the output of the following JavaScript code.

A. sf
B. ks
C. s
D. k

Scoring Rubric (If necessary)

9|Page
 PROGRAMMING (.NET TECHNOLOGY)

Rubric for Flowchart:

Focus/ Main Point (10 points)

Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.youtube.com/watch?
v=hdI2bqOjy3c&list=RDCMUC29ju8bIPH5as8OGnQzwJyA&index=2
 https://www.w3schools.com/

10 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

BASICS OF JQUERY
Describe the use of jQuery to simplify code that uses many common JavaScript APls
TLE_ICTP.NET 11-12PPHJCIIj-IIIa-d-30
Learning Context (Brief discussion of the lesson, cite examples)
What is jQuery?
 jQuery is a JavaScript Library.
 jQuery greatly simplifies JavaScript programming.
 jQuery is easy to learn.

Why learn jQuery?

Write less, do more:
◦ $("p.neat").addClass("ohmy").show("slow");
Performance
Plugins
It’s standard

Hide, Show, Toggle, Slide, Fade, and Animate. WOW!

jQuery hide()

Demonstrates a simple jQuery hide() method.

jQuery hide()
Another hide() demonstration. How to hide parts of text.

With jQuery you can fade elements in and out of visibility.

jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.

jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.

jQuery fadeToggle()
Demonstrates the jQuery fadeToggle() method.

jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.

The jQuery slide methods slide elements up and down.

slideDown()
slideUp()
slideToggle()

With jQuery, you can create custom animations.

$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});

11 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1
DIRECTION: Fill in the blanks. Write the correct javascript code for the following:

1. Use the correct selector to hide all <p> elements.

$("_____").hide();
2. Use the correct selector to hide all elements with class="test".
$("_____").hide();
3. Use the correct selector to hide all elements with an href attribute.
$("_____").hide();
4. Use a jQuery method to slide up a <div> element.
$("div")._____();
5. Use the animate() method to move a <div> element 250 pixels to the right.
$("div").animate({______: '________'});

ACTIVITY 2
DIRECTION: Write the letter of the correct answer.
1. What is the HTML tag under which one can write the JavaScript code?
A) <javascript>
B) <scripted>
C) <script>
D) <js>
2. Which of the following is the correct syntax to display “GeeksforGeeks” in an alert box
using JavaScript?
A. alertbox(“GeeksforGeeks”);
B. msg(“GeeksforGeeks”);
C. msgbox(“GeeksforGeeks”);
D. alert(“GeeksforGeeks”);
3. What is the correct syntax for referring to an external script called “geek.js”?
A. <script src=”geek.js”>
B. <script href=”geek.js”>
C. <script ref=”geek.js”>
D. <script name=”geek.js”>
4. Which of the following is not a reserved word in JavaScript?
A. interface
B. throws
C. program
D. short
5. Predict the output of the following JavaScript code.

A. sf

12 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

B. ks
C. s
D. k
ACTIVITY 3

Direction: Write the letter of the correct answer.

1. Which of the following is correct?

a. jQuery is a library
b. jQuery is a JSON library
2. jQuery uses CSS selectors to select elements?
a. True
b. False
3. Which sign does jQuery use as a shortcut for jQuery?
a. The % sign
b. The $ sign
c. The @ sign
4. Look at the following selector: $("div"). What does it select?
a. All div elements
b. The first div elements
5. Is jQuery a library for client scripting or server scripting?
a. Server scripting
b. Client scripting

Scoring Rubric (If necessary)

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.w3schools.com/jquery/default.asp

13 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

FORMS WITH INPUT TYPES

Create forms that use the new HTML5 input types
TLE_ICTP.NET 11-12PPHJCIIj-IIIa-d-30
What is an HTML Form?
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
Identify the HTML Form Attributes
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

The Target Attribute

The target attribute specifies where to display the response that is received after submitting the form.

<form action="/action_page.php" target="_blank">

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with
method="post").

<form action="/action_page.php" method="get">

Explain the use of HTML Form Elements

The HTML <form> element can contain one or more of the following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

Enumerate the different HTML Input Types

Here are the different input types you can use in HTML:

1. <input type="button">

14 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

2. <input type="checkbox">
3. <input type="color">
4. <input type="date">
5. <input type="datetime-local">
6. <input type="email">
7. <input type="file">
8. <input type="hidden">
9. <input type="image">
10. <input type="month">
11. <input type="number">
12. <input type="password">
13. <input type="radio">
14. <input type="range">
15. <input type="reset">
16. <input type="search">
17. <input type="submit">
18. <input type="tel">
19. <input type="text">
20. <input type="time">
21. <input type="url">
22. <input type="week">
Explain the Use of HTML Input Attributes
The value Attribute
The input value attribute specifies an initial value for an input field:
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text
from it).

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1

DIRECTION:

1. In the form below, add an input field with the type "button" and the value "OK".

2. In the form below, add two radio buttons, both with the name "gender".

15 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

3. Add a submit button, and specify that the form should go to "/action_page.php".

4. In the form below, add an empty drop down list with the name "cars".

5. In the form below, add a submit button with the value "Submit Form".

ACTIVITY 2
DIRECTION: Write the letter of the correct answer.
1. The two most important attributes of a form.
A. Id and action
B. Class and method
C. Action and method

2. Defines the caption to the fieldset tag.

A. <legend>
B. <h1>
C. <caption>

3. A label's for attribute should match the input's ______.

A. Type
B. Id
C. Name
4. The action attribute tells the form?
A. How to send the form’s data
B. Where to send the form’s data
C. When to send the form’s data
5. Creates blank text field, but shows the text as dots.
A. Type="text"
B. Type="hidden"

16 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

C. Type="password"

ACTIVITY 3

Direction: Answer the following questions.

1. Enumerate and explain the different HTML Form Elements (11 items)
2. Enumerate and explain the different input types (22)

Scoring Rubric (If necessary)

Rubric for Essay:

Focus/ Main Point (10 points)

Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.youtube.com/watch?v=MKSQYsLLFEo
 https://www.webfx.com/blog/web-design/new-html5-form-input-types/
 https://www.w3schools.com/html/html_forms.asp

17 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

USING DRAG-AND-DROP-AND-FILE APIS

Create interactive user interface and add offline support for Web applications
TLE_ICTP.NET 11-12PPHJCIIIh-j-IVa-d32
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different
location.

The numbers in the table specify the first browser version that fully supports Drag and Drop.

HTML Drag and Drop Example

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336"

height="69">

</body>
</html>

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true">

What to Drag - ondragstart and setData()

Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to

18 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the
default handling of the element.

This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()

Do the Drop - ondrop

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1

DIRECTION: Write the code for the following.

1. Make an image draggable
2. Write the method on what element to drag
3. Write the method for the ondragover event
ACTIVITY 2

DIRECTION: Write TRUE if the statement is CORRECT and FALSE if the statement is not.
1. Any element in HTML can be dragged and dropped
2. Dragging means when you "grab" an object and drag it to a different location.
3. Only google chrome can support the drag and drop API
4. To make an element draggable, you will set it to FALSE
5. By default, data/elements cannot be dropped in other elements
.ACTIVITY 3

Direction: Write a simple code on dragging an image in a webpage

Scoring Rubric (If necessary)

19 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Rubric for code:

Focus/ Main Point (10 points)
Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.youtube.com/watch?v=C22hQKE_32c
 https://www.w3schools.com/html/html5_draganddrop.asp

20 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

Incorporating Audio And Video Into A Web Application

Incorporate audio and video into a Web application.
TLE_ICTP.NET 11-12PPHJCIIIh-j-IVa-d32
The HTML <video> element is used to show a video on a web page.
The HTML <video> Element
To show a video in HTML, use the <video> element:

How it Works
The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page
might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support
the <video> element.
HTML <video> Autoplay
To start a video automatically use the autoplay attribute:

Browser Support

HTML Video Formats

HTML Video - Media Types

21 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

HTML Video - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

HTML Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and
<audio>
<track> Defines text tracks in media players

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1

DIRECTION: Write an HTML tag for the following.

1. Write the tag to show a video in HTML

2. Write the tag to start a video automatically

4. public class Test{

3. public class Test{ public static void main(String[] args) {

int i = 0;
public static void main(String[] args) { int j = 1;
int i = 100; if(!i && j)
int j = 10; System.out.println("1");
System.out.println( i%j ); else
} System.out.println("2");
} }
A. 10 }
B. 0 A. 2
C. Compilation error B. 1
D. None of the above C. Compilation error

ACTIVITY 2
DIRECTION: Write the letter of the correct answer.
1. How do you embed video and audio content using HTML5 features?
A. Using Flash or Silverlight plugins
B. Using JavaScript
C. Using CSS

22 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

D. Using the video and audio elements

2. In HTML Audio/Video DOM, __________ sets or returns whether the audio/video
should be loaded when the page loads.
A. preload
B. autoplay
C. buffered
D. controller
3. Which of the following is not a HTML5 tag?
A. <video>
B. <source>
C. <track>
D. <slider>
4. Which of the following HTML Video – Media Type is not supported in IE?
A. WebM
B. MP4
Ogg
C. MP4 FLAC
5. Defines multiple media resources for media elements, such as <video> and <audio>
A. <source>
B. <track>
C. <video>
D. <img>
ACTIVITY 3

Direction: Answer the following.

1. List down the video formats: that is supported by the following browser
 Edge
 Chrome
 Firefox
 Safari
 Opera
2. Enumerate and state the tags used in inserting a video in HTML

Scoring Rubric (If necessary)

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.youtube.com/watch?v=x4r7af2Lcmw
 https://www.w3schools.com/html/html5_video.asp

23 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Name of Learner
Grade level and Section
Date

USING THE GEOLOCATION API

Detect location of the user running a Web application by using the Geolocation API.
TLE_ICTP.NET 11-12PPHJCIIIh-j-IVa-d32
HTML Geolocation API
The HTML Geolocation API is used to locate a user's position.
Locate the User's Position
The HTML Geolocation API is used to get the geographical position of a user.
Browser Support

Using HTML Geolocation

The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a
function to run if it fails to get the user’s location:
Displaying the Result in a Map

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy
properties are always returned. The other properties are returned if available:

24 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Geolocation Object - Other interesting Methods

The Geolocation object also has other interesting methods:

watchPosition() - Returns the current position of the user and continues to return updated position as
the user moves (like the GPS in a car).
clearWatch() - Stops the watchPosition() method.
The example below shows the watchPosition() method. You need an accurate GPS device to test this
(like smartphone):

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1

DIRECTION: Write the syntax for the following using array.

Write TRUE if the answer is correct and FALSE if otherwise

1. The HTML Geolocation API is used to locate a user's position.

2. Mozilla Firefox cannot support the Geolocation API
3. The getCurrentPosition() method is used to return the user's position.
4. the getCurrentPosition() method is used to handle errors
5. To display the result in a map, you need access to a map service, like Google Maps.

ACTIVITY 2
DIRECTION:
Write the following tags for geolocation API and have a screenshot of the webpage view
and send it to your teacher

ACTIVITY 3

25 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Direction: Write a short essay that explains the usefulness of Geolocation API in webpages.

Scoring Rubric (If necessary)

Focus/ Main Point (10 points)

Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 https://www.youtube.com/watch?v=916M64DuRnk
 https://www.w3schools.com/html/html5_geolocation.asp

26 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Learning Tasks (Includes directions/ instructions, exercises, and guide questions if necessary)
*(All key stage (1 - 4) shall have 5 items ONLY Standardized questions based on MELC)
*Illustration and pictures shall adhere with the IPR guidelines.

ACTIVITY 1

DIRECTION: Write the syntax for the following using array.

1. What is the correct function of a for loop?

A. To check for conditions after executing the statements
B. To be a control flow statement that allows code to be executed repeatedly based on a
given Boolean condition.
C. To determine a boolean variable as true or false.
D. To consume the initialization, condition and increment/decrement in one line thereby
providing a shorter, easy to debug structure of looping.

2. What is an Increment/ Decrement?

A. It initializes the variable in use.
B. It is used for updating the variable for next iteration.
C. It marks the start of a for loop.
D. It is used for testing the exit condition for a loop.
 

3. What is the output of the following code segment?

A. Value of x:2
Value of x:3
Value of x:4

B. Value of x:1
Value of x:2
Value of x:3

C. Value of x:2
Value of x:2
Value of x:4

D. Value of x:2
Value of x:3
Value of x:3
4. What is the correct function of a while loop?
A. A control flow statement that allows code to be executed repeatedly based on a given
Boolean condition.
B. To consume the initialization, condition and increment/decrement in one line
C. To initialize the variable in use.
D. To check for condition after executing the statements

27 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

ACTIVITY 2
DIRECTION: Write the java code for each of the following
1. Print i as long as i is less than 6.
2. Use the do/while loop to print i as long as i is less than 6.
3. Use a for loop to print "Yes" 5 times:
4. Loop through the items in the cars array.
5. Stop the loop if i is 5.
6. In the loop, when the value is "4", jump directly to the next value.

ACTIVITY 3

Direction: Give an example of a problems and write the three looping statements for each problem.

Scoring Rubric (If necessary)

Rubric for writing a code.

Focus/ Main Point / correctness (10 points)
Organization & Format (4 points )
Originality (4 points)
Neatness (2 points)
Total – 20 points

Reflection

I have learned in this activity that ______________________________________________________

________________________________________________________________________________
________________________________________________________________________________

References for learners

 Programming-Java-NC-III-CG
 www.tutorialspoint.com
 www.w3schools.com

28 | P a g e
 PROGRAMMING (.NET TECHNOLOGY)

Prepared by: AILEEN D. ENRIQUEZ

Name of Writer

For Quality Assurance

Reviewed by:
_____________________________
Learning Resource Evaluator
(Master Teachers, Subject Specialist)

_____________________________ _____________________________
School Head Public School District Supervisor

_____________________________ _____________________________
Education Program Supervisor (Subject) Education Program Supervisor (LRMS)

Approved by:
_____________________________
CID - Chief Education Program Supervisor

29 | P a g e