Computer Programming (.

Net) – Grade 12
Learning Activity Sheets
Quarter 1 Week 1

Republic Act 8293, section 176 states that: No copyright shall subsist in any
work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.
Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand
names, trademarks, etc.) included in this activity sheet are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to
use these materials from their respective copyright owners. The publisher and
authors do not represent nor claim ownership over them.

Published by the Department of Education – Schools Division of Tacloban City

Schools Division Superintendent: Mariza S. Magan
Assistant Schools Division Superintendent: Edgar Y. Tenasas

Development Team of the Activity Sheet

Writer: Rosario Ali A. Uyvico

Evaluator: Almer H. Bugal
Management Team:
CID Chief: Mark Chester Anthony G. Tamayo
Division EPS of LRMS: Gretel Laura M. Cadiong
Division Learning Area EPS: Evelyn P. Malubay

Department of Education - Region No. VIII – Schools Division Office of Tacloban City
Office Address: Real St., Tacloban City

0 | Q1 W1
 COMPUTER PROGRAMMING (.NET) GRADE 12
LEARNING ACTIVITY SHEET
Quarter 1 Week 1
Name: ______________________________ Year & Section: __________
Learning Activity Sheet No. 1 Date Answered: ___________
Objectives: ( TLE_ICTP.NET11-12PPHJC-IIf-i-29 )
• Develop basic HTML document using HTML5 and CSS3 syntax:
✓ Illustrate different business domain features.
✓ Create and configure an HTML document according to user’s specification.
Materials:
• Computer, Cellphone, Tablet

Let’s kick it off!

Instructions:
- Analyze the pictures below. What can you observe? What does it tell? Write
you answer on the space provided.

This Photo by Unknown Author is licensed under CC BY-ND This Photo by Unknown Author is licensed under CC BY-NC

This Photo by Unknown Author is licensed under CC BY-NC

__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
_________________________________________________________________________________.

1 | Q1 W1
 Are you taking it?
• Are you passionate about website development?
• Do you know what is a website and a webpage and its types?
• Can you identify the building blocks of web development?
• What are the elements of a basic HTML structure?
• How can you create a webpage?

Here’s how it is!

What is a Website?

A website can be defined as a collection or group of several worldwide webpages

that are all connected to each other and can be accessed by visiting a homepage (URL), by
using a browser (Internet Explorer, Mozilla, Google Chrome, or Opera). For example, the
website address of FACEBOOK is − https://facebook.com. (tutorialspoint, Copyright 2021)

Each website has its own URL (Uniform Resource Locator) which is a unique global
web address/Internet address called domain name. A URL comprises of –

URL

Domain name

https://www.facebook.com/index.php
Protocol Subdomain 2nd-Level TLD
Domain (suffix
name name)
Figure 1. URL breakdown Figure 2. URL of DepEd
“https://www.deped.gov.ph”
1. URL (Uniform Resource Locator) - the unique global address of documents and other
resources on the World Wide Web.
2. Protocol - used to access the website; the first part of the URL up until the “:// ” (in this
case https = port 443; http = port 80).
3. Subdomain - an additional part to the main domain name. Subdomains are created to
organize and navigate to different sections of the website. “WWW” – is the most frequent
third-level domain in general.
Example:
www.google.com (www, is the subdomain)
store.website.com (store, is the subdomain)
tacloban.gov.ph (tacloban, is the subdomain)

2 | Q1 W1
4. Second-Level Domain name - Domains of the second level are domains that follow top
levels within the DNS hierarchy.
Example:
nike.com (nike, is the second-level domain name)
deped.gov.ph (.gov, is the country code second-level domain name)
5. Top-Level Domain (TLD) name or domain suffix name - Top-level domains are at the
top of the internet hierarchy of domain names. You’ll see these commonly referred to as
TLDs. There are over thousands of different TLDs available.
Example:
TLD Meaning
.net - Network
.edu - Education
.com - Business
.mil - Military
.gov - Government
6. Directories - a folder in the server that holds this website.
7. Web page document/file – file containing information, written in HTML.
8. Domain name - the central portion of the URL (Example www.google.com).
- The equivalent of physical address, but for the web. domain names are a shortcut to
remembering complicated IP addresses. Without a domain name, you’d have to enter a
full IP address into the browser address bar. Domain names are managed by an
organization known as ICANN (Internet Corporation for Assigned Names and Numbers).
Another type of domain name is, ccTLDs (Country Code Top Level Domain) use just
two letters and are based upon international country codes, such as .us for the United
States, .jp for Japan, .ph for Philippines.

What is a Webpage?
A webpage is a document that is designed to be displayed in a web browser. A
webpage usually contains text and images formatted in HTML. (What-is-What.com)
Webpage are separated into two different types: static and dynamic. Static webpage
are ones that are fixed and display the same content for every user, usually written
exclusively in HTML. A dynamic webpage, on the other hand, is one that can display
different content and provide user interaction, by making use of advanced programming and
databases in addition to HTML. As you can tell, static webpages are easier to create, while
dynamic webpage require more work.

Types of Websites
1. E-Commerce Websites
➢ A website for e-commerce is a website from which individuals can purchase products
directly. Any website with a shopping cart, including a manner to provide data about
credit cards for purchases, falls under this category.

3 | Q1 W1
2. Business Websites
➢ A website for a company is a website dedicated to a particular company. They should be
branded as the company and communicate the goods and/or services that the company
provides.

3. Portfolio Websites
➢ Websites on portfolios are sites that show examples of previous work. A website can be
used by service suppliers wishing to demonstrate to prospective customers the quality of
their work to obtain some of the finest examples of previous work.

4. Media Websites
➢ News stories or other reporting are collected on media websites. Media websites usually
create cash by way of advertising, subscription models, or a mixture of both.

5. Nonprofit Website
➢ Just as companies need websites to be online, so do non-profit companies. Many
prospective donors can create donations by using a non-profit web page, and many
individuals want to know more about a non-profit and see if they want to assist it.

6. Educational Websites
➢ In the category of academic websites, websites of academic organizations and those
provide online courses to students and the person who wants to study. The main aim of
these websites is to provide visitors with educational materials or to provide them with
information on a learning institution.

7. Infopreneur Website
➢ Websites from Infopreneur overlap slightly with websites from businesses and e-
commerce but are a single form of online business. Creating and selling data products by
infopreneurs. This can be classes, tutorials, videos or ebooks. Infopreneurs need to work
hard to build an awareness brand to convince tourists that they understand enough to
create their instructional goods worth purchasing and to sell those goods.

What is a Landing Page and How Does it Work?

➢ A landing page is a single web page created as a destination for a specific marketing or
advertising campaign. It’s called a landing page because visitors land on the page after
clicking a link in your ad or marketing campaign. As well as using landing pages as ad
targets, you can share links to them on social media, add them to videos, and include
them in email or other marketing campaigns.

➢ Landing pages aren’t like other pages on your website. Many of the pages on your site,
such as the homepage, encourage visitors to explore your site further, and go deeper into
its content.

➢ In contrast, landing pages focus on encouraging website visitors to stay where they are,
and take a single, specific action. Landing pages include a call to action (CTA), which is
a text link or button, telling visitors what action to take.

4 | Q1 W1
Pages of Website

1. Home Page
➢ It is called home as it is typically a starting point where the user gets a core introduction
to the website and chooses the direction of his further journey around it.
2. Feed Page
➢ Feed (or news feed) page is found on websites that often update content. In other words,
it’s a content stream users can scroll through and check what’s been updated on the
website.
3. Menu Page
➢ This page is usually about navigation goals. As well as a typical menu control, the menu
page presents a sort of list giving access to different content categories and interaction
zones.
4. Search Page
➢ This page presents a feed of internal search results after the user typed in the request in
the search field.
5. About Page
➢ This is a web page that allows visitors to get quickly informed about the company,
product, or person behind the website.
6. Registration Page
➢ The registration page can be found on websites where users sign up and create
personalized accounts.
7. Blog Page
➢ It is a kind of journal or diary people keep online, sometimes just sharing their thoughts
or expertise and also inviting readers to discuss the problem in comments.
9. Article Page
➢ This web page shows visitors a full article in a blog, news platform, educational website,
or any text-based website.

Basic Building Blocks of the Web:

HTML

CSS JavaScript
This Photo by Unknown Author is licensed under CC BY-NC

Figure 3. Basic building blocks of web development

5 | Q1 W1
 If you are interested about learning website or webpage development, you will come
across terms like HTML, CSS, and JavaScript.
What is HTML?
➢ Stands for Hyper Text Markup Language.
➢ Hypertext refers to the way in which Web pages (HTML documents) are linked together.
➢ HTML is the basic building block of World Wide Web.
➢ HTML is used to create web pages and web applications.
➢ Consists of a series of elements and tells the browser how to display the content.

What Is CSS?
• CSS stands for cascading style sheets and this is how content in HTML is styled and
designed.

What Is JavaScript?
• JavaScript is a programming language for the web. All these means that, when you want
something to move, change, or react on a website, JavaScript is normally the one doing it.
JavaScript handles logic, the if-then of web design and development.

HTML Basic Structure:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The basic structure of an HTML document consists of 5 elements:
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>
5. <body>

Description of HTML Structure:

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the
metadata (information about the document). It must be closed before the body tag opens.

6 | Q1 W1
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)

<body> : Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.

HTML Tags and Elements

• An HTML tag is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
• The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML text Editors
• An HTML file is a text file, so to create an HTML file we can use any text editors.
• Text editors are the programs which allow editing in a written text, hence to create a web
page we need to write our code in some text editor.
• There are various types of text editors available which you can directly download, but for
a beginner, the best text editor is Notepad or Notepad++ (Windows), or TextEdit (Mac)
and TrebEdit (Android) or Koder Kode (iPhone & iPad).

How to Create a Simple Web Page with HTML

1. Open a text editor. On a computer running the Windows
operating system, you'll usually use Notepad, or Notepad++
whereas macOS users will use TextEdit, Android users will use
TrebEdit and iOS users will use Koder Kode:
• Windows - Open Start , type in notepad, or notepad++ and click Notepad or
"Notepad++” at the top of the window.
• macOS - Click Spotlight , type in textedit, and double-click TextEdit at the top of
the results.
• TrebEdit and Koder Koder - tick icon launcher.

2. Type some HTML code.

7 | Q1 W1
3. Saving the file.
• Now save the file on your desktop as "myfirstpage.html ".

Note: It is important that the extension .html is specified — some text editors, such as
Notepad, will automatically save it as .txt otherwise.

Figure 4. Saving of HTML file.

• For mobile devices, just follow the default directory of the application for saving the file
and click “Save”.

4. Viewing or Opening the file.

• To open the file in a browser. Navigate to your file then double click on it. It
will open in your default Web browser.

Figure 5. Sample output of “myfirstpage.html” file.

8 | Q1 W1
HTML Element
• Most HTML elements are written with a start tag (or opening tag) and an end tag (or
closing tag), with content in between. Elements can also contain attributes that defines its
additional properties. For example, a paragraph, which is represented by the p element,
would be written as:

Figure 6. HTML Element Syntax

(https://www.tutorialrepublic.com/html-tutorial/html-elements.php)

• In HTML, tag and attribute names are not case-sensitive (but most attribute values are
case-sensitive). It means the tag <P>, and the tag <p> defines the same thing in HTML
which is a paragraph.

• Empty elements (also called self-closing or void elements) are not container tags — that
means, you can not write <hr>some content</hr> or <br>some content</br>. Some
other common empty elements are <img>, <input>, <link>, <meta>, etc.

• Placing one element inside another is called “Nesting HTML element”. A nested
element, also called a child element, can be a parent element, if other elements are nested
within it.

SAMPLE CODE: Save the file as “html_elements.html”.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Elements</title>
</head>

<body>
<h1>Empty Elements</h1>
<p>This paragraph does not contain a line break.</p>
<p>This paragraph contains <br> a line break.</p>
<hr>
<h1>Nested Elements (an element within an element)</h1>
<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em> emphasized </em> text.</p>
<p>Here is some <mark> highlighted </mark> text.</p>
</body>
</html>

9 | Q1 W1
HTML Attributes
• Attributes are always specified in the start tag (or opening tag) and usually consists of
name/value pairs like name="value". Attribute values should always be enclosed in
quotation marks.
• href Attribute
➢ The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to.
Example:
<a href="https://www.facebook.com">Facebook</a>
• src Attribute
➢ The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed.
Example:
<img src="mypic.jpg">
• width and height Attributes
➢ The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels).
Example:
<img src="mypic.jpg" width="500" height="600">
• alt Attribute
➢ The required alt attribute for the <img> tag specifies an alternate text for an
image.
Example:
<img src="cityhall.jpg" alt="City Hall">
• style Attribute
➢ The style attribute is used to add styles to an element, such as color, font, size,
and more.
Example:
<p style="color:blue;">My First Hello.</p>
• lang Attribute
➢ You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
Example:
<html lang="en">
➢ Country codes can also be added to the language code in the lang attribute. So, the
first two characters define the language of the HTML page, and the last two
characters define the country.
Example:
<html lang="en-US">
• title Attribute
➢ The value of the title attribute will be displayed as a tooltip when you mouse
over the element:
Example:
<p title="I'm a tooltip">My First Hello.</p>

10 | Q1 W1
Sample Code:
• Instructions:
1. Download the DepEd MISSION and VISION image statement.
2. Create two separate html file document.
3. Copy and Paste the codes.
4. Save the html file as “mission.html” and “vision.html”.
5. Click the text link “DepEd VISION” and “DepEd MISSION” to switch between
pages.

• mission.html codes:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>DepEd MISSION</title>
</head>
<body style="background-color:powderblue;">
<h1 title="I'm a tooltip" style="text-align:center;font-size:400%;color:blue;">
MISSION</h1>
<center>
<img src="../DEPED/DEPED_Mission.jpg" alt="DepEd Mission" width="450"
height="350">
<br>
<h2><a href="vision.html">DepEd VISION</a></h2>
</center>
</body>
</html>

Figure 6. mission.html output.

11 | Q1 W1
• vision.html codes:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>DepEd VISION</title>
</head>
<body style="background-color:tomato;">
<h1 title="I'm a tooltip" style="text-align:center;font-size:400%;color:blue;">VISION</h1>
<center>
<img src="../DEPED/DepEd_Vision.jpg" alt="DepEd Vision" width="450"
height="350">
<br>
<h2><a href="mission.html">DepEd MISSION</a></h2>
</center>
</body>
</html>

Figure 7. vision.html output.

12 | Q1 W1
 Now Do It!
ACTIVITY 1
Name: __________________________________________ Date: _______________
Grade and Section: _______________________________ Score: ______________
Part 1. Identification
Directions: Identify what is being described/ask by the following statements. Write your
answer on the space provided before each item.
___________1.) Domains that follow top levels within the DNS hierarchy.
___________2.) The first part of the URL.
___________3.) Domains are at the top of the internet hierarchy of domain names.
___________4.) The central portion of the URL.
___________5.) The unique global address of documents and other resources on the World
Wide Web.
___________6.) The domain type that use just two letters and are based upon international
country codes
___________7.) What is the ccTLD of our country?
___________8.) What is the most common third-level domain name?
___________9.) A website from which individuals can purchase products directly.
___________10.) It is called home as it is typically a starting point where the user gets a core
introduction to the website and chooses the direction of his further journey
around it.

Part 2. Fill in the Blanks

Directions: Supply the missing HTML code. Write your answer on the space provided.

1. HTML Attributes
a. Add a "tooltip" text to the paragraph below with the text "About HTML".
<p _______ ="About HTML">Introduction to HTML.</p>

b. Make the element below into a link that goes to "https://www.facebook.com".

<a ______ = "https://www.___________________" > _______________ </a>

2. HTML Styles
a. Use the correct HTML attribute, and set the color of the paragraph to "blue".
<p ____________="____________ ;"> This is a paragraph.</p>

13 | Q1 W1
 b. Set the font of the paragraph to "courier".
<p style="______________ :courier;">This is a paragraph.</p>

3. HTML Formatting

a. Highlight the word "FUN" in the text below.

<p> HTML is____________ FUN _____________ to learn!</p>

b. Apply subscript formatting to the number "2" in the text below.

<p>H_______ 2________ 0 is the scientific term for water.</p>

4. HTML Quotations

a. Use an HTML element to add quotation marks around the letters "cool".

<p>I am so__________ cool___________ </p>

b. Use an HTML element to provide the specified abbreviation of "WHO".

<p> The <________ __________"World Health Organization"> WHO ___________

was founded in 1948. </p>

14 | Q1 W1
 Ace It!
ASSESSMENT
Name: __________________________________________ Date: _______________
Grade and Section: _______________________________ Score: ______________

PROGRAMMING

Instruction:
• Create a webpage that displays two addresses in the same format used on the front of
envelopes (senders address in top left corner, receivers address in the center). Write
your HTML code at the back of the page. You will be graded using the rubrics below.

Rubrics:
Category Excellent (5) Fair (3) Poor (1)
Correctness of No syntax errors There were 1 to 2 There were more
Syntax found on the code. syntax errors found than 2 syntax errors
in the code. found in the code.
Excellent (10) Fair (8) Poor (6)
Completeness of The code included all There was 1 missing There were 2 or
Content required components. component in the more missing
code. components in the
code.

Congratulations! You made it! You just finished Module 1.

15 | Q1 W1
Name: ____________________________________ Grade & Section: ________________

WRITE YOUR PROGRAM HERE

1 _____________________________________________________________________
2 _____________________________________________________________________
3 _____________________________________________________________________
4 _____________________________________________________________________
5 _____________________________________________________________________
6 _____________________________________________________________________
7 _____________________________________________________________________
8 _____________________________________________________________________
9 _____________________________________________________________________
10 _____________________________________________________________________
11 _____________________________________________________________________
12 _____________________________________________________________________
13 _____________________________________________________________________
14 _____________________________________________________________________
15 _____________________________________________________________________
16 _____________________________________________________________________
17 _____________________________________________________________________
18 _____________________________________________________________________
19 _____________________________________________________________________
20 _____________________________________________________________________
21 _____________________________________________________________________
22 _____________________________________________________________________
23 _____________________________________________________________________
24 _____________________________________________________________________
25 _____________________________________________________________________
26 _____________________________________________________________________
27 _____________________________________________________________________
28 _____________________________________________________________________
29 _____________________________________________________________________
30 _____________________________________________________________________
31 _____________________________________________________________________
32 _____________________________________________________________________
33 _____________________________________________________________________
34 _____________________________________________________________________

16 | Q1 W1
References:
• https://www.wimpyplayer.com/docs/common/urls.htm, What is a URL (Uniform Resource Locator)? | Webopedia
What is a Web Page? (computerhope.com)
• https://www.hostgator.com/blog/different-types-domains/, What is a Domain Name? Domains Explained for
Beginners (hostinger.com)
• Types of Websites | 7 Most Popular Types of Websites You Need to Know (educba.com)
• What are Subdomains? (Definition and Examples) (wpbeginner.com)
• What is a Landing Page and what is its Purpose? | Taboola
• https://www.searchenginejournal.com/seo-101/types-of-webpages/#close
• https://blog.tubikstudio.com/types-of-web-pages/
• Basic structure of an HTML document | Web design (wordpress.com)
• https://www.w3schools.com/html/default.asp
• https://www.tutorialspoint.com/html/index.htm

17 | Q1 W1