Comp6 Module4 1st Quarter

Module 4– Formatting Text in HTML
5t
Module 4- Formatting Text in HTML
https://www.lifewire.com/free-typing-lessons-1356656
Expected Outcomes
At the end of the lesson, the learners should be able to:
1. Explain the use of format tag.
2. Apply the different kinds of formatting tags.
Questions to Ponder
Are you interested creating or designing a webpage, but you are not sure
where to start? Most programmers say that being familiar with HTML and the
different formatting tags are steppingstones for those who are interested in web
designing. In this module, you will discover the different kinds of formatting tags
and how to utilize them in creating a web page that can be shown in any browser
across the network.
Grade 6- Computer 23
“How does HTML Format Tags
Help?” The Concepts
HTML (Hypertext Markup

Language) is a language for websites. It is
used to instruct a browser how a webpage
should look, how pictures should be
displayed, and how links and other
elements should appear.
Once you enter HTML, knowing and

understanding tags is the basic need as
this is the separator that differentiates
HTML code from the normal text. These
are the tags that are used to display a
https://www.dreamstime.com document in either ordinary or
https://ca.clipartlogo.com/
transformed text as an instruction.
HTML provides us with various formatting options, which can be

enabled via tags. You can make your text appear bold, underlined, italicized,
and so much more with it. It can help to enhance the viewers ‘look at the web
page, making them more at ease to surf.
Now let us discuss the different kinds of tags.
Formatting Text
HTML contains several elements for defining text with a special meaning.
Text appearance and other details can be changed and added with each new
version of HTML.
Gradually more appearance or formatting tags have been added to control
appearance, but there is still difference on how they appear in different browsers.
These are also Font tags that contain appropriate attributes that control the
different ways of changing and formatting text.
There are two types of HTML tags:
1. Physical tags- These tags provide a visual appeal to the document. For
example, bold, italic, underlined, etc.
2. Logical tags- These tags provide a logical meaning to the text. For
example, the tag.
HTML Highlight
Highlighting text on a web page helps to draw the reader's attention to
crucial information. In HTML, the element is used to mark or highlight
the text.
For example,
<html>
<head>
<title>DataFlair</title>
</head>
<body>
Welcome to DataFlair!
</body>
</html>
The Font Tag: 
The font tag is used to modify a text's size,

color, and style. The basic font tag specifies that all
text be the same size, color, and face. The font tag
has three main properties that are 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 tag. The text that follows will remain changed until you
close with the tag. You can change one or all of the font attributes
within one tag.
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.
This will produce the following result −
EXAMPLE:
<html>
<head>
<title>Setting Font Size</title>

</head>
<body>
Font size = "1" 
Font size = "7"
</body>
</html>
This will produce the following result:
Relative Font Size

It can be indicated as to how many times bigger or less than the default
font size the typeface should be. Font size can be specified like or .
Example:
<head>
<title>Relative Font Size</title>
</head>
<body>
Font size = "-1" 
Font size = "+1" 
Font size = "+4"
</body>
</html>
Setting Font Face

You can set font face using face attribute but be aware that if the user
viewing the page doesn't 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>
<head>
<title>Font Face</title>
</head>
<body>
Times New
Roman 
Verdana 
Comic Sans
MS 
WildWest 
Bedrock 
</body>
</html>

Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock
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:
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
This text is in pink 
This text is red
</body>
</html>

This text is in pink
This text is red
Colors are
given in
the sRGB color
space as
hexadecimal
numbers
(e.g.
COLOR="#C0FFC0"), or
as one of 16 widely understood
color names. These colors
were originally picked as being
the standard 16 colors
supported with the Windows
VGA palette.
HTML Color Codes
Additional Learning Resources

Fonts play a very important role in
making a website more user friendly and increasing 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 tag to add style, size, and color to the text on your website. You
can use a <basefont> tag to set all of your text to the same size, face, and color.
References:
Rahappan, Clarissa, G.,et. al (2007). Journey to Computer Learning 6. Jo-ES Publishing.
https://devmoods.blogspot.com/2021/06/web-development-course-3.html
https://www.tutorialspoint.com/html/html_fonts.html
https://www.w3.org/TR/2018/SPSD-html32-20180315/
Images from:
https://www.w3.org/TR/2018/SPSD-html32-20180315/
https://www.dreamstime.com
https://www.lifewire.com/free-typing-lessons-1356656
Module Creator/Curator : Mrs. LIZA L. GARCIA

Template & Layout Designer : Mrs Jeniffer M. Makalintal

Comp6 Module4 1st Quarter

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Comp6 Module4 1st Quarter

Uploaded by

Copyright:

Available Formats

Module 4– Formatting Text in HTML

Module 4- Formatting Text in HTML

“How does HTML Format Tags

Help?” The Concepts

HTML (Hypertext Markup

Once you enter HTML, knowing and

HTML provides us with various formatting options, which can be

The Font Tag: < FONT>

The font tag is used to modify a text's size,

<title>Setting Font Size</title>

This will produce the following result:

Relative Font Size

This will produce the following result:

Setting Font Face

This will produce the following result:

Setting Font Color

This will produce the following result:

HTML Color Codes

Additional Learning Resources

Module Creator/Curator : Mrs. LIZA L. GARCIA

You might also like