Date post: | 12-Nov-2014 |
Category: |
Technology |
Upload: | intan-jameel |
View: | 625 times |
Download: | 7 times |
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
Programming and Development Tools Web Programming
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 Formattinmatting
able by making the text bold, to distinguish text from other
2.4-2
Programming and Development Tools Web Programming
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> <U>General Knowledge</U> </H1>
<B> 1. Who is the father of Computer? </B>
<BR><I><U> a) Charles Babbage </U> b) John Napier c) Blaise Pascal </I>
<BR> <B> 2. Which is the capital of Australia? </B>
Hands-On!
Sets the text bold
<BR> <I>a) Washington b) Tokyo c) <U>Canberra</U> </I>
Underlines the text
<BR> <B> 3. Where is the smallest bone located in our body? </B>
<BR> <I> a) <U> Ear </U>
b) Nose c) Hand </I>
Sets the text Italic
<BR> <B> 4. How do you call your sister's son? </B>
<BR><I> a) Niece
b)</U> Nephew </U> c) Cousin </I>
Text in HTML 2.4-3
Programming and Development Tools Web Programming
<BR> <B> 5. What number you will get if you add the values in the opposite sides of a dice?</B>
<BR> <I>a) 6 b) <U> 7 </U> c) 8 </I>
</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 <B>, <I> and <U> 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 <B> tag. The text that has to be made bold is enclosed between <B> and </B> tags. For example, in Figure 2.4.2, the following code is used to make the first question bold.
<B> Who is the father of Computer? </B>
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 <I> tag. The text that has to be italicised is enclosed between <I> and </I> tags.
Text in HTML 2.4-4
Programming and Development Tools Web Programming
For example, in Figure 2.4.2, to make the answer a) Charles Babbage Italic, the following code is used:
<I> a) Charles Babbage </I>
Underline In Figure 2.4.2, the heading is underlined. The tag used for underlining a text is <U> tag. The text that has to be underlined is enclosed between <U> and </U> tags. For example, in Figure 2.4.2, the following code is used to underline the text General Knowledge.
<U> General Knowledge </U>
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 <B>, <I> and <U> tags as shown in Figure 2.4.3.
2. Save the HTML file as Activity1.HTML.
Figure 2.4.3: A web page explaining <B>, <I> and <U> tags
Text in HTML 2.4-5
Programming and Development Tools Web Programming
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>
<U> <H1 Align = CENTER> Types of Computers </H1></U><BR>
<B> Mini Computers </B> <BR> <BR>
<I> Micro Computers </I><BR><BR>
<U> Supper Computers </U><BR><BR>
<B> Mainframe Computers </B><BR><BR>
</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 <U> 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>, <SMALL> and <FONT> tags. Hands-On!
The following example illustrates how to format text using the tags such as <BIG>, <SMALL> and <FONT>. 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
Programming and Development Tools Web Programming
<H1 Align=”Center”> The Biggest and the Smallest </H1>
1. The biggest bone in human body is <BIG> Femur </BIG> and the smallest is <SMALL>Stirrup. </SMALL> <BR><BR>
Reduces the size of the text
2. The biggest ocean in the world is <SMALL><SMALL><SMALL> P</SMALL>a</SMALL>c</SMALL>i<BIG>f<BIG>i<BIG>c</BIG></BIG></BIG> ocean and the smallest is <BIG><BIG><BIG>A</BIG>r</BIG>c</BIG>t<SMALL>i<SMALL>c</SMALL></SMALL> ocean. <BR><BR> Increases the size of the text
3. The biggest joy is <BIG>helping others</BIG> and the smallest is <SMALL> getting help from others. </SMALL> <BR><BR>
4. The biggest mistake is <FONT Face="ARIAL" Size="5" Color="GREEN"> doing the same mistake again </FONT> and the smallest is <FONT Face="Courier" Size="1" Color="RED">making mistake without your knowledge. </FONT>
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
Programming and Development Tools Web Programming
Figure 2.4.4: Effects of <BIG>, <SMALL> and <FONT> 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 <SMALL> 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 <SMALL> and </SMALL> 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.
<SMALL> Getting help from others </SMALL>
Font The <FONT> tag is used to modify the face, colour and size of the text. The attributes that can be used with the <FONT> tag are as follows.
• Face - The FACE attribute sets the font face of the text. For example, <FONT Face=”ARIAL”> sets the font face of the text to Arial.
• Size - The SIZE attribute sets the size of the text. For example, <FONT Size=”5”> sets the size of the text to 5.
Text in HTML 2.4-8
Programming and Development Tools Web Programming
• Color – The COLOR attribute sets the colour of the text. For example, <FONT Color=”Green”> 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. <FONT Face="Arial" Size="5" Color="Green"> doing the same mistake again </FONT>
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 <SMALL> 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 <FONT> tag. 4. <BIG> and <SMALL> tags can be used to set the style of a text. 5. <FONT Color=RGB (0, 255, 0)> tag will display the text in green colour.
Activity 2.4.2
1. Create a web page that explains the <BIG>, <SMALL> and <FONT> tags as shown in Figure 2.4.5a and the continuation of the Web page is shown in Figure 2.4.5b
2. Save the HTML file as Activity2.HTML.
Text in HTML 2.4-9
Programming and Development Tools Web Programming
Figure 2.4.5a: A web page explaining <BIG>, <SMALL> and <FONT> 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
Programming and Development Tools Web Programming
<FONT Face = ARIAL Size = 20 Color ="BLACK" >
<U>
<H1 Align = CENTER> Types of Computers </H1>
</U>
</FONT><BR>
<FONT Color = "#0000FF">
<I> Mini Computers </I>
</FONT><BR> <BR>
<FONT Color = "#FF00FF">
<B> Micro Computers </B>
</FONT><BR><BR>
<FONT Color = "#008000">
<B> Supper Computers </B>
</FONT><BR><BR>
<FONT Color = "#800000">
<B> Mainframe Computers </B>
</FONT><BR><BR>
</BODY>
</HTML>
1. Underline the attribute in <FONT> tag. 2. Identify the following attribute
a. Change font colour b. Change font name
Lab Exercise 3: Open D4_3.html in Internet Explorer. The following code will be present in 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
<BR> <BR>
<FONT Size=1> 1 </FONT>
<FONT Size=2> 2 </FONT>
<FONT Size=3> 3 </FONT>
Text in HTML 2.4-11
Programming and Development Tools Web Programming
<FONT Size=4> 4 </FONT>
<FONT Size=5> 5 </FONT>
<FONT Size=6> 6 </FONT>
<FONT Size=7> 7 </FONT>
<FONT Size=6> 6 </FONT>
<FONT Size=5> 5 </FONT>
<FONT Size=4> 4 </FONT>
<FONT Size=3> 3 </FONT>
<FONT Size=2> 2 </FONT>
<FONT Size=1> 1 </FONT>
<BR> <BR>
1 <SMALL>2 <SMALL> 3 <SMALL> 4 <SMALL> 5 <SMALL>6
</SMALL>5 </SMALL> 4 </SMALL> 3</SMALL> 2 </SMALL>1
<BR> <BR>
<FONT Size=7> 1 </FONT>
<FONT Size=6> 2 </FONT>
<FONT Size=5> 3 </FONT>
<FONT Size=4> 4 </FONT>
<FONT Size=3> 5 </FONT>
<FONT Size=2> 6 </FONT>
<FONT Size=1> 7 </FONT>
<FONT Size=2> 6 </FONT>
<FONT Size=3> 5 </FONT>
<FONT Size=4> 4 </FONT>
<FONT Size=5> 3 </FONT>
<FONT Size=6> 2 </FONT>
<FONT Size=7> 1 </FONT>
</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 <Font>, <B>, <I> and <U> 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
Programming and Development Tools Web Programming
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
Programming and Development Tools Web Programming
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 H<SUB>2</SUB> + O<SUB>2</SUB> --> H<SUB>2</SUB>O <BR>
<B>Step 1:</B> Add coefficients (say a and b) to the reactants and products except the first reactant. <BR>
<CENTER> H<SUB>2</SUB> + <FONT Color="Red">a</FONT> O<SUB>2</SUB> --> <FONT Color="Red">b</FONT>H<SUB>2</SUB>O ------- Equation 1 </CENTER><BR>
Hands-On!
Appears as subscript
<B>Step 2:</B> Equate the coefficients of different atoms. <BR>
<CENTER> Hydrogen-------2=2b --------Equation 2 </CENTER><BR>
Centres the text
<CENTER> Oxygen---------2a=b --------Equation 3 </CENTER><BR>
<B>Step 3:</B> Solve the 2 equations and find the values of a and b <BR>
<CENTER> a=<SUP>1</SUP>/<SUB>2</SUB> and b=1 </CENTER><BR>
Appears as superscript
<B>Step 4:</B> Substitute the values of a and b in the equation 1<BR>
Text in HTML 2.4-14
Programming and Development Tools Web Programming
<CENTER> H<SUB>2</SUB> + <SUP>1</SUP>/<SUB>2</SUB> O<SUB>2</SUB> --> 1H<SUB>2</SUB>O </CENTER><BR>
<B>Step 5:</B> Multiply the equation by 2 to remove the fraction <BR>
<CENTER> 2H<SUB>2</SUB> + O<SUB>2</SUB> --> 2H<SUB>2</SUB>O which is balanced. </CENTER>
</BODY>
</HTML>
Code Sample 2.4.3 The output of the above program is shown in Figure 2.4.7.
Figure 2.4.7: Effect of <SUP>, <SUB> 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
Programming and Development Tools Web Programming
The <SUP> tag is used to print the superscript. The text that has to be made as superscript should be enclosed between <SUP> and </SUP> tags. For example, in Figure 2.4.6, the following code is used to make the number 1 as superscript in step 3.
<SUP> 1 </SUP>
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 <SUB> tag is used to print the subscript. The text that has to be made as subscript is enclosed between <SUB> and </SUB> 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.
H<SUB>2</SUB>O
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> 2H<SUB>2</SUB> + O<SUB>2</SUB> -->
2H<SUB>2</SUB>O </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
Programming and Development Tools Web Programming
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>
<B><U>The wrong explanation below is stroked out</U></B><BR><BR>
<B>Reason 1:</B> 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. <BR><BR>
<B>Reason 2:</B> <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>
Code Sample 2.4.4 The output of the above program is shown in Figure 2.4.8.
Text in HTML 2.4-17
Programming and Development Tools Web Programming
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
Programming and Development Tools Web Programming
Lab Exercise
Lab Exercise 5: Open D4_4.html in Internet Explorer. The following code will be present in D4_4.html.
<HTML>
<HEAD>
<TITLE> Pre Text Tag</TITLE>
</HEAD>
<BODY>
<H2> Algebra </H2>
(a+b)<SUP>2</SUP> = a <SUP> 2 </SUP> + b <SUP> 2
</SUP> + 2ab
<H2> Chemical Formulae</H2>
H<SUB>2</SUB>O – 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
Programming and Development Tools Web Programming
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
Programming and Development Tools Web Programming
Activity 2.4.3
1. Create a web page that explains the <SUP>, <SUB>, <CENTER> and <STRIKE> tags as shown in Figure 2.4.10.
2. Save the HTML file as Activity3.HTML.
Figure 2.4.10: A Web page explaining <SUP>, <SUB>, <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
Programming and Development Tools Web Programming
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
Programming and Development Tools Web Programming
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
Programming and Development Tools Web Programming
</HEAD>
<BODY>
<PRE>
<H3> COUNTRY NAME COUNTRY CODE CURRENCY CODE </H3>
<FONT Size = 3>
<B>
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." <BR><BR>
"Friendship is like money, easier made than kept."
</BLOCKQUOTE>
</BODY>
<HTML>
Text in HTML 2.4-24
Programming and Development Tools Web Programming
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 <B> tag is used to make a text bold. The <I> tag is used for italicising the text. The <U> 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 <SMALL> 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
Programming and Development Tools Web Programming
The attributes that can be used with the <FONT> 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 <FONT> 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
Programming and Development Tools Web Programming
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 <FONT> tag over <BIG> tag.
3. Write the use of <SUB> and <SUP> 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
Programming and Development Tools Web Programming
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>, <SMALL> and <FONT> tags. C3 = Change the font face, colour and size of a text. C4 = Use the <SUP> and <SUB> 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