Scribd
Upload
58 views11 pages

Computer-Programming HTML Shelaine Paciente-Las Q3 M2.1

This document provides instructions and examples for an activity on creating HTML5 documents using advanced techniques with JavaScript and CSS3. It includes examples of using different HTML tags for formatting text, including font, background color, and text alignment tags. It then lists three activities for students to complete using the examples provided to create HTML pages with specified content and formatting. The activities are to be printed and submitted along with the code.

Uploaded by

Samuel Danos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views11 pages

Computer-Programming HTML Shelaine Paciente-Las Q3 M2.1

This document provides instructions and examples for an activity on creating HTML5 documents using advanced techniques with JavaScript and CSS3. It includes examples of using different HTML tags for formatting text, including font, background color, and text alignment tags. It then lists three activities for students to complete using the examples provided to create HTML pages with specified content and formatting. The activities are to be printed and submitted along with the code.

Uploaded by

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

DEPARTMENT OF EDUCATION

11/
DIVISION OF SAN JOSE DEL MONTE CITY
San Ignacio St., Poblacion, City of San Jose del Monte 3023
12

LEARNING
ACTIVITY SHEETS
(LAS)
Technical-Vocational-Livelihood
COMPUTER PROGRAMMING
Quarter 3 – Module : 2.1
Create HTML5 document using advanced
techniques with JavaScript and CSS3
(TLE_ICTP.NET 11-12PPHJC-IIj-IIIa-d-30)
Pretest
Directions: Choose the letter of the right answer. Write the letter of the correct answer on a
separate sheet of paper.

I. Choose letter of the right answer.


1. What is the correct HTML element for inserting a line break?
a. <lb> b. <break> c. <br> d. <hr>
2. Choose the correct HTML element to define bold text.
a. <b> b. <i> c. <em> d. <small>
3. Choose the correct HTML element to define emphasized text.
a. <b> b. <i> c. <em> d. <small>
4. Which character is used to indicate an end tag?
a. < b. / c. * d.^}
5. Which HTML element defines the title of a document?
a. <title> b. <meta> c. <head> d. <body>
6. Choose the correct HTML element to define big text.
a. <small> b. <big> c. <em> d. <strike>
7. This element is used to format the size, typeface, and color of the enclosed text.
a. heading b. bgcolor c. font tag d. text alignment

II. Choose the correct tag in the box to complete the code.
a. >
8. <br> <em>This text is Emphasized/em>
b. <
9. <font color=“cyan" size "2" face="Arial Black"> HTML </font>
c. =
10. <head><title> fonts<title></head> e
d. “
11. <bdy bgcolor=“Green” > f
e. /
12. <p style=text-align: right"> d
f. O
13. <br> <ttThis text is Teletype</t> a
g. t
14. <body bgcolor = "lighgreen"> g
h. e
15. <font siz="6" face="Arial"> h
Objectives
This module will help you to:

a. recognize the use of different html tags,


b. apply different html tags using notepad.; and
c. create static pages using new features available in HTML 5.

Key Concepts
HTML
AN INTRODUCTION TO WEB PAGE PROGRAMMING
Line Break & Horizontal Line Tag

• If you want a line break or a new line without starting a new paragraph, use the <br> tag.
• Defines a horizontal line use <hr> tag.
<br> <hr> elements are empty HTML element.

EXAMPLE #1:

<HTML>
<HEAD>
<TITLE>
Line Break & Horizontal Line Tag
</TITLE>
</HEAD>
<BODY>
SAN JOSE DEL MONTE NATIONAL HIGH SCHOOL <hr>
<br> Brgy. Yakal, Francisco Homes, City of San Jose Del Monte, Bulacan

</BODY>
</HTML>

OUTPUT:
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<super> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
<strike> Defines strike text

EXAMPLE #2:
<html>
<head></head>
<body>
<b>This text is Bold</b>
<br> <em>This text is Emphasized</em>
<br> <i>This text is Italic</i>
<br> <small>This text is Small</small>
<br> This is <sub> Subscript</sub> and <sup> Superscript</sup>
<br> <strong>This text is Strong</strong>
<br> <big>This text is Big</big>
<br> <u>This text is Underline</u>
<br> <strike>This text is Strike</strike>
<br> <tt>This text is Teletype</tt>
</body>
</html>

OUTPUT:
Font Tag
• This element is used to format the size, typeface, and color of the enclosed text.
• The commonly used fonts for web pages are Arial, Comic Sans MS, Lucida Sans Unicode,
Arial Black, Courier New, Times New Roman, Arial Narrow, Impact, Verdana.
• The size attribute in font tag takes values from 1 to 7.

EXAMPLE #3:
<html>
<head><title> fonts</title></head>
<body>
<br><font color= “green" size="7" face="Arial"> HTML </font>
<br><font color= “red" size="6" face="Comic Sans MS "> HTML </font>
<br><font color= “blue" size="5" face="Lucida Sans Unicode"> HTML </font>
<br><font color= “black" size="4" face="Courier New">HTML</font>
<br><font color= “magenta" size="3" face="Times New Roman"> HTML </font>
<br><font color= “cyan" size="2" face="Arial Black"> HTML </font>
<br><font color= “pink" size="1" face="Impact"> HTML </font>
</body>
</html>

OUTPUT:

Background & Text Color Tag


• The attribute bgcolor is used for changing the background color of the page.

<body bgcolor= “Green” >

• Text is used to change the color of the enclosed text.

<body text= “White”>


EXAMPLE #4:
<html>
<head><title> fonts</title></head>
<body>
<body bgcolor= “Green” >
<br>
<body text= “White”>
<font size="7" face="Arial"> SAN JOSE DEL MONTE NATIONAL HIGH SCHOOL
</font> <hr>
</body>
</html>

OUTPUT:

Text Alignment Tag

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is
default if text direction is left-to-right, and right alignment is default if text direction is right-to-
left):

1.Left alignment < style="text-align: left">


2.Right alignment <style="text-align: right">
3.Center alignment < style="text-align: center”>
EXAMPLE #5:
<html>
<head>
<title>TEXT ALIGNMENT</title>
</head>
<body bgcolor = "lightgreen">

<p style="text-align: center">


<font size="7" face="Arial">
SAN JOSE DEL MONTE NATIONAL HIGH SCHOOL </font> <hr></h1></p>
<p style="text-align: left">
<font size="6" face="Arial">
INFORMATION AND COMMUNICATION TECHNOLOGY </font></h2></p>
<p style="text-align: right">
<font size="6" face="Arial"> PROGRAMMING IS COOL </font></h3></p>
</body>
</html>

OUTPUT:

Activity 1
Direction: Using the HTML editor and example #1, run a program that will show the following
result: (10pts)

YOUR FULLNAME HERE_M2.1act1 (ex. PACIENTE_SHELAINE_R_M2.1act1)

BODY SHOULD CONTAINS THE FOLLOWING:


1. Break Line
2. Name of your school
3. Address of your school

NOTE: All outputs should print on short bond paper together with the code.
Activity 2
Direction: Using the HTML editor and example #2 and #3, run a program that will show the
following result: (10pts)

YOUR FULLNAME HERE_ M2.1act1 (ex. PACIENTE_SHELAINE_R_ M2.1act1)

BODY SHOULD CONTAINS 5 SENTENCES


1. Using 5 different colors
2. Using 5 different font sizes

NOTE: All outputs should print on short bond paper together with the code.

Activity 3
Direction: Using the HTML editor and example #4 and #5, run a program that will show the
following result: (10pts)

Nsns
YOUR FULLNAME HERE_ M2.1act1 (ex. PACIENTE_SHELAINE_R_ M2.1act1)

BODY SHOULD CONTAINS THE FOLLOWING:


1. Name of the school (centered)
2. Break line
3. 3 paragraph you used in module 2
a. Centered
b. Left
c. Right

NOTE: All outputs should print on short bond paper together with the code.
Posttest
Direction: Supply the missing code to run the program properly.
1. <p =” About HTML”>HTML is a mark-up language</p>

2. Use the correct HTML tag to add a heading with the text "London”. _______ uses
markup tags to describe web pages.

<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants. </p>
<h1>London</h1>

3. Add six headings to the document with the text "ICT". (6 points)

<html>
<body>

</html>
</body>

4. Add a horizontal rule between the heading and the paragraph.

<h1>London</h1>

<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants. </p>

5. Supply the missing code to center align the paragraph.


<p style=” : center;”>This is a paragraph</p>
Answer Key to Pretest

h 15.
g 14.
a 13.
d 12.
f 11.
e 10.
c 9.
b 8.
c 7.
b 6.
a 5.
b 4.
c 3.
a 2.
c 1.

References
"Html." Share and Discover Knowledge on SlideShare. Accessed April 26, 2021.
https://www2.slideshare.net/NandakumarGanapathy/html-49983100?from_action=save.
Prepared by:

Teacher - Developer: Shelaine R. Paciente

Checked by:

Content Evaluator / ICT Coordinator (SHS): Cresenciano V. Ventura

LR Coordinator/Layout Evaluator: Avegril A. Arpon

Language Evaluator: Genlyn N. Ronquillo

Noted by:

Assistant Principal: Maria Margarita O. Joven

School Head: Engr. Danilo A. Casas


Principal IV

REMINDERS

1. Use multiple choice question for pretest and posttest


a. 15 items for grade 7 to grade 12 (4 options)
b. 10 items for grade 4 to grade 6 (4 options)
c. 5 items to kindergarten to grade 3 (3 options)

2. Use locally developed template and observe proper spacing.

3. Follow guidelines in writing multiple choice questions and other assessments.

4. Give title for each activity.

5. Give clear direction so that learners can comprehend and answer the activities or assessment
accordingly.

6. Instead of using italics, use boldface for borrowed word/s once.

7. Follow rules of using common and proper nouns.

You might also like