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
Most of the coding you will do involve on texts that people will see when they visit
your page. Therefore, you should know where to place your text, set the size, style, and the
colors that you will use.
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 [Link] 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
Faces
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
<sup></sup> Displays the text in superscript
<sub></sub> 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
breaks
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
