2.4 Text in HTML

Programming and Development Tools Web Programming

UNIT

2.4
Web Programming
Text in HTML

OBJECTIVES
This unit helps you to apply various formats to the text to make your web
page more attractive and readable.
At the end of this unit, you will be able to
Make the text bold, italic and underlined
Change the size, colour and font face of a text
Align the text to the centre of a page
Display the text as superscript and subscript
Apply Pre-Formatted text to your document
Strike out a text in your document
Insert quotes in your Web page.
Include abbreviations and acronyms in your Web page.

Benchmark standard
Format the text for different requirements to make your web page
more attractive and fulfil the requirements.

Text in HTML 2.4-1

Let us Revise!

1. Name the six levels of heading tags.
2. Write the different ways of aligning a paragraph.
3. Write how you will add line breaks.
4. Name the attributes of <MARQUEE> tag.
5. Write the use of character entities.

Introduction
An HTML document can contain text, image, table, link etc. The text can be of
any form. It can be a heading or a paragraph. It can be an abbreviation or
acronym. It can be a quote or sayings of famous personalities. There should
be difference between these types of text when displayed on a Web page.
These texts are differentiated with the help of tags.

2.4.1 Formatting Text
Formatting a text refers to modifying the appearance of a text. In a web page,
if the text is not formatted it will give a monotonous appearance. You can
format a text to make it attractive and present it in a more readable form. For
example, in this page you can see that the size and font face of the heading is
different from that of the paragraphs. This improves the readability and adds
attraction to the page. Figure 2.4.1 conveys the effect of formatting with the
help of a diagram.

Before Formatting After Formatting
Figure 2.4.1: Effect of Formatting

2.4.1(A) Bold, Italic and Underline
The text can be made more attractive and readable by making the text bold,
italic or underlined. These formats are also used to distinguish text from other
normal text.

Text in HTML 2.4-2

Hands-On!

The following example illustrates the use of the most commonly used tags
such as Bold, Italics and Underline.
Open the HTML file BIU.HTML in Hands On Folder.
<HTML>
<HEAD>
<TITLE> Text Formatting </TITLE>
</HEAD>
<BODY>
<H1 Align=Center> General Knowledge </H1>

 1. Who is the father of Computer? 
 a) Charles Babbage 
      b) John Napier
     c) Blaise Pascal


Sets the text bold

 2. Which is the capital of Australia? 
 a) Washington
     b) Tokyo
     c) Canberra

Underlines the text

 3. Where is the smallest bone located in our
body? 
 a) Ear 
     b) Nose
     c) Hand 
Sets the text Italic

 4. How do you call your sister's son? 
 a) Niece
      b) Nephew 
     c) Cousin 

Text in HTML 2.4-3

5. What number you will get if you add the
values in the opposite sides of a dice?
 a) 6       b) 7
      c) 8 
</BODY>
</HTML>
Code Sample 2.4.1
The output of the above HTML code is shown in Figure 2.4.2.

Figure 2.4.2: A Web page using , and tags

Bold
You can make a text bold so that it looks distinct from the remaining text. In
Figure 2.4.2, the correct answer for each question is made bold to distinguish
it from the wrong answers. The tag used to make a text bold is the tag.
The text that has to be made bold is enclosed between and tags.
For example, in Figure 2.4.2, the following code is used to make the first
question bold.
 Who is the father of Computer? 
Italic
The italic style is used to make the text slanted to the right. In Figure 2.4.2, all
the questions are italicised. The tag used for italicising a text is tag. The
text that has to be italicised is enclosed between and tags.

Text in HTML 2.4-4

For example, in Figure 2.4.2, to make the answer a) Charles Babbage Italic, the
following code is used:
 a) Charles Babbage 
Underline
In Figure 2.4.2, the heading is underlined. The tag used for underlining a text
is tag. The text that has to be underlined is enclosed between and
 tags.
For example, in Figure 2.4.2, the following code is used to underline the text
General Knowledge.
 General Knowledge 

Self-Check Exercise 2.4.1

Write the code to apply bold, italic and underline formats to the following text:
A drop of ink may make a million think

Activity 2.4.1

1. Create a web page that explains the , and tags as shown in
Figure 2.4.3.
2. Save the HTML file as Activity1.HTML.

Figure 2.4.3: A web page explaining , and tags

Text in HTML 2.4-5

Lab Exercise

Lab Exercise 1: Open D4_1.html in Internet Explorer. The following code will be present in
D4_1.html.
<HTML>
<HEAD>
<TITLE> Text Styles</TITLE>
</HEAD>
<BODY>
 <H1 Align = CENTER> Types of Computers
</H1> 
 Mini Computers 
 Micro Computers 

 Supper Computers 
 Mainframe Computers 
</BODY>
</HTML>
1. View the source code in Notepad.
2. Identify the tag, which is used for display the output in bold and underline.
3. Name the tag, which is used for the text Micro Computers.
4. Identify the tag in the source code of D4_1.html.
5. Change the style of the Mainframe Computers bold, italic and underline.

2.4.1(B) Big, Small and Font tags
In an HTML document, the size of the text can be made bigger or smaller than
the normal text. The size of the text can be modified using the <BIG>,
 and tags.

Hands-On!

The following example illustrates how to format text using the tags such as
<BIG>, and .
Open the HTML file BigSmall.HTML in Hands On Folder
<HTML>
<HEAD>
<TITLE> Biggest and Smallest </TITLE>
</HEAD>
<BODY>

Text in HTML 2.4-6

<H1 Align=”Center”> The Biggest and the Smallest </H1>

1. The biggest bone in human body is <BIG> Femur
</BIG> and the smallest is Stirrup. 
 
Reduces the size of the
text

2. The biggest ocean in the world is

Paci<BIG>f<BIG>i<BIG>c</BIG></BIG
></BIG> ocean and the smallest is
<BIG><BIG><BIG>A</BIG>r</BIG>c</BIG>tic</SM
ALL> ocean. Increases the size of the text

3. The biggest joy is <BIG>helping others</BIG> and
the smallest is getting help from others.
 
Sets the face, colour and size of the text

4. The biggest mistake is doing the same mistake again and
the smallest is making mistake without your knowledge.

</BODY>
</HTML>
Code Sample 2.4.2

The output of the above program is shown in Figure 2.4.4.

Text in HTML 2.4-7

Figure 2.4.4: Effects of <BIG>, and tags

Big
The <BIG> tag is used to make the size of the text slightly bigger than the
current size of the text. The text that has to be made bigger than the current
size should be enclosed between <BIG> and </BIG> tags. In Figure 2.4.4,
the word Femur is slightly bigger than the text before it.
For example, in Figure 2.4.4, the following code is used to make the phrase
helping others bigger than the other text.
<BIG> Helping others </BIG>

Small
The tag is used to make the size of the text slightly smaller than
the current size of the text. The text that has to be made smaller than the
current size should be enclosed between and tags. In
Figure.2.4.4, the word Stirrup is slightly smaller than the text before it.
For example, in Figure 4, the following code is used to make the phrase
getting help from others smaller than the other text.
 Getting help from others 

Font
The tag is used to modify the face, colour and size of the text. The
attributes that can be used with the tag are as follows.
• Face - The FACE attribute sets the font face of the text. For example,
 sets the font face of the text to Arial.
• Size - The SIZE attribute sets the size of the text. For example, sets the size of the text to 5.

Text in HTML 2.4-8

• Color – The COLOR attribute sets the colour of the text. For example,
 sets the colour of the text to Green.
In Figure 2.4.4, the font colour, font size and font face of the text doing the
same mistake again is modified using the following code.
 doing the
same mistake again 

Note

The value of the colour attribute can be given in the form of names, RGB values or
hexadecimal values.

Self-Check Exercise 2.4.2

Correct the following sentences if they are wrong.
1. The size of the text can be modified using the SIZE attribute of the <BIG> tag.
2. The tag makes the size of the text slightly smaller than the current size of
the text.
3. The colour of the text cannot be changed using the tag.
4. <BIG> and tags can be used to set the style of a text.
5. tag will display the text in green colour.

Activity 2.4.2

1. Create a web page that explains the <BIG>, and
 tags as shown in Figure 2.4.5a and the continuation of the
Web page is shown in Figure 2.4.5b

Text in HTML 2.4-9

Figure 2.4.5a: A web page explaining <BIG>, and tags

Figure 2.4.5b: Continuation of the Web page shown in Figure 2.4.5

Lab Exercise

D4_2.html.
<HTML>
<HEAD>
<TITLE>Fonts</TITLE>
</HEAD>

Text in HTML 2.4-10

<H1 Align = CENTER> Types of Computers </H1>

 

 Mini Computers 
 

 Micro Computers 
 

 Supper Computers 
 

 Mainframe Computers 
 
</BODY>
</HTML>
1. Underline the attribute in tag.
2. Identify the following attribute
a. Change font colour
b. Change font name

D4_3.html.
<HTML>
<HEAD>
<TITLE> Font and Big and Small Tag </TITLE>
</HEAD>
<BODY>
1<BIG> 2 <BIG> 3 <BIG> 4 <BIG> 5 <BIG> 6
</BIG> 5 </BIG> 4 </BIG> 3 </BIG> 2</BIG>1
 
 1 

Text in HTML 2.4-11

1 2 3 4 5 6
5 4 3 2 1
 
</BODY>
</HTML>
1. Identify the attribute which is used to change the size of the text?
2. Locate the tag which is used to make the size of the text slightly bigger than the current
size of the text?
3. Name the tag which is used to make the size of the text slightly smaller than the
current size of the text?

Lab Exercise 4: Open Malaysia.html that you have created under the folder in your name in
C:. Add , , and tags into the file and display the output as
given in the Information about Malaysia Figure 2.4.6.

Text in HTML 2.4-12


Figure 2.4.6: Information about Malaysia

2.4.1(C) Subscript, Superscript and Centre
In a quadratic equation, say x2+2x+12=0, the number 2 in x2 is smaller and
above the line of previous text. This text is known as Superscript. In a chemical
formula, say H2O, the number 2 is smaller and below the line of previous text.
This text is known as Subscript.

Superscript

x2+7x+12=0

H2O
Subscript

Text in HTML 2.4-13

Hands-On!

The following example illustrates how to display subscripts and superscripts in
a Web page.
Open the HTML file SupSub.HTML.
<HTML>
<HEAD>
<TITLE> Balancing Chemical Equations </TITLE>
</HEAD>
<BODY>
<H1 Align=Center> Steps to balance a chemical equation
</H1>
Consider the unbalanced chemical equation H2 +
O2 --> H2O 

Step 1: Add coefficients (say a and b) to the
reactants and products except the first reactant. 
Appears as subscript

<CENTER> H2 + a
O2 --> bH2O ------- Equation 1
</CENTER> 

Step 2: Equate the coefficients of different
atoms. Centres the text

<CENTER> Hydrogen-------2=2b --------Equation 2
</CENTER> 
<CENTER> Oxygen---------2a=b --------Equation 3
</CENTER> 

Step 3: Solve the 2 equations and find the values
of a and b 

<CENTER> a=1/2 and b=1
</CENTER> 
Appears as superscript

Step 4: Substitute the values of a and b in the
equation 1 

Text in HTML 2.4-14

<CENTER> H2 + 1/2
O2 --> 1H2O </CENTER> 

Step 5: Multiply the equation by 2 to remove the
fraction 

<CENTER> 2H2 + O2 -->
2H2O which is balanced. </CENTER>

</BODY>
</HTML>
Code Sample 2.4.3

Figure 2.4.7: Effect of , and <CENTER> tags

Superscript
Superscript is the text that is displayed slightly above the line of preceding text.
The size of the superscript is small when compared to the size of the
preceding text. Consider the quadratic equation x2 + 4x + 3. In this equation,
the number 2 is superscripted.

Text in HTML 2.4-15

The tag is used to print the superscript. The text that has to be made
as superscript should be enclosed between and tags.
For example, in Figure 2.4.6, the following code is used to make the number 1
as superscript in step 3.
 1 

Warning

Do not leave space between < symbol and first letter of a tag and also between the last letter of
a tag and < symbol.

Subscript
Subscript is the text that is displayed slightly below the line of preceding text.
The size of the subscript is small when compared to the size of the preceding
text. For example, the number 2 is subscripted in the chemical formula H2O.
The tag is used to print the subscript. The text that has to be made as
subscript is enclosed between and tags.
For example, in Figure 2.4.6, the following code is used to make the number 2
as subscript in the chemical formula, H2O.
H2O

Center
The <CENTER> tag is used to display the text in the centre of a row. The text
to be centred is enclosed between the <CENTER> and </CENTER> tags.
For example, in Figure 2.4.6, to centre the chemical equation 2H2 + O2
2H2O the following code is used:
<CENTER> 2H2 + O2 -->
2H2O </CENTER>

Self Check Exercise 2.4.3

Write the HTML code to display the following equations in the center of each line.
1. Cos 2A = 2 Cos2A – 1
2. Cos 2A = Cos2A – Sin2A
3. Cos 2A = 1 – 2 Sin2A
4. 3 Cu + 8 HNO3 --> 3 Cu(NO3)2 + 2 NO + 4 H2O
5. PbO2 + 4 HCl --> PbCl2 + Cl2 + 2 H2O

2.4.1(D) Pre-Formatted Text and Strikeout
You can straight away format the text and display it in the browser window as
you have formatted. A text can be stroked out using the <STRIKE> tag.

Text in HTML 2.4-16

Hands-On!

The following example illustrates the <PRE> and <STRIKE> tags.
Open the HTML file Strike.HTML.

<HTML>
<HEAD>
<TITLE> Simple Experiment </TITLE>
</HEAD>
<BODY>
<H1 Align="CENTER"> A Simple Experiment </H1>
<PRE>
Pre-formatted text
1. Take two balloons.
2. Inflate one balloon and hang it.
3. Fill ¼ of the second balloon with water and then
inflate it.
4. Heat the first balloon with flame. It blasts
quickly.
5. Now, heat the second balloon with flame. You can
see that the second balloon with water does not blast
quickly.
</PRE>
The wrong explanation below is stroked
out 
Reason 1: This is because the water in the
second balloon absorbs the heat so that the balloon does
not become weak. Thus the second balloon withstands the
heat. Strikes out a text
Reason 2: <STRIKE>This is because the balloon
without water is light. So, it blasts quickly. The
balloon with water is heavy. So, it does not blast
quickly. </STRIKE>
</BODY>
</HTML>
Code Sample 2.4.4

Text in HTML 2.4-17

Figure 2.4.8: Effect of <PRE> and <STRIKE> tags

Pre-Formatted Text
The text within the <PRE> tag will be displayed in the browser window in the
same format as it is presented in the HTML document.
For example, in Figure 2.4.7, the following code is used to display the points
given under the heading A Simple Experiment as it is presented in the HTML
document.

<PRE>
1. Take two balloons.
2. Inflate one balloon and hang it.
3. Fill half of the second balloon with water and
then inflate it.
4. Heat the first balloon with flame. It blasts
quickly.
5. Now, heat the second balloon with flame. You can
see that the second balloon with water does not
blast quickly.
</PRE>

Text in HTML 2.4-18

Lab Exercise

D4_4.html.
<HTML>
<HEAD>
<TITLE> Pre Text Tag</TITLE>
</HEAD>
<BODY>

<H2> Algebra </H2>
(a+b)2 = a 2 + b 2
 + 2ab
<H2> Chemical Formulae</H2>
H2O – Water
<H2> International Dialling Code </H2>
<PRE>
=====================================
Country | International code
=====================================
America | 001
------------------------------------
Canada | 001
------------------------------------
India | 0091
------------------------------------
Malaysia | 006
------------------------------------
Singapore | 065
------------------------------------
</PRE>
</BODY>
</HTML>
1. Identify the tag, which is used for display the output in superscript.
2. Underline the tag, which is used for display the output in subscript.
3. Name the tag which is used displays the text the same as it is typed in the HTML
document.

Text in HTML 2.4-19

Lab Exercise 6: Write a HTML code to display the output as given in the States of Malaysia
Figure 2.4.9 using the font and pre tag. Save the file as States.html under
the folder in your name in C:.

Figure 2.4.9: States of Malaysia

Strike Out
A text can be stroked out using the <STRIKE> tag. The text that has to
appear as a stroked-out text should be enclosed within <STRIKE> and
</STRIKE> tags. For example, in Figure 2.4.7, the following code is used to
strike out the text against Reason 2.

<STRIKE>
This is because the balloon without water is
light. So, it blasts quickly. The balloon with
water is heavy. So, it does not blast quickly.
</STRIKE>

Text in HTML 2.4-20

Activity 2.4.3

1. Create a web page that explains the , , <CENTER>
and <STRIKE> tags as shown in Figure 2.4.10.

Figure 2.4.10: A Web page explaining , , <CENTER> and
<STRIKE> tags

2.4.2 Quotations
Quotation is a note or a cite that has to be differentiated from the other normal
text in a Web page. The text given as quotation is intended from the left and
right margins as shown in Figure 2.4.11.

Text in HTML 2.4-21

Figure 2.4.11: A Web page displaying quotes

The tag used to give quotations is <BLOCKQUOTE>. The quote should be
enclosed between <BLOCKQUOTE> and </BLOCKQUOTE> tags. For
example, the code to display a text as a quote is
<BLOCKQUOTE>
Education is production of knowledge and reduction
of ignorance.
</BLOCKQUOTE>

2.4.3 Abbreviations and Acronyms
You know that abbreviation and acronym are the short forms of texts. But,
there is a main difference between them. If the short form of a text is
pronounced as spelling, then it is Abbreviation. If the short form of a text is
pronounced as a word, then it is Acronym.

2.4.3(A) Abbreviation
Examples of abbreviation are
HTML - Hypertext Mark-up Language
WWW - World Wide Web.

Text in HTML 2.4-22

These are called abbreviation because HTML and WWW are pronounced by
their spellings.
Abbreviations can be displayed using <ABBR> tag. The attribute used with
this tag is TITLE. The expansion should be given as attribute and its short
form should be given between the starting and ending tags as given below in
the two examples:
1. <ABBR TITLE=” Hypertext Mark-up Language”> HTML </ABBR>
2. <ABBR TITLE=” World Wide Web”> WWW </ABBR>
In the Web page, the short form given will be displayed. Its expansion will be
displayed as a popup when the mouse pointer is placed on the short form.

Warning
The <ABBR> tag does not work in Internet explorer version 5 and above.

2.4.3(B) Acronym
Examples of acronym are
COBOL – Common Business Oriented Language
VIRUS – Vital Information Resources Under Siege.
These are called acronym because COBOL and VIRUS are pronounced as
words.
Acronym can be displayed using <ACRONYM> tag. The attribute used with
this tag is TITLE. The expansion should be given as attribute and its short
form should be given between the starting and ending tags as given below in
the two examples:
1. <ACRONYM Title=”Common Business Oriented Language”>
COBOL </ACRONYM>
2. <ACRONYM Title=”Vital Information Resources Under Siege”>
VIRUS </ACRONYM>
In the Web page, the short form given will be displayed. Its expansion will be
displayed as a popup when the mouse pointer is placed on the short form.

Lab Exercise

Lab Exercise 7: Open D4_5.html in Internet Explorer. The following code will be presented in
D4_5.html.
<HTML>
<HEAD>
<TITLE>
World Currencies
</TITLE>
<H1 Align="CENTER"> World Currencies </H1>

Text in HTML 2.4-23

</HEAD>
<BODY>
<PRE>
<H3> COUNTRY NAME COUNTRY CODE CURRENCY CODE </H3>


Australia AU <ACRONYM
Title="AUSTRALIAN
DOLLAR">AUD</ACRONYM>

India IN <ACRONYM Title="Indian
Rupee">INR</ACRONYM>

Malaysia MY <ACRONYM
Title="Ringgit
Malaysia">MYR

United Arab Emirates AE <ACRONYM Title="UAE
Dirham">AED </ACRONYM>

United Kingdom GB <ACRONYM Title="Pound
Sterling"> UKP
</ACRONYM>
United States of America US <ACRONYM Title="US
Dollar"> USD </ACRONYM>

Singapore SG <ACRONYM
Title="Singapore
Dollar"> SGD </ACRONYM>
</PRE>
<BLOCKQUOTE>
"Early to bed and early to rise -- till you get
enough money to do otherwise." 
"Friendship is like money, easier made than kept."
</BLOCKQUOTE>
</BODY>
<HTML>

Text in HTML 2.4-24

1. Identify the tag, which is used for create short form of text?
2. Locate the tag, which is used for indent?

Lab Exercise 8: Write a HTML code to display the output as given in the following Figure
2.4.12 using all the tags you learnt from this unit. Save the file as Climate.html under the folder
in your name in C:.

Figure 2.4.12: Weather and Climate in Malaysia

Technical Terminologies

Formatting - Formatting a text refers to modifying the appearance of
a text to make the text attractive and more readable.

Summary
In this unit, you learnt that
The tag is used to make a text bold.
The tag is used for italicising the text.
The tag is used for underlining a text.
The <BIG> tag is used to make the size of the text slightly bigger
than the current size of the text.
The tag is used to make the size of the text slightly
smaller than the current size of the text.

Text in HTML 2.4-25

The attributes that can be used with the tag are Face,
Size and Color.
Superscript is the text that is displayed slightly above the line of
text.
Subscript is the text that is displayed slightly below the line of text.
The <CENTER> tag is used to display the text in the center of a
row.
The text within the <PRE> tag will be displayed in the browser
window in the same format as it is presented in the HTML
document.
A text can be stroked out using the <STRIKE> tag.

Assignment

I. Solve the following crossword:
1 2

3 4

5

6 7

8

9

Across
2. Tag used to display 3 in CH3COOH.
5. Mark the text as important using this tag.
7. Pre-formatting tag.
8. An attribute of tag.
9. An attribute to make the text colourful.

Down
1. Change the font to Arial.
2. ______ the wrong text.
3. Tag to display text slightly above the line of text.

Text in HTML 2.4-26

4. Centre the text.
6. Make the size of the text slightly bigger than the current size of the text.

II Answer the following questions:

1. Name the tag to make a text bold, italic and underlined.
2. List the advantages of tag over <BIG> tag.
3. Write the use of and tags.
4. Name the tag used to centre align a text.
5. Which tag is used to strike out a text?

Text in HTML 2.4-27

Criterion Referenced Test

Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development tools
Unit: Text in HTML

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.

Date Text in HTML
C1 C2 C3 C4 C5 C6 C7

Comment

Competency codes

C1 = Make a text bold, italic, underlined and centre it.
C2 = Differentiate between <BIG>, and tags.
C3 = Change the font face, colour and size of a text.
C4 = Use the and tags in different equations.
C5 = Identify the use of <PRE> and <STRIKE> tags.
C6 = Write how will you add quotes, abbreviation and acronym to your
document
C7 = Write a program in HTML using all the tags learnt in this lesson,

Text in HTML 2.4-28

2.4 Text in HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 2.4 Text in HTML

Ähnlich wie 2.4 Text in HTML (20)

Mehr von Intan Jameel

Mehr von Intan Jameel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

2.4 Text in HTML