Scribd
Upload
18 views13 pages

Q3 MODULE2 G10 PROGRAMMING MANGALDAN-NHS-Final

This module teaches Grade 10 students how to customize font styles and colors in HTML. It covers methods for setting text color using color names, hex codes, and RGB values, as well as font attributes like size and face. The document includes examples and exercises to reinforce learning.

Uploaded by

sorianodesiree155
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
18 views13 pages

Q3 MODULE2 G10 PROGRAMMING MANGALDAN-NHS-Final

This module teaches Grade 10 students how to customize font styles and colors in HTML. It covers methods for setting text color using color names, hex codes, and RGB values, as well as font attributes like size and face. The document includes examples and exercises to reinforce learning.

Uploaded by

sorianodesiree155
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/ 13

Grade

10
TLE- ICT
COMPUTER PROGRAMMING
QUARTER 3 – MODULE 2
HTML - CUSTOMIZING FONT STYLE

Prepared by:

EUGENIO L. MOLINA
Teacher III
Mangaldan National High School
QUARTER III
WEEK II

I. LEARNING OBJECTIVES

After reading this module you will be able to apply the different ways on how to change
the color of the text in HTML and customize the font style.

II. INTRODUCTION

In this module we will see various ways of applying styles to an HTML document such
as adding color to the document. Seeing color as a major part of any website design, let us
look more closely at applying color to a web page. Fonts also play a very important role in
making a website more user friendly and increase content readability. Font face and color
depends entirely on the computer and browser that is being used to view your page but you
can use HTML <font> tag to add style, size, and color to the text on your website.

III. READINGS/LECTURES

HTML – Colors

Colors are very important to give a good look and feel to your website. You can specify
colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.

The <body> tag has the following attributes which can be used to set different colors:
• bgcolor − sets a color for the background of the page.
• text − sets a color for the body text.
• alink − sets a color for active links or selected links.
• link − sets a color for linked text.
• vlink − sets a color for visited links − that is, for linked text that you have already
clicked on.

HTML Color Coding Methods

These are the methods to set colors in your web page:


• Color names − You can specify color names directly like green, blue or red.
• Hex codes − A six-digit code representing the amount of red, green, and blue that
makes up the color.

1
• Color decimal or percentage values − This value is specified using the rgb( )
property.
Now we will see these coloring schemes one by one.

1. HTML Colors - Color Names

You can specify direct a color name to set text or background color. Here is the list of
standard 16 colors names and it is recommended to use them.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Example
Here is an example on how to set background of an HTML tag by color name.

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "blue" bgcolor = "green">


<p>Use different color names for for body and table and
see the result.</p>

<table bgcolor = "black">


<tr>
<td>
<font color = "white">This text will appear white
on black background.</font>
</td>
</tr>
</table>
</body>

</html>

2. HTML Colors - Hex Codes

A hexadecimal is a 6-digit representation of a color. The first two digits(RR) represent


a red value, the next two are a green value(GG), and the last are the blue value(BB). A
hexadecimal value can be taken from any graphics software like Adobe Photoshop,

2
Paintshop Pro or MS Paint. Each hexadecimal code will be preceded by a pound or hash
sign #. Here is a list of few colors using hexadecimal notation.

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

Example
Here are the examples to set background by color code in hexadecimal −

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Hex</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">


<p>Use different color hexa for for body and table and see the result.</p>

<table bgcolor = "#000000">


<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>

</html>

3. HTML Colors- Color decimal or percentage values

3
This color value is specified using the rgb( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0 and 255
or a percentage.

Following is a list to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

Example
Here are the examples to set background of an HTML tag by color code using rgb()
values −
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Font using RGB.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black
background.</font>
</td>

4
</tr>
</table>
</body>
</html>

HTML - Fonts

The font tag has three attributes called size, color, and face to customize your fonts.
To change any of the font attributes at any time within your webpage, simply use the <font>
tag. The text that follows will remain unchanged until you close with the </font> tag. You can
change one or all of the font attributes within one <font> tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a
future version of HTML. So they should not be used rather, it is suggested to use CSS styles
to manipulate your fonts.

Set Font Size

You can set content font size using size attribute. The range of accepted values is
from 1(smallest) to 7(largest). The default size of a font is 3.

Example
<!DOCTYPE html>
<html>

<head>
<title>Setting Font Size</title>
</head>

<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>

</html>

This will produce the following result


Font size = "1"
Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"

5
Font size = "6"
Font size = "7"
Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size
should be. You can specify it like <font size = "+n"> or <font size = "−n">

Example
<!DOCTYPE html>
<html>

<head>
<title>Relative Font Size</title>
</head>

<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>

</html>

This will produce the following result


Font size = "-1"
Font size = "+1"
Font size = "+2"
Font size = "+3"
Font size = "+4"
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the
page does not have the font installed, they will not be able to see it. Instead user will see the
default font face applicable to the user's computer.

Example
<!DOCTYPE html>
<html>

6
<head>
<title>Font Face</title>
</head>

<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

</html>

This will produce the following result

Times New Roman


Verdana
Comic Sans MS
WildWest
Bedrock

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their
computer. So, it is possible to specify two or more font face alternatives by listing the font
face names, separated by a comma.

<font face = "arial,helvetica">


<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

When your page is loaded, their browser will display the first font face available. If
none of the given fonts are installed, then it will display the default font face Times New
Roman.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that
you want by either the color name or hexadecimal code for that color.

Example
<!DOCTYPE html>
<html>

<head>

7
<title>Setting Font Color</title>
</head>

<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>

</html>

This will produce the following result


This text is in pink
This text is red

The <basefont> Element

The <basefont> element is supposed to set a default font size, color, and typeface for
any parts of the document that are not otherwise contained within a <font> tag. You can use
the <font> elements to override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will support relative
font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example
<!DOCTYPE html>
<html>

<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>

<p><font size = "+2" color = "darkgray">


This is darkgray text with two sizes larger
</font>
</p>

<p><font face = "courier" size = "-1" color = "#000000">


It is a courier font, a size smaller and black in color.
</font>
</p>
</body>

</html>

8
This will produce the following result

This is the page's default font.

Example of the <basefont> Element


This is darkgray text with two sizes larger
It is a courier font, a size smaller and black in color.

ACTIVITY 1: Match the following items. Write only the letter of the correct answer
in your answer sheet.

A. B.

1. A six-digit code representing the amount of red, A. <font>


green, and blue that makes up the color.
B. 3
2. It is a 6-digit representation of a color.
C. #FFFFFF
3. Sets a color for visited links.
D. Hex codes
4. Sets a color for active links or selected links.
E. alink
5. Sets a color for linked text.
F. link
6. A tag use to change the font attributes of a text.
G. Hexadecimal
7. The default size of a font.
H. vlink
8. The largest font value.
I. #000000
9. The hexadecimal code of color white
J. 7
10. The hexadecimal code of color black.
K. color names

9
SUMMATIVE EVALUATION

A. Write True if the statement is correct, otherwise write False. Write your answer
in your answer sheet.

1. In hexadecimal code, the first two digits(RR) represent a blue value, the next two
are a blue value(GG), and the last are the red value(BB)
2. The font tag is having three attributes called size, height, and face to customize
your fonts.
3. It is possible to specify two or more font face alternatives by listing the font face
names, separated by a comma.

4. The range of accepted values is from 1(smallest) to 8(largest). The default size of
a font is 1.

5. Each hexadecimal code will be preceded by a pound or hash sign #.

B. Provide the correct Hexadecimal Code for the different colors below. Write them
in your answer sheet.

______________1. BLACK _____________6. RED

______________2. GREEN _____________7. BLUE


______________3. FUCHSIA _____________8. GRAY
______________4. AQUA BLUE _____________9. YELLOW
______________5. WHITE _____________10. BROWN
C. Create the HTML Codes (using Hexa Code) for the given output below. Write
them in your answer sheet. (10 pts)

10
Key Answer

1. D
2. G
3. H
4. E
5. F
6. A
7. B
8. J
9. C
10. I

Reference: https://www.tutorialspoint.com/html/html_comments.htm
Learn to Code HTML & CSS –Develop and Style Website by: Shay Howe

11
ANSWER SHEET

NAME: ________________________________________ Score: ____________________


Gr. & Sec: ___________________ Subj. Teacher: _______________________________

12

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy