Computer Programming (.
Net) – Grade 12
Learning Activity Sheets
Quarter 1 Week 3
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
COMPUTER PROGRAMMING (.NET) GRADE 12
LEARNING ACTIVITY SHEET
Quarter 1 Week 3
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:
✓ Create and configure an HTML document according to user’s specification.
Materials:
• Computer, Cellphone, Tablet
Let’s kick it off!
Instructions:
- Based on the diagram below. What do think was the tool used to organize the
guideline for scoring? Do you think you can design it better?
Guideline(s) for scoring
Category Excellent (5) Fair (3) Poor (1)
• Correctness of 1. No syntax errors • There were 1 to 2 a. There were
Syntax found on the syntax errors more than 2
code. found in the code. syntax errors
found in the
code.
Excellent (10) Fair (8) Poor (6)
• Completeness of 2. The code • There was 1 b. There were 2 or
Content included all missing more missing
required component in the components in
the code.
components. code.
Figure 1. Scoring Guide
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
_________________________________________________________________________________.
1 | Q1 W3
Are you taking it?
• Is organizing the content of a webpage important to you?
• Do you know the HTML Table tags, attributes and its parts?
• What is an HTML lists and its types?
• How can you create a page with HTML Table and Lists?
Here’s how it is!
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
Each table cell is defined by a <td> and a </td> tag. td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example:
<td>Code 404</td>
<td>Action</td>
Each table row starts with a <tr> and end with a </tr> tag. tr stands for table row.
Example:
<tr>
<td>Code 404</td>
<td>Action</td>
</tr>
Sometimes we want our cells to be headers, so, we use the <th> tag instead of
the <td> tag. By default, text in <th> elements are bold and centered, but can be changed
using CSS.
Example:
<tr>
<th>Movie & Series</th>
<th>Genre</th>
</tr>
<tr>
<td>Code 404</td>
<td>Action</td>
</tr>
HTML Table Tags:
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
2 | Q1 W3
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Movie & Series</th> Figure 1. Sample output of HTML Table
<th>Genre</th>
</tr>
<tr>
<td>Code 404</td>
<td>Action</td>
</tr>
<tr>
<td>Still Water</td>
<td>Drama</td>
</tr>
</table>
</body>
</html>
Tables can be divided into three portions − a header, a body, and a foot. The
three elements for separating the head, body, and foot of a table are:
• <thead> − to create a separate table header.
• <tbody> − to indicate the main body of the table.
• <tfoot> − to create a separate table footer.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<h1>The thead, tbody, and tfoot
elements</h1>
<table border = "1"> Figure 2. Sample Output
<thead>
3 | Q1 W3
<tr>
<th>Movies & Series</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr>
<td>Code 404</td>
<td>Action</td>
</tr>
<tr>
<td>Kingdom: Ashin of the North</td>
<td>Action, Drama, Fantasy</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Still Water</td>
<td>Drama</td>
</tr>
</tfoot>
</table>
</body>
</html>
HTML Table with Border
There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML
2. By border property in CSS
1. HTML Border attribute
You can use border attribute of table tag in HTML to specify border.
Example:
<table border = "1"> <table border = "5">
2. CSS Border property - use the <style> tag and insert the code between the <head>
element.
<style>
Example:
table, th, td {
border: 1px solid black;
}
</style>
4 | Q1 W3
Collapsed Table Borders
To avoid having double borders, set the CSS border-collapse property to collapse. Insert
the code below in between the <head>…</head> tag.
Example:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
} Figure 3. Sample output using border-collapse property.
Style Table Borders
If you set a background color of each cell, and give the border a different color, you
get a good impression of a border:
Example:
table, th, td {
border: 1px solid orange;
border-collapse: collapse;
}
th, td {
Figure 4. Sample output with background color.
background-color: powderblue;
}
Round Table Borders
With the border-radius property, the borders get rounded corners.
Example:
table, th, td {
border: 1px solid orange ;
border-radius: 10px;
}
Figure 5. With border-radius
Example:
Remove the table border attribute and the table css property.
th, td {
border: 1px solid black;
border-radius: 10px;
}
Figure 6. Wthout border attribute and css table
property.
5 | Q1 W3
Table Width
Add the style attribute to the <table> element, to set the width. Use the style attribute
with the width or height properties to specify the size of a table, row or column.
Example:
<table style="width:100%">
Figure 7. Sample output
Table Column Width
Add the style attribute on a <th> or <td> element to set the size of a specific column.
Example:
<th style="width:60%"> Movies & Series</th>
Figure 8. Sample output
Table Row Height
Add the style attribute on a table row element to set the height of a specific row.
Example:
<tr style="height:200px">
<td><img src="../website_project/images/stillwater.jpg" alt="Still Water"
style="width:90px;height:100px;"></td>
<td>Still Water</td>
<td>Animation</td>
</tr>
6 | Q1 W3
Table Caption
Add a caption to a table, use the <caption> tag.
Example:
<table style="width:100%">
<caption>Trending Movies</caption>
HTML Table Padding & Spacing
Cell padding is the space between the cell edges and the cell content. By default the
padding is set to 0. To add padding on table cells, use the CSS padding property
Example:
<head>
<title>HTML Table Header</title>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
Figure 9. Sample output with lesser value in cell padding
padding: 5px; }
</style>
</head>
Example:
<head>
<title>HTML Table Header</title>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
Figure 10. Sample output with increased value in cell padding
padding: 15px; }
</style>
</head>
7 | Q1 W3
HTML Table - Cell Spacing
Cell spacing is the space between each cell. By default the space is set to 2 pixels. To
change the space between table cells, use the CSS border-space property on
the table element.
<head>
<title>HTML Table Header</title>
<style>
table, th, td {
border: 1px solid black;
}
table {
Figure 11. With 5px cell spacing.
border-spacing: 5px; }
</style>
</head>
Example:
<head>
<title>HTML Table Header</title>
<style>
table, th, td {
border: 1px solid black;
}
table { Figure 12. With 15px cell spacing
border-spacing: 15px; }
</style>
</head>
Table - Colspan
Use the colspan attribute to make a cell span over multiple columns.
Example:
<tr>
<th colspan="2">Movies & Series</th>
<th>Genre</th>
</tr>
Figure 13. Make two cells into one cell.
Table - Rowspan
Use the rowspan attribute to make a cell span over multiple rows.
Example:
<table>
<thead>
<tr>
<th colspan="2">Movies & Series</th>
<th>Genre</th>
</tr> Figure 10. Sample output with rowspan
</thead>
<tbody>
<tr>
8 | Q1 W3
<th>Now Showing</th>
<td>Code 404</td>
<td>Action</td>
</tr>
<tr>
<th rowspan="2">Coming Soon</td>
<td>Kingdom: Ashin of the North</td>
<td>Action, Drama, Fantasy</td>
</tr>
<tr>
<td>Still Water</td>
<td>Animation</td>
</tr>
</tbody>
</table>
Table - Zebra Stripes styling
To style every other table row element, use the :nth-child(even) selector.
Example:
<head>
<title>HTML Table
Header</title>
<style>
table, th, td {
border: 1px solid black; Figure 11. Sample output with table row stripes.
}
tr:nth-child(even) {
background-color: powderblue;
}
</style>
</head>
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of
2,4,6 etc.
Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other column, instead of every other row.
Example:
<head>
<title>HTML Table Header</title>
<style>
table, th, td {
border: 1px solid black;
} Figure 12 Vertical stripes
td:nth-child(odd) {
background-color: powderblue;
}
</style>
</head>
9 | Q1 W3
HTML Lists
HTML lists are used to present list of information in well-formed and semantic way.
There are three different types of lists in HTML and each one has a specific purpose and
meaning.
• Unordered list — Used to create a list of related items, in no particular order.
• Ordered list — Used to create a list of related items, in a specific order.
• Description list — Used to create a list of terms and their descriptions.
Note: Inside a list item you can put text, images, links, line breaks, etc. You can also place an
entire list inside a list item to create the nested list.
HTML Unordered Lists
An unordered list created using the <ul> element, and each list item starts with
the <li> element. The list items in unordered lists are marked with bullets.
Example:
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>HTML Unordered List</h2>
<ul>
<li>Banana Cake</li>
<li>Banana Marble Cake</li>
<li>Banana Chocolate Cake</li>
</ul> Figure 13. Sample output
<hr>
<h2>HTML Nested Unordered List</h2>
<ul>
<li>Banana Cake Recipe:
Inner <ul> Lists
<ul>
Outer <ul> Lists
<li>3 pcs. Ripe Banana</li>
<li>All Purpose Flour</li>
</ul>
</li>
<li>Banana Marble Cake</li>
<li>Banana Chocolate Cake</li>
</ul>
</body>
</html>
10 | Q1 W3
type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By
default, it is a disc. Following are the possible options:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example:
<ul type=”disc”>
<li>Banana Cake</li>
<li>Banana Marble Cake</li>
<li>Banana Chocolate Cake</li>
</ul>
You can also change the bullet type in your unordered list using the CSS list-style-
type property. The following style rule changes the type of bullet from the
default disc to square:
Example:
Insert code below inside <head> tag.
<style>
ul {
list-style-type: square;
}
</style>
HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then
HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts
at one and is incremented by one for each successive ordered list element tagged with <li>.
Example:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body><h2> HTML Ordered List</h2>
<ol type=”1”>
<li>HTML</li> Figure 14. Sample Output Ordered lists
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
11 | Q1 W3
type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By
default, it is a number. Following are the possible options:
Example:
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you
need. Following are the possible options:
Example:
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body><h2>Senior High School - SHS</h2>
<ol type="I" start = "4">
<li>TVL-ICT</li>
<ol type="1"> Figure 15. Sample output nested start attribute
<li>CSS</li>
<li>Computer Programming</li>
</ol>
<li>TVL-IA</li>
<li>TVL-H.E.</li>
</ol>
</body>
</html>
HTML Definition/Description Lists
HTML and XHTML supports a list style which is called definition lists where entries
are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
• <dl> − Defines the start of the list
• <dt> − A term
• <dd> − Term definition
• </dl> − Defines the end of the list
12 | Q1 W3
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body><h2>HTML Definition Lists</h2>
Figure 16. Sample output for definition lists
<dl>
<dt><b>TLD</b></dt>
<dd>This stands for "Top Level Domain name".</dd>
<dt><b>IP</b></dt>
<dd>This stands for "Internet Protocol".</dd>
<dt><b>CSS</b></dt>
<dd>This stands for "Cascading Style Sheets".</dd>
<dt><b>HTML</b></dt>
<dd>This stands for "Hypertext Markup Language".</dd>
</dl>
</body>
</html>
13 | Q1 W3
Now Do It!
ACTIVITY 1
Name: __________________________________________ Date: _______________
Grade and Section: _______________________________ Score: ______________
Part 1. FILL IN THE BLANKS
Directions: Supply the missing HTML code. Write your answers on the space provided.
1. Use the correct HTML elements to make a description of each term in the description
list.
<dl>
<dt>Milk Tea Sugar %:</dt>
______ - 25% sugar. _______
<dt>Milk</dt>
______ - 50% sugar ______
</dl>
2. a. Use the correct HTML attribute to display letters (uppercase ABC) instead of
numbers.
b. Use CSS to display squares instead of bullets.
<ol _______________>
<li>General Academics</li>
<li>TVL-H.E.</li>
<ul _______________________________________>
<li>Cookery</li>
</ul>
<li>ABM</li>
</ol>
3. <!DOCTYPE html>
<html lang="en">
<head>
a. Use CSS to apply border
<title>Creating Tables in HTML</title>
styles to table, th & td.
<style>
___________________________
___________________________
___________________________
</style> b. Use CSS styles to make the
</head> table 300 pixels wide.
<body>
<h2>HTML Table</h2>
c. Add a table caption
<table ______________________>
that says "Activity No.1".
__________________________________
<tr>
<th _____________>Students Name</th> d. Span into 3 columns
e. Span into 2 rows.
<th _____________>Age</th>
</tr>
14 | Q1 W3
____________________
____________________ f. Add a table row with three (3)
____________________ table headers. The table headers
should have the value
____________________ "LastName","FirstName","M.I.".
____________________
<tr>
<td>Parker</td>
<td>Peter</td>
<td>S.</td>
<th>16</th>
</tr>
<tr>
<td>Wayne</td>
<td>John</td>
<td>X.</td>
<th>40</th>
</tr>
____________________
g. Add a table row at the end of
____________________ the table, with four table cells.
____________________ The table cells should have the
____________________ value "Potter","Harry","A." and
____________________ "16".
____________________
</table>
</body>
</html
Part 2.
Direction: Visualize the output of activity 1, Part 1 problem number 3 and draw or sketch the
output of the HTML code given. Make your drawing or sketch below.
15 | Q1 W3
Ace It!
ASSESSMENT
Name: __________________________________________ Date: _______________
Grade and Section: _______________________________ Score: ______________
PROGRAMMING
Instruction:
Create an html table with the following criteria:
a. Has a minimum of two (2) column and row span.
b. Uses zebra stripes (vertical or horizontal).
c. Minimum of five (5) table headers.
d. Uses the CSS border property on table, th, and td elements (background color & styles).
e. Applies padding, spacing and caption.
f. Insert image link and text links.
Note:
1. Separate (or label) your html code file from your external css style sheet code.
2. No output should be the same, even in content (make your own webpage).
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 3.
References:
• https://www.tutorialrepublic.com/html-tutorial/
• https://www.javatpoint.com/html-tutorial
• https://www.w3schools.com/html/
• https://www.tutorialspoint.com/html/index.htm
16 | Q1 W3
