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.

g g

Figure 2.4.1: Effect of For

2.4.1(A) Bold, Italic and Underline The text can be made more attractive and readitalic or underlined. These formats are also usednormal text.

Text in HTML

After Formattin
Before Formattin
matting

able by making the text bold, to distinguish text from other

2.4-2


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 

 2. Which is the capital of Australia? 

Hands-On!

Sets the text bold

 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 ocean. Increases the size of the text

3. The biggest joy is <BIG>helping others</BIG> and the smallest is getting help from others. 

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

Sets the face, colour and size of the text

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

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

Note

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

Lab Exercise 2: Open D4_2.html in Internet Explorer. The following code will be present in 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


<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.

x2+7x+12=0

Superscript

H2O

Subscript

Text in HTML 2.4-13


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. 

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

Hands-On!

Appears as subscript

Step 2: Equate the coefficients of different atoms. 

<CENTER> Hydrogen-------2=2b --------Equation 2 </CENTER> 

Centres the text

<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>


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


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>

1. Take two balloons.

Hands-On!

Pre-formatted text

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. 

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>

Strikes out a text

</BODY>

</HTML>


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


<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. The <ABBR> tag does not work in Internet explorer version 5 and above.

Warning

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

Technology

text bold

niece b nephew c cousin

text italic

washington b tokyo c

ear b nosec hand

opposite sides

smallest bone

sisters son