Scribd
Upload
72 views66 pages

Tle 10 Ict Quarter 2 Learning Resources w1-w5

Uploaded by

Gaudia, Maria Divine Rhonmie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
72 views66 pages

Tle 10 Ict Quarter 2 Learning Resources w1-w5

Uploaded by

Gaudia, Maria Divine Rhonmie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 66

LESSON 1: CREATING WEBPAGE STRUCTURE

EXPECTATIONS
Upon completion of the module, learners should be able to:
 describe tags and attributes;
 label the structure of a tag;
 identify container and empty tags; and
 outline the basic structure of a webpage.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space
provided.
1. What are the hidden keywords within a webpage that define how the browser
will display the contents?
a. attributes c. tags
b. elements d. values
2. What allows a tag to be customized and is always specified in the start tag?
a. attributes c. tags
b. elements d. values
3. Which tag that forms the basic structure of an HTML file contains information
about the document that will not appear in the actual webpage?
a. <body> b. <head> c. <html> d. <title>
4. Which tag that forms the basic structure of an HTML file contains all the
visible
contents to be displayed in the webpage?
a. <body> b. <head> c. <html> d. <title>
5. Which tag that forms the basic structure of an HTML file identifies the
beginning
and end of the document?
a. <body> b. <head> c. <html> d. <title>
6. Which tag that forms the basic structure of an HTML file defines the title that
will appear in the title bar of the web browser?
a. <body> b. <head> c. <html> d. <title>
7. Which kind of tag wraps around text or graphics and comes in a set?
a. container b. empty c. end d. start
8. Which kind of tag stands alone and do not require end tags?
a. container b. empty c. end d. start
9. In an HTML layout, which part defines the navigation links?
a. <article> b. <details> c. <footer> d. <nav>
10. In an HTML layout, which part defines an independent, self-contained
content?
a. <article> b. <aside> c. <header> d. <section>

3
LOOKING BACK TO YOUR LESSON

A. Directions: Label the parts of an HTML element.

B. Directions: Label the parts of a Notepad window.

4
BRIEF INTRODUCTION

A website’s structure refers to how the website is outlined and how the contents are
organized in the webpage. This includes how the individual webpages are linked to one
another. It is very important that visitors can easily find what they are looking for. This is the
reason why the homepage is important. It should be easy to navigate and explore.

What is a Tag?

Tags serve as the building blocks of an HTML document. They may also be called as
code since writing it may be referred to as coding. They are hidden keywords within a
webpage that define how the browser will display the contents. There are many tags used
in creating webpages and each tag has its own use. Some are used in formatting texts,
images, tables, and layouts to name a few.

Structure of a Tag

There four sets of HTML tags needed to form the basic structure for every
HTML file
are:
 Definition <html> </html>
This defines the document as a webpage. It also identifies the
beginning
and end of the HTML document. All the other tags must be enclosed in
this tag.
 Header <head> </head>
This contains information about the document that will not appear on
the
actual webpage, such as the title of the document, the author,
stylesheet used, and the meta tags.
 Title <title> </title>
This defines the title that will appear in the title bar of the web browser.
This tag must be placed inside the head tags.
 Body <body> </body>
This contains all the information and visible contents of the webpage.
This includes images, links, and plain text. They must be placed inside
the body tags.
Most tags have two parts, an opening and closing part. For example, <html> is
the opening tag and </html> is the closing tag. Always remember that the closing tag
has the same text as the opening tag, but with a forward slash ( / ) character. However,
there are a few tags that are an exception to this rule. These tags do not require a closing
tag. An example is the <img> tag which is used for inserting images.

5
Also, notice that tags are enclosed in angle brackets < and > and an example of it is
<html>. Below is an illustration of how a tag is used and its parts.

This is how the browser will display the codes written above.

Container and Empty Tags

There are two kinds of tags: container and empty. The container tag always wraps
around text or graphics and comes in a set. It has start and end tags with the content in
between. On the other hand, the empty tags stand alone and do not require the end tags.
They do not have to be wrapped around text.

Example of container tags Example of empty tags


 <p>This is a paragraph.</p>  <br>
 <b>This is used to display bold text.</b>  <hr>
 <u>This is used to display underlined text.</u>  <img
src=”sample.jpg”>
HTML is also not case sensitive. It can be written using either lowercase or
uppercase.
<HTML> is the same as <html>. To maintain consistency, decide which one to use. It is
highly recommended not to use a combination of the two.

6
A whole HTML file is always enclosed in <html> </html>. See the example
below which has the appropriate HTML start and end tags.

This is how the browser will display the codes written above.

What are Attributes?

HTML attributes provide additional information about HTML elements. Attributes allow
a tag to be customized and are always specified in the start tag, for example
<img src=”sampleimage.jpg”> or <p align=”left”> … </p>. They are usually
assigned with a value using the equal sign, such as border=”0” or width=”50%”, but
there are also some attributes that only need to be declared in the tag like this: <hr
noshade>.

Majority of attributes are optional for most tags. They are only used when changing
something about the default way a tag is displayed in the browser. However, some tags such
as the <img> tag has required attributes such as src and alt which are basically needed
for the browser to display the webpage properly.

7
Common Attributes
href attribute It defines a hyperlink and specifies the URL of the webpage the link
goes to.
src attribute It specifies the path to the image to be displayed.
width and height It specifies the width and height of the image.
attribute
alt attribute It specifies an alternate text for an image if the image cannot be
displayed. This may be because of slow connection, or an error in the
src attribute, or if the user uses screen reader.
id attribute It specified a unique id for an HTML element (the value must be
unique
within the HTML document). It is mostly used to point to a style in a
stylesheet.
class attribute It specifies one or more classnames for an element. It is mostly used
to point to a class in a stylesheet.
style attribute It is used to add styles to an element, such as color, font, size, etc.
lang attribute It is used to declare the language of the webpage. This is meant to
assist search engines and browsers.

Basic Page Structure

When designing a webpage, it is important to consider which information has the


most importance in achieving the site goals. It is essential to create a simple outline to easily
create the webpage. HTML layout has several semantic elements that define the different
parts of a webpage:
<header> Defines a header for a document or a
section
<nav> Defines a set of navigation links
<section> Defines a section in an HTML document
<article> Defines an independent, self-contained
content
<aside> Defines content aside from the content
and serves as a sidebar
<footer> Defines a footer for a document or a
section
<details> Defines additional details that the user
can open and close on demand
<summar Defines a heading for the <details>
y> element

8
ACTIVITY: Identification

Directions: Match Column A with the correct answer on Column B, write only the letter
of the correct answer on the space provided.

Column A Column B
1. It provides additional information to tags. a. Angle brackets
2. End tags have this additional character. b. Attributes
3. It is a stand-alone kind of tag that do not require end tags.
c. Body tag
4. It encloses all the tags in the HTML file.
5. It always comes in a set with start and end tags. d. Container tags
6. They are the basic building blocks of HTML. e. Content
7. Everything between the start and end tag. f. Empty tags
8. This tag contains all the information and visible contents g. Equal sign
of the webpage.
9. Attributes are usually assigned with a value using this. h. Forward slash
10. This attribute defines a hyperlink and specifies the URL i. Href
of the webpage the link goes to. j. HTML tag
k. Tags

REMEMBER

Tags serve as the building blocks of an HTML document They are hidden keywords
within a webpage that define how the browser will display the contents. HTML attributes
provide additional information about HTML elements. Attributes allow a tag to be customized
and are always specified in the start tag.

The four sets of HTML tags needed to form the basic structure for every HTML
file are the <html> </html> tag, <head> </head> tag, <title> </title> tag, and
<body>
</body> tag. Most tags have two parts, an opening and closing part. The closing
tag has the same text as the opening tag, but with a forward slash ( / ) character.

There are two kinds of tags: container and empty. The container tag always wraps
around text or graphics and comes in a set. It has start and end tags with the content in
between. On the other hand, the empty tags stand alone and do not require the end tags.
They do not have to be wrapped around text

HTML layout has several semantic elements that define the different parts of a
webpage. The basic parts include the <head>, <nav>, <section>, <article>,
<aside>, and
<footer>.

9
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space
provided.
1. Samantha would like to display an image in the webpage she is creating. She
knows the tag to be used is the <img> tag. Which attribute is required so
the browser can display the webpage properly?
a. alt c. src
b. href d. style
2. Bryan would like to indicate title and author of the website he is developing. In
which tag should it be enclosed with?
a. <body> c. <html>
</body> </html>
b. <head> d. <title> </title>
</head>
3. Sonny is trying to debug the HTML document because the web browser is not
displaying the contents of his webpage. Which of the following is the possible
reason?
a. He did not use the <body> tag. c. He did not use the <title> tag.
b. He did not use the <head> tag. d. b and c
4. Jamaine is creating an outline of the website she is developing. She wants to
provide a section that links to other pages or parts within that page. Which tag
does she need to use?
a. <article> b. <aside> c. <nav> d. <section>
5. In addition, Jamaine would like to place a section in the page that consists of
content that is related to the main article in her page and can also be placed as
a side bar. Which tag does she need to use?
a. <aside> b. <head> c. <nav> d. <section>

10
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space
provided.
1. What allows a tag to be customized and is always specified in the start tag?
a. attributes c. tags
b. elements d. values
2. What are the hidden keywords within a webpage that define how the browser
will display the contents?
a. attributes c. tags
b. elements d. values
3. Which tag that forms the basic structure of an HTML file contains all the
visible
contents to be displayed in the webpage?
a. <body> b. <head> c. <html> d. <title>
4. Which tag that forms the basic structure of an HTML file contains information
about the document that will not appear in the actual webpage?
a. <body> b. <head> c. <html> d. <title>
5. Which tag that forms the basic structure of an HTML file defines the title that
will appear in the title bar of the web browser?
a. <body> b. <head> c. <html> d. <title>
6. Which tag that forms the basic structure of an HTML file identifies the
beginning
and end of the document?
a. <body> b. <head> c. <html> d. <title>
7. Which kind of tag stands alone and do not require end tags?
a. container b. empty c. end d. start
8. Which kind of tag wraps around text or graphics and comes in a set?
a. container b. empty c. end d. start
9. In an HTML layout, which part defines an independent, self-contained content?
a. <article> b. <aside> c. <header> d. <section>
10. In an HTML layout, which part defines the navigation links?
a. <article> b. <details> c. <footer> d. <nav>

11
HOW TO USE THIS MODULE?
Before starting the module, I want you to set aside other tasks that will
disturb you while enjoying the lessons. Read the simple instruction below to
successfully enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on
this module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

● Expectations - These are what you will be able to know after completing
the lessons in the module.
● Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
● Looking Back - This section will measure what learnings and skills that
you understand from the previous lesson.
● Brief Introduction-This section will give you an overview of the lesson.
● Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner
depending on the nature of the activity.
● Remember - This section summarizes the concepts and applications of
the lessons.
● Checking your Understanding - It will verify how you learned from the
lesson.
● Post-test - This will measure how much you have learned from the entire
module.

2
2
LESSON 1: IDENTIFYING TAGS AND ATTRIBUTES USED IN FORMATTING
TEXT

EXPECTATIONS
Upon completion of the module, learners should be able to:
● set font style, size, and color;
● apply commonly used font formatting; and
● insert special character entities.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Which tag is used to define font face, font size, and font color in HTML?
a. <em></em> b. <font></font> c. <hr> d.
<sub></sub>
2. Which HTML version does not support the <font> tag?
a. HTML 2 b. HTML 3 c. HTML 4 d.
HTML 5
3. Which attribute is used to set the font type?
a. face b. font c. size d. type
4. Which of the following HTML code is correct?
a. <font face=“Calibri”>Calibri</font>
b. <font face=“Verdana>Verdana</font face>
c. <font type=“Times New Roman”> Times New Roman</type>
d. <font type=Arial>Arial</font>
5. Which attribute is used to adjust the size of the text in an HTML document?
a. size b. small c. sub d. sup
6. What is the default font size of the text in an HTML document?
a. 1
a. color b. fcolor b. 2 c. tcolor c. 3 d. 4
d. textcolor
7. Which attribute is used to set the color
8. Which of the following HTML code is correct? of the text in an HTML document?
a. <font color=red>Red</font>
b. <font color=“green>Green</font>
c. <font color=“red”>Red</font>
d. <font tcolor=“green”>Green</font>
9. Which of the following is NOT used to set the style of font?
a. <b></b> b. <em></em> c. <small></small d. <tall></tall>
10. What symbol always ends or closes a special character entity?
a. ! b. & c. - d. ;

3
3
LOOKING BACK TO YOUR LESSON

Directions: Write the code for the output below.

Output Code
a. Region I
b. Region II
c. Region III
d. Region IV-A
e. Region IV-B
f. Region V
g. Region VI
h. Region VII
i. Region XIII
j. Region IX
k. Region X
l. Region XI
m. Region XII
n. Region XIII
o. ARMM
p. CAR
q. NCR

4
4
BRIEF INTRODUCTION

Formatted text can draw the reader’s attention to certain parts of the webpage. It can
also give emphasis to important information. There are several elements used to design and
display special types of text.

<font> Tag

The <font> tag is very helpful when it comes to designing and creating an attractive
and readable webpage. It is mainly used to change the color, size, and style of a text. The
<font> tag is used HTML4 but is not supported in HTML5. Therefore, CSS is used to
define font face, font size, and color.

The <font> tag has three attributes:


 face / type
 size
 color

Font Type

The font type can be set using the face attribute of the font tag. However, the fonts to
be used needs to be installed in the system first.

HTML code:

Output:

5
5
Font Size

The font size is used to adjust the size of the text in the HTML document. The font
size ranges from 1 to 7 and the default size is 3.

HTML code:

Output:

Font Color

The font color is used to set the color of the text with the color attribute. Color can be
set using its name or its hex code.

HTML code:

6
6
Output:

To set the style of the font, the following attributes can be also be used: <b></b>,
<i></i>, <u></u>, <sup></sup>, <sub></sub>, <small></small>, <strong></strong>, and
<em></em>.

HTML code:

Output:

7
7
Tags for Font Formatting
<b></b> Displays the text in bold format
<i></i> Displays the text in italic format
<u></u> Displays the text in underlined format
<sup></sup Displays the text in superscript
<sub></sub> Displays the ext in subscript
<em></em> Displays the text with emphasis
<strong></strong> Displays the text with strength
<small></small> Displays the text in small size

Special Character Entities

Special character entities are usually written with an ampersand ( & ) followed by the
entity name and ends with a semi-colon ( ; ). One example is &nbsp;. The said entity means
non-breaking space. It is a special character that displays a horizontal space. It is similar to
the <br> tag.

HTML code:

Output:

8
8
Special Character Entities
&gt; Used to insert greater than symbol or
&lt; > Used to insert less than symbol <
&#47; Used to insert slash or /
&copy; Used to insert copyright symbol or ©
&reg; Used to insert registered symbol or
&amp; ® Used to insert ampersand or &
&ndash; Used to insert en dash or -
&mdash; Used to insert em-dash or
&nbsp; –
Used to insert a non-
breaking space

9
9
ACTIVITY:

A.Directions: Write the formatting tags for the following outputs. Write the opening
and closing tags.

1) Philippines
2) United States of America
3) Great Britain
4) New Zealand
5) South Korea
6) Japan
7) France
8) Italy
9) Canada
10)United Arab Emirates

B.Directions: Copy the codes below, change the contents of the body with your
chosen poem and use different font face, color, and size.

REMEMBER

Formatted text can draw the reader’s attention to certain parts of the webpage. It can
also give emphasis to important information. The <font> tag is very helpful when it comes to
designing and creating an attractive and readable webpage. It is mainly used to change the
color, size, and style of a text. The font type can be set using the face attribute of the font
tag. However, the fonts to be used needs to be installed in the system first. The font size is
used to adjust the size of the text in the HTML document. The font size ranges from 1 to 7
and the default size is 3. The font color is used to set the color of the text with the color
attribute. Color can be set using its name or its hex code. To set the style of the font, the
following attributes can be also be used: <b></b>, <i></i>, <u></u>,
<sup></sup>, <sub></sub>,
<small></small>, <strong></strong>, and <em></em>.

Special character entities are usually written with an ampersand ( & ) followed by the
entity name and ends with a semi-colon ( ; ). One example is &nbsp;.

10
10
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Francine is creating a website for their family business. To make the page
more appealing to the readers, she wants to set the font type to Arial and font
color to Blue. What is the correct HTML code that she should use?
a. <font face= “Arial” color= blue> … </font>
b. <font face= “Arial” font color= “blue”> … </font>
c. <font face= “Arial color= blue”> … </font>
d. <font face= “Arial” color= “blue”> … </font>

2. After setting the font type and color of the text she noticed that the text is too
small. So she decided to use the size of the text next to the default size. What is
the correct HTML code that she should use?
e. <font size=“4”> … </font>
f. <font size=“5”> … </font>
g. <font size=“6”> … </font>
h. <font size=“7”> … </font>

3. After adjusting the size of the text, she decided that she also wants to italicize
all the titles in the website. Which font style should she use?
a. <b></b> c. <sub></sub>
b. <i></i> d. <sup></sup>

4. When Francine has finally italicized all of the titles, she thinks it’s not enough.
So she decided to add strength to all of the titles. Which font style should she
use?
a. <em></em> c. <sub></sub>
b. <strong></strong> d. <sup></sup>

5. To finalize the website of their family business, Francine would like to add the
copyright symbol at the footer section. What is the HTML code for this special
character entity?
a. &amp; c. &cprt;
b. &copy; d. &reg;

11
11
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Which HTML version does not support the <font> tag?


a. HTML 2 b. HTML 3 c. HTML 4 d.
HTML 5
2. Which tag is used to define font face, font size, and font color in HTML?
a. <em></em> b. <font></font> c. <hr> d.
<sub></sub>
3. What symbol always ends or closes a special character entity?
a. ! b. & c. - d. ;
4. Which attribute is used to adjust the size of the text in an HTML document?
a. size b. small c. sub d. sup
5. What is the default font size of the text in an HTML document?
a. 1 b. 2 c. 3 d. 4
6. Which attribute is used to set the font type?
a. face b. font c. size d. type
7. Which of the following HTML code is correct?
a. <font face=“Calibri”>Calibri</font>
b. <font face=“Verdana>Verdana</font face>
c. <font type=“Times New Roman”> Times New Roman</type>
d.
a. <font
color type=Arial>Arial</font>
b. fcolor c. tcolor d. textcolor
8. Which attribute is used to set the color
9. Which of the following HTML code is correct? of the text in an HTML document?
a. <font color=red>Red</font>
b. <font color=“green>Green</font>
c. <font color=“red”>Red</font>
d. <font tcolor=“green”>Green</font>
10. Which of the following is NOT used to set the style of font?
a. <b></b> b. <em></em> c. <small></small d. <tall></tall>

12
12
HOW TO USE THIS MODULE?
Before starting the module, I want you to set aside other tasks that will
disturb you while enjoying the lessons. Read the simple instruction below to
successfully enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on
this module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

 Expectations - These are what you will be able to know after completing
the lessons in the module.
 Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
 Looking Back - This section will measure what learnings and skills that
you understand from the previous lesson.
 Brief Introduction-This section will give you an overview of the lesson.
 Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
 Remember - This section summarizes the concepts and applications of
the lessons.
 Checking your Understanding - It will verify how you learned from the
lesson.
 Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: USING BASIC TAGS AND ATTRIBUTES

EXPECTATIONS
Upon completion of the module, learners should be able to:
 describe the head and body tags;
 identify heading, its attributes and grouping headings; and
 use appropriate tags and attributes in creating an HTML document.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. What are the two portion of HTML documents?


a. head and body b. head and title c. html and head d. html
and title
2. Which tag is used to assign the title of a webpage and display it on the
title bar?
a. <body> b. <head> c. <html> d.
<title>
3. Which tag contains metadata or specific information about the webpage that
is now shown or displayed in the web browser?
a. <body> b. <head> c. <html> d.
<title>
4. Which tag encloses all the contents that appear in the webpage?
a. <body> b. <head> c. <html> d.
<title>
5. Which attribute of the <body> tag is used to change the background
image of the webpage?
a. background b. bgcolor c. link d. vlink
6. Which attribute of the <body> tag is used to change the background
color of the webpage?
a. background b. bgcolor c. link d. vlink
7. Which attribute of the <body> tag is used to change the color of the
visited hyperlinks in the webpage?
a. alink b. elink c. link d. vlink
a. 5 b. 6 c. 7 d. unlimited
8. Which element is used to organize or group the contents of the webpage?
10. Which of the following is the use of <hgroup>
a. article
element? b. container c. heading
d.paragraph
a. To create sections for the articles in the webpage.
9. How many default levels do headings have?
b. To create subsections in the webpage.
c. To group the headings in the webpage.
d. All of the above.

3
LOOKING BACK TO YOUR LESSON

Directions: Put a check inside the box if the statement is correct and a cross if
the statement is incorrect.

 1. Tags are enclosed with angled brackets < and >.

 2. Elements are the basic units of an HTML document.

 3. An HTML document is created using Microsoft Excel.

 4. Elements with start tag and end tag are called container elements.

 5. Attributes provide additional information about a tag.

 6. An HTML document must have a .web extension name.

 7. Empty tags must be closed with an end tag.

 8. <br> is an example of empty tag.

 9. A container tag is a stand-alone type of tag that does not require end tags.

 10. End tags always come with a slash.

4
BRIEF INTRODUCTION

All HTML documents are divided into two portions: the head and the body. Contents
in the head portion are always enclosed in <head> </head> and contents in the body
portion are enclosed in <body> </body>. Both portions have important roles to
play in the completion of webpages and websites.

What is Head Tag?

The <head> tag contains metadata (document title, character set, styles,
links, scripts), specific information about the webpage that is now shown or displayed in
the web browser. These metadata provide browsers and search engines with technical
information about the webpage for easy searching.

The example below shows where the head tag is placed.

The <title> </title> tag inside the head tag is used to display the title of the
webpage on the title bar.

5
What is Body Tag?

All of the contents displayed in the web page – texts, images, videos and others –
should always be placed in the body of the HTML document. It must be enclosed in
<body>
</body>.

As shown in the example above, the start tag is placed right after the end tag of the
head part and the end tag is right before the end of the HTML document or the HTML tag.

Attributes for <body> </body>

As discussed in the previous lessons, attributes provide additional information about


the tag and is placed in the start or opening tag. Since the <body> </body> tag is a
container tag, it therefor contains attributes. These are the attributes for the <body>
</body> tag.
Attribute Definition
background It contains the URL of the background image. It is used to set the
background image.
Ex. <body background=“C:\Users\Pictures\Picture1.jpg”
bgcolor It is used to specify the background color of the web page.
Ex. <body bgcolor=“blue”>
alink It is used to specify the color of active links (when clicked).
Ex. <body alink=“#000000”>
link It is used to specify the color of links in the webpage.
Ex. <body link=“blue”>

6
text It is used to specify the color of text in the webpage.
Ex. <body text=“black”>
vlink It is used to specify the color of visited links in the webpage.
Ex. <body vlink=“#FF0000”>

What are Headings?

Headings are used to create section headings. They are used to organize or group
the contents of the webpage. They come in six default levels, <h1> through <h6>, which
also follows the order of importance. It is mainly used in placing titles and headers.

An HTML document has a main heading and sub-headings and they are usually
assigned with different font sizes. The main heading have the biggest font size and assigned
as <h1>, the next heading is <h2> and so on up to <h6>. The heading<h6> will have the
smallest font and least essential among the headings.

Attributes for Headings

Attribute Definition
align It indicates the horizontal alignment of heading.
Ex. <h1 align=“left”>This is left-aligned</h1>
title It indicates the text that appears when the mouse hovers over the
heading.
Ex. <h1 title=“Thank you!”>Put the cursor over me.</h1>

7
The alignment of headings can be adjusted to left, right or center of the
document.

8
Grouping Headings

Grouping headings indicates that subheadings, alternative titles or multiple levels are
related. The <hgroup> element is used to group the headings. Each hgroup may contain
two or more h1-h6 headings.

9
ACTIVITY:

A.Directions: Make the necessary correction to the following HTML codes. Put a
check mark on the space provided if the code is free from error.

1. <h3> </h3
2. <h2 align=“right”>
3. <h5> <h5/>
4. body alink=“#000000”
5. <body vlink=#FF0000>
6. <body link “red”>
7. <body text=black>
8. <body background color=“green”>
9. <body bground=“Picture1.jpg”>
10. <body> </body>

B.Directions: Practice creating and viewing simple HTML pages. Copy the codes
below and write a short description of yourself.

<html>
<head>
<title>About Me</title>
</head>
<body>
* write a short description of yourself *
</body>
</html>

REMEMBER

All HTML documents are divided into two portions: the head and the body. Contents
in the head portion are always enclosed in <head> </head> and contents in the body
portion are enclosed in <body> </body>. Both portions have important roles to
play in the completion of webpages and websites.

The <head> tag contains metadata (document title, character set, styles, links,
scripts), specific information about the webpage that is now shown or displayed in the web
browser. All of the contents displayed in the web page – texts, images, videos and others
– should always be placed in the body of the HTML document. It must be enclosed in
<body> </body>.
Headings are used to create section headings. They are used to organize or group
the contents of the webpage. They come in six default levels, <h1> through <h6>, which
also follows the order of importance. It is mainly used in placing titles and headers. The
attributes used in headings are align and title.

10
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Rian is doing her assignment in Webpage Design. She needs to put the
title “About Me” in her webpage. Which tag should she use?
a. <body> c. <html> </html>
</body> d. <title> </title>
b.2.<head>
Faith have a long list of contents to put in her webpage. Which tag should it
be</head>
enclosed with to make sure everything is displayed in the web browser?
a. <body> c. <html> </html>
</body> d. <title> </title>
b. Hope
3. <head> would like to put a main heading in her webpage. Which heading tag
</head>
should she use?
a. <h1> </h1> b. <h2> </h2> c. <h3> </h3> d. <h4>
</h4>
4. After putting a main heading, Hope would like to add a sub-heading. Which
heading tag should she use this time?
a. <h1> </h1> b. <h2> </h2> c. <h3> </h3> d. <h4>
</h4>
5. When Hope has finished putting the main heading and sub-heading in her
webpage, she now wants to put them in the center of the page. Which attribute
does she need to use?
a. align b. class c. id d. title

11
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Which tag contains metadata or specific information about the webpage that
is now shown or displayed in the web browser?
a. <body> b. <head> c. <html> d.
<title>
2. Which tag is used to assign the title of a webpage and display it on the
title bar?
a. <body> b. <head> c. <html> d.
<title>
3. Which tag encloses all the contents that appear in the webpage?
a. <body> b. <head> c. <html> d.
<title>
4. What are the two portion of HTML documents?
a. head and body b. head and title c. html and head d. html
and title
5. Which attribute of the <body> tag is used to change the background
color of the webpage?
a. background b. bgcolor c. link d. vlink
6. Which attribute of the <body> tag is used to change the background
image of the webpage?
a. background b. bgcolor c. link d. vlink
7. Which element is used to organize or group the contents of the webpage?
a. article b. container c. heading d.
paragraph
a. 5 b. 6 c. 7 d. unlimited
8. Which attribute of the <body> tag is used to change the color of the
10. Which of the following is the use of <hgroup> element?
visited hyperlinks in the webpage?
a. To create sections for the articles in the webpage.
a. alink b. elink c. link d. vlink
b. To create subsections in the webpage.
9. How many default levels do headings have?
c. To group the headings in the webpage.
d. All of the above.

12
HOW TO USE THIS MODULE?
Before starting the module, I want you to set aside other tasks that will
disturb you while enjoying the lessons. Read the simple instruction below to
successfully enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on
this module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

 Expectations - These are what you will be able to know after completing
the lessons in the module.
 Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
 Looking Back - This section will measure what learnings and skills that
you understand from the previous lesson.
 Brief Introduction-This section will give you an overview of the lesson.
 Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
 Remember - This section summarizes the concepts and applications of
the lessons.
 Checking your Understanding - It will verify how you learned from the
lesson.
 Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: CREATING A SIMPLE WEBPAGE

EXPECTATIONS
Upon completion of the module, learners should be able to:
 create, view, save, and exit an HTML document; and
 insert header, footer, navigation, article, and section in an HTML document.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Which of the following is not a way in opening the Notepad program in


Windows 10?
a. Press Windows(logo)+R, type Notepad and then select Ok.
b. Select the Start button on the taskbar and then choose Notepad.
c. Select Start. Choose Programs and then select Windows Accessories. Scroll
to Notepad and select it.
d. Type note in the search box and select Notepad in the search results.
2. When saving an HTML document, always change the file type to All Files
and use file extension.
a. .html b. .txt c. .web d. .xsl
3. What program is used to view HTML documents?
a. Adobe Reader b. MS Office c. Notepad d. web
browser
4. If changes are made to HTML code, which button should be clicked to view
the changes?
a. back b. home c. next d. refresh
5. Which element serves as a container for introductory contents or
navigational links in an HTML document?
a. footer b. header c. navigation c. section
6. Which element allows the web developer to link important
contents?
a. footer b. header c. navigation d. section
7. Which element identifies self-contained composition which could be
distributed and shared to other websites and platforms independently?
a. articles b. header c. navigation d. section
8. Which element is a structural element used to create a group for
related elements?
a. article b. footer c. header d. section
9. Which of the following is an example of content that can be an
article?
a. advertisements b. Facebook posts c. news articles d.
videos
10. Which of the following is not intended in the contents a header may
contain?
a. copyright b. links c. logo d.
search box

3
LOOKING BACK TO YOUR LESSON

Directions: Write the correct opening and closing tags on the different
elements below.

1. Title

2. Head

3. Heading 1

4. Body

5. Section

6. Heading
group

7. Article

8. Footer

9. Header

10. Navigation

4
BRIEF INTRODUCTION

Webpages can be created, formatted, and developed using professional HTML


editors. However, for learning HTML it is recommended to use a simple text editor like
Notepad (PC) or TextEdit (Mac). Using a simple text editor can provide more room in learning
the basic structure and formatting of a webpage.

Creating an HTML Document

An HTML editor or Word processing program can be used in creating an HTML


document, but the Notepad is the easiest and most common program used. There are
several ways to open Notepad in Windows 10.

1. Select the Start button on the taskbar and then choose Notepad.
2. Type note in the search box and select Notepad in the search results.
3. Right-click in a blank area in the desktop. Select New in the menu and select Text
Document. Double-click the document.
4. Press Windows(logo)+R, type Notepad and then select OK.
5. Select Start. Choose All Apps and then select Windows Accessories. Scroll to
Notepad and select it.

5
Saving an HTML Document

After writing the codes, the HTML document should be saved so it can be viewed
and worked on again in the future.
1. On the Menu bar, click File and click Save or Save As.
2. On the Save As dialog box, type your file name in the File name box.
3. When saving, always change the file type to All Files and use .html or .htm file
extension.
4. Click Save.

Viewing an HTML Page

HTML documents are viewed using a web browser.


1. Find the HTML file to be viewed, right-click on it, and choose Open With from the
menu.
2. Select the web browser to use in viewing the webpage. In the example below,
Google
Chrome is the web browser used.

6
The HTML file can now be viewed in the web browser.

If changes are made to the HTML code, click the Refresh button to apply and view
the changes made.

Using Header

The header element serves as a container for introductory contents or navigational


links of your HTML document. Header element uses the <header> </header> tags. The
said element may also contain the following:
 one or more heading elements ( <h1> - <h6> )
 logo or icon
 main navigation
 links
 search box

7
Using Navigation

Navigation allows the web developer to link important contents. The <nav> tag
defines a set of navigation links. Links in a <nav> element may go to contents within the
page, to other pages or both. Always remember that not all links of a document should be
inside the <nav> element. The <nav> element is intended only for major block of
navigation links.

Creating an Article

The <article> element identifies self-contained composition which could be


distributed and shared to other websites and platforms independently. The <article>
element is can be used in blog posts, news articles, magazine articles, reviews, product
description, and similar contents.

8
Creating a Section

The <section> element is a structural element used to create a group for


related elements. Each <section> usually comes with one or more heading elements.

9
Using Footer

The <footer> element is a structural element used to identify the footer of a


page, document, article, or section. A <footer> may include the copyright, authorship
information, contact information, or navigational elements related to the contents of the
parent element. Several <footer> elements can be used in one HTML document.

10
ACTIVITY:

A. Directions: Write TRUE if the statement is correct and FALSE if not.

1. The section element represents a universal section of a document that


may contain just about anything and usually comes with a heading.
2. An article element represents a self-contained composition in a
document which can be distributed and shared to other websites
independently.
3. Navigation element allows users to link important groups.
4. The header and footer element always come in a pair.
5. The header element may contain a footer, article, and section.
6. Google Chrome is a web browser.
7. An HTML document can be viewed using any web browser.
8. Each tag has a different purpose.
9. Attributes should always have a value.
10. A footer may contain a newspaper or magazine article, forum post, blog
entry, book, review, or product description.

B.Directions: Practice creating and aligning headings. Copy the codes below and apply
the following format:

 Use Heading 1 in the title <html>


“Our Core Values” <head>
 Align heading 1 to the <title>Department of Education<title>
center </head>
 Save HTML document with <body>
Our Core Values
file name: depedcorevalues
Maka-Diyos<br>
Maka-tao<br>
Makakalikasan<br
> Makabansa<br>
</body>
</html>

REMEMBER

An HTML editor or Word processing program can be used in creating an HTML


document, but the Notepad is the easiest and most common program used. After writing the
codes, the HTML document should be saved with the .html or .htm file extension so it can be
viewed and worked on again in the future. HTML documents are viewed using a web
browser.

The header element serves as a container for introductory contents or navigational


links of your HTML document. Navigation allows the web developer to link important
contents. The <article> element identifies self-contained composition which could be
distributed and shared to other websites and platforms independently. The <section>
element is a structural element used to create a group for related elements. The <footer>
element is a structural element used to identify the footer of a page, document, article, or
section.
11
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Carl just finished writing the codes of his HTML document. He was instructed
by his teacher to use the file name assignment1. What should be the complete
file name of his HTML document?
a. assignment1.html c. assignment1.web
b. assignment1.txt d. assignment1.xsl

2. After saving his HTML document, Carl would like to check if his assignment
by viewing it. Which of the following programs would you suggest he use?
a. Adobe Reader c. Google Chrome
b. Google Classroom d. Microsoft Word

3. Cia’s assignment is to create a webpage of their school. All of them in the


class were given a soft copy of their school’s logo. Which element should
contain the school logo in her HTML document?
a. article c. footer
b. header d. section

4. Part of Cia’s a webpage is a news article about their school’s recent program.
Which element should contain this content in her HTML document?
a. article c. footer
b. header d. section

5. Lastly, Cia needs to put the copyright information of the school


webpage.
Which
a. element should contain this contentc.infooter
article her HTML document?
b. header d. section

12
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. What program is used to view HTML documents?


a. Adobe Reader b. MS Office c. Notepad d. web
browser
2. When saving an HTML document, always change the file type to All Files
and use file extension.
a. .html b. .txt c. .web d. .xsl
3. If changes are made to HTML code, which button should be clicked to view
the changes?
a. back b. home c. next d. refresh
4. Which element serves as a container for introductory contents or
navigational links in an HTML document?
a. footer b. header c. navigation c. section
5. Which element is a structural element used to create a group for
related elements?
a. article b. footer c. header d. section
6. Which element identifies self-contained composition which could be
distributed and shared to other websites and platforms independently?
a. articles b. header c. navigation d. section
7. Which element allows the web developer to link important contents?
a. footer b. header c. navigation d. section
8. Which of the following is an example of content that can be an article?
a. advertisements b. Facebook posts c. news articles d.
videos
9. Which of the following is not intended in the contents a header may
contain?
a. copyright b. links c. logo d.
search box
10. Which of the following is not a way in opening the Notepad program
in Windows 10?
a. Press Windows(logo)+R, type Notepad and then select Ok.
b. Select the Start button on the taskbar and then choose Notepad.
c. Select Start. Choose Programs and then select Windows Accessories. Scroll
to Notepad and select it.
d. Type note in the search box and select Notepad in the search results.

13
HOW TO USE THIS MODULE?
Before starting the module, I want you to set aside other tasks that will
disturb you while enjoying the lessons. Read the simple instruction below to
successfully enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on
this module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

 Expectations - These are what you will be able to know after completing
the lessons in the module.
 Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
 Looking Back - This section will measure what learnings and skills that
you understand from the previous lesson.
 Brief Introduction-This section will give you an overview of the lesson.
 Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
 Remember - This section summarizes the concepts and applications of
the lessons.
 Checking your Understanding - It will verify how you learned from the
lesson.
 Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: CREATING A SIMPLE WEBPAGE

EXPECTATIONS
Upon completion of the module, learners should be able to:
 create a paragraph;
 use attributes for <p>;
 add single and multiple breaks;
 add horizontal rule;
 use attributes for <hr>; and
 insert ordered and unordered list.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Which element defines a paragraph and always starts a new line?


a. header b. horizontal rule c. line break d.
paragraph
2. What is the opening and closing tag of the paragraph element?
a. <p> </p> b. <pa> </pa> c. <par> <par> d. <pg>
</pg>
3. Which attribute of <p> indicates its horizontal alignment?
a. adjust b. align c. placement d.
position
4. Which tag creates a line break or a new line?
a. <br> b. <hr> c. <p> d. <ul>
5. Which of the following content is using line break most useful?
a. essays b. poems c. tables d. titles
6.Which tag defines a thematic break in an HTML page and places a
horizontal rule or line that extends to the web browsers width?
a. <br> b. <hr> c. <p> d. <u>
7. Which attribute of horizontal rule indicates its size in pixels?
a. area b. height c. size d. unit
8. Which attribute of horizontal rule removes its default shading?
a. nocolor b. nohue c. noshade d. notone
9. Which type of list is used to list items for which the order of items matter?
a. definition list b. ordered list c. random list d.
unordered list
10. Which tag is used to list item in both ordered and unordered list?
a. <i> b. <it> c. <li> d. <op>

3
LOOKING BACK TO YOUR LESSON

Directions: Write the function and correct opening and closing tags of the
following elements below.

Element Function Opening & Closing Tag

1. Header

2. Footer

3. Article

4. Navigation

5. Section

4
BRIEF INTRODUCTION

Most of the HTML elements that make up a webpage are usually text elements. All of
the text that can be seen in a webpage, which includes the titles, headers, and paragraphs,
are made using text elements. That is why text elements play a very important role in final
design and appearance of a webpage.

Creating a New Paragraph

The HTML <p> element defines a paragraph. A paragraph always starts on a new
line, and web browsers automatically add white space (margin) before and after a paragraph.

Aligning a Paragraph

HTML paragraphs can be aligned using the paragraph tag pair <p align=“left”>,
<p align=“right”> or <p align=“center”>.

5
Attribute Function Values
align It indicates the horizontal alignment of the left
paragraph right
Ex. <p align=“right”>This paragraph center
should appear at the right side of justify
the screen</p>

In HTML, the display cannot be changed by adding extra spaces or extra lines in the
HTML code. The browser automatically removes any extra spaces and lines when the page
is displayed.

6
Adding Line breaks

The <br> tag create a line break or a new line. It is useful for writing addresses
or poems since web browsers ignore white spaces and pressing Enter in the keyboard does
not necessarily create a new line. The <br> tag is an empty tag which means that is has
no end tag.

7
Adding Horizontal Rule

The <hr> tag defines a thematic break in an HTML page, and is most often displayed
as a horizontal rule. The horizontal rule tag places a horizontal rule or line that extends to the
web browser’s width. The <hr> element is used to separate content (or define a change) in
an HTML document.

Attribute Function Values


align It indicates the horizontal alignment of the left
horizontal rule. right
Ex. <hr align=“center”> center
size It indicates the size of the horizontal rule in number of pixels
pixels.
Ex. <hr size=“12”>

8
width It indicates the width of the horizontal rule number of pixels or number
in pixels or percent of the width displayed expressed as percent
by the web browser.
Ex. <hr width=“300”>
noshade It removes the default shading of the none
horizontal rule.
Ex. <hr noshade>
color It indicates the color of the horizontal rule. assigned name or
Ex. <hr color=“blue”> hexadecimal value of the
color

Modifying Horizontal Rules

The width, length, and shading of horizontal rules can also be adjusted. GIF
images can also be used to create graphic horizontal rules.

9
Ordered List

Ordered lists are used to list items for which the order of items matter. To create an
ordered list, the <ol> </ol> tag is used. This is the type of list where each item is
numbered usually starting at 1 but this can be changed using the start attribute. Each item
in this list is starts with the <li> tag.

The ordered list has different types of numbering and can be specified
by putting the specified value for the type attribute.
 1 for regular numbering (1, 2, 3, 4, 5, etc.) (default)
 a for lowercase alphabet (a, b, c, d, e, etc.)

10
 A for uppercase alphabet (A, B, C, D, E, etc.)
 i for lowercase Roman Numeral (i, ii, iii, iv, v, etc.)
 I for uppercase Roman Numerals (I, II, III, IV, V, etc.)
Attribute Function Values
type It indicates the type of numbering to be used in the list. 1, a, A, i, I
Ex. <ol type=“A”></ol>
start It indicates the value or number of the first item in the any number
list.
Ex. <ol type=“1” start=“2”></ol>

Unordered List

An unordered list is a list which the order of the list items does not matter. The ul
element opens and closes an unordered list. The items on the list are enclosed with list item,
<li>, tags.

11
There are different types of bullet for unordered list. It can be specified by putting the
specified value for the type attribute.
 disc to set the list item marker to a bullet (default), ex. <ul type=“disk”>
 circle to set the list item marker to a circle, ex. <ul type=“circle”>
 square to set the list item marker to a square, ex. <ul type=“square”>
 none to list the items without mark

Attribute Function Values


type It indicates the type of bullet to be used in the list. disc
Ex. <ul type=“disc”></ul> circle
square

12
ACTIVITY:

Directions: Write the codes for the following outputs.

1.

2.

REMEMBER

The HTML <p> element defines a paragraph. A paragraph always starts on a new
line, and web browsers automatically add white space (margin) before and after a
paragraph. HTML paragraphs can be aligned using the paragraph tag pair <p
align=“left”>, <p align=“right”> or <p align=“center”>. In HTML, the display
cannot be changed by adding extra spaces or extra lines in the HTML code. The browser
automatically removes any extra spaces and lines when the page is displayed.

The <br> tag create a line break or a new line. It is useful for writing addresses
or poems since web browsers ignore white spaces and pressing Enter in the keyboard does
not necessarily create a new line. The <br> tag is an empty tag which means that is has
no end tag. The horizontal rule tag places a horizontal rule or line that extends to the web
browser’s width. The <hr> element is used to separate content (or define a change) in
an HTML document. The width, length, and shading of horizontal rules can also be adjusted.
GIF images can also be used to create graphic horizontal rules.

Ordered lists are used to list items for which the order of items matter. To create an
ordered list, the <ol> </ol> tag is used. This is the type of list where each item is
numbered usually starting at 1 but this can be changed using the start attribute. An
unordered list is a list which the order of the list items does not matter. The ul element
opens and closes an unordered list. Each item in this list is starts with the <li> tag.

13
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Elona would like to put an About Me content in her own webpage. This
content will contain a short description or introduction about her. Which element
should she use to properly display her content?
a. article c. line break
b. header d. paragraph

2. After inserting her About Me content, Elona realized her page would look
better if she will put a horizontal line below her title “About Me”. Which element
should she use?
a. horizontal rule c. ordered list
b. line break d. paragraph

3. Aside from her brief description, Elona would also like to insert the poem she
wrote about herself. Which element should she use to properly display it in the
web browser?
a. horizontal rule c. ordered list
b. line break d. paragraph

4. After her poem, Elona would also like to list down her hobbies. Which is
the correct type of list to use in this?
a. definition list c. random list
b. ordered list d. unordered list

5. Lastly, Elona would like to include a list of her Top 5 most favorite songs.
Which is the correct type of list to use in this?
a. definition list c. random list
b. ordered list d. unordered list

14
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Which element defines a paragraph and always starts a new line?


a. header b. horizontal rule c. line break d.
paragraph
2. Which attribute of <p> indicates its horizontal alignment?
a. adjust b. align c. placement d.
position
3. What is the opening and closing tag of the paragraph element?
a. <p> </p> b. <pa> </pa> c. <par> <par> d. <pg>
</pg>
4. Which of the following content is using line break most useful?
a. essays b. poems c. tables d. titles
5. Which tag creates a line break or a new line?
a. <br> b. <hr> c. <p> d. <ul>
6.Which tag defines a thematic break in an HTML page and places a
horizontal rule or line that extends to the web browsers width?
a. <br> b. <hr> c. <p> d. <u>
7. Which attribute of horizontal rule removes its default shading?
a. nocolor b. nohue c. noshade d. notone
8. Which attribute of horizontal rule indicates its size in pixels?
a. area b. height c. size d. unit
9. Which type of list is used to list items for which the order of items matter?
a. definition list b. ordered list c. random list d.
unordered list
10. Which tag is used to list item in both ordered and unordered list?
a. <i> b. <it> c. <li> d. <op>

15
HOW TO USE THIS MODULE?

Before starting the module, I want you to set aside other tasks that will
disturb you while enjoying the lessons. Read the simple instruction below to
successfully enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on
this module.
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

● Expectations - These are what you will be able to know after completing
the lessons in the module.
● Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
● Looking Back - This section will measure what learnings and skills that
you understand from the previous lesson.
● Brief Introduction-This section will give you an overview of the lesson.
● Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
● Remember - This section summarizes the concepts and applications of
the lessons.
● Checking your Understanding - It will verify how you learned from the
lesson.
● Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: CREATING AND MODIFYING TABLES

EXPECTATIONS
Upon completion of the module, learners should be able to:
● nest tables;
● format table border; and
● add image to a table.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space
provided.
1. What are nested
tables? c. tables within rows
a. tables within headers d. tables within tables
b. tables within lists
2. Which of the following code creates an invisible border?
a. <table border=“0”> c. <table border=“none”>
b. <table border=“0%”> d. <table noborder>
3. Which of the following is the correct HTML code in adding image to a cell?
a. <table><img src=“Sample Picture.jpg”</table>
b. <td><img src=“Sample Picture.jpg”</td>
c. <tr><img src=“Sample Picture.jpg”</tr>
d. none of the above
4. Which table data attribute is used to add background color in a cell?
a. bcolor b. bgcolor c. ccolor d.
cellcolor
5. Which table data attribute merges multiple rows?
a. colspan b. nowrap c. rowspan d.
valign
6. What table data attribute merges multiple cells?
a. colspan b. nowrap c. rowspan d.
valign
7. Which table data attribute prevents or removes word wrapping in the cell?
a. nowrap b. nwrap c. wrap=“none” d.
wrap=“0”
8. Which table data attribute is used to add background image in a cell?
a. background b. backg c. bgcolor d.
bground
9. Which table attribute indicates the color of the border?
a. background b. bgcolor c. border d.
bordercolor
10. Which table attribute indicates the horizontal alignment of
the table?
a. align b. halign c. position d. valign

3
LOOKING BACK TO YOUR LESSON

Directions: Write the correct HTML code of the table below.

SECTIONS PER GRADE LEVEL

GRADE 7 GRADE 8 GRADE 9 GRADE 10

Einstein Euclid Curie Descartes

Gates Linnaeus Dalton Newton

Pythagoras Mendel Napier Quesnay

4
BRIEF INTRODUCTION

Like lists, tables can be nested. Most web page developers use this strategy to
create a more appealing layout and structure. Nesting tables simply means creating a table
inside an existing table. Nesting tables can sometimes lead to complex layouts and
complicated HTML code. It can be tricky sometimes because of the number of tags and
attributes that should be in their correct order to get the desired layout.

Tables Inside Tables

To nest a table, the complete structure must be included, such as the <table>
element.
Nested tables should always be placed between <td> … </td> tags.

HTML code:

Output:

5
Creating Tables with Invisible Border

Tables can also be inserted without the borders being visible. Using the attribute of the
<table> element, set the value of border into 0.

HTML code:

Output:

6
Inserting an Image to a Table

Aside from plain text, images can also be inserted inside cells of a table. Simply use
the tag pair <td><img src=“url ”></td>.

HTML code:

Output:

7
ACTIVITY:

A. Directions: Practice creating a table by making your “My Favorites Page”. Follow the
structure/layout below and supply the needed information. Use the font, color, background,
etc. of your choice and apply your creativity!

TLE-ICT 10 Get to know my favorites!

(Your full name)

Favorite Food Favorite Pet Favorite Singer Favorite Movie

(name of your (name of your (name of your (name of your


favorite food) favorite pet) favorite singer) favorite movie)
(insert image of your (insert image of your (insert image of your (insert image of your
favorite food) favorite pet) favorite singer) favorite movie)

REMEMBER

To nest a table, the complete structure must be included, such as the <table>
element.
Nested tables should always be placed between <td> … </td> tags.

Tables can also be inserted without the borders being visible. Using the attribute of the
<table> element, set the value of border into 0. On the other hand, for visible borders, the
value of the border attribute can be set to any number. Bordercolor can also be defined
either through color names or their hex code.

Aside from plain text, images can also be inserted inside cells of a table. Simply use
the tag pair <td><img src=“url ”></td>.

8
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

1. Anya needs to submit the activity in webpage design given by their TLE-ICT
teacher. According to the instructions, she needs to apply nesting tables in a
webpage. What does nesting tables mean?
a. Inserting a table inside a image c. Inserting a table inside an paragraph
b. Inserting a table inside a list d. Inserting a table inside a table

2. Anya has already figured out what nesting tables mean and has successfully
nested a table in her webpage. However, she wants to remove the border of the
outside table. What should be the value of her border attribute?
a. 0 c. no border
b. 0% d. none

3. When Anya removed the border visibility of her outer table, she wanted to
change the color of her inside table to red. What is the correct HTML code that
she should use?
a. <table border=“0” bordercolor=“red”> … </table>
b. <table border=“1” bordercolor=”red”> … </table>
c. <table border=“none” bordercolor=“red”> … </table>
d. <table bordercolor=”red”> … </table>

4. After changing the bordercolor of her inside table, Anya wants to add
background image of the whole table. What is the correct HTML code that she
should use?
e. <table background=“heart.png”>
f. <table bgcolor=“heart.png”>
g. <table bground=“heart.png”>
h. <table background=“/heart.png”>

5. Lastly, Anya needs to insert an image inside a cell in the table. Which of
the following HTML code can she use to insert an image in the table?
i. <td img src=“C:\Downloads\welcome.jpg”> </td>
j. <td>img src=“C:/Downloads/welcome.jpg”> </td>
k. <td>img src=“triangle.jpg”> </td>
l. <td>img src=“/triangle.jpg”> </td>

9
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space
provided.

1. Which border=“0”>
a. <table of the following code creates an invisible
c. <tableborder?
border=“none”>
b. <table border=“0%”> d. <table noborder>
2. Which table attribute indicates the color of the border?
a. background b. bgcolor c. border d. bordercolor
3. Which table data attribute is used to add background color in a cell?
a. bcolor b. bgcolor c. ccolor d. cellcolor
4. Which table data attribute merges multiple rows?
a. colspan b. nowrap c. rowspan d. valign
5. What table data attribute merges multiple cells?
a. colspan b. nowrap c. rowspan d. valign
6. Which table data attribute prevents or removes word wrapping in the cell?
a. nowrap b. nwrap c. wrap=“none” d. wrap=“0”
7. Which table data attribute is used to add background image in a cell?
a. background b. backg c. bgcolor d. bground
8. Which table attribute indicates the horizontal alignment of the table?
a. align b. halign c. position d. valign
9. Which of the following is the correct HTML code in adding image to a cell?
a. <table><img src=“Sample Picture.jpg”</table>
b. <td><img src=“Sample Picture.jpg”</td>
c. <tr><img src=“Sample Picture.jpg”</tr>
d. none of the above
10. What are nested tables?
a. tables within headers c. tables within rows
b. tables within lists d. tables within tables

10

You might also like