Quarter1_ICT Programming |Week 3

Learning Activity Sheet (LAS) for ICT PROGRAMMING

I. Learning Objectives
At the end of the lesson, the Grade 8 learners must have:

A. Specified font color, font size, character format and background color.
B. Identified color names and hex values.
C. Learned how to control line breaks and add invisible comment

II. Background Information for Learners

LESSON 3: Working with Fonts and Colors

Specifying Font Size

1. Add the <font> Tag Pair

The <font> tags allow you to control the size of your font.

Font

2. Add the font size Attribute

You can add attribute as follows: <font size=“value”>. The value can be numbers 1 to
7. The default size is 3 which will automatically be displayed if you will not specify the
size.

Font Size

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Notice that the value of the font size 1 to 7 are placed in quotes, that is the practice in
placing the size attributes in HTML. The font “size” attribute is the value being given.

The <br/> tag is an empty tag that is used to insert a line break after a word, phrase, or
sentence. This tag has no end tag in HTML. You use it all one where a line break as shown
below is needed.

3. Test your Page

Save your file and view the result.

Different Font Sizes

Font formatting will allow you to highlight certain words and phrases in the web site
by using larger fonts so that they will be emphasized. Use regular fonts for items of lesser
importance and for the rest of the body.

Note: The World Wide Web Consortium (W3C) has removed the <font> tag from its
recommendations and has encouraged the use of style sheets in CSS to define font styles
(size, color, and kind). However, many of the world’s web sites still use this tag. For the
purpose of this study, we will still use it. But once you learn CSS W3C, it recommends you
use style sheets instead to modify font character later on.

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Specifying Font Color

Font color provides life and excitement to your words, phrases, ad sentences. You can
also use it to highlight certain words for emphasis or focus.

1. Add the <font> Tag Pair

The <font> tags also allow you to control the color of your font aside from changing
the font size.

2. Add the font color Attribute

You can add attribute as follows: <font color=“value”>. The value can be color names
such as black, blue, red, green, or yellow or their hexadecimal or hex values. The default
color is black which will be automatically display if you will not specify the color.

Font Color

3. Test your Page

Save your file and view the result.

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Color Hex Values

Colors in HTML uses hexadecimal notation and combines colors Red, Green, and Blue
(RGB) color values to display on computer screens. The hex values utilize hexadecimal
notation between 000000 to ffffff to give finer color details. Hexadecimal value starts with a
pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two
letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The
combination between 000000 to ffffff will give you 16 million different colors. So, there are
many colors that you can use to emphasize or design your text. The following are the most
common colors with their hex values. These hex values can also be applied to other tags other
than the font, it can also be used for background color and others.

COMMON COLOR NAMES AND THEIR HEX VALUES

Hex Value Color Hex Value Color

#000000 Black #00ff00 Green

#ffffff White #0000ff Blue

#fff000 Red #999999 Gray

#800000 Maroon #ffff00 Yellow

#808080 Gray #c0c0c0 Silver

#00ff00 Lime #800080 Purple

#ffff88 Pale Yellow #000088 Dark Blue

#01f694 Light Green #aa33cc Lavender

Visit the site htmlcolorcodes.com for more html color reference.

Specifying Text Font

The font tag can also specify the text fonts that can be used in the web site. Utilizing
different fonts will allow you to have better variation between headings and body. The text
font is also known as the face in HTML. The fonts usually available in Windows computers
are Times New Roman and Arial. It is advisable to stick to these fonts in HTML but it should
not prevent you from using other fonts.

1. Add the <font> Tag Pair

The <font> tags can also allow you to specify the next font.

Font Face

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 2. Add the font face Attribute

You can also add attribute as follows: <font face=“value”>. The “value” are specified
as the font that you want to use. For the example below, we specified Arial, Impact, Times
New Roman, and Arial Black.

Font Face

3. Test the Page

Save your file and view the result.

Fonts with Different Font

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
Face Attributes

The fonts can have different attribute. They can be displayed in bold or boldface,
italics, underline, etc. which you can set them in HTML as well. There are many face attributes
that you can use to emphasize your text. The following are the most common used face
attributes.

COMMONLY USED FACE ATTRIBUTE

Tag Function

<b></b> Displays the text in boldface

<i></i> Displays the text in italics

<u></u> Displays the text with an underline

<strike></strike> Displays the text with strikethrough

 Displays the text in superscript

 Displays the text in subscript

<em></em> Displays the text with emphasis

<strong></strong> Displays the text with strength

<big></big> Displays the text with an increase in size

<small></small> Displays the text with a decrease in size

Specifying Character Format

You can create a bold, italics, underlines, strikes, subscripts, or superscripts text on your
page by specifying it in the face attribute on the <font> tags.

1. Add the Face Attribute on the <font> tags

Font Style

Font Size

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Notice that the face attribute tags are place inside the font tags and the word or words
enclosed within the face attribute tags are the ones that are changed.

2. Test the Page

Save your file and view the result,

Controlling Line Breaks

Text will continue to flow in one line until the text reaches the edge of the browser
window. Even if you press the Enter key, no new line will be created. The <br/> tag will create
a new line for the text that you want to appear on the next line. You can use multiple <br/>
tags for each line space that you want to create.

1. Add the <br/> Tag

The <br/> tag creates a line break or new line.

Line Break

Multiple Line Breaks

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 2. Test the Page

Save your file and view the result.

Text with line

Multiple line
breaks can create
spaces.

Nesting Color

You might want to have some text appear in a different color within the paragraph. You
can nest one <font> tag within another <font> tag.

1. Add the <font color=“..”> Tag

Nest Color

2. Test the Page

Save your file and view the result.

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Changing the Background Color of a Page

Changing the background color will definitely give life, excitement, and character to
any web site. If you love nature, then green would be the best color for your background. You
can change the background color of the page by using the bgcolor attribute <body
bgcolor=“value”>…</body>

1. Add the bgcolor Attribute

You can add the attribute as follows: <body bgcolor=“value”>. The value can be color
names or either hex values. The default color is white which will automatically display if
you will not specify the background color. The default value is actually set within your
browser which changed to other colors such as green, blue, or gray.

Background Color

2. Test the Page

Save your file and view the result.

Background Color

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Specifying the Background Image of a Page

In choosing a background image, you should remember the following:

• Use an image that will not distract the text and main content of the page.
• Do not use large image file because it will take a long time to load your page.
• The background should not show boundaries and grids when tiled.

1. Add the background Attribute

You can specify the background image of the page by using the background attribute
inside the body tag <body background=“value”>…</body>

Background Image

2. Test the Page

Save your file and view the result.

Text

Background Image

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 Adding Invisible Comments

Aside from white spaces, there are other things your Web browser ignores, these are
comments. Since they are not displayed by the browser, comments can be used to put notes,
explanation, or remarks as you are building more and complicated codes which you do not
want to be displayed.

1. Add the comment <!--…--> Tag Pair

The comment tag uses <!-- as a starting tag and --> as an end tag.

Invisible Comment

2. Test the Page

Save your file and view the result.

Invisible Comment

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS
 III. Links and/or Other References
Jemma Development Group (2010). Harnessing Computers 2nd Edition. Jemma, Inc.,
Philippines.

Prepared by:

J-Lynn B. Ramos
ICT Teacher, ANS JHS