2.4 Text in HTML

  • 378 views
Uploaded on

Text in HTML

Text in HTML

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
378
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Programming and Development Tools Web Programming UNIT 2.4Web ProgrammingText in HTMLOBJECTIVESThis unit helps you to apply various formats to the text to make your webpage 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
  • 2. Programming and Development Tools Web ProgrammingLet 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.IntroductionAn HTML document can contain text, image, table, link etc. The text can be ofany form. It can be a heading or a paragraph. It can be an abbreviation oracronym. It can be a quote or sayings of famous personalities. There shouldbe 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 TextFormatting 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 canformat a text to make it attractive and present it in a more readable form. Forexample, in this page you can see that the size and font face of the heading isdifferent from that of the paragraphs. This improves the readability and addsattraction to the page. Figure 2.4.1 conveys the effect of formatting with thehelp of a diagram. Before Formatting After Formatting Figure 2.4.1: Effect of Formatting2.4.1(A) Bold, Italic and UnderlineThe 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 othernormal text.Text in HTML 2.4-2
  • 3. Programming and Development Tools Web Programming Hands-On!The following example illustrates the use of the most commonly used tagssuch 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b) John Napier &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c) Blaise Pascal </I> Sets the text bold <BR> <B> 2. Which is the capital of Australia? </B> <BR> <I>a) Washington &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b) Tokyo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b) Nose &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c) Hand </I> Sets the text Italic <BR> <B> 4. How do you call your sisters son? </B> <BR><I> a) Niece &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b)</U> Nephew </U> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c) Cousin </I>Text in HTML 2.4-3
  • 4. 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b) <U> 7 </U> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c) 8 </I></BODY></HTML> Code Sample 2.4.1The 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> tagsBoldYou can make a text bold so that it looks distinct from the remaining text. InFigure 2.4.2, the correct answer for each question is made bold to distinguishit 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 firstquestion bold. <B> Who is the father of Computer? </B>ItalicThe italic style is used to make the text slanted to the right. In Figure 2.4.2, allthe questions are italicised. The tag used for italicising a text is <I> tag. Thetext that has to be italicised is enclosed between <I> and </I> tags.Text in HTML 2.4-4
  • 5. Programming and Development Tools Web ProgrammingFor example, in Figure 2.4.2, to make the answer a) Charles Babbage Italic, thefollowing code is used: <I> a) Charles Babbage </I>UnderlineIn Figure 2.4.2, the heading is underlined. The tag used for underlining a textis <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 textGeneral Knowledge. <U> General Knowledge </U> Self-Check Exercise 2.4.1Write 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.11. 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> tagsText in HTML 2.4-5
  • 6. Programming and Development Tools Web Programming Lab ExerciseLab Exercise 1: Open D4_1.html in Internet Explorer. The following code will be present inD4_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 tagsIn an HTML document, the size of the text can be made bigger or smaller thanthe 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
  • 7. 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> andthe smallest is <SMALL> getting help from others.</SMALL> <BR><BR> Sets the face, colour and size of the text 4. The biggest mistake is <FONT Face="ARIAL" Size="5"Color="GREEN"> doing the same mistake again </FONT> andthe smallest is <FONT Face="Courier" Size="1"Color="RED">making mistake without your knowledge.</FONT></BODY></HTML> Code Sample 2.4.2The output of the above program is shown in Figure 2.4.4.Text in HTML 2.4-7
  • 8. Programming and Development Tools Web Programming Figure 2.4.4: Effects of <BIG>, <SMALL> and <FONT> tagsBigThe <BIG> tag is used to make the size of the text slightly bigger than thecurrent size of the text. The text that has to be made bigger than the currentsize 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 phrasehelping others bigger than the other text. <BIG> Helping others </BIG>SmallThe <SMALL> tag is used to make the size of the text slightly smaller thanthe current size of the text. The text that has to be made smaller than thecurrent size should be enclosed between <SMALL> and </SMALL> tags. InFigure.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 phrasegetting help from others smaller than the other text. <SMALL> Getting help from others </SMALL>FontThe <FONT> tag is used to modify the face, colour and size of the text. Theattributes 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
  • 9. 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 thesame mistake again is modified using the following code. <FONT Face="Arial" Size="5" Color="Green"> doing thesame mistake again </FONT> NoteThe value of the colour attribute can be given in the form of names, RGB values orhexadecimal values. Self-Check Exercise 2.4.2Correct 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
  • 10. Programming and Development Tools Web ProgrammingFigure 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 ExerciseLab 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
  • 11. 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 nameLab 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
  • 12. 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
  • 13. Programming and Development Tools Web Programming Figure 2.4.6: Information about Malaysia2.4.1(C) Subscript, Superscript and CentreIn a quadratic equation, say x2+2x+12=0, the number 2 in x2 is smaller andabove the line of previous text. This text is known as Superscript. In a chemicalformula, 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 SubscriptText in HTML 2.4-13
  • 14. Programming and Development Tools Web Programming Hands-On!The following example illustrates how to display subscripts and superscripts ina 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 thereactants and products except the first reactant. <BR> Appears as subscript<CENTER> H<SUB>2</SUB> + <FONT Color="Red">a</FONT>O<SUB>2</SUB> --> <FONTColor="Red">b</FONT>H<SUB>2</SUB>O ------- Equation 1</CENTER><BR><B>Step 2:</B> Equate the coefficients of differentatoms. <BR> Centres the text<CENTER> Hydrogen-------2=2b --------Equation 2</CENTER><BR><CENTER> Oxygen---------2a=b --------Equation 3</CENTER><BR><B>Step 3:</B> Solve the 2 equations and find the valuesof 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 theequation 1<BR>Text in HTML 2.4-14
  • 15. 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 thefraction <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.3The output of the above program is shown in Figure 2.4.7. Figure 2.4.7: Effect of <SUP>, <SUB> and <CENTER> tagsSuperscriptSuperscript 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 thepreceding text. Consider the quadratic equation x2 + 4x + 3. In this equation,the number 2 is superscripted.Text in HTML 2.4-15
  • 16. Programming and Development Tools Web ProgrammingThe <SUP> tag is used to print the superscript. The text that has to be madeas 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 1as superscript in step 3. <SUP> 1 </SUP> WarningDo not leave space between < symbol and first letter of a tag and also between the last letter ofa tag and < symbol.SubscriptSubscript 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 precedingtext. 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 assubscript is enclosed between <SUB> and </SUB> tags.For example, in Figure 2.4.6, the following code is used to make the number 2as subscript in the chemical formula, H2O. H<SUB>2</SUB>OCenterThe <CENTER> tag is used to display the text in the centre of a row. The textto 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.3Write the HTML code to display the following equations in the center of each line.1. Cos 2A = 2 Cos2A – 12. Cos 2A = Cos2A – Sin2A3. Cos 2A = 1 – 2 Sin2A4. 3 Cu + 8 HNO3 --> 3 Cu(NO3)2 + 2 NO + 4 H2O5. PbO2 + 4 HCl --> PbCl2 + Cl2 + 2 H2O2.4.1(D) Pre-Formatted Text and StrikeoutYou can straight away format the text and display it in the browser window asyou have formatted. A text can be stroked out using the <STRIKE> tag.Text in HTML 2.4-16
  • 17. Programming and Development Tools Web Programming 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 theninflate it. 4. Heat the first balloon with flame. It blastsquickly. 5. Now, heat the second balloon with flame. You cansee that the second balloon with water does not blastquickly. </PRE> <B><U>The wrong explanation below is strokedout</U></B><BR><BR> <B>Reason 1:</B> This is because the water in thesecond balloon absorbs the heat so that the balloon doesnot become weak. Thus the second balloon withstands theheat. <BR><BR> Strikes out a text <B>Reason 2:</B> <STRIKE>This is because the balloonwithout water is light. So, it blasts quickly. Theballoon with water is heavy. So, it does not blastquickly. </STRIKE></BODY></HTML> Code Sample 2.4.4The output of the above program is shown in Figure 2.4.8.Text in HTML 2.4-17
  • 18. Programming and Development Tools Web Programming Figure 2.4.8: Effect of <PRE> and <STRIKE> tagsPre-Formatted TextThe text within the <PRE> tag will be displayed in the browser window in thesame format as it is presented in the HTML document.For example, in Figure 2.4.7, the following code is used to display the pointsgiven under the heading A Simple Experiment as it is presented in the HTMLdocument.<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
  • 19. Programming and Development Tools Web Programming Lab ExerciseLab 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
  • 20. Programming and Development Tools Web ProgrammingLab 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 MalaysiaStrike OutA text can be stroked out using the <STRIKE> tag. The text that has toappear 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 tostrike 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
  • 21. 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> tags2.4.2 QuotationsQuotation is a note or a cite that has to be differentiated from the other normaltext in a Web page. The text given as quotation is intended from the left andright margins as shown in Figure 2.4.11.Text in HTML 2.4-21
  • 22. Programming and Development Tools Web Programming Figure 2.4.11: A Web page displaying quotesThe tag used to give quotations is <BLOCKQUOTE>. The quote should beenclosed between <BLOCKQUOTE> and </BLOCKQUOTE> tags. Forexample, 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 AcronymsYou 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 ispronounced as spelling, then it is Abbreviation. If the short form of a text ispronounced as a word, then it is Acronym.2.4.3(A) AbbreviationExamples of abbreviation areHTML - Hypertext Mark-up LanguageWWW - World Wide Web.Text in HTML 2.4-22
  • 23. Programming and Development Tools Web ProgrammingThese are called abbreviation because HTML and WWW are pronounced bytheir spellings.Abbreviations can be displayed using <ABBR> tag. The attribute used withthis tag is TITLE. The expansion should be given as attribute and its shortform should be given between the starting and ending tags as given below inthe 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 bedisplayed as a popup when the mouse pointer is placed on the short form. WarningThe <ABBR> tag does not work in Internet explorer version 5 and above.2.4.3(B) AcronymExamples of acronym areCOBOL – Common Business Oriented LanguageVIRUS – Vital Information Resources Under Siege.These are called acronym because COBOL and VIRUS are pronounced aswords.Acronym can be displayed using <ACRONYM> tag. The attribute used withthis tag is TITLE. The expansion should be given as attribute and its shortform should be given between the starting and ending tags as given below inthe 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 bedisplayed as a popup when the mouse pointer is placed on the short form. Lab ExerciseLab Exercise 7: Open D4_5.html in Internet Explorer. The following code will be presented inD4_5.html.<HTML><HEAD> <TITLE> World Currencies</TITLE> <H1 Align="CENTER"> World Currencies </H1>Text in HTML 2.4-23
  • 24. 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 getenough money to do otherwise." <BR><BR> "Friendship is like money, easier made than kept."</BLOCKQUOTE></BODY><HTML>Text in HTML 2.4-24
  • 25. 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 Figure2.4.12 using all the tags you learnt from this unit. Save the file as Climate.html under the folderin your name in C:. Figure 2.4.12: Weather and Climate in Malaysia Technical TerminologiesFormatting - Formatting a text refers to modifying the appearance of a text to make the text attractive and more readable.SummaryIn 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
  • 26. 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.AssignmentI. Solve the following crossword: 1 2 3 4 5 6 7 8 9Across2. 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.Down1. 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
  • 27. Programming and Development Tools Web Programming4. 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
  • 28. Programming and Development Tools Web ProgrammingCriterion Referenced TestInstruction: Students must evaluate themselves to attain the list ofcompetencies to be achieved.Name:Subject: Programming and Development toolsUnit: Text in HTMLPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency.Date Text in HTML C1 C2 C3 C4 C5 C6 C7CommentCompetency codesC1 = 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 documentC7 = Write a program in HTML using all the tags learnt in this lesson,Text in HTML 2.4-28